$(document).ready(function() {
		
	// S L I D E R 
	var $panels = $('div#product_img div#img_wrapper > .panel');
	var $container = $('div#product_img div#img_wrapper');
	  
	$container.css('width', $panels[0].offsetWidth * $panels.length);
	
	var $scroll = $('div#product_img');
	
	var $controls = $('#colours');
	var $colour_btns = $('#colours > li');
	var $controls_width = 34 * $colour_btns.length;
		
	$controls.css('width', $controls_width);
	$controls.css('margin-left', 0 - ($controls_width/2)); 
	
	$controls
		.before('<a href="#" class="next">Next</a>')
		.after('<a href="#" class="prev">Prev</a>');
	
		
	function selectNav() {
	  	$('#colours li').removeClass('selected');
	  	$(this)
		    .parent() // find all the A elements
		    .addClass('selected');
	}
	
	$controls.find('a').click(selectNav);
	
	function trigger(data) {
	  var el = $('ul#colours').find('a[href$="' + data.id + '"]').get(0);
	  selectNav.call(el);
	}
	
	if (window.location.hash) {
	  trigger({ id : window.location.hash.substr(1) });
	} else {
	  $('ul#colours li a:first').click();
	}	
	
	var scrollOptions = {
	
	  target: $scroll,
	  
	  items: $panels,
	  
	  navigation: '#colours a',
	  
	  prev: 'a.prev', 
	  next: 'a.next',
	    	  
	  axis: 'x',
	  
	  onAfter: trigger, // our final callback
	  
	  duration: 500
	  
	};
	
	$('#slider_wrapper').serialScroll(scrollOptions);
	
	$.localScroll(scrollOptions);
	
	scrollOptions.duration = 1;
	$.localScroll.hash(scrollOptions);
	
	$("#select_colour").change(function() {
		var $col_index = $('#select_colour :selected').index() - 1;
		//alert($('#select_colour :selected').index());
		$($container).trigger( 'goto', [ $col_index ] );
	});
	
});