var page, b = Prototype.Browser, images_total, spinner;
document.observe("dom:loaded", function() {	
	Event.observe(window, "resize", function() {
		page.render();
		page.correct_scroll();
		page.fake_url(true);
		if (page.viewer.visible) page.viewer.move();
	});
	
	if (!document.title.include('Elena')) {
		$$('#submenu .content_block.about').last().update('<div class="content_wraper"><a href="/en">In English</a></div>');
	}
	
	images = [], images_total = 0;
	
	//for (var i=1; i<61; i++) {
	//	['title', 'menu', 'submenu', 'content'].each(function(p) {
	//		images.push({
	//			element: false,
	//			src: ['http://www.the389.com/sisterjezz/', p, '/', i, '.png'].join('')
	//		});
	//		images_total++;
	//	});
	//}
	
	$$('div.thumbnail img').each(function(s) {
		images_total++;
		images.push({
			element: s,
			src: ['/images', s.alt.split('images').last()].join('')
		});
	});
	
	spinner_wrapper = $('viewer_spinner').select('.spinner_wraper')[0];
	
	$$('.spinner_holder')[0].insert({bottom: '<div id="percents" style="padding-left: 10px"></div>'});
	prevous_title = document.title;
	
	preload_page(images, function() {
		page = new Page();
		page.render();
		page.make_links();
		page.make_thumbnails();
		page.correct_scroll();
		//page.make_background();
		page.fake_url();
		$$('.spinner_holder')[0].style.display = 'none';
		document.title = prevous_title;
	});
});

function map(value, istart, istop, ostart, ostop) {
	return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

function preload_page(images, callback) {
	if (images.length > 1) {
		var image = new Image();
		var onload = function() {
			var images_percent = images.length / images_total;
			images_percent = images_percent == 0 ? 1 : images_percent;
			var percents = ' ' + Math.floor(100 - images_percent * 100) + '%';
			$('percents').innerHTML = percents;
			document.title = prevous_title + percents;
			spinner_wrapper.style.width = (300 * 300 / (300 - (300 * images_percent) + 1)) + 'px';
			images = images.without(images[0]);
			if (images[0].element) {
				images[0].element.src = images[0].src;
			}
			setTimeout(function() {
				preload_page(images, callback)
			}, 30);
		};
		if (Prototype.Browser.IE) {
			image.onload = onload;
		} else {
			image.observe('load', onload);
		}
		image.src = images[0].src;
	} else {
		callback();
	}
}

var Page = Class.create();
Page.prototype = {
	initialize: function() {
		var quarters_objects = $$('div.quarter');
		var quarters_classes = new Array();
		quarters_objects.each(function(quarter) {
			var quarter_class = new Quarter(quarter);
			quarters_classes.push(quarter_class);
		});
				
		this.viewer = new Viewer($('viewer'));
		this.quarters_objects = quarters_objects;
		this.quarters_classes = quarters_classes;
		
		this.speed = 50;
	},
	render: function() {
		page.scrollbar = page.get_scrollbar();
		page.half_scrollbar = page.get_scrollbar(2);
		page.dimensions = page.get_dimensions();
		page.half_dimensions = page.get_dimensions(2);
		page.common_width = page.half_dimensions.width - page.half_scrollbar;
		page.common_height = page.half_dimensions.height - page.half_scrollbar;
		
		this.set_size({
			objects: $('container'),
			width: page.dimensions.width,
			height: page.dimensions.height
		});
		
		this.set_size({
			objects: page.quarters_objects,
			width: page.common_width,
			height: page.common_height
		});
		
		this.set_size({
			objects: page.quarters_classes,
			subclass: 'wrapers',
			width: page.common_width,
			height: page.common_height,
			multiply: 'content_blocks'
		});
		
		this.set_size({
			objects: page.quarters_classes,
			subclass: 'content_blocks',
			width: page.common_width,
			height: page.common_height
		});
		
		this.set_size({
			objects: page.quarters_classes,
			subclass: 'scroll',
			width: page.common_width,
			height: page.common_height,
			scroll: page.scrollbar
		});
		
		this.set_size({
			objects: page.quarters_classes,
			subclass: 'placeholder',
			width: page.common_width,
			height: page.common_height,
			multiply: 'content_blocks'
		});
		
		this.set_size({
			objects: $('home').select('a'),
			width: page.scrollbar,
			height: page.scrollbar
		});
		
		this.set_position({
			objects: $('home'),
			top: page.half_dimensions.height - page.half_scrollbar,
			left: page.half_dimensions.width - page.half_scrollbar
		});
		
		this.set_position({
			objects: [$('title_scroll'), $('content_scroll')],
			left: page.half_dimensions.width - page.half_scrollbar
		});
		
		this.set_position({
			objects: [$('menu_scroll'), $('submenu_scroll')],
			top: page.half_dimensions.height - page.half_scrollbar
		});
		
		Event.observe(window.document.body, "mousedown", function(event) {
			page.viewer.hide_if_visible(event);
		});
		
		Event.observe(window.document.body, "keypress", function(event) {
			if (event.keyCode == 27) page.viewer.hide_if_visible(event);
		});
		
		this.draw();
	},
	get_dimensions: function(divide) {
		var dimensions = Element.getDimensions(document.getElementsByTagName("body")[0]);
		
		if (dimensions.width%2 != 0) dimensions.width--;
		if (dimensions.height%2 != 0) dimensions.height--;
		
		if (Prototype.Browser.IE) {
			dimensions.width = dimensions.width - 4;
			dimensions.height = dimensions.height - 4;
		}
		
		if (divide > 0) {
			dimensions.width = dimensions.width / divide;
			dimensions.height = dimensions.height / divide;
		}
		
		dimensions.width = Math.floor(dimensions.width/2) * 2;
		dimensions.height = Math.floor(dimensions.height/2) * 2;
		
		return dimensions;
	},
	get_scrollbar: function(divide) {
		var body = $(document.getElementsByTagName('body')[0]);	
		body.style.overflow = "hidden";
		var width = body.clientWidth;		
		body.style.overflow = "scroll";
		width -= body.clientWidth;
		if (!width) width = body.offsetWidth - body.clientWidth;
		body.style.overflow = "hidden";
		width = divide ? (width + 1) / divide : width + 1;
		return Math.floor(width/2) * 2;
	},
	set_size: function(options) {
		if (!page.is_array(options.objects)) options.objects = [options.objects];
		
		options.objects.each(function(object) {
			if (!options.subclass) {
				object.style.width = options.width + "px";
				object.style.height = options.height + "px";
			} else if (!options.scroll) {
				object[options.subclass].each(function(subclass) {
					var multiply = options.multiply ? object[options.multiply].length : 1;
					if (object.type == 'horizontal') {
						subclass.style.width = options.width * multiply + "px";
						subclass.style.height = options.height + "px";
					} else {
						subclass.style.width = options.width + "px";
						subclass.style.height = options.height * multiply + "px";
					}
				});
			} else if (options.scroll) {
				if (object.type == 'horizontal') {
					object[options.subclass].style.width = options.width + "px";
					object[options.subclass].style.height = options.scroll + "px";
				} else {
					object[options.subclass].style.width = options.scroll + "px";
					object[options.subclass].style.height = options.height + "px";
				}
			}
		});
	},
	set_position: function(options) {
		if (!page.is_array(options.objects)) options.objects = [options.objects];

		if (options.top) {
			options.objects.each(function(object) {
				object.style.top = options.top + "px";
			});
		}
		if (options.left) {
			options.objects.each(function(object) {
				object.style.left = options.left + "px";
			});
		}
	},
	is_array: function(object) {
		return object.constructor == Array;
	},
	find: function(find_id) {
		var quarters = page.quarters_classes;
		var found = false;
		quarters.each(function(quarter) {
			if (quarter.id == find_id) found = quarter;
		});
		
		return found;
	},
	random: function(min, max) {
		return min + (max-min) * Math.random();
	},
	
	draw: function() {
		this.reset_scroll();
		this.draw_timer = setInterval(function() {
			page.scroll();
		}, 100);
		this.is_scrolled();
	},
	reset_scroll: function() {
		this.quarters_classes.each(function(quarter) {
			quarter.scroll.down('.placeholder').innerHTML = '-';
			if (quarter.object.id == 'title') {
				quarter.scroll.scrollTop = 99999;
				quarter.previous_scroll = quarter.scroll.scrollTop;
			}
			if (quarter.object.id == 'submenu') {
				quarter.scroll.scrollLeft = 99999;
				quarter.previous_scroll = quarter.scroll.scrollLeft;
			}
		});
	},
	scroll: function() {
		this.check_scroll();
		if (b.IE) this.is_scrolled();
	},
	check_scroll: function() {
		var title = this.quarters_classes[0];
		var menu = this.quarters_classes[1];
		var submenu = this.quarters_classes[2];
		var content = this.quarters_classes[3];
		
		if (title.scroll.scrollTop != title.previous_scroll) {
			this.sync_scroll(title);
		} else if (menu.scroll.scrollLeft != menu.previous_scroll) {
			this.sync_scroll(menu);
		} else if (submenu.scroll.scrollLeft != submenu.previous_scroll) {
			this.sync_scroll(submenu);
		} else if (content.scroll.scrollTop != content.previous_scroll) {
			this.sync_scroll(content);
		}
		
		this.quarters_classes.each(function(quarter) {
			if (quarter.type == 'vertical') quarter.previous_scroll = quarter.scroll.scrollTop;
			if (quarter.type == 'horizontal') quarter.previous_scroll = quarter.scroll.scrollLeft;
		});
	},
	is_scrolled: function() {
		this.quarters_classes.each(function(quarter) {
			if (quarter.type == 'vertical') quarter.object.scrollTop = quarter.scroll.scrollTop;
			if (quarter.type == 'horizontal') quarter.object.scrollLeft = quarter.scroll.scrollLeft;
		});
	},
	correct_scroll: function() {
		var scroll_top = $('content_scroll').scrollTop;
		$('content_scroll').scrollTop = Math.floor(scroll_top / page.common_height) * page.common_height;
	},
	sync_scroll: function(scrolled_quarter) {
		if (scrolled_quarter.object.id == "title") {
			var scroll = scrolled_quarter.scroll.scrollTop;
			var size = page.get_wraper_size(scrolled_quarter);
			var inversion = {
				vertical: (scrolled_quarter.content_blocks.length - 1) * page.common_height,
				horizontal: (page.find('submenu').content_blocks.length - 1) * page.common_width
			}
			$('menu_scroll').scrollLeft = inversion.horizontal - scroll * page.get_wraper_size('menu') / size;
			$('submenu_scroll').scrollLeft = scroll * page.get_wraper_size('submenu') / size;
			$('content_scroll').scrollTop = inversion.vertical - scroll
		}
		
		if (scrolled_quarter.object.id == "menu") {
			var scroll = scrolled_quarter.scroll.scrollLeft;
			var size = page.get_wraper_size(scrolled_quarter);
			var inversion = {
				vertical: (page.find('title').content_blocks.length - 1) * page.common_height,
				horizontal: (scrolled_quarter.content_blocks.length - 1) * page.common_width
			}
			$('title_scroll').scrollTop = inversion.vertical - scroll * page.get_wraper_size('title') / size;
			$('submenu_scroll').scrollLeft = inversion.horizontal - scroll;
			$('content_scroll').scrollTop = scroll * page.get_wraper_size('content') / size;
		}
		
		if (scrolled_quarter.object.id == "submenu") {
			var scroll = scrolled_quarter.scroll.scrollLeft;
			var size = page.get_wraper_size(scrolled_quarter);
			var inversion = {
				vertical: (page.find('title').content_blocks.length - 1) * page.common_height,
				horizontal: (scrolled_quarter.content_blocks.length - 1) * page.common_width
			}
			$('title_scroll').scrollTop = scroll * page.get_wraper_size('title') / size;
			$('menu_scroll').scrollLeft = inversion.horizontal - scroll;
			$('content_scroll').scrollTop = inversion.vertical - scroll * page.get_wraper_size('content') / size;
		}
		
		if (scrolled_quarter.object.id == "content") {
			var scroll = scrolled_quarter.scroll.scrollTop;
			var size = page.get_wraper_size(scrolled_quarter);
			var inversion = {
				vertical: (scrolled_quarter.content_blocks.length - 1) * page.common_height,
				horizontal: (page.find('submenu').content_blocks.length - 1) * page.common_width
			}
			$('menu_scroll').scrollLeft = scroll * page.get_wraper_size('menu') / size;
			$('submenu_scroll').scrollLeft = inversion.horizontal - scroll * page.get_wraper_size('submenu') / size;
			$('title_scroll').scrollTop = inversion.vertical - scroll;
		}
		
		this.is_scrolled();
	},
	get_wraper_size: function(quarter, side) {
		var size;
		var quarter = quarter.id ? quarter : page.find(quarter);
		
		if (quarter.type == 'vertical') {
			size = quarter.wrapers[0].getHeight();
		} else {
			size = quarter.wrapers[0].getWidth();
		}
		
		return size;
	},
	
	make_background: function() {
		page.quarters_classes.each(function(quarter) {
			var id = quarter.object.id;
			var blocks = quarter.content_blocks, len = blocks.length;
			for (var i=0; i<len; i++) {
				var parts = ['title', 'menu', 'submenu', 'content'];
				var id = parts[Math.floor(page.random(0, 4))];
				
				var index = id == 'title' || id == 'submenu' ? len - 1 - i : i;
				var img = Math.floor(map(index, 0, len-1, 1, 60));
				blocks[i].style.backgroundImage = "url('http://www.the389.com/sisterjezz/" + id + "/" + img + ".png')";
				blocks[i].style.backgroundPosition = page.random(-100, 100) + '% ' + page.random(-1000, 1000) + '%';
			}
		});
	},
	
	make_thumbnails: function() {
		var thumbnails_objects = $$('div.thumbnail');
		var thumbnails_classes = new Array();
		thumbnails_objects.each(function(thumbnail) {
			var thumbnail_class = new Thumbnail(thumbnail);
			thumbnails_classes.push(thumbnail_class);
		});
		this.thumbnails = thumbnails_classes;
	},
	init_thumbnail: function(id) {
		var thumbnail_object = $$('#album' + id + ' div.thumbnail')[0];
		var thumbnail_class = new Thumbnail(thumbnail_object);
		this.thumbnails.push(thumbnail_class);
	},
	
	make_links: function() {
		var links = $$('a.link');
		var links_classes = new Array();
		links.each(function(link) {
			links_classes.push(new Hyperlink(link, link.href));
		});
		page.links = links_classes;
		this.bind_links_events();
	},
	bind_links_events: function() {
		page.links.each(function(link) {
			Event.observe(link.object, "click", function(event) {
				page.go_link(link);
			});
		});
	},
	go_link: function(link) {
		var href = link.href ? link.href.gsub(/(.*)\#\/|\//i, '') : link;
		if (href == "about") var distance = 0;
		if (href == "photography") var distance = $$('#title div.about').length;
		if (href == "contacts") var distance = $$('#title div.about').length + $$('#title div.photography').length;
		if (distance) distance *= page.common_height;
		
		page.correct_scroll();
		page.scroll_to_timer = setInterval(function() {
			page.scroll_to($('content_scroll'), $('content_scroll').scrollTop, distance);
		}, page.speed);
	},
	scroll_to: function(element, from, to, fast) {
		var scroll_top = element.scrollTop;
		if (scroll_top != to) {
			direction = to < from ? -1 : 1;
			element.scrollTop += page.common_height * direction;
			if (direction > 0 && scroll_top > to || direction < 0 && scroll_top < to) {
				element.scrollTop = to;
			}
		} else {
			clearInterval(page.scroll_to_timer);
		}
	},
	go_to_album: function(album) {
		var blocks_before = albums.indexOf(album) + 1;
		var distance = page.common_height * (blocks_before + 1);
		
		page.correct_scroll();
		page.scroll_to_timer = setInterval(function() {
			page.scroll_to($("content_scroll"), $("content_scroll").scrollTop, distance);
		}, page.speed);
	},
	fake_url: function() {
		var location = document.location.href;
		this.url = location.include('#') ? location.gsub(/.*?#\/(.*)/i, '#{1}').split('/') : false;
		if (this.url[1]) page.go_to_album(this.url[1]);
		else if (this.url[0] && this.url[1] == null) page.go_link(this.url[0]);
	},

	toggle: function(link) {
		var href = document.location.href.gsub(/(.*)\#\/|\//i, '');
		if (href == 'contacts') link.href = '#/about';
		else link.href = '#/contacts';
	}	
}

var Hyperlink = Class.create();
Hyperlink.prototype = {
	initialize: function(object_, href_) {
		this.object = object_;
		this.href = href_;
	}
}

var Quarter = Class.create();
Quarter.prototype = {
	initialize: function(object_) {
		this.id = object_.id;
		this.object = object_;
		this.type = object_.hasClassName('horizontal') ? 'horizontal' : 'vertical';
		this.wrapers = object_.select('div.wraper');
		this.content_blocks = object_.select('div.content_block');
		this.scroll = $(object_.id + "_scroll");
		this.placeholder = $(object_.id + "_scroll").select('div.placeholder');
		this.previous_scroll = 0;
	}
}

var Viewer = Class.create();
Viewer.prototype = {
	initialize: function(object_) {
		this.object = object_;
		this.iframe = object_.select('iframe')[0];
	},
	move: function() {
		var dimensions = document.viewport.getDimensions();
		var left = (dimensions.width - 818) / 2;
		var top = (dimensions.height - 618) / 2;
		page.dimensions = dimensions;
		page.set_position({objects: this.object, top: top, left: left});
	},
	show: function(album) {
		var dimensions = document.body.getDimensions();
		var left = (dimensions.width - 818) / 2;
		var top = (dimensions.height - 618) / 2;
		
		page.dimensions = dimensions;
		this.iframe.src = '/site/viewer?album=' + album;
		page.set_position({objects: this.object, top: top, left: left});
		this.object.setStyle({'display': '', 'z-index': '999'});
		this.toggle_visibility(true, 100);
	},
	hide: function() {
		this.iframe.src = '/site/viewer';
		this.object.style.display = 'none';
		this.toggle_visibility(false, 100);
	},
	hide_if_visible: function(event) {
		if (this.visible) {
			this.hide();
		}
	},
	toggle_visibility: function(state, time) {
		var viewer = this;
		setTimeout(function() {
			viewer.visible = state;
		}, time);
	}
}

var Thumbnail = Class.create();
Thumbnail.prototype = {
	initialize: function(object_) {
		this.object = object_;
		this.href = $(object_).select('a')[0].href.gsub(/(.*)#(.*)show\/(.*)/, '#{3}');
		this.images = $(object_).select('img');
		this.images_loaded = 0;
		this.bind_events();
		this.show_image(0);
	},
	bind_events: function() {
		var thumbnail = this;
		//if (this.images.length == 3) {
		//	Event.observe(this.object, 'mousemove', function(event) {
		//		thumbnail.on_mousemove(event);
		//	});
		//}
		Event.observe(this.object, 'mousedown', function() {
			page.viewer.show(thumbnail.href);
		});
	},
	on_mousemove: function(event) {
		var position = Element.cumulativeOffset(this.object)[0];
		var mouse = event.pointerX();
		var mouse_image = mouse - position;
		var image_to_show = Math.floor(mouse_image * 3 / 200);
		
		this.show_image(image_to_show);
	},
	show_image: function(image_to_show) {
		this.images.each(function(image) {
			image.style.display = 'none';
		});
		this.images[image_to_show].style.display = '';
	}
}