//______________________________ init ______________________________

window.addEvent('domready', init);

// define globals
var 	  levelTransition
		, repsonseContainer
		, htmlDataReq
		, pageTracker
		;

var debug = true;
var skipFilm = false;

// --- load page

function init() {

	if (window.location.href.indexOf('#skipFilm') != -1)
		skipFilm = true;

	// setup transition
	levelTransition	= new Fx.Tween('content', {
		duration: 1000,
		transition: 'linear'
	});
	
	levelTransition.addEvent('complete', function(){
		$('content').getChildren().each(function(el){
			var disp = (el.retrieve('level') == currentLevel) ? 'block' : 'none';
			el.setStyle('display', disp);
			//el.setStyle('position', pos);
		});
	});
	
	pageInit();
	
	return true;
		
}



var player = null;
function loadPlayers() {
	
	if (!checkFlash('9', '0'))
		return;
	
	var fContainer = $('flashContainer');

	al = (skipFilm) ? "false" : "true";
	player = $(new Swiff('./player/bb.swf', {
	    id: 'flashController',
	    width: "100%",
	    height: "100%",
	    params: {
	        wMode:				'transparent',
	        allowScriptAccess:	'always',
		 	allowFullscreen:	'true',
	        windowless:			'true'
	        
	    },
	    vars: {
			autoLoad: al,
			subtitleFile: lang['subtitleFile']
	    }
	    
	}));
	
	fContainer.empty().adopt(player);
	maximizePlayer();

	jsReady = true;
}

function checkFlash(version, build) {
	
	if (Browser.Plugins.Flash.version > version) return true;
	if (version == Browser.Plugins.Flash.version && Browser.Plugins.Flash.build >= build) return true;
		
	$('bb_text').set('html', lang['latestFlash']);
	$('bb_text').setStyle('cursor', 'default');
	
	return false;
}


var jsReady = false;
function isReady() {
	return jsReady;
}

function sendToActionScript(value) {
	Swiff.remote(player, "sendToActionScript", value);
}
 


// --- load levels (just project for now)

var currentLevel;
var currentElm;
function setLevel(level) {
	
	currentLevel = level;
	
	currentElm = $('level_' + currentLevel);
	currentElm.setStyle('display', 'block');
	
	currentElm.fade(1);
	
	//var left = currentLevel * -(window.getSize().x);
	//levelTransition.start('left', left);
	
}

function prevLevel() {
	if (currentLevel <= 0) setLevel(0);
	else setLevel(currentLevel - 1);
}

var projectLoaded = false;
/**
 * flash callback: used when focused on flash, load project
 */
function loadProject() {
	
	if (projectLoaded) {
		playAgain();
	} else {
		loadLevel(1);
		pageTracker._trackPageview('/project');
	}
	projectLoaded = true;	
	
}


var 	  itemId 
		, currentStep
		, loadLevelId
		;
		
function loadLevel(level) {
	
	itemId 		= 1; 
	currentStep	= 0; 
	loadLevelId = level;
	
	if ($('level_' + loadLevelId))
		setLevel(loadLevelId);
	else
		loadLevelEvents();
	
}


function loadLevelEvents() {
	
	currentStep++;

	switch (currentStep) {
		
		case 1:

			// - fade out current
			trace("> loadLevelEvents 1: fade out");
			
			currentElm.set('tween', {onComplete: function() {loadLevelEvents()}}).fade(0);
			
			break;			
			
		case 2:

			// - load project html
			trace("> loadLevelEvents 2: load project html");
			
			// add repsonse container
			repsonseContainer = new Element('div', {
				id: ('level_' + loadLevelId), 
				'class': 'level'
			});
			repsonseContainer.store('level', loadLevelId);
			repsonseContainer.fade('hide');
			
			$('content').adopt(repsonseContainer);		
			
			// load level data
			htmlDataReq = new Request.HTML({
									url: './templates/' + lang['tplDir'] + 'bb.tpl',
									update: repsonseContainer
								});
			htmlDataReq.addEvent('success', loadLevelEvents);
			htmlDataReq.get();
			
			break;			
			
		case 3:

			// - fade in
			trace("> loadLevelEvents 3: fade in");

			setLevel(loadLevelId);
			$('frontpage').setFocus();

			if (skipFilm)
				loadEcho();
			
			break;
	
	}
	
}


// --- player callbacks

function checkResults(bw, speed) {
	bw = Math.round(bw);
	trace('> checkResults / bw: ' + bw + ' / speed: ' + speed);
	pageTracker._trackEvent('FlvPlayer', 'bandwidth', '', bw);
	pageTracker._trackEvent('FlvPlayer', 'speed', '', speed);
}

function setQuality(set, value) {
	trace('> setQuality: ' + set + ' / ' + value);
	pageTracker._trackEvent('FlvPlayer', 'quality', set, value);
}

var videoStarted = false;
/**
 * flash callback: video start
 */
function startPlayer() {

	trace('> flash callback: start player');
	
	currentElm.fade(0);
	
	videoStarted = true;
	videoPlayed = false;
	
	pageTracker._trackEvent('FlvPlayer', 'startPlayer');
	
}

/**
 * flash callback: user pressed escape button
 */
function closePlayer() {

	trace('> flash callback: player closed');
	
	if (videoPlayed) {
		return; //video already finished
	}

	trace('> player interrupted');
	pageTracker._trackEvent('FlvPlayer', 'playerInterrupted');
	
	//window.focus();	
	playAgain();
	
	currentElm.set('tween', {duration: 1000}).fade(1);
	
}

var videoPlayed = false;
/**
 * flash callback: video complete
 */
function videoCompleted() {

	trace('> flash callback:  video completed');

	videoPlayed = true;
	loadEcho();	

	pageTracker._trackEvent('FlvPlayer', 'videoCompleted');
	
}

function playAgain() {
	
	trace('> play again');
	
	if (!videoPlayed && !videoStarted)
		return;
	
	
	if (videoPlayed) {
		unloadMenu();
		unloadShortcuts();
	}
	
	var action = (videoPlayed) ? lang['againMovie'] : lang['resumeMovie'];

	// - show play again (hack)
	$('shortcuts').set('html', '<li class="playShortcut">play <img src="images/bb/spacebar.png" alt="[space]" /></li>');
	$('results').set('html', '<div id="frontpage" class="result"><div class="message"> ' + lang['playAgain'] + action + '</div></div>');
	$('resultsNum').empty();
	
}


// --- load echo page

function loadEcho() {
	
	trace('> load echo');
	
	
	// enable menu
	loadMenu();
	
	// enable shortcuts
	loadShortcuts();
	
	// load data
	setResultsFilter('echo');
	
	// focus on window
	window.focus();
	(function() {$('flashController').blur()}).delay(500);
	
	// fade in
	trace('> fade in');
	(function() {currentElm.set('tween', {duration: 1000}).fade(1)}).delay(1500);
	
}

function loadMenu() {
	
	trace('> load menu');
	
	// - play movie again
	var coordinates = $('bb_logo').getCoordinates();
	positionPlayer(
		{x: coordinates.left, 
			y: coordinates.top 
		}, {
			x: coordinates.width, 
			y: coordinates.height 
		}
	);
	
	$('flashContainer').addEvent('click', playAgain);
	
	// - make menu visible
	$('filters').setStyle('display', 'block');
	$('playAgain').setStyle('display', 'block');
	
	// - load tool tips
	var customTips = $$('.tooltip');
	var toolTips = new Tips(customTips, {
		offsets: {
			'x': 30,       //default is 16
			'y': 10        //default is 16
		},
	 	fixed: false,
		onShow: function(toolTipElement){
	    	toolTipElement.fade(1);
	    	var fadeOut = function () {toolTipElement.fade(0)};
	    	fadeOut.delay(3000);
		},
		onHide: function(toolTipElement){
	    	toolTipElement.fade(0);
		}
	});

	// update language switch url
	var link = $('info').getElement('a[href^=?l]');
	link.href = link.href + "#skipFilm";
	
}

function unloadMenu() {
	
	$('filters').setStyle('display', 'none');
	$('flashContainer').removeEvent('click', playAgain);
	
	maximizePlayer();
	
}


// --- page controls

function positionPlayer(origin, size, _margin) {

	if (!_margin)
		_margin = 0;

	$('flashContainer').setStyles({
		top		: origin.y,
		left	: origin.x,
	    width	: size.x,
	    height	: size.y,
	    margin	: _margin
	});
	
}


function maximizePlayer() {
	
	var size = window.getSize();
	var mm = $('mainMenu').getSize();

	size.y -= mm.y;
	positionPlayer({x: 0, y: mm.y}, size);
	
}


var resultFilter;
var currentFilter = false;
var setResultsFilter = function () {

	trace('> set filter: ' + arguments[0]);
	resultFilter = arguments[0];
	getResults();
	
	if (currentFilter) {
		currentFilter.removeClass('selected');
	}

	var filterLink = $('filter_' + resultFilter);
	if (filterLink)
		filterLink.addClass('selected');
	

	currentFilter = filterLink;
	
}


var showDiv  = function (el) {
	
	var div = $(el);
	div.setStyle('display', 'block');	
	div.setFocus();

	customOnBlur = (function () { this.setStyle('display', 'none');	}).bind(div);
	
}

var hideDiv  = function (el) {
	
	var div = $(el);
	div.setStyle('display', 'none');
	
	// set focus on results
	$$('#results div.result').setFocus();
	
}


function addCustomElementKey(key) {
	trace('> addCustomElementKey: ' + key);
	$$('#results div.result').addClass('key:' + key);
}

var resultsReq, currentReqHash;
function getResults(n) {

	if (!resultsReq)
		throw 'resultsReq not set';

	if (!n) n = 0;
	
	trace('> getResults / page: ' + n );
	pageTracker._trackPageview('/' + resultFilter + '#' + n);
	currentReqHash = resultFilter + "_" + n;

	// don't use cache in debug mode
	if (!debug && responseCache[currentReqHash]) {
		trace(' - use cache');
		eval(responseCache[currentReqHash]['js']);
		resultsResponse(responseCache[currentReqHash]['tree'], responseCache[currentReqHash]['elements'], responseCache[currentReqHash]['html'], responseCache[currentReqHash]['js']);
		
		return;
	}

	$('loadingResults').setStyle('display', 'block');

	resultsReq.cancel();
	resultsReq.get({'filter[tag]': resultFilter, 'n': n});
	
}

var responseCache = new Array();
var	resultsReady, resultsBeforeLoad = false;
var currentResultsNr = 0;
var currentNumResults, resultsNr, numResults;
function resultsResponse(responseTree, responseElements, responseHTML, responseJavaScript) {

	trace('> resultsResponse');

	resultsBeforeLoad = false;
	resultsReady = false;
	
	// - get results numbers
	if (responseJavaScript) {
		try {
			eval(responseJavaScript);
		} catch(e) {
			trace('--- ERROR in responseJavaScript')
		}		
	}

	if ($chk(resultsNr) && $chk(numResults)) {
		currentResultsNr		= resultsNr;
		currentNumResults 		= numResults;
	} else {
		currentResultsNr		= 0;
		currentNumResults 		= 0;		
	}
	
	var resultsNum = 	(currentNumResults == 1) ? '' :
						((currentNumResults > 0) ? (currentResultsNr + 1) + "/" + currentNumResults : "geen resultaten gevonden");

	if (typeof resultsBeforeLoad == 'function') resultsBeforeLoad();

	$('resultsNum').set('html', resultsNum);
	$('loadingResults').setStyle('display', 'none');	
	
	var r = $('results');
	
	if (!responseHTML) {
		trace('--- WARNING no html response');
		r.set('html', '');
		return;
	}
	
	// - insert responseHTML
	r.set('html', responseHTML);
	
	// - run method when results loaded, but before focus set to be able to add custom element shortcuts
	if (typeof resultsReady == 'function') resultsReady();
	
	// - set focus on first picture
	setFirstResponder('results');
	
	// - cache response
	if (!responseCache[currentReqHash])
		responseCache[currentReqHash] = new Hash({
			'tree': responseTree, 
			'elements': responseElements, 
			'html': responseHTML, 
			'js': responseJavaScript
		});
	
}


var browseResults = function(i) {
	
	if ($type(currentItem) != 'element') return;
	var maxItem = currentNumResults - 1;
	
	if (i < 0) {
		if (currentResultsNr <= 0) return;
		browseTo = currentResultsNr - 1;
	} else {
		if (currentResultsNr >= maxItem) return;		
		browseTo = currentResultsNr + 1;
	}
	
	getResults(browseTo);
	
}

var browseAttachments = function(i) {
	
	if ($type(currentItem) != 'element') return;
	
	var browseTo = (i < 0) ? currentItem.getPrevious(".attachment") : currentItem.getNext(".attachment");
	
	if (browseTo) { 
		browseTo.setFocus();
	}
}

//--- 
 
var selectLevel = function() {

	setFirstResponder(arguments[0]);
	
}

function setFirstResponder(t) {
	
	trace('> setFirstResponder: ' + t);

	target = $(t);
	if (!target) return;
	
	var firstResponder = target.getFirst();
	firstResponder.setFocus();
	
}

function loadImage(filename) {

	trace('> loadImage: ' + filename);

	var i = new Element('img', {
		'src': filename
	});
	
	var v = $('viewImage');
	
	v.empty();
	v.adopt(i);

}


// --- vraag / antwoord

var bbQuestions = new Hash();
function loadAnswer() {
	trace('> loadAnswer');

	var resultDiv = $$('.result')[0];
	if (!resultDiv) {
		trace('no result element found');
		return;
	}

	var textEl = resultDiv.getElement('textarea');

	if (!textEl) {
		trace('no text element found');
		return;
	}

	if (bbQuestions.has(textEl.name)) {
		textEl.set('value', bbQuestions.get(textEl.name).get('answer'));
	}

	var question = resultDiv.getElement('.title').get('text');

	//if (question == '' || question == ' ')
	//	resultDiv.addEvent('focus', );

	if (question == '' || question == ' ')
		loadCustomQuestion(resultDiv);

	(function() { try { this.focus(); } catch(e) {} } ).delay(200, textEl); // fixed an IE bug with a delay

}

function loadCustomQuestion(resultDiv) {
	trace('> loadCustomQuestion');

	var currentId = resultDiv.id;
	var customQuestionId = 'interview[' + (currentId - 1) + '][answer]';

	var question = (bbQuestions.has(customQuestionId) && bbQuestions.get(customQuestionId).get('answer') != '') ?
		bbQuestions.get(customQuestionId).get('answer') :
		lang['noAnswer'];
	
	resultDiv.getElement('.title').set('text', question);
	resultDiv.getElement('input[type="hidden"]').set('value', question);

}

function saveAnswer() {
	trace('> saveAnswer');

	var resultDiv = $$('.result')[0];

	var textarea = resultDiv.getElement('textarea');
	if (!textarea) return;

	var title = resultDiv.getElement('.title');
	if (!title) return;

	// validate answer
	var answer = textarea.get('value').trim();
	if (!bbQuestions.has(textarea.name) && answer == '')
		return;

	// local store
	var q = new Hash({
		'question': title.get('text'),
		'answer': answer
	});
	bbQuestions.set(textarea.name, q);
	trace('  - question: ' + q.get('question'));
	trace('  - answer: ' + q.get('answer'));
	
	// server side store
	resultDiv.send('functions/setData.php');

}

function displayAnswers() {
	
	trace('> displayAnswers');

	outputEl = $('answers');
	if (!outputEl) return;

	var output = '';
	bbQuestions.each(function(q) {
		if (!q.has('answer') || q.get('answer') == '')
			return;
		output += '> ' + q.get('question') + '\n';
		output += q.get('answer');
		output += '\n\n';
	});

	outputEl.set('text', output);
	$('sendTo').focus();
	
	// submit key
	addCustomElementKey('sendAnswers');

	// toggle answers div
	addCustomElementKey('showAnswers');

}

var sendAnswersData = function () {
	trace('> sendAnswersData');

	// validate email
	var email = $('sendTo').get('value');
	var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	if (email == '' || !emailPattern.test(email)) {
		$('sendTo').setStyle('background-color', '#FBE2E2');
		return false;
	}
	
	// send only one email
	removeItemShortcut('sendAnswers');
	setStatus(lang['sending']);

	// submit form
	var form = $('answersForm');
	new Request.JSON({
		url: form.get('action'),
		onComplete: answerSent
	}).send(form.toQueryString());

	$('sendTo').set('disabled', 'disabled');
	
	return false;
};

function answerSent(response) {
	trace('> answerSent');
	trace(response);

	if ($chk(response.msg) && $chk(response.status))
		setStatus(response.msg, response.status);
	else
		trace('--- ERROR invalid server response');
}

function setStatus(msg, status) {
	trace('> setStatus: ' + msg);
	
	var statusDiv = $('status');
	if(!statusDiv) { // add status div
		statusDiv = new Element('div', {
			'id': 'status'
		});
		$('answersForm').adopt(statusDiv);
	}

	if ($chk(status)) {
		var c = (status == '1') ? 'success' : 'failure';
		statusDiv.set('class', c);
	}

	// set status
	statusDiv.set('text', msg);

}

function trace(msg) {
	if (!debug)
		return;

	if (typeof(console) == 'undefined')
		return;

	if ($type(msg) == 'string')
		console.log(msg);
	else
		console.dir(msg);
}