/**
 * Isto só corre quando a página carrega
 * É aqui que entra o JAVASCRIPT para fazer o efeito de deslize dos elementos da página
 */
window.addEvent('domready', function() {
	
	/**
	 * Um vector com todos os lugares para os quais podemos viajar
	 */
	var myPlaces = new Array();
	
	myPlaces[0] = new Array();
	myPlaces[0]['x'] = 1291;
	myPlaces[0]['y'] = 541;
	myPlaces[0]['desc'] = "Sifriland";
	myPlaces[0]['visited'] = true;
	
	myPlaces[1] = new Array();
	myPlaces[1]['x'] = 1111;
	myPlaces[1]['y'] = 54;
	myPlaces[1]['desc'] = "Salt Tank";
	myPlaces[1]['visited'] = false;

	myPlaces[2] = new Array();
	myPlaces[2]['x'] = 1982;
	myPlaces[2]['y'] = 1299;
	myPlaces[2]['desc'] = "Styrofoam Building";
	myPlaces[2]['visited'] = false;
	
	myPlaces[3] = new Array();
	myPlaces[3]['x'] = 2017;
	myPlaces[3]['y'] = 775;
	myPlaces[3]['desc'] = "Chestnut Booth";
	myPlaces[3]['visited'] = false;
	
	myPlaces[4] = new Array();
	myPlaces[4]['x'] = 1393;
	myPlaces[4]['y'] = 1216;
	myPlaces[4]['desc'] = "Popcorn Room";	
	myPlaces[4]['visited'] = false;
		
	myPlaces[5] = new Array();
	myPlaces[5]['x'] = 52;
	myPlaces[5]['y'] = 852;
	myPlaces[5]['desc'] = "Mountain Moss";
	myPlaces[5]['visited'] = false;
		
	myPlaces[6] = new Array();
	myPlaces[6]['x'] = 167;
	myPlaces[6]['y'] = 1265;
	myPlaces[6]['desc'] = "Walnut Pool";
	myPlaces[6]['visited'] = false;
		
	myPlaces[7] = new Array();
	myPlaces[7]['x'] = 735;
	myPlaces[7]['y'] = 1043;
	myPlaces[7]['desc'] = "Fishionarium";
	myPlaces[7]['visited'] = false;
		
	myPlaces[8] = new Array();
	myPlaces[8]['x'] = 1956;
	myPlaces[8]['y'] = 38;
	myPlaces[8]['desc'] = "Stove House";
	myPlaces[8]['visited'] = false;
		
	myPlaces[9] = new Array();
	myPlaces[9]['x'] = 502;
	myPlaces[9]['y'] = 426;
	myPlaces[9]['desc'] = "Sear Basil";
	myPlaces[9]['visited'] = false;
		
	myPlaces[10] = new Array();
	myPlaces[10]['x'] = 421;
	myPlaces[10]['y'] = 2;
	myPlaces[10]['desc'] = "Giant Little Roses";
	myPlaces[10]['visited'] = false;	
	
		
	
	/**
	 * Um vector com todos os links que aparecem no documento e apontam para os nossos lugares
	 */
	var myLinks = new Array();
	var i = 0;

	/* LINKS DA PRIMEIRA IMAGEM */	
	myLinks[i] = new Array();
	myLinks[i]['x'] = 1360;
	myLinks[i]['y'] = 630;
	myLinks[i]['width'] = 140;
	myLinks[i]['height'] = 21;
	myLinks[i]['desc'] = "first day at the tank";
	myLinks[i]['link'] = 1;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1460;
	myLinks[i]['y'] = 766;
	myLinks[i]['width'] = 283;
	myLinks[i]['height'] = 31;
	myLinks[i]['desc'] = "after lunch";
	myLinks[i]['link'] = 2;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1706;
	myLinks[i]['y'] = 611;
	myLinks[i]['width'] = 83;
	myLinks[i]['height'] = 80;
	myLinks[i]['desc'] = "first day afternoon";
	myLinks[i]['link'] = 3;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1619;
	myLinks[i]['y'] = 735;
	myLinks[i]['width'] = 22;
	myLinks[i]['height'] = 62;
	myLinks[i]['desc'] = "first excited night";
	myLinks[i]['link'] = 4;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1500;
	myLinks[i]['y'] = 564;
	myLinks[i]['width'] = 83;
	myLinks[i]['height'] = 82;
	myLinks[i]['desc'] = "the big climbing";
	myLinks[i]['link'] = 5;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1353;
	myLinks[i]['y'] = 742;
	myLinks[i]['width'] = 105;
	myLinks[i]['height'] = 47;
	myLinks[i]['desc'] = "first time at the pool";
	myLinks[i]['link'] = 6;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1292;
	myLinks[i]['y'] = 656;
	myLinks[i]['width'] = 233;
	myLinks[i]['height'] = 47;
	myLinks[i]['desc'] = "second day after sunset";
	myLinks[i]['link'] = 7;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1600;
	myLinks[i]['y'] = 586;
	myLinks[i]['width'] = 49;
	myLinks[i]['height'] = 43;
	myLinks[i]['desc'] = "warming up after a freezing day";
	myLinks[i]['link'] = 8;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1303;
	myLinks[i]['y'] = 844;
	myLinks[i]['width'] = 136;
	myLinks[i]['height'] = 66;
	myLinks[i]['desc'] = "cheerless";
	myLinks[i]['link'] = 9;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1504;
	myLinks[i]['y'] = 844;
	myLinks[i]['width'] = 136;
	myLinks[i]['height'] = 66;
	myLinks[i]['desc'] = "filling the eyes with freshness";
	myLinks[i]['link'] = 10;





	/* LINKS DA IMAGEM 10 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 523;
	myLinks[i]['y'] = 92;
	myLinks[i]['width'] = 93;
	myLinks[i]['height'] = 110;
	myLinks[i]['desc'] = "second day after sunset";
	myLinks[i]['link'] = 7;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 592;
	myLinks[i]['y'] = 219;
	myLinks[i]['width'] = 276;
	myLinks[i]['height'] = 164;
	myLinks[i]['desc'] = "coming back home";
	myLinks[i]['link'] = 0;

	/* LINKS DA IMAGEM 9 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 639;
	myLinks[i]['y'] = 447;
	myLinks[i]['width'] = 78;
	myLinks[i]['height'] = 213;
	myLinks[i]['desc'] = "the big climbing";
	myLinks[i]['link'] = 5;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 759;
	myLinks[i]['y'] = 528;
	myLinks[i]['width'] = 78;
	myLinks[i]['height'] = 213;
	myLinks[i]['desc'] = "filling the eyes with freshness";
	myLinks[i]['link'] = 10;
	
	/* LINKS DA IMAGEM 7 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 852;
	myLinks[i]['y'] = 1187;
	myLinks[i]['width'] = 393;
	myLinks[i]['height'] = 59;
	myLinks[i]['desc'] = "warming up after a freezing day";
	myLinks[i]['link'] = 8;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 745;
	myLinks[i]['y'] = 1057;
	myLinks[i]['width'] = 79;
	myLinks[i]['height'] = 77;
	myLinks[i]['desc'] = "the big climbing";
	myLinks[i]['link'] = 5;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 736;
	myLinks[i]['y'] = 1278;
	myLinks[i]['width'] = 511;
	myLinks[i]['height'] = 73;
	myLinks[i]['desc'] = "comming back home";
	myLinks[i]['link'] = 0;
	
	/* LINKS DA IMAGEM 5 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 52;
	myLinks[i]['y'] = 871;
	myLinks[i]['width'] = 143;
	myLinks[i]['height'] = 161;
	myLinks[i]['desc'] = "first time at the pool";
	myLinks[i]['link'] = 6;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 289;
	myLinks[i]['y'] = 1030;
	myLinks[i]['width'] = 275;
	myLinks[i]['height'] = 182;
	myLinks[i]['desc'] = "second day after sunset";
	myLinks[i]['link'] = 7;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 239;
	myLinks[i]['y'] = 870;
	myLinks[i]['width'] = 185;
	myLinks[i]['height'] = 132;
	myLinks[i]['desc'] = "filling the eyes with freshness";
	myLinks[i]['link'] = 10;	
	
	/* LINKS DA IMAGEM 6 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 307;
	myLinks[i]['y'] = 1405;
	myLinks[i]['width'] = 243;
	myLinks[i]['height'] = 121;
	myLinks[i]['desc'] = "first excited night";
	myLinks[i]['link'] = 4;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 437;
	myLinks[i]['y'] = 1265;
	myLinks[i]['width'] = 243;
	myLinks[i]['height'] = 91;
	myLinks[i]['desc'] = "after lunch";
	myLinks[i]['link'] = 2;

	/* LINKS DA IMAGEM 4 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1453;
	myLinks[i]['y'] = 1394;
	myLinks[i]['width'] = 243;
	myLinks[i]['height'] = 91;
	myLinks[i]['desc'] = "first day afternoon";
	myLinks[i]['link'] = 3;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1414;
	myLinks[i]['y'] = 1234;
	myLinks[i]['width'] = 463;
	myLinks[i]['height'] = 111;
	myLinks[i]['desc'] = "first day at the tank";
	myLinks[i]['link'] = 1;
	
	/* LINKS DA IMAGEM 1 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1362;
	myLinks[i]['y'] = 94;
	myLinks[i]['width'] = 128;
	myLinks[i]['height'] = 133;
	myLinks[i]['desc'] = "after lunch";
	myLinks[i]['link'] = 2;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1122;
	myLinks[i]['y'] = 294;
	myLinks[i]['width'] = 488;
	myLinks[i]['height'] = 103;
	myLinks[i]['desc'] = "warming up after a freezing day";
	myLinks[i]['link'] = 8;
	
	/* LINKS DA IMAGEM 8 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 2176;
	myLinks[i]['y'] = 77;
	myLinks[i]['width'] = 88;
	myLinks[i]['height'] = 113;
	myLinks[i]['desc'] = "first excited night";
	myLinks[i]['link'] = 4;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 2086;
	myLinks[i]['y'] = 217;
	myLinks[i]['width'] = 218;
	myLinks[i]['height'] = 83;
	myLinks[i]['desc'] = "cheerless";
	myLinks[i]['link'] = 9;
	
	/* LINKS DA IMAGEM 3 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 2337;
	myLinks[i]['y'] = 829;
	myLinks[i]['width'] = 128;
	myLinks[i]['height'] = 109;
	myLinks[i]['desc'] = "cheerless";
	myLinks[i]['link'] = 9;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 2027;
	myLinks[i]['y'] = 889;
	myLinks[i]['width'] = 198;
	myLinks[i]['height'] = 159;
	myLinks[i]['desc'] = "first day at the tank";
	myLinks[i]['link'] = 1;

	/* LINKS DA IMAGEM 2 */
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 2192;
	myLinks[i]['y'] = 1609;
	myLinks[i]['width'] = 138;
	myLinks[i]['height'] = 79;
	myLinks[i]['desc'] = "first day afternoon";
	myLinks[i]['link'] = 3;
	
	myLinks[++i] = new Array();
	myLinks[i]['x'] = 2152;
	myLinks[i]['y'] = 1319;
	myLinks[i]['width'] = 248;
	myLinks[i]['height'] = 269;
	myLinks[i]['desc'] = "coming back home";
	myLinks[i]['link'] = 0;

	myLinks[++i] = new Array();
	myLinks[i]['x'] = 1982;
	myLinks[i]['y'] = 1299;
	myLinks[i]['width'] = 168;
	myLinks[i]['height'] = 209;
	myLinks[i]['desc'] = "first time at the pool";
	myLinks[i]['link'] = 6;




	// define a transição do conteudo
	var conteudoScroll = new Fx.Morph('o_conteudo', {
		duration: 2500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	// define a transição do fundo
	var fundoScroll = new Fx.Morph('o_fundo', {
		duration: 2500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	

	// define os objectos que vao ter o texto dos titulos e dos links
	var nomePagina = $('nome_da_janela');
	var nomePaginaFx = new Fx.Tween(nomePagina);
	var nomeLink = $('nome_do_link');
	var nomeLinkFx = new Fx.Tween(nomeLink).set('opacity', 0);
		
	
	
	
	// para cada um dos links
	myLinks.each(function(item){
		
		// cria um elemento do tipo 'a' posicionado relativamente dentro do documento
		var el = new Element('a', {
			'href' : '#',
			'title': item.desc,
			'styles' : {
				'position': 'absolute',
				'top': item.y,
				'left': item.x,
				'width': item.width,
				'height': item.height,
				'cursor': 'pointer',
				'z-index': 20
				
			}
		}).inject('o_conteudo');
		
		// cria um evento de click associado ao link que depois faz deslocar o ecra e o fundo
		el.addEvents({
			'click': function(){

				/* verifica a percentagem de sites visitados */
				myPlaces[item.link].visited = true;
				var visited = percentageVisited(myPlaces);
				controlBar(visited);

				/* cancela todos os efeitos que possam existir e desloca a janela para a nova posição */
				conteudoScroll.cancel();
				fundoScroll.cancel();
				conteudoScroll.start({
					'top': -1*(myPlaces[item.link].y),
					'left': -1*(myPlaces[item.link].x)
				});
				fundoScroll.start({
					'top': -1*(myPlaces[item.link].x)/5,
					'left': -1*(myPlaces[item.link].y)/5
				}).chain(function(){
					/* altera o nome da página quando chegamos ao destino */
					nomePagina.set('html', myPlaces[item.link].desc);
					
					/* verifica se todas as paginas foram visitadas e em caso afirmativo mostra a foca */
					if(visited==100) seaLion();					
				});
				
			},
			/* quando se passa o mouse em cima de um link é escrito na janela o nome desse mesmo link */
			'mouseover': function(){
				nomeLink.set('html', item.desc);
				nomeLinkFx.cancel();
				nomeLinkFx.start('opacity', 1);
			},
			/* quando se tira o mouse de cima de um link o texto apaga-se suavemente */
			'mouseout': function(){
				nomeLinkFx.cancel();
				nomeLinkFx.start('opacity', 0);
			}
			
			
			
		})
		
	})


		/**
		 * Checks the number of places we've visited and returns a percentage
		 * in case the percentage equals 100% calls the endgame function
		 * @param {Object} v
		 */
		function percentageVisited(v) {
			var total = v.length;
			var total_visited = 0;
			
			for(i=0; i<total; i++) {
				if(v[i].visited == true)
					total_visited++;
			}
			
			var percentage_visited = (total_visited-1)*100/(total-1);
			return percentage_visited;
		}
		
		/**
		 * Controls the percentage bar
		 */
		var meterFx = new Fx.Tween('progresso_metter', {'unit': '%', 'duration': 2500});
		function controlBar(value) {
			$('progresso_percentagem').set('html', value+'%');
			meterFx.start('width', value).chain(function(){
				if(value==100) {
					// no caso de termos o sealion activo espera que a barra chegue aos 100% para depois mudar de cor
					meterFx.start('background-color', '#FFFFCC');
				}
			});
		}
		
		/**
		 * Makes the sea-lion jump and shout
		 */
		var sealionStarted = false;
		var sealion = new Fx.Morph('sealion', {'duration': 2500});
		function seaLion() {
			var html = '<object width="640" height="505"><param name="movie" value="http://www.youtube.com/v/Chcc_Ci36Vw&hl=en_US&fs=1&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Chcc_Ci36Vw&hl=en_US&fs=1&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed></object>';
			if (sealionStarted == false) {
				/* começa a música */
				$('sealion_music').set('html', html);
				sealionStarted = true;
				
				// slide da foca para o ecrã
				sealion.start({
					'bottom' : 0,
					'right' : 0
				})
				
			}
		}
	
	
});