$(document).ready(function() {
	
	var randomnumber = Math.floor(Math.random()*801) + 400;
	

	//$("input#RentalDate").datepicker({
	//	clickInput:true,
	//	buttonImage: '../Media/Site/Icon/calendar.png',
	//	buttonImageOnly: true
	//});
	
	//$("#RentalDate").click(function(){
		//alert("bugger");
	//});



	$(".myImage").click(function() {
		
		
		var clickedimage = $(this).attr('rel');
		var clickedcaption = $(this).attr('title');
		var thiselement = $(this).parent();
		
		
		
		
		// only if we haven't already gotten this image loaded
		if ($("#ImageMain").attr('rel') != clickedimage) {
			
			// BEGIN ANIMATION
			// ==================================
			
			$(".myImage").parent().css("border","1px solid #333333");
			thiselement.css("border","1px solid #990000");
			//$(".myImage").parent().animate({border:"1px solid #333333"}, 200);
			//thiselement.animate({border:"1px solid #990000"}, 200);
			
			// First fade out
			$("#ImageMain").fadeOut(200);
			
			// then straight after, fade in
			$(this).delay(200,function(){
				
				
				$("#ImageMain").attr({ 
		          src: "../Media/Site/Products/Loading.gif"
		        }).fadeIn(200);
	        
	        
	        	//then after a second or so, fade out.
	        	$(this).delay(randomnumber,function(){
					
					$("#ImageMain").fadeOut(200);
		        
		        	// then, straight after, fade in new picture
			        $(this).delay(200,function(){
			        						
						$("#ImageMain").attr({ 
				          //src: "../Media/" + clickedimage
						  src: clickedimage
				        }).fadeIn(200);
				        
				        $("#ImageMain").attr({
				        	rel: clickedimage
				        });
				        
				        // Set Caption
				        $(".ImageCaption").html(clickedcaption);
				        
			        
			        
					});
		        
		        
				});
	        
	        
			});
			
			
			// ===============================
		}

		
	});	
	
	
});