function init() {
	var step = 40,
		width = 1022 - step,
		height = 585 - step,
		x = y = 20, z = 100,
		hp_num = width / step, vp_num = height / step;
	
	for (x=20; x<height-step; x+=step) {
		new bar(true, x, width, hp_num, z).randomize(Math.random()).start();
		z = z == 0 ? 100 : 0;
	}
	
	for (x=20; x<width-step; x+=step) {
		new bar(false, x, height, vp_num, z).randomize(Math.random()).start();
		z = z == 0 ? 100 : 0;
	}
}

function bar(is_horizontal, position, size, pieces_num, z) {
	this.pieces = [];
	this.is_horizontal = is_horizontal;
	this.r = Math.random() + 1;
	
	var x, y, piece_size = Math.floor(size / pieces_num);
	
	if (is_horizontal) {
		x = 0;
		y = position;
	} else {
		x = position;
		y = 0;
	}
	
	for (var i=0; i<pieces_num; i++) {
		var p = new piece(x, y, z, this);
		p.resize(piece_size, size, (is_horizontal ? 'width' : 'height'), (is_horizontal ? 'left' : 'top'));
		document.getElementById('canvas').appendChild(p.element);
		this.pieces.push(p);
		
		if (is_horizontal) {
			x += piece_size;
		} else {
			y += piece_size;
		}
		
		z = z == 0 ? 100 : 0;
	}
	
	this.start = function() {
		for (var i=0; i<this.pieces.length; i++) {
			this.pieces[i].start();
		}
		return this;
	}
	
	this.randomize = function(value) {
		var to_scroll = this.is_horizontal ? 'scrollLeft' : 'scrollTop',
			scroll_max = this.is_horizontal ? 'scrollWidth' : 'scrollHeight';
		for (var i=0; i<this.pieces.length; i++) {
			this.pieces[i].scroll[to_scroll] = this.pieces[i].scroll[scroll_max] * value;
		}
		return this;
	}
	
	return this;
}

function piece(x, y, z, parent) {
	this.parent = parent;
	
	this.element = document.createElement('div');
	this.element.className = 'piece';
	this.element.style.left = x + 'px';
	this.element.style.top = y + 'px';
	this.element.style.zIndex = z;
	
	this.scroll = document.createElement('div');
	this.scroll.className = 'scroll';
	
	this.placeholder = document.createElement('div');
	this.placeholder.className = 'placeholder';
	
	this.element.appendChild(this.scroll).appendChild(this.placeholder);
	
	this.resize = function(piece_size, scroll_size, dimension_size, dimension_position) {
		this.element.style[dimension_size] = piece_size + 'px';
		this.scroll.style[dimension_size] = scroll_size + 'px';
		this.scroll.style[dimension_position] = '-' + this.element.style[dimension_position];
		this.placeholder.style[dimension_size] = scroll_size * 2 * this.parent.r + 'px';
	}
	
	this.start = function() {
		this.scroll.addEventListener('scroll', this.onscroll.bind(this), false);
	}
	
	this.onscroll = function() {
		var to_scroll = this.parent.is_horizontal ? 'scrollLeft' : 'scrollTop';
		for (var i=0; i<this.parent.pieces.length; i++) {
			this.parent.pieces[i].set(this.scroll[to_scroll]);
		}
	}
	
	this.set = function(value) {
		var to_scroll = this.parent.is_horizontal ? 'scrollLeft' : 'scrollTop';
		this.scroll[to_scroll] = value;
	}
	
	return this;
}

Function.prototype.bind = function (context) {
    var method = this;
    return function() {
    	return method.apply(context);
    }
}

window.onload = function() {
	init();
}