var menu = null;

function MenuControl(name, container, imagePath) {
    this.Name = name;
    this.Container = container;
    this.ImagePath = imagePath;
    this.MenuItems = new Array();    
    
    this.Create = function() {
        var localthis = this;        
        var index = Get_Cookie(this.Name);        
        var menuItem = new MenuItem();
        //alert("MenuItems Length: " + this.MenuItems.length);
        for(var i = 0; i < this.MenuItems.length; i++) {
            // get the MenuItem from the list
            menuItem = this.MenuItems[i];
            
            menuItem.PreLoadedImage.src = this.ImagePath + menuItem.Image;
            menuItem.PreLoadedSelectedImage.src = this.ImagePath + menuItem.SelectedImage;
            
            var html = '<div id="' + 'divItem_' + menuItem.Name + '" style="';
            html += "width:" + menuItem.Width + "; ";
            html += "height:" + menuItem.Height + "; ";
            if (index != null && index == i)
                html += "background-image:url('" + this.ImagePath + menuItem.SelectedImage + "'); ";
            else
                html += "background-image:url('" + this.ImagePath + menuItem.Image + "'); ";
            html += '" '; 
            
            if (index != null && index == i) {
            }
            else {   
                html += "onmouseover=\"MenuItem_MouseOver(this, " + menuItem.Index + ",'" + this.ImagePath + menuItem.SelectedImage + "')\"";
                html += "onmouseout=\"MenuItem_MouseOut(this, " + menuItem.Index + ",'" + this.ImagePath + menuItem.Image + "')\"";
                html += "onclick=\"MenuItem_OnClick(this, " + menuItem.Index + ",'" + menuItem.NavUrl + "')\"";
            }
            html += ">&nbsp;</div>";
            
            this.Container.innerHTML += html;            
        }
        
        menu = this;        
    };
    
    this.AddItem = function(menuItem) {
        this.MenuItems[this.MenuItems.length] = menuItem;
    };
        
    this.SaveSelectedMenuItem = function(index) {
        Set_Cookie( this.Name, index, 7, '/', '', '' );
    };
}

function MenuItem(index, name, width, height, image, selectedImage, navUrl, hoverControl, hasSubMenu, posY) {
    this.Index = index;
    this.Name = name;
    this.Width = width + "px";
    this.Height = height + "px";
    this.Image = image;
    this.SelectedImage = selectedImage;
    this.NavUrl = navUrl;
    this.HoverControl = hoverControl;
    this.PosY = posY
    this.HasSubMenu = hasSubMenu;
    
    if (width != null && height != null) {
        this.PreLoadedImage = new Image(width, height);
        this.PreLoadedSelectedImage = new Image(width, height);
    }
}


function MenuItem_MouseOver(divItem, index, image) {
    ResetMenuItems(1);
    divItem.style.backgroundImage = "url('" + image + "')";
    showdiv(divItem, menu.MenuItems[index].HoverControl.id, 0, menu.MenuItems[index].PosY);
}

function MenuItem_MouseOut(divItem, index, image) {
    if (!menu.MenuItems[index].HasSubMenu) {
        divItem.style.backgroundImage = "url('" + image + "')";
        hideDivSpecial(menu.MenuItems[index].HoverControl.id);
    }
}

function MenuItem_OnClick(divItem, index, url) {
    //menu.SaveSelectedMenuItem(index);
    window.location = url;
}

function ResetMenuItems(level) {
    for (var i = 0; i < menu.MenuItems.length; i++) {
        var divItem = document.getElementById("divItem_" + menu.MenuItems[i].Name);
        divItem.style.backgroundImage = "url('" + menu.ImagePath +  menu.MenuItems[i].Image + "')";
    }
    
    //hideDivsToLevel(level);
}

//*************************************************************************************************************

//You will notice that I never actually detect the browser type, I just
//detect its capabilities and then use them. This means that if someone
//uses a browser that I don't know, but is able to use either method, it
//will still work.

window.onerror = null;

//initialise all variables

var olddiv = new Array();    //this will become a reference to the objects that are being shown or were last shown

function getRefToDivNest(divID, oDoc) {
    if (!oDoc) { oDoc = document; }
    if (document.layers) {
        if (oDoc.layers[divID]) { return oDoc.layers[divID]; } else {
            for (var x = 0, y; !y && x < oDoc.layers.length; x++) {
                y = getRefToDivNest(divID, oDoc.layers[x].document);
            }
            return y;
        } 
    }
    if (document.getElementById) { return document.getElementById(divID); }
    if (document.all) { return document.all[divID]; }
    return document[divID];
}

function showdiv(divItem, thisdiv, mylevel, posY) {
    //this function shows the div and sets the level that the div exists at to 'mylevel'
    hideDivsToLevel(mylevel); //first, hide the last one
    olddiv[mylevel] = getRefToDivNest(thisdiv);
    //Make the object visible
    if (olddiv[mylevel].style) {
        //DOM compliant
        olddiv[mylevel].style.visibility = 'visible';
        olddiv[mylevel].style.position = 'absolute';
        var Y = 0;
        if (posY == null)
            Y = getXY(divItem).y - divItem.offsetHeight - 6;
        else
            Y = getXY(divItem).y - divItem.offsetHeight - 6 + posY;
        var X = getXY(divItem).x + divItem.offsetWidth;
        olddiv[mylevel].style.top = Y + "px";
        olddiv[mylevel].style.left = X + "px";
        
    } else {
        if (olddiv[mylevel].visibility) {
            //Netscape and old versions of Mozilla compliant
            olddiv[mylevel].visibility = 'show';
        } else {
            //Nothing found, no known way of changing the style
            olddiv[mylevel] = false;
            notifyFail();
            return;
        }
    }
    
}
function hideDivsToLevel(mylevel) {
    //hide all the divs that are showing this level and higher
    if (olddiv[mylevel]) {
        //try the next level up first
        hideDivsToLevel(mylevel + 1);
        //hide the last hidden object that was shown in the current level
        if (olddiv[mylevel].style) {
            //DOM compliant
            olddiv[mylevel].style.visibility = 'hidden';
        } else {
            //Netscape and old versions of Mozilla compliant
            olddiv[mylevel].visibility = 'hide';
        }
        //No need for else notifyFail()
        //If it was going to fail, it would have failed while it was being shown
    }
    olddiv[mylevel] = false;
}

function hideDivSpecial(specialDiv) { //hide a div, bypassing levels
    specialDiv = getRefToDivNest(specialDiv);
    if (specialDiv.style) {
        //DOM compliant
        specialDiv.style.visibility = 'hidden';
    } else {
        if (specialDiv.visibility) {
            //Netscape and old versions of Mozilla compliant
            specialDiv.visibility = 'hide';
        } else {
            //Nothing found, no known way of changing the style
            notifyFail();
            return;
        }
    }
}

function notifyFail() {
    //oops, I guess nothing works in this browser
    if (window.myalternative) {
        if (window.confirm("You are having problems displaying some components of this page.\n" +
			"\nWould you like to try the other page design?")) { location.href = myalternative; }
    } else {
        window.alert("You are having problems displaying some components of this page.\n\n" +
			"Sorry, but there is not yet an alternative page.");
    }
}


function getXY(obj) {
    var curleft = 0;
    var curtop = obj.offsetHeight + 5;
    var border;
    if (obj.offsetParent) {
        do {
            // XXX: If the element is position: relative we have to add borderWidth
            if (getStyle(obj, 'position') == 'relative') {
                if (border == _pub.getStyle(obj, 'border-top-width')) curtop += parseInt(border);
                if (border == _pub.getStyle(obj, 'border-left-width')) curleft += parseInt(border);
            }
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
        while (obj == obj.offsetParent)
    }
    else if (obj.x) {
        curleft += obj.x;
        curtop += obj.y;
    }
    return { 'x': curleft, 'y': curtop };
}
/**
* Returns the specified computed style on an object.
* @param {HTMLObject} obj HTML Object
* @param {String} styleProp Property name.
* @return {Mixed} Computed style on object.
*/
function getStyle(obj, styleProp) {
    if (obj.currentStyle)
        return obj.currentStyle[styleProp];
    else if (window.getComputedStyle)
        return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleProp);
}