/**
 * @class ExperienceGoAppController Will control the UI.
 *
 * @author Gerardo Rodriguez - grodriguez@cmdagency.com
 * @created 07/19/2010
 */
function ExperienceGoAppController()
{
	//-------------------------------------------------
	// Properties
	//-------------------------------------------------
	var self = this;
	// var uiController;
	// var ajaxAmbassadorModel;
	// var accordianController;
	var designStoriesScrollerController;
	var isDesignStoryOpen;
	var emailPreFill;
	var namePreFill;
	var isConnectInputActive;
	
	//-------------------------------------------------
	// Faux Constructor
	//-------------------------------------------------
	/**
	 * @private Will serve as our faux constructor.
	 */
	this.init = function()
	{
/*
		var options = {
			minPanelWidth:124,
			maxPanelWidth:449,
			pixelWidthDifference:1
		};
		self.accordianController = new AccordianController( $('#productAccordian'), options );
*/
		self.isDesignStoryOpen = false;
		self.isConnectInputActive = false;
		self.emailPreFill = $('input#email').val();
		self.namePreFill = $('input#name').val();
		
		self.designStoriesScrollerController = new DesignStoriesScrollerController( $('#designStoriesSubNav') );
		
		// $('.productShotsContainer').find('span').css('opacity','0');
		
	}
	//-------------------------------------------------
	// Public Methods
	//-------------------------------------------------
	/**
	 * @public Pulic method that allows the app to begin setup.
	 */
	this.setup = function()
	{
		/* set up the main content slider */
		$('#coda-slider-1').codaSlider({
			dynamicTabs: false,
			dynamicArrows: false,
			crossLinking: false,
			slideEaseDuration:400
		});
		
/*
		$(".mainContentScrollable").scrollable({
			circular:true,
			items: '.contentItems',
			onSeek: function(e,tabIndex){ 
				self.showProductImage(tabIndex);
			}
		}).navigator({
			navi:'ul.subNav'
 		});
*/

		/* set up the thumb nail scrollable actions */
		$(".scrollable").scrollable({
			circular:true
		});
		
		/* set up the tooltip action for the thumbnails */
		var baseCount = $('.itemsCollection').eq(0).find('.laptopThumb').length;
		
		$('.itemsCollection').each(function(h,itemsCollection){
			$('.laptopThumb img', itemsCollection).each(function(i,thumb){

				$(thumb).css('opacity',.5);

				if( !$(thumb).closest('.itemsCollection').hasClass('cloned') )
				{
					var offsetX = 0;
					var offsetY = 28;
					
					//offsetX += ($('.thumbScrollerContainer .scrollable').outerWidth(true) * -(h-1)) + ($(thumb).width());
					//if( h > 1 ) offsetX += $(thumb).width() * -.5;
					
					// Lazy... but effective
					switch (h) {
						case 1:
							offsetX = 88;
						break;
						
						case 2:
							offsetX = -372;
						break;
						
						case 5:
							offsetX = 88;
						break;
						
						case 6:
							offsetX = -372;
						break;
					}
					
					$(thumb)
						.tooltip({ 
							effect: 'slide',
							slideFade: true,
							tip: '#tooltip_full_' + ((i+1) + ((h-1)*baseCount)), // tip number
							relative: true,
							delay: 20,
							position: 'top center',
							offset: [offsetY, offsetX]
						})
						.bind('mouseover', function(){
							$(this).animate({
								opacity:1
							},{
								easing:'easeOutExpo'
							});
						})
						.bind('mouseout', function(){
							$(this).animate({
								opacity:.5
							},{
								easing:'easeOutExpo'
							});
						});
				}
			});
		});
		
		// check to see if current page is multimedia, and then hide NX series.
		// Hiding NX series before assigning tooltips breaks them :(
		if (window.multimediaPage) {
			hideNXSeries();
		}
		
		
		/* set up the hover actions for the navigation */
		var config = {    
			over: self.onNavInteraction, // function = onMouseOver callback (REQUIRED)    
			timeout: 100, // number = milliseconds delay before onMouseOut    
			out: self.onNavInteraction // function = onMouseOut callback (REQUIRED)    
		};
		$(".nav li").hoverIntent( config );
		
		/* bind the megamenu items to over & out events */
		$(".megaMenuSubNav li")
			.bind('mouseover', function(e){
				self.onProductsMegaMenuInteraction(e);
			})
			.bind('mouseleave', function(e){
				self.onProductsMegaMenuInteraction(e);
			});
		
		/* bind to the design stories megamenu items */
		$('#designStoriesSubNav li').delegate('a', 'click', self.onDesignStoryClick );
		/* set up the close link to the design story */
		$('#contentWrapper .designStory .closeLink').live( 'click', self.onCloseDesignStoryClick );
		$('#contentWrapper').delegate('.designStoryWrapper', 'click', self.onWrapperDesignStoryClick );
		
		/* remove the design story from display */
		$('#contentWrapper').find('.designStoryWrapper').hide();
		
		/* set up the info tooltips */
		$('.processorTooltipAction').tooltip({
			tip: '#processorTooltip',
			position: 'top center',
			relative: false,
			effect: 'slide',
			offset: [20, 0]
		});
		
		/* multimedia tooltip */
		var offsetX = 0;
		var offsetY = 0;
		if( $('html').hasClass('safari3') ){ offsetX -= 50; offsetY -= 15; }
		$('.multimediaTooltipAction').tooltip({
			tip: '#multimediaTooltip',
			position: 'top center',
			relative: false,
			effect: 'slide',
			offset: [(20+offsetY), (145+offsetX)]
		});
		
		/* listen tooltip */
		var offsetX = 0;
		if( $('html').hasClass('safari') ) offsetX += 150;
		if( $('html').hasClass('safari3') ) offsetX -= 265;
		$('.listenTooltipAction').tooltip({
			tip: '#listenTooltip',
			position: 'top center',
			relative: false,
			effect: 'slide',
			offset: [20, (-41+offsetX)]
		});
		
		/* essential tooltip */
		$('.essentialTooltipAction').tooltip({
			tip: '#essentialTooltip',
			position: 'top center',
			relative: false,
			effect: 'slide',
			offset: [20, 0]
		});
		
		/* practical tooltip */
		var offsetX = 0;
		if( $('html').hasClass('safari3') ) offsetX -= 265;
		$('.practicalTooltipAction').tooltip({
			tip: '#practicalTooltip',
			position: 'top center',
			relative: false,
			effect: 'slide',
			offset: [20, (120+offsetX)]
		});
		
		/* dominate tooltip */
		$('.dominateTooltipAction').tooltip({
			tip: '#dominateTooltip',
			position: 'top center',
			relative: false,
			effect: 'slide',
			offset: [20, 0]
		});
		
		/* bind to the launch video link */
		$('#contentWrapper .videoThumbContainer').delegate('.launchVideoLink', 'click', self.onLaunchVideoClick );
		
		/* bind to the email input */
		$('input#email').bind({
			focus: function(e){ self.onInputFocus(e, self.emailPreFill ) },
			blur: function(e){ self.onInputBlur(e, self.emailPreFill) }
		});

		/* bind to the name input */
		$('input#name').bind({
			focus: function(e){ self.onInputFocus(e, self.namePreFill ) },
			blur: function(e){ self.onInputBlur(e, self.namePreFill) }
		});

		/* bind to the click in the subnav */
		$('.subNav').find('a').bind('click', self.onSubNavClick );
		
		/* bind to the discover tab */
		$('#discoverAsusTab').delegate( 'a', 'click', self.onDiscoverAsusClick );
		
		/* bind to the news and reviews link */
		$('.reviewsLink').delegate( 'a', 'click', self.onDiscoverAsusClick );
		
		/* bind to the body */
		$('body').bind( 'click', self.onPageClick );

		self.showProductImage(0);
	}
	//-------------------------------------------------
	// Private Methods
	//-------------------------------------------------
	/**
	 * @private Private method that shows the megamenu for the current target 
	 * @param {Object} currentTarget The current target which fired off the interaction.
	 */
	this.showMegaMenu = function( currentTarget )
	{
		$(currentTarget).find('.megaMenuSubNav').fadeIn('fast');
	}
	/**
	 * @private Private method that hides the megamenu for the current target 
	 * @param {Object} currentTarget The current target which fired off the interaction.
	 */
	this.hideMegaMenu = function( currentTarget )
	{
		var megaMenu;
		
		if( !currentTarget )
		{
			megaMenu = $('.nav').find('li.active').find('.megaMenuSubNav');
			$('.nav').find('li.active').removeClass('active').find('li.selected').removeClass('selected');
		}
		else
		{
			megaMenu = $(currentTarget).find('.megaMenuSubNav');
		}
		
		$(megaMenu).fadeOut('fast').find('img, h5, p').css('opacity',1);
	}
	/**
	 * @private Private method that highlights the megamenu product for current target.
	 */
	this.updateHighlightProduct = function()
	{
		
		$('.megaMenuSubNav li').each(function(i,product){

			if( $(product).hasClass('highlight') || $(product).hasClass('selected') )
			{
				$(product).find('img, h5, p').css('opacity',1);
			}
			else
			{
				$(product).find('img, h5, p').css('opacity',.5);
			}
		});
	}
	/**
	 * @private Private method that will 'show' the designated product.
	 * @param {Number} index A number representing the product to show.
	 */
	this.showProductImage = function( index )
	{
		if( !$('html').hasClass('ie') )
		{
			$('.productShotsContainer').find('span').hide().animate({
				opacity:0
			},{
				easing:'easeInExpo',
				queue:false,
				complete:function(){
					$('.productShotsContainer').find('span').eq(index).animate({
						opacity:1
					},{
						easing:'easeOutExpo',
						queue:false
					}).show();
				}
			});
		}
		else
		{
			$('.productShotsContainer').find('span').hide(0,function(){
				$('.productShotsContainer').find('span').eq(index).show();
			});
		}
		
	}
	//-------------------------------------------------
	// Event Handlers
	//-------------------------------------------------
	/**
	 * @private Private event handler method for the body click
	 * @param {Object} e The event.
	 */
	this.onPageClick = function(e)
	{
		if( $('#connectSubNav').is(":visible") && !$(e.target).closest("#connectSubNav").is('div') )
		{
			$('#connectSubNav').find('input').trigger('blur');
			self.hideMegaMenu();
		}
	}
	/**
	 * @private Private event handler method that responds to an input focus.
	 * @param {Object} e The event object which has information about the clicked DOM element.
	 * @param {String} prefillText The text that the input is prefilled with.
	 */
	this.onInputFocus = function(e, prefillText)
	{ 
		self.isConnectInputActive = true;
		
		var $currInputField = $(e.currentTarget);
		( $currInputField.val() == prefillText ) ? $currInputField.val('') : $currInputField.select() ;
	}
	/**
	 * @private Private event handler method that responds to the input blur event.
	 * @param {Object} e The event object which has information about the clicked DOM element.
	 * @param {String} prefillText The text that the input is prefilled with.
	 */
	this.onInputBlur = function(e, prefillText)
	{ 
		self.isConnectInputActive = false;
		
		var $currInputField = $(e.currentTarget);
		if( $currInputField.val() == '' ) $currInputField.val( prefillText );
	}
	/**
	 * @private Private event handler method that handles the discover asus click
	 * @param {Object} e The event.
	 */
	this.onDiscoverAsusClick = function(e)
	{
		e.preventDefault();
		
		self.isDesignStoryOpen = true;
		
		self.hideMegaMenu();
		
		var loadURL = $(e.currentTarget).attr('href') + ' .designStory';
		var finalTop = 0;
		
		$('#contentWrapper')
			.find('.designStoryWrapper').addClass('active')
			.load( loadURL, function(){

				$('#contentWrapper').find('.designStory').hide().css('top',finalTop);

				$('#contentWrapper').find('.designStoryWrapper')
					.slideDown('normal', function(){
						$('#contentWrapper').find('.designStory').fadeIn();

						var newHeight = ( ($('#contentWrapper').find('.designStory').height() + finalTop) < $('#contentWrapper').height() ) ? $('#contentWrapper').height() : $('#contentWrapper').find('.designStory').height() + finalTop;
						
						$('#contentWrapper').find('.designStoryWrapper').css('height',(newHeight+60)+'px');
						
						$('#contentWrapper').animate({
							height: newHeight
						},{
							easing:'easeOutExpo'
						});
					});
			});
	}
	/**
	 * @private Private event handler method that handles the video launch click
	 * @param {Object} e The event.
	 */
	this.onLaunchVideoClick = function(e)
	{
		e.preventDefault();
		
		var filePath = $(e.currentTarget).attr('href');
	
		var so = new SWFObject('../player/player.swf', 'fullVideo', 864, 510, '9', 'player/expressInstall.swf');
		so.addParam('allowfullscreen','true');
		so.addParam('allowscriptaccess','always');
		//so.addParam('wmode','opaque');
		so.addParam('wmode','transparent');
		// so.addVariable('playerready','playerReadyCallback');
		so.addVariable('autostart','true');
		so.addVariable('file', filePath);
		so.addVariable('plugins', 'gapro-1');
		so.addVariable('gapro.accountid', 'UA-15348783-1');
		so.write('videoWrapper');
		
		$.colorbox({
			inline:true, 
			href:"#videoWrapper",
			onClosed: function(){ $('#videoWrapper').html(''); }
		});
	}
	/**
	 * @private Private event handler method that handles the design story click.
	 * @param {Object} e The event.
	 */
	this.onDesignStoryClick = function(e){
		e.preventDefault();
		
		self.isDesignStoryOpen = true;
		
		$(e.currentTarget).closest('li').addClass('selected').siblings().removeClass('selected');
		
		self.updateHighlightProduct();
		
		var loadURL = $(e.currentTarget).attr('href') + ' .designStory';
		var designStoriesNav = $('#designStoriesSubNav');
		// var designStoriesPositionObj = $(designStoriesNav).offset();
		var finalTop = /*designStoriesPositionObj.top + */$(designStoriesNav).outerHeight();
		
		$('#contentWrapper')
			.find('.designStoryWrapper').addClass('active')
			.load( loadURL, function(){

				$('#contentWrapper').find('.designStory').hide().css('top',finalTop);

				$('#contentWrapper').find('.designStoryWrapper')
					.slideDown('normal', function(){
						$('#contentWrapper').find('.designStory').fadeIn();

						var newHeight = $('#contentWrapper').find('.designStory').height() + finalTop;
						
						$('#contentWrapper').animate({
							height: newHeight
						},{
							easing:'easeOutExpo'
						});
					});
			});
	}
	/**
	 * @private Private event handler method that handles the design story wrapper click event.
	 * @param {Object} e The event.
	 */
	this.onWrapperDesignStoryClick = function(e)
	{
		if( $(e.target).hasClass('designStoryWrapper') ) self.onCloseDesignStoryClick(e);
	}
	/**
	 * @private Private method event handle that handles the close design story click event.
	 * @param {Object} e The event.
	 */
	this.onCloseDesignStoryClick = function(e)
	{
		e.preventDefault();
		
		self.isDesignStoryOpen = false;

		$('#contentWrapper').find('.designStory').fadeOut('normal', function(e){
			$('#contentWrapper').find('.designStoryWrapper').slideUp();
			self.hideMegaMenu();
			
			var newHeight = $('#contentWrapper').find('.contentRestraintWrapper').outerHeight() + $('#contentWrapper').find('.contentFooterWrapper').outerHeight();
			
			$('#contentWrapper').animate({
				height: newHeight
			},{
				easing:'easeOutExpo',
				complete:function(){
					$('#contentWrapper').css('height','auto');
				}
			});
		});
	}
	/**
	 * @private Private event handler method that handles the interaction of the sub mega menu page.
	 * @param {Object} e The event.
	 */
	this.onProductsMegaMenuInteraction = function(e)
	{
		switch( e.type )
		{
			case 'mouseover':
				$(e.currentTarget).addClass('highlight');
				self.updateHighlightProduct();
				break;
				
			case 'mouseout':
			case 'mouseleave':
				$(e.currentTarget).removeClass('highlight');
				self.updateHighlightProduct();
				break;
			
			default:
				alert('unknown event type: ' + e.type );
				break;
		}
	}
	/**
	 * @private Private event handler method that handles the interaction of the main nav.
	 * @param {Object} e The event.
	 */
	this.onNavInteraction = function(e)
	{
		switch( e.type )
		{
			case 'mouseover':
				if( !self.isDesignStoryOpen )
				{
					if( self.isConnectInputActive )
					{
						self.hideMegaMenu();
						$('#connectSubNav').find('input').trigger('blur');
					}
					$(e.currentTarget).addClass('active');
					self.showMegaMenu(e.currentTarget);
				}
				break;
				
			case 'mouseout':
				if( !self.isDesignStoryOpen)
				{
					if( $(e.currentTarget).attr('id') == 'connectTab' && self.isConnectInputActive )
					{}else{
						$(e.currentTarget).removeClass('active');
						self.hideMegaMenu(e.currentTarget);
					}
				} 
				break;
			
			default:
				alert('unknown event type: ' + e.type );
				break;
		}
	}
	/**
	 * Handles the click of the sub nav
	 */
	this.onSubNavClick = function(e)
	{
		self.showProductImage( $(e.currentTarget).parent().index() );
	}
	//-------------------------------------------------
	// Getters/Setters
	//-------------------------------------------------

	//-------------------------------------------------
	// Faux Constructor Init
	//-------------------------------------------------
	/**
	 * We need to call our faux constructor, since it won't actually run by itself.
	 * @param domElement The DOM element to store as our root.
	 */
	this.init();
}