$(document).ready(function() {
	
	$('#innerLeftImages a, #innerRightImages a').append('<div class="selectedOverlay"></div>');
	
	var currentTreatment = 0; //1-colour, 2-halftone, 3-greyscale
	
	var $slideshowContainer = $('#slideshowContainer');


	$slideshowContainer.cycle({timeout: 0, requeueOnImageNotLoaded: true});

	
	$('#innerLeftImages a').click(function(){

		// do not change if mid-cycle
		if($slideshowContainer.find('img:visible').length==2) 
			return false;
		
		// commonly used items
		var $this = $(this).closest('li');
		var $li = $this.closest('li');

		var $hiddenSlide = $slideshowContainer.find('img').not(':visible');
		//var currentSrc = $hiddenSlide.attr('src')
		var currentSrc = $slideshowContainer.find('img:visible').attr('src')
		var currentSrcArray = currentSrc.split('__');

		var liIndex = $('#innerLeftImages li').index($li);
		var newSrc = liIndex;

		// do not change if same as current
		if(currentSrcArray[1] == String(newSrc) && currentSrcArray[2] == currentTreatment+'.jpg')
			return false;
		else
			currentSrcArray[1] = String(newSrc);
			
			currentSrcArray[2] = currentTreatment+'.jpg';
			
		// change image src
		$hiddenSlide.attr('src',currentSrcArray.join('__'));
		
		// change triptych
		$('#innerRightImages').css({backgroundImage:'url("assets/images/triptych__'+String(newSrc)+'.jpg")'});
		
		// show new image
		//$slideshowContainer.cycle($slideshowContainer.index($hiddenSlide));
		setTimeout(function(){$slideshowContainer.cycle('next');},800);
		
		if($('#selectedTitle').text() != $this.text()) {
			setTimeout(function(){
				$('#selectedTitle').html($this.text());
			},500);
			$('#selectedTitle').animate({opacity:0}).animate({opacity:1});
		}
		
		$this.siblings().removeClass('selected').end().addClass('selected');
		this.blur();
		return false;
	});

	$('#innerRightImages a').click(function(){
		var $this = $(this);
		currentTreatment = $this.closest('li').index();
		
		setTimeout(function(){
			$('#selectedTreatment').html($this.text());
		},500);
		$('#selectedTreatment').animate({opacity:0}).animate({opacity:1});

		$('#innerLeftImages li.selected a').click();
		
		$this.closest('li').siblings().removeClass('selected').end().closest('li').addClass('selected');
		this.blur();
		return false;
	});
	
});