// ***************************************************
// * jQuery.dbh.components: jquery.dbh.InitializePictureGallery.js
// * version: 1.0
// * © 2011 Derek Hughes
// ***************************************************

(function($) 
{
	var picNdx = 0;

	//-----------------------------------------------------
	// InitializePictureGallery
	//-----------------------------------------------------
	$.fn.InitializePictureGallery = function(callerSettings) 
	{
		var container, settings;
		var tmpDivName = "ChamberGallery1"
		var csTmp = "";
	
		var picSettings = $.extend(
		{
			position: null,
			top: 10,		bottom: null,	left: 10,		right: null,	width: 640,		height: 470,
			picWidth: 640,	picHeight: 480,	thmWidth: 150,	thmHeight: 113,	popWidth: 652,	popHeight: 600,
			border: 1,
			borderColor: "#000000",
			borderStyle: "solid",
			lastControl: null
		},callerSettings||{});

		containerBase = this[0].id; 	containerId = "#" + containerBase; 	
		containerBaseThumbs = containerBase + "Thumbs";		containerIdThumbs =  "#" + containerBaseThumbs;	
		containerBaseDesc = containerBase + "Desc";			containerIdDesc =    "#" + containerBaseDesc;	
		containerBaseTitle = containerBase + "Title";		containerIdTitle =    "#" + containerBaseTitle;	

		// Make HTML to put into container
		csTmp += "<br>\r\n";
		csTmp += "<div class=\"chamberGalleryDisplay\" id=\"" + containerBaseThumbs + "\" align=\"center\" >\r\n";
		csTmp += "<div style=\"height:10px; line-height:5px;\" ></div>\r\n";
		for (x = 0; x < pictureArray.length; x++) 
		{
			var tmpArray = unescape(pictureArray[x]).split("|");
			csTmp += "<img class=\"chamberGalleryThumb\" id=\"" + containerBase + "Thumb" + x + "\" src=\"/images/galleryPic/" + tmpArray[2] + "\"";	
			csTmp += " width=\"" + picSettings.thmWidth + "\" height=\"" + picSettings.thmHeight + "\"/>\r\n";	
		}
		csTmp += "<div style=\"height:10px; line-height:5px;\" ></div>\r\n";
		csTmp += "</div>\r\n";
		csTmp += "<div id=\"" + containerBaseDesc + "\" ></div>\r\n";

		// Put background pic into div
        $(containerId).css('background-image', 'url("' + "/images/decor/logos/ChamberTV2_120.jpg" + '")');

		// Put the HTML into the inner div of the side show
		$(containerId).html(csTmp);

		// Setup picture element from user supplied settings
		if (picSettings.width != null)		$(containerIdThumbs).css("width", picSettings.width + "px");
		if (picSettings.height != null)		$(containerIdThumbs).css("height", picSettings.height + "px");
		if (picSettings.width != null)		$(containerIdDesc).css("width", picSettings.width + "px");

		// Set CSS for thumbs container and Desc container
		$(containerIdThumbs).css({ position:"absolute", top: picSettings.top + "px", left:picSettings.left + "px"});
		$(containerIdThumbs).css({ border:"1px solid #000000", overflow:"auto", "background-color":"#CCCCCC" });
		$(containerIdDesc).css({ position:"absolute", top: (picSettings.top + 470) + "px", left:picSettings.left + "px", "text-align":"center"});
		$(containerIdDesc).css({ border:"1px solid #000000", height:"85px", overflow:"auto", "margin-top":"5px", "background-color":"#CCCCCC" });


		// Bind click action to each thumbnail
		$(".chamberGalleryThumb").bind('click', function(event)
		{	
			var tmpArray = this.id.split("Thumb");
			picNdx = tmpArray[1];
			ShadeScreenCreatePictureWindow(true, picSettings) 
		});

		// Bind Mouse Over action to each thumbnail
		$(".chamberGalleryThumb").bind('mouseover', function(event)
		{	
			var tmpArray = this.id.split("Thumb"); 
			var ndx = tmpArray[1];
			// Get Split Picture Array Info
			tmpArray = unescape(pictureArray[ndx]).split("|");

			var desc = tmpArray[4];
			if (desc == "") desc = "No Description available";

			var title = tmpArray[3];
			if (title != "") title = "<div id=\"" + containerBaseTitle + "\">" + title + "</div>";

	        $(containerIdDesc).html(title+desc);
	        $(containerIdTitle).css({"font-size":"16px", "font-weight":"bolder"});

		});
	
	}
	


	//-----------------------------------------------------
	// ShadeScreenCreatePictureWindow
	//-----------------------------------------------------
	function ShadeScreenCreatePictureWindow(vis, picSettings) 
	{
		// Pass true to gray out screen, false to ungray
		var zindex = 10000;
		var opacity = .80;
		var popWidth=652, popHeight=600;
	
		if ($("#waitScreenObject").length < 1)
		{
			// The dark layer doesn't exist. So we'll create it here and apply some basic styles.
			$("body").append($('<div id="waitScreenObject"></div>'));
			$("#waitScreenObject").css("position", "absolute").css("top", "0px").css("left", "0px");
			$("#waitScreenObject").css("overflow", "hidden").css("display", "none");
			$("#waitScreenObject").css("backgroundColor", "#000000");
			$("#waitScreenObject").css("zIndex", zindex).css("opacity", opacity );
	
			// Create the Container div
			$("body").append($('<div id="waitScreenPic"></div>'));
			$("#waitScreenPic").css({position:"absolute", top:"50px", left:"100px", width:picSettings.popWidth + "px", height:picSettings.popHeight+ "px"});
			$("#waitScreenPic").css({overflow:"hidden", display:"none", border:"3px"});
			$("#waitScreenPic").css({textAlign:"center", backgroundColor:"#DDD"});
			$("#waitScreenPic").css({fontSize:"20px", fontWeight:"bolder", color:"#800000", zIndex:zindex + 1});
	
			// Create the Image to display
			$("#waitScreenPic").append($('<img id="pictureDisplay" src="">'));
			$("#pictureDisplay").css("position", "absolute").css({top:"30px", left:"5px", height:picSettings.picHeight + "px", width:picSettings.picWidth + "px", border:"1px solid #000000"});
	
			// Create the Title div
			$("#waitScreenPic").append($('<div id="pictureTitle"></div>'));
			$("#pictureTitle").css({position:"absolute", top:"5px", left:"55px", width:picSettings.popWidth-110 + "px", height:"22px", backgroundColor:"#DDD"});
	
			// Create the Desc div
			$("#waitScreenPic").append($('<div id="pictureDesc"></div>'));
			$("#pictureDesc").css({position:"absolute", top:"515px", left:"5px", width:"640px", height:"80px", border:"1px solid #000000", backgroundColor:"#FFF"});
	
			// Create the Prev, Next and Close buttons
			$("#waitScreenPic").append($('<img id="prevPicButton" src="/images/decor/buttons/prevArrow.jpg">'));
			$("#prevPicButton").css("position", "absolute").css("top", "5px").css("left", "5px");
	
			$("#waitScreenPic").append($('<img id="nextPicButton" src="/images/decor/buttons/nextArrow.jpg">'));
			$("#nextPicButton").css("position", "absolute").css("top", "5px").css("left", "30px");
	
			$("#waitScreenPic").append($('<img id="hidePicButton" src="/images/decor/buttons/hideX.jpg">'));
			$("#hidePicButton").css("position", "absolute").css("top", "5px").css("right", "5px");
	
	 
	
			// Bind Click to Close button
			$("#hidePicButton").bind('click', function(event) 
			{
				ShadeScreenCreatePictureWindow(false, picSettings);
			});
	
			// Bind Click to Close button
			$("#prevPicButton").bind('click', function(event) 
			{
				picNdx--;	if (picNdx < 0) picNdx = 0;
				ShowPictureAndButtons(picNdx);
			});
	
			// Bind Click to Close button
			$("#nextPicButton").bind('click', function(event) 
			{
				picNdx++;	if (picNdx > pictureArray.length-1) picNdx = pictureArray.length-1;
				// Put the picture, title and desc into their containers
				ShowPictureAndButtons(picNdx);
			});
	
		}
		
		if (vis) 
		{
			// Calculate the page width and height 
			var pageHeight = $(document).height();
			var pageWidth = $(document).width();
					
			$("#waitScreenObject").css("display", "block");
			$("#waitScreenObject").css("width", pageWidth).css("height", pageHeight);
	
			// Calculate left position to center message div
			var centerLeft = (pageWidth - $("#waitScreenPic").width()) / 2;
			$("#waitScreenPic").css("left", centerLeft).css("display", "block");
	
			// Put the picture, title and desc into their containers
			ShowPictureAndButtons(picNdx);
		} 
		else 
		{
			$("#waitScreenObject").css("display", "none");
			$("#waitScreenPic").css("display", "none");
		}
	}
	

	//-----------------------------------------------------
	// ShowPictureAndButtons
	//-----------------------------------------------------
	function ShowPictureAndButtons(picNdx) 
	{
		// Put the picture, title and desc into their containers
		var tmpArray= unescape(pictureArray[picNdx]).split("|");
		$("#pictureDisplay").attr("src", "/images/galleryPic/" + tmpArray[1]);
		$("#pictureTitle").text(tmpArray[3]);
		$("#pictureDesc").text(tmpArray[4]);
	
		if (picNdx > 0) $("#prevPicButton").css("display", "block"); else $("#prevPicButton").css("display", "none"); 
		if (picNdx < pictureArray.length-1) $("#nextPicButton").css("display", "block"); else $("#nextPicButton").css("display", "none"); 
	}


})(jQuery);