// JavaScript Document



var priorCenterItem = 1;

/**
 * Image src URLs
 **/
var imageList = [
                 "images/comic1.gif",
                 "images/comic2.gif",
                 "images/comic3.gif",
                 "images/comic4.gif",
                 "images/comic5.gif",
                 "images/comic6.gif",
                 "images/comic7.gif",
                 "images/comic8.gif",
                 "images/comic9.gif",
                 "images/comic10.gif",
                 "images/comic11.gif",
                 "images/comic12.gif",
                 "images/comic13.gif",
                 "images/comic14.gif",
                 "images/comic15.gif",
                 "images/comic16.gif",
                 "images/comic17.gif",
                 "images/comic18.gif",
                 "images/comic19.gif",
                 "images/comic20.gif",
                 "images/comic21.gif",
                 "images/comic22.gif",
                 "images/comic23.gif",
                 "images/comic24.gif",
                 "images/comic25.gif",
                 "images/comic26.gif",
                 "images/comic27.gif",
                 "images/comic28.gif",
                 "images/comic29.gif",
                 "images/comic30.gif",
                 "images/comic31.gif",
                 "images/comic32.gif",
                 ];
var urlList = [
                 "images/comic1.jpg",
                 "images/comic2.jpg",
                 "images/comic3.jpg",
                 "images/comic4.jpg",
                 "images/comic5.jpg",
                 "images/comic6.jpg",
                 "images/comic7.jpg",
                 "images/comic8.jpg",
                 "images/comic9.jpg",
                 "images/comic10.jpg",
                 "images/comic11.jpg",
                 "images/comic12.jpg",
                 "images/comic13.jpg",
                 "images/comic14.jpg",
                 "images/comic15.jpg",
                 "images/comic16.jpg",
                 "images/comic17.jpg",
                 "images/comic18.jpg",
                 "images/comic19.jpg",
                 "images/comic20.jpg",
                 "images/comic21.jpg",
                 "images/comic22.jpg",
                 "images/comic23.jpg",
                 "images/comic24.jpg",
                 "images/comic25.jpg",
                 "images/comic26.jpg",
                 "images/comic27.jpg",
                 "images/comic28.jpg",
                 "images/comic29.jpg",
                 "images/comic30.jpg",
                 "images/comic31.jpg",
                 "images/comic32.jpg",
                 ];

var lastRan = -1;

/**
 * Since carousel.addItem uses an HTML string to create the interface
 * for each carousel item, this method formats the HTML for an LI.
 **/

var fmtItem = function(imgUrl, url, title, i) {
      var innerHTML = 
          '<img id="carousel-image-' + i + '" src="' + 
          imgUrl +
        '" width="' +
        122 +
        '" height="' +
        64 +
        '"/><a id="carousel-anchor-' + i + '" href="' + 
          url + 
          '">'  + '<\/a>';
  
    return innerHTML;
    
};

/**
 * Custom inital load handler. Called when the carousel loads the initial
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadInitHandler
 **/
var loadInitialItems = function(type, args) {
    var start = args[0];
    var last = args[1]; 

    load(this, start, last);
    spotlight(this);    
    preview(this);
};

/**
 * Custom load next handler. Called when the carousel loads the next
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadNextHandler
 **/
var loadNextItems = function(type, args) {
    // get the last middle item and turn off spotlight
    var li = this.getItem(priorCenterItem);
    
    var start = args[0];
    var last = args[1]; 
    var alreadyCached = args[2];

    if(!alreadyCached) {
        load(this, start, last);
    }
    spotlight(this);
    preview(this);
};

/**
 * Custom load previous handler. Called when the carousel loads the previous
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadPrevHandler
 **/

var loadPrevItems = function(type, args) {
    // get the last middle item and turn off spotlight
    var li = this.getItem(priorCenterItem);

    var start = args[0];
    var last = args[1]; 
    var alreadyCached = args[2];
    
    if(!alreadyCached) {
        load(this, start, last);
    }
    spotlight(this);
    preview(this);
};

var load = function(carousel, start, last) {

    for(var i=start;i<=last;i++) {
        /*var randomIndex = getRandom(8, lastRan);*/
		var randomIndex = i - 1;
        lastRan = randomIndex;
        carousel.addItem(i, fmtItem(imageList[randomIndex], urlList[randomIndex], "Number " + i, i), 'non-spotlight');
     
  
        // Image click will scroll to the corresponding carousel item.
        YAHOO.util.Event.addListener('carousel-image-'+i, 'click', function(evt) {
            this.carousel.scrollTo(this.index-2);
        }, {carousel:carousel,index:i}, true);
/*
        // Example of an alternate way to add an item (passing an element instead of html string)
        var p = document.createElement("P");
        var t = document.createTextNode("Item"+i);
        p.appendChild(t);
        carousel.addItem(i, p );
*/
    }
};

var getRandom = function(max, last) {
    var randomIndex;
    do {
        randomIndex = Math.floor(Math.random()*max); 
    } while(randomIndex == last);
    
    return randomIndex;
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 **/
var handlePrevButtonState = function(type, args) {

    var enabling = args[0];
    var leftImage = args[1];
    if(enabling) {
        leftImage.src = "images/left-enabled.gif";    
    } else {
        leftImage.src = "images/left-disabled.gif";
    }
    
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the next button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: nextButtonStateHandler
 **/
var handleNextButtonState = function(type, args) {

    var enabling = args[0];
    var rightImage = args[1];
    if(enabling) {
        rightImage.src = "images/right-enabled.gif";    
    } else {
        rightImage.src = "images/right-disabled.gif";
    }
    
};

function completeHandler(type, args) {
    // instead of doing the preview in the loadNext and loadPrev you can
    // wait for the animation scroll to stop before showing the preview
    //preview(this);
}
function preview(carousel) {
    var firstVisible = carousel.getProperty("firstVisible");
    var middle = firstVisible + 2;
    
    var anchor = YAHOO.util.Dom.get('carousel-anchor-' + middle);
    YAHOO.util.Dom.get('preview').innerHTML = '<img src="' + anchor.href + '"/>';
}

function spotlight(carousel) {
    var firstVisible = carousel.getProperty("firstVisible");
    var start = firstVisible;
    var revealAmount = carousel.getProperty("revealAmount");
    var size = carousel.getProperty("size");
    
    if(revealAmount && firstVisible > 1) {
        start = firstVisible - 1;
    }
    var lastVisible = firstVisible + carousel.getProperty("numVisible") - 1;
    var end = lastVisible;
    if(revealAmount && lastVisible < size) {
        end = lastVisible + 1;
    }
    
    var middle = firstVisible + 2;
    
    for(var i=start; i<=end; i++) {
        var li = carousel.getItem(i);
        
        if(i == middle) {
            YAHOO.util.Dom.replaceClass(li, 'non-spotlight', 'spotlight');
            priorCenterItem = i;
        } else {
            YAHOO.util.Dom.replaceClass(li, 'spotlight', 'non-spotlight');
        }
    }
}

/**
 * You must create the carousel after the page is loaded since it is
 * dependent on an HTML element (in this case 'dhtml-carousel'.) See the
 * HTML code below.
 **/

var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function() 
{
    carousel = new YAHOO.extension.Carousel("dhtml-carousel", 
        {
            numVisible:         5,
            animationSpeed:     0.6,
            animationMethod:    YAHOO.util.Easing.easeBoth,
            scrollInc:          1,
            navMargin:          0,
            scrollBeforeAmount: 2,
            firstVisible:       1,
            size:               32, 
            scrollAfterAmount:  2,
            prevElement:        "prev-arrow",
            nextElement:        "next-arrow",
            loadInitHandler:    loadInitialItems,
            loadNextHandler:    loadNextItems,
            loadPrevHandler:    loadPrevItems,
            prevButtonStateHandler:   handlePrevButtonState,
            nextButtonStateHandler:   handleNextButtonState,
            animationCompleteHandler: completeHandler
        }
    );
    
    //carousel.loadNextHandlerEvt.subscribe(beforeNext, carousel);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);