$(document).ready(function(){
	
	//Slider
	start_slider();
	
});


var slider, nav, total, images, infoWindow, timer
	
	current 		= 0,
	paused 			= true, 
	animating 		= false,
	slideSpeed 		= 1000,
	slideDelay 		= 6000,
	infoWindowSpeed	= 300;

function start_slider () {
	
	slider		= $('.slideshow');
	nav			= slider.find('.nav');
	infoWindow	= slider.find('.info');
	images		= slider.find('img.slide')
	total 		= images.length;
	
	//Only setup slider if more than one image...
	if(total > 1){
		_setup_initial_states()
		_setup_events();
		_setup_listeners();
		_pause();
	}
}


function _setup_initial_states () {
	
	//JS is enabled, so show the slider controls, stack it on top
	nav.css({'zIndex' : '10', 'display' : 'block'});
	
	//Make sure the info window is above the images
	infoWindow.css({'zIndex' : '10'})
	
	//Hide all but the first image (set to current in case we want to start at a higher number)
	images.eq(current).css({'zIndex' : '5', 'display' : 'block'})
	
	//Hide everything else
	for( i in images){
		if(i != current){
			images.eq(i).css({'display' : 'none', 'zIndex' : '0'})
		}
	}
}




// ================================
// = Register custom click events =
// ================================
function _setup_events () {
	$('#leftSlideBtn').click(function(e){
		slider.trigger('slide.left');
		return false;
	});
	$('#pauseSlideBtn').click(function(e){
		slider.trigger('pause');
		return false;
	});
	$('#rightSlideBtn').click(function(e){
		slider.trigger('slide.right');
		return false;
	});
	slider.hover(function(){
		slider.trigger('pause');
	}, function(){
		slider.trigger('pause');
	})
}


// ================================
// = Setup custom event listeners =
// ================================
function _setup_listeners () {
	slider.bind('slide.left'			, _slide);
	slider.bind('pause'					, _pause);
	slider.bind('continue'				, _pause);
	slider.bind('slide.right'			, _slide);
	slider.bind('slideAnimation.start'	, _toggleAnimationSafety)
	slider.bind('slideAnimation.end'	, _toggleAnimationSafety)
	slider.bind('slideAnimation.start'	, _updateInfoWindow)
}



function _slide (e) {
	var oldImage;
	var direction;
	
	//Check we are not midawy through an animation cycle
	if(!animating){
		
		//Clear the timout so we dont have animations stacked on top of each other
		clearTimeout(timer);
		
		direction = e.namespage == 'left' ? -1 : 1;

		oldImage = current;
		newImage = current = current + direction;
		
		
		//Safety first...
		if(current >= total){
			newimage = current = 0;
		}
		if(current < 0){
			newImage = current = total -1;
		}
		
		//Trigger the start of an animation
		slider.trigger('slideAnimation.start');
	
		//Setup the new image
		images.eq(current).css({'zIndex' : '4', 'display' : 'block'}).show();
		images.eq(oldImage).fadeOut(slideSpeed, function(){
		
			//Shove this image to the back of the pile
			images.eq(oldImage).css({ 'zIndex' : '0', 'display' : 'none'});
		
			//Get the newImage into the highest zIndex
			images.eq(current).css({'zIndex' : '5'});
			
			//Trigger the end of an animation
			slider.trigger('slideAnimation.end');
			
			//If we are not paused, setup our timeout to be called 
			if(!paused){
				timer = setTimeout(function(){
					slider.trigger('slide.right')
				}, slideDelay)
			}
		});
		
		//Simultaneously fade in/out the infowindow
		
	}
}


// =========================================
// = Auto Slideshow & Pause / Play control =
// =========================================

function _pause () {
	if(paused){		
		timer = setTimeout(function(){
			slider.trigger('slide.right')
		}, slideDelay)
		
		$('#pauseSlideBtn').removeClass('paused')
		
		paused = false;
		
	}else{
		clearTimeout(timer);
		
		$('#pauseSlideBtn').addClass('paused')
		
		paused = true;
	}
	
}



// ======================
// = Animation Lock out =
// ======================
//
//All function does is listen for start and finish animation, and lockout the animation buttons
function _toggleAnimationSafety (e) {
	if(e.namespace == 'start'){
		animating = true;
	}
	if(e.namespace == 'end'){
		animating = false;
	}
}



// ========================================
// = Fade In / Out and update info window =
// ========================================

function _updateInfoWindow () {
	var heading 	= $('<h1>').text(images.eq(current).data('title'));
	var description = $('<p>').text(images.eq(current).data('description'));
	var link 		= $('<a>').text('Read more...').attr('href', images.eq(current).data('url'));
	
	console.log(current)
	
	//Fade it out
	infoWindow.fadeOut(infoWindowSpeed, function(){
		
		//Empty the info window and add all the new stuff
		infoWindow.empty()
			.append(heading)
			.append(description)
			.append(link)
			
			//Wait a bit then fade in
			.delay(slideSpeed).fadeIn(infoWindowSpeed);
	});

}