$(function(){
	var img_path = [
		'./i/museum/bg2.jpg',
		'./i/museum/bg3.jpg',
		'./i/museum/bg4.jpg'
	];
	
	var container = $('#nav-museum');
	var images = []; 
	var is_loaded = false;
	var is_playing = false;
	var cur_image = 0, next_image = 1;
	var z_index = 1;
	
	$('#nav-kvas').hover(function(){
		color_overlay.addClass('hover');
	}, function(){
		color_overlay.removeClass('hover');
	});
	
	var color_overlay = $('<div id="color-overlay"></div>').appendTo('#page');
	
	$('#send-story a').unbind('click').click(function(evt){
		$.popup(this.href, {width: 700});
		evt.preventDefault();
	});
	
	$('#weather').click(function(){
		if (is_loaded) {
			is_playing = !is_playing;
			if (is_playing)
				swapImages();
		}
	});
	
	function loadImages(){
		var loaded_images = 0;
		var ix = 0;
		images.push(container.find('img.big'));
		
		function loadNext(ix){
			var img = new Image();
			img.onload = function(){
				addImg(img_path[ix]);
			};
			img.src = img_path[ix];
		}
		
		function addImg(path){
			var img = $('<img src="' + path + '" class="big" />');
			img.css('display', 'none').appendTo(container);
			images.push(img);
			loaded_images++;
			if (loaded_images == img_path.length) {
				is_loaded = true;
			} else {
				loadNext(++ix);
			}
		}
		loadNext(ix);
	}
	
	function swapImages(){
		if (is_playing) {
			var cur_image_elem = images[cur_image];
			var next_image_elem = images[next_image];
			
			next_image_elem
				.css('z-index', z_index++)
				.hide()
				.fadeIn(5000, function(){
					cur_image_elem.hide();
					swapImages();
				});
			
			cur_image = next_image;
			next_image++;
			if (next_image >= images.length) {
				images.reverse();
				cur_image = 0;
				next_image = 1;
			}
			
		}
	}
	
	$(window).load(loadImages);
});