var initial = 0;
var currentImage = null;
var thumbnailsOpacity = null;
var infoOpacity = null;
var previousStyles = null;
var nextStyles = null;
var viewFullStyles = null;

window.addEvent('domready', function() {
	initial = 1;
	
	scroller = new Scroller('thumbnails', {
		area : 100,
		velocity : 0.5
	});
	scroller.start();
	
	$('go_previous').setOpacity(0);
	$('go_next').setOpacity(0);
	$('view_full').setOpacity(0);
	$('thumbnails_floater').setOpacity(0);
	$('info_floater').setOpacity(0);
	$('info_label').setOpacity(0);

	previousStyles = new Fx.Styles('go_previous', {duration:250});
	nextStyles = new Fx.Styles('go_next', {duration:250});
	viewFullStyles = new Fx.Styles('view_full', {duration:250});
	
	thumbnailsOpacity = new Fx.Style('thumbnails_floater', 'opacity', {duration:250});
	infoOpacity = new Fx.Style('info_floater', 'opacity', {duration:250});
	
	$('thumbnails_label').addEvent('mouseover', function() {
		floaterFadeIn($('thumbnails_floater'), thumbnailsOpacity, infoOpacity);
	});
	$('info_label').addEvent('mouseover', function() {
		floaterFadeIn($('info_floater'), infoOpacity, thumbnailsOpacity);
	});
});

window.addEvent('load', function() {
	for (i=31; i<=246;i++){
		new Asset.image('photos/' + i + '.thumb.jpg', {
			id : 'photo_' + i,
			title : i,
			'onmouseover' : 'thumbnailFadeIn(' + i + ')',
			'onmouseout' : 'thumbnailFadeOut(' + i + ')',
			'onclick' : 'showImage(' + i + ')',
			onload : function() {
				this.setOpacity(0.4);
				this.injectInside('thumbnails');
			}
		});
	}
});

function floaterFadeIn(wrapper, opacity, otherOpacity) {
	otherOpacity.set(0);
	opacity.start(0,1);
	wrapper.addEvent('mouseleave', function() {
		floaterFadeOut(wrapper, opacity)
	});
}

function floaterFadeOut(wrapper, opacity) {
	wrapper.removeEvents('mouseleave');
	opacity.start(1,0);
}

function thumbnailFadeIn(id) {
	new Fx.Style('photo_' + id, 'opacity', { duration:250 }).start(0.4,1);
	 $('thumbnails_info').setText(id + " of 246");
}

function thumbnailFadeOut(id) {
	new Fx.Style('photo_' + id, 'opacity', { duration:250 }).start(1, 0.4);
	
	if (currentImage == null)
		$('thumbnails_info').setText('browse me!');
	else {
		id = currentImage.title;
		$('thumbnails_info').setText('Current Image: ' + id);
	}
}

function showImage(id) {
	var element = null;
	if (initial == 1) {
		initial = 0;
		element = $('the_text');

		nextStyles.start({'opacity' : 0.1});
		previousStyles.start({'opacity' : 0.1});
		viewFullStyles.start({'opacity' : 0.1});
		
		attachFade($('go_previous'), previousStyles);
		attachFade($('go_next'), nextStyles);
		
		new Fx.Style('info_label', 'opacity').start(0,1);
		
		$('image').setStyles({
			'background' : 'url(images/loader.gif) no-repeat scroll center center'
		});
	}
	else {
		element = currentImage;
	}
	
	fadeAndRemove(element, id);
}

function fadeAndRemove(element, id) {
	if (element == null) loadImage(id);
	else {
		new Fx.Style(element.id, 'opacity').start(1,0).chain(function() {
			element.remove();
			loadImage(id);
		});
	}
}

function loadImage(id) {
	var the_image = new Asset.image(
		'photos/' + id + '.jpg', {
			'id' : 'photophoto',
			'title' : id,
			onload : function() {
				var left = (1005 - this.width) / 2;
				this.setStyles({
					'margin-left' : left,
					opacity : 0
				});
				$('image').appendChild(this);
				new Fx.Style(this.id, 'opacity').start(0,1)
				currentImage = this;
				
				if (id <= 1)
					previousStyles.start({'opacity' : 0});
				else if (id >= 246)
					nextStyles.start({'opacity' : 0})
				else {
					if ($('go_previous').getStyle('opacity').toInt() < 0.1)
						previousStyles.start({'opacity' : 0.2});
					if ($('go_next').getStyle('opacity').toInt() < 0.1)
						nextStyles.start({'opacity' : 0.2})
				}
			}
	});
}

function attachFade(element, styles) {
	element.addEvent('mouseover', function() {
		styles.start({
			'opacity' : [0.1, 0.5],
			'color' : '#E6A100'
		});
	});
	element.addEvent('mouseout', function() {
		styles.start({
			'opacity' : [0.5, 0.1],
			'color' : '#dddddd'
		});
	});
}

function goPrevious() {	
	go(-1);
}

function goNext() {
	go(1);
}

function go(amount) {
	var id = 0;
	
	if (currentImage == null) id = (amount > 0) ? 247 : 0;
	else id = currentImage.title.toInt();

	showImage(id + amount);
}