 /*
    Initialize and render the MenuBar when its elements are ready 
    to be scripted.
*/

YAHOO.util.Event.onContentReady("nav-main", function () {
    /*
        Instantiate a MenuBar:  The first argument passed to the 
        constructor is the id of the element in the page 
        representing the MenuBar; the second is an object literal 
        of configuration properties.
    */
    var oMenuBar = new YAHOO.widget.MenuBar("nav-main", { 
                                                autosubmenudisplay: true, 
                                                hidedelay: 750, 
                                                lazyload: true });

    /*
        Call the "render" method with no arguments since the 
        markup for this MenuBar instance is already exists in 
        the page.
    */
    oMenuBar.render();
});


if (typeof JP == "undefined" || !JP) { var JP = {};}

/******************
* This code setups up automated expandable 
* content
*******************/
JP.expandable = {};

JP.expandable.config = {
    css_class: 'jp-expander',
    action_tag: 'a',
    speed: 1.5,
    opacity: true,
    hide_innerHTML: ''  
};


JP.expandable.Expander = function (expand_action_object, config) {
    if ( this instanceof JP.expandable.Expander ) {
        if (expand_action_object) {
            this.init(expand_action_object, config); 
        }
    } else {
        return new JP.expandable.Expander(expand_action_object, config);
    }
};

JP.expandable.Expander.prototype.init = function(expand_action_object, config) {
    this.action_node = YAHOO.lang.isString(expand_action_object) ? YAHOO.util.Dom.get(expand_action_object) : expand_action_object;
    this.expand_node = YAHOO.util.Dom.get(this.action_node.id+'-expander');
    var region = YAHOO.util.Dom.getRegion(this.expand_node);
    this.expand_height = region.bottom - region.top;
    this.set_initial_style();

    if (!config) {
        config = {};   
    }
    var default_config = {
        speed: 1.5,
        opacity: true,
        hide_innerHTML: false
    };
    config = YAHOO.lang.merge(default_config, JP.expandable.config, config); 
    this.expand_innerHTML = this.action_node.innerHTML;
    if (config.hide_innerHTML !== false) {
        this.hide_innerHTML = config.hide_innerHTML;
    } else {
        // config.hide_innerHTML is false then we don't
        // want to change the innerHTML of the hide.
        this.hide_innerHTML = this.expand_innerHTML;    
    }
    
    if (config.opacity) {
        this.expand_attributes = {
              height: {to: this.expand_height, unit: 'px'},
              opacity: { to: 1 }
        };
        this.hide_attributes = {
              height: {to: 0},
              opacity: { to: 0 }
        };
    } else {
        this.expand_attributes = { height: {to: this.expand_height, unit: 'px'} };
        this.hide_attributes = { height: {to: 0} };           
    }

    this.onExpandStart = new YAHOO.util.CustomEvent("onExpandStart");
    this.onExpandComplete = new YAHOO.util.CustomEvent("onExpandComplete");  
    this.onContractStart = new YAHOO.util.CustomEvent("onContractStart");
    this.onContractComplete = new YAHOO.util.CustomEvent("onContractComplete");  

    var self = this;
    this.anim_expand = new YAHOO.util.Anim(this.expand_node, this.expand_attributes, 1.5);
    this.anim_expand.onComplete.subscribe(this.expand_complete, self, true);   
    
    this.anim_hide = new YAHOO.util.Anim(this.expand_node, this.hide_attributes, 1.5);
    this.anim_hide.onComplete.subscribe(this.hide_complete, self, true);    

    YAHOO.util.Event.addListener(self.action_node, 'click', self.expand, self);

    YAHOO.util.Dom.setStyle(this.action_node, 'visibility', 'visible');
};   

JP.expandable.Expander.prototype.set_initial_style = function() {  
    YAHOO.util.Dom.setStyle(this.expand_node, 'opacity', 0);
    YAHOO.util.Dom.setStyle(this.expand_node, 'height', 0);
    YAHOO.util.Dom.setStyle(this.expand_node, 'width', 'auto');
    YAHOO.util.Dom.setStyle(this.expand_node, 'display', 'none');
    YAHOO.util.Dom.setStyle(this.expand_node, 'visibility', 'visible');
    YAHOO.util.Dom.setStyle(this.expand_node, 'position', 'relative');
};

JP.expandable.Expander.prototype.expand = function(e, self) {
    YAHOO.util.Event.preventDefault(e);
    self.onExpandStart.fire(self);
     
    YAHOO.util.Dom.setStyle(self.expand_node, 'display', 'block');
    self.anim_expand.animate();
    YAHOO.util.Event.removeListener(self.action_node, 'click');
    self.action_node.innerHTML = self.hide_innerHTML;
    YAHOO.util.Event.addListener(self.action_node, 'click', self.hide, self);
};

JP.expandable.Expander.prototype.expand_complete = function() {
    this.onExpandComplete.fire(this);
};
  
JP.expandable.Expander.prototype.hide = function(e, self) {
    YAHOO.util.Event.preventDefault(e);
    self.onContractStart.fire(self);
 
    self.anim_hide.animate();
    YAHOO.util.Event.removeListener(self.action_node, 'click');
    self.action_node.innerHTML = self.expand_innerHTML;
    YAHOO.util.Event.addListener(self.action_node, 'click', self.expand, self);        
};

JP.expandable.Expander.prototype.hide_complete = function() {
    this.onContractComplete.fire(this);
};

JP.expandable.auto = function(config) {
    if (!config) {
        config = {};   
    }
    var default_config = {
        css_class: 'jp-expander',
        action_tag: 'a'
    };
    config = YAHOO.lang.merge(default_config, JP.expandable.config, config); 
    var expandable_nodes = [];
    
    var expand_action_items = YAHOO.util.Dom.getElementsByClassName(config.css_class, config.action_tag);
    for(var i=0, item; item=expand_action_items[i]; i++) {
        expandable_nodes[i] = new JP.expandable.Expander(item);
    }
};

//Un comment the below line or add it to your own html/javascript files to start the slideshow
YAHOO.util.Event.onDOMReady(JP.expandable.auto);

