// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
var DropDownMenu = Class.create();
DropDownMenu.prototype = {

    initialize: function(menu, parentElement) {
        this.menu = $(menu);
        this.parentElement = $(parentElement);
        this.addEvents();
        
        // Some sites you may want to reposition menu on all mouseovers so the menu will change
        // with text change so make reposition = true
        this.reposition = false;
        this.hasPositioned = false;
    },
    
    addEvents: function() {
        [this.menu, this.parentElement].each(function(element) {
            element.observe('mouseover', function(event) { this.show(); }.bind(this));
            element.observe('mouseout',  function(event) { this.hide(); }.bind(this));
        }.bind(this));
        Event.observe(window, 'resize', function(event) { this.position(); }.bind(this) );
    },
    
    doPosition: function() {
        if(this.reposition) { 
            return true;
        }else if(!this.hasPositioned){
            this.hasPositioned = true;
            return true;
        }else{
            return false;
        }        
    },
    
    position: function() {
        var height = this.parentElement.getHeight();
        var offset = this.parentElement.cumulativeOffset();
        var left = offset[0];
        var top = offset[1]; 
        this.menu.setStyle({          
          'left':left + "px",
          'top':(top+height) + "px"
        });    
    },
       
    show: function() {          
        this.menu.setStyle({'visibility':'visible'});                
    },
    
    hide: function() {
        this.menu.setStyle({'visibility':'hidden'});      
    }   

};