/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

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

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "Getting Heard",
		"image" : "hands_406x304.png",
		"firstline" : "Today everyone gets their say,<br />but not everyone is heard.",
		"secondline" : "Marketers can gain loyalty by addressing an emerging <br />psychological buying motive: the &#8220;need to be seen.&#8221; <br />Tactics like Facebook contests and online advisory <br />boards foster that personal connection.",
		"thirdline" : "From Kit's Speech, &#8220;A New Consumer Psychology = New Rules For Marketers&#8221;"
		
	}, {
		"title" : "Branding",
		"image" : "lego_406x304.png",
		"firstline" : "Celebrity branding works &#8212;<br />but you have to do it right.",
		"secondline" : "Sales of Lego's Taj Mahal kit rose 663% after David Beckham <br />mentioned in an online fan chat that he'd built one. <br />Celebrities work because they cut through clutter &#8212;  <br />but their brand connection has to appear genuine.",
		"thirdline" : "From Kit's Speech, &#8220;For Marketers: Psychological Secrets of Generation Y&#8221;"
		
	}, {
		"title" : "Duck Tape",
		"image" : "duck_406x304.png",
		"firstline" : "Marketing to Gen Y?<br />&#8220;Technovate&#8221;",
		"secondline" : "With Gen Y, new is better. Splashy colored duct tape <br />is innovative, but Duck Tape's online prom outfit <br />contest used technology to create engagement.<br />That's technovation.",
		"thirdline" : "From Kit's book, Gen BuY: How Tweens, Teen and Twenty-Somethings are <br />Revolutionizing Retail (Wiley, 2009)"
		
	}, {
		"title" : "GenY",
		"image" : "card_406x304.png",
		"firstline" : "Are you old enough to <br />know what this is?",
		"secondline" : "If so, you literally think differently than today's teens and <br />young adults. Growing up with the Internet has given them <br />a higher bar for stimulation and shorter attention spans. For <br />teachers and managers of Gen Y, shorter, faster, more visual <br />and more frequent communication techniques work better.",
		"thirdline" : "From Kit's speech, &#8220;Gen Y Decoded: Insights &amp; Tactics for Leaders, Teachers &amp; Managers.&#8221;"
	}, {
		"title" : "Heart",
		"image" : "heart_406x304.png",
		"firstline" : "Surveys address the head,<br />psychology taps the heart",
		"secondline" : "And that's where in-store decisions are made. When asked <br />to choose between a straight, traditional logo and a tilted, <br />partial logo, 90% of consumers told Kit they preferred the <br />traditional one. Moments before, those same shoppers <br />selected the tilted one in a mock shopping experience.",
		"thirdline" : "From Kit's research for a large consumer packaged goods company."
	}, {
		"title" : "Shopping",
		"image" : "shop_406x304.png",
		"firstline" : "Competitive sport shopping can<br />cause injuries &#8212; to your budget.",
		"secondline" : "Short-term sales and limited quantities can trip-up even <br />the most disciplined shoppers. Decisions are clouded by <br />autonomic nervous system arousal that's fired up by <br />competition. The solution? Put it in your cart but wait <br />20 minutes to buy &#8212; it takes that long to clear your brain.",
		"thirdline" : "From Kit's blogs on Huffington Post and Psychology Today."
	}
];



$(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(http://www.kityarrow.com/import/kit_yarrow/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").html(photoObject.secondline);
		$("#thirdline").html(photoObject.thirdline);

		
		
		// 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;
			}, 300);
		});
	};
	
	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);
	
});