/*
 *	TomTom Challenge - Video page javascript
 *	(c) 2007 - Amgate
 *
 *	Uses prototype.js library - Load it first!
 *	If you change anything try to do it 'prototype way'.
 */

// Def variables
var mpp = 5; // Movies per page
var pw = 140; // Preview width
var ph = 155; // Preview height
var current_x = 0;
var in_effect = false;

// Find movie previews and add events
function scanMoviePreviews() {

	var movie_links = $$('img.video_image'); // Get all previews on page

	var hkeeper = $('video_hkeeper');
	if (hkeeper) {
		var wsize = movie_links.length * pw; // Recalculate size of preview panel
		hkeeper.style.width = (wsize) + 'px'; // Apply to it
		// Pages
		buildPages(movie_links.length);
	}

	movie_links.each(function(el) { // Make all previews clickable
		if (el.getAttribute('movieid')) {
			Event.observe(el, 'click', playMovie, false);
			el.style.cursor = 'pointer';
		}
	});

}

// Build pages
function buildPages(movies) {

	var pages = movies / mpp;

	if((movies % mpp) > 0) pages++;

	if(pages > 1) {

		var html = '<div style="float: right;">';
		var paginator = document.createElement('div');
		paginator.id = 'video_pages';
		$('container').appendChild(paginator);

		var i = 1;
		for(;i<=pages;i++) {
			html += '<a href="javascript:openPage('+i+');" title="Video page '+i+'">';
			html += '<img src="/images/video'+(i==1?'':'_not')+'_selected.png" alt="" />';
			html += '</a>';
		}

		html += '</div>';
		$('video_pages').update(html);

	}

}

function openPage(nr) {

	if (in_effect) return;

	var position = 0 - (nr-1)*mpp*pw;
	var temp_x = position;

	position -= current_x;
	current_x = temp_x;
	in_effect = true;

	// Effect
	new Effect.Move($('video_hkeeper'), { x: position, y: 0, afterFinish: resetEffect });
	// No effect
	//$('video_hkeeper').style.marginLeft = current_x + 'px';

	var im = $$('#video_pages a img');

	im.each(function(iob, inr) {
		iob.src = '/images/video'+((inr+1)==nr?'':'_not')+'_selected.png';
	});

}

function resetEffect() {
	in_effect = false;
}

// Play movie (takes clicked element id as video name)
function playMovie(evt) {

	var el = Event.element(evt);
	var md = document.getElementById('movie_description');

	if (el) {

		// Use video id to ensure the elements are unique even if the same video appears in the list more than once
		var movie_uri = el.getAttribute('movieuri');
		var movie_id = el.getAttribute('movieid');

		if (movie_id && md) {
			var vd = document.getElementById('movie_description_' + movie_id);
			if (vd) md.innerHTML = vd.innerHTML;
			else md.innerHTML = '';
			jQuery('#movie_description').jScrollPane({showArrows:true,scrollbarWidth:9});
		}

		if (movie_uri)
			playMovieByName(movie_uri);

	}

}

function playMovieByName(name) {

	// let op: wmode transparent zorgt dat de controls niet meer klikbaar zijn in Firefox en Safari!
	var movie = name;
	var video_holder = $('movie_player');
	var movieURL = '/images/movies/' + movie + '.flv';

	// Show player div
	video_holder.style.display = 'block';
	video_holder.style.zIndex = 80;

	var player = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="'+movie+'" width="420" height="238" align="middle">'
	player += '<param name="movie" value="/flvplayer/flv_player.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#55574C" />';
	player += '<param name="flashvars" value="movieId=' + movie + '&movieURL=' + movieURL + '" /><param name="movie" value="'+movie+'" /><param name="quality" value="high" /><param name="bgcolor" value="#55574C" />';
	player += '<embed src="/flvplayer/flv_player.swf" quality="high" bgcolor="#55574C" width="420" height="238" ';
	player += 'flashvars="movieId=' + movie + '&movieURL=' + movieURL + '" ';
	player += 'id="flv_player" name="flv_player" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
	player += '</object>';
	video_holder.update(player);

}

function playBannerMovie(container, movie, width, height) {

	var il = document.getElementById(container);
	if (il) {

		if (il.firstChild) il.removeChild(il.firstChild);

		var src = '/flvplayer/banner_player.swf?movieURL=/images/movies/' + movie + '.flv';
		var fle = document.createElement('EMBED');
		fle.setAttribute('quality', 'high');
		fle.setAttribute('wmode', 'transparent');
		fle.setAttribute('allowScriptAccess', 'sameDomain');
		fle.setAttribute('pluginspage', 'http://www.macromedia.com/go/getflashplayer');
		fle.type = 'application/x-shockwave-flash';
		fle.src = src;
		fle.width = width;
		fle.height = height;
		il.appendChild(fle);

	}

}

function flv_showFullscreen(movieName, movieURL) {
	window.open('/mod_scripts/flvplayer-1.0/fullscreen.php?movieName='+movieName+'&movieURL='+movieURL, 'flvplayer', 'resizable=yes,scrollbars=no,menubar=no,status=no,location=no,toolbars=no,top=0,left=0,fullscreen=yes,width='+screen.width+',height='+screen.height);
}

function loadEverything() {

	generateScrollDivs();
	scanMoviePreviews();
	scanMainNavigation();

	// Play "Who are TomTom" video on page load
	if ($('video_selection')) {
		$('movie_player').style.display = 'block';
		//if (start_movie) playMovieByName(start_movie);
	}

	if ($('video_search')) {
		Event.observe($('video_search'), 'submit', submitVideoSearch, false);
	}

}

function submitVideoSearch(event) {
	$('video_search').action = '/video/&search=' + $F('search');
}

function submitChallengeForm() {

	if($('tom_signup_display').className != 'ctrl_chk_checked') {
		alert('- Checkbox moet aangevinkt zijn');
	} else {
		$('challenge_form').submit();
	}

}

// On load
Event.observe(window, 'load', loadEverything, false);

function scanMainNavigation() {

	var overs = $$('#navigation a');

	overs.each(function(el) {

		if (el.id) {

			if(el.className == 'selected') {
				el.style.backgroundImage = 'url(/uri/?uri=' + el.id +')';
			} else {
				Event.observe(el, 'mouseover', showRollOver, false);
				el.style.cursor = 'pointer';
			}

		}

	});

}

function showRollOver(evt) {
	var el = Event.element(evt);
	Event.observe(el, 'mouseout', hideRollOver, false);
	el.style.backgroundImage = 'url(/uri/?uri=' + el.id +')';
	Event.stop(evt); // stop event
}

function hideRollOver(evt) {
	var el = Event.element(evt);
	Event.stopObserving(el, 'mouseout', hideRollOver);
	el.style.backgroundImage = '';
	Event.stop(evt); // stop event
}

// Scroll
function generateScrollDivs() {
	jQuery('.mainarticle').jScrollPane({showArrows:true,scrollbarWidth:9});
	//jQuery('#video_selection').jScrollPane({showArrows:true,scrollbarWidth:9});
}