/*
* Class: MenuHandler
* Author: peter@tailsweep.com 2008
*
* Creates and handles a bunch of MenuSection objects
*
* Constructor : new MenuHandler({[elementId]:[visible]})
*
* Example: var menu = new MenuHandler({m1:true, m2:false, m3:true})
*
*/
var MenuHandler = Class.create({
  initialize: function(sectionsHash){
    var temp = new Hash(sectionsHash);
    this.sections = new Hash();
    if(temp.size()>0){
      var i = 1;
      temp.each(function(section){
        this.sections.set(i,new MenuSection(section[0],section[1]));
        i++;
      }.bind(this));
    }
  }
});

/*
* Class: MenuSection
* Author: peter@tailsweep.com 2008
*
* Valid DOM structure:
*
* wrapper = i.e. <div>,<span> etc...
*
* <div id="[wrapperId]_toggler">Menu Section</div>     <- this will be the visible element when collapsed
* <[wrapper] id=[wrapperId]>
*    <ul>
*      <li>Menu item 1</li>
*      <li>Menu item 2</li>
*      <li>Menu item 2</li>
*    </ul>
*
*/
var MenuSection = Class.create({
  initialize: function(wrapperId, isVisible){
    // Make sure we have scriptaculous effects.js
    if(typeof Effect=='undefined'){
      alert('Scriptaculous effects.js is not loaded');
    }
    this.wrapper = $(wrapperId);
    this.isVisible = (isVisible == false) ? false : true;
    this.duration = 0.4;
    if(this.wrapper){
      this.toggler = document.getElementById(wrapperId + '_toggler');
      this.toggler.setAttribute('class','menuToggler menuExpanded');
      if(!this.isVisible){
        this.isVisible = true; // will be toggled back to invisible
        this.toggleVisibility(1);
      }
      Event.observe(this.toggler, "click", this.toggleVisibility.bind(this), false);
      Event.observe(this.toggler, "mouseover", this.toggleHover.bind(this), false);
      Event.observe(this.toggler, "mouseout", this.toggleHover.bind(this), false);
    }
  },

  toggleVisibility: function(noFx){
    if(this.isVisible){
	  if(noFx==1){
	    this.wrapper.style.display = 'none';
	  }else{
	    Effect.SlideUp(this.wrapper, {duration: this.duration});
	  }
	      
      Element.removeClassName(this.toggler,'menuExpanded');
      Element.addClassName(this.toggler,'menuCollapsed');
    }
    else{
  	  if(noFx==1){
	    this.wrapper.style.display = 'block';
	  }else{
        Effect.SlideDown(this.wrapper, {duration: this.duration});	  
	  }

      Element.removeClassName(this.toggler,'menuCollapsed');
      Element.addClassName(this.toggler,'menuExpanded');
    }
    this.isVisible = !this.isVisible;
  },

  expand: function(){
    this.expander.parentNode.style.display = 'none'
    Effect.SlideDown(this.wrapper, { duration: this.duration });
  },

  collapse: function(){  
    Effect.SlideUp(this.wrapper, { duration: this.duration });
    this.expander.parentNode.style.display = 'block';
  },

  toggleHover: function(){    
    if(Element.hasClassName(this.toggler,'menuTogglerHover')){
      Element.removeClassName(this.toggler,'menuTogglerHover');
    }
    else{
      Element.addClassName(this.toggler,'menuTogglerHover');
    }
  }
});