function Fader(){
	//Fades whole body
	var me = this;
	me.zindex = 1000;
	
	me.animate = function(){
		me.content.animate({
			opacity:1,
		}, 250, function(){
		});
	}
	
	me.close = function(){
		me.content.animate({
			opacity:0,
		}, 250, function(){
			$(this).remove();
		});
	}
	
	me.init = function(){
		me.content = $(document.body).find('#Fader');
		if(me.content.length <= 0){
			me.content = $('<div ID="Fader"></div>').appendTo(document.body);
		}
		me.content.css({
			height:"100%",
			width:"100%",
			position:"fixed",
			backgroundColor:"black",
			top:0,
			left:0,
			opacity:0,
			zIndex:me.index,
		});

	}
	//me.init();
}

function TableVideoPlayer(t){
	//t is the hover a
	var me = this;
	var tdIndex = $(t).parent().parent().parent().index();
	var trIndex = $(t).parent().parent().parent().parent().index();
	var index = String(trIndex) + String(tdIndex);
	
	
	me.animate = function(){
		//Get the goal width and height, which is the entire width and height of the CGrid
		var grid = $('#CGrid');
		var gridPos = grid.offset();
	
		me.fader.animate();
	
		me.content.animate({
			opacity:1,
			top:gridPos.top,
			left:gridPos.left,
			height:grid.height(),
			width:grid.width(),
		}, 200, function(){
			var t = $(this);
			//Now put in the video player
			t.append(
				$('<div class="TVPContainer"></div>')
				.html(''
					+'<a class="TVPCHolder"'
					+'href="'+me.getVideo()+'"'
					+'id="'+me.getId()+'"> '
					+'</a>')
			);
			flowplayer(me.getId(), {
				'src':"/flowplayer/flowplayer-3.2.7.swf",
				width:900,
				height:(900*(3/4)),
			});
			
			
		});
	}
	
	me.getVideo = function(){
		return t.parent().parent().attr("href");
	}
	
	me.getId = function(){
		return "VCPlayer"+index;
	}
	
	me.close = function(){
		me.fader.close();
		me.content.fadeOut(250, function(){
			$(this).remove();
		});
	}
	
	me.init = function(){
		//Find me.content
		me.content = $('#TableVideoPlayer'+index);
		if(me.content.length <= 0){
			me.content = $('<div ID="TableVideoPlayer'+index+'" class="TableVideoPlayer"></div>')
			.appendTo(document.body);
		}
		//At first, it should be positionedat the same place as the related CGTLink.
		var link = t.parent().parent();
		var linkPos = link.offset();
		
		me.content.css({
			position:"absolute",
			top:linkPos.top,
			left:linkPos.left,
			width:link.width(),
			height:link.height(),
			backgroundColor:"black",
			opacity:0,
			zIndex:1000,
		})
		.click(function(){
			me.close();
			
		});
		
		//Now the close button
		me.content.append(
			$('<a class="TVPClose" href="">Close [x]</a>')
			.click(function(){
				me.close();
				return false;
			})
		);
		
		//Now the fader for the background
		me.fader = new Fader();
		me.fader.zindex=900;
		me.fader.init();
		me.fader.content.click(function(){
			me.close();
		});
		
		me.animate();
		
	}
	
	me.init();
}

$(document).ready(function(){
	$('.CGTLink').each(function(){
		var t = $(this);
		t.hover(function(){
			//mouse over
			var t = $(this);			
			var hoverDiv = t.find('.CGTLHover');
			if(hoverDiv.length <= 0){
				var clickVid = $('<a href=""><img src="images/viewVid.png"></a>')
				.click(function(){
					//This will show the video.
					var t = $(this);
					new TableVideoPlayer(t);
					
					return false;
				})
				.append('<p>Watch the trailer<Br>"'+t.find('IMG').attr("alt")+'"</p>');
				
				hoverDiv = $('<div class="CGTLHover"></div>')
				.css({
					position:"absolute",
					top:0,
					left:0,
					width:"100%",
					height:"100%",
					backgroundColor:"rgb(0,0,0)",
				})
				.append(clickVid)
				.appendTo(t.css({ position:"relative" }))
				.hide();
			}
			hoverDiv.show();
		},function(){
			var hoverDiv = t.find('.CGTLHover');
			hoverDiv.hide();
		});
	});
});