YUI.add('psg-pushdown', function (Y) {
    
    var CONTENT_BOX = 'contentBox',
        BOUNDING_BOX = 'boundingBox',
        HIDDEN_CLASS = 'psg-pushdown-hidden';
    
    var PsgPushdown = Y.Base.create('psg-pushdown', Y.Widget, [], {
        _contentLoaded: false,
        
        initializer: function () {
        },
        
        bindUI: function () {
            var pushdown = this;
            
            // these references should not change - store for faster lookups
            pushdown._cb = pushdown.get(CONTENT_BOX);
            pushdown._bb = pushdown.get(BOUNDING_BOX);
        },
        
        renderUI: function () {
            if (!this._contentLoaded) {
                this.get(CONTENT_BOX).load('/personal-style-guides', Y.bind(this._onContentLoaded, this));
            }
        },
        
        _onContentLoaded: function (e) {
            //this.set('height', this._cb.get('clientHeight') + 'px');
            this._contentLoaded = true;
        },
        
        _uiSetVisible: function(val) {
            var widget = this,
                maxHeight = val == true ? widget.get('height') : 0,
                bb = widget._bb;
            
            widget._bb.transition({
                height: maxHeight,
                duration: 0.2,
                easing: 'ease-out',
                
                on: {
                    start: function () {
                        if (val) {
                            bb.removeClass(HIDDEN_CLASS);
                        }
                    },
                    end: function () {
                        if (!val) {
                            bb.addClass(HIDDEN_CLASS);
                        }
                    }
                }
            });
        },
        
        /**
         * @method toggle
         * @chainable
         */
        toggle: function () {
            var pushdown = this;
            
            if (pushdown._bb.hasClass(HIDDEN_CLASS)) {
                pushdown.show();
            } else {
                pushdown.hide();
            }
            
            return pushdown;
        }
        
    }, {
        CSS_PREFIX: 'psg-pushdown',
        
        ATTRS: {
            
        }
    });
    
    Y.PsgPushdown = PsgPushdown;
    
}, '1.0.0', { requires: [ 'node', 'node-load', 'base', 'widget', 'transition' ]});

YUI().use('node', 'psg-pushdown', function (Y) {
    
    var psg;
    
    function initPushdown() {
        var header = Y.one('#psg-header');

        header.once('click', function (e) {
            psg = new Y.PsgPushdown({ 
                visible: false,
                height:  "245px"
            });
            
            psg.after('visibleChange', function (e) {
                if (e.newVal === true) {
                    header.addClass('psg-header-active');
                } else {
                    header.removeClass('psg-header-active');
                }
            });
            
            psg.render(header.get('parentNode')).show();
            
            e.halt();
            
            header.on('click', function (e) {
                psg.toggle();
                e.halt();
            });
        });
    }
    
    Y.once('available', initPushdown, '#psg-header');
    
});