var $dom = YAHOO.util.Dom;
var $ = $dom.get;
var $class = $dom.getElementsByClassName;

var expand_auto = {
    init: function() {
	    this.expandable_layers = [];
	    var selectors = ['div#category-listing ul li ul li ul li a', 'div#category-listing ul li ul li a']
        for(var j=0, selector; selector=selectors[j]; j++) {
    	    var expand_action_items = YAHOO.util.Selector.query(selectors[j]);
    	    for(var i=0, item; item=expand_action_items[i]; i++) {
    	        if(item.nextSibling) {
    	            this.expandable_layers[i] = new Expandable(item);
    	        }
    	    }
        }
    }
};

Expandable = function(expand_action_object) {
    if (expand_action_object) {
        this.init(expand_action_object); 
    }
};

Expandable.prototype = {  
    init: function(expand_action_object) {
        //Checking to see if a sub-category is the current category
        //if it is don't add expand/contract functionality
        //just set the background color
        if ($class('current', 'li', expand_action_object.parentNode).length > 0) {
            $dom.setStyle(expand_action_object.parentNode, 'background-color', '#8F2D2A');
            $dom.setStyle(expand_action_object, 'color', '#ffffff'); 
        } else { 
            this.expand_action_object = expand_action_object;
            this.expand_object = this.expand_action_object.nextSibling;
            var region = $dom.getRegion(this.expand_object);
            this.expand_height = region['bottom'] - region['top'];
            $dom.setStyle(this.expand_object, 'opacity', 0);
    	    $dom.setStyle(this.expand_object, 'height', 0);
    	    $dom.setStyle(this.expand_object, 'width', 'auto');
            $dom.setStyle(this.expand_object, 'display', 'none');
            $dom.setStyle(this.expand_object, 'visibility', 'visible');
            $dom.setStyle(this.expand_object, 'position', 'relative');
            this.expand_attributes = {
                  height: {to: this.expand_height, unit: 'px'},
                  opacity: { to: 1 }
            };
            this.hide_attributes = {
                  height: {to: 0},
                  opacity: { 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 obj = this;
            this.anim_expand = new YAHOO.util.Anim(this.expand_object, this.expand_attributes, 1.5);
            this.anim_expand.onComplete.subscribe(this.expand_complete, obj, true);   
            
            this.anim_hide = new YAHOO.util.Anim(this.expand_object, this.hide_attributes, 1.5);
            this.anim_hide.onComplete.subscribe(this.hide_complete, obj, true);    
    
            YAHOO.util.Event.addListener(obj.expand_action_object, 'click', obj.expand, obj);
    
            $dom.setStyle(this.expand_action_object, 'visibility', 'visible');
        }
    },

    expand: function(e, obj) {
        YAHOO.util.Event.preventDefault(e);
        obj.onExpandStart.fire(obj);
         
        $dom.setStyle(obj.expand_object, 'display', 'block');
        obj.anim_expand.animate();
        YAHOO.util.Event.removeListener(obj.expand_action_object, 'click');
        YAHOO.util.Event.addListener(obj.expand_action_object, 'click', obj.hide, obj);
    },

    expand_complete: function() {
        $dom.setStyle(this.expand_action_object.parentNode, 'background-color', '#8F2D2A');
        $dom.setStyle(this.expand_action_object, 'color', '#fff');
        $dom.setStyle(this.expand_object, 'height', 'auto');
        this.onExpandComplete.fire(this);
    },
  
    hide: function(e, obj) {
        YAHOO.util.Event.preventDefault(e);
        obj.onContractStart.fire(obj);
     
        obj.anim_hide.animate();
        YAHOO.util.Event.removeListener(obj.expand_action_object, 'click');
        YAHOO.util.Event.addListener(obj.expand_action_object, 'click', obj.expand, obj);        
    },
    hide_complete: function() {
        $dom.setStyle(this.expand_action_object.parentNode, 'background-color', '#E9EBEB');
        $dom.setStyle(this.expand_action_object, 'color', '#000');
        this.onContractComplete.fire(this);
    }
};

//Un comment the below line or add it to your own html/javascript files to start the slideshow
YAHOO.util.Event.addListener(window, 'load', expand_auto.init);