var categoryMenu = new Class( {
  options : {
		interval : 300,
		out : 0.8,
		over : 1,
		menuwidth : 150
	},
	
	initialize : function(options) {
	   this.setOptions(options);
  	 this.menu = $$("div#gi_cat div#gi_cat_menu div.menu");
  	 this.menu.each(function(menu,i){ menu.submenu = menu.getElementById('sub'+menu.id)});
  	 this.menu.each(function(menu, i){
  	                    menu.setStyle("opacity", this.options.out);
  	                    menu.fx = new Fx.Style(menu, 'opacity', {duration: this.options.interval})
                        menu.categoryMenu = this;
                        menu.addEvent("mouseenter", function(){this.categoryMenu.enter(this)}, menu);
                        menu.addEvent("mouseleave", function(){this.categoryMenu.leave(this)}, menu); 
                    },this);
  	 this.submenus = $$("div#gi_cat div#gi_cat_menu div.submenus");
  	 this.setup();
	},
	
	setup : function(){
    $E("div#gi_cat div#gi_cat_menu").setStyle("width", this.options.menuwidth);
  	 $$("div#gi_cat div#gi_cat_menu div.menuborder").each(function(border, i) {
  	    border.setStyle("opacity", this.options.out);
  	 }, this);
  	 $$("div#gi_cat div#gi_cat_menu div.menu").each(function(border, i) {
  	     border.setStyle("width", this.options.menuwidth);
  	 },this);
  	 $$("div#gi_cat div#gi_cat_menu div.menutopbottom").each(function(border, i) {
  	     border.setStyle("width", this.options.menuwidth-7);
  	 },this);
  	 $$("div#gi_cat div#gi_cat_menu div.menucenter").each(function(submenu, i) {
  	    submenu.setStyle("width", this.options.menuwidth-40);
  	 },this);
  	 this.submenus.each(function(submenu, i) {
  	    submenu.fx = new Fx.Style(submenu, 'opacity', {duration: this.options.interval})
  	    submenu.setStyles({
  	        width: this.options.menuwidth,
  	        left: this.options.menuwidth,
  	        opacity: 0
  	    });
  	 },this);
  },
  
  enter : function(menu){
    menu.fx.stop();
    if(menu.submenu){
      menu.submenu.fx.stop();
      menu.submenu.setStyle("display", "block");
      menu.submenu.fx.start(1);
    }
    menu.fx.start(this.options.over);
  },
  
  leave : function(menu){
    menu.fx.stop();
    if(menu.submenu){
      menu.submenu.fx.stop();
      menu.submenu.fx.start(0).chain(function(){if(menu.submenu.getStyle('opacity') == 0) menu.submenu.setStyle("display", "none")}.bind(this));
    }
    menu.fx.start(this.options.out);
  }
  
});

categoryMenu.implement(new Events, new Options);

