//determines browser versions
bV=parseInt(navigator.appVersion);
ns4 = (document.layers);
ie4 = (document.all && !document.getElementById);
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opra = navigator.userAgent.indexOf("Opera") > -1;
// newline only wants one menu to be open at a time. 
// this is a global variable that simply holds the category id of the last open menu
var openStatus = null;

// ns4 support -- we need the INDEX of a layer not it's ID.
// ns4 stores an array of all the elements by type
     function getIndex(el) {
         ind = null;
         for (i=0; i<document.layers.length; i++)
		  {
             whatEl = document.layers[i];
             if (whatEl.id == el) {
                 ind = i;
               break;
             }
          } //end of for
         return ind;
     }


// ns4 support -- so we need to calculate the height and stack all the visable layers on top of each other
function arrange() { //re-aranges emelements on page in proper order for Netscape
if (ns4) {
	if ('newline' == '<xsl:value-of select="$session.designtype"/>') document.layers[firstInd].pageX = window.innerWidth - 145;
        var nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
	  for (i=firstInd+1; i<document.layers.length; i++)
		{
		    whichEl = document.layers[i];
	        if (whichEl.visibility != "hide") {
                whichEl.pageY = nextY;
                nextY += whichEl.document.height;
				whichEl.pageX = document.layers[firstInd].pageX;
			}
		 }
     }
}

// declares 'dbimages', which is true when database images are being used.  False when regular static filesystem images are used.
var dbimages;

// expands or contracts the menu item
// rolls over arrow image
// sets global openStatus toggle
function expandItNL(el) { //hides, unhides menu images (needs arrange to look proper)
	 	if (bV < 4) return;
		// different browsers support different ways of grabbing elements
		// the most popular current way is by the element id
         if(ie5 || ns6) {
			 // this function is only passed a number, but the ids have names associated with them so this pieces the name with the number
			 // in newlines case this number is the category id.
             whichEl = "menuChildren" + el;
			 whichIm = "menuArrow" + el; 
			  if (document.getElementById(whichEl).style.display == "block") {// if the child element is visible
                 document.getElementById(whichEl).style.display = "none";// make it hidden
				 // static image or database image?
				 if (dbimages) document.getElementById(whichIm).src = "/kernel/imageload?table=cat_images;key1=category_" + dcid + "_menu_arrow_right;key2=category_" + dcid + "_speck";
				 else document.getElementById(whichIm).src = "/kernel/images/" + design + "/arrow-right.gif";// roll over the arrow image into it's neutral state
				 openStatus=null;
             } // end of if
             else { // otherwise the state of the display property is none therfore we want to actually open it
				collapse(design); // this will close whatever category is currently opened
                  document.getElementById(whichEl).style.display = "block"; // back the child element show
				  // static image or database image?
				  if (dbimages) document.getElementById(whichIm).src = "/kernel/imageload?table=cat_images;key1=category_" + dcid + "_menu_arrow_down;key2=category_" + dcid + "_speck";
				  else document.getElementById(whichIm).src = "/kernel/images/" + design + "/arrow-down.gif"; // change the parent category ids arrow image to the down (open) state
				  openStatus = el; // set the global open Status variable to the category id we just openend.
             } // end of else
         }// end of if
		 // the next two blocks, in essance, do the same as the one above except for how the elements are referenced so I won't bother documenting it
         else if (ie4) {
             whichEl = eval("menuChildren" + el);
			 whichIm = eval("menuArrow" + el); 
			  if (whichEl.style.display == "block") {
                 whichEl.style.display = "none";
				 // static image or database image?
				 if (dbimages) whichIm.src = "/kernel/imageload?table=cat_images;key1=category_" + dcid + "_menu_arrow_right;key2=category_" + dcid + "_speck";
				 else whichIm.src = "/kernel/images/" + design + "/arrow-right.gif";
				 openStatus=null;
             } // end of if
             else {
				 collapse(design);
                 whichEl.style.display = "block";
				 // static image or database image?
				 if (dbimages) whichIm.src = "/kernel/imageload?table=cat_images;key1=category_" + dcid + "_menu_arrow_down;key2=category_" + dcid + "_speck";
				 else whichIm.src = "/kernel/images/" + design + "/arrow-down.gif";
				 openStatus = el;
             } // end of else
         }// end of if
         else if(ns4){
             whichEl = eval("document." + "menuChildren" + el);
             if (whichEl.visibility == "show") {
                whichEl.visibility = "hide";
				openStatus=null;
             }// end of if
             else {
				collapse(design);
                whichEl.visibility = "show";
				openStatus = el;
             } // end of else
			 arrange();
        } // end of else 
} // end of function

// we only want one menu item openStatus at a time.
// uses global openStatus togle to see whats openStatus
// this function kind of does what the above function does but in reverse.
// set's the openStatus global variable to none.
// of course I should just make the function above support this
function collapse(design) { // collapse the entire tree	
	if (bV < 4) return;
	if (openStatus == null) return;
	if (ns4) {
			whichOEl = eval("document." + "menuChildren" + openStatus);
			whichOEl.visibility = "hide";
	}
	else if (ie4){
             whichOEl = eval("menuChildren" + openStatus);
			 whichOIm = eval("menuArrow" + openStatus); 
			 whichOEl.style.display = "none";
			 // static image or database image?
			 if (dbimages) whichOIm.src = "/kernel/imageload?table=cat_images;key1=category_" + dcid + "_menu_arrow_right;key2=category_" + dcid + "_speck";
			 else whichOIm.src = "/kernel/images/" + design + "/arrow-right.gif";
	}
	else if (ie5 || ns6) {
             whichOEl = "menuChildren" + openStatus;
			 whichOIm = "menuArrow" + openStatus; 
			 document.getElementById(whichOEl).style.display = "none";
			 // static image or database image?
			 if (dbimages) document.getElementById(whichOIm).src = "/kernel/imageload?table=cat_images;key1=category_" + dcid + "_menu_arrow_right;key2=category_" + dcid + "_speck";
			 else document.getElementById(whichOIm).src = "/kernel/images/" + design + "/arrow-right.gif";
	}
	openStatus = null;
} //end of function

// To turn an on image to off or turn an off image to on
// it is a helper function for expandIt
function toggleImg(el) {
	var imgsrc = document.getElementById(el).src;
	if (imgsrc.indexOf('_off.gif') != -1) {
		var re = new RegExp("_off.gif","g");
		imgsrc = imgsrc.replace(re,"_on.gif");
	}
	else {
		var re = new RegExp("_on.gif","g");
		imgsrc = imgsrc.replace(re,"_off.gif");
	}
	document.getElementById(el).src = imgsrc;
}

// global variable that stores the id of the currently open menu
var openMenu;

// expands or contracts the menu item
// sets global openStatus toggle
// chances are good that this function will be overwritten in any specific package due to design
function expandIt(el,cmd) { //hides, unhides menu images (needs arrange to look proper)
		if (bV < 4) return;
		parentEl = el.replace('menuChildren', 'parent');
		if (openMenu == el && cmd) {
		    if (document.getElementById(parentEl).className == 'menuParent_on') {
					if (cmd == 'on') {
						return;
					}
				} else {
					if (cmd == 'off') {
						return;
					}
				}
		}

		if ((openMenu != null) && (openMenu != el)) {
			// only toggle the image when there is an img
			if (document.getElementById(openMenu + '-img')) {
				toggleImg(openMenu + '-img');
			}
			hideElement(openMenu);
			parentOpen = openMenu.replace('menuChildren', 'parent');
			changeClass(parentOpen, 'menuParent_off');
		}
		// only toggle the image when there is an img
		if (document.getElementById(el+'-img')) {
			toggleImg(el + '-img');
		}
		hideElement(el);
		if (document.getElementById(parentEl).className == 'menuParent_off')
			changeClass(parentEl, 'menuParent_on');
		else 
			changeClass(parentEl, 'menuParent_off');
        if(ns4){
			 arrange();
        }  
		if (openMenu == el) openMenu = null;
		else openMenu = el;
}