var SlideMenu = new Class({
    Implements: Options,
    options: {
        button: null,
        mode: "vertical",
        noevents: false,
        duration: 300
    },
    initialize: function (menuContent, options) {
        this.setOptions(options);
        this.props = 0;
        this.hiding = true;
        this.hideTimer = null;

        //Move the menu of the screen, show the menu, create the Menu, collapse the menu, replace the menu.
        this.menu = $(menuContent);
        if (!this.options.noevents) {            
            this.menu.addEvent('mouseover', function(){this.show();}.bind(this));
            this.menu.addEvent('mouseout', function(){this.unprop();}.bind(this));
            if (this.options.button) {
                this.button = $(this.options.button);
                this.button.addEvent('mouseover', function(){
					this.show();
					this.button.set('class', 'menubutton_hilite');
					}.bind(this));
                this.button.addEvent('mouseout', function(){
					this.unprop();
					
					}.bind(this));
            }
        }
        this.menu.style.visibility = "hidden";
		
        this.menu.style.display = "block";
        this.menu.style.left = (this.menu.offsetLeft - 500) + "px";
        this.menu.style.visibility = "visible";
        this.slider = new Fx.Slide(this.menu, {duration: this.options.duration, mode: this.options.mode}).hide();
        this.menu.style.left = (this.menu.offsetLeft + 500) + "px";

        this.instanceID = SlideMenu.instances.length;
        SlideMenu.instances[this.instanceID] = this;
    },

    show: function(force) {
        if (force) {this.props = 0; this.hiding = true;}
        if (this.props == 0) {
            this.prop();
            if (this.hiding) {
                this.slider.cancel();
                this.slider.slideIn();
                this.hiding = false;
            }
        }
    },

    hide: function() {
        if (this.props == 0) {
            this.slider.cancel();
            this.slider.slideOut();
            this.hiding = true;
			this.button.set('class', 'menubutton');
        }
    },

    prop: function() {
        this.props++;
    },

    unprop: function() {
        if (this.props <= 0)
            this.props = 0;
        else
            this.props--;

        clearTimeout(this.hideTimer);
        this.hideTimer = setTimeout("SlideMenu.instances['"+this.instanceID+"'].hide();", 200);
    }
});
SlideMenu.instances = new Array(); //Static member containing references to all isntances of SlideMenu objects.

//Auto-create several menus at once from the menuElements array, and options passed in.
//options can also include a "buttons" array, in which case the corresponding index of that array will be used for 'options.button'
//Returns an array of menus created.
SlideMenu.createMenus = function(menuElements, options) {
    var menus = [];
    for(var i=0; i < menuElements.length; i++) {
        opt = $extend({}, options); //clone options
        if (options.buttons) {
            delete opt.buttons;
            opt.button = options.buttons[i];
        }
        menus.push(new SlideMenu(menuElements[i], opt));
    }
    return menus;
};