/*

Mootools inspired menu (I know they're getting boring - but it's perfect for what I wanted to achieve here)

*/

var Site = {
	
	start: function(){
		
		if ($('PortMenu')) Site.parsePortMenus();
	},
	
	parsePortMenus: function(){
		var PortMenus = $$('#PortMenu .PortMenu');
		var fx = new Fx.Elements(PortMenus, {wait: false, duration: 500, transition: Fx.Transitions.backOut});
		PortMenus.each(function(PortMenu, i){
			PortMenu.addEvent('mouseenter', function(e){
				var obj = {};
				obj[i] = {
					'width': [PortMenu.getStyle('width').toInt(), 180]
				};
				PortMenus.each(function(other, j){
					if (other != PortMenu){
						var w = other.getStyle('width').toInt();
						if (w != 48) obj[j] = {'width': [w, 48]};
					}
				});
				fx.start(obj);
			});
		});
		
		$('PortMenu').addEvent('mouseleave', function(e){
			var obj = {};
			PortMenus.each(function(other, j){
				obj[j] = {'width': [other.getStyle('width').toInt(), 50]};
			});
			Client4.each(function(other, j){
				obj[j] = {'width': [other.getStyle('width').toInt(), 150]};
			});
			fx.start(obj);
		});
	}

};

window.addEvent('load', Site.start);

// Screenshot manager

function ScreenManager(cont) {
		this.container = document.getElementById(cont);
		this.items = this.container.getElementsByTagName('ul')[0].getElementsByTagName('li');
		this.buildMenu();	
		this.setSelected(0);		
	};

	ScreenManager.prototype.buildMenu = function() {
		if(this.items.length > 1) {
			
			var prev = document.createElement('a');
			var next = document.createElement('a');
			
			prev.appendChild(document.createTextNode('< prev'));
			next.appendChild(document.createTextNode('next >'));
			prev.setAttribute("href", "#");
			next.setAttribute("href", "#");
			prev.setAttribute("id", "prev");
			next.setAttribute("id", "next");
			prev.setAttribute("class", "nav");
			next.setAttribute("class", "nav");
			
			var me = this;
			prev.onclick = function() {
				me.setSelected(me.current - 1);
				return false;
			}
			next.onclick = function() {
				me.setSelected(me.current + 1);
				return false;
			}
			
			this.menu = document.createElement('ul');
			for(j = 0; j < this.items.length; j++) {
				var li = document.createElement('li');
				
				var a = document.createElement('a');			
				a.appendChild(document.createTextNode(j+1));
				a.setAttribute("href", "#");
				a.setAttribute("title", "Screenshot "+j);
				a.itemNumber = j;
				var me = this;
				a.onclick = function() {
					me.setSelected(this.itemNumber);				
					return false;
				}
				j == 0 ? li.className = "selected" : 0;
				li.appendChild(a);
				this.menu.appendChild(li);			
			}
			this.menu.id = "thumbnails";
			
			this.container.appendChild(prev);
			this.container.appendChild(next);
			this.container.appendChild(this.menu);				
		}
	}

	ScreenManager.prototype.setSelected = function(index) {
		index < 0 ? index = this.items.length - 1 : 0; 
		index == this.items.length ? index = 0 : 0; 
		
		this.current = index;
		this.clearAll();
		this.items[index].style.display = "block";	
		this.menu.getElementsByTagName('li')[index].className = "selected";			
	}

	ScreenManager.prototype.clearAll = function() {
		for(k = 0; k < this.items.length; k++) { this.items[k].style.display = "none"; }	
		var links = this.menu.getElementsByTagName('li');
		for(l = 0; l < links.length; l++) {
			links[l].className = null;
		}
	}


	
	var menu = new ScreenManager('screenshots');