/**
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @include "/rit-demo/js/jTweener.js"
 */

/**
 * Случайное число в заданном диапазоне
 * @param {Number} n1 Нижняя граница диапазона
 * @param {Number} n2 Верхняя граница диапазона
 * @return {Number}
 */
function rnd(n1, n2){
	return n1 + Math.round(Math.random() * (n2 - n1));
}

function p(x, h){
	h = h || 1;
	return {x: x, height: h};
}

/**
 * Разметка четверти пузыря
 */
var quarter_shape = [
	p(43),
	p(39),
	p(36),
	p(33),
	p(31),
	p(29),
	p(27),
	p(25, 2),
	p(22, 3),
	p(18),
	p(17, 3),
	p(14, 2),
	p(12, 4),
	p(9, 2),
	p(8, 3),
	p(6, 4),
	p(4, 2),
	p(3, 3),
	p(2, 3),
	p(1, 4),
	p(0, 11)
];

/**
 * Форма пузыря
 * @type {Array}
 */
var shape = (function(){
	var size = 54;
	var result = [];
	var y = 0;

	function buildBlock(point){
		var block = {
			x: point.x,
			'y': y,
			width: (size - point.x) * 2,
			height: point.height
		};

		y += point.height;
		result.push(block);
	}

	// последний блок будет увеличен в 2 раза
	var last_item = quarter_shape.pop();

	// строим верхнюю половину круга
	for (var i = 0; i < quarter_shape.length; i++) {
		buildBlock(quarter_shape[i]);
	}

	buildBlock( p(last_item.x, last_item.height * 2) );

	// строим нижнюю половину круга
	for (var i = quarter_shape.length; i > 0; i--) {
		buildBlock(quarter_shape[i - 1]);
	}

	return result;
})();

$(function(){
	var container = $('#aquarium');

	/** Степень увеличения */
	var zoom = 2;

	/** Половина размера пузыря */
	var bubble_half_size = {
		width: 54,
		height: 54
	};

	/**
	 * Создает новый пузырь
	 */
	function generateBubble(){
		var bubble = $('<div class="bubble"/>');
		var blocks = [];
		for (var i = 0; i < shape.length; i++) {
			blocks.push({
				x: shape[i].x,
				y: shape[i].y,
				elem: $('<div/>').css({
					left: shape[i].x,
//					top: shape[i].y,
					width: shape[i].width,
					height: shape[i].height
				}).appendTo(bubble)[0].style
			});
		}

		// размещаем пузырь в произвольном месте
		var x = rnd(0, container[0].offsetWidth * 0.7);
//		x = 407;
		var y = container[0].offsetHeight;
		bubble.css({left: x, top: y});
		bubble.append( $('<div class="decor"></div>') );

		container.append(bubble);

		// возвращаем интерфейс для взаимодействия
		return {
			top: function(){
				if (!arguments.length) {
					return y;
				} else {
					y = arguments[0];
					var s = bubble[0].style;

					s.top = y + 'px';

					// считаем смещение изображения
					var offset_x = -x * zoom;
					var offset_y = -y * zoom;

					// смещаем изображение в каждом блоке
					for (var i = 0; i < blocks.length; i++) {
						var b = blocks[i];
						b.elem.backgroundPosition =
							(offset_x - b.x - bubble_half_size.width) + 'px ' +
							(offset_y - b.y  - bubble_half_size.height) + 'px';
					}
				}
			},

			remove: function() {
				bubble.remove();
			}
		}
	}

	function animate(){
		var bubble = generateBubble();
//		bubble.top(130);
//		return;

		jTweener.addTween(bubble, {
			top: -120,
			time: rnd(20, 30) / 10,
			transition: 'linear',
			onComplete: function() {
				bubble.remove();
			}
		});
	}

	animate();
	setInterval(animate, 1700);
});