var slideInterval 		= 5; // amount of time between slides in seconds

var currentSlide 		= 0;
var prevSlide 			= null;
var slides 				= $('.display_space .slide_show div');
var len 				= null;
var loop				= null;



function initSlideNav() {
	
	slides = $('.display_space .slide_show div');
	len = slides.length;

	if (len <= 1) return;
	
	
	
	// write list
	var list = '<ul>';
	
	// left arrow
	list += '<li id="slideshow_left_arrow"></li>';		
	
	// dots
	for (i=0; i <= len-1; i++) {
		list += '<li id="slide_' + i + '"></li>';		
	};
	
	// right arrow
	list += '<li id="slideshow_right_arrow"></li>';		
	
	list += '</ul>';
	$('.display_space .slide_show_nav').append(list);
	
	
	
	
	// enable list
	for (i=0; i <= len-1; i++) {
		if (i != currentSlide) {
			$(slides[i]).animate({opacity: 0}, 0);
		
		} else {
			$('#slide_'+i).addClass('selected');
		}
		
		$('#slide_'+i).bind("click",{index:i},function(event){
				stopSlideShow();
		        currentSlide = event.data.index;
		        gotoSlide(event.data.index);
		});
		
		
	}
	
	$('#slideshow_left_arrow').bind("click",function(event){
			stopSlideShow();
	        decrementSlide();
	});
	
	
	$('#slideshow_right_arrow').bind("click",function(event){
			stopSlideShow();
	        incrementSlide();
	});
	
	 	
	
	$(slides[currentSlide]).animate({opacity: 1.0}, 500).addClass('active');
	$('#slide_'+currentSlide).addClass('selected');
}


function startSlideShow() {
	loop = setInterval( incrementSlide, slideInterval*1000 );
}

function stopSlideShow() {
	if (loop) clearInterval(loop);
}


function incrementSlide() {
    if (currentSlide >= len -1){
        currentSlide = 0;
    }else{
        currentSlide++;
    }

    gotoSlide(currentSlide);
	
}

function decrementSlide() {
    if (currentSlide <= 0){
        currentSlide = len - 1;
    }else{
        currentSlide--;
    }

    gotoSlide(currentSlide);
	
}


function gotoSlide(slideNum) {
	
	if (slideNum != prevSlide) {

		if (prevSlide == null) prevSlide = 0;
	
		$(slides[prevSlide]).animate({opacity: 0}, 500,function() {
		    $(this).removeClass('active').addClass('last-active');
        });

		$(slides[slideNum]).animate({opacity: 1.0}, 500).addClass('active').removeClass('last-active');
		
		$('#slide_'+prevSlide).removeClass('selected');			
		$('#slide_'+slideNum).addClass('selected');
	
		prevSlide = currentSlide;
		
	}
	
	

}

$(document).ready(function() {
	initSlideNav();
});