jQuery(function($) {

	/* Slide the box 
	-----------------------------------*/
	
  	var div = $('div.the-box');
	var ul = $('div.the-box ul');
  	var divWidth = div.width();

  	//Remove scrollbars
  	div.css({overflow: 'hidden'});
	div.stop().scrollLeft(0);
  	//Find last image container
  	var lastLi = ul.find('li:last-child');
	
	var range = 2;
	var oldLeft = 0;
	var ulWidth = 0;
	var newLeft = 0;
	var time;
	var mouse_x = 0;
	
	var buffer = 150;
	
	div.mousemove(function(e){
		mouse_x = e.pageX;
	});
	
  	div.hover(
		function(){
			ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth();
			
			// work out lag
			var lag = 15;
			
			function slide(){
				
				
				if(ulWidth <= divWidth)
				{
					clearTimeout(time);
					return false;
				}
				else
				{
					// work out hit area / buffer jazz
					var leftAmount = mouse_x - div.offset().left;
					if(leftAmount < buffer){leftAmount = buffer}
					else if(leftAmount > divWidth - buffer){leftAmount = divWidth- buffer}
					leftAmount -= buffer;
					var hitArea = divWidth - (2 * buffer);
					newLeft =  (leftAmount * (divWidth / hitArea)) * (ulWidth-divWidth) / divWidth;
					
					// scroll the box!
				    var scrollAmount = (newLeft - oldLeft)/lag;
					
					// set maximum speed					
					div.stop().scrollLeft(Math.round(oldLeft+ scrollAmount));
					oldLeft += scrollAmount;
					//$('p.info').html('lag=' + lag +'<br>scrollamount = '+scrollAmount);
					time = setTimeout(slide, 20);
				}
			}; 
			slide();
		},
		function(){
			clearTimeout(time);
		}
  	);
  
  
  
  	/* Image text hover
	-----------------------------------*/
	$('div.the-box a.text').hide();
	$('div.the-box li').hover(
		function(){
			$(this).find('a.text').stop().fadeTo(50, 1);
		},
		function(){
			$(this).find('a.text').stop().fadeTo(50, 0);
		} 
  	);
	
	
	
	/* Single Image Display
	-----------------------------------*/
	
	//assign id's to options
	$('ul.variations option').each(function(i){
		$(this).attr('id', i);
	});
	
	$('ul.image-full li').hide();
	$('ul.image-full li:first').fadeIn(500);
	$('ul.image-full li:first').addClass("selected");
	$('ul.variations select option:first').attr('selected','selected');
	var z = 0;
	
	$('ul.image-thumb img').click(function(){
		var thisID = $(this).parent().attr("class").substr(6);
		changeImage(parseInt(thisID));
	});
	
	$('ul.variations select').change(function(){
		var thisID = $(this).find('option:selected').attr('id');
		if(thisID == ""){thisID = 0;}
		// slide thumbs
		if(parseInt(thisID) < 6)
		{
			$('div.thumb-mask').stop().animate({scrollLeft : 0}, 500);	
		}
		else
		{
			$('div.thumb-mask').stop().animate({scrollLeft : 300}, 500);
		}
		
		
		changeImage(parseInt(thisID));
	});
	
	function changeImage(imgID)
	{
		z++;
		var thisImage = $('ul.image-full li.image-'+imgID);
		if(thisImage.hasClass("selected")){return false;}
		thisImage.hide();
		thisImage.css({"z-index":z});
		$('ul.image-full li').removeClass("selected");
		thisImage.addClass("selected"); 
		thisImage.fadeIn(500);
		
		// select style option
		$('ul.variations select option').each(function(){
			if($(this).attr("id") == imgID)
			{
				$(this).attr('selected','selected'); 
			}
		});
	}
	
	$('a.request-a-sample').click(function(){
		var selected = $('ul.variations select option:selected').html();
		var newHref = $(this).attr('href') + ' | Style: ' + selected;
		//alert(newHref);
		$(this).attr('href', newHref);
		return true;								   
	});
	
	/* Single Image Display Thumbnails
	-----------------------------------*/
	$('div.thumb-mask').css({'overflow' : 'hidden'});
	
	$('h3.thumb-nav a.ul1').click(function(){
		$('div.thumb-mask').stop().animate({scrollLeft : 0}, 500);
	});
	
	$('h3.thumb-nav a.ul2').click(function(){
		$('div.thumb-mask').stop().animate({scrollLeft : 300}, 500);
	});
	
	
	/* Variations size
	-----------------------------------*/
	$('ul.variations select option').css({'width':'100px'});
	
	
	/* Autofill
	-----------------------------------*/
	$('.checkout input').attr('autocomplete', 'off');
	
});