﻿function LandingPageHero()
{
	// Google analytic variables
	var googleAnalytics = {
		category : 'Home page interactive panel',
		eventTypes : {
			click : 'Click',
			mouseOver : 'Mouse over'
		},
		mouseOverTracking : {
			delay : 2500,
			timerLabel : 'Interactive_Mouse_Over_Tracking'
		}
	};

	// should be considered constants
	var animationSpeed = {
		anchor: 350,
		content: 100,
		container: 350,
		shadow: 250
	};
	
	var LARGE_PARAMS = {
		'height': '259px',
		'width': '398px'
	};
	var NORMAL_PARAMS = {
		'height': '129px',
		'width': '238px'
	};
	
	// properties
	var items = $('.landingPageHero #interactive .placeholder'),
		itemContainer = $('.landingPageHero #interactive'),
		shadow = $('.landingPageHero #heroShadow');	

	// registeres the required events
	function init()
	{
		items.click(item_onClick).hoverIntent(item_onMouseOver, item_onMouseOut);
	}

	// handles the mouse over event triggered when the user mouses over an interactive item
	function item_onMouseOver()
	{
		// if the container is already animated, stop its animation
		if (itemContainer.is(':animated'))
		{
			itemContainer.stop();
		}
		var currentItem = this;

		// animate the item size
		$(this).animate(LARGE_PARAMS, animationSpeed.anchor, function() { showContent(currentItem, true) });
		$('.itemContent', this).fadeOut(animationSpeed.content);

		// if the browser isnt ie, fade the background
		shadow.fadeTo(animationSpeed.shadow, 0.4);
		//shadow.fadeIn(animationSpeed.shadow);

		// re-position the container
		itemContainer.animate({
			'top': '0px'
		}, animationSpeed.container);

		trackContentMouseOver(this);
	}

	// handles the mouse out event triggered when the user mouses out from an interactive item
	function item_onMouseOut()
	{
		var currentItem = this;
		
		// animate the item size
		$(this).animate(NORMAL_PARAMS, animationSpeed.container, function() { showContent(currentItem, false) });
		$('.itemContent', this).fadeOut(animationSpeed.content);
		shadow.fadeTo(animationSpeed.shadow, 0);
		
		// re-position the container
		itemContainer.animate({
			'top': '130px'
		}, animationSpeed.anchor);

		cancelTrackContentRead(this);
	}

	// handles the click event for an interactive item, tracking the user interaction to Google analytics
	function item_onClick()
	{
		// track the interactivity click
		trackGAEvent(googleAnalytics.category, googleAnalytics.eventTypes.click, $(this).find('h2.heroTitle').text(), null);
	}
	
	// track the user interaction with the panel to indicate they have read the item
	function trackContentMouseOver(item)
	{
		// register a delayed function call to track
		var title = $(item).find('h2.heroTitle').text()

		$(document).oneTime(googleAnalytics.mouseOverTracking.delay,
			getMouseOverTrackingTimerLabel(item),
			function()
			{
				trackGAEvent(googleAnalytics.category, googleAnalytics.eventTypes.mouseOver, title, null);
			});
	}
	
	// cancels a tracking request as it should be considered the user didn't have time to read the content
	function cancelTrackContentRead(item)
	{
		$(document).stopTime(getMouseOverTrackingTimerLabel(item));
	}
	
	// get the timer label for a delayed track event
	function getMouseOverTrackingTimerLabel(item)
	{
		return googleAnalytics.mouseOverTracking.timerLabel + $(item).find('h2').text();
	}

	// fades in the content
	function showContent(elem, allContent)
	{
		$('.expandedItemContent', elem).css('display', (allContent ? 'block' : 'none'));
		$('.itemContent', elem).fadeIn(animationSpeed.content);
	}

	$(document).ready(init);
}
