/* 
    Name: 
        jquery.dashboard.js
    Description: 
        This plugin is used to setup a dashboard form. See the landing page for 
        a live example

    Synopsis:

        jQuery('#dashboard').dashboard({
            metrics: {
                immediate_hover: function($obj){
                    ...
                },
                delayed_hover: function($obj){
                    ...
                },
                delay: 3
            }
        });

    Parameters:
        metrics: 
        Purpose: Pass in a metrics object for various call back routines to hitbox 
        Input:   Metrics object
        Output:  None

    Metrics Object:
        immediate_hover: 
        Purpose:    Call back routine when a user hover overs the rollover icons        

        delayed_hover:
        Purpose:    Call back routine that is fired after a delay, set by the delay parameter

        delay:
        Purpose:    Sets the time in seconds when delayed_hover callback will be fired.    


    Change History:
    v1.00   -   Jul 01, 2010 - Initial version (lbell) 
    v1.01		-		Jul 27, 2010 - Updates and fixes (phawxby)
    v1.02		-		Jul 29, 2010 - Restore the fluid tab style functionality (phawxby)

*/
(function(jQuery){
    jQuery.fn.dashboard = function(options) {
        var self = this;
        var dashboard = jQuery(this);
        
        self.dashboard_id;  // id of dashboard div
        self.options = {};  // Options parametsr
      	self.options = jQuery.extend({}, options || {});
      	
      	init_dashboard();         

        /*
            init_dashboard
            Purposes: Binds all the necessary events to all the rollovers etc
            Input:    1. A dashbard jQuery obj
                      2. An options hash
            Output:   None
        */
        function init_dashboard() {
          // IE6 hack :-(
          dashboard.children().hide();

        	// Setup the hover events
          dashboard.find("ul.dashboard > li").bind("mouseenter", mouse_enter);
          dashboard.find("ul.dashboard").bind("mouseleave", mouse_leave);
          
          // Setup content width.
          // Width of dashboard minus padding minus border
          dashboard.find("ul.dashboard li div.content").width(dashboard.width() - (40 + 2));
          dashboard.find("div.content_header_t").width(dashboard.width() - 10);
          
          // Setup button widths based on the width of the dashboard
          // Width of dashboard the padding between each button removed devided by the number of buttons
          var paneCount = dashboard.find("ul.dashboard > li").length;
         	var buttonWidth = Math.floor((dashboard.width() - ((paneCount - 1) * 4)) / paneCount);
         	// Now we get the remaning width as a result of rounding
         	var remaining = dashboard.width() - ((buttonWidth * paneCount) + (4 * (paneCount - 1)));
         	// Make the last button slightly wider to compensate
         	var lastButtonWidth = buttonWidth + remaining;
         	
         	// Apply widths
          dashboard.find("ul.dashboard > li > div.button").width(buttonWidth);
          dashboard.find("ul.dashboard > li:last > div.button").width(lastButtonWidth);

					// now we're setup display everything again
					dashboard.children().show();
        }

        /*
            mouse_enter
            Purposes: Mouse enter event handler for li elements
            Input:    None
            Output:   None
        */
        function mouse_enter() {
            var $obj = jQuery(this);
            
            // Clear timers
            if ( self.timeout )
                clearTimeout(self.timeout);            
           
           	// Fire first metrics event
            if ( self.options.metrics && self.options.metrics.immediate_hover )
            {
                self.options.metrics.immediate_hover($obj);
            }

						// Setup delayed metrics event
            if ( self.options.metrics && self.options.metrics.delayed_hover && self.options.metrics.delay )
            {
                var milliseconds = self.options.metrics.delay * 1000;
                self.timeout = setTimeout(function(){                	
                		self.options.metrics.delayed_hover($obj)
                	}, 
                	milliseconds);
            }
            
            toggle_display($obj);
        }

        /*
            mouse_leave
            Purposes: Mouse leave event handler for li elements
            Input:    None
            Output:   None
        */
        function mouse_leave() {
            if ( self.timeout )
                clearTimeout(self.timeout);
                
            toggle_display(null);
        }

        /*
            toggle_display
            Purposes: Toggles the dashboard/content current display
            Input:    1. jQuery li object
            Output:   None
        */
        function toggle_display($obj) {
        	// Hide all panes and reset button
        	dashboard.find("ul.dashboard > li > div.content").hide();
        	dashboard.find("ul.dashboard > li").removeClass("current");
        	
        	// If a selected li has been supplied then toggle it on
        	if($obj != null) {
        		$obj.children("div.content").show();
        		$obj.addClass("current");
        	}
        }
    };
})(jQuery);