var slideSwitchIntervalId = 0;

function slideSwitch() {

	var activeImg = $("#storyBoard #storyBoardImagePlaceholder img.active");
	var activeLink = $("#storyBoard #pageNumberPanel a.active");

    if (activeImg.length == 0) {
    	activeImg = $("#storyBoard #storyBoardImagePlaceholder a:last img");
    }
    if (activeLink.length == 0) {
    	activeLink = $("#storyBoard #pageNumberPanel a:last");
    }

	var link = activeImg.parent().next();
    var nextImg =  link.length ? 
    	$("img", link) : 
    	$("#storyBoard #storyBoardImagePlaceholder a:first img");
    var nextLink =  activeLink.next().length ? 
    	activeLink.next() : 
    	$("#storyBoard #pageNumberPanel a:first");

    activeImg.addClass("lastActive");
	nextLink.addClass("active");
    activeLink.removeClass("active");
	
    nextImg.css({opacity: 0.0})
        .addClass("active")
        .animate({opacity: 1.0}, 1000, function() {
            activeImg.removeClass("active lastActive");
        });
}

function goToSlide(index) {

	clearInterval(slideSwitchIntervalId);
	
	$("#storyBoard #storyBoardImagePlaceholder img").removeClass("active lastActive");
	$("#storyBoard #pageNumberPanel a").removeClass("active");
	
	$($("#storyBoard #storyBoardImagePlaceholder img")[index]).addClass("active");
	$($("#storyBoard #pageNumberPanel a")[index]).addClass("active");
	
	slideSwitchIntervalId = setInterval("slideSwitch()", 5000);
}

$(document).ready(function() {    

	slideSwitchIntervalId = setInterval("slideSwitch()", 5000);
	
	$("#storyBoard #pageNumberPanel a").click(function(e) {
		goToSlide($("#storyBoard #pageNumberPanel a").index(this));
		e.preventDefault();
	});
});