var fmtItem = function(imgUrl, url, title, gallery, pero, i) {
      var innerHTML = 
  		'<span id="carousel-gallery-' + i + '" href="' +
   		gallery + 
        '" name="' +
        title +
        '" label="' +
        pero +
        '" alt="' +
        i +
 		'"><\/span>' +
          '<div id="' + pero + '" class="carousel_box" width="100" height="115"><div class="carousel_box_in"><span class="texts">' +  title + '<\/span><a href="' + gallery + '"><img alt="GALLERY" class="reflect rheight20 ropacity20" id="carousel-image-' + i + '" src="' + 
          imgUrl +
        '" width="' +
        140 +
        '"/></a></div><a id="carousel-anchor-' + i + '" href="' + url + '" target="_blank">' +  title + '<\/a></div>';
    return innerHTML;
};

var loadInitialItems = function(type, args) {
    var start = args[0];
    var last = args[1]; 
    load(this, start, last);
    spotlight(this);    
    preview(this);
};


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);
};


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++) {
		carousel.addItem(i, fmtItem(imageList[i], urlList[i], titleList[i], galleryList[i], peroList[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);
	}
};





var handlePrevButtonState = function(type, args) {
    var enabling = args[0];
    var leftImage = args[1];
    if(enabling) {
        leftImage.src = "http://www.spcontribute.com/ajax/carousel/images/ts_prev1.gif";    
    } else {
        leftImage.src = "http://www.spcontribute.com/ajax/carousel/images/ts_prev2.gif";
    }
};


var handleNextButtonState = function(type, args) {
    var enabling = args[0];
    var rightImage = args[1];
    if(enabling) {
        rightImage.src = "http://www.spcontribute.com/ajax/carousel/images/ts_next1.gif";    
    } else {
        rightImage.src = "http://www.spcontribute.com/ajax/carousel/images/ts_next2.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 status = carousel.getProperty("size");
	var anchorstatus = YAHOO.util.Dom.get(status);

    var anchorimage = YAHOO.util.Dom.get('carousel-image-' + middle);
    var anchorurl = YAHOO.util.Dom.get('carousel-anchor-' + middle);
	var anchorgallery = YAHOO.util.Dom.get('carousel-gallery-' + middle);

    YAHOO.util.Dom.get('indicator').innerHTML = '<span class="now_b">' + anchorgallery.alt + '</span><span class="of_b">of</span><span class="all_b">' + anchorstatus +'</span><span class="photo_b">Photos</span>';

}

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');
        }
    }
}






var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function() 
{
    carousel = new YAHOO.extension.Carousel("dhtml-carousel", 
        {
            numVisible:         6,
            animationSpeed:     0.9,
            animationMethod:    YAHOO.util.Easing.backBoth,
            scrollInc:          3,
			navMargin:          30,
            scrollBeforeAmount: 2,
			firstVisible:       +2,

			revealAmount:      35,
            scrollAfterAmount:  2,
            prevElement:        "prev-arrow",
            nextElement:        "next-arrow",
            loadInitHandler:    loadInitialItems,
            loadNextHandler:    loadNextItems,
            loadPrevHandler:    loadPrevItems,
            prevButtonStateHandler:   handlePrevButtonState,
            nextButtonStateHandler:   handleNextButtonState,
			autoPlay: 5000,
			size:               50,
            wrap: true
        }
    );
    //carousel.loadNextHandlerEvt.subscribe(beforeNext, carousel);
};


/**
 * Illustrates stop autoplay
 */
var stopAutoPlay = function(e) {
	YAHOO.util.Dom.get("status").innerHTML = "Auto Play Stopped!";
	carousel.stopAutoPlay();
};

/**
 * Illustrates start autoplay
 */
var startAutoPlay = function(e) {
	YAHOO.util.Dom.get("status").innerHTML = "Auto Play Started!";
	carousel.startAutoPlay(5000);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);
YAHOO.util.Event.addListener("stop-button", 'click', stopAutoPlay);
YAHOO.util.Event.addListener("start-button", 'click', startAutoPlay);