function frame(size, parent, id) {
	this.id = id;
	this.x = 0;
	this.y = 0;
	this.parent = parent;
	this.element = document.createElement('div');
	this.element.className = 'frame';
	this.size = size;
	this.depth = app.num*2 - id;
	(parent === null ? document.body : parent.element).appendChild(this.element);
	
	this.update = function() {
		this.size += app.speed * app.direction;
		this.x = (window.innerWidth/2 - app.mice.x) / (2 * (this.depth + 1));
		this.y = (window.innerHeight/2 - app.mice.y) / (2 * (this.depth + 1));
		this.element.style.marginLeft = this.x - this.size/2 - 10 + 'px';
		this.element.style.marginTop = this.y - this.size/2 - 10 + 'px';
		this.element.style.width = this.size + 'px';
		this.element.style.height = this.size + 'px';
		this.element.style.display = this.size < 1 ? 'none' : 'block';
		
		if (app.direction > 0 && this.size > document.body.clientWidth+app.step) {
			app.reappend_from(this);
		}
		
		if (app.direction < 0 && this.size < 1) {
			app.reappend_from(this);
		}
	}
	
	this.update();
	return this;
}

var app = {
	init: function() {
		this.num = 30;
		this.speed = 2;
		this.step = (document.body.clientWidth) / (this.num - 1);
		this.frames = [];
		this.direction = 1;
		this.mice = {x: 0, y: 0};
		document.body.onmousemove = this.onmousemove;
		document.addEventListener('touchmove', function(e) {app.touchmove(e);}, false);
		
		var size = this.num * this.step - this.step;
		for (var i=0; i<this.num; i++) {
			this.add(size, (i > 0 ? this.frames[i-1] : null), i);
			size -= this.step;
		}
		
		this.timer = setInterval(function() {
			app.tick();
		}, 10);
	},
	add: function(size, parent, id) {
		var f = new frame(size, parent, id);
		this.frames.push(f);
	},
	tick: function() {
		for (var i=0; i<this.frames.length; i++) {
			this.frames[i].update();
		}
	},
	reverse: function() {
		this.direction *= -1;
	},
	find_frame: function(element) {
		for (var i=0, len=this.frames.length; i<len; i++) {
			var f = this.frames[i];
			if (f.element == element) {
				return f;
			}
		}
		return null;
	},
	reappend_from: function(frame) {
		var nodes = document.getElementsByTagName('div'),
			first = nodes[0],
			last = nodes[nodes.length-1],
			second = nodes[1];
		
		if (this.direction == 1) {			
			frame.size = 0;
			document.body.appendChild(second);
			last.appendChild(first);
		} else {
			frame.size = document.body.clientWidth;
			document.body.appendChild(last);
			last.appendChild(first);
		}	
			
		nodes = document.getElementsByTagName('div');
		setTimeout(function() {app.depth(nodes)}, 1);
	},
	depth: function(nodes) {
		for (var i=0, len=nodes.length; i<len; i++) {
			var e = nodes[i],
				f = this.find_frame(e),
				d = e.getElementsByTagName('div').length;
			f.depth = d;
		}
	},
	descendants: function(element) {
		return element.getElementsByTagName('div');
	},
	onmousemove: function(e) {
		app.mice = {x: e.clientX, y: e.clientY};
	},
	touchmove: function(e) {
		if (e.touches.length == 1) {
			e.preventDefault();
			this.mice = {x: e.touches[0].pageX, y: e.touches[0].pageY};
		}
	}
}