// Speed of the automatic slideshow
var slideshowSpeed = 10000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "ABOUT WEST 86",
		"image" : "city.jpg",
		"url" : "http://www.atriaseniorliving.com/west86-new-york-ny/about-independent-supportive-living/",
		"firstline" : "THE NEW YORK YOU LOVE. EASIER.",
		"secondline" : "Keep right on living the life you love at Atria West 86 – a luxury residence tailored exclusively to New Yorkers over 65. Ideally situated on the Upper West Side near Riverside Park, West 86 makes it easier to live independently in the cultural heart of the city."
	}, {
		"title" : "WEST 86 AMENITIES",
		"image" : "room.jpg",
		"url" : "http://www.atriaseniorliving.com/west86-new-york-ny/community-amenities/",
		"firstline" : "AMENITIES IN ABUNDANCE.",
		"secondline" : "Gourmet dining. A penthouse salon and spa. A state-of-the-art fitness center. Car service. 24-hour concierge and doorman. Housekeeping and laundry service. On-site wellness care. At West 86, every convenience is afforded, every preference is accommodated, every indulgence is encouraged."
	}, {
		"title" : "TOUR WEST 86",
		"image" : "view.jpg",
		"url" : "http://www.atriaseniorliving.com/west86-new-york-ny/community-and-apartment-tour/",
		"firstline" : "ENJOY THE VIEW.",
		"secondline" : "For your consideration: handsome pre-war architecture, an art deco-inspired multi-million dollar renovation, superbly appointed apartments, elegant dining venues, a rooftop terrace with breathtaking 360 degree views of the city, and so much more. We welcome the opportunity to give you a private tour."
	}, {
		"title" : "VIEW SPOTLIGHT EVENTS",
		"image" : "life.jpg",
		"url" : "http://www.atriaseniorliving.com/atriawest86/Calendar/default.aspx",
		"firstline" : "ALWAYS EVENTFUL.",
		"secondline" : "At West 86, each month brings over 200 educational, social and cultural opportunities and entertainment events – from on-site concerts by Jazz at Lincoln Center, to tai chi classes, to museum visits and Broadway shows. So your calendar can be as full – or as free – as you wish. "
	}
];



$(document).ready(function() {
		
	// Backwards navigation
	$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	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;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
		
		// Hide the header text
		$("#headertxt").css({"display" : "none"});
		
		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$("#pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);
		
		
		// Fade out the current container
		// and display the header text when animation is complete
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});
	};
	
	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() {
		navigate("next");
	}, slideshowSpeed);
	
});