/*
 * @include "/jTweener/src/jTweener.js"
 */
 
$(function(){
	var total_images = 7;
	var loaded_images = 0;
	/** @type {Element[]} */
	var images = [];
	var is_rain = false;
	
	
	/** Количество капель за кадр (drops per frame) */
	var dpf = 0;
	var fps = 60;
	var max_dpf = 4;
	
	if ($.browser.msie) {
		max_dpf = 1;
		fps = 28;
	}
	
	
	/**
	 * Капли дождя, которые сейчас находятся на странице
	 */
	var drops = [];
	
	var rain_timer = null;
	
	var container = $('<div id="rain"/>').appendTo('#nav-history');
	
	var container_width, container_height;
	$(window).resize(function(){
		container_width = container.width();
		container_height = container.height();
	}).resize();
	
	
	// загружаю все картинки капель
	for (var i = 0; i < total_images; i++) {
		(function(i){
			var img = new Image();
			img.onload = function(){
				var img_elem = $('<img src="'+ img.src +'" width="'+ img.width +'" height="'+ img.height +'" class="drop png" />')[0];
				images.push(img_elem);
				loaded_images++;
			}
			img.src = './i/history/' + (i + 1) + '.png';	
			
		})(i);
	}
	
	$('#weather').click(function(){
		if (total_images != loaded_images)
			return;
			
		if (is_rain)
			stopRain();
		else
			startRain();
	});
	
	/**
	 * Генерирует случайное число в заданном диапазоне
	 * @param {Number} min Нижняя граница значения
	 * @param {Number} max Верхняя граница значения
	 * @param {Boolean} [is_rounded] Нужно ли округлять результат (по умолчанию — нет) 
	 * @return {Number}
	 */
	function rnd(min, max, is_rounded) {
		var result = (max - min) * Math.random() + min; 
		return (is_rounded) ? Math.round(result) : result;
	}
	
	/**
	 * Капля дождя
	 * @class
	 */
	function Drop(){
		/** @type {Element} */
		var img = images[rnd(0, images.length - 1, true)].cloneNode(false);
		
		this.elem = img.cloneNode(false);
		this.s = this.elem.style;
		
		var x, y;
		
		/* капля должна вылетать сверху или справа? */
		var is_from_top = (rnd(0, 3, true) != 3);
		if (is_from_top) {
			x = rnd(0, container_width);
			y = -img.height;
		} else {
			x = container_width;
			y = rnd(0, container_height * 0.1);
		}
		
		this.width = img.width;
		this.height = img.height;
		this.speed = Drop.speed * (1 + rnd(-Drop.speed_spread, Drop.speed_spread));
		
		this.move(x, y);
		container.append(this.elem);
	}
	
	/** Угол падения капли */
	Drop.angle = 118;
	/** Скорость падения капли */
	Drop.speed = 70;
	/** разброс в скорости, в процентах */
	Drop.speed_spread = 0.2;
	
	Drop.prototype = {
		move: function(x, y) {
			this.x = x;
			this.y = y;
			this.s.left = x + 'px';
			this.s.top = y + 'px';
		},
		
		remove: function(){
			$(this.elem).remove();
		}
	}
	
	function setDpf(value){
		if (arguments.length == 0)
			return dpf;
		dpf = Math.round(value);
	}
	
	function startRain(){
		// дождь плавно начинается и плавно закачивается.
		// достигается это путем поавного изменения количества генерируемых
		// капель за кадр
		dpf = 1;
		if (dpf < max_dpf) {
			jTweener.addTween({dpf: setDpf}, {
				dpf: max_dpf,
				time: 4,
				transition: 'easeincubic'
			});
		}
		
		
		is_rain = true;
		
		clearInterval(rain_timer);
		rain_timer = setInterval(rain, 1000 / fps);
	}
	
	function rain(){
		if (is_rain) {
			// сначала генерирую новые капли
			for (var i = 0; i < dpf; i++) {
				drops.push(new Drop());
			}
		}
		
		/*
		 * Теперь буду двигать капли. Так как некоторые из них нужно удалять
		 * после смещения (они оказываются за проеделами контейнера), нужно 
		 * постоянно модифицировать массив drops. Для этого я бегу по массиву 
		 * в обратном порядке 
		 */
		
		for (var i = drops.length - 1; i >= 0; i--) {
			/** @type {Drop} */
			var drop = drops[i];
			
			var deg = Drop.angle / 180 * Math.PI;
			
			var x = drop.speed * Math.cos(deg) + drop.x;
			var y = drop.speed * Math.sin(deg) + drop.y;
			
			if (x < -drop.width || y > container_height) {
				drop.remove();
				drops.splice(i, 1);
			} else {
				drop.move(x, y);
			}
		}
		
		if (!drops.length && !is_rain) {
			clearInterval(rain_timer);
		}
	}
	
	function stopRain(){
		dpf = 0;
		is_rain = false;
	}
});