$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		continuous: true,
		vertical: false
	});
	
	//$('div.list-show> ul:not(:first)').hide();
	$('div.list-show> ul').hide();
	//$('div.list-show> h4:first').addClass('maximised');
	//$('div.list-show> h4:not(:first)').addClass('minimised');
	$('div.list-show> h4').addClass('minimised');
	$('div.list-show> h4').click(function() {
		var $nextItem = $(this).next();
		var $visibleSiblings = $nextItem.siblings('ul:visible');
		if ($visibleSiblings.length ) {
			$visibleSiblings.slideUp('fast', function() {
				$nextItem.slideToggle('fast');
			});
		} else {
			$nextItem.slideToggle('fast');
		}
		if ($(this).hasClass('minimised')) {
			$(this).removeClass('minimised').addClass('maximised');
			$(this).siblings('h4').removeClass('maximised').addClass('minimised');
		} else if($(this).hasClass('maximised')){
			$(this).removeClass('maximised').addClass('minimised');	
			$(this).siblings('h4').removeClass('maximised').addClass('minimised');
		} else {
		}
	});
	
	// when the DOM is ready
	$(function () {
	  var img = new Image();
	  var target = $('div.primaryProduct img').attr('src');
	  
	  // wrap our new image in jQuery, then:
	  $(img)
		// once the image has loaded, execute this code
		.load(function () {
		  // set the image hidden by default    
		  //$('div.primaryProduct img').hide();
		
		  // with the holding div #loader, apply:
		  $('div.primaryProduct')
			// remove the loading class (so no background spinner), 
			.removeClass('loading')
		
		  // fade our image in to create a nice effect
		  $('div.primaryProduct img').fadeIn(2000);
		})
		
		// if there was an error loading the image, react accordingly
		.error(function () {
		  // notify the user that the image could not be loaded
		})
		
		// *finally*, set the src attribute of the new image to our image
		.attr('src', target);
	});	
});