/*
 * jQuery ZD droplist
 *  
 * Summary
 *  Turns a UL into an expando dropdown list
 *
 * Depends:
 *  jquery.ui.widget.js
 */
;(function($, undefined){
    
    var NAME = 'droplist',
        C = '-' + NAME,
        C_ON = C + '-on',
        C_LIST = C + '-list',
        C_VIEWPORT = C,
        C_ICON = C + '-icon',
        C_ICON_ON = C_ICON + '-on';
        
    $.widget('zd.' + NAME, {
        
        options: {
            showSpeed: 300,
            hideSpeed: 100
        },
        
        _create: function () {
            
            var self = this,
                $el = self.element;
            
            $el.addClass(C_LIST);

            self.$viewport = $('<div class="' + C_VIEWPORT + '" />');
            self.$icon = $('<div class="' + C_ICON + '" />');

            self.$viewport
                .append(self.$icon)
                .insertBefore($el)
                .append($el)
                ;

            self._listHeight = $el.height();
            self._collapsedViewportHeight = self.$viewport.height();
            
            return;
        },
        
        _init: function () {
            
            var self = this,
                $el = self.element;
            
            self._events();
            
            return;
        },
        
        _events: function () {
            
            var self = this,
                $el = self.element;
            
            self.$viewport
                .click(function(e) {
                    if( e.target.tagName.toLowerCase() == "a" )
                    {
                        return;
                    }
                    if( !self.$icon.hasClass(C_ICON_ON) ) 
                    {
                        self._showdrop();
                    }
                })
                ;

            self.$icon
                .click(function(e) {
                    if( self.$icon.hasClass(C_ICON_ON) ) 
                    {
                        self._hidedrop();
                    }
                })
                ;
                
            $(document).click(function(e) {
                if( $(e.target).parents('.-droplist').length == 0 ) 
                {
                    self._hidedrop();
                }
            });
            
            return;
        },

        _showdrop: function() {
            var self = this,
                $el = self.element;

            if( self.$icon.hasClass(C_ICON_ON) )
            {
                return;
            }

            self.$viewport.addClass(C_ON);
            
            self.$viewport
                .animate({
                    height: self._listHeight + 3
                }, 
                self.options.showSpeed,
                function() {
                    self.$icon
                        .addClass(C_ICON_ON)
                        ;        
                })
                ;
        },

        _hidedrop: function() {
            var self = this,
                $el = self.element;

            if( !self.$icon.hasClass(C_ICON_ON) )
            {
                return;
            }

            self.$viewport.removeClass(C_ON);
            
            self.$viewport
                .animate({
                    height: self._collapsedViewportHeight
                }, 
                self.options.hideSpeed,
                function() {
                    self.$icon
                        .removeClass(C_ICON_ON)
                        ;    
                })
                ;
        }
        
    });
    
})(jQuery);