/** 
 * @fileoverview This file is to be used to build PWC feature module
 *
 * @author Jef Myers jmyers@momentdesign.com
 * @version 0.1 
 */

$(document).ready(function(){Feature.init();});
		 
/**
 * Construct a new Feature object
 * @class This is the basic Feature singleton class. 
 * @constructor
 */
var Feature = new (
	function()
	{
		var currentPanel = 0;
		var f1, f2, f3, f4, f5, logo, easing = null;
		var self = this;
			self.panels = [];
			
			/* relative links for video content */
			/* these are public variables that can be changed in init() */
			/* MG: This uses moment sample player, not PwC player
			self.swf = 'lib/swf/video_player.swf';
			self.video = 'lib/video/nally-overall.mp4';
			self.fallBackImage = 'lib/extras/poster.gif';
			*/
			
		/**
		 * selects random number between min and max
		 * @return: random number
		 * @private
	 	 */
		var rand = function(min,max) {return Math.floor(Math.random() * (max - min + 1)) + min;};
		
		/**
		 * adds 'selected' class to currentPanel menu item
		 * @private
		 */
		var setMenu = function()
		{
			var items = $('#feature-menu li').children('dl').removeClass('selected');
				items.removeClass('selected');
				$(items[currentPanel]).addClass('selected');
		};
		
		/**
		 * animates elements
		 * @param {Object} panel Containing the panel who's elements you want to animate.
		 * @param {String} direction Specifying the direction you want the elements to animate.
		 * @param {Function} callback Function to call after last element has animated
		 * @private
		 */
		var animateElements = function(panel,direction,callback)
		{
			if(!panel) return false;
			var cb = callback || null;
			var d = (direction == 'in') ? true : false;
			var easing = 'easeInSine';
			var position = {top:600};
			var elements = $(panel).children('.ani');

			// Stop any elements in the panel that are animating
			// and clear the animation queue.
			elements.stop(true,false);

			// If we're animating elements in, reposition them above feature to
			// drop in.
			if(d) 
			{
				easing = 'easeOutSine';
				elements.css({top:-500});
			};

			var i = 0;
			var l = elements.length;
			for(; i < l; i++)
			{
				// if we're animating elements in choose correct position they should be 
				// animated to from json object in title attribute.
				if(d) 
                {
                    var isTitleEmpty = $(elements[i]).attr('title');
                    if(isTitleEmpty != '')
                    {
                        var positionObject = jQuery.parseJSON( $(elements[i]).attr('title') );
                        $(elements[i]).attr('title','');
                        $(elements[i]).data('top',positionObject.top);
                    }
                    position = $(elements[i]).data();
                };
				
				if(i == l-1)
				{
					// Last element in the panel.
					$(elements[i]).animate({top:position.top}, rand(400,900), easing,
					function()
					{
						// Invoke callback function if there is one.
						if(cb != null) { cb(); return false; };

						// If we just animated an element out then animate the next panel in.
						if(!d) { animateElements($(self.panels[currentPanel]),'in'); }
					});
				}
				else
				{
					$(elements[i]).animate({top:position.top},rand(400,900),easing);
				};
			};
		};
		
		/**
		 * displays a panel
		 * @param {Number} p Number if the panel you wish to display.
		 */
		self.showPanel = function(p)
		{
			if(currentPanel == p) return false;
			if (p > self.panels.length || p < 0 || !p) var p = 0;

			// Check to see if the intro video is out.
			var isIntroShowing = $('.logo').hasClass('feathersOut');

			// The intro video is showing and another panel has been selected
			if(isIntroShowing && p != 0)
			{
				// Hide intro video and show the selected panel
				//alert('Hide video');
				$(".logo-media-embed > object").remove();
				currentPanel = p;
				self.hideIntro(function(){animateElements($(self.panels[currentPanel]),'in')});

				return false;
			};

			// If the intro video is selected
			if(p == 0 && !isIntroShowing)
			{
				// Animate current panel out then intro video in.
				animateElements($(self.panels[currentPanel]),'out', self.showIntro);
				currentPanel = p;
				return false;
			};

			// Animate the current panel out and the panel supplied in.
			animateElements($(self.panels[currentPanel]),'out');
			currentPanel = p;
			return false;
		};
		
		
		/**
		 * animates intro panel in and attaches video
		 */
		self.showIntro = function()
		{
			f4 = setTimeout(function()
			{
				$('#f4').stop(true,false).animate({width:675,height:125,opacity:.8},800,easing,function()
				{$(this).animate({width:663,height:125},1000,easing);});
			}, 1);

			f3 = setTimeout(function()
			{
				$('#f3').stop(true,false).animate({width:450,height:400,opacity:.8},900,easing,function()
				{$(this).animate({width:550,height:280},600,easing);});
			}, 400);

			f2 = setTimeout(function()
			{
				$('#f2').stop(true,false).animate({width:600,height:135,opacity:.8},800,easing,function()
				{$(this).animate({width:495,height:385},700,easing);});
			}, 500);

			f1 = setTimeout(function()
			{
				$('#f1').stop(true,false).animate({width:100,height:385,opacity:.8},600,easing,function()
				{$(this).animate({width:470,height:385},500,easing);});
			}, 800);

			f5 = setTimeout(function()
			{
				$('#f5').stop(true,false).animate({width:525,height:300,opacity:.8},800,easing,function()
				{
					$(this).animate({width:356,height:280},600,easing);
					
					// appends video
					$(".logo-media-embed").embedMedia();
				});
			}, 700);
			
			logo = setTimeout(function() {$('#videoheader').stop(true,false).fadeIn();$('.logo-media-embed').stop(true,false).fadeIn();}, 2000);
			$('.logo').addClass('feathersOut'); // class used to tell if the intro video is currently being viewed
		};
		
		/**
		 * animates intro panel and video out
		 * @param {Function} f Function to be called after the last element has finished animating
		 */
		self.hideIntro = function(f)
		{
			// Fadeout video and video header, then remove video from markup
			//$('.logo-media-embed').stop(true,false).fadeOut(200,function(){$(this).remove();});
			$('.logo-media-embed').stop(true,false).fadeOut(200);
			$('#videoheader').stop(true,false).fadeOut();

			var func = f || null;

			// clear all intro timeouts incase any have not fired yet
			clearTimeout(f1);
			clearTimeout(f2);
			clearTimeout(f3);
			clearTimeout(f4);
			clearTimeout(f5);
			clearTimeout(logo);

			// An Array of objects containing the position for the panels to animate to.
			var start = [{'w':20,'h':35},
						 {'w':30,'h':25},
						 {'w':25,'h':30},
						 {'w':37,'h':10},
						 {'w':10,'h':15}];
			var easing = 'easeInBack';
			var i = 0;
			var l = start.length;
			for(; i < l; i++)
			{
				if(i == l-1)
				{
					// Last element invoke callback.
					$('#f'+(i+1)).stop(true,false).animate({width:start[i].w,height:start[i].h,opacity:.0},rand(800,1000),easing,
					function()
					{
						func();
					});
				}
				else
				{
					// All other elements
					$('#f'+(i+1)).stop(true,false).animate({width:start[i].w,height:start[i].h, opacity:.0},rand(800,1000),easing);
				}
			};

			$('.logo').removeClass('feathersOut');
		};
		
		/**
		 * initialization sets up panels and menu
		 */
		self.init = function()
		{
			// hide video header
			$('#videoheader').stop(true,true).fadeOut('fast');

			// initialize panels
			self.panels[0] = 0;
			$.each($('.panel'), function(){ self.panels.push(this); });

			/**
			 * Binds menu items to correct panel
			 * @param {Object} e Element you would like to bind to click event
			 * @pram {Number} n Panel you would like to display
			 * @private
			 */
			function makeMenuLink(e,n)
			{
				if(!e) return false;
				var p = n || 0;
				$(e).click(
				function()
				{
					self.showPanel(p);
					setMenu();
				});
			};
			var menuItems = $('#feature-menu li');
			var i = 0;
			var l = menuItems.length;
			for(; i < l; i++)
			{
				makeMenuLink($(menuItems[i]),i)
			};
			
			// you can over write the default video locations here:
			/* MG: Moment sample player, now PwC player
			self.swf = 'lib/swf/video_player.swf';
			self.video = 'lib/video/nally-overall.mp4';
			self.fallBackImage = 'lib/extras/poster.gif';
			*/
			
			// Defaults to show intro video
			self.showIntro()
		};
		
	});