// JavaScript Document

$(document).ready(function() {
	
	//by default, the scroll is only done vertically ('y'), change it to both.
	$.scrollTo.defaults.axis = 'y'; 			
	//this one is important, many browsers don't reset scroll on refreshes
	$('div#product-thumbs').scrollTo( 0 );//reset all scrollable panes to (0,0)
	$.scrollTo( 0 );//reset the screen to (0,0)
	
	var thumbSrc;
	$('.product-thumb').click(function(){
		thumbSrc = $(this).children('img').attr('src').replace('thumbs','large');
		$('.thumb-overlay-on').addClass('thumb-overlay').removeClass('thumb-overlay-on');
		$(this).children('div').removeClass('thumb-overlay').addClass('thumb-overlay-on');
		$('.product-image').fadeOut(250);
		$('#product-image').addClass('loading');
		setTimeout(loadNewImage,251)
	});
	
	function loadNewImage() {
		$('.product-image').children('img').attr({'src':thumbSrc});
		$('.product-image').children('img').load(function () {
			imageFadeIn();
			$('#product-image').removeClass('loading');
		});
	}
	
	function imageFadeIn() {
		$('.product-image').fadeIn();
	};
	
	$('.colourbox').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
		var colourID = $(this).attr('id').replace('colour','#color');
		$('div#product-thumbs').scrollTo( colourID, 800);
		$(colourID).children('div:first').children('div:first').addClass('thumb-overlay-on').removeClass('thumb-overlay');
		thumbSrc = $(colourID).children('.product-thumb').children().attr('src').replace('thumbs','large');
		$('.product-image').fadeOut(250);
		$('#product-image').addClass('loading');
		setTimeout(loadNewImage,251)
		
		colourID= colourID.replace('#color-','');
		$('#colour').attr({'value':colourID})
		
		tryCombination();
		return false;
	});
	
});