$(document).ready(function(){
		var Idx = 1;
		var IntervalKey;
		var att ;
		var nextAtt ;
		var ChangeImage = function(){
			//If the image still animating, stop it and start the new one
			$("#MainImage").ImageStop(true,true);
			$("#MainImage").ImageSwitch({NewImage: $(".displayImage").eq(Idx).attr("title")});	
			
			
			//Mark which thumbnail is displaying
			$(".displayImage").css("opacity","0.5");
			$(".displayImage").eq(Idx).css("opacity","1");
            $(".displayContent").css("display","none");
			$(".displayContent").css("opacity","0");
			$(".displayContent").eq(Idx).css("display","block");
			$(".displayContent").eq(Idx).css("opacity","1");
			//Set the next image will be display
			Idx++;
			if(Idx>4){
				Idx = 0;
			}
			//Start preload the next image
			$.ImagePreload($(".displayImage").eq(Idx).attr("title"));			
		};
		//When a thumbnail's clicked
		$(".displayImage").click(function(){
			Idx = $(".displayImage").index(this);
			ChangeImage();
		});		

		
		setInterval(ChangeImage,7000);

	});