/**
 * JS: Index
 * @author Darío Ruellan <druellan@ecimtech.com>
 * @copyright ecimTech 2010
 */

var $mainevent;
var eventTimer;

$(function(){

	$mainevent = $("#mainevent");

	// ** MainEvent *******************************

	$(".article .background", $mainevent).one('load', function(){
		$(this).fadeIn("slow");
		// Perhaps Suprise Player
		if ( typeof( videoID ) != 'undefined' ) {
			surprisePlayer();
		}
	}).each(function() {
		if(this.complete) $(this).trigger("load");
	});

	$(".article .logo img", $mainevent).one('load', function(){
		$(this).fadeIn("slow");
	}).each(function() {
		if(this.complete) $(this).trigger("load");
	});

	// ** Multiple Events *******************************

	if ( $(".article", $mainevent).size() > 1 )
	{
		// Armamos botones de forma programática
		$("<a>")
		.bind("click", function(){
			eventLoop();
			return false
		})
		.attr("id", "nextfest")
		.attr("href", "#")
		.html('<img src=""><div class="arrow"></div><div class="timer"></div>')
		.appendTo($("#mainevent"));
		
		$(".article:first", $mainevent).addClass("active");
		$(".article:not(:first)", $mainevent).find(".indicator-left").hide();
		
		var id = $(".article:first", $mainevent).next().attr("rel");
		
		$("#nextfest img").attr("src", 'resources/'+id+'/card.png');
		eventLoopTimer();
		
		$mainevent.hover(function(){
			clearTimeout(eventTimer);
		}, function(){
			eventLoopTimer();
		})

	}

	// ** Cards ***********************************

	// Precarga bonita
	$("#cards .card img").one('load', function(){
		$(this).fadeIn("slow");
	}).each(function() {
		if(this.complete) $(this).trigger("load");
	});

	$("#cards a").hover(function(){
		$("img", this)
		.stop(true, true)
		.css({ zIndex: 11 })
		.animate({marginTop: -5, marginLeft: -10, width: 245}, "fast")
	}, function(){
		$("img", this)
		.css({ zIndex: 10 })
		.animate({marginTop: 0, marginLeft: 0, width: 227}, "slow")
	});

});


// ** Event Loop *********************************


function eventLoop()
{
	console.log("Starting loop");
	clearTimeout(eventTimer);
			
	var $active = $(".article.active", $mainevent);
	var $next = $active.next(".article");
	if ( !$next.size() ) $next = $(".article:first", $mainevent);

	var $nextNext = $next.next(".article");
	if ( !$nextNext.size() ) $nextNext = $(".article:first", $mainevent);

	var id = $nextNext.attr("rel");
	
	$( ".indicator-left", $active ).fadeOut("fast");
	
	$("#nextfest").fadeOut("fast", function(){
		$("img", this).attr("src", 'resources/'+id+'/card.png');
		$(".timer", this).css("width", 1);
		
		$next.addClass("next").show();
		
		$active.slideUp("slow", function(){
			$next.removeClass("next").addClass("active");
			$(this).removeClass("active");
			$("#nextfest").show("slow");
			$( ".indicator-left", $next ).show("slow");
			eventLoopTimer();
		});
	});
}

function eventLoopTimer()
{
	var $timer = $("#nextfest .timer");
	var position = $timer.width() + 1;
	
	$timer.css({ width: position });
	
	if ( position > 106 ) {
		eventLoop();
	}
	else
	{
		clearTimeout(eventTimer);
		eventTimer = setTimeout ("eventLoopTimer()", 100);
	}
}

// ** Suprise Player ***************************


function surprisePlayer() {
	// PreparePlayer
	var $target = $(".article:first", $mainevent);
	$target.append('<div id="mainevent-video"><div id="mainevent-player"></div></div>');
	
	// External link
	$("<a>")
	.attr("href", "#")
	.click (function(){ playerReactivate(); return false; })
	.addClass("btnplay")
	.hide()
	.html('<img src="images/mainevent_base_play.png">')
	.appendTo($("#mainevent"));

	// Indicator
	$("<div>")
	.attr("id", "mainevent-indicator")
	.hide()
	.appendTo($target);
	
	$("<div>")
	.attr("id", "mainevent-title")
	.hide()
	.appendTo($target);
	
	$("<a>")
	.addClass("external")
	.attr("href", "http://www.youtube.com/watch?v="+videoID)
	.attr("target", "_blank")
	.bind ("click", function(){ playerHide() })
	.appendTo($("#mainevent-indicator"));
	
	$("<a>")
	.addClass("stop")
	.attr("href", "javascript:void(1)")
	.bind ("click", function(){ playerHide() })
	.appendTo($("#mainevent-indicator"));

	$("<a>")
	.addClass("unmute")
	.attr("href", "javascript:void(1)")
	.bind("click", function(){
		if ( $(this).hasClass("unmute") )
			playerUnmute();
		else
			playerMute();
	})
	.appendTo($("#mainevent-indicator"));
	 
	var params = { allowScriptAccess: "always", wmode: "opaque" };
    var atts = { id: "mainevent-player" };
    swfobject.embedSWF(
    	"http://www.youtube.com/apiplayer?video_id="+videoID+"&version=3&enablejsapi=1&playerapiid=ytplayer", 
		"mainevent-player", "1030", "604", "8", null, null, params, atts);
}

function playerReactivate()
{
	$("#mainevent-player, #mainevent-video").show();
	$("#mainevent .btnplay").html('<img src="images/mainevent_base_loading.gif">').show("slow");
}

function onYouTubePlayerReady(playerId) {
	console.log("player ready. YTID: "+videoID);
	ytplayer = document.getElementById("mainevent-player");
	ytplayer.mute();
	ytplayer.addEventListener("onStateChange", "playerStatus");

	$("#mainevent .btnplay").html('<img src="images/mainevent_base_loading.gif">').show("slow");
	
	ytplayer.playVideo();
	console.log(ytplayer);
}

function playerStatus(state) {

	console.log("Checking player state and its: "+state);

	if ( state == 1 && !$("#mainevent-video").hasClass("active") ) {
		playerReveal();
	}
	if ( state == 0 ) {
		playerHide();
	}
}

function playerReveal() {
	console.log("Revealing Player");
	$("#mainevent .btnplay").hide("fast");
	$("#mainevent-indicator").show("fast");
	$("#mainevent .background").slideUp("slow", function(){
		$("#mainevent-video")
		.addClass("active");
	});
}

function playerHide() {
	console.log("Enought with the player!");
	playerMute();
	ytplayer.stopVideo();

	$("#mainevent-indicator").fadeOut();
	$("#mainevent .background").slideDown("slow", function(){
		$("#mainevent .btnplay")
		.html('<img src="images/mainevent_base_play.png">')
		.show("slow");
		$("#mainevent-video").removeClass("active").hide();
	});
}


function playerMute() {
	$("#mainevent-indicator .mute").removeClass("mute").addClass("unmute");
	ytplayer = document.getElementById("mainevent-player");
	ytplayer.mute();
}

function playerUnmute() {
	$("#mainevent-indicator .unmute").removeClass("unmute").addClass("mute");
	ytplayer = document.getElementById("mainevent-player");
	ytplayer.unMute();
}