slides = null ;
timeout = null ;
slidePosition = null ;

$(document).ready(function() {
	slides = $('.slide-wrapper') ;
	slide = slides.first() ;
	slidePosition = slide.offset() ;
	var index = 0 ;
	var prev = slides.last() ;
	slide.css('opacity', '1.0') ;
	slides.offset(slidePosition) ;
	
	var controls = $('.jFlowControl') ;
	var controlIndex = 0 ;
	while(controlIndex < controls.length) {
		var control = controls.eq(controlIndex) ;
		control[0].index = controlIndex ;
		control.click(function() {
			slides.eq(index).css('opacity', '0.0') ;
			controls.eq(index).removeClass('jFlowSelected') ;
			
			index = this.index ;
			
			controls.eq(index).addClass('jFlowSelected') ;
			slide = slides.eq(index) ;	

			slide.css('opacity', '1.0') ;
			slide.offset(slidePosition) ;
			slide.css('z-index', '200') ;
			slide.children('.latest-quote').css('z-index', '300') ;
			
			clearTimeout(timeout) ;
			timeout = setTimeout(nextSlide, 4000) ;
		}) ;
		++controlIndex ;
	}

	function goToSlide(i) {
		slide.css('z-index', '0') ;
		slide.children('.latest-quote').css('z-index', '100') ;		
		controls.eq(index).removeClass('jFlowSelected') ;
		
		index = i ;
		if(index >= slides.length)
			index = 0 ;
		
		slide = slides.eq(index) ;
		if(!index)
			prevIndex = slides.length-1 ;
		else
			prevIndex = index-1 ;
		
		prev = slides.eq(prevIndex) ;		
		
		slide.offset(slidePosition) ;
		slide.css('z-index', '200') ;		
		slide.children('.latest-quote').css('z-index', '300') ;
		
		slide.animate({opacity: '1'}, 1000, function() {
				prev.css('opacity', '0') ;
				prev.css('z-index', '0') ;
				prev.children('.latest-quote').css('z-index', '100') ;		
			}
		) ;		
		
		controls.eq(index).addClass('jFlowSelected') ;
		
		clearTimeout(timeout) ;
		timeout = setTimeout(nextSlide, 4000) ;
	}
	
	function nextSlide() {
		goToSlide(index+1) ;
	}
	timeout = null ;
	goToSlide(0) ;
}) ;