/* [/web/js/location.js] */

var Location = {
	items: null,
	current: 0,							// imagen mostrada actual
	
	config: {
		transitionDuration: 1,
		
		initWidth: 1000,
		initHeight: 378,
		/* zooms: new Array(1.2, 1.1, 1.25, 1.35, 1.5, 1.4), */
		zooms: new Array(1,1,1,1,1,1),
		windowWidths: new Array(40, 150, 250, 250, 150, 70),
		lefts: new Array(-290, -250, 1000, -1050, 1400, 2000),
		rights: new Array(1020, 1150, -250, 1250, -150, -500),
		/* speeds: new Array(7.5, 8, 11, 9, 11, 9), */
		/* speeds: new Array(15, 16, 22, 18, 22, 18), */
		speeds: new Array(2, 2.5, 3.1, 2.7, 3.1, 2.5),
		blur: new Array(1,1,1,1,1,1)
	},
	
	init: function() {
		Location.current  = 0;
		$$("#Contents .Loading")[0].setStyle({ "display" : "none" });
		
		Location.items = $$("#Contents .Image");
		
		Location.items.each(function(i) {
			if (!i.hasClassName("ImageBlur")) {
				i.setStyle({ 
					top: "0px", 
					left: "0px", 
					display: "block"
				});
				
				$(i.firstChild).setStyle({ 
					top: "0px", 
					left: "0px", 
					display: "block"
				});
				
				i.setOpacity(1);
			}
		});
	},
	
	start: function() {
		Location.init();
		if (!Location.items.length) return;

		Location.zoomWindows();
	},
	
	zoomWindows: function() {
		var container = $$(".Welcome .Zooms")[0];
		while(container.hasChildNodes()) { container.removeChild(container.firstChild); }
		
		Location.createWindows(container);
		Location.animateWindows(container);
	},
	
	createWindows: function(container) {
		for (var i=0; i<Location.config.zooms.length; i++) {
			var w = Location.config.initWidth * Location.config.zooms[i]; 
			var h = Location.config.initHeight * Location.config.zooms[i];
			
			var wWidth = Location.config.windowWidths[i];
			var pos =  Location.config.lefts[i];
			
			var zCnt = new Element('div', { 'class': 'zoomWindow' });
			zCnt.setStyle({ 
				'width': wWidth + 'px', 
				'top': ((Location.config.initHeight - h) / 2) + "px", 
				'left' : pos + "px" 
			});
			
			var left = (w - wWidth * Location.config.zooms[i]) * pos / (Location.config.initWidth - wWidth);
			var iBlur = new Element('img', { 'src' : Location.items[Location.current+Location.config.blur[i]].firstChild.src });
			iBlur.setStyle({
				'height': h + 'px',
				'width': w + 'px',
				'left': -left + 'px'
			});
			
			zCnt.appendChild(iBlur);
			container.appendChild(zCnt);
		}
	},
	
	animateWindows: function(container) {
		var transitions = new Array();
		
		var max = -1;
		for (var i=0; i<Location.config.zooms.length; i++) {
			Location.animateWindow(container.childNodes[i], i);
			if (max < Location.config.speeds[i]) {
				max = Location.config.speeds[i];
			}
		}
		
		setTimeout(function() { Location.afterImage(); }, max * 1000);
	},
	
	animateWindow: function(obj, i) {
		new WindowMove(obj, {
			initWidth: Location.config.initWidth,
			initHeight: Location.config.initHeight,
			zoom: Location.config.zooms[i],
			mode: 'absolute',
			
			x: Location.config.rights[i],
			duration: Location.config.speeds[i]
		});
	},
	
	
	afterImage: function() {
		// despues de mostrar el opaco, y el zoom, tengo q resizear y reposicionar la imagen
		// blureada, para dar pie al resto de la animación
		
		if (Location.current + 2 < Location.items.length) {
			new Effect.Parallel([
				new Effect.Move(Location.items[Location.current], {
					sync: true,
					y: Location.items[Location.current].getHeight(),
					mode: 'absolute'
				}),
				
				new Effect.Move(Location.items[Location.current].firstChild, {
					sync: true,
					y: -Location.items[Location.current].getHeight(),
					mode: 'relative'
				})
			], 
			{
				duration: Location.config.transitionDuration,
				afterFinish: function() {
					Location.current = Location.current + 2;
					Location.zoomWindows();
				}
			});
		} else {
			Location.current = 0;
			 
			Location.items[Location.current].setStyle({
				top: "0px",
				height: "1px"
			});
			
			Location.items[Location.current].firstChild.setStyle({
				top: "0px"
			});
			
			new Effect.Scale(Location.items[Location.current], Location.config.initHeight * 100, {
				scaleX: false,
				scaleContent: false,
				scaleTo: Location.config.initHeight * 100,
				duration: Location.config.transitionDuration,
				afterFinish: function() {
					Location.start();
				}
			});
		}
	}
};