﻿
var Menu = {

    InitMenu: function () {

        $("panelone").show();
        $('one').addClassName('selected');
        $("paneltwo").hide();
        $("panelthree").hide();
        $("panelfour").hide();
        $("panelfive").hide();

        $("one").observe("click", this.PanelOneClicked.bindAsEventListener(this));
        /*$$("panelone").invoke("observe", "click", this.PanelOneClicked);*/
        $("two").observe("click", this.PanelTwoClicked.bindAsEventListener(this));
        $("three").observe("click", this.PanelThreeClicked.bindAsEventListener(this));
        $("four").observe("click", this.PanelFourClicked.bindAsEventListener(this));
        $("five").observe("click", this.PanelFiveClicked.bindAsEventListener(this));
    },

    PanelOneClicked: function (evt) {
        $("panelone").show();
        $('one').addClassName('selected');
        $("paneltwo").hide();
        $('two').removeClassName('selected');
        $("panelthree").hide();
        $('three').removeClassName('selected');
        $("panelfour").hide();
        $('four').removeClassName('selected');
        $("panelfive").hide();
        $('five').removeClassName('selected');

    },
    PanelTwoClicked: function (evt) {
        $("panelone").hide();
        $('one').removeClassName('selected');
        $("paneltwo").show();
        $('two').addClassName('selected');
        $("panelthree").hide();
        $('three').removeClassName('selected');
        $("panelfour").hide();
        $('four').removeClassName('selected');
        $("panelfive").hide();
        $('five').removeClassName('selected');

    },
    PanelThreeClicked: function (evt) {
        $("panelone").hide();
        $('one').removeClassName('selected');
        $("paneltwo").hide();
        $('two').removeClassName('selected');
        $("panelthree").show();
        $('three').addClassName('selected');
        $("panelfour").hide();
        $('four').removeClassName('selected');
        $("panelfive").hide();
        $('five').removeClassName('selected');
    },
    PanelFourClicked: function (evt) {
        $("panelone").hide();
        $('one').removeClassName('selected');
        $("paneltwo").hide();
        $('two').removeClassName('selected');
        $("panelthree").hide();
        $('three').removeClassName('selected');
        $("panelfour").show();
        $('four').addClassName('selected');
        $("panelfive").hide();
        $('five').removeClassName('selected');
    },
    PanelFiveClicked: function (evt) {
        $("panelone").hide();
        $('one').removeClassName('selected');
        $("paneltwo").hide();
        $('two').removeClassName('selected');
        $("panelthree").hide();
        $('three').removeClassName('selected');
        $("panelfour").hide();
        $('four').removeClassName('selected');
        $("panelfive").show();
        $('five').addClassName('selected');
    }

}
Event.observe(window, "load", Menu.InitMenu.bindAsEventListener(Menu));
