var menu;
function drawMenu() {
    menu = new Menu('menu','menuwrapper','menuborder');
    $('menu').setStyle({'display':'block'});
}

var MenuDiff = 50;
var MenuItemOut = '-5px';
var MenuItemOver = '-45px';
var MenuItemHeight = 25;
var MenuHeight = 100;
var MenuItem = Class.create();
// get it all into and object
var Menu = Class.create();
Menu.prototype = {
    initialize:function(menuid, wrapperid, borderid) {
        /* this.container represents the div tag container */
        this.id = menuid;
        this.wrapper = $(wrapperid);
        this.border = $(borderid);
        this.container = $(this.id);
        this.items = {};
        /* this.menulist represents the ul */
        this.menulist = this.container.getElementsByTagName('ul')[0];
        /* get the li nodes of the list */
        li = $A(this.menulist.childNodes).findAll( function(node){
                        return (node.nodeName == 'LI');
        });
        var links = {};
        var xpos = 0;
        var submenulist;
        var i;
        for (i=0;i<li.length;i++){
            a = $A(li[i].childNodes).findAll( function(l) {
                        return(l.nodeName == 'A');
            })[0];
            div = $A(li[i].childNodes).findAll( function(l) {
                        return(l.nodeName == 'DIV');
            })[0];
            if (typeof a != 'undefined') {
                id = li[i].getAttribute('id');
                submenulist = li[i].getElementsByTagName('ul')[0];
                links[id] = new MenuItem(id, a, xpos, submenulist);
                xpos += links[id].width;
            } else {
                id = li[i].getAttribute('id');
                submenulist = li[i].getElementsByTagName('ul')[0];
                links[id] = new MenuItem(id, div, xpos, submenulist);
                xpos += links[id].width;
            }
        }
        this.items = $H(links);
        this.width = xpos;
        this.draw();
    },
    draw: function() {
        /* actually just positions to center of page */
        w = this.width;
        winwidth = getWindowDimensions().width;
        xpos = (winwidth/2) - (w/2);
        xpos = xpos < 0 ? 0 : xpos;
        head = $('header');
        if (typeof(head) == 'undefined') {
            ypos = 0
        } else {
            ypos = (head.offsetHeight < 50) ? 0 : 161;
        }
        var h = MenuItemHeight;
        wstyle = {
                'height': h + 'px',
                'left': '0px',
                'top': ypos + 'px'
                }   
        this.wrapper.setStyle(wstyle);
        // clipping the layer to prevent overlapping on content - and blocking links
        // and forms in IE
        ww = w + 70;
        style = {
                'visibility': 'visible',
                'height': MenuHeight + 'px',
                'width': ww + 'px',
                'left': xpos + 'px',
                'clip': 'rect(0, '+ww+', '+h+', 0)',
                'overflow': 'hidden',
                'top': '0px'
                }   
        this.container.setStyle(style);
        bw = w < winwidth ? winwidth : w;
        bstyle = {
                'visibility': 'visible',
                'height': h + 'px',
                'width': bw + 'px',
                'left': '0px',
                'top':'0px'
                }   
        this.border.setStyle(bstyle);
    }
}

MenuItem.prototype = {
    initialize: function(id, obj, xpos, submenulist) {
        this.id = id;
        this.obj = $(obj);
        this.obj.id = id;
        this.obj.parent = this;
        this.obj.img = MenuImages[id];
        this.xpos = xpos;
        this.width = this.obj.img.width;
        this.height = MenuItemHeight;
        this.submenulist = submenulist;
        this.draw();
    },
    draw: function() {
        var w = this.width + 'px';
        var h = this.height + 'px';
        var step = this.obj.className == 'selected' ? MenuItemOver : MenuItemOut;

        style = {
                'background':'transparent url(' + this.obj.img.src + ') no-repeat 0px ' + step,
                'width':w,
                'height':h,
                'position':'absolute',
                'top':'0px',
                'left': this.xpos + 'px'
                }   
        this.obj.setStyle(style);

        // hide the div text
        span = $A(this.obj.childNodes).findAll( function(l) {
                    return(l.nodeName == 'SPAN');
        })[0];
        if(typeof span != 'undefined') {
            $(span).setStyle({'display':'none'});
        }

        /* add event observer to the link */
        Event.observe(this.obj, "mouseover", this.mouseover);
        Event.observe(this.obj, "mouseout", this.mouseout);
        if (this.obj.nodeName == 'A') {
            Event.observe(this.obj, "mouseup", this.mouseup);
        }

        /* create the submenu lists */
        /* get the li nodes of the list */
        var sublinks = {};
        var ypos = this.height;
        if (this.submenulist != null) {
            if (typeof this.submenulist != 'undefined') {
                mli = $A(this.submenulist.childNodes).findAll( function(node){
                                return (node.nodeName == 'LI');
                });
                var j;
                var infoypos = 8 + (SubMenuItemHeight * (mli.length + 1));
                for (j=0;j<mli.length;j++){
                    ma = $A(mli[j].childNodes).findAll( function(l) {
                                return(l.nodeName == 'A');
                    })[0];
                    s = ma.href.split('/');            
                    mid = s[s.length-1].split('.')[0]; 
                    newx = this.xpos + (this.width - MenuImages[mid].width)/2;
                    sublinks[mid] = new SubMenuItem(mid, this, ma, mli[j], 
                                                  this.submenulist, newx, ypos, infoypos);
                    ypos += sublinks[mid].height;
                }
            }
        }
        this.items = sublinks;
        this.height = ypos;
    },
    mouseover: function(event) {
        obj = Event.element(event);
        $(obj).setStyle({
            'background':'transparent url(' + obj.img.src + ') no-repeat 0px ' + MenuItemOver
        });
        items = obj.parent.items; 
        for (k in items){
            items[k].show();
        }
    },
    mouseout: function(event) {
        obj = Event.element(event);
        var step = obj.className == 'selected' ? MenuItemOver : MenuItemOut;
        $(obj).setStyle({
            'background':'transparent url(' + obj.img.src + ') no-repeat 0px ' + step
        });
        items = obj.parent.items; 
        for (k in items){
            items[k].hide();
        }
    },
    mouseup: function(event) {
        // effectively disables all links and prevent errors
        //style = {'z-index': '1000'}   
        //$('menuborder').setStyle(style);
    }
}

var SubMenuDiff = 50;
var SubMenuItemOut = '-5px';
var SubMenuItemOver = '-55px';
var SubMenuItemActive = '-105px';
var SubMenuItemHeight = 20;
var SubMenuItem = Class.create();
SubMenuItem.prototype = {
    initialize: function(id, container, obj, ali, mul, xpos, ypos, infoypos) {
        this.id = id;
        this.container = container;
        this.obj = $(obj);
        this.obj.li = $(ali);
        this.obj.id = id;
        this.obj.parent = this;
        this.obj.container = this.container;
        this.obj.img = MenuImages[id];
        this.ul = $(mul);
        this.ypos = ypos;
        this.xpos = xpos;
        this.infoypos = infoypos;
        this.width = this.obj.img.width;
        this.height = SubMenuItemHeight;
        this.draw();
    },
    draw: function() {
        var w = this.width + 'px';
        var h = this.height + 'px';
        var step = this.obj.className == 'selected' ? SubMenuItemActive : SubMenuItemOut;

        style = {
                'background':'transparent url(' + this.obj.img.src + ') no-repeat 0px ' + step,
                'text-decoration':'none',
                'width':w,
                'height':h,
                'position':'absolute',
                'top': this.ypos + 'px',
                'left': this.xpos + 'px'
                }   
        this.obj.setStyle(style);
        this.hide();

        // hide the div text
        spans = $A(this.obj.childNodes).findAll( function(l) {
                    return(l.nodeName == 'SPAN');
        });
        $(spans[0]).setStyle({'display':'none'});
        this.info = $(spans[1]);
        this.obj.li.appendChild(this.info);
        style = {'position':'absolute',
                 'top':this.infoypos+'px',
                 'left':this.xpos+'px',
                 'width':this.obj.img.width -2 +'px',
                 'z-index': '3000',
                 'display':'none'
                };
        this.info.setStyle(style);
        Element.setOpacity(this.info, 0.8);

        /* add event observer to the link */
        Event.observe(this.obj, "mouseover", this.mouseover);
        Event.observe(this.obj, "mouseout", this.mouseout);
        Event.observe(this.obj, "mousedown", this.mousedown);
        Event.observe(this.obj, "mouseup", this.mouseup);

    },
    mouseover: function(event) {
        //obj = Event.findElement(e,'a');
        obj = Event.element(event);
        var step = obj.className == 'selected' ? SubMenuItemActive : SubMenuItemOver;
        obj.setStyle({
            'background':'transparent url(' + obj.img.src + ') no-repeat 0px ' + step
        });
        obj.parent.show();
        //obj.parent.info.setStyle({'display':'block'});
        var cobj = obj.container.obj;
        $(cobj).setStyle({
            'background':'transparent url(' + cobj.img.src + ') no-repeat 0px ' + MenuItemOver
        });
        
    },
    mouseout: function(event) {
        obj = Event.element(event);
        var step = obj.className == 'selected' ? SubMenuItemActive : SubMenuItemOut;
        obj.setStyle({
            'background':'transparent url(' + obj.img.src + ') no-repeat 0px ' + step
        });
        obj.parent.hide();
        //obj.parent.info.setStyle({'display':'none'});
        var cobj = obj.container.obj;
        step = cobj.className == 'selected' ? MenuItemOver : MenuItemOut;
        $(cobj).setStyle({
            'background':'transparent url(' + cobj.img.src + ') no-repeat 0px ' + step
        });
    },
    mousedown: function(event) {
        obj = Event.element(event);
        obj.setStyle({
            'background':'transparent url(' + obj.img.src + ') no-repeat 0px ' + SubMenuItemActive
        });
    },
    mouseup: function(event) {
        // effectively disables all links and prevent errors
        //style = {'z-index': '1000'}   
        //$('menuborder').setStyle(style);
        //obj.parent.hide();
        //obj.parent.info.setStyle({'display':'none'});
    },
    show: function() {
        style = {
                'visibility': 'visible'
                }   
        this.ul.setStyle(style);
    },
    hide: function() {
        style = {
                'visibility': 'hidden'
                }   
        this.ul.setStyle(style);
    }
}
  
function menuInitialize() {
    drawMenu();
}
Event.observe(window, 'load', menuInitialize, false);

function reDrawMenu() {
    if (typeof menu != 'undefined') {
        menu.draw();
    }
}

Event.observe(window, 'resize', reDrawMenu, false );

//window.onscroll = function positionMenu() {
//    ox = getScrollXY()[1];
    //oh = $('menuwrapper').offsetTop;
//    $('menuwrapper').setStyle({'top': ox+'px'});
//}
//Event.observe(window, 'onscroll', positionMenu, false );