/* Copyright 2010 Till Claassen (http://pixelistik.de/) */
$(document).ready(
	function(){
		$('.thumbnail img').supersleight();
		
		var params = { allowScriptAccess: "always" };
		var atts = { id: "ytplayer1" };
		swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer1", 
		       "player-inner", "255", "143", "8", null, null, params, atts);

		$("#player").fadeTo(3,0.01);
				
		$(".imagewrapper").click(function(){
			// Stop any automatic playing:
			//playingClass="";
			//playingIndex=null;
			play($(this).children('img'));
		});
		
		$("a.play-link").click(function(){
			$("a.play-link-active").removeClass("play-link-active");
			$(this).addClass("play-link-active");
		});
		
		//playingClass="";
		//playingIndex=0;
		
		/*($('#non-existent').prettyPhoto({
			theme:	'dark_square'
		});*/
		
		$('.thumbnail[title]').tipsy({
				gravity: 's',
				fade: false,
				html: true
		});
		
		$("#stop-player").click(function(){
			ytplayer.stopVideo();
		});
		
		
		$("#question-bar").scrollFollow({
		});
	
	}
);

function play(imgObject){
	playInline(imgObject);
	//playLightbox(imgObject);
	piwikTracker.setDocumentTitle(document.title+' / '+$(imgObject).attr("alt"));
	piwikTracker.trackPageView();
}
function playInline(imgObject){
	$("#player").fadeTo(0,0.01);
	$("#player").css("top",$(imgObject).offset().top-$("#player .player-bar").css("height").replace(/px,*\)*/g,""));
	$("#player").css("left",$(imgObject).offset().left-$("#player").css("padding-left").replace(/px,*\)*/g,"")-32);
	$("#titledisplay").text($(imgObject).attr("alt"));
	$("#player").fadeTo(800,1);
	ytplayer.loadVideoById(getVideoIdFromThumbnailUrl($(imgObject).attr("src")), 0,'small');
}

/*
function playLightbox(imgObject){
	var videoUrl='http://www.youtube.com/watch?v='+getVideoIdFromThumbnailUrl($(imgObject).attr("src"));
	$.prettyPhoto.open(videoUrl,'Peter Example','»Where do you see it in 1 year time?«');
}
*/
function onYouTubePlayerReady(playerId){
	ytplayer = document.getElementById("ytplayer1");
	ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
}

function onPlayerStateChange(newState){
//alert(newState);
	/* if(newState==0 && playingClass != ""){
		playingIndex++;
		current=$(playingClass+" img").get(playingIndex);
		// Check if we are over the last video:
		if(!current.attr("src")){
			playingClass="";
			playingIndex=0;
			$("a.play-link-active").removeClass("play-link-active");
		}else{
			play(current);
		}
	}*/
	
	// Only show player when really playing or loading:
	// show(), hide() does not work, causes swf unload...
	if(newState==1 || newState==3){
		$("#player").css("z-index",100);
		//$("#player").fadeTo(800,1);
		displayTimer=window.setInterval("refreshTimeDisplay()",1000);
	}else{
		$("#player").css("z-index",-1);
		$("#player").css("left",-300);
		$("#player").fadeTo(200,0.01);
		window.clearInterval(displayTimer);
	}
	// Play next video if we reached the end:
	/* if(newState==5){
		playingIndex++;
//FIXME		$('#ytplayer1')[0].loadVideoById(getVideoIdFromThumbnailUrl($(playingClass)[playingIndex].attr("src")), 0,'small');
		// Close any open lightbox:
		$.prettyPhoto.close();
	}
	*/
}

function refreshTimeDisplay(){
	// Display remaining time
	var duration=ytplayer.getDuration();
	var remainingSeconds=duration-ytplayer.getCurrentTime();
	var remainingMinutes=Math.floor(remainingSeconds/60);
	var remainingSeconds=Math.floor(remainingSeconds % 60);
	// Create leading zero
	if(String(remainingSeconds).length==1){
		remainingSeconds='0'+remainingSeconds;
	}
	$('#timedisplay').text('-'+remainingMinutes+':'+remainingSeconds);
}
/*
function startClassPlaying(theClass){
	// If it is already playing, stop it:
	if(theClass==playingClass){
		playingClass="";
		playingIndex=0;
		$("a.play-link-active").removeClass("play-link-active"); // ###
		$('#ytplayer1')[0].stopVideo();
	}else{
		playingClass=theClass;
		playingIndex=0;
		current=$(playingClass+" img").get(playingIndex);
		play(current);
	}
}
*/
function getVideoIdFromThumbnailUrl(url){
//	return(url.match(/[\\?\\&]v=([^\\?\\&]+)/)[1]);
	return(url.match(/http:\/\/img.youtube.com\/vi\/(\S*)\/[0,1,2].jpg/)[1]);
}

/*
Mehrere abspielen so:
Jedes td kriegt zwei classes: 1 für Spalte (A,B,C...) und 1 für Zeile (1,2,3,...)
Mit einer dieser classes als Selektor bekommt man dann alle tds einer Zeile/Spalte
In 2 globalen Variablen wird dann der momentan abzuspielende Selektor sowie der index des
aktuell laufenden Videos gespeichert, ist ein video vorbei, wird der nächste index aufgerufen. 

*/