jQuery(document).ready(function($) {
	var Showcase = $('#Showcase');
	var csPath = "../Images/Design/";
	var currentID;
	var timer;
	var currentLink = 0;
	
	// add the image placeholder (for fading)
	var csImage = $('<div id="csImage"></div>').appendTo(Showcase);
	var csImage2 = $('<div id="csImage2"></div>').appendTo(Showcase);
	Showcase.addClass('loading');
	
	// add showcase navigation
	Showcase.append('<ul id="csNavigation"> \
			<li><a href="#lb-1" id="lb-1">1</a></li> \
			<li><a href="#lb-2" id="lb-2">2</a></li> \
			<li><a href="#lb-3" id="lb-3">3</a></li> \
			<li><a href="#lb-4" id="lb-4">4</a></li> \
			<li><a href="#lb-5" id="lb-5">5</a></li> \
			<li><a href="#lb-6" id="lb-6">6</a></li> \
			<li><a href="#lb-7" id="lb-7">7</a></li> \
			<li><a href="#lb-8" id="lb-8">8</a></li> \
			<li><a href="#lb-9" id="lb-9">9</a></li> \
		</ul>');
		
	var csNav = $('#csNavigation li a');
	
	Showcase.append('<a class="prev" /><a class="next" />');
	
	Showcase.find('a.prev').click(function() {
		currentLink = (--currentLink % csNav.size());
		if(currentLink < 0) {
			currentLink = csNav.size() - 1;
		}
		
		$(csNav[currentLink]).click();
	});
	Showcase.find('a.next').click(function() {
		$(csNav[++currentLink % csNav.size()]).click();
	});
	
	// change bg image on navigation click
	// the bg image names should match the link IDs
	Showcase.find('#csNavigation a').click(function() {
		Showcase.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 newImage = new Image();
			newImage.onload = function() {
				csImage.css('background-image','url(' + newImage.src + ')');
				csImage2.stop(); // prevent interference with currently running fade
				csImage2.fadeTo(300,0,function() {
					csImage2.css('background-image','url(' + newImage.src + ')');
					csImage2.fadeTo(1, 1, carousel);
				});
			};
			newImage.src = csPath + newID + ".jpg";
		}
		return false;
	});
	
	// initialize link
	csNav.eq(0).click();
	
	// set up carousel
	function carousel() {
		timer = setInterval(function() {
			$(csNav[++currentLink % csNav.size()]).click();
		}, 5000);
	}
});