var Menu = new Class({
    initialize: function(menu){
        this.menuContainer = menu;
        this.menuContainer.addClass('0');
        this.menuObject = this.buildObject(this.menuContainer,1);
    },
     
    buildObject: function(parent,level){ //add levels and events to the links and ul's
        this.levels = level;
        var result = new Array();
        newChildren = parent.getChildren();
        newChildren.each(function(item,index){
            if (item.tagName == 'UL'){
                newLevel = level + 1;
            } else newLevel = level;
            result[index] = new Array();
            result[index][0] = item;
            result[index][1] = this.buildObject(item,newLevel);
            
            switch(item.tagName){
                case 'UL':
                    item.addClass('submenus');
                    item.addClass(level);
                break;
                case 'DIV':
                    item.addClass('submenu_container');
                break;
                case 'LI':
                    item.addClass('submenu');
                break;
                case 'A':   
                    item.addEvent('click', function(){
                        this.show_menu(item,level);
                    }.bind(this));
                    item.addClass('lnk');
                break;
            }
        }.bind(this));
        return result;
    },
    show_menu:function(element,level) { //manage the close_menu and open_menu
        if (element.hasClass('active')){
            return false;
        }
        var activeLinks = $$('a.active');
        activeLinks.erase(element);
        element.addClass('active');
        element.getElement('img').setProperty('src', '../image_database/menu_a/'+element.getAttribute('link'));
        var type = '.submenus';
        var distance = 2;
        var menuPreviouslyOpened = false; //set default to check if there was a menu open in the each below the actual check is performed
        
        this.menuContainer.getElements(type).each(function(item,index){ //check if theres a menu that needs to be closed and if so give it time - which is done by setting a timeout.
            if(item.hasClass('open') ){
                for(var i = 0; i <= this.levels; i++){ //ugly solution to find out what level deep the submenu is.
                    if(item.hasClass(i)){
                        itemLevel = i;
                    }
                }
                if (itemLevel >= level ){
                    Menu.close_menu(item,distance); //close all open menus
                    menuPreviouslyOpened = true; //remember that there was a menu previously open.
                }
            }
        }.bind(this)); 
        
        if (element.getNext()){ //if the menu has a deeper level of li's then that should also be opened. Normally you'd do that with a recursive function. Yet no need for deeper menus here.
            element = element.getNext().getChildren()[0];
            this.currentElement = element;
            
            if (menuPreviouslyOpened){ //set a timeout when there was a menu open
                var timeoutTime = 500;
            } else timeoutTime = 0;
            setTimeout("Menu.open_menu()",timeoutTime);
            if(this.currentElement.getChildren()[0].getChildren()[1]){
                setTimeout(function(){
                    this.currentElement = this.currentElement.getChildren()[0].getChildren()[1].getChildren()[0];
                    this.open_menu();
                }.bind(this),700);
            }
        }
        
        activeLinks.each(function(item,index){ //remove all active classes from links if its on the same level or deeper in the structure of ul/li's
            for(var i = 0; i <= this.levels; i++){
                if(item.getParent().getParent().hasClass(i)){
                    itemLevel = i;
                }
            }
            if (itemLevel >= (level - 1) ){
                if (itemLevel > 0){
                    var timeTimeout = 400;
                } else var timeTimeout = 0;
                setTimeout(function(){
                    item.removeClass('active');
					item.getElement('img').setProperty('src', '../image_database/menu/'+item.getAttribute('link'));
                }.bind(this),timeTimeout);
            }
        }.bind(this));
        
    },


    open_menu:function() {
        this.currentElement.addClass('open');
        this.currentElement.getChildren()[0].getChildren()[0].addClass('active');
		this.currentElement.getChildren()[0].getChildren()[0].getElement('img').setProperty('src', '../image_database/menu_a/'+this.currentElement.getChildren()[0].getChildren()[0].getAttribute('link'));
        var myEffect = new Fx.Morph(this.currentElement, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
        myEffect.start({
            'display': ['none','block'],
            'opacity': 1
        });
    },
    
    close_menu:function (element,distance){
        var myEffect = new Fx.Morph(element, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
        myEffect.start({
            'opacity': 0,
            'display': ['block','none']
        });
        if (element.getStyle('opacity') == 0){
            element.removeClass('open');
        } else {
            setTimeout(function(){
                this.close_menu(element);
            }.bind(this),300);
        }
    }
    
});