window.onload = function()
{
	var screens = document.getElementById('screens');
	var links = screens.getElementsByTagName('a');
	
	Imagebox = new Imagebox();
	Imagebox.init(links);
}	

Imagebox = function()
{
	var self = this;
	this.node = document.getElementById('imagebox');
	this.image = document.getElementById('imagebox-image');
	this.overlay = document.getElementById('overlay');
	this.navPrev = document.getElementById('imagebox-prev');
	this.navNext = document.getElementById('imagebox-next');
	this.navClose = document.getElementById('imagebox-close');
	this.links = [];
	this.current = 0;
	this.expanded = false;
	this.padding = 10;
	
	this.init = function(links)
	{
		for (var i = 0; i < links.length; i++) {
			links[i].onclick = function() {
				self.show(this);
				return false;
			}
		}
		this.links = links;
		
		this.navPrev.onclick = function() {
			self.prev();
			return false;
		}
		this.navNext.onclick = function() {
			self.next();
			return false;
		}
		this.navClose.onclick = function() {
			self.hide();
		}
	}
	
	this.hide = function()
	{
		this.node.style.display = 'none';
		this.overlay.style.display = 'none';
	}
	
	this.show = function(link)
	{
		this.navHide();
		this.imageHide();
		this.overlay.style.display = 'block';
		this.node.style.display = 'block';
		
		var links = this.links;
		var index = 0;
		while (index < links.length && link !== links[index]) {
			index++;
		}
		if (this.expanded) {
			this.imageChange(index);
			return;
		}
		
		var hInc = 35 - 2 * this.padding;
		var wInc = 40 - 2 * this.padding;
		var timer = window.setInterval(expandHeight, 15);
		
		function expandHeight()
		{
			var h = self.node.offsetHeight;
			if (h < 500) {
				self.node.style.height = h + hInc + 'px';
				return;
			}
			window.clearInterval(timer);
			timer = window.setInterval(expandWidth, 15);
		}
		
		function expandWidth()
		{
			var w = self.node.offsetWidth;
			if (w < 728) {
				self.node.style.width = w + wInc + 'px';
				self.node.style.marginLeft = -(w + wInc) / 2 + 'px';
				return;
			}
			window.clearInterval(timer);
			window.setTimeout(imageChange, 100);
			self.expanded = true;
		}
		
		function imageChange()
		{
			self.imageChange(index);
		}
	}
	
	this.imageChange = function(index)
	{
		var link = this.links[index];
		if (!link) {
			return false;
		}
		this.navHide();
		this.imageHide();
		this.image.src = link.href;
		this.current = index;
	}
	
	this.imageHide = function()
	{
		setOpacity(this.image, 0);
	}
	
	this.imageShow = function()
	{
		var opacity = 0;
		var timer = window.setInterval(opacityIncrement, 10);
		
		function opacityIncrement()
		{
			if (opacity < 1) {
				opacity += 0.02;
				setOpacity(self.image, opacity);
				return;
			}
			window.clearInterval(timer);
			self.navShow();
		}
	}
	
	this.next = function()
	{
		var index = this.current;
		index += 2;
		if (index >= this.links.length) {
			index = 0;
		}
		this.imageChange(index);
	}
	
	this.prev = function()
	{
		var index = this.current;
		index -= 2;
		if (index < 0) {
			index = this.links.length - 1;
		}
		this.imageChange(index);
	}
	
	this.navShow = function()
	{
		if (this.links.length < 2) {
			return;
		}
		this.navNext.style.display = 'block';
		this.navPrev.style.display = 'block';
	}
	
	this.navHide = function()
	{
		this.navNext.style.display = 'none';
		this.navPrev.style.display = 'none';
	}
	
	this.overlay.onclick = function()
	{
		self.hide();
	}
	
	this.image.onload = function()
	{
		var node = self.node;
		var image = self.image;
		var padding = 2 * self.padding;
		
		var hLimit = image.offsetHeight;
		var hDiff = node.offsetHeight - padding - hLimit;
		var hInc = hDiff > 0 ? -6 : 6;
		var wLimit = image.offsetWidth;
		var wDiff = node.offsetWidth - padding - wLimit;
		var wInc = wDiff > 0 ? -6 : 6;
		
		var timer = window.setInterval(resize, 15);
		
		function resize()
		{
			if (Math.abs(hDiff) < 14) {
				hInc = hDiff > 0 ? -1 : 1;
			}
			if (hDiff != 0) {
				hDiff += hInc;
				node.style.height = hLimit + hDiff + 'px';
				node.style.marginTop = -(hLimit + hDiff) / 2 + 'px';
			}
			
			if (Math.abs(wDiff) < 14) {
				wInc = wDiff > 0 ? -1 : 1;
			}
			if (wDiff != 0) {
				wDiff += wInc;
				node.style.width = wLimit + wDiff + 'px';
				node.style.marginLeft = -(wLimit + wDiff) / 2 + 'px';
			}
			
			if (hDiff || wDiff) {
				return;
			}
			window.clearInterval(timer);
			self.imageShow();
		}
	}
	
	function setOpacity(elem, value)
	{
		var undef;
		if (elem.style.opacity !== undef) {
			setOpacity = function(elem, value) {
				elem.style.opacity = value;
			}
		} else if (document.body.filters) {
			setOpacity = function(elem, value) {
				elem.style.filter = 'alpha(opacity=' + 100 * value + ')';
			}
		} else {
			setOpacity = function() {}
		}
		setOpacity(elem, value);
	}
}