jQuery(document).ready (function(){	
	
	// Setup autoslideshows
	var $ = jQuery.noConflict();
	var counter = 1;
	$('#autoslideshow').each(function(){
	    $(this).cycle({
	        fx:                    'fade',
	        speed:                 800
	    });
	});
	
	// Setup cm_cycle_slideshow for each div.slideshow
	var $ = jQuery.noConflict();
	var counter = 1;
	$('.slideshow .main').each(function(){
		$(this).parent().attr('id','slideshow_'+counter);
		var p = $(this).parent();
	    $(this).cycle({
			element: counter, 
	        fx:                    'fade',
	        speed:                 500,
	        before:                onBefore,
			pager:                 $('.thumbs', p),
			pagerAnchorBuilder:    function (idx, slide) {
				// console.log('#slideshow_'+counter+' .thumbs span:eq(' + idx + ') a')
				return '#slideshow_'+counter+' .thumbs span:eq(' + idx + ') a'; 
			}
	    }).cycle('pause');
		counter++;
	});
	
	function onBefore(curr, next, opts, fwd){
			// Update the slide caption
		    $('#slideshow_'+opts.element+' .caption').html(next.alt);
	        // Get the height of the current slide
	        var $ht = $(this).height();
	        // Set the container's height to that of the current slide
	        if (!$('body').hasClass('shop')) {
				$(this).parent().css("height", $ht);
			}
	}

	
	// Shop: slideshow zoom on click
	var $_img_height = ($('body').hasClass('tea-towels')) ? 371 : 310;
	var $_zoom = jQuery('.slideshow .zoom');
	
	$_zoom.click (function() {
		$('.shop .slideshow .main img').click();
	});
	
	jQuery('.shop .slideshow .main img').click (function(){
	var $_img = jQuery('.shop .slideshow .main img');
	
	$_slideshow = jQuery('.shop .slideshow');
	s = $_img.width() > $_img_height; // if the image is wider than its starting height, then assume it's open

	  if( s ){
		// zooming *out* of normal image
	    $_slideshow.removeClass( 'open' );
		$_zoom.html("<p>Zoom in</p>");
	  }else{
		//zooming into normal image
	    $_slideshow.addClass( 'open' );
	    $_zoom.html("<p>Zoom out</p>");
	  }
	});




		
	// Wallpaper collection: background changer	
	jQuery("#colourways .colourway").each(function(index, element){jQuery(element).attr("test", 'img'+index);});
    jQuery("#colourways .colourway a" ).first().addClass('selected');

	var mainImg ='img0';
	var current = 'img0';
	jQuery('#img0').addClass('selected');
	
	jQuery('#colourways .colourway a').click (function(){								   
		newBackgroundImgUrl = jQuery(this).attr('rel');
		// remove class from last clicked thumbnail
		jQuery('.selected').removeClass('selected');
		// add class to current thumbnail
		jQuery(this).addClass('selected');
		// update background image
		jQuery('#container').css("background-image", 'url(' + newBackgroundImgUrl + ')');
	});
	
});