var fmtItem = function(imgUrl, url, urunAd, standBy, prime) {
    var innerHTML =
  		    '<div class="product_item"><a href="' + url + '" title="' + urunAd + '" ><div class="product_image"><a href="' + url + '" title="' + urunAd + '" ><img src="' + imgUrl + '" alt="" /></a></div><h2>' + urunAd + '</h2><p><span>Stand By : </span>' + standBy + ' kVA</p><p><span>Prime : </span>' + prime + ' kVA</p></a></div>';
    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);
};

/**
* 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) {

    var start = args[0];
    var last = args[1];
    var alreadyCached = args[2];

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

/**
* 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) {
    var start = args[0];
    var last = args[1];
    var alreadyCached = args[2];

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

/**
* To simulate out of synch loading, we load these items backwards.
* This exercises the ability to load items out of sequence.
*/
var load = function(carousel, start, last) {

    for (var i = last; i >= start; i--) {
        carousel.addItem(i, fmtItem(imageList[i - 1], linkList[i - 1], urunList[i - 1], standByList[i - 1], primeList[i - 1]));
    }
};

/**
* 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";
    }
};

/**
* 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: 3,
		    animationSpeed: 0.8,
		    animationMethod: YAHOO.util.Easing.easeBoth,
		    scrollInc: 3,
		    navMargin: 0,
		    size: urunAdet,
		    loadInitHandler: loadInitialItems,
		    prevElement: "prev-arrow",
		    nextElement: "next-arrow",
		    loadNextHandler: loadNextItems,
		    loadPrevHandler: loadPrevItems,
		    prevButtonStateHandler: handlePrevButtonState,
		    nextButtonStateHandler: handleNextButtonState
		}
	);
};

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