// ===================================================================
// 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 engine doc: http://www.dhteumeuleu.com/lab/tweens-doc.html
// ===================================================================


var res = function () {
	/* ---- private vars ---- */
	var imagesPath = "http://colorsofmagic.net/public/images/homepagegallery/",
	    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: "crea_2v.jpg", goto:2, x:0,y:1,w:1,h:1,dx:0,dy:-.5 },
				"4" : { image: "crea_3v.jpg", goto:3, 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: "crea_1.jpg",x:2,y:1,w:3,h:2,ox:.5,oy:.5 }
			}
		},
		C2 : {
			divs : {
				"3" : { image: "crea_4v.jpg", goto:4, x:0,y:1,w:1,h:2,dx:-.5,dy:0 },
				"4" : { image: "crea_3h.jpg", goto:3, 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 : "crea_2.jpg",x:1,y:1,w:3,h:2,ox:.7,oy:.7 }
			}
		},
		C3 : {
			divs : {
				"3" : { image: "crea_4v.jpg", goto:4, x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
				"4" : { image: "crea_5v.jpg", goto:5, x:4,y:2,w:1,h:1,dx:0,dy:-.5 },
				"5" : { text : "text3", x:4,y:1,w:1,h:1 },
				"6" : { image : "crea_3.jpg", x:0,y:1,w:3,h:2,ox:.2,oy:.8 }
			}
		},
		C4 : {
			divs : {
				"3" : { image: "crea_5h.jpg", goto:5, x:0,y:2,w:2,h:1,dx:0,dy:.5 },
				"4" : { image: "crea_1v.jpg", goto:1, x:4,y:1,w:1,h:2,dx:-.5,dy:0 },
				"5" : { text : "text4", x:0,y:1,w:2,h:1 },
				"6" : { image : "crea_4.jpg", x:2,y:1,w:2,h:2,ox:.2,oy:.5 }
			}
		},
		C5 : {
			divs : {
				"3" : { image: "crea_1v.jpg", goto:1, x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
				"4" : { image: "crea_2v.jpg", goto:2, 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 : "crea_5.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: 1000,
			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); }
	}
}();

/* ==== start script ==== */
onload = function() {
	res.init();
}