function initCarousel(index,transition) {

	/* ----- story names ------ */
	var horseNames = new Array();
	horseNames[1] = 'Home';
	horseNames[2] = '<img src="/images/icons/blogger.png" />Follow us on<br />Blogger';
	horseNames[3] = '<img src="/images/icons/facebook.png" />Join our group <br />on Facebook';
	horseNames[4] = '<img src="/images/icons/cc.png" />Sign up for our <br />Newsletter';


    /* ----- procedural setup >>>> ----- */
    var root = index;
    var horseCount = $("#"+root+" .horses li.horse").size();
    var startHorse = 0;


    // get the width of the wrapper window
    var trackSize = $("#"+root+" .carousel").width();
    // get the width of an individual item
    var horseSize = $("#"+root+" .horses li:first").width();

    // figure out how many items fit in the window
    var horsesPerPage = Math.floor(trackSize / horseSize);
    var pagesOfHorses = Math.ceil(horseCount / horsesPerPage);


    if( transition == 'fade' ) {

        // set the width of the list of shows
        $("#"+root+" ul.horses").css("width", trackSize);
        
        // set all the horses to absolute positioning
        $("#"+root+" ul.horses li.horse").css("position", "absolute").hide();
        
        $("#"+root+" ul.horses li.horse:eq("+startHorse+")").show();
        
        var startPage = startHorse;

    } else {
    
        // set the width of the list of shows
        var horsesSize = trackSize * pagesOfHorses;
        $("#"+root+" ul.horses").css("width", horsesSize);

        // set the page to that of the current show
        var startPage = Math.floor(
            startHorse / horsesPerPage
        );
    
        $("#"+root+" .horses").css({ left: "-"+(startPage * trackSize)+"px" });

    }
    
    var currentIndex = startPage;
    manuSlide(startPage);

    // set the thumbnail of the current show
    $("#"+root+" .horses li:eq(" + startHorse + ")").addClass("select");
    
    // build the indexes list
    $("#"+root+" .carousel-interact").prepend("<ol class=\"indexes\"></ol>");
    $("#"+root+" .horses li.horse").each( function(i) {
        i++;
        $("#"+root+" ol.indexes").append("<li class=\"index\"><a href=\"#slide" + i + "\">" + horseNames[i] + "</a></li>");
    });
    $("#"+root+" ol.indexes li.index:eq(0)").addClass("select");
    
    // show the controls if there is more than one horse
    if( horseCount > 1 ) {
        $("#"+root+" .carousel-interact").show().animate({ bottom: "0px" }, 250);
    } else { // add a solo class if there is just one
        $("#"+root).addClass("solo");
    }
    
    // autoplay the slideshow
    var horseInterval;
    startAutoPlay();
    stopAutoPlay();
    
    
    /* ----- <<<< procedural setup ----- */

    /* ----- general functions >>>> ----- */

    // manual click on a particular horse
    function manuSlide(page) {
		oldIndex = currentIndex;
		currentIndex = page;
        slideShowsList(currentIndex);
        $("#"+root+" .indexes .index").eq(oldIndex).removeClass("select");
        $("#"+root+" .indexes .index").eq(currentIndex).addClass("select");
	}

    // step from one horse to another
    function stepSlide(direction) {
        oldIndex = currentIndex;

        // move forward
        if( direction == "next" ) {
            currentIndex = (oldIndex + 1) % pagesOfHorses;
        }

        // move backward
        else if( direction == "prev" ) {

            // if the departing horse is not the first one
            if( oldIndex > 0 ) {
                currentIndex = (oldIndex - 1) % pagesOfHorses;
            }

            // if the departing horse is the first one
            else if( oldIndex == 0 ) {
                currentIndex = pagesOfHorses - 1;
            }
        }

        slideShowsList(currentIndex);
        $("#"+root+" .indexes .index").eq(oldIndex).removeClass("select");
        $("#"+root+" .indexes .index").eq(currentIndex).addClass("select");
    }
    
    
    // handle autoplay slides
    function autoSlide() {
        stepSlide("next");
    }


    // slide the carousel
    function slideShowsList(slideTo) {
        if( transition == 'fade' ) {
            $("#"+root+" .horses li.horse:not(:eq("+slideTo+"))").fadeOut();
            $("#"+root+" .horses li.horse:eq("+slideTo+")").fadeIn();
        } else {
            $("#"+root+" .horses").animate({ left: "-"+(slideTo * trackSize)+"px" }, 500 );
        }
    }
    
    function startAutoPlay() {
        horseInterval = setInterval(autoSlide,7000); //time in milliseconds
        $("#"+root+" .controls .playpause a").removeClass().addClass("playing").attr("title","Pause show");
    }
    function stopAutoPlay() {
        clearInterval(horseInterval);
        $("#"+root+" .controls .playpause a").removeClass().addClass("paused").attr("title","Play show");
    }

    /* ----- <<<< general functions ----- */

 }

$(document).ready(function(){
    initCarousel("carousel-wrapper","fade");
});