// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

	var titleBarMenus = new Array();
	var titleBarTopMenus = new Array();

function buildProdBar() {
		YAHOO.namespace("example.container");
		
		
		//albums
		YAHOO.example.container.albums_prod_div = new YAHOO.widget.Overlay("albums_prod_div", { xy:[150,82], 
										  visible:false, 
										  width:"110",
										  height:"100",
										  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
										  
		//paper packs
		YAHOO.example.container.paperpacks_prod_div = new YAHOO.widget.Overlay("paperpacks_prod_div", { xy:[250,82], 
										  visible:false, 
										  width:"120",
										  height:"75",
										  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
										  
		//tools
		YAHOO.example.container.tools_prod_div = new YAHOO.widget.Overlay("tools_prod_div", { xy:[250,82], 
										  visible:false, 
										  width:"165",
										  height:"165",
										  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
										  
		//sale/clearance
		YAHOO.example.container.sale_prod_div = new YAHOO.widget.Overlay("sale_prod_div", { xy:[250,82], 
										  visible:false, 
										  width:"150",
										  height:"25",
										  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
										  
		//community
		YAHOO.example.container.comm_prod_div = new YAHOO.widget.Overlay("comm_prod_div", { xy:[250,82], 
										  visible:false, 
										  width:"150",
										  height:"25",
										  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
										  
		//embellishments
		YAHOO.example.container.embellishment_prod_div = new YAHOO.widget.Overlay("embellishment_prod_div", { xy:[250,82], 
										  visible:false, 
										  width:"165",
										  height:"280",
										  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
										  
		//cards n envelopes
		YAHOO.example.container.cardsenv_prod_div = new YAHOO.widget.Overlay("cardsenv_prod_div", { xy:[250,82], 
										  visible:false, 
										  width:"150",
										  height:"65",
										  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
		
		//cart
		
		
										  
		//Render them all
		 YAHOO.example.container.albums_prod_div.render();
		 YAHOO.example.container.paperpacks_prod_div.render();
		 YAHOO.example.container.tools_prod_div.render();
		 YAHOO.example.container.sale_prod_div.render();
		  YAHOO.example.container.comm_prod_div.render();
		 YAHOO.example.container.embellishment_prod_div.render();
		 YAHOO.example.container.cardsenv_prod_div.render();

		 
		 titleBarMenus = ['albums_prod_div', 'paperpacks_prod_div', 'tools_prod_div', 'sale_prod_div', 'comm_prod_div', 'embellishment_prod_div', 'cardsenv_prod_div'];
		 titleBarTopMenus = ['albumMenu', 'paperMenu', 'toolsMenu', 'saleMenu', 'commMenu', 'embellMenu', 'cardsEnvMenu'];
}
									  

	  function showProdDiv(theShowDiv, theMenu) {
		  var hiddenDiv = eval("YAHOO.example.container." + theShowDiv);
		  var menuDiv = document.getElementById(theMenu);
		  var domDiv = document.getElementById(theShowDiv);
		  
		  menuDiv.style.color = "#000000";
		  hiddenDiv.cfg.setProperty("z-ndex", "50");
		
		  var triggerMenu = document.getElementById(theMenu);
		  var menusX = triggerMenu.offsetLeft;
		  hiddenDiv.cfg.setProperty("x", menusX+6);
		  
		  //Hide everyone else and set back to grey
		  for (var i=0; i<titleBarMenus.length; i++) {
			  if (titleBarMenus[i] != theShowDiv) {
				eval("YAHOO.example.container." + titleBarMenus[i] + ".hide();");
				var topMenu = document.getElementById(titleBarTopMenus[i]);
				topMenu.style.color = "#8c8c8c";
			  }
		  }
		 
		  hiddenDiv.show();
		 
	  }
	  
	  function hideProdDiv(theHideDiv) {
		  
		for (var i=0; i<titleBarMenus.length; i++) {
			  if (titleBarMenus[i] == theHideDiv) {
				eval("YAHOO.example.container." + titleBarMenus[i] + ".hide();");
				var topMenu = document.getElementById(titleBarTopMenus[i]);
				topMenu.style.color = "#8c8c8c";
			  }
		  }
		//var topMenu = document.getElementById(theMenu);
		//topMenu.style.color = "#8c8c8c";
		
		
		//eval("YAHOO.example.container." + theHideDiv + ".hide();");
		
	  }
	  
	  
	  function rollOutEvent(evt, editpane) {
		//alert("Mouse X= " + evt.clientX + ", Mouse Y= " + evt.clientY );
		//If the mouse rolled off of the edit pane, close it
		var editPanel = eval("YAHOO.example.container." + editpane);
		var panelX = editPanel.cfg.getProperty("x");
		var panelY = editPanel.cfg.getProperty("y");
		
		//Yahoo's wonderful API returns width as a String. Go figure.
		//It trails with px as in XXpx (but not in all cases.. not sure what
		//the deal is there) so check for trailing px first
		var panelWidth = editPanel.cfg.getProperty("width");
		
		var pxLoc = panelWidth.indexOf("p");
		
		if (pxLoc != -1){
			panelWidth = panelWidth.substring(0, pxLoc);
		}
		panelWidth = new Number(panelWidth);
		
		var panelHeight = editPanel.cfg.getProperty("height");
		
		//****** TODO: In some cases there is no px trailing so I need to be smart
		//enough to check that it's there first. This issue is prematurely
		//closing the Add Files div!!!!!
		
		//As above, check to for trailing PX
		pxLoc = panelHeight.indexOf("p");
		
		if (pxLoc != -1){
			panelHeight = panelHeight.substring(0, pxLoc);
		}
		panelHeight = new Number(panelHeight);
		
		var mouseX = evt.clientX;
		var mouseY = evt.clientY;
		
		var panelMaxX = panelX + panelWidth;
	
		if ( (mouseX < panelX ) || (mouseX > panelMaxX) ) {
			//editPanel.hide();
			//Calling hideProdDiv sets the tabs back as well
			hideProdDiv(editpane);
		}
		else if ( mouseY < panelY ) {
			//editPanel.hide();
			hideProdDiv(editpane);
		}
		else if ( mouseY > (panelY + panelHeight) ) {
			//editPanel.hide();
			hideProdDiv(editpane);
		}

}