$(window).load(function () {
						   						   
	var images = ["<li class='3'><img src='images/main/home3.jpg' alt='' width='747' height='368' /></li>", 
				  "<li class='4'><img src='images/main/home4.jpg' alt='' width='747' height='368' /></li>", 
				  "<li class='5'><img src='images/main/home5.jpg' alt='' width='747' height='368' /></li>", 
				  "<li class='6'><img src='images/main/home6.jpg' alt='' width='747' height='368' /></li>",
				  "<li class='7'><img src='images/main/home7.jpg' alt='' width='747' height='368' /></li>",
				  "<li class='8'><img src='images/main/home8.jpg' alt='' width='747' height='368' /></li>"];
	
	preloadImages(images, 8);
		
	$("ul#latest-updates li").hoverIntent(slideUp,slideDown);
			
	function slideUp() {
		$(this).animate({
			top: "163",
			height: "205",
			backgroundColor: "#000000"	// jquery-ui.js needed to animate backgroundColor
		}, "normal");
	}			
	
	function slideDown() {
		$(this).animate({
			top: "271",
			height: "97",
			backgroundColor: "#111111"
		}, "normal");
	}
	
});

function preloadImages(images, totalImages) {
    //alert("totalImages = " +  totalImages);  
           
	var preload = new Array();
	
	var imagesInHtml = 2;			
	var imagesLoaded = 0;
	var totalImagesToPreload = totalImages - imagesInHtml;
	
	if(totalImages > 2){
		preloadImage(0);
	}else{
		onAllImagesPreloaded();
	}
	
	
	function preloadImage(i){
		//alert('preloadImage(' + i + ')');
		var image = document.createElement('img');
		image.id = i;
		image.onload = function(){
			onImageLoaded(this);
		}
		image.src = $(images[i]).find("img").andSelf().attr("src");
	}
	

	function onImageLoaded(image){
		//alert(image.src + " loaded");
		imagesLoaded++;
		
		var currentSlide = images[Number(image.id)];
		//alert(currentSlide);
		$("#slideshow").append(currentSlide);
		
		if(imagesLoaded == totalImagesToPreload) {
			onAllImagesPreloaded();
		}else{
			preloadImage(Number(image.id) + 1);
		}

	}

	function onAllImagesPreloaded(){
		//alert("onAllImagesPreloaded() called");
		
		slideStartNum = 1;
					
		$("#total_slides").replaceWith(totalImages);
		$("#slide_num").text(slideStartNum);
		
		$("#slideshow").cycle({
			speed: "fast",
			timeout: 3500,
			prev:  '#scroll_prev', 
    		next:  '#scroll_next',
			before: fadeImage,
			after: changeText
		});	
		
		function fadeImage() {
			$(this).css('display','none').fadeIn("fast");
		}
		
		function changeText() {
			//$("#infoHomeBodyCopy p").empty().append($(this).find("img").andSelf().attr("alt"));
			$("#slide_num").text($(this).attr("class"));
		}
		
		$("#infoHomeBody, #slideshow_nav").mouseover(function() {			
			showInfo();
		});			
		$("#infoHomeBody, #slideshow_nav").mouseout(function() {			
			hideInfo();
		});			
		
		function showInfo() {
			$("#slideshow").cycle('pause');
			$("#infoHomeBg").show();
			$("#slideshow_nav").show();
		}		
		function hideInfo() {
			$("#slideshow").cycle('resume');
			$("#infoHomeBg").hide();
			$("#slideshow_nav").hide();
		}
		
		/* SimpleModal */
		$('a#video-thumb').click(function(){
			
			// in FF2 on Mac, flash content will not play on top of elements with opacity set. audio plays but no flash video
			if (BrowserDetect.browser == "Firefox" && BrowserDetect.version == "2" && BrowserDetect.OS == "Mac") {
				$("#slideshow").cycle('stop');
				hideInfo();
				
				// show an image inside the modal box instead 
				startModal();
				$('#videoModal').append('<img id="ff2-video-still" src="images/video/MINI_Challenge_2008H.jpg" alt="MINI Challenge video" width="489" height="275" />');
				
			} else {
				$("#slideshow").cycle('stop');
				hideInfo();
				startModal();
			}
		});
		
		function startModal() {			
			$('#videoModal').modal({
				onShow: function (dialog) {
					// closes on click
					loadChallengeVideo();
					dialog.overlay.click($.modal.close);
				},
				onClose: function (dialog) {						
					$.modal.close();
					// calls function to start slideshow
					onAllImagesPreloaded();					
					// IE on PC
					if (BrowserDetect.OS == "Windows" && BrowserDetect.browser == "Explorer") {						
						// Fixes bug in IE 6&7: When simplemodal containing flash content is opened or closed, "#" symbol gets appended to or replaces the page title.
						if (document.title == "#") {
							document.title = "MINI Challenge 2009";
						}
					}				
				}
			});	
		}	
	}	
}

$(document).bind('keydown.simplemodal', function (e) {
	if (e.keyCode == 27) { // ESC closes the modal
		$.modal.close();
	}
});