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

	// memory saving
	banners = $$('.banner');
	links = $$('.banners a');
	
	// set up styles
	banners.setStyles({
		'opacity': 0,
		'display': 'block',
		'height': 284,
		'width': 800
	});
	
	(function(){

		// drop our nav element
		$$('.banners').tween('margin-top', 489);
		
		// utility function
		changeBanner = function(i){
			banners.tween('opacity', 0);
			links.removeClass('selected');
			(function(){ 
				banners[i].tween('opacity', 1);
				links[i].addClass('selected');
			}.delay(500));
		};
		
		// set up links to work
		links.addEvent('click', function(ev){
		
			if (ev) ev.stop();
			
			// work out which banner to select
			var c = this.getProperty('href').replace(document.location, '').replace('#banner', '');
			
			$clear(p);
			
			// change banner
			changeBanner(c-1);
		
		});
		
		// setup periodical
		pf = function(){
			sel = 0;
			links.each(function(el, i){
				if (el.hasClass('selected')){
					sel = i;
				}
			});
			sel = sel + 1;
			if (sel > links.length - 1) sel = 0;
			changeBanner(sel);
		};
		
		p = pf.periodical(7000);
		
		// show first banner
		changeBanner(0);
	
	}.delay(2000));

});