/// <summary>
/// Handle our image swapping and tab selection for location detail page.
/// </summary>
$(document).ready(function() 
{ 
	// Set our constant opacity values.
	var FADEDOUT	= "0.4";
	var FADEDIN		= "1.0";
	
	// 1. : Turn off all large images
	$("div#divLargeImages > img").hide();
	
	// 2. : Show the first image.
	$("div#divLargeImages > img:first").show();
	
	// 3. : Fade-out selected thumbnail image
	$("div#divThumbnailContainer > div.thumbnail:first > div.dropShadowInner > img").css("opacity", FADEDOUT);
	
	// 4. : For each thumbnail find child image and add click function
	$("div#divThumbnailContainer > div.thumbnail").each(
		function (index, domElement)
		{
			// 4.1 : Record current index
			var index = $("div#divThumbnailContainer > div.thumbnail").index(this);
			
			// 4.2 : Get only the image of the current thumbnail (target using index)
			var imageRef = $("div#divThumbnailContainer > div.thumbnail:eq(" + index + ") > div.dropShadowInner > img");
			
			// 4.3 : Add click function
			imageRef.click(
				function ()
				{
					if($(this).css("opacity") != FADEDOUT)
					{
						// 1. : Fade-in all thumbnails
						// 1.1 : For each thumbnail find child image 
						$("div#divThumbnailContainer > div.thumbnail").each(
							function (index, domElement)
							{
								// 1.1.1 : Record current index
								var index = $("div#divThumbnailContainer > div.thumbnail").index(this);
								
								// 1.1.2 : Get only the image of the current thumbnail (target using index)
								var imageRef = $("div#divThumbnailContainer > div.thumbnail:eq(" + index + ") > div.dropShadowInner > img");
								
								// 1.1.3 : If faded out then fade in
								if(imageRef.css("opacity") == FADEDOUT)
								{
									imageRef.css("opacity", FADEDIN);
								}
							}
						);
						
						// 2. : Fade-out this (clicked) thumbnail
						$(this).fadeTo("fast", FADEDOUT);
						
						// 3. : Cross-fade large images
						// 3.1 : Fade-out currently visible image
						$("div#divLargeImages > img:visible").fadeOut("slow");
						
						//3.2 : Get the index of the clicked item & use to target large images
						var index = $("div#divThumbnailContainer > div.thumbnail > div.dropShadowInner > img").index(this);
						$("div#divLargeImages > img:eq(" + index + ")").fadeIn("slow");
					}
				}
			);
		}
	);	
	
	/********************************************************************************/
    //Toggle the tab state of the departments.
    $("div#dlrDepartments_Menu > div.displayStackMenuButton > h2 > a").click(
		function () {
			switchTabState($(this), "dlrDepartments");
			return false;
		}
    );
    /********************************************************************************/
  
});