/// <summary>
/// The ImageProcessing class adds the javascript logic for the processing images within the locator.
/// </summary>
$(document).ready(function(){   	
	/******* START - Initalisation *******/		
	//Initialise.
	var imgCnt = ($("#hiddenImageCount").attr("value") != null) ? parseInt($("#hiddenImageCount").attr("value")) : 3;
	var imgProcessing = "false";
	var selectedOpacity = 0.50;
	
	//Initialise for Car View.
	var tmbSelected; 	
    var mainLoadingImage = $("div.mainImage.preLoader");
    mainLoadingImage.hide();  
    $("div.mainImage.fadeTo").hide();  
    $("img.thumbnailImage.1").fadeTo("fast", selectedOpacity);  
    $("img.thumbnailImage.1").parent().css("border-color", "white");
    $("img.thumbnailImage").css("cursor", "pointer");
    $("img.thumbnailImage.1").css("cursor", "default");
    $("#hiddenCurrentImageMainView").attr({
		value: 1
	});
    
	//Initialise for Zoom View.
	var tmbZoomSelected;
    var zoomLoadingImage = $("div.zoomMainImage.preLoader");
    zoomLoadingImage.hide();  	
    $("div.zoomMainImage.fadeTo").hide();    
    $("img.zoomThumbnailImage.1").fadeTo("fast", selectedOpacity);  
    $("img.zoomThumbnailImage.1").parent().css("border-color", "white");
    $("img.zoomThumbnailImage.1").css("cursor", "default");
    $("#hiddenCurrentImageZoomView").attr({
		value: 1
	});
    
    
    // Cache Main Vehicle Images.
	var cachedMainImages;
	cachedMainImages = new Array(imgCnt - 1);
	cacheImages(cachedMainImages, imgCnt, "Main");
    // Cache Zoom Vehicle Images.
	var cachedZoomImages;
	cachedZoomImages = new Array(imgCnt - 1);
	cacheImages(cachedZoomImages, imgCnt, "Zoom");	
    /******* END - Initalisation *******/
    
    /******* START - Global Functions. *******/    	    
    function cacheImages(reqArray, reqSize, reqType)
    {
		if ($("input.hidden" + reqType + "Url_1").attr("value") != null)
		{
			for (var x = 0; x < reqSize; x++)
			{
				reqArray[x] = new Image;
				reqArray[x] = $("input.hidden" + reqType + "Url_" + (x + 1)).attr("value").toLowerCase().replace("&amp;", "&");
			}
		}
	}
    function prevZoomImage(currentSeqNo) {
		//Show previous image.
		if (imgProcessing == "true") return;
		
		var imgNo = currentSeqNo;
		
		if (imgNo > 1) { imgNo = imgNo - 1; }
		else { imgNo = imgCnt; }
		
		alternateImage($("img.zoomThumbnailImage." + imgNo), $("img.zoomMainImage.fadeFrom"), $("img.zoomMainImage.fadeTo"), $("div.zoomMainImage.fadeFrom"), $("div.zoomMainImage.fadeTo"), tmbZoomSelected, $("img.zoomThumbnailImage"), zoomLoadingImage);		
	}
		
	function nextZoomImage(currentSeqNo) {
		//Show next image.
		if (imgProcessing == "true") return;
		
		var imgNo = currentSeqNo;
		
		if (imgNo < imgCnt) { imgNo = imgNo + 1; }
		else { imgNo = 1; }
		
		alternateImage($("img.zoomThumbnailImage." + imgNo), $("img.zoomMainImage.fadeFrom"), $("img.zoomMainImage.fadeTo"), $("div.zoomMainImage.fadeFrom"), $("div.zoomMainImage.fadeTo"), tmbZoomSelected, $("img.zoomThumbnailImage"), zoomLoadingImage);
	}	
				
    function alternateImage(imgThumbnail, imgFadeFrom, imgFadeTo, panelFadeFrom, panelFadeTo, thumbSelected, thumbCollection, imgLoading) {				
        //Retrieve existing attributes for main/thumbnail image.        
        var strImgNo = imgThumbnail.attr("class").toLowerCase();
        strImgNo = strImgNo.substring(strImgNo.lastIndexOf(" ") + 1, strImgNo.length);
        var strImgType = imgThumbnail.attr("class").toLowerCase();
        strImgType = strImgType.substring(0, strImgType.lastIndexOf(" "));        
        var isZoom = strImgType.indexOf("zoom");
        var strSelectedThumbnail = imgThumbnail.attr("class");
        strSelectedThumbnail = strSelectedThumbnail.substring(strSelectedThumbnail.lastIndexOf(" ") + 1, strSelectedThumbnail.length);        
        
        //If Image is already Seleced, then exit function call.
        if (isZoom == 0)
        {
			// Zoom Window.
			if (strSelectedThumbnail == $("#hiddenCurrentImageZoomView").attr("value")) { return; }        
        }
        else
        {
			// Main Window.
			if (strSelectedThumbnail == $("#hiddenCurrentImageMainView").attr("value")) { return; }      
        }
        
		imgProcessing = "true";        
        
        var thumbAlt = imgThumbnail.attr("alt");    
        
        //Store current selected image sequence no.
        if (isZoom == 0) { $("#hiddenCurrentImageZoomView").attr({ value: strSelectedThumbnail }); }
        else { $("#hiddenCurrentImageMainView").attr({ value: strSelectedThumbnail }); }
        
		//Reset thumbnail(s) to full opacity.
		thumbCollection.fadeTo("fast", 1.00);		
		thumbCollection.css("cursor", "progress");
		thumbCollection.parent().css("border-color", "black");
        thumbSelected = imgThumbnail;
        
        //Indicate selected thumbnail by reducing opacity.
        imgThumbnail.fadeTo("slow", selectedOpacity);
        imgThumbnail.parent().css("border-color", "white");
                
        //Set Main Image.
        if (isZoom == 0) { imgFadeTo.attr({ src: cachedZoomImages[parseInt(strImgNo) - 1] }); }
        else { imgFadeTo.attr({ src: cachedMainImages[parseInt(strImgNo) - 1] }); }

		//Show transition (for main image) from previously selected to currently selected.
		imgLoading.show();
		panelFadeTo.fadeIn("slow", function() {						
			panelFadeFrom.fadeOut("slow", function() {
				imgLoading.hide();
				if (isZoom == 0) { imgFadeFrom.attr({ src: cachedZoomImages[parseInt(strImgNo) - 1] }); }
				else { imgFadeFrom.attr({ src: cachedMainImages[parseInt(strImgNo) - 1] }); }
				imgProcessing = "false";
				thumbCollection.css("cursor", "pointer");
				imgThumbnail.css("cursor", "default");
				imgFadeFrom.load(function() {
					panelFadeFrom.show();				
					panelFadeTo.hide();				
				});
			});
		});
    }	
    /******* END - Global Functions. *******/    

    /******* START - Vehicle View: Toggle thumbnail with that of main image. *******/    
    $("img.thumbnailImage").click(
      function () {
		if (imgProcessing == "true") return;
		alternateImage($(this), $("img.mainImage.fadeFrom"), $("img.mainImage.fadeTo"), $("div.mainImage.fadeFrom"), $("div.mainImage.fadeTo"), tmbSelected, $("img.thumbnailImage"), mainLoadingImage);
      }
    );    
    /******* END - Vehicle View: Toggle thumbnail with that of main image. *******/
    
    /******* START - Zoom View: Toggle thumbnail with that of main image. *******/    
    $("img.zoomThumbnailImage").click(
      function () {		
		if (imgProcessing == "true") return;
		alternateImage($(this), $("img.zoomMainImage.fadeFrom"), $("img.zoomMainImage.fadeTo"), $("div.zoomMainImage.fadeFrom"), $("div.zoomMainImage.fadeTo"), tmbZoomSelected, $("img.zoomThumbnailImage"), zoomLoadingImage);
      }      
    ); 
    /******* END - Zoom View: Toggle thumbnail with that of main image. *******/   
    
	/******* START - Navigate Views. *******/	
	$("div.zoomPrevImage").click(
		//Display Previous Image.
		function() {
			if (imgProcessing == "false")
			{				
				prevZoomImage(parseInt($("#hiddenCurrentImageZoomView").attr("value")));			
			}
		}
	);
	$("div.zoomNextImage").click(
		//Display Next Image.		
		function() {			
			if (imgProcessing == "false")
			{
				nextZoomImage(parseInt($("#hiddenCurrentImageZoomView").attr("value")));			
			}
		}
	);	
	/******* END - Navigate Views. *******/    
});