/**
 * cssArr is used to construct the css style sheet.
 */
var cssArr = new Array();
function ITI_MENU(){
  var menu_obj = document.getElementById(ITI_HORZ_MENU_ID);
  var ultags=document.getElementById(ITI_HORZ_MENU_ID).getElementsByTagName("ul");
  /**
   * highlight the parent links and change the font color of the selected menu page
   */
  var links = ITI_MENU_LINKED_PAGES.split(","); // ITI_MENU_LINKED_PAGES created in php function GET_LINKED_PAGES()
  var main_menu = ultags[0].getElementsByTagName("a"); // an array of all anchor tags in the menu
  for(var j=0;j<links.length;j+=1) { //alert(main_menu[wtf[j]]);
    main_menu[links[j]].style.backgroundColor = ITI_MENU_SELECTED_BGCOLOR;
    // the last item is the current page item
    if(j+1 == links.length) {main_menu[links[j]].style.color = ITI_MENU_SELECTED_TXTCOLOR;} 
  }

  /**
   * Check to make sure the menu css values jive with the css style sheet and update the values if not.
   */
  var minWidth = 0;
  var TopMenuItems = 0;
  var main_menu_items = ultags[0].childNodes; // alert(ultags[0].childNodes.length); // returns 5
  for(var cn=0;cn<main_menu_items.length;cn+=1){ // rem only parse LI items
    if(main_menu_items[cn].nodeName.toLowerCase() == "li") {
      main_menu_items[cn].style.width = "auto"; // must be auto to get the existing width
      TopMenuItems+=1; // Opera would otherwise count #text elements ie. main_menu_items.length would be approx 2 times the real value
      var thisWidth = (main_menu_items[cn].offsetWidth + 1*ITI_MENU_IMG_PADDING);
      minWidth = (thisWidth > minWidth)? thisWidth : minWidth;
    }
  }
  var marRight = getStyle(main_menu_items[1],'margin-right').replace("px","");
  var marLeft  = getStyle(main_menu_items[1],'margin-left').replace("px","");
  var IEROOT = ( minWidth + marRight*1 + marLeft*1 ) * TopMenuItems;
  var IEROOT_LT_7 =  IEROOT + (marRight*1 + marLeft*1);
  var IEROOT_CENTER = (IEROOT/2);
  var IEROOT_LT_7_CENTER = (IEROOT_LT_7/2);
  if(IEROOT_CENTER.toFixed) {
    IEROOT_CENTER = IEROOT_CENTER.toFixed(); // rounds up the value which is what is needed
    IEROOT_LT_7_CENTER = IEROOT_LT_7_CENTER.toFixed();
  }
  /**
   * adding the values to the array for internal use. ie to re-create a new style sheet
   */
  cssArr = {
    "minWidth":minWidth,
    "IEROOT_WIDTH":IEROOT,
    "IEROOT_CENTER":IEROOT_CENTER,
    "IEROOT_LT_7_WIDTH":IEROOT_LT_7,
    "IEROOT_LT_7_CENTER":IEROOT_LT_7_CENTER
  }

  /**
   * reset the widths that were set to auto in the previous validation
   */
  for(var cn=0;cn<ultags[0].childNodes.length;cn+=1){
    if(ultags[0].childNodes[cn].nodeName.toLowerCase() == "li"){ultags[0].childNodes[cn].style.width = minWidth+"px";}
  }
  
  if(document.getElementById('IEROOT_LT_7') !== null) {IEROOT = IEROOT_LT_7; IEROOT_CENTER = IEROOT_LT_7_CENTER;}
  menu_obj.getElementsByTagName("ul")[0].style.width = IEROOT + "px";
  menu_obj.style.marginLeft = -IEROOT_CENTER + "px";
  menu_obj.style.width = IEROOT + "px";
  
  /**
   * Check and re-center the window in case the ccs values changed as a result of the above calculations
   */
  ITI_Menu_Window_ReSize();
  /**
   * Now loop through all the submenu's and size the elements and submenu groups
   */
  for (var t=1; t<ultags.length; t+=1){ // starting with (1) the first nested ul
    var subMenuNodes = ultags[t].childNodes; // alert(ultags[t].childNodes.length);
    minWidth = 0;
    for(var node=0;node<subMenuNodes.length;node+=1){  //alert(subMenuNodes[node].getElementsByTagName("a")[0].innerHTML);
      if(subMenuNodes[node].nodeName.toLowerCase() == "li"){ //alert(subMenuNodes[node].nodeName);
        // set to auto to compute the real width
        subMenuNodes[node].style.width = "auto";
        thisWidth = subMenuNodes[node].offsetWidth;
        var testSubs = subMenuNodes[node].getElementsByTagName("ul");
        var add_padding = (testSubs.length != 0)? (1*ITI_MENU_IMG_PADDING) : 0;
        thisWidth += add_padding;
        minWidth = (thisWidth > minWidth)? thisWidth : minWidth;
      }
    }
    // now set all the items in this drop down list to the same width
    // rem FireFux must have "px" appended to accept a value ( smart browsers default to px in the absence of units )
    for(var node=0;node<subMenuNodes.length;node+=1){
      if(subMenuNodes[node].nodeName.toLowerCase() == "li"){subMenuNodes[node].style.width = minWidth + "px";}
    }
    // this must be set to ensure the UL width is set to the correct value, ie the width of the menu
    ultags[t].style.width = minWidth + "px";
    // Set the offset on any nested UL to the current width
    var subMenus = ultags[t].getElementsByTagName("ul"); // returns the number of UL UL items
    if(subMenus.length > 0 ) {
      for(var i=0;i<subMenus.length;i+=1){ subMenus[i].style.left = (0+minWidth) + "px";}
    }else ultags[t].style.marginLeft = 0;
    // the event functions
  	ultags[t].parentNode.onmouseover=function(){
      this.getElementsByTagName("ul")[0].style.visibility="visible";
      this.getElementsByTagName("a")[0].className = ITI_MENU_OPEN + " menu_arrow_right"; // the linked color
  	}
  	ultags[t].parentNode.onmouseout=function(){
      this.getElementsByTagName("ul")[0].style.visibility="hidden";
      this.getElementsByTagName("a")[0].className = "menu_arrow_down"; // reset linked color
  	}
  	// Browser may not have hidden the menu if the back button is used to return to the page. A WannaBee issue.
  	ultags[t].parentNode.onclick=function(){
      this.getElementsByTagName("ul")[0].style.visibility="hidden";
      this.getElementsByTagName("a")[0].className = "menu_arrow_down";
  	}
  }
}

/**
 * When the client browser is resized the menu needs to be re-centered
 */
function ITI_Menu_Window_ReSize(){
  var menu = document.getElementById(ITI_HORZ_MENU_ID);
  var anc = menu.getElementsByTagName("a");
  // get the current anchor width (ie the width of the open/resized window)
  var window_width = document.getElementById(ITI_MENU_TOP_ID).offsetWidth;
  var ultags=menu.getElementsByTagName("ul");
  var menu_width = ultags[0].offsetWidth;
  menu.style.left = 0 + "px";
  if(window_width <= menu_width){ 
    menu.style.marginLeft = 0 + "px";
  }else {
    var new_width = (window_width-menu_width)/2;
    if(new_width.toFixed) new_width = (new_width-1).toFixed(); // -1 seems to stop the jitter affect when refreshed
    menu.style.marginLeft = new_width + "px"; 
  }
}

/**
 * Get the style value of an object
 * 
 * MicroBucks and WannaBee Opera needs the property name with the hyphen removed where as
 * Wannabee FireFux wants the css style format. eg. FireFux margin-left, Microbucks marginLeft
 * This modified function converts the css value into currentStyle() format.
 * @see http://www.quirksmode.org/dom/w3c_css.html
 * @see http://www.quirksmode.org/dom/getstyles.html
 *
 * Also modified it to accept an "object" OR the tag "id"
 * @param Mixed el [string = tag ID | Object = element Object]
 * @param String styleProp in either css format. eg. margin-left
 * @return Mixed value.
 */
function getStyle(el,styleProp) {
  var x = (typeof el == "string")? document.getElementById(el) : el;
  if (x.currentStyle){  // alert("MicroBucks & Opera");
    var arr = styleProp.split("-");
    if(arr.length == 2){ styleProp = arr[0] + arr[1].substr(0,1).toUpperCase() + arr[1].substr(1);} //alert(styleProp);
    var y = x.currentStyle[styleProp];
  }else if(window.getComputedStyle) { // alert("WannaBee - Firefux & Opera")
    var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
  }
	return y;
}