jQuery(document).ready(function($) {
	var clientShowcase = $('#clientShowcase');
	var csPath = "../images/clients/";
	var currentID;
	var timer;
	var currentLink = 0;
	
	// add the image placeholder (for fading)
	var showcaseContent = $('<div id="clientShowcaseContent"></div>').appendTo(clientShowcase);
	var csImage = $('<div id="csImage"></div>').appendTo(showcaseContent);
	clientShowcase.addClass('loading');
	
	// add showcase navigation
	clientShowcase.append('<ul id="csNavigation"> \
			<li><a href="#cs-lockdata" id="cs-lockdata">Welcome</a></li> \
			<li><a href="#cs-times" id="cs-times">Scranton Times</a></li> \
			<li><a href="#cs-discoverpike" id="cs-discoverpike">Discover Pike</a></li> \
			<li><a href="#cs-skibigbear" id="cs-skibigbear">Ski Big Bear</a></li> \
			<li><a href="#cs-woodloch" id="cs-woodloch">Woodloch Pines</a></li> \
			<li><a href="#cs-shubert" id="cs-shubert">Shubert Ticketing</a></li> \
		</ul>');
	
	// change bg image on navigation click
	// the bg image names should match the link IDs
	clientShowcase.find('a').click(function() {
		clientShowcase.find('a.on').removeClass('on');
		var newID = $(this).addClass('on').attr('id'); // get ID of clicked link
		currentLink = $('#csNavigation li').index($(this).parent()); // get index of clicked link
		if(newID !== currentID) {
			clearInterval(timer); // stop carousel until loaded
			currentID = newID;
			var newBG = new Image();
			newBG.onload = function() {
				var newImage = new Image();
				showcaseContent.fadeTo(300,0);
				newImage.onload = function() {
					showcaseContent.stop(); // prevent interference with currently running fade
					showcaseContent.fadeTo(300,0,function() {
						csImage.css('background-image','url(' + newImage.src + ')');
						showcaseContent.css('background-image','url(' + newBG.src + ')');
						showcaseContent.fadeTo(300, 1, carousel);
					});
				};
				newImage.src = csPath + newID + ".png";
			};
			newBG.src = csPath + newID + "-bg.png";
		}
		return false;
	});
	
	// initialize with the "Happy Holidays" link
	$('a#cs-lockdata').click();
	
	// set up carousel
	var csNav = $('#csNavigation li a');
	function carousel() {
		timer = setInterval(function() {
			$(csNav[++currentLink % csNav.size()]).click();
		}, 10000);
	}
});