

var SmoothMenu = new Class({

    animationDelay : 150,
    menuContainer : null,
    topMenuContainer : null,
    subMenuContainer : null,
    activeMenu : null,
    activeSubmenu : null,
    currentActiveMenu : null,
    isIE6 : (Browser.Engine.trident && Browser.Engine.version == 4), 
    isIE7 : (Browser.Engine.trident && Browser.Engine.version == 5), 
    delayHandle : null,

    initialize : function(container){

        if ($type(container) != 'element'){
            this.menuContainer = $(container);    
            this.menuContainer.set('class','smoothmenu');
        }

        this.topMenuContainer = this.menuContainer.getElementById('topMenuContainer');
        this.subMenuContainer = this.menuContainer.getElementById('subMenuContainer');
        

        this.removeTextNodes(this.menuContainer);
        
        var subMouseOver = this.subMenuMouseOver.bind(this);
        var subMouseOut  = this.subMenuMouseOut.bind(this);
        var childNodes   = $$(this.topMenuContainer.childNodes);
        var currentMenu  = null; 
                    

        for (var i = 0; i < childNodes.length; i++){
            var node = childNodes[i];

            if (node.nodeName == "A"){ 
                currentMenu = node;

                node.addEvent('mouseover', this.topMenuMouseOver.bind(this)); 
                node.addEvent('mouseout' , this.topMenuMouseOut.bind(this));
               
                if (node.get('class')) {
                    this.activeMenu = node;
                    this.currentActiveMenu = node;
                    node.set('class','smoothmenuTopMenuItemMouseOver');
                } else {
                    node.set('class','smoothmenuTopMenuItem');
                }
            }
                    
            if (node.nodeName == "DIV"){ 
 
                var anchors = node.getElements('a');                  
                node.parentMenu = currentMenu;

                for (var j = 0; j < anchors.length; j++){
                    var anchor = anchors[j]
                     
                    anchor.addEvent('mouseover', subMouseOver);
                    anchor.addEvent('mouseout', subMouseOut);
                    anchor.parentMenu = currentMenu;

                    if (anchor.get('class')){
                        this.activeSubmenu = anchor;
                        anchor.set('class','smoothmenuSubMenuItemMouseOver');
                    } else {
                        anchor.set('class','smoothmenuSubMenuItem');
                    }
                }
                this.subMenuContainer.appendChild(node);
            }
        }
        
        if (this.activeMenu){
            this.highlight(this.activeMenu);
            this.showSubMenu(this.activeMenu);
        }
        
        if (this.activeSubmenu){
            this.highlight(this.activeSubmenu);
        }
    },
    
    removeTextNodes : function(node){
        if (node.nodeType == 3 && node.parentNode.nodeName != 'A'){
            node.parentNode.removeChild(node);
            return;
        }
        
        for (var i = node.childNodes.length - 1; i >= 0; i--)
             this.removeTextNodes(node.childNodes[i]);
    },

    topMenuMouseOver : function(event) {
        $clear(this.delayHandle);

        if (this.currentActiveMenu && this.currentActiveMenu != event.target)
            this.removeHighlight(this.currentActiveMenu)
        else
            this.currentActiveMenu = event.target;
        
        this.currentActiveMenu = event.target;
        this.highlight(event.target);
        this.showSubMenu(event.target);
    },
    
    topMenuMouseOut : function(event) {
        this.delayHandle = this.showActiveMenu.delay(50,this);
    },
    
    subMenuMouseOver : function(event) {
        $clear(this.delayHandle);
        if (event.target != this.activeSubmenu){
           this.highlight(event.target);
        }
    },
    
    subMenuMouseOut : function(event) {
        this.delayHandle = this.showActiveMenu.delay(50,this);
        if (event.target != this.activeSubmenu)
            this.removeHighlight(event.target);
    },
    
    showSubMenu : function(sender){
        var divs = this.subMenuContainer.getElements('div');
        this.subMenuContainer.setStyle('height','0px');
        
        for (var i = 0; i < divs.length; i++){
            var container = divs[i];
             
            if (container.parentMenu == sender){
                var anchors = container.getElement('A');

                if (anchors && anchors.length != 0){ 
                    container.setStyle('display','block');
                    this.subMenuContainer.setStyle('height', container.offsetHeight + 'px');
                    this.repositionSubMenu(sender,container);
                    with (container.get('tween')){
                        options.duration = this.animationDelay;
                        start('top', container.getStyle('top'), '0px');
                    }
                }
            } else {
                container.setStyle('display','none');
            }
        }

    },

    showActiveMenu : function(){
        if (this.currentActiveMenu){
            this.removeHighlight(this.currentActiveMenu);            
        }
        
        if (!this.activeSubmenu){
            this.showSubMenu(null);
        }

        if (this.activeMenu) {
            this.highlight(this.activeMenu);
           
            if (this.activeMenu != this.currentActiveMenu)
                this.showSubMenu(this.activeMenu);
                
            this.currentActiveMenu = this.activeMenu;
        }
    },

    highlight : function(element){
        fx = element.get('morph');
        fx.options.duration = this.animationDelay;
        fx.cancel;

        if (this.topMenuContainer.hasChild(element)){
            element.morph('.smoothmenuTopMenuItemMouseOver');
        } else {
            element.morph('.smoothmenuSubMenuItemMouseOver');
        }
    },
    
    removeHighlight : function(element){
        fx = element.get('morph');
        fx.options.duration = this.animationDelay;
        fx.cancel;

        if (this.topMenuContainer.hasChild(element)){
            element.morph('.smoothmenuTopMenuItem');
        } else {
            element.morph('.smoothmenuSubMenuItem');
        }
    },

    
    repositionSubMenu : function (parentMenu, subMenuContainer) {
        var left = 0;
        
        if (parentMenu && subMenuContainer) {
            var center = Math.floor(parentMenu.offsetLeft - this.topMenuContainer.offsetLeft + (parentMenu.offsetWidth / 2));        
            var animeCntCenter = Math.floor(subMenuContainer.offsetWidth / 2);
            left = center - animeCntCenter;
            if (left < 0) 
                left = 0;
                
            if (left + subMenuContainer.offsetWidth > this.subMenuContainer.offsetWidth) 
                left = left + this.subMenuContainer.offsetWidth - (left + subMenuContainer.offsetWidth);
        } 
        else return;

        subMenuContainer.setStyle('top', -subMenuContainer.offsetHeight + 'px');
        subMenuContainer.setStyle('left',left + 'px');
    },
    
    toString : function(){
        return "[object Smoothmenu]";    
    }
});


