// =============================================================
// script by Gerard Ferrandez | October 18, 2009
// Design by Gabriel Uribe    | http://www.gabrieluribe.com/
// ----------------------------------------------------------
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot
// work licensed under CC-BY-NC - Do not remove this notice
// =============================================================



//////////////////////////////////
// ==== Tweens mini-engine ====
// Gerard Ferrandez
// http://www.dhteumeuleu.com
// last update: Oct 10, 2009
// Licensed under CC-BY-NC
//////////////////////////////////

var tweens = {
	tweens: [],
	nbTweens: 0,
	/* ==== add new tween ==== */
	add : function (obj, params) {
		var self = this,
		    objList = [],
		    objReturn = [];
		/* ---- animation loop ---- */
		var anim = function () {
			var i = -1, o;
			/* ---- for each tween ---- */
			while( o = self.tweens[++i] ) {
				var cTime = (new Date() * 1) - o.start;
				if (cTime < o.timeframe) {
					/* ---- for each property ---- */
					for (var k in o.val) {
						/* ---- ease ---- */
						var m = o.val[k];
						/* ---- css update ---- */
						o.obj[k] = Math.round(o.ease(m.from, m.to, cTime / o.timeframe)) + 'px';
					}
				} else {
					/* ---- animation end ---- */
					for (var k in o.val) {
						var m = o.val[k];
						o.obj[k] = Math.round(m.from + m.to) + 'px';
					}
					/* ---- remove tween and finish ---- */
					self.tweens.splice(i, 1);
					self.nbTweens--;
					if (o.onFinish) o.onFinish (o.params);
					self.stop();
				}
			}
		};
		/* ---- init tween ---- */
		if (typeof obj == "string" || !obj.length) objList.push(obj); else objList = obj;
		for (var il = 0, l = objList.length; il < l; il++) {
			var obj = document.getElementById(objList[il]) || objList[il];
			var o = {};
			o.val = {};
			o.obj = obj.style;
			/* ---- for each parameter ---- */
			for (var k in params) {
				var p = params[k];
				if (k === "init") {
					/* ---- init properties ---- */
					for (var i in p) o.obj[i] = Math.round(p[i]) + 'px';
				} else if (k === "target") {
					/* ---- set targets ---- */
					for (var i in p) {
						var from = parseInt(o.obj[i]) || 0;
						o.val[i] = {
							from: from,
							to: p[i] - from
						};
					}
				} else o[k] = params[k];
			}
			/* ---- default easing method ---- */
			if (!o.ease) o.ease = this.inOut;
			/* ---- queueing tween ---- */
			if (o.duration) {
				o.start = new Date() * 1;
				o.end = o.start + o.duration;
				o.timeframe = o.end - o.start;
				this.tweens.push(o);
				/* ---- start engine ---- */
				this.nbTweens++;
				if (!this.running) this.running = window.setInterval(anim, 16);
			}
			objReturn.push(o);
		}
		return objReturn.length === 1 ? o : objReturn;
	},
	/* ==== stop engine ==== */
	stop : function () {
		if (!this.nbTweens) {
			window.clearInterval(this.running);
			this.running = false;
		}
	},
	/* ==== reset tweens ==== */
	kill : function (obj) {
		if (obj) {
			for (var i = 0; i < this.nbTweens; i++) {
				if (this.tweens[i] === obj) {
					this.nbTweens--;
					this.tweens.splice(i, 1);
					this.stop();
					break;
				}
			}
		}
	},
	reset : function () {
		this.nbTweens = 0;
		this.stop();
		while( this.tweens.length ) {
			this.tweens.pop();
		}
	},
	/* ---- easing functions ---- */
	linear : function (f, t, d) { return t * d  + f; },
	inOut : function (f, t, d) { return -t * .5 * (Math.cos(Math.PI * d) - 1) + f; }
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var res = function () {
	/* ---- private vars ---- */
	var imagesPath = "",
	    scr, dLoad, tre, sto, moving,
	    compo, prevCompo = "0",
	    nw = 0,
	    nh = 0,
	    wu = 0,
	    hu = 0,
	    sc = 0,
	    ct = [];
	/* ---- Compositions ---- */
	var content = {
		borderWidth : 12,
		duration : 600,
		coord : {
			C01:[[1,3,[-1,1],,0],[1,4,[1,0],,0],[1,6,[5,1],,0],[1,5,[0,3],,1]],
			C12:[[1,5,,[0,3],0],[1,3,,[-1,1],1],[1,4,,[0,1],1],[1,6,,[1,1],0],[1,4,,[0,3],1],[2,3,[0,-1],,0],[1,6,,[1,-1],1],[2,6,[1,3],,0],[2,5,[5,1],,0],[2,4,[5,2],,1]],
			C13:[[1,3,,[0,0],1],[1,4,,[1,0],1],[1,5,,[0,3],0],[1,6,,[0,1],0],[3,3,[5,1],,0],[3,5,[4,0],,1],[3,4,[4,3],,0],[1,6,,[-3,1],1],[3,6,[3,1,0,2],,1]],
			C23:[[2,5,,[4,-1],1],[2,4,,[4,3],0],[3,3,[5,1],[4,1],0],[2,6,,[1,3],1],[3,6,[1,-1],[1,1],0],[2,3,,[-1,1],1],[3,6,[1,1],[0,1],1],[3,3,[4,1],[3,1],0],[3,5,[4,0],,0],[3,4,[4,3],,0]],
			C24:[[2,3,,[0,3],0],[2,6,,[2,1,2,2],0],[4,5,[-2,1],,0],[4,3,[-2,2],,0],[2,6,,[2,3,2,2],1],[4,6,[2,-1],,0],[2,5,,[3,1],1],[2,4,,[3,2],1],[4,4,[5,1],,1]],
			C34:[[3,3,,[3,-1],0],[3,6,,[2,1,2,2],0],[4,3,[0,3],,1],[4,5,[0,0],,0],[3,5,,[5,1],0],[3,4,,[5,2],0],[3,6,,[5,1],0],[4,6,[2,3],,0],[4,4,[5,1],,1]],
			C35:[[3,3,,[2,1],0],[3,5,,[3,1],0],[3,4,,[3,2],0],[3,6,,[0,-1],1],[5,4,[4,-1],,0],[5,6,[-2,1],,0],[3,5,,[3,0],1],[3,4,,[3,3],0],[3,3,,[3,1],0],[3,3,,[3,-1],1],[5,3,[3,3],,1],[5,5,[2,-1],,1]],
			C41:[[4,4,,[5,1],0],[4,5,,[0,0],1],[4,3,,[0,3],0],[4,6,,[0,1],0],[1,6,[5,1],[2,1],0],[4,6,,[0,3],0],[1,5,[-2,2],[0,2],0],[1,4,[1,0],[1,1],0],[1,3,[0,0],[0,1],0]],
			C42:[[4,5,,[-1,1],1],[4,3,,[-1,2],1],[4,6,,[1,1,3,2],0],[4,5,,[-1,0],1],[4,3,,[-1,3],0],[2,3,[-1,1],,0],[4,4,,[4,3],1],[2,5,[4,-1],,1],[4,6,,[1,-1,3,2],1],[2,6,[1,3],,1]],
			C45:[[4,5,,[0,-1],1],[4,3,,[0,3],0],[5,6,[-2,1],,0],[4,6,,[2,1],1],[5,4,[5,1],,1],[4,6,,[2,1,1,2],1],[4,4,,[3,1],0],[4,6,,[2,-1,1,2],1],[5,5,[2,3],,0],[5,3,[3,1],,1],[4,4,,[3,-1],1]],
			C51:[[5,4,,[4,3],0],[5,3,,[3,3],0],[5,5,,[2,3],0],[1,6,[5,1],,0],[1,3,[0,3],,1],[1,4,[1,3],,1],[5,6,,[0,-1],0],[1,5,[-2,2],,1]],
			C52:[[5,4,,[5,1],0],[5,3,,[5,1],0],[5,5,,[0,1],1],[5,6,,[-2,1],0],[5,5,,[0,-1],1],[2,3,[0,3],,0],[2,6,[5,1],,0],[2,5,[5,1],,0],[2,4,[5,2],,0]]
		},
		C1 : {
			divs : {
				"3" : { image: "images/composite1.jpg",x:0,y:1,w:1,h:1,dx:-.1,dy:-1.5 },
				"4" : { image: "images/ThePhoenixHerald300x197.jpg",x:1,y:1,w:1,h:1,dx:.5,dy:0 },
				"5" : { text: "text1", x:0,y:2,w:2,h:1 },
				"6" : { image: "images/ElizabethCotton1024x768.jpg",x:2,y:1,w:3,h:2,ox:.5,oy:.5 }
			}
		},
		C2 : {
			divs : {
				"3" : { image: "images/JohnsonLockedUp483x333.jpg", x:0,y:1,w:1,h:2,dx:-.5,dy:0 },
				"4" : { image: "images/composite2.jpg", x:4,y:2,w:1,h:1,dx:0,dy:.5 },
				"5" : { text : "text2", x:4,y:1,w:1,h:1 },
				"6" : { image : "images/AlandHilmaYates731x789.jpg",x:1,y:1,w:3,h:2,ox:.7,oy:.7 }
			}
		},
		C3 : {
			divs : {
				"3" : { image: "images/LomaxBookFolkSongsCover284x380.jpg", x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
				"4" : { image: "images/composite3.jpg", x:4,y:1,w:1,h:1,dx:0,dy:-.5 },
				"5" : { text : "text3", x:4,y:2,w:1,h:1 },
				"6" : { image : "images/jessejameswantedposter612x575.jpg", x:0,y:1,w:3,h:2,ox:.2,oy:.8 }
			}
		},
		C4 : {
			divs : {
				"3" : { image: "images/KateAdams433x252.jpg", x:0,y:2,w:1,h:1,dx:0,dy:.3 },
				"4" : { image: "images/19thCenturyPoetryCDcover500.jpg", x:3,y:1,w:2,h:2,dx:.2,dy:.5 },
				"5" : { text : "text4", x:0,y:1,w:1,h:1 },
				"6" : { image : "images/WoodyJohnsonCdCover2009.jpg", x:1,y:1,w:2,h:2,ox:.2,oy:.5 }
			}
		},
		C5 : {
			divs : {
				"3" : { image: "images/composite1.jpg", goto:1, x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
				"4" : { image: "images/composite4.jpg", goto:1, x:4,y:1,w:1,h:2,dx:-.5,dy:0 },
				"5" : { text : "text5", x:2,y:1,w:1,h:2 },
				"6" : { image : "images/WoodyPosterized.jpg", x:0,y:1,w:2,h:2,ox:.9,oy:.9 }
			}
		}
	};
	////////////////////////////////////////////////////////////////////////////
	/* ==== init screen position and dimensions ==== */
	function resize() {
		/* --- resize --- */
		nw = scr.offsetWidth;
		nh = scr.offsetHeight;
		wu = (nw - (6 * content.borderWidth)) / 5;
		hu = (nh - (5 * content.borderWidth)) / 4;
	}
	////////////////////////////////////////////////////////////////////////////
	/* ==== decode transition ==== */
	var pushTrans = function (c0, c1, p) {
		var i = p, t;
		while( t = content.coord["C" + c0 + c1][i++] ) {
			/* ---- init origin ---- */
			if (t[2]) {
				var d = ct[sc][t[1]];
				d.style.zIndex = 40 - i;
				tweens.add(d, {
					init: getPixels(t[0], t[1], t[2], 1)
				});
			} else {
				var d = ct[(sc + 1) % 2][t[1]];
				d.style.zIndex = 40 - i;
			}
			/* ---- target ---- */
			tweens.add(d, {
				duration: content.duration,
				target : getPixels(t[0], t[1], t[3]),
				onFinish : nextTrans,
				params : [c0, c1 ,i, d, t[4], t[5]]
			});
			if (!t[4]) break;
		}
	}
	/* ==== next tweens serie ==== */
	var nextTrans = function (t) {
		if (!t[4]) pushTrans(t[0], t[1], t[2]);
		if (t[2] == content.coord["C" + t[0] + t[1]].length) moving = false;
	}
	/* ==== coordinates ==== */
	var getPixels = function (c, n, div) {
		var b = content.borderWidth;
		/* ---- default size ---- */
		if (c) {
			var c = content["C" + c].divs[n];
			if (!div) div = [c.x, c.y, c.w, c.h];
			else if (div.length == 2) {
				div[2] = c.w;
				div[3] = c.h;
			}
		}
		/* ---- return css ---- */
		return {
			left: div[0] * wu + (b + div[0] * b),
			top: div[1] * hu + (b + div[1] * b),
			width: Math.max(0, (div[2] * wu) + (-b + div[2] * b)),
			height: Math.max(0, (div[3] * hu) +(-b + div[3] * b))
		};
	}
	/* ==== start transitions ==== */
	var compoIn = function (compo) {
		if (tweens.running) {
			if (sto) clearTimeout(sto);
			sto = setTimeout(function() { compoIn(compo); }, 128);
			return;
		}
		sto = false;
		tre = false;
		moving = true;
		/* ---- display loader ---- */
		dLoad = setTimeout(function () {
			document.getElementById('loader').style.display = "block";
		}, 150);
		/* ---- swap containers ---- */
		sc = (sc + 1) % 2;
		var c = content["C" + compo];
		/* ---- reset compo ---- */
		c.nbi = c.nbl = 0;
		for (var k in c.divs) {
			ct[sc][k].innerHTML = "";
			for (var i in c.divs[k]) if (i == "image") c.nbi++;
		}
		/* ---- for each containers ---- */
		for (var k in c.divs) {
			var d = c.divs[k];
			for (var i in d) {
				if (i == "image") {
					/* ---- preload image ---- */
					d.img = document.createElement('img');
					d.img.compo = c;
					d.img.c = compo;
					d.img.d = d;
					d.img.onload = function () {
						this.compo.nbl++;
						/* ---- all images loaded ---- */
						if (this.compo.nbi == this.compo.nbl) {
							clearTimeout(dLoad);
							document.getElementById('loader').style.display = "none";
							/* ---- for each container ---- */
							for (var k in c.divs) {
								var o = ct[sc][k];
								o.style.left = '-9999px';
								var d = c.divs[k];
								/* ---- for each attribute ---- */
								for (var i in d) {
									if (i == "goto") {
										d.img.goto = d[i];
										/* ---- onclick ---- */
										d.img.onclick = function () { compoIn(this.goto); }
									} else if (i == "image") {
										/* ---- image loaded - update DOM ---- */
										o.appendChild(d.img);
										/* ---- center image ---- */
										var x = d.xy(false);
										tweens.add(d.img, {
											init: { left: x[0], top:  x[1] }
										});
									} else if (i == "text") {
										/* ---- HTML text ---- */
										if (document.getElementById(d[i]))
											o.innerHTML = document.getElementById(d[i]).innerHTML;
									}
								}
							}
							/* ---- start transition ---- */
							pushTrans(prevCompo, compo, 0);
							prevCompo = compo;
						}
					};
					/* ---- roll over ---- */
					d.xy = function (s) {
						return [
							(!this.dx) ? (((this.w * wu + (this.w - 1) * content.borderWidth) - this.img.width)  * (this.ox || .5)) : (s ? ((this.dx > 0) ? 0 : wu * this.dx) : ((this.dx > 0) ? -wu * this.dx : 0)),
							(!this.dy) ? (((this.h * hu + (this.h - 1) * content.borderWidth) - this.img.height) * (this.oy || .5)) : (s ? ((this.dy > 0) ? 0 : hu * this.dy) : ((this.dy > 0) ? -hu * this.dy : 0))
						];
					}
					if (k != "6"){
						d.img.imgOver = function (x, y) {
							tweens.kill(this.overTween);
							this.overTween = tweens.add(this, {
								duration: 300, target : {left : x, top: y}
							});
						};
						d.img.onmousemove = function() {
							if (!this.over && !moving) {
								var x = this.d.xy(true);
								this.imgOver(x[0], x[1]);
								this.over = true;
							}
						};
						d.img.onmouseout  = function() {
							if (this.over && !moving) {
								var x = this.d.xy(false);
								this.imgOver(x[0], x[1]);
								this.over = false;
							}
						};
					} else {
						/* ---- zoom ---- */
						d.img.onclick = function() { zoomIn(this); };
					}
					/* ---- source ---- */
					d.img.src = imagesPath + d[i];
					d.n = k;
				}
			}
		}
	}
	/* ==== zoom in main image ==== */
	var zoomIn = function (img) {
		if (moving) return;
		if (tweens.running) {
			if (sto) clearTimeout(sto);
			sto = setTimeout(function() { zoomIn(img); }, 128);
			return;
		}
		sto = false;
		ct[sc][6].style.zIndex = 50;
		img.onclick = function() { zoomOut(img); };
		tweens.add(ct[sc][6], {
			duration: content.duration,
			target: {
				left: content.borderWidth,
				top:  content.borderWidth,
				width:  nw - content.borderWidth * 2,
				height: nh - content.borderWidth * 2
			},
			onFinish : function () {
				tweens.add(['b1','b2'], {
					duration: 1000, target: { height: 0 }
				});
				tweens.add(['b3','b4'], {
					duration: 1000, target: { height: nh - 2, top: 1 }
				});
			}
		});
		tweens.add(img, {
			duration: 1000,
			target: {
				left: ((nw - content.borderWidth * 2) - img.width)  * .5,
				top:  ((nh - content.borderWidth * 2) - img.height) * .5
			}
		});
	}
	/* ==== zoom out main image ==== */
	var zoomOut = function (img) {
		if (tweens.running) {
			if (sto) clearTimeout(sto);
			sto = setTimeout(function() { zoomOut(img); }, 128);
			return;
		}
		var d = img.d;
		img.onclick = function() { zoomIn(img); };
		sto = false;
		tweens.add(['b3','b4'], {
			duration: 1000,
			target: { height: hu * 2 + content.borderWidth * 3 - 2, top: hu + content.borderWidth + 1 }
		});
		tweens.add(['b1','b2'], {
			duration: 1000,
			target: { height: hu + content.borderWidth },
			onFinish : function () {
				tweens.add(ct[sc][6], {
					duration: 1000, target: getPixels(img.c, "6", [d.x, d.y, d.w, d.h])
				});
				tweens.add(d.img, {
					duration: 1000,
					target: {
						left: ((d.w * wu) - d.img.width) * (d.ox || .5),
						top: ((d.h * hu) - d.img.height) * (d.oy || .5)
					}
				});
			}
		});
	}
	/* ==== intro ==== */
	var intro = function() {
		scr.style.visibility = "visible";
		tweens.add('b1', { init: {
			width: nw, height: 2 * hu + 2 * content.borderWidth, top: 0, left: 0 }
		});
		tweens.add('b2', { init: {
			width: nw, height: 2 * hu + 2 * content.borderWidth, bottom: 0, left: 0 }
		});
		tweens.add('b3', { init: {
			width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, left: 0 }
		});
		tweens.add('b4', { init: {
			width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, right: 0 }
		});
		tweens.add(['b1','b2'], {
			duration: 1000,
			target: { height: hu + content.borderWidth }
		});
		tweens.add(['b3','b4'], {
			duration: 1000,
			target: { height: hu * 2 + content.borderWidth * 3 - 2, top:hu + content.borderWidth + 1 },
			onFinish: compoIn,
			params : 1
		});
	}
	/* ==== init script ==== */
	var init = function () {
			scr = document.getElementById('screen');
			for (var i = 0; i <= 1; i++) {
				ct[i] = [];
				for (var j = 3; j < 7; j++) {
					var o = ct[i][j] = document.createElement('div');
					o.className = "divs";
					scr.appendChild(o);
				}
			}
			resize();
			setTimeout(function() {
				intro();
			}, 100);
		}
	return {
		/* ==== public ==== */
		init : init,
		goto : function (compo) { compoIn(compo); }
	}
}();