/* 
    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){
                    ...
                },
                immediate_hover_links: function($obj){
                    ...
                },
                delayed_hover_links: 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 over a tab     

        delayed_hover:
        Purpose:    Call back routine that is fired after a delay, set by the delay parameter
		
        immediate_hover_links: 
        Purpose:    Call back routine when a user hover over a tab sends the links with lid's beneath

        delayed_hover_links:
        Purpose:    Call back routine that is fired after a delay, set by the delay parameter. Sends the links with lid's beneath
		
        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)
	v1.03		-		Nov 29, 2010 - Adds extra callback methods

*/
(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 )
            {
				if(self.options.metrics.immediate_hover != null) {
					self.options.metrics.immediate_hover($obj);
				}
				
				if(self.options.metrics.immediate_hover_links != null) {
					$obj.children("div.content").find("a[name*='&lid=']").each(function(index, element) {
						self.options.metrics.immediate_hover_links(jQuery(element));
					});
				}
            }

			// 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(){ 
						if(self.options.metrics.delayed_hover != null) {
							self.options.metrics.delayed_hover($obj);
						}
						if(self.options.metrics.delayed_hover_links != null) {
							$obj.children("div.content").find("a[name*='&lid=']").each(function(index, element) {
								self.options.metrics.delayed_hover_links(jQuery(element));
							});
						}						
                	}, 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);