var theLinks = new Array();
var currentIndex = 0;
var arrowLeft;
var arrowRight;

var thumbLinks;
var currentThumbPosition =0;
var thumbArrowLeft;
var thumbArrowRight;

var isScrolling = false;


/*thumb scroller */
$(document).ready(function () {
	thumbLinks = new Array();
	thumbLinks = $('div').find('.slider-thumb');
	
	thumbArrowLeft = $("#sliderthumb-arrleft");
	thumbArrowRight = $("#sliderthumb-arrright");	
	
	
	if(thumbLinks.length<1){
		return;
	}
	$("#slider-thumbs-panel").width(thumbLinks.length * 51);
		

	
	if(thumbArrowLeft){
		$(thumbArrowLeft).find("a").bind('click',function(event){
            event.preventDefault();
			scrollThumbs(1);
			return false;
		});
		$(thumbArrowRight).find("a").bind('click',function(event){
            event.preventDefault();
			scrollThumbs(-1);
			return false;	
		});		
	
	}
});


function scrollThumbsTo(pos){

	$("#slider-thumbs-panel").animate({"left":pos},
		230,function(){ 
		updateThumbArrows();
		}
    );	
}

function scrollThumbs(amount){
	//alert(amount);
	
	if (!isScrolling)
	{
		isScrolling = true;
		var scrollAmount = $("#slider-thumbs-mask").width()*amount;
		
		var scrollTargetPosition = $("#slider-thumbs-panel").position().left + scrollAmount;
		if(scrollTargetPosition>0){
			scrollTargetPosition = 0;
		}
		$("#slider-thumbs-panel").animate({"left":scrollTargetPosition},
			230,function(){ 
			updateThumbArrows();
			}
	    );
	}
}


function updateThumbArrows(){
	var sliderWidth = $("#slider-thumbs-panel").width();
	var maskWidth = $("#slider-thumbs-mask").width()
	var sliderPosition = $("#slider-thumbs-panel").position().left;
	if(sliderPosition>=-1){
		$($(thumbArrowLeft).find("a")).hide("fast");
	}
	else{
	 	if(sliderWidth>maskWidth){
	 		$($(thumbArrowLeft).find("a")).show("fast");
	 	}
	}
	if(sliderWidth+sliderPosition < $("#slider-thumbs-mask").width()){
 		$($(thumbArrowRight).find("a")).hide("fast");
	}
	else{
	 	if(sliderWidth>maskWidth){
	 		$($(thumbArrowRight).find("a")).show("fast");
	 	}
	}
	isScrolling = false;
	
//	console.log('position with width '+($("#slider-thumbs-panel").width()+$("#slider-thumbs-panel").position().left));
}


function toggleNext(list,item)
{
	var activeLink = $('a[rel=panel].selected');
	var activeItem = $($('a[rel=panel].selected').attr('name'));
	
	for (var a = 0; a < theLinks.length; a++)
	{
		if (theLinks[a] == activeLink[0])
		{
			currentIndex++;
			$(theLinks[a + 1]).click();
			updateScrollArrows();
			updateThumbArrows();
			//return false;
		}
	}
    return false;
}


function togglePrev(list,item)
{

	var activeLink = $('a[rel=panel].selected');
	var activeItem = $($('a[rel=panel].selected').attr('name'));
	
	for(var a = 0; a < theLinks.length; a++)
	{
		if (theLinks[a] == activeLink[0])
		{
			currentIndex--;
			$(theLinks[a - 1]).click();
			updateScrollArrows();
			updateThumbArrows();
			//return false;
		}
	}
    return false;

}


function updateScrollArrows()
{
//	console.log(currentIndex + ' '+theLinks.length);
	if(arrowLeft==undefined) return;
	if (currentIndex == 0)
	{
		arrowLeft.hide('fast');
		
	}
	else
	{
		arrowLeft.show('fast');
	}
	
	if (currentIndex < (theLinks.length - 1))
	{
		arrowRight.show('fast');
	}
	else
	{
		arrowRight.hide('fast');
	}
}


function scrollLeft()
{
	togglePrev();
	return false;
}


function scrollRight()
{
	toggleNext();
	return false;
}


function fadeElement(event)
{
	var amount = 1;
	if(event.type == "mouseover")
	{
		amount = 0.5;
	}
	$(event.currentTarget).fadeTo(0.2,amount);
}


window.onload = function()
{
	window.setTimeout('initializeScroller()', 0);
};


function initializeScroller()
{
	arrowLeft = $("#large-scroll-left>img");
	arrowRight = $("#large-scroll-right>img");
	
	
	$("#large-scroll-left").bind("click", scrollLeft);
	$("#large-scroll-right").bind("click", scrollRight);

	$("#large-scroll-left").bind("mouseover mouseout", fadeElement);
	$("#large-scroll-right").bind("mouseover mouseout", fadeElement);

	var theDivs = $('#panel>div');
	theLinks = $('a[rel=panel]');
	
	$('#mask').stop();
	$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
	$('#panel>div').width($('#mask').width());

	$('a[rel=panel]').mouseover(function ()
	{
		return;
		$('#mask').stop();

		var panelheight = $($(this).attr('name')).height();
		$('a[rel=panel]').removeClass('active');
		$(this).addClass('active');
		
		$('#mask').scrollTo($(this).attr('name'), 500);		
		return false;
	});
	
	$('a[rel=panel]').click(function ()
	{
		$('#mask').stop();

		var panelheight = $($(this).attr('name')).height();

		$('a[rel=panel]').removeClass('selected');
		$(this).addClass('selected');
		$('a[rel=panel]').children('.product-thumbnail-active').css('display', 'none');
		$(this).children('.product-thumbnail-active').css('display', 'block');
		
		
		currentIndex = $($(this).children('.product-thumbnail')[0]).attr('alt') - 1;
		scrollThumbsTo(-Math.floor(currentIndex/8)*51 * 8);
		
		$('#mask').scrollTo('#'+$(this).attr('name'), 500);		
		//$('#slider-thumbs-mask').scrollTo('#'+$(this).attr('name'), 500);		
		updateScrollArrows();
		updateThumbArrows();
        return false;

	});
	
	$(theLinks[0]).click();
}