var categoryMenu = new Class( {
  options : {
		interval : 300,
		out : 0.8,
		over : 1,
		fps : 25
	},
	
  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, fps: this.options.fps})
                        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(){
  	 $$("div#gi_cat div#gi_cat_menu div.menuborder").each(function(border, i) {
  	    border.setStyle("opacity", this.options.out);
  	 }, this);
  	 this.submenus.each(function(submenu, i) {
  	    submenu.fx = new Fx.Style(submenu, 'opacity', {duration: this.options.interval, fps: this.options.fps})
  	    submenu.setStyles({
  	        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);