var thumbs = {

	screen: null,
	
	thumbs: [],
	
	links: [],
	
	features: [],

	init: function() {
		thumbs.screen = document.getElement('.screen');
		thumbs.thumbs = document.getElements('.thumb .fader');
		var links = document.getElements('.thumb .fader');
		
		thumbs.features = document.getElements('.features .feature');
		
		thumbs.links = links.map(function(item) { return item.get('href'); });
		links.each(function(url) {
			new Image().src = url;
		});
		
		thumbs.thumbs.addEvent('click', function(event) {
			event.stop();
			
			var currentThumb = document.getElement('.thumbs .current');
			var thumb = event.target.getParent('.thumb');
			var url = event.target.get('href');
			if (!url) return;

			var id;
	    if (/thumb-(\d+)/i.test(thumb.className)) {
	      id = RegExp.$1.toInt();
	    }
			var currentFeature = document.getElement('.features .current');
			var nextFeature = document.getElement('.features .feature-' + id);

			thumbs.thumbDown(currentThumb);
			thumbs.thumbUp(thumb);
			
			new Fx.Tween(thumbs.screen, {
				onComplete: function() {
					thumbs.screen.getElement('img').src = url;
					(function() {
						thumbs.screen.tween('opacity', 1);
					}).delay(50);
				}
			}).start('opacity', 0);
			
			if (currentFeature) {
				new Fx.Tween(currentFeature, {
					onComplete: function() {
						if (nextFeature) {
							nextFeature.setStyles({
								opacity: 0,
								display: 'block'
							}).tween('opacity', 1).addClass('current');
						}
					}
				}).start('opacity', 0);
				currentFeature.removeClass('current');
			}
		});

		// Load first
		/*if (thumbs.links.length > 0) {
			thumbs.screen.getElement('img').src = thumbs.links[0];
			(function() {
				thumbs.screen.tween('opacity', 1);
			}).delay(50);
		}*/
	},
	
	thumbDown: function(thumb) {
		if (!thumb) return;
		var bk = thumb.getElement('.bk');
		var img = thumb.getElement('img');
		var fader = thumb.getElement('.fader');

		bk.hide();
		fader.hide();

		new Fx.Tween(img, {
			transition: Fx.Transitions.Expo.easeOut,
			duration: 150,
			onComplete: function() {
				fader.show();
				bk.setStyles({
					opacity: 1,
					display: 'block',
					visibility: 'visible'
				});
		    thumb.removeClass('current');
			}
		}).start('top', 13);
	},
	
	thumbUp: function(thumb) {
		if (!thumb) return;
		var bk = thumb.getElement('.bk');
		var img = thumb.getElement('img');
		var fader = thumb.getElement('.fader');

		bk.hide();
		//fader.hide();

		new Fx.Tween(img, {
			transition: Fx.Transitions.Expo.easeOut,
			duration: 150,
			onComplete: function() {
				bk.show();
		    thumb.addClass('current');
			}
		}).start('top', 7);
	}

};

window.addEvent('domready', thumbs.init);