/*
 Submenu class
 Autor: guille
 Prepared For SEO optimization, doesn't generates dynamicly the menus, it grabs the hidden
 menu in HTML, from the submenu arrays
 It only needs the class name of the items and the submenus
*/
var SubMenu= new Class({
    options:{
            menu_holder:null,
            class_name:null,
            submenu_class:null,
            offset:25
    },
    initialize: function(options){
           this.menu_holder=options.menu_holder;
           this.class_name=options.class_name;
           this.offset=options.offset;
           this.menu_items=$$('.'+this.class_name,this.menu_holder);
           this.submenu_class=options.submenu_class;
           this.submenus=$$('.'+this.submenu_class);
           var all_elements=$ES('a',this.menu_holder);
           all_elements.each(function(item){
                item.addEvent('mouseover',this.ocultar_menus.bind(this));
           }.bind(this));
           this.menu_items.each(function(item,index){
                item.addEvent('mouseover',function(){this.mostrar_submenu(this.submenus[index])}.bind(this));
                this.submenus[index].setStyle('left',item.getPosition().x+1).setStyle('top',(item.getPosition().y+this.offset));
           }.bind(this)); //attach the event
           window.addEvent('resize',this.acomodar_menus.bind(this));
           //window.addEvent('resize',function(){ console.log('hola')});
    },
    mostrar_submenu:function(submenu){
        $(submenu).setStyle('opacity',0).setStyle('display','block').setStyle('visibility','visible').effect('opacity',{duration:500,transition: Fx.Transitions.linear}).start(1);
        //console.log(submenu);
    },
    ocultar_menus: function(){
        this.submenus.each(function(sub){
           $(sub).setStyle('opacity',0);//.effect('opacity',{duration:500,transition: Fx.Transitions.linear}).start(0);
        });
    },
    acomodar_menus:function(){
         this.menu_items.each(function(item,index){
                this.submenus[index].setStyle('left',item.getPosition().x+1).setStyle('top',(item.getPosition().y+this.offset));
           }.bind(this)); //attach the event
    }
    
});
SubMenu.implement(new Options());