window.addEvent('domready', function() {
	var scroll = new Fx.Scroll('stl_planning', {
		wait: false,
		duration: 1500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	var scroll2 = new Fx.Scroll('subslide1', {
		wait: false,
		duration: 1500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	var scroll3 = new Fx.Scroll('bigpage', {
		wait: false,
		duration: 1500,
		transition: Fx.Transitions.Quad.easeInOut
	});

	$$('a[href^="#main_"]').addEvent('click', function(e) {
		new Event(e).stop();
		scroll.toElement($E(this.getProperty('href')));
	});
	$$('a[href^="#sub_"]').addEvent('click', function(e) {
		new Event(e).stop();
		scroll2.toElement($E(this.getProperty('href')));
	});
	$$('a[href^="#big_"]').addEvent('click', function(e) {
		new Event(e).stop();
		scroll3.toElement($E(this.getProperty('href')));
	});
	
	var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar'); 
	var path = 'http://danielerrante.local/~danielerrante/ezslide/images/';
	var images = [
		path + 'bike1.jpg',
		path + 'bike2.jpg', 
		path + 'bike3.jpg', 
		path + 'bike4.jpg', 
		path + 'bike5.jpg'
	];
	gallery.setStyles({'opacity': 0, 'display': 'none'});
	progress.setStyle('visibility', 'hidden');
	$('clear').setStyle('visibility', 'hidden');

	$('start').addEvent('click', function(e) {
		e = new Event(e).stop();
		$('start').setStyle('visibility', 'hidden');
		$('clear').setStyle('visibility', 'hidden');
		if (!busy) {

			var galleryImgs = $$('#gallery img');
			if (galleryImgs.length > 0) galleryImgs.each(function(image) {	image.remove();	});

			busy = true;
			progress.setStyle('visibility', 'visible');
			gallery.setStyle('display', 'block');
			new Asset.images(images, {
				onProgress: function(i) {
					this.setStyles({
						'position': 'absolute',
						'opacity': 0,
						'left': (gallery.getCoordinates().width / 2) - (this.width / 2),
						'top': (gallery.getCoordinates().height / 2) - (this.height / 2)
					});
					loadedImages[i] = this;
					var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
					bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
				},
				onComplete: function() {
					progress.setStyle('visibility', 'hidden');
					var fx = $('gallery').effect('opacity').start(1);
					timer = 0;
					loadedImages.each(function(image, i) {
						timer += 1500;
						image.inject(gallery);
						fx = function() {
							var imgEffect = image.effect('opacity', {duration: 1500});
							imgEffect.start(1).chain(function() {
								if (i < loadedImages.length - 1) {
									this.start(0).chain(function() {
										image.remove();
									});
								} else {
									busy = false;
									$('clear').setStyle('visibility', 'visible');
									$('start').setStyle('visibility', 'hidden');
								}
							});

						}.delay(timer * 2);
					});
				}
			});
		}
	});

	$('clear').addEvent('click', function(e) {
		e = new Event(e).stop();
		if (!busy) {
			$$('#gallery img').each(function(image) {
				image.remove();
			});
			var fx = new Fx.Style(gallery, 'opacity', {
				onComplete: function() {
					gallery.setStyle('display', 'none');
				}
			});
			fx.start(0);
		}
		$('clear').setStyle('visibility', 'hidden');
		$('start').setStyle('visibility', 'visible');
	});
	
	var mySlide = new Slider($('area'), $('knob'), {
		steps: 5,
		onChange: function(step){
			scroll.toElement($E('#main_layer' + (step + 1)));
		}
	}).set(0);

	$('knob').setOpacity(0.5);
	
	
});