///////////////////////////////////////////////////////////////////////////////
// menubar.js
//
// This file contains convenience functions for generating the common
// menu butotn bar on all pages that need it, from a configured
// set of menu button specifications.
//
// Call generate_menu_buttons() from the HTML page to generate the HTML
// code for the menu buttons into the page.
//
// The configuration of the set of menu buttons to generate can
// be configured in the "Configuration" section below.
//////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////
// Configuration
//////////////////////////////////////////////////////////////////////////////

// The CSS class of the menu button DIVs
var menu_button_class = 'menuButton';

// The CSS class to apply to a menu button DIV when it is in the 'on' state.
var menu_button_on_class = 'menuButtonOn';

// Configure the set of menu buttons to render. Each menu button
// is specified in the list below between the { and } with the properties
// of the button. Properties include:
//
//   label:'xxx' - the text label of the button
//
//   link:'xxx' - the URL to link to when the button is clicked
//
var menu_spec = new Array(
    {
        label:'Home',
        link:'index.html'
    },
    {
        label:'Projects',
        link:'projects.html'
    },
    {
        label:'About',
        link:'about.html'
    },
    {
        label:'News',
        link:'news.html'
    },
    {
        label:'Contact',
        link:'contact.html'
    }
);


//////////////////////////////////////////////////////////////////////////////
// Generator Functions
//////////////////////////////////////////////////////////////////////////////

// Function to generate the HTML for the menu buttons based on the
// configuration above.
//
// Parameters:
//
//   parent_id - the id of the DIV that the HTML for the menu buttons
//               is to be written to.
//
//   selected_index - the zero-based index of the menu button that
//                    is to be rendered as the currently-selected
//                    menu buttons. If 'null' is passed for this
//                    parameter, no menu button is selected.
//
function generate_menu_buttons(parent_id, selected_index) {
    var parent = $(parent_id);
    var i=0;
    for (i=0; i<menu_spec.length; i++) {
        var div_class   = menu_button_class;
        var is_selected = false;
        if (i == selected_index) {
            div_class += " " + menu_button_on_class;
            is_selected = true;
        }
        var div_code =
            "<div id=\"menu_button_" + i + "\" "    +
            "class=\"" + div_class + "\" "          +
            "onclick=\"click_menu_button(this);\" ";

        if (!is_selected) {
            div_code +=
                "onmouseover=\"mouseover_menu_button(this);\" "  +
                "onmouseout=\"mouseout_menu_button(this);\" ";
        }

        div_code +=
            ">"                +
            menu_spec[i].label +
            "</div>";
        parent.innerHTML += div_code;
    }
}

//////////////////////////////////////////////////////////////////////////////
// Mouse Event Callback Functions
//////////////////////////////////////////////////////////////////////////////

// Callback function for the 'onmouseover' callback of a menu button DIV
// when the mouse enters the DIV.
//
// Parameters:
//
//   elem - the DIV element of the menu button that this event is for
//
//function mouseover_menu_button(elem) {
//    Element.addClassName(elem, menu_button_on_class);
//}

// Callback function for the 'onmouseout' callback of a menu button DIV
// when the mouse leaves the DIV.
//
// Parameters:
//
//   elem - the DIV element of the menu button that this event is for
//
//function mouseout_menu_button(elem) {
//    Element.removeClassName(elem, menu_button_on_class);
//}

function click_menu_button(elem) {
    window.location.href = menu_spec[elem.id.substring(12)].link;
}