// JavaScript Document
window.addEvent('domready', function() { initPlayer(); } );

function initPlayer(){
	if (document.getElementById('player') !== null) {
		
		title = (document.getElementById("player").title) ?  document.getElementById("player").title : function () {
			return (document.getElementById("player").attributes.getNamedItem("rel").value) ? document.getElementById("player").attributes.getNamedItem("rel").value : document.getElementById("player").title;
			} ();	
		
		if ($("player").attributes.getNamedItem("rel") != null) {
			title = $("player").attributes.getNamedItem("rel").value;	
		}
		else {
			title = "";
		}
		
		//href = (document.getElementById("player").href) ?  document.getElementById("player").href : document.getElementById("player").attributes.getNamedItem("href").value;

		$f.addPlugin("ticker", function(settings) { 
		
		// We need onStart, onStop, onPause, onResume, onBufferEmpty en onBufferFull eventlisteners.
		
		this.onStart(startCounting);
		this.onResume(resumeCounting);
		this.onBufferFull(resumeCounting);
		this.onBufferEmpty(pauseCounting);
		this.onPause(pauseCounting);
		this.onStop(pauseCounting);
		
		var fullDuration = -1;
		var lastTick = -1;
		var running = false;
		
		function getTick() {
			dt = new Date();
			lt = dt.getTime();
			return lt;
		}
		
		function startCounting(clip){
			fullDuration = clip.fullDuration * 1000;
			lastTick = getTick();
			running = true;
			sendTally();
			setTimeout(tick, 10000);
		}
		
		function resumeCounting(clip){
			running = true;
			lastTick = getTick();
			setTimeout(tick, 10000);
		}
		
		function pauseCounting(clip){
			running = false;
			sendTally();
		}
		
		function tick() {
		  if (running && (getTick() - lastTick) > 9500) {
			sendTally();
			setTimeout(tick, 10000);
		  }
		  else {
			  if(running) {
				  setTimeout(tick, 5000);
			  }
		  }
		}
		
		function sendTally() {
			timeSinceLastTick = getTick() - lastTick;
			lastTick = getTick();
			incPer = 100 * (timeSinceLastTick / fullDuration);
			
			var req = new Request({
								url: '/wm',
								data: {
										movieName: title,
										incrementalPercentage: incPer
								}							  
								});
			req.send();
		}
		
		return this; 
		});
		
		// the function above creates the ticker plugin. Underneath we instantiate the player, with different settings if a Movie title was given and when no Movie title was retrieved.
		
		  $('player').parentNode.style.backgroundImage = 'url(/assets/images/splashes/' + title + '.jpg)';
		  $('player').parentNode.style.backgroundRepeat = 'no-repeat';
		  
		  var req = new Request.JSON( {
							  url: "/getmovie",
							  method: 'post',
		 					  onSuccess: function(returnedObj){
								  href = returnedObj.streamUrl;
								  if ($('qualityToggle') != null) { 
								  $('qualityToggle').innerHTML = (href.indexOf(".mp4") == -1 ) ? 'Bekijk de video in <a href="javascript:toggleQuality(1)">Hogere Kwaliteit</a>' : 'Problemen met het afspelen van de video? Bekijk de video dan in een <a href="javascript:toggleQuality(-1)">Lagere Kwaliteit</a>';
								  }
								  startPlayer();
								  },
							  onFailure: function(xhr){alert('De video kan helaas niet geladen worden. Probeer het later nog eens.')},
							  data: {
								videoname: title  
							    }
							  } ).send();
		
		
		
		function startPlayer() {
			$f('player', {
			 src: '/static/files/flowplayer-3.1.5.swf',
			 wmode: 'transparent'
			 },
			 {
			 clip: {	
			  url: href,
			  scaling: 'fit',
			  autoPlay: false,
			  autoBuffering: false,
			  provider: 'pseudo',
			  bufferlength: 30
			 }, //clip
			 plugins: { 
			  pseudo: { 
				  url: '/static/files/flowplayer.pseudostreaming-3.1.3.swf'
			  }, //pseudo
			  animation: { 
				  url: '/static/files/flowplayer.animation.swf', 
				  movieTitle: title,
				  onContentUpdate: function(o) {
					  var htmlString = "Bron afbeelding: ";
					  if (o.sourceUrl != "") {
						htmlString += "<a href='"
						htmlString += o.sourceUrl;
						htmlString += "' target='_new'>"
						htmlString += o.imgSource;
						htmlString += "</a>";
					  }
					  else {
						  htmlString += o.imgSource;
					  }
					  $('sourceInfo').set('html', htmlString)
				  }
			  } // animation
			 } // plugins
			}).ticker(); // $f	
		} // startplayer
		
		
				
	} // if player != null
} // function


function toggleQuality(i) {
	var req = new Request({
						  url: '/setquality',
						  data: {
							videoquality: (i == -1) ? 'L' : 'H'  
						  },
						  onSuccess: function() {
							  var rf = confirm('De kwaliteitsinstelling voor de video\'s is aangepast. Voordat de wijziging effect heeft, is het nodig om de pagina te verseren. Als je op OK klikt, verversen wij de pagina voor je:')
							  	if(rf){
									location.reload(true);	
								}
							  },
						  onFailure: function() {
							alert('Het is helaas niet gelukt om de kwaliteitsinstelling voor uw video\'s te veranderen. Probeer het later nog eens. Houdt het probleem aan, neem dan contact op met ons via het e-mailadres info@theorie.tv');  
						  }
						  
						  }).send()
}



window.addEvent('domready', function(){initVerkeersborden();});

function initVerkeersborden(){
	if ($('roadsign-imgTablet') !== null)
	{
		$$('#roadsign-imgTablet img').addEvents({
				'mouseenter': function(e){
					e.stop();
					this.set('morph', {duration: 0, transition: 'linear'});
					this.morph({
							   'height': 100,
							   'margin-top': -25,
							   'margin-left': function($img){return (-$img.width / 2);} (this),
							   'z-index': 100,
							   position: 'relative'
							   });
				},
				'mouseleave': function(e){
					e.stop();
					this.set('morph', {fps: 50, duration: 300, transition: 'quint:out'});
					this.morph.delay(75, this, {
									 height: 50,
									 margin: 0,
									 'z-index': 1,
									 position: 'static'
									 });
				}
			}
		);
		
		var tooltips = new Tips($$('#roadsign-imgTablet img'), {
								 text: 'title',
								 title: 'rel',
								 showDelay: 25,
								 fixed: 'true',
								 offset: {x: -25, y:105},
								 hideDelay: 25
								 }
		);
	}
}


window.addEvent('domready', function(){initProgressToggle();});

function initProgressToggle(){
	
	if($('progressTableIdentifier') !== null) {
		
		
		$('progressTableExpandAll').addEvents({
											'click': function(e) {
												e.stop();
												if(this.collapse) {
													$$('div.progressDiv').slide('hide');
													this.collapse = false;
													this.innerHTML = '- open alle overzichten';
												}
												else {
													$$('div.progressDiv').slide('show');
													this.collapse = true;
													this.innerHTML = '- sluit alle overzichten';
												}
												
												}
											});
		$$('span.progressToggleLink').addEvents({
								'click': function(e){ 
											e.stop();
											
											var divToToggle = $("progressDiv" + (parseInt(String(this.id).slice(3)) + 1));
											//alert(divToToggle.id);
											
											divToToggle.slide('toggle');	
										  }
		}); 			  			 
	}
}