window.addEvent('domready', function(){
	mySlideShow = new SlideShow('slide_show_img',{
		delay: 5000,
		transition: 'fade',
		duration: 400,
		autoplay: true,
		onShow: function(slideData) {
				var slideLabels = $$('#slideshow-navigation ul li');
				slideLabels[slideData.previous.index].removeClass('active');
				slideLabels[slideData.next.index].addClass('active');
			}
	});

	var slideLabels = $$('#slideshow-navigation ul li');
	slideLabels.each(function(el, index){
		el.store('slide', mySlideShow.slides[index]);
		el.addEvent('click',function(){
			mySlideShow.pause();
			(function(){mySlideShow.play();}).delay(7000);
			mySlideShow.show(el.retrieve('slide'));
		});
		if (index == 0) {
			el.addClass('active');
		}
	});
	var navLeft  = new Element('div', {id: 'navLeft', 'class': 'nav_arrow'});
	var navRight  = new Element('div', {id: 'navRight', 'class': 'nav_arrow'});
	navLeft.addEvent('click', function(){mySlideShow.showPrevious();});
	navRight.addEvent('click', function(){mySlideShow.showNext();});

	navLeft.inject($('slideshow-navigation'), 'after');
	navRight.inject($('slideshow-navigation'), 'after');
});