/*************************************************************\
*                                                             *
*                       PUPIUS.CO.UK MENU                     *
*                                                             *
* THIS SCRIPT IS MESSY!!!  But it works, it breaks down the   *
* list and builds a nice dynamic menu for it.  Note if JS is  *
* is disabled CSS should handle it quite gracefully.          *
*                                                             *
* creator:     Daniel Pupius <http://pupius.co.uk/contact/>   *
* date:        April 2004  (release version, 02/02/2005)      *
* version:     1.2                                            *
* rights:      copyright(c)2004 Dan Pupius www.pupius.co.uk   *
*                                                             *
* You are free to use the scripts for non-commercial projects,*
* as long as you leave these copyright statements intact.      *
*                                                             *
\*************************************************************/
 
var MENU_TOP_OFFSET = 17; // this needs to be hard coded as I was being a bit lazy when I wrote the script.
 
var Site = {
 
 menuitems: new Array(),
 tracer:  null,
 active:  0,
 selected: -1,
 tracerAnim: null,
 timer:  null,
 
 setup:  function() {
    if(!document.getElementsByTagName || !document.createElement || !document.appendChild) return false;
 
    //grab list, hide it and create a list object from it
    var navbar = document.getElementById("nav");
    var list = navbar.getElementsByTagName("ul")[0];
    list.style.display = "none";
    var menu = new ListObject(list);
 
    //create the tracer element which will show the current menu item
    this.tracer = document.createElement("div");
    this.tracer.className = "menutracer";
    navbar.appendChild(this.tracer);
 
    this.menuitems[-1] = null;
 
    //process first level menu items
    for(var i=0;i<menu.items.length;i++) {
     
     //create a new element for this item
     var item = document.createElement("div");
     item.className = "menuitem";
     item.index = i;
     item.href = menu.items[i].href;
     item.appendChild(document.createTextNode(menu.items[i].caption));
     if(menu.items[i].className=="selected") this.selected=i; 
 
     //append item to navbar
     navbar.appendChild(item);
 
     //create events
     Toolkit.Events.addListener(item,"onmouseover",function() { if(Site.timer) window.clearTimeout(Site.timer); Site.setActive(this.index); Site.show_menu(this.index); window.status = this.href; },item);
     Toolkit.Events.addListener(item,"onmouseout",function() {if(!this.menuholder) Site.setActive(Site.selected); else Site.timer = setTimeout("Site.setActive(Site.selected); Site.show_menu(-1)",750); window.status = ""; },item);
     Toolkit.Events.addListener(item,"onclick",function() { location.href = this.href; },item);
 
     //if this item has sub-items, render them now
     if(menu.items[i].subList) {
      var sub = document.createElement("div");
      sub.className = "menuback";
      sub.index = i;
 
      item.className = "menuitem x";
      item.menuholder = sub;
      
      Toolkit.Events.addListener(sub,"onmouseover",function() { if(Site.timer) window.clearTimeout(Site.timer); Site.setActive(this.index);  },sub);
      Toolkit.Events.addListener(sub,"onmouseout",function() { Site.timer = setTimeout("Site.setActive(Site.selected); Site.show_menu(-1)",750); },sub);
      
 
      //add the content to the menu (using a table)
      var table = document.createElement("table");
      var tb = document.createElement("tbody");
      var tr = document.createElement("tr");
      table.appendChild(tb);
      tb.appendChild(tr);
      sub.appendChild(table);
      document.getElementById("canvas").appendChild(sub);
      
      //create columns for each level (max of 5) ** ultra-messy bit **
      var level1 = document.createElement("td");
      level1.id = "td_" + i + "_1";level1.className="td1";
      tr.appendChild(level1);
 
      var level2 = document.createElement("td");
      level2.id = "td_" + i + "_2";level2.className="td2";
      tr.appendChild(level2);
 
      var level3 = document.createElement("td");
      level3.id = "td_" + i + "_3";level3.className="td3";
      tr.appendChild(level3);
 
      var level4= document.createElement("td");
      level4.id = "td_" + i + "_4";level4.className="td4";
      tr.appendChild(level4);
 
      var level5 = document.createElement("td");
      level5.id = "td_" + i + "_5";level5.className="td5";
      tr.appendChild(level5);
 
 
 
      //add level one items and recurse on other levels
      for(var k=0;k<menu.items[i].subList.items.length;k++) {
       var d = document.createElement("a");
       d.href = menu.items[i].subList.items[k].href;
       
       var caption = menu.items[i].subList.items[k].caption
       if(menu.items[i].subList.items[k].className=="selected") caption = "--> " + caption;
 
       d.appendChild(document.createTextNode(caption));
       level1.appendChild(d);
       
       if(menu.items[i].subList.items[k].subList) {
        d.className = "menulink sub";
        d.menu = i;
        d.level = 2;
        d.index = menu.items[i].subList.items[k].caption;
        Toolkit.Events.addListener(d,"onmouseover",function() { Site.show_sub_menu(this.menu,this.level,this.index); this.className = "menulink sub active";  },d);
     
        Site.recurseMenus(menu.items[i].subList.items[k].subList,i,2,menu.items[i].subList.items[k].caption);
 
       } else {
        d.className = "menulink";
        d.menu = i;
        d.level = 2;
        d.index = "";
        Toolkit.Events.addListener(d,"onmouseover",function() { Site.show_sub_menu(this.menu,this.level,this.index); },d);
       }
      }
 
     } else item.menuholder = null;
 
     //keep track of this item
     this.menuitems.push(item);
    }
 
 
    Toolkit.Events.addListener(document,"onclick",function() { if(Site.timer) window.clearTimeout(Site.timer); Site.setActive(Site.selected); Site.show_menu(-1); },item);
 
 
    //position primary elements
    var cursor = 0;
    for(i=0;i<this.menuitems.length;i++) { // (i already defined reuse it for this loop)
     this.menuitems[i].style.marginLeft = cursor + "px";
     cursor += this.menuitems[i].offsetWidth;
 
     if(this.menuitems[i].menuholder) {
      this.menuitems[i].menuholder.style.left = (navbar.offsetLeft + this.menuitems[i].offsetLeft - 1) + "px";
      this.menuitems[i].menuholder.style.top = MENU_TOP_OFFSET + "px";
     }
    }
    Site.tracer.style.marginLeft = "0px";  
    Site.tracer.style.width = "1px";       
 
    //set the active menu item;
    Site.setActive(Site.selected);
    Site.show_menu(-1);
 
    return true;
   },
 
 recurseMenus: function(list,menu,level,parent) {
    for(var k=0;k<list.items.length;k++) {
     var d = document.createElement("a");
     d.href = list.items[k].href;
     d.parent = parent;
     
     var caption = list.items[k].caption;
     if(list.items[k].className=="selected") caption = "--> " + caption;
 
     d.appendChild(document.createTextNode(caption));
     document.getElementById("td_"+menu+"_"+level).appendChild(d);
     
     if(list.items[k].subList) {
      d.className = "menulink sub";
      Site.recurseMenus(list.items[k].subList,menu,level+1,list.items[k].caption);
      d.menu = menu;
      d.level = level+1;
      d.index = list.items[k].caption;
      Toolkit.Events.addListener(d,"onmouseover",function() { Site.show_sub_menu(this.menu,this.level,this.index); this.className = "menulink sub active"; },d);
     
     } else {
      d.className = "menulink";
      d.menu = menu;
      d.level = level+1;
      d.index = "";
      Toolkit.Events.addListener(d,"onmouseover",function() { Site.show_sub_menu(this.menu,this.level,this.index); },d);
 
     }
    }
   },
 
 show_menu: function(n) {
    for(var i=0;i<Site.menuitems.length;i++) {
     if(i==n && Site.menuitems[i].menuholder) Site.menuitems[i].menuholder.style.visibility = "visible";
     else if(Site.menuitems[i].menuholder) Site.menuitems[i].menuholder.style.visibility = "hidden";
    }
    Site.show_sub_menu(n,2,"");
   },
 
 //note this is super messy as no references are used, this is to try
 //and help avoid memory leaks in IE
 show_sub_menu: function(menu,level,index) {
    if(Site.menuitems[menu] && Site.menuitems[menu].menuholder) {
     if(index != "") {
      if(typeof document.all != "undefined" ) document.getElementById("td_"+menu+"_"+level).style.display = "inline";
      else document.getElementById("td_"+menu+"_"+level).style.display = "table-cell";
     
      for(var x=0;x<document.getElementById("td_"+menu+"_"+level).getElementsByTagName("a").length;x++) {
       if(document.getElementById("td_"+menu+"_"+level).getElementsByTagName("a")[x].parent==index) document.getElementById("td_"+menu+"_"+level).getElementsByTagName("a")[x].style.display = "block";
       else document.getElementById("td_"+menu+"_"+level).getElementsByTagName("a")[x].style.display = "none";
       if(document.getElementById("td_"+menu+"_"+level).getElementsByTagName("a")[x].className=="menulink sub active") {
        document.getElementById("td_"+menu+"_"+level).getElementsByTagName("a")[x].className="menulink sub";
       }
      }
 
     } else document.getElementById("td_"+menu+"_"+level).style.display = "none";
    }
 
    for(var j=level+1;j<=5;j++) if(document.getElementById("td_"+menu+"_"+j)) document.getElementById("td_"+menu+"_"+j).style.display = "none";
 
    if(document.getElementById("td_"+menu+"_"+(level-1))) {
     for(var y=0;y<document.getElementById("td_"+menu+"_"+(level-1)).getElementsByTagName("a").length;y++) {
      if(document.getElementById("td_"+menu+"_"+(level-1)).getElementsByTagName("a")[y].className=="menulink sub active") {
       document.getElementById("td_"+menu+"_"+(level-1)).getElementsByTagName("a")[y].className="menulink sub";
      } 
     }
    }
   },
 
 setActive: function(n) {
    this.active = n;
 
    //if an anmation is already running, stop it
    if(Site.tracerAnim != null) Site.tracerAnim.stop();
 
    //calculate start position
    var startX = parseInt(Site.tracer.style.marginLeft);
    var startW = Site.tracer.offsetWidth;
 
    //calculate end position
    var endX = -2;
    var endW = 1;
    if(n!=-1) {
     endX = parseInt(Site.menuitems[n].style.marginLeft);
     endW = Site.menuitems[n].offsetWidth;
    }
 
    //create 2D line for the movement (not in xy space but xw :)
    var line = new Toolkit.Drawing.Curves.Line([startX,startW],[endX,endW]);
 
    //create animation object
    Site.tracerAnim = new Toolkit.Drawing.Animation(line,500,0.999);
    Toolkit.Events.addListener(Site.tracerAnim,"onanimate",Site.drawTracer);
    Toolkit.Events.addListener(Site.tracerAnim,"onend",Site.stopTracer);
 
    //start animation
    Site.tracerAnim.start();
   },
 
 drawTracer: function(animobj) {
    var x = Math.round(animobj.coordinates[0]);
    var w =  Math.round(animobj.coordinates[1]);
    
    if(!isNaN(x)) Site.tracer.style.marginLeft = x + "px";
    if(!isNaN(w)) Site.tracer.style.width = w + "px";
   },
 
 stopTracer: function(){
    Site.tracerAnim = null;
   }
}
 
Toolkit.Events.addListener(window,"onload",function() {Site.setup();});
//onload = function() { Site.setup(); }
 
 
 
function openPopup(url,w,h) {
 var x = (screen.width / 2) - (w / 2);
 var y = (screen.height / 2) - (2* h / 3);
 
 var NewWindow = window.open(url, "_blank", "status=0,scrollbars=1,resizable=0,toolbar=0,menubar=0,width="+w+",height="+h+",left="+x+",top="+y);
 
 if(NewWindow) return false;
 else return true;
}