window.addEvent('domready', function() {
		listMagic();
	});

	var listMagic = function() {
		$$('.item').each(function(el) {

		   var b = el.getElement('b');

			new Element('a', {
				'href': '#',
				'class': 'nav prev invisible',
				'title': strings['previous screen'],
				'events': {
					'click': switchScreen
				}
			})
			.setHTML('«')
			.inject(b);

			new Element('a', {
			'href': '#',
				'class': 'nav next invisible',
				'title': strings['next screen'],
				'events': {
					'click': switchScreen
				}
			})
			.setHTML('»')
			.inject(b);

			el.addEvents({
				'mouseenter': function() {
					u.reveal(this.getElement('.prev'), this.getElement('.next'));
				},
				'mouseleave': function() {
					u.hide(this.getElement('.prev'), this.getElement('.next'));
				}
			});

			el.getElement('a.screen').current = 1;

		}, this);

		$$('.pager a').each(function(el) {
			el.addEvent('click', function(e) {
				e = new Event(e).stop();
				switchPage(this);
			});
		});
	};

	var switchScreen = function(e) {
		e = new Event(e).stop();
		this.blur();
		var p = this.getParent().getElement('a.screen'),
			 d = (this.hasClass('prev')) ? 'prev' : 'next';

		if (d == 'next')
			p.current += (p.current == 3) ? -2 : 1;
		else
			p.current -= (p.current == 1) ? -2 : 1;

		if (!p.getElement('.s' + p.current)) {
		   var w = new Element('div', {'class': 'wait', 'styles': {'opacity': .8}}).inject(p.getParent());
			var imgUrl = p.getFirst().src.replace(/[1-3]{1}\.jpg$/gi, p.current + '.jpg');
			new Asset.image(imgUrl, {
				'class': 's' + p.current + ' invisible',
				'styles': {'opacity': 0},
				'onload': function() {
					w.remove();
					this.inject(p);
					doSwitch(p);
				}
			});
		}
		else
			doSwitch(p);
	};

	var doSwitch = function(p) {
		p.getChildren().each(function(el) {
			if (el.hasClass('s' + p.current)) 
				u.reveal(el);
			else 
				u.hide(el);
		}, this);
	};

	var switchPage = function(oLink) {
		
		oLink.blur();	
		if (oLink.hasClass('selected'))
			return;

		var c = $('contents');
		var fadeFx = new Fx.Styles(c, {'duration': 400});

	   // Show wait indicator
	   var w = new Element('div', {'class': 'wait', 'styles': {'opacity': .8, 'top': 340}}).inject($('listing'));

	   // Hide content container
	   fadeFx
	   	.start({'opacity': 0})
	   	.chain(function() {
	   		
		// Get new page contents from server
				new Ajax(oLink.getProperty('href') + '?ajax', {
					'method': 'get',
					'update': c,
					'onComplete': function() {
		// If the transmission is ok:
		//  - Do the listing magic
						listMagic();
		//  - Hide wait indicator
						w.remove();
		//  - Reveal content container
					   fadeFx.start({'opacity': 1});
		// Take care of the URL's in links section
						var pageTitle = $E('h1').getText().trim();
						$('linkURL').value = oLink.href;
						$('linkHTML').value = "<a href=\"" + oLink.href + "\">" + pageTitle + "</a>";
						$('linkForum').value = '[url=' + oLink.href + ']' + pageTitle + '[/url]';
					},
					'onFailure': function() {
		// If the transmission isn't ok:
		//  - Hide wait indicator
						w.remove();
		//  - Reveal content container
					   fadeFx.start({'opacity': 1});
					}
				}).request();

	   	});
	}