var FlexSpace = new Object();

// Static Properties
FlexSpace.fs_interval 			= 0;
	
// Instance Properties
FlexSpace.fs_xpos 				= 0;
FlexSpace.fs_dest_x 			= 0;
FlexSpace.fs_endScroll 			= false;
FlexSpace.fs_currentImg 		= 1;
FlexSpace.fs_activePosition		= 1;
FlexSpace.fs_timer 				= null;
FlexSpace.fs_scroll_timer		= null;
FlexSpace.fs_content 			= new Array();
FlexSpace.fs_lastVideoPlayedId	= -1;
FlexSpace.fs_TimeToFade 		= 0;
FlexSpace.fs_cardWaitTime		= 0;


FlexSpace.stopAutoPlay = function (){

	clearTimeout(this.fs_timer);
}

FlexSpace.onPlayVideo = function (p_val){
		
}

FlexSpace.doCheckVideoPlayer = function (p_val){
		
}

FlexSpace.doReplayVideo = function (val){

	if(this.fs_lastVideoPlayedId == val){
		return true;
	}else{
		return false;
	}
}

FlexSpace.pauseAutoPlay = function (){

	this.stopAutoPlay();
}

FlexSpace.resumeAutoPlay = function (){

	this.doStartAutoPlayTimer(this.fs_cardWaitTime);
}

FlexSpace.doStartAutoPlayTimer = function (p_msec){

	this.stopAutoPlay();
	this.fs_timer = setTimeout("FlexSpace.doAutoPlay()", p_msec);
}

FlexSpace.doAutoPlay = function (){
	
	this.fs_activePosition = (this.fs_currentImg <= 8) ? this.fs_currentImg+1 : 1;		
	this.fs_currentImg = (this.fs_currentImg <= 7) ? this.fs_currentImg+1 : 1;

	this.doMoveFlexSpace(this.fs_currentImg, true);
}

FlexSpace.doMoveFlexSpace = function (p_number, p_autoplay){
	
	var toPosition = (-386 * (p_number-1));
	
	this.fs_xpos = toPosition + 386;
	this.fs_dest_x = toPosition;
	this.fs_endScroll = false;
	
	if(p_autoplay && p_number != 1){
		this.doFSmoveImage(); 
	}else{
		this.doFade("flexspacecard");
		setTimeout("FlexSpace.onLastImg("+p_number+")",this.fs_TimeToFade)
	}
}

FlexSpace.doFSmoveImage = function (){

	var counter = this.fs_xpos + this.fs_interval;

	if(counter <= this.fs_dest_x){
		this.fs_xpos = this.fs_dest_x;
	}else{
		this.fs_xpos = counter;
	}

//	this.fs_xpos = ((this.fs_xpos + this.fs_interval) <= this.fs_dest_x) ? this.fs_dest_x : (this.fs_xpos + this.fs_interval);
	
	this.fs_endScroll = (this.fs_xpos == this.fs_dest_x) ? true : false;

	document.getElementById("flexspacecard").style.left = this.fs_xpos + "px";
	
	if (this.fs_endScroll) {
		this.onEndScroll(this.fs_activePosition);
	}else{
		this.fs_scroll_timer = setTimeout("FlexSpace.doFSmoveImage()",4);
	}
}

FlexSpace.onEndScroll = function (p_number){

	this.doWriteFlexSpaceCopy(p_number, this.fs_content[p_number-1].title, this.fs_content[p_number-1].description, this.fs_content[p_number-1].url);

	for(var i=1; i<=8; i++){
		if(i!=p_number){
			this.doRemoveHighlight("fs_slotnumber" + i);		
		}
	}

	this.doHighlight("fs_slotnumber" + p_number);
	
	this.fs_currentImg = p_number;

	if(this.fs_content[p_number-1].episodeId != null){
		this.onPlayVideo(this.fs_content[p_number-1].episodeId);
		this.fs_lastVideoPlayedId = this.fs_content[p_number-1].episodeId;
		this.stopAutoPlay();
	}else{
		this.doStartAutoPlayTimer(this.fs_cardWaitTime);
	}

}

FlexSpace.onLastImg = function (p_number){
		var toPosition = (-386 * (p_number-1))

		document.getElementById("flexspacecard").style.left = toPosition + "px";

		this.doFade("flexspacecard");
		this.onEndScroll(p_number);
}

FlexSpace.doFade = function (p_id){

	var element = document.getElementById(p_id);
	
	if(element == null)
	return;

	if(element.FadeState == null){
		if(element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1'){
			element.FadeState = 2;
		}else{
			element.FadeState = -2;
		}
	}
	
	if(element.FadeState == 1 || element.FadeState == -1){
		element.FadeState = element.FadeState == 1 ? -1 : 1;
		element.FadeTimeLeft = this.fs_TimeToFade - element.FadeTimeLeft;
	}else{
		element.FadeState = element.FadeState == 2 ? -1 : 1;
		element.FadeTimeLeft = this.fs_TimeToFade;
		setTimeout("FlexSpace.animateFade(" + new Date().getTime() + ",'" + p_id + "')", 33);
	}
}


FlexSpace.animateFade = function(lastTick, p_id){  
	
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;
	
	var element = document.getElementById(p_id);
	
	if(element.FadeTimeLeft <= elapsedTicks){
		element.style.opacity = element.FadeState == 1 ? '1' : '0';
		element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
		element.FadeState = element.FadeState == 1 ? 2 : -2;
		return;
	}
	
	element.FadeTimeLeft -= elapsedTicks;

	var newOpVal = element.FadeTimeLeft/this.fs_TimeToFade;

	if(element.FadeState == 1)
	newOpVal = 1 - newOpVal;
	
	element.style.opacity = newOpVal;
	element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
	
	setTimeout("FlexSpace.animateFade(" + curTick + ",'" + p_id + "')", 33);
}

FlexSpace.doBuildFlexSpaceData = function (p_obj){

	var o = new Object();

	o.episodeId		= (p_obj.fsVideoEpisodeId.length > 0) 	? p_obj.fsVideoEpisodeId 	: null;
	o.image 		= (p_obj.fsImageURL.length > 0) 		? p_obj.fsImageURL 			: "http://i.cdn.turner.com/toon/tools/img/flexspace.jpg";
	o.url 			= (p_obj.fsClickURL.length > 0) 		? p_obj.fsClickURL 			: "http://www.cartoonnetwork.com";
	o.title 		= (p_obj.fsTitle.length > 0) 			? p_obj.fsTitle 			: "";
	o.description 	= (p_obj.fsDescription.length > 0)		? p_obj.fsDescription 		: "";
	
	if(this.fs_content.length <= 7){
		this.fs_content.push(o);
	}

	if(this.fs_content.length == 8){
		this.doBuildSliderContent();
		this.doStartTransitions();
	}
}

FlexSpace.doBuildSliderContent = function (){

	for(var i = 0; i < this.fs_content.length; i++){					
		var content = "";
		
		if(this.fs_content[i].episodeId != null){
			content = "<div id='videoFlexSpace'></div>"; 
		}else{
			var jsStr = "javascript:FlexSpace.goCartoonNetworkURL('" + this.fs_content[i].url + "'); ClickMapTracking.sendClickMapTrack('hp_flexspace_cardNo" + (i+1) + "', 'prop14');";
			var hrefStr = 'href="' + jsStr + '"';			
			
			content = "<a " + hrefStr + " onmouseover='javascript:FlexSpace.pauseAutoPlay();' onmouseout='javascript:FlexSpace.resumeAutoPlay();'><img src='"  + this.fs_content[i].image + "' height='216' width='384' border='0'></a>"; 
		}		

		document.getElementById(("flexspacecard" +(i+1))).innerHTML = content;
	}

}

FlexSpace.init = function (){
	
	this.flexSpace 			= this;
	this.fs_xpos 			= 0;
	this.fs_dest_x 			= 0;
	this.fs_interval 		= -40;
	this.fs_endScroll 		= true;
	this.fs_currentImg 		= 1;
	this.fs_activePosition	= 1;
	this.fs_timer 			= null;
	this.fs_scroll_timer	= null;
	this.fs_content 		= new Array();
	this.fs_TimeToFade 		= 300.0;
	this.fs_cardWaitTime	= 4000;
	
}

FlexSpace.doStartTransitions = function (){

	this.doWriteFlexSpaceCopy("1", this.fs_content[0].title, this.fs_content[0].description, this.fs_content[0].url);

	if(this.fs_content[this.fs_activePosition-1].episodeId == null){
		this.doStartAutoPlayTimer(this.fs_cardWaitTime);
	}else{
		this.onPlayVideo(this.fs_content[this.fs_activePosition-1].episodeId);
		this.fs_lastVideoPlayedId = this.fs_content[this.fs_activePosition-1].episodeId;
		this.stopAutoPlay();
	}
	
	this.doHighlight("fs_slotnumber1");
}

FlexSpace.goCartoonNetwork = function (p_number){
	
	this.stopAutoPlay(); 
	this.fs_activePosition =  (p_number <= 8) ? p_number : 1;;		
	this.fs_currentImg = (p_number <= 7) ? p_number : 1;
	this.doWriteFlexSpaceCopy(p_number, this.fs_content[p_number-1].title, this.fs_content[p_number-1].description, this.fs_content[p_number-1].url);

	this.doMoveFlexSpace(p_number, false);
}

FlexSpace.goCartoonNetworkURL = function (p_url){
	location.href = p_url;
}

FlexSpace.showFlexspaceCards = function (p_show){
	
	document.getElementById("videoWrapper").style.zIndex = (p_show) ? "1" : "2";

}

FlexSpace.doWriteFlexSpaceCopy = function (p_number, p_title, p_descr, p_url){
	document.getElementById("fs_desc_number").innerHTML = p_number;
	document.getElementById("fs_desc_title").innerHTML 	= p_title;

	
	var jsStr = "javascript:FlexSpace.goCartoonNetworkURL('" + p_url + "'); ClickMapTracking.sendClickMapTrack('hp_flexspace_description" + p_number + "', 'prop14');";
	var hrefStr = 'href="' + jsStr + '"';
	
	document.getElementById("fs_desc").innerHTML 		= "<a " + hrefStr + " >" + p_descr + "</a>";
}

FlexSpace.doHighlight = function (p_highlightElement){
	document.getElementById(p_highlightElement + "a").className = "fs_uparrow_on";
	document.getElementById(p_highlightElement + "b").className = "fs_number_on";
	document.getElementById(p_highlightElement + "c").className = "fs_underline_on";
}

FlexSpace.doRemoveHighlight = function (p_removeHighlightElement){
	document.getElementById(p_removeHighlightElement + "a").className = "fs_uparrow";
	document.getElementById(p_removeHighlightElement + "b").className = "fs_number";
	document.getElementById(p_removeHighlightElement + "c").className = "fs_underline";
}