window.addEvent('domready', function() {

	$('head').fade('hide').setStyle('top', -65);
	
	dropTop();
	
	
	// slides...
	
	var current = 1;
	window.current = current;
	
	// var slides = $('slides').getChildren();
	var slides = $$('div.slide');
	
	for (var i = 0; i < slides.length; i++) {
	
		var x = i + 1;
		
    	var numb = new Element('span', {
    		'id': 'number' + x
    	})
		.set('html', '0' + x)
       	.inject($('numbers'));
       
       var slide = $('slides').getElements('div.slide')[i];
       
       slide.setProperty('id', 'slide' + x);
       
	}
	
	for (var i = 1; i < slides.length; i++) { // note the "i = 1" (vs. 0)
		
		var other = $('slide' + (i + 1)); // all slides but the first one
		
		other.setStyle('top', -340);
		
	}
	
	$('number1').addClass('x');
	
	var timer = (function() {
		gotoNext();
	}).periodical(9000); // delay between slide transitions;
		
	window.timer = timer;
	
	$('prev').addEvent('click', function() {
		return false;
    })
    .addEvent('mouseup', function() {
		gotoPrev();
		clearInterval(timer);
    });
    
    $('next').addEvent('click', function() {
		return false;
    }).addEvent('mouseup', function() {
		gotoNext();
		clearInterval(timer);
    });

});

function gotoNext() {

	// var slides = $('slides').getChildren();
	var slides = $$('div.slide');
	
	slides.each(function(e) {
		e.setStyle('z-index', 0);
	});
	
	var x = current;
	var next = x + 1;
	
	if (next > slides.length) {
		next = 1;
	}
	
	var slide = $('slide' + next);
	slide.setStyle('z-index', 1);
	
	var animation = new Fx.Tween(slide);
	animation.start('top', -340, 0);
	
	window.current = next;
	
	(function() {
		clearNumbers();
		$('number' + current).addClass('x');
	}).delay(500);

	(function() {
	
		var last = current - 1;
		
		if (last == 0) {
			last = slides.length;
		}
		
		$('slide' + last).setStyle('top', -340);
		
	}).delay(750);
	
}

function gotoPrev() {
	
	// var slides = $('slides').getChildren();
	var slides = $$('div.slide');
	
	slides.each(function(e) {
		e.setStyle('z-index', 0);
	});
	
	var x = current;
	var prev = x - 1;
	
	if (prev == 0) {
		prev = slides.length;
	}
	
	var slide = $('slide' + prev);
	slide.setStyle('z-index', 1);
	
	var animation = new Fx.Tween(slide);
	animation.start('top', 340, 0);
	
	window.current = prev;
	
	(function() {
	
		clearNumbers();
		$('number' + current).addClass('x');
		
	}).delay(500);

	(function() {
	
		var last = current + 1;
		
		if (last == slides.length + 1) {
			last = 1;
		}
		
		$('slide' + last).setStyle('top', -340);
		
	}).delay(500);
	
}

function clearNumbers() {

	var numbers = $('numbers').getChildren();
	
	numbers.each(function(e) {
		e.removeClass('x');
	});
	
}

function dropTop() {
	
	$('head').fade('show');
	
	 var topSlide = new Fx.Morph('head', {duration: 400, transition: Fx.Transitions.Circ.easeOut});
	 
	(function() {
		topSlide.start({'top': 0});
	}).delay(1100);
	
}