var scrollWidth = 0;
var actualWidth = 0;
var paneWidth = 0;

function redrawButtons()
{
	var layer =$("div#image-thumb-pane #image-thumbs"); 
	var currentLeft = parseInt( layer.css("left")) ;
	
	//alert( Math.abs( currentLeft  - scrollWidth ) );
	
	if( Math.abs( currentLeft  - scrollWidth ) >= actualWidth )
	{
		$("div#image-thumb-pane div#left-scroll-arrow").fadeOut("slow");
		$("div#image-thumb-pane div#left-scroll-arrow a").hide();
	}
	else
	{
		$("div#image-thumb-pane div#left-scroll-arrow").fadeIn("slow")
		$("div#image-thumb-pane div#left-scroll-arrow a").show();
	}
	
	if( currentLeft >= 0 )
	{
		$("div#image-thumb-pane div#right-scroll-arrow").fadeOut("slow");
		$("div#image-thumb-pane div#right-scroll-arrow a").hide();
	}
	else
	{
		$("div#image-thumb-pane div#right-scroll-arrow").fadeIn("slow");
		$("div#image-thumb-pane div#right-scroll-arrow a").show();
	}
};

function animateImageThumbs(left)
{
	var layer =$("div#image-thumb-pane #image-thumbs"); 
	var currentLeft = parseInt( layer.css("left")) ;
	var scrollDisp = scrollWidth;
	
	if(left)
	{
		if( Math.abs( currentLeft  - scrollWidth ) >= actualWidth )
		{

			return;
		}
		scrollDisp = actualWidth - Math.abs( currentLeft  - scrollWidth ) > scrollWidth ? scrollWidth : actualWidth - Math.abs( currentLeft  - scrollWidth ) ; 
		//alert(scrollDisp);
	}
	else
	{
		if( currentLeft >= 0 )
		{

			return;
		}
		scrollDisp = currentLeft + scrollWidth < 0 ? scrollWidth : Math.abs(currentLeft);
	}
	
	
	//redrawButtons();
	layer.animate(
		{ left: currentLeft + (left?-scrollDisp : +scrollDisp) } 
		, "slow" , "linear" , redrawButtons
	);
	
}

$(function(){
	var li = $("div#image-thumb-pane ul#image-thumbs li");
	if(li.length>0)
	{
		var elemWidth = ( parseInt(li.css("margin-left")) + parseInt(li.css("margin-right")) + li.width());
		actualWidth = li.length * elemWidth; 
		scrollWidth = elemWidth * 6;
		paneWidth = $("div#image-thumb-pane div#image-gallery").width();
		redrawButtons();
	}
	if(paneWidth > actualWidth)
	{
		$("div#image-thumb-pane div#image-gallery").width(actualWidth).css("float","none");
	}

	$("div#image-thumb-pane div#left-scroll-arrow a").click( function(){ animateImageThumbs(true); return false; } );
	$("div#image-thumb-pane div#right-scroll-arrow a").click( function(){ animateImageThumbs(false); return false; } );

	$("div#image-thumb-pane .thumbnail a.imagecontent").click( function()
	{
		$("div#product-image").html(''); 
		$("div#product-image").css("background-image" , "url("+$(this).attr("title")+")" ); 
		$("div#product-image").css('height', 460);
		var spl = $(this).attr('title').split('/');
		var name = spl[spl.length-1].split('.');
		var id = name[0].substr(4);
		var childs = $("#description").children()
		$(childs).each(function(i, v)
		{
			$(v).hide();
		});
		$("#imageDescription"+id).slideDown();
		return false;
	});

	$("div#image-thumb-pane .thumbnail a.flashcontent").click( function()
	{
		$("div#product-image").html('<a class="media"></a>');
		$("div#product-image").css("background-image" , "");
		$("div#product-image").css('vertical-align', 'middle'); 
		$("div#product-image").css('text-align', 'center'); 
		$("#flash"+$(this).attr('rel')).css('margin-top', 'auto'); 
		$("#flash"+$(this).attr('rel')).css('margin-bottom', 'auto'); 
		var dimentions = $(this).attr("alt").split('~');
		//dimentions[0] = (dimentions[0]>1024?400:dimentions[0]);
		//dimentions[1] = (dimentions[1]> 850?500:dimentions[1]);
		$('.media').media({ 
		    width:     dimentions[0], 
		    height:    dimentions[1], 
		    autoplay:  true, 
		    src:       $(this).attr("title"), 
		    caption:   false
		});
		$("div.media").css("margin-left", "auto");
		$("div.media").css("margin-right", "auto");
		$("div.media").css('height', -(0-dimentions[1]-30));
		$("div.media").css('width', -(0-dimentions[0]-00) );
		//$("div#product-image").flash({src: $(this).attr("title"), width: dimentions[0], height: dimentions[1] });
		
		$("div#product-image").css('height', -(0-dimentions[1]-50));
		var id = $(this).attr('rel');
		var childs = $("#description").children()
		$(childs).each(function(i, v)
		{
			$(v).hide();
		});
		$("#flashDescription"+id).slideDown();
		return false;
	});
	$("div#image-thumb-pane .thumbnail a.imagecontent:first").click();
});