Locations = Class.create({
	initialize: function(p, o, c, k) {
		this.p  = $(p);
		this.pp = $$(o);
		this.c  = $(c);
		this.cc = $$(k);
		
		if(this.cc[0] != null) {
			this.cc[0].className = 'active';
		
			this.observe();
		}
	},
	
	observe: function() {
		this.index = 0;	this.i = 0;
		
		this.p.observe('click', function(e) {
			a = Event.element(e).innerHTML;	this.i = 0;
			
			this.pp.each(function(b) {
				this.i++;
				if(a == b.innerHTML) {
					this.index = this.i;
					
					this.show(this.index);
				}
			}.bind(this));
		}.bind(this));
	},
	
	show: function(i) {
		this.a = $$('span.active')[0];
		
		new Effect.Move(this.a, { y:-147, x:0, afterFinish: function() {
			this.a.className = '';
			if(document.all) {
				this.a.setAttribute('style', 'top:147px; display:none;');
			} else {
				this.a.style.cssText += 'top:147px;';
			}
		}.bind(this)});
		new Effect.Move(this.cc[(i-1)], {y:-147, x: 0, afterFinish: function() {
			this.cc[(i-1)].className = 'active';
		}.bind(this),
		beforeFinish: function() {
			this.cc[(i-1)].style.display = 'block';
		}.bind(this)});
	}
});

document.observe('dom:loaded', function() {
	new Locations('nav', 'ul#nav li a', 'slideshow', 'div#slideshow span');
});