var cnnActivePlayer = null;
var cnnPlayers = [];
var storyVidPlayers = [];

function storyVidPlayer(index)
{
	var _self = this;
	var _playerHeight = 259;
	var _playerWidth = 384;
	var _height_interval = 25;
	
	//animation vars
	var _animateOpenInterval = null;
	
	this.index = index;
	this.playerContainerId = 'vid'+index;
	this.playerFrame = null;
	this.playerContainer = null;
	this.insertInitiated = false;
	this.animate_open = false;
	
	function _animate_expand()
	{
		var start_height = _self.playerContainer.getHeight();
		var new_height = start_height + _height_interval;
		if(new_height <= _playerHeight-1)
		{
			_self.playerContainer.style.height = new_height+'px';
		}
		else
		{
			window.clearInterval(_animateOpenInterval);
			_animateOpenInterval = null;
			_self.expand_full();
		}
	}
	

	function _init()
	{
		_self.playerContainer = $('vid'+_self.index);

		//needs to visible for scroll events to fire
		_self.playerContainer.style.display	= "block";
		_self.playerContainer.style.height = '0px';
	}

	this.expand = function()
	{
		this.playerFrame = $('player'+this.index);
		
		if(this.animate_open)
		{
			_animateOpenInterval = window.setInterval(_animate_expand, 10);
		}
		else
		{
			this.expand_full();
		}
	}
	
	this.expand_full = function()
	{
		this.playerFrame.style.height			= _playerHeight+"px";
		this.playerFrame.style.width			= _playerWidth+"px";
		this.playerContainer.style.width		= _playerWidth+"px";
		this.playerContainer.style.height		= _playerHeight+"px";
		this.playerContainer.style.marginBottom	= "15px";
	}
	
	this.insert = function()
	{
		this.insertInitiated = true;
		//generate random so we dont cache.
		//TODO:
		// - check to see if we need this random hack
		var rnd = Math.floor(Math.random()*101010101);
	
		//player iframe
		//
		var str = '<iframe id="player'+this.index+'" src="/.element/ssi/video/4.0/players/story.player.html?p='+this.index+'&d='+(rnd)+'" width="384" height="0" frameborder="0" scrolling="no" allowtransparency="true" style=""></iframe>';
		
		//this.playerContainer.style.height = '1px';
		this.playerContainer.show();

		//insert player iframe into div
		this.playerContainer.update(str);

		//Register cnn player
		cnnPlayers[this.index] = this.index;
	}	

	_init();
}

/**
 * Pulls the video config for a player
 */
function getVidConfig(index)
{
	return vidConfig[index];
}

/**
 * Begins the video
 */
function initializeVideo()
{		
	for(var i = 0; i < vidConfig.length; i++)
	{
		storyVidPlayers[i] = new storyVidPlayer(i);

		/* HACK
		 * Insert right away because ipad doesn't seem to fire the jquery scroll bound event. 
		 * As a result all Safari browsers wont lazy load
		 */		
		if (navigator.userAgent.indexOf('WebKit') !== -1 )
		{
			storyVidPlayers[i].insert();
		}
		else
		{		
			//if videos are already in view		
			if(!jQuery.belowthefold('#'+storyVidPlayers[i].playerContainerId) && !storyVidPlayers[i].insertInitiated)
			{
				storyVidPlayers[i].insert();
			}
		}
	}
	
	//bind scroll using namespace. 
	jQuery(window).bind("scroll.storyvideos", 
		function(event)
		{
			//console.log("Scrolling for videos..");
			var count = 0;			
			jQuery.each(storyVidPlayers, 
				function(index, obj)
				{
					if(!obj.insertInitiated)
					{
						if(!jQuery.belowthefold('#'+obj.playerContainerId))
						{
							obj.insert();
						}
					}
					else
					{
						count++;
					}
				}
			);
			
			//once all video players have been inserted (or attempted to be inserted) then kill the scroll bind
			if(count == storyVidPlayers.length)
			{
				jQuery(window).unbind("scroll.storyvideos");
			}
		}
	);
}

/**
 * Sets the current player as active. Pausing all other players
 */
function setActivePlayer(index)
{
	for(var i = 0; i < cnnPlayers.length; i++)
	{
		if(cnnPlayers[i] == index) { continue; }

		try { $('player'+cnnPlayers[i]).contentWindow.pausePlayer(); }
		catch(e){}
	}
}

/*
 * This test shows that when we unbind the scroll for video players, all other scroll bind events still run
 *
jQuery(window).bind("scroll", 
	function(event)
	{
		console.log("event 2");
	}
);
 */

jQuery.fn.scrollLeft=function(){if(this[0]==window||this[0]==document)return self.pageXOffset||jQuery.boxModel&&document.documentElement.scrollLeft||document.body.scrollLeft;return this[0].scrollLeft};
jQuery.fn.scrollTop=function(){if(this[0]==window||this[0]==document)return self.pageYOffset||jQuery.boxModel&&document.documentElement.scrollTop||document.body.scrollTop;return this[0].scrollTop};
jQuery.belowthefold=function(element, settings){var fold = jQuery(window).height() + jQuery(window).scrollTop();return parseInt(fold) <= parseInt(jQuery(element).offset().top);};
jQuery.rightoffold=function(element, settings){ var fold = jQuery(window).width() + jQuery(window).scrollLeft(); return parseInt(fold) <= parseInt(jQuery(element).offset().left);};