function getOffsetLeft(element) {
    var left = element.offsetLeft;
    while (element.offsetParent) {
        left += element.offsetParent.offsetLeft;
        element = element.offsetParent;
    }
    return left;
}

function getOffsetTop(element) {
    var top = element.offsetTop;
    while (element.offsetParent) {
        top += element.offsetParent.offsetTop;
        element = element.offsetParent;
    }
    return top;
}

function showMenu(id) {
    var menu = document.getElementById(id);

    var parent = menu.parentNode.parentNode;
    if (parent.id != "navmenu") showMenu(parent.id);

    menu.style.visibility = 'visible';
}

function hideMenu(id) {
    var menu = document.getElementById(id);

    var parent = menu.parentNode.parentNode;
    if (parent.id != "navmenu") hideMenu(parent.id);

    menu.style.visibility = 'hidden';
}

function Menu(id, cls, left, top, width) {
    this.id = id;
    this.cls = cls;
    this.left = left;
    this.top = top;
    this.width = width;
    this.items = new Array(0);
}

Menu.prototype.addItem = function(id, cls, label, desc, link, target, width) {
    var item = new Item(id, cls, label, desc, link, target, width);
    item.menu = this;
    this.items[this.items.length] = item;
    return item;
}

Menu.prototype.findItem = function(id) {
    for (var i = 0; i < this.items.length; i++) {
        var item = this.items[i];
        if (item.id == id) return item;
    }
    return null;
}

Menu.prototype.writeln = function() {
    document.write("<div id='" + this.id + "' class='" + this.cls + "'");
    if (isNaN(this.width))
        document.write(" style='left: " + this.left + "px; top: " + this.top + "px'");
    else
        document.write(" style='left: " + this.left + "px; top: " + this.top + "px; width: " + this.width + "px'");
    if (this.cls != "navmenu") {
        document.write(" onmouseover=\"showMenu('" + this.id + "')\"");
        document.write(" onmouseout=\"hideMenu('" + this.id + "')\"");
    }
    document.write(">"); 

    for (var i = 0; i < this.items.length; i++) {
        if (isNaN(this.items[i].width))
            this.items[i].writeln(this.width);
        else
            this.items[i].writeln(this.items[i].width);
    }
    document.writeln("</div>");
}

function Item(id, cls, label, desc, link, target, width) {
    this.id = id;
    this.cls = cls;
    this.label = label;
    this.desc = desc;
    this.link = (link)? link : "#";
    if (target) this.target = target;
    if (width) this.width = width;
}

Item.prototype.setSubMenu = function(subMenu) {
    this.subMenu = subMenu;

    subMenu.parent = this;
}

Item.prototype.writeln = function(width) {
    document.write("<div id='" + this.id + "' class='" + this.cls + "' nowarp='nowarp'>");
    document.write("<a alt='" + this.desc + "' href='" + this.link + "'");
    if (!isNaN(width)) document.write(" style='width: " + (width - 10) + "px'");
    if (this.subMenu) {
        document.write(" onmouseover=\"showMenu('" + this.subMenu.id + "')\"");
        document.write(" onmouseout=\"hideMenu('" + this.subMenu.id + "')\"");
    }
    if (this.target) document.write(" target='blank'");
    if (this.link == "#") document.write(" onclick='return false'");
    document.write(" nowarp='nowarp'>");
    document.write(this.label);
    if (this.subMenu) document.write(" <span class=\"next_icon\">&gt;</span>");
    document.write("</a>");
    if (this.subMenu) this.subMenu.writeln();
    document.writeln("</div>");
}

function createMenu(prefix) {
    var width = 113, height = 20, submenu_height = 30;

    if (prefix == null) prefix = "";

    navmenu = new Menu("navmenu", "navmenu", 0, 0);
    navmenu.addItem("home", "navitem", "HOME", "The Homepage of the NanoGong Project", prefix + "index.html");
    navmenu.addItem("info", "navitem", "Information", "Information");
    navmenu.addItem("moodle", "navitem", "Nano in Moodle", "Nano in Moodle");
    navmenu.addItem("try", "navitem", "Try It!", "Try It!");
    navmenu.addItem("downloads", "navitem", "Downloads", "Downloads");
    navmenu.addItem("doc", "navitem", "Documentation", "Related Documentations");
    navmenu.addItem("aboutus", "navitem", "About Us", "About Us", prefix + "aboutus.html", null, 125);

    info = new Menu("info_menu", "navsubmenu", width, height, 200);
    info.addItem("applet", "navsubitem", "The NanoGong Applet", "The NanoGong Applet", prefix + "info_applet.html");
    info.addItem("features", "navsubitem", "Feature List", "Feature List", prefix + "info_features.html");
    info.addItem("config", "navsubitem", "Configure NanoGong", "Configure NanoGong", prefix + "info_config.html");
    info.addItem("script", "navsubitem", "Control NanoGong Using Script", "Control NanoGong Using Script", prefix + "info_script.html");
    info.addItem("infophp", "navsubitem", "Using NanoGong with PHP", "Using NanoGong with PHP", prefix + "info_php.html");
    info.addItem("result", "navsubitem", "Results of NanoGong 4.1 Testing", "Results of NanoGong 4.1 Testing", prefix + "nanogong41_test.html");
    navmenu.findItem("info").setSubMenu(info);

    moodle = new Menu("moodle_menu", "navsubmenu", (width + 1) * 2 - 1, height, 160);
    moodle.addItem("moodleinfo", "navsubitem", "Overview", "Overview", prefix + "moodle.html");
    moodle.addItem("moodleinst", "navsubitem", "Installation Instructions", "Installation Instructions", prefix + "moodle_inst.html");
    moodle.addItem("moodleinst", "navsubitem", "User Guide", "User Guide", prefix + "moodle_guide.html");
    navmenu.findItem("moodle").setSubMenu(moodle);
    
    tryit = new Menu("try_menu", "navsubmenu", (width + 1) * 3 - 1, height, 160);
    tryit.addItem("trynano", "navsubitem", "Try NanoGong", "Try NanoGong", prefix + "try.php");
    tryit.addItem("trymoodle", "navsubitem", "Try NanoGong in Moodle 1", "Try NanoGong in Moodle 1", "../moodle/", "_blank");
    tryit.addItem("javatest", "navsubitem", "Java Test for NanoGong", "Java Test for NanoGong", prefix + "try_javatest.html");
    tryit.addItem("tryreq", "navsubitem", "Requirements", "Requirements", prefix + "try_req.html");
    navmenu.findItem("try").setSubMenu(tryit);

    downloads = new Menu("downloads_menu", "navsubmenu", (width + 1) * 4 - 1, height, 170);
    downloads.addItem("downloadsform", "navsubitem", "Download Form", "Download Form", prefix + "downloads_form.html");
    downloads.addItem("policy", "navsubitem", "Software Policy &amp; License", "Software Policy and License", prefix + "downloads_policy.html");
    navmenu.findItem("downloads").setSubMenu(downloads);

    doc = new Menu("doc_menu", "navsubmenu", (width + 1) * 5 - 1, height, 220);
    doc.addItem("faq", "navsubitem", "Frequently Asked Questions (FAQ)", "Frequently Asked Questions (FAQ)", prefix + "doc_faq.html");
    doc.addItem("download_stat", "navsubitem", "Statistics", "Statistics", prefix + "info_stat.html");
    navmenu.findItem("doc").setSubMenu(doc);

    navmenu.writeln();
    document.writeln("<div class='spacer' style='height: " + height + "px'>&nbsp;</div>");
}