jQuery(function($) {
	$(document).ready(function() {
	
		// Speed of the automatic slideshow
		var slideshowSpeed = 5000;

		// Variable to store the images we need to set as background
		// which also includes some text and url's.
		var photos = [
			{"image" : "slide-motionless-rock.jpg"},
			{"image" : "slide-stac-pollaidh.jpg"},
			{"image" : "slide-skiff-race.jpg"},
			{"image" : "slide-dundonnel-mountains.jpg"},
			{"image" : "slide-achnahaird-suilven.jpg"},
			{"image" : "slide-summer-isles.jpg"}
		];
		
		
		var loaded = Array();
		
		for (j=1;j<=photos.length+1;j++) {
			loaded[j] = 0;
		}
		
		var imageFiles = Array();
		
		var nextImage = 0;
		

		$(document).ready(function() {
			
			var activeContainer = 1;	
			var currentImg = 0;
			var animating = false;
			var navigate = function(direction) {
				// Check if no animation is running. If it is, prevent the action
				if(animating) {
					return;
				}
				
				// Check which current image we need to show
				if(direction == "next") {
					currentImg++;
					if(currentImg == photos.length + 1) {
						currentImg = 1;
					}
				} else {
					currentImg--;
					if(currentImg == 0) {
						currentImg = photos.length;
					}
				}
				
				// Check which container we need to use
				var currentContainer = activeContainer;
				if(activeContainer == 1) {
					activeContainer = 2;
				} else {
					activeContainer = 1;
				}
				
				nextPhotoObjectInt = ( (currentImg + 1) > photos.length) ? 0 : currentImg;
				
				nextImage = currentImg + 1;
				
				showImage(photos[currentImg - 1], photos[nextPhotoObjectInt], currentContainer, activeContainer);
				
			};
			
			var currentZindex = -1;
			var showImage = function(photoObject, nextPhotoObject, currentContainer, activeContainer) {
				animating = true;
				
				// Make sure the new container is always on the background
				currentZindex--;
				
				loaded[1] = 1;
				
				// Set the background image of the new active container
				$("#header-image-" + activeContainer).css({
					"background-image" : "url(http://coigach.com/wp-content/themes/ata/images/" + photoObject.image + ")",
					"display" : "block",
					"z-index" : currentZindex
				});	
				

				// Fade out the current container
				// and display the header text when animation is complete
				$("#header-image-" + currentContainer).fadeOut(function() {
					setTimeout(function() {
						$("#headertxt").css({"display" : "block"});
						animating = false;
					}, 500);
				});				
			
				// only preload if not already loaded
				if (loaded[currentImg+1] == 0) {
					// begin loading next image
					imageFiles[currentImg+1] = new Image;
					imageFiles[currentImg+1].src = "http://coigach.com/wp-content/themes/ata/images/" + nextPhotoObject.image;		
					imageFiles[currentImg+1].onload = function() {
						loaded[currentImg+1] = 1;
						nextCurrentImgForAlert = currentImg + 1;					
					}
				}	
				
			};
			
			var stopAnimation = function() {
				// Change the background image to "play"
				$("#control").css({ "background-image" : "url(images/btn_play.png)" });
				
				// Clear the interval
				clearInterval(interval);
			};
			
			// We should statically set the first image
			navigate("next");
			
			// Start playing the animation
			interval = setInterval(function() {
				if (loaded[nextImage] == 1 && loaded[1] == 1) {
					navigate("next");
				}
			}, slideshowSpeed);
			
		});
		
	});
});