// ====================================================================== 
// script by Gerard Ferrandez | February, 2010 
// -------------------------------------------------------------------- 
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot 
// Javascript code licensed under CC-BY-NC - Do not remove this notice 
// ====================================================================== 
 
var res = function () { 
	// ---- private vars ---- 
	var scr, a0, a1, 
		divs   = new Array(), 
		moves  = new Array(), 
		idle = false, 
		nw, nh, wu, hu, 
		mx = [1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4,0], 
		my = [0,1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4], 
		bw = 10; 
 
	//////////////////////////////////////////////////////////////////////////// 
	// ============== grid class ============= 
	var grid = { 
		// ===== calculate grid ===== 
		calc : function () { 
			// ---- empty grid ---- 
			this.grid = new Array(24); 
			for (var i = 0; i < 24; i++) 
				this.grid[i] = 0; 
			// ---- load grid ---- 
			var i = 0, o; 
			while ( o = divs[i++] ) 
				this.add(o); 
		}, 
		// ===== return cell value ===== 
		cell : function (x, y) { 
			return this.grid[x * 4 + y]; 
		}, 
		// ===== area weight ===== 
		weight : function (x, y, w, h) { 
			var gw = 0; 
			for(var i = 0; i < w; i++) 
				for(var j = 0; j < h; j++) 
					gw += this.cell(i + x, j + y); 
			return gw; 
		}, 
		// ===== add div ===== 
		add : function (o) { 
			for(var i = 0; i < o.w; i++) 
				for(var j = 0; j < o.h; j++) 
					this.grid[(i + o.x) * 4 + (j + o.y)] += o.f ? 20 : 1; 
		} 
	} 
 
	//////////////////////////////////////////////////////////////////////////// 
	// ============== tween class ============= 
	var tween = { 
		// ===== tween stack ===== 
		divs : new Array(), 
		// ===== create tween object ===== 
		tween : function (o, x, y, w, h) { 
			return { 
				div : o, 
				x : x, 
				y : y, 
				w : w, 
				h : h 
			}; 
		}, 
		// ===== add new tween ===== 
		add : function (o, x, y, w, h) { 
			if (o == true) return false; 
			// ---- consolidate with last move ---- 
			var t = this.divs.length - 1; 
			if (t >= 0 && this.divs[t].div == o) 
				this.divs[t] = this.tween(o, x, y, w, h); 
			else { 
				// ---- push tween ---- 
				this.divs.push( 
					this.tween(o, x, y, w, h) 
				); 
			} 
		}, 
		// ======== start next tween ========= 
		next : function () { 
			if (this.divs.length) { 
				var t = this.divs[0]; 
				var o = t.div; 
				o.dx = t.x - o.xc; 
				o.dy = t.y - o.yc; 
				o.dw = t.w - o.wc; 
				o.dh = t.h - o.hc; 
				o.s = 1; 
				o.p = 0; 
				return o; 
			} else return false; 
		} 
	} 
	//////////////////////////////////////////////////////////////////////////// 
	// =============== Div constructor =============== 
	var Frame = function (i, div) { 
		// ---- random position ---- 
		do { 
			this.x = this.x0 = Math.floor(Math.random() * 6); 
			this.y = this.y0 = Math.floor(Math.random() * 4); 
		} while (moves[this.x * 4 + this.y]); 
		moves[this.x * 4 + this.y] = true; 
		// ---- dimensions ---- 
		var img = div.getElementsByTagName("img")[0]; 
		var wh = img.alt.split(","); 
		img.alt = ""; 
		this.w = 1; 
		this.h = 1; 
		this.xc = this.x + .5; 
		this.yc = this.y + .5; 
		this.wc = 0; 
		this.hc = 0; 
		this.w1 = wh[0] * 1; 
		this.h1 = wh[1] * 1; 
		this.i = i; 
		this.s = 0; 
		div.parent = this; 
		div.onclick = function () { this.parent.click(); } 
		this.css = div.style; 
		// ---- push tween ---- 
		tween.add(this, this.x, this.y, 1, 1); 
	} 
 
	// ========== calculate moving cost =========== 
	Frame.prototype.costMove = function (m) { 
		// ---- what direction ---- 
		var sx = mx[m] > 0 ? 1 : mx[m] < 0 ? -1 : 0, 
		    sy = my[m] > 0 ? 1 : my[m] < 0 ? -1 : 0, 
		    cm = 0; 
		// ---- horizontal ---- 
		if (sx != 0) { 
			for (var i = this.x; i != this.x + mx[m]; i += sx) 
				cm += grid.weight(i, this.y, this.w, this.h); 
		// ---- vertical ---- 
		} else if (sy != 0) { 
			for (var i = this.y; i != this.y + my[m]; i += sy) 
				cm += grid.weight(this.x, i, this.w, this.h); 
		} 
		// ---- return cost ---- 
		return cm; 
	} 
 
	// ============ determine moving direction ============= 
	Frame.prototype.findMove = function () { 
		var d = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
		    mx = 1000, 
		    cm, m; 
		// =========== loop distance ============ 
		for (var p = 0; p < 4 && mx >= 20; p++) { 
			// ======== vertical neighbors weights ======== 
			for (var i = 0; i < this.w; i++) { 
				// ---- up ---- 
				if (this.y - p > 0) 
					d[3 + p * 4] += grid.cell(this.x + i, this.y - (p + 1)); 
				else 
					// ---- border ---- 
					d[3 + p * 4] = 100; 
				// ---- bottom ---- 
				if (this.y + p + this.h < 4) 
					d[1 + p * 4] += grid.cell(this.x + i, this.y + this.h + p); 
				else 
					// ---- border ---- 
					d[1 + p * 4] = 100; 
			} 
			// ======== horizontal neighbors weights ======== 
			for (var j = 0; j < this.h; j++) { 
				// ---- left ---- 
				if (this.x - p > 0) 
					d[2 + p * 4] += grid.cell(this.x - (p + 1), this.y + j); 
				else 
					// ---- border ---- 
					d[2 + p * 4] = 100; 
				// ---- right ---- 
				if (this.x + this.w + p < 6) 
					d[0 + p * 4] += grid.cell(this.x + this.w + p, this.y + j); 
				else 
					// ---- border ---- 
					d[0 + p * 4] = 100; 
			} 
			// =============== find direction to the weakest neighbor ================ 
			mx = 1000; 
			for (var i = 0; i < 4 * (p + 1); i++) { 
				if ( d[i] < mx) { 
					// ---- store min values ---- 
					mx = d[i]; 
					m = i; 
					cm = this.costMove(i); 
				// ---- equality case ---- 
				} else if ( d[i] == mx) { 
					// ---- less costly move ---- 
					var cmm = this.costMove(i); 
					if (cmm < cm) { 
						cm = cmm; 
						m = i; 
						mx = d[i]; 
					} 
				} 
			} 
		} 
		// ====== return direction [0 = right, 1 = bottom, 2 = left, 3 = up] ====== 
		return m; 
	} 
 
	// ============ HTML rendering ============= 
	Frame.prototype.paint = function () { 
		this.css.left   = Math.round(bw + this.xc * wu) + "px"; 
		this.css.top    = Math.round(bw + this.yc * hu) + "px"; 
		this.css.width  = Math.round(Math.max(0, this.wc * wu - bw)) + "px"; 
		this.css.height = Math.round(Math.max(0, this.hc * hu - bw)) + "px"; 
	} 
 
	// ========== easing function ============== 
	Frame.prototype.tween = function () { 
		if (this.s != 0) { 
			// ---- easing ---- 
			this.p += this.s; 
			this.xc += this.dx * this.p * .01; 
			this.yc += this.dy * this.p * .01; 
			this.wc += this.dw * this.p * .01; 
			this.hc += this.dh * this.p * .01; 
			// ---- HTML rendering ---- 
			this.paint(); 
			// ---- percentage steps [1+2+3+4+5+6+7+8+9+10+9+8+7+6+5+4+3+2+1=100] ---- 
			if (this.p == 10) 
				// ---- reverse acceleration 
				this.s = -1; 
			else if (this.p == 0) 
				// ---- moving end 
				this.s = false; 
		} 
		return this.s; 
	} 
 
	// ============= Main IA function for moving divs =============== 
	Frame.prototype.click = function () { 
		if (moves.length) { 
			var i = 0, o; 
			while ( o = moves[i++] ) { 
				o.f = false; 
				// ---- zoom out ---- 
				if (o.w != 1 || o.h != 1) { 
					o.w = 1; 
					o.h = 1; 
					tween.add(o, o.x, o.y, o.w, o.h); 
				} 
			} 
		} 
		// ---- stop here if same div ---- 
		if (moves[0] == this) 
			moves = new Array(); 
		else { 
			// ---- init grid weights ---- 
			moves = new Array(); 
			grid.calc(); 
			// =========== find the best place for the zoomed div =========== 
			var mvx = 0, 
			    mvy = 0; 
			// ---- right border limit ---- 
			if (this.y + this.h1 > 3) 
				this.y -= this.y + this.h1 - 4; 
			else { 
				// ---- vertical backward move ---- 
				for (var i = this.y - 1; i > this.y - this.h - 1; i--) 
					if (i >= 0 && grid.weight(this.x, i, this.w1, 1) == 0) 
						mvy++; 
			} 
			// ---- bottom border limit ---- 
			if (this.x + this.w1 > 5) 
				this.x -= this.x + this.w1 - 6; 
			else if (!mvy) { 
				// ---- horizontal backward move ---- 
				for (var i = this.x - 1; i > this.x - this.w - 1; i--) 
					if (i >= 0 && grid.weight(i, this.y, 1, this.h1) == 0) 
						mvx++; 
			} 
			// ============ move zoomed div ============= 
			this.x -= mvx; 
			this.y -= mvy; 
			this.w = this.w1; 
			this.h = this.h1; 
			this.f = true; 
			this.findMove(); 
			grid.add(this); 
			moves.push(this); 
			// ========= cascading child moves ========== 
			var k = 0, o; 
			// ---- loop through all divs ---- 
			while ( o = divs[k++] ) { 
				// ---- skip frozen div ---- 
				if (o.f != true) { 
					// ---- loop through all cells ---- 
					for (var i = 0; i < o.w; i++) { 
						for (var j = 0; j < o.h; j++) { 
							// ---- collision (non empty cell) ---- 
							if (grid.cell(i + o.x, j + o.y) > 1) { 
								// ---- move to a better place ---- 
								var m = o.findMove(); 
								o.x += mx[m]; 
								o.y += my[m]; 
								// ---- not inside another one ? ---- 
								if (grid.weight(o.x, o.y, o.w, o.h) < 20) { 
									// ---- freeze div and push move ---- 
									o.f = true; 
									grid.add(o); 
									moves.push(o); 
									// ---- reset main loop and exit ---- 
									k = 0; 
									break; 
								} 
							} 
						} 
						if (o.f) break; 
					} 
				} 
			} 
			// ========= push moves in reverse order ========= 
			var i = moves.length, o; 
			while ( o = moves[--i] ) 
				tween.add(o, o.x, o.y, o.w, o.h); 
		} 
		// ---- start tweens engine ---- 
		a0 = tween.next(); 
		if (idle) { 
			idle = false; 
			run(); 
		} 
	} 
 
	// ============== main loop ================ 
	var run = function () { 
		// ---- first tween ---- 
		if (a0) { 
			a0.tween(); 
			if (a0.p == 10) { 
				// ---- next ---- 
				a1 = a0; 
				tween.divs.splice(0,1); 
				a0 = tween.next(); 
			} 
		} 
		// ---- second tween ---- 
		if (a1) { 
			a1.tween(); 
			// ---- end anim ---- 
			if (a1.s === false) 
				a1 = false; 
		} 
		// ---- loop ---- 
		if (a0 || a1) setTimeout(run, 32); 
		else idle = true; 
	} 
	// ============== init script ============== 
	var init = function () { 
		// ---- init container ---- 
		scr = document.getElementById('screen'); 
		// ---- load divs ---- 
		var k = 0, o; 
		while ( o = scr.getElementsByTagName("div")[k++] ) 
			divs.push( 
				new Frame(k, o) 
			); 
		// ---- ajust dimensions ---- 
		nw = scr.offsetWidth - bw; 
		nh = scr.offsetHeight - bw; 
		wu = nw / 6; 
		hu = nh / 4; 
		// ---- start animation ----- 
		a0 = tween.next(); 
		run(); 
	} 
	return { 
		// ==== public bloc ==== 
		init : init 
	} 
}();