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

(function($) 
{
	$.fn.InitializeSideShow = function(callerSettings) 
	{
		var x;
		var ssSettings = $.extend(
		{
			html: null,				tabPic: null,
			top: null,				bottom: null,				left: null,			right: null,		zIndex: null,
			width: 200,				height: 150,				tabWidth: 35,		tabHeight: 100,
			padding: 2,				border: 1,					borderStyle: "solid",
			backColor: "#FFFFFF",	borderColor: "#000000",		
			tabPos: "B",			tabPosAdj: 5,				hugSide: "L", 		xOffset:24, 		autoClose: true
		},callerSettings||{});

		// Check to make sure both left and right arent NULL
		if ((ssSettings.left  == null) && (ssSettings.right  == null) ) alert("Error - Both Left and Right are NULL");

		// Check to make sure both left and right aren't set
		if ((ssSettings.left  != null) && (ssSettings.right  != null) ) alert("Error - Both Left and Right are Set");

		this[0].hugSide = ssSettings.hugSide;

		//------------------------------------------------------------
		// Make the ID variables for the container and children div and img elements
		//------------------------------------------------------------
		var tmpId, divIdSideShowBase, divIdSideShow, imgIdSideShowBase, imgIdSideShow, imgIdSideHideBase, imgIdSideHide;
		tmpId = this[0].id;					 		ssContainer = "#" + tmpId;
		divIdSideShowBase = tmpId + "Div";			divIdSideShow = "#" + divIdSideShowBase;
		imgIdSideShowBase = tmpId + "ShowImg";		imgIdSideShow = "#" + imgIdSideShowBase;		
		imgIdSideHideBase = tmpId + "HideImg";		imgIdSideHide = "#" + imgIdSideHideBase;		

		// Setup the container Class
		$(ssContainer).addClass("dbhSideShow");
		
		// Setup the auto close container Class
		if (ssSettings.autoClose) $(ssContainer).addClass("dbhSideShowAutoClose");

		// Setup the Left or Right container Class
		if (ssSettings.hugSide == "L") $(ssContainer).addClass("dbhSideShowLeft");
		if (ssSettings.hugSide == "R") $(ssContainer).addClass("dbhSideShowRight");
		
		// Setup the container styles
		$(ssContainer).css("position", "absolute");		
		$(ssContainer).css("height", ssSettings.height + "px");
		$(ssContainer).css("width", "0px");

		if (ssSettings.top != null)			$(ssContainer).css("top", ssSettings.top + "px");
		if (ssSettings.bottom != null)		$(ssContainer).css("bottom", ssSettings.bottom + "px");
		if (ssSettings.left != null)		$(ssContainer).css("left", ssSettings.left + "px");
		if (ssSettings.right != null)		$(ssContainer).css("right", ssSettings.right + "px");
		if (ssSettings.zIndex != null)		$(ssContainer).css("z-index", ssSettings.zIndex );


		
		//------------------------------------------------------------
		// Make content div html container
		//------------------------------------------------------------
		$(ssContainer).append($('<div id="' + divIdSideShowBase + '">'));


		// Set the horz position of the inner Div
		switch(ssSettings.hugSide)
		{
			case 'L':
				// Set position, top and left of newly created  image tag
				$(divIdSideShow).css("position", "absolute").css("left", ssSettings.xOffset + "px").css("top", "0px");		
				// Set the width for the content Div
				$(divIdSideShow).css("width",  (ssSettings.width - ssSettings.xOffset) + "px");
			break;
			case 'R':
				// Set position, top and left of newly created  image tag
				$(divIdSideShow).css("position", "absolute").css("right", ssSettings.xOffset + "px").css("top", "0px");		
				// Set the width for the content Div
				$(divIdSideShow).css("width",  (ssSettings.width - ssSettings.xOffset) + "px");
			break;
			default:
		}

//		$(divIdSideShow).css("width",  (ssSettings.width - ssSettings.xOffset) + "px");


		// Set height tag of newly created  image tag
		$(divIdSideShow).css("height", ssSettings.height + "px");
		// Setup the border for the content Div
		$(divIdSideShow).css("border", ssSettings.border + "px");
		$(divIdSideShow).css("border-color", ssSettings.borderColor);
		$(divIdSideShow).css("border-style", ssSettings.borderStyle);
		// Setup the padding for the content Div
		$(divIdSideShow).css("padding", ssSettings.padding);
		// Setup the background color for the content Div
		$(divIdSideShow).css("background-color", ssSettings.backColor);
		// Setup the z-index for the content Div
		if (ssSettings.zIndex != null)		$(divIdSideShow).css("z-index", ssSettings.zIndex);
		// Set the initial html into the content Div
		if (ssSettings.html != null)		$(divIdSideShow).html(ssSettings.html);


		//------------------------------------------------------------
		// Make Hide tab image container
		//------------------------------------------------------------
		$(ssContainer).append($('<img id="' + imgIdSideHideBase + '" class="dbhShowTab" >'));
		// Set the width for the content Div
		$(imgIdSideHide).css("width",  ssSettings.tabWidth + "px");
		// Set height tag of newly created  image tag
		$(imgIdSideHide).css("height", ssSettings.tabHeight + "px");
		// Set the initial picture into each img container			
		$(imgIdSideHide).attr("src", "/images/decor/sideshows/" + ssSettings.tabPicHide);
		// Hide the content div and move the tab img to the very left
		$(imgIdSideHide).hide();		

		//------------------------------------------------------------
		// Make Show tab image container
		//------------------------------------------------------------
		$(ssContainer).append($('<img id="' + imgIdSideShowBase + '" class="dbhHideTab" >'));
		// Set the width for the content Div
		$(imgIdSideShow).css("width",  ssSettings.tabWidth + "px");
		// Set height tag of newly created  image tag
		$(imgIdSideShow).css("height", ssSettings.tabHeight + "px");
		// Set the initial picture into each img container			
		$(imgIdSideShow).attr("src", "/images/decor/sideshows/" + ssSettings.tabPic);
		// Hide the content div and move the tab img to the very left
		$(divIdSideShow).hide();		

		var imgWidth = parseInt($(imgIdSideShow).css("width"));
		switch(ssSettings.hugSide)
		{
			case 'L':
				// Set position and left of newly created  image tag
				$(imgIdSideShow).css("position", "absolute").css("left", "0px");
				$(imgIdSideHide).css("position", "absolute").css("left", (ssSettings.xOffset * 2) + "px");
			break;
			case 'R':
				// Set position and right of newly created  image tag
				$(imgIdSideShow).css("position", "absolute").css("right", "0px");
				$(imgIdSideHide).css("position", "absolute").css("right", ssSettings.xOffset + "px");
			break;
			default:
		}



		//------------------------------------------------------------
		// Set the Z-Index of the Tab Image
		//------------------------------------------------------------
		if (ssSettings.zIndex != null)		$(imgIdSideShow).css("z-index", ssSettings.zIndex);
		if (ssSettings.zIndex != null)		$(imgIdSideHide).css("z-index", ssSettings.zIndex);

		//------------------------------------------------------------
		// Set the Vertical Position of the Tab on the content div (Top, Center, Bottom)
		//------------------------------------------------------------
		switch(ssSettings.tabPos)
		{
			case 'T':
				$(imgIdSideShow).css("top", "0px");		
				$(imgIdSideHide).css("top", "0px");		
			break;
			case 'C':
				var calcTabPos = (FindOuterDimensions(divIdSideShow, "OH") - ssSettings.tabHeight) / 2;
				$(imgIdSideShow).css("top", calcTabPos + "px");		
				$(imgIdSideHide).css("top", calcTabPos + "px");		
			break;
			case 'B':
				var calcTabPos = (FindOuterDimensions(divIdSideShow, "OH") - ssSettings.tabHeight);
				$(imgIdSideShow).css("top", calcTabPos + "px");		
				$(imgIdSideHide).css("top", calcTabPos + "px");		
			break;
			case 'A':
				var calcTabPos = ssSettings.tabPosAdj;
				$(imgIdSideShow).css("top", calcTabPos + "px");		
				$(imgIdSideHide).css("top", calcTabPos + "px");		
			break;
			default:
		}


		//------------------------------------------------------------
		// Setup the mouse event handelers for SHOW
		//------------------------------------------------------------
		$(imgIdSideShow).bind('click', function(event)
		{	
			var len = this.id.length;
			var baseElement = this.id.substr(0,len-7);
			var divElement = "#" + baseElement + "Div";
			var imgElementS = "#" + baseElement + "ShowImg";
			var imgElementH = "#" + baseElement + "HideImg";

			var isLeft = this.style.left;
			var isRight = this.style.right;
			var isWide = parseInt($(divElement).css("width"));

			// Close all other open auto windows
			$(".dbhSideShowAutoClose").each(function()
			{
				var thisId = "#" + this.id;
				var thisClass = "." + this.id;
				var eleLeft  = $(thisId).hasClass("dbhSideShowLeft");
				var eleRight = $(thisId).hasClass("dbhSideShowRight");
//				alert(thisId + "              L: " + eleLeft + " R: " +  eleRight);
				if (eleLeft)
				{
					// Open so hide
					$(thisId + "Div").hide();
					$(thisId + "ShowImg").show().css("left", "0px");			$(thisId + "HideImg").hide().css("left", "0px");
				}
	
				if (eleRight)
				{
					// Open so hide
					$(thisId + "Div").hide();
					$(thisId + "ShowImg").show().css("right", "0px");			$(thisId + "HideImg").hide().css("right", "0px");
				}

			});



			if (isLeft != "")
			{
				// Closed so open
				$(divElement).show();
				$(imgElementS).hide().css("left", "0px");
				$(imgElementH).show().css("left", FindOuterDimensions(divElement, "OW") + ssSettings.xOffset + "px");
			}

			if (isRight != "")
			{
				// Closed so open
				$(divElement).show();
				$(imgElementS).hide().css("right", FindOuterDimensions(divElement, "OW") + ssSettings.xOffset + "px");
				$(imgElementH).show().css("right", FindOuterDimensions(divElement, "OW") + ssSettings.xOffset + "px");
			}

		});


		//------------------------------------------------------------
		// Setup the mouse event handelers for HIDE
		//------------------------------------------------------------
		$(imgIdSideHide).bind('click', function(event)
		{	
			var len = this.id.length;
			var baseElement = this.id.substr(0,len-7);
			var divElement = "#" + baseElement + "Div";
			var imgElementS = "#" + baseElement + "ShowImg";
			var imgElementH = "#" + baseElement + "HideImg";

			var isLeft = this.style.left;
			var isRight = this.style.right;

			var isHidden = $(divElement).is(':hidden');
			if (isLeft != "")
			{
				// Open so hide
				$(divElement).hide();
				$(imgElementS).show().css("left", "0px");			$(imgElementH).hide().css("left", "0px");
			}

			if (isRight != "")
			{
				// Open so hide
				$(divElement).hide();
				$(imgElementS).show().css("right", "0px");			$(imgElementH).hide().css("right", "0px");
			}

		});

		//------------------------------------------------------------
		// Fix box model things for browsers that aren't W3C box model
		//------------------------------------------------------------
		$(function(){
			if (!jQuery.support.boxModel)
			{
				var divWid, divHig, divBor, divPad, divWTot, divHTot;
				divWid = parseInt($(divIdSideShow).css("width"));				divHig = parseInt($(divIdSideShow).css("height"));
				divBor = parseInt($(divIdSideShow).css("border-width"));		divPad = parseInt($(divIdSideShow).css("padding"));

				// Calc the new width and height
				divWTot = divWid + ((divBor + divPad) * 4);						divHTot = divHig + ((divBor + divPad) * 4);
//				alert(adjWid + "  " + divIdSideShow + "   W: " + divWid  + "   B: " + divBor  + "   P: " + divPad   + "   Tot: [" + divHTot + "]" );

				// Set the new width and height
				$(divIdSideShow).css("width", divWTot + "px");					$(divIdSideShow).css("height", divHTot + "px");
			}
		});


	}

	//********************************************************************
	//* FindOuterDimensions
	//********************************************************************
	function FindOuterDimensions(eleVal, selVal)
	{
		var valTmp, eleTmp, selTmp

		// Add # if needed to element id 
		if (eleVal.indexOf("#") != 0 )	eleTmp = "#" + eleVal; else eleTmp = eleVal;

		// get first char of selection type and make upper case
		selTmp = selVal.toUpperCase();


		if (selTmp == "OW")
		{
			valTmp = 	parseInt($(eleTmp).css("width")) + 
						parseInt($(eleTmp).css("border-left-width")) +	parseInt($(eleTmp).css("border-right-width")) +
						parseInt($(eleTmp).css("padding-left")) + 		parseInt($(eleTmp).css("padding-right"));
		}

		if (selTmp == "OH")
		{
			valTmp = 	parseInt($(eleTmp).css("height")) + 
						parseInt($(eleTmp).css("border-top-width")) +	parseInt($(eleTmp).css("border-bottom-width")) +
						parseInt($(eleTmp).css("padding-top")) + 		parseInt($(eleTmp).css("padding-bottom"));
		}
		
		return valTmp
	}
	

})(jQuery);