/*jslint evil: false, strict: false, undef: true, white: false, onevar:false, browser:true, plusplus:false */
/*global jQuery,window:true */

window.SEAT = window.SEAT || {};

(function($, app){
	
	"use strict";

		// https://bugzilla.mozilla.org/show_bug.cgi?id=63895 exists in all known versions of Firefox
		// if the Firefox bug is fixed, then this detection needsd to be refined
	var IS_FIREFOX_WITH_BUG_63895 = /Firefox/.test( navigator.userAgent.toString() ),

		// figure out what the final top value of an expanded .container should be
		EXPANDED_CONTAINER_TOP_IN_PX = IS_FIREFOX_WITH_BUG_63895 ? 143 : 46,
		
		// figure out what the final top value of a collapsed .container should be
		COLLAPSED_CONTAINER_TOP_IN_PX = IS_FIREFOX_WITH_BUG_63895 ? -157 : -254,
				
		// The time the animation should use to collapse a panel
		COLLAPSE_TIME = 250,
		
		// The time the animation should use to expand a panel
		EXPAND_TIME = 350,
	
		// This is the default z-index, which should match the one set in the css file
		DEFAULT_Z_INDEX = 10,
		
		// This must be higher than DEFAULT_Z_INDEX
		HIGH_Z_INDEX = DEFAULT_Z_INDEX + 1,
		
		// The default delay to use before expanding a panel
		DEFAULT_DELAY = 400;
		
	/**
	 *	ModelMenu is a widget that displays different panels when the user interacts with the menu items.
	 *	No panel will be displayed for click events, if a non-local href value is set on the anchor
	 *
	 *	@param { Number }	horisontalPadding	The current value for horisontal padding set in the css file	
	 */
	app.ModelMenu = $.klass({
		initialize: function( horisontalPadding ){
			var self = this;
	
			self.adjustMenuItems( horisontalPadding );

			// Init hover effect.
			// $('#modelmenu ul').autosprites({
			//	offset: '46px',
			//	overSpeed: 300,
			//	outSpeed: 800,
			//	activeState: false,
			//	activeSprites: false
			// });
		},
		
		/**
		 *	Collapses a model panel by animating it's top property until it's completely hidden
		 *	@param { jQuery Object }	panel	The panel to collapse
		 *	@private
		 */
		collapse : function( panel ){
			if ( panel ){				
				panel.attr( 'z-index', DEFAULT_Z_INDEX );
				panel.animate( { top: COLLAPSED_CONTAINER_TOP_IN_PX }, COLLAPSE_TIME );
			}
		},
		
		/**
		 *	Expands a model panel by animatings it's top property until it's completely visible
		 *	If there is another panel visible, it will be collapsed
		 *
		 *	@param { jQuery Object }	targetPanel		The panel to expand
		 *	@param { Number }			delay			The time we should wait before executing the function, allowing 
		 *												it to be overriden with a new panel to expand
		 *	@private
		 */
		expand : function( targetPanel, delay ){
			var self = this,
				// is the target different from the currently active panel?
				differentPanel = ( self.activePanel && self.activePanel[0] ) !== targetPanel[0];

			// make sure that delay is defined
			delay = delay !== undefined ? delay : DEFAULT_DELAY;
			
			if ( differentPanel ){
				clearTimeout( self.timeout );

				self.timeout = setTimeout( function(){
					// first collapse, and once collapsed start animation
					self.collapse( self.activePanel );

					self.activePanel = targetPanel;
					
					// make sure our new panel sits on top of other panels
					targetPanel.attr( 'z-index', HIGH_Z_INDEX );
					
					targetPanel.animate( { top: EXPANDED_CONTAINER_TOP_IN_PX }, EXPAND_TIME );
				}, delay );
			}
		},
		
		/**
		 *	Event delegate for mouseover events
		 *	@private
		 */
		onmouseover : $.delegate({
			'ul.models > li > a' : function( e ){
				var panel = $('.container', e.target.parentNode );
				this.expand( panel );				
			}
		}),
		
		onmouseout : $.delegate({
			'ul.models > li > a' : function( e ){
				// cancel opening of menu, if there is one scheduled
				clearTimeout( this.timeout );
			}
		}),
			
		/**
		 *	Event delegate for click events
		 *	@private
		 */
		onclick : $.delegate({
			'ul.models > li > a' : function( e ){
				var href = $( e.target ).attr( 'href' );
				var re = /^#.*/;
				
				// if the href is local to this page, then expand the container
				if ( href === undefined || re.test( href ) ){
					var panel = $('.container', e.target.parentNode );
					this.expand( panel, 0 );
				}
			},
			
			'.container a.close' : function( e ){
				var panel = $( e.target ).parents('.container');
				this.collapse( panel );
				this.activePanel = null;
			}
		}),
		
		/**
		 *	Adjusts the padding of the menu items, so they take up the full width of the <ul> element
		 *	@param { Number }	defaultHorisontalPadding	The default padding applied to either side of the menu items by the css file
		 *	@private
		 */
		adjustMenuItems : function( defaultHorisontalPadding ){
			// we only need to fix this for IE7 or IE6
			if ( $('html.ie7, html.ie6').length === 0 ){
				return;
			}
			
			var MENU_ITEMS = '> ul.models > li',
				MENU_ITEM_LINKS = '> ul.models > li > a',
				LAST_MENU_ITEM_LINK = '> ul.models > li:last-child > a',

				// make sure we ALWAYS have a good value to work with
				defaultPadding = defaultHorisontalPadding || 0,
				items = $( MENU_ITEMS, this.element ),
				totalWidth = 0;

			for ( var i = 0, j = items.length; i < j; i++ ){
				totalWidth += items.eq(i).width();
			}

			var difference = this.element.width() - totalWidth;
			var paddingIncreasePerItem = difference / ( items.length );

			var paddingIncreasePerSide = Math.floor( paddingIncreasePerItem / 2 );
			var leftovers = ( difference - ( paddingIncreasePerSide * items.length * 2 ) ) + paddingIncreasePerSide	 + defaultPadding + 'px';

			$(MENU_ITEM_LINKS, this.element).css({
				'padding-left' : paddingIncreasePerSide	 + defaultPadding + 'px',
				'padding-right' : paddingIncreasePerSide + defaultPadding + 'px'
			});

			// put the laftovers as padding-right on the last link (where it's least visible)
			$(LAST_MENU_ITEM_LINK, this.element).css( 'padding-right', leftovers );
		}
	});
}( jQuery, window.SEAT ));