runOnLoad(function(){
	
	if ($(window).width() < 1024) 
	{
		$('body').css('overflow','auto'); // If  width of window is less than 1024, add CSS property overflow: auto to body.
	}
	
	var measures = new Array();
	var i=0;
	while (i<$('img.showcaseimg').length) // For all images with a class of showcaseimg.
	{	
		measures[i]=new Array($('img.showcaseimg:eq('+i+')').width(),$('img.showcaseimg:eq('+i+')').height()); // Create array of width and height of each image.
		i=i+1;
	}
			
	$('img.showcaseimg').hide(); // Hides all images with a class of showcaseimg
	$('.loading').hide(); // Hide the div with a class of loading 
	pos = myHiddenRightPos($('img.showcaseimg:first')); // pos = an array containing  left (which equals the window width) and top which is hard coded
	$('img.showcaseimg:first').css({'top':pos[1],'left':pos[0],'position':'absolute'}); // Set the css of the first showcaseimg's to pos's top and left.
	left = ($(window).width()-measures[$('img.showcaseimg:first').attr('id')][0])/2; // left = 
	$('img.showcaseimg:first').animate({'left':left, 'display':'block'},1200,'expoout');
	
	$('.previous').click(previous);
	$('.next').click(next);
	
	$(window).resize(function() {
		if ($(window).width() < 1024) 
		{
			$('body').css('overflow','auto');
		}
	});
	
	function myCenterPos (o) {
	// returns the centred position of the image
	var id = $(o).attr('id');
	var mymeasures = measures[id];
	var left = ($(window).width()-mymeasures[0])/2;
	var top = 175;

	if (top < 120) {
		top = 120;
	}
	
	return new Array(left, top);
	}
	
	function myHiddenRightPos (o) {
		// returns the right position of the image before it is animated
		var id = $(o).attr('id'); // id = the id attribute of the first image
		var mymeasures = measures[id]; //  mymeasures = the first from the measures array
		var left = $(window).width(); // left = windows width
		var top = 175; 

		if (top < 120) 
		{
			top = 120;
		}
		
		return new Array(left, top); // Return an array that contains left and top
	}
	
	function myLeftPos (o) {
		// returns the left position of the image that is being replaced
		var id = $(o).attr('id');
		var mymeasures = measures[id];
		var left = mymeasures[0];
		var top = 175;

		if (top < 120) {
			top = 120;
		}
		
		return new Array(left, top);
	}
	
	function left_in () {
		$('img.showcaseimg:first').stop();
		var pos = $('img.showcaseimg:first').offset()['left']+15;
	   	$('img.showcaseimg:first').animate({'left':pos}, 'slow','expoout');
		
	}
	
	function out () {
		$('img.showcaseimg:first').stop();
	 	var pos = myCenterPos($('img.showcaseimg:first'));
		$('img.showcaseimg:first').animate({'left':pos[0]}, 'normal','expoout');		
	}
	
	function right_in () {
		$('img.showcaseimg:first').stop();
		var pos = $('img.showcaseimg:first').offset()['left']-15;
	   	$('img.showcaseimg:first').animate({'left':pos}, 'slow','expoout');
		
	}
	
	function previous () {
		li = 0;
		unbindpads();
		$('img.showcaseimg:first').stop();
		$('.nav').block({ backgroundColor: 'transparent', color: 'tansparent'});
		$('img.showcaseimg:first').stop({gotolaststep:true});
		pos = myLeftPos($('img.showcaseimg:first'));
		$('img.showcaseimg:first').pause(50);
		$('img.showcaseimg:first').animate({'left':'-'+pos[0]+'px'},400,null,function (){
				$('img.showcaseimg:first').hide().remove().insertAfter('img.showcaseimg:last');
				});	
		pos = myHiddenRightPos($('img.showcaseimg:eq(1)'));
		$('img.showcaseimg:eq(1)').css({'position':'absolute','top':175+'px','left':pos[0]+'px'});
		left = ($(window).width()-measures[$('img.showcaseimg:eq(1)').attr('id')][0])/2;
		$('img.showcaseimg:eq(1)').animate({'left':left, 'display':'block'},1200,'expoout',bindpads);
		$('.nav').unblock();
	}

	function next () {
		li = 0;
		unbindpads();
		$('img.showcaseimg:first').stop();
		$('.nav').block({ backgroundColor: 'transparent', color: 'tansparent'});
		$('img.showcaseimg:first').stop({gotolaststep:true});
		pos = $(window).width();
		$('img.showcaseimg:first').pause(50);
		$('img.showcaseimg:first').animate({'left':pos},400,null,function (){
			$('img.showcaseimg:first').hide();
			$.each($('img.showcaseimg:hidden'),function (i,n) { $(n).remove().insertAfter('img.showcaseimg:last'); });
		});	
		pos = myLeftPos($('img.showcaseimg:last'));
		$('img.showcaseimg:last').css({'top':175,'left':'-'+pos[0]+'px'});
		left = ($(window).width()-measures[$('img.showcaseimg:last').attr('id')][0])/2;
		$('img.showcaseimg:last').animate({'left':left, 'display':'block'},1200,'expoout',bindpads);
		$('.nav').unblock();
	}	

	function bindpads(){
		$('div#leftpad').mouseover(left_in);
		$('div#leftpad').mouseout(out);
		$('div#rightpad').mouseover(right_in);
		$('div#rightpad').mouseout(out);
	}

	function unbindpads() {
		$('div#leftpad').unbind('mouseover');
		$('div#leftpad').unbind('mouseout');
		$('div#rightpad').unbind('mouseover');
		$('div#rightpad').unbind('mouseout');
	}
	
	function butone() {
		previous();
	}
	
	function buttwo() {
		previous();
		setTimeout(previous, 600);
	}
	
	function butthree() {
		previous();
		setTimeout(previous, 600);
		setTimeout(previous, 1200);
	}
	
});