var mySlideShow;

window.addEvent('domready',function(){
	
	// instance with a few options
	mySlideShow = new SlideShow('slides',{
		delay: 3000,
		autoplay: false
	});
	
	// these will control the slideshow
	var navs = $('conteneur_informations').getElements('.nav li');

		// add click events to the elements
		navs.each(function(element, index){
			element.addEvent('click', function(){
				// going to figure the current index of the slideshow
				// and change the transition to go the "right" way
				// so it feels like a typical "panel" kind of widget
				var currentIndex = mySlideShow.slides.indexOf(mySlideShow.current);
				var transition = (currentIndex < index) ? 'pushLeft' : 'pushRight';
				// ignoring the last two lines this is really
				// quite simple, the indicies of the nav elements
				// and the slide elements match ... so just show the index
				mySlideShow.show(index, { transition: transition });
			});
		});
		
		mySlideShow.addEvent('show', function(slideData){
			navs[slideData.previous.index].morph('.normal');
			navs[slideData.next.index].morph('.current');
		});
		
		// set the initial slide to current
		navs[0].morph('.current');
		
		// add Keyboard
		$(document).addEvent('keyup', function(event){
			// couldn't be any easier!
			if (event.key == 'left')
				mySlideShow.showPrevious({ transition: 'pushRight' });
			else if (event.key == 'right')
				mySlideShow.showNext({ transition: 'pushLeft' });
		});
		
	
	// the rest of the demo showing how to control the instance
	var toggled = [$('showAccueil'), $('showMonsieurCitron'), $('showAsie360'), $('showBlogAnd'), $('showReferences'), $('showContacts'), $('showLogo')];
	
	$('showAccueil').addEvent('click',function(){
		mySlideShow.show(0);
	});
	
	$('showMonsieurCitron').addEvent('click',function(){
		mySlideShow.show(1);
	});
	
	$('showAsie360').addEvent('click',function(){
		mySlideShow.show(2);
	});
	
	$('showBlogAnd').addEvent('click',function(){
		mySlideShow.show(3);
	});
	
	$('showReferences').addEvent('click',function(){
		mySlideShow.show(4);
	});
	
	$('showContacts').addEvent('click',function(){
		mySlideShow.show(5);
	});
	
	$('showLogo').addEvent('click',function(){
		mySlideShow.show(6);
	});

});