var VerticalNavigation = Class.create({
  initialize: function(container, config) {
    this.menus = $$(container);
    if (this.menus === null) {
      return;
    }
    if ( config == undefined) {
      config = new Array();
    }
    if ( config.subMenuClass == undefined) {
      config.subMenuClass = 'vertical-nav';
    }
    this.subMenuClass = config.subMenuClass;
    this.activeClass = 'active';
    this.findSubMenus();
    this.insertNavigation();
  },
  
  findSubMenus: function() {
      this.subMenus = new Array();
    this.menus.each(function(menu, index) {
      var subMenus = menu.select('li.passive div.' + this.subMenuClass);
      if (subMenus.size() == 1) {
        this.subMenus.push(subMenus.first()); 
      } else if (subMenus.size() > 1) {
        subMenus.each(function(subMenu) {
          this.subMenus.push(subMenu);
        }.bind(this));
      }
    }.bind(this));
  },
  
  insertNavigation: function() {
    this.subMenus.invoke('hide');
    this.subMenus.each(
      function(subMenu){
        this.registerObservers(subMenu);
      }.bind(this)
    );
  },

  registerObservers: function(subMenu) {
    Event.observe(subMenu.up('li'), 'mouseenter', this.showSubCategories.bindAsEventListener(this));
  },

  showSubCategories: function(event) {
    event.stop();
    var parentMenu = Event.findElement(event, 'li');
      var childMenu = parentMenu.down('div.vertical-nav');
      
      if (childMenu !== undefined && !childMenu.visible()) {
        parentMenu.addClassName('container');
        new Effect.SlideDown(childMenu, {
            beforeStart: function(effect) {
                Event.stopObserving(effect.element.up('li'), 'mouseenter');  
              },
        afterFinish: function(effect) {
            Event.observe(effect.element.up('li'), 'mouseleave', this.hideSubCategories.bindAsEventListener(this));
          }.bind(this),        
          queue: {position: 'end', scope: 'navigation'}
          }
        );        
      }
  },

  hideSubCategories: function(event) {
    event.stop();
    var parentMenu = Event.element(event);
        var childMenu = parentMenu.down('div.vertical-nav');
    if (parentMenu.hasClassName('container') && childMenu.visible()) {
      new Effect.SlideUp(childMenu, {
        beforeStart: function(effect) {
          Event.stopObserving(effect.element.up('li'), 'mouseleave');
        },
        afterFinish: function(effect) {
          Event.observe(effect.element.up('li'), 'mouseenter', this.showSubCategories.bindAsEventListener(this));
        }.bind(this),      
        queue: {position: 'end', scope: 'navigation'}});
      parentMenu.removeClassName('container');
    } 
  },

  findSubCategory: function(elements) {
    var item = elements.detect(function(item) {
      if (item.hasClassName('verticalNav')) {
        return true;
      }
      return false;
    });
    return item;
  }
});

document.observe('dom:loaded', function() {
  new VerticalNavigation('.round');
});

var FancyFaq = Class.create({
  initialize: function(container, faqClass, contentClass, captionTag) {
    this.container = $(container);
    
    if (this.container === null) {
      return;
    }
    this.faqClass = faqClass;
    this.contentClass = contentClass;
    
    this.container.select('.' + contentClass).invoke('hide');
    
    this.container.select('.' + faqClass + ' ' + captionTag).each(function(caption){
      Event.observe(caption, 'click', this.contentToggle.bindAsEventListener(this));
    }.bind(this)
    );
    
  },
  
  contentToggle: function(event) {
    var caption = Event.element(event);
    var content = caption.up('.' + this.faqClass).select('.' + this.contentClass).first();
    if(content.visible()) {    
      new Effect.SlideUp(content, {duration:0.5, queue: {position: 'end', scope: 'faq', limit: 1}});
    } else {
      new Effect.SlideDown(content, {duration:0.5, queue: {position: 'end', scope: 'faq', limit: 1}});
    }
  }
  
});

document.observe('dom:loaded', function() {
  new FancyFaq('faqs', 'faq', 'answer','h3');
});