function initCarousel(index,transition) {

    /* ----- procedural setup >>>> ----- */
    var root = index;
    var heroCount = $("#"+root+" .heros li.hero").size();
    var startHero = 0;


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

    // figure out how many items fit in the window
    var herosPerPage = Math.floor(trackSize / heroSize);
    var pagesOfHeros = Math.ceil(heroCount / herosPerPage);


    if( transition == 'fade' ) {

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

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

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

    }
    
    var currentIndex = startPage;
    manuSlide(startPage);

    if( index == 'carousel-wrapper' ) {
        // set the thumbnail of the current show
        $("#"+root+" .heros li:eq(" + startHero + ")").addClass("select");

        // build the indexes list
        $("#"+root+" .carousel-interact").prepend("<ol class=\"indexes\"></ol>");
        $("#"+root+" .heros li.hero").each( function(i) {
          i++;
          $("#"+root+" ol.indexes").append("<li class=\"index\"><a href=\"#slide" + i + "\">" + i + "</a></li>");
        });
        $("#"+root+" ol.indexes li.index:eq(0)").addClass("select");
    }
    
    // show the controls if there is more than one hero
    if( heroCount > 1 ) {
        $("#"+root+" .carousel-interact").show().animate({ bottom: "0", left:"28px" }, 500);
    }
    
    // autoplay the slideshow
    var heroInterval;
    startAutoPlay();
    
    
    /* ----- <<<< procedural setup ----- */

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

    // manual click on a particular hero
    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 hero to another
    function stepSlide(direction) {
        oldIndex = currentIndex;

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

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

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

            // if the departing hero is the first one
            else if( oldIndex == 0 ) {
                currentIndex = pagesOfHeros - 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+" .heros li.hero:not(:eq("+slideTo+"))").fadeOut();
            $("#"+root+" .heros li.hero:eq("+slideTo+")").fadeIn();
        } else {
            $("#"+root+" .heros").animate({ left: "-"+(slideTo * trackSize)+"px" }, 500 );
        }
    }
    
    function startAutoPlay() {
	if( index == 'carousel-wrapper' ){
	        heroInterval = setInterval(autoSlide,5000); //time in milliseconds
	        $("#"+root+" .controls .playpause a").removeClass().addClass("playing").text("playing").attr("title","Pause show");
	}else{
	        heroInterval = setInterval(autoSlide,5000); //time in milliseconds
	        $("#"+root+" .controls .playpause a").removeClass().addClass("playing").text("playing").attr("title","Pause show");
	}	
    }
    function stopAutoPlay() {
        clearInterval(heroInterval);
        $("#"+root+" .controls .playpause a").removeClass().addClass("paused").text("paused").attr("title","Play show");
    }

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


    /* ----- interactive buttons >>>> ----- */

    // click on the next button
    $("#"+root+" .controls .next a").click(function(e) {
        e.preventDefault();
        stepSlide("next");
        stopAutoPlay();
    });

    // click on the prev button
    $("#"+root+" .controls .prev a").click(function(e) {
        e.preventDefault();
        stepSlide("prev");
        stopAutoPlay();
    });

    // click on the play/pause button
    $("#"+root+" .controls .playpause a").click(function(e) {
        e.preventDefault();
        var autoplaystate = $(this).attr("class");
        if(autoplaystate == "paused") {
            startAutoPlay();
        } else {
            stopAutoPlay();
        }      
    });

    // click on an index button
    $("#"+root+" .indexes .index").click(function(e) {
        e.preventDefault();
        var thisPage = $("#"+root+" .indexes .index").index(this);
        manuSlide(thisPage);
        stopAutoPlay();
    });

    /* ----- <<<< interactive buttons ----- */
}

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