function ProductObject(newId, newPartNumber, newAltText, newSrc, newUrl) {
	this.id = newId;
	this.partNumber = newPartNumber;
	this.altText = newAltText;
	this.src = newSrc;
	this.url = newUrl;
	this.hasBeenLoaded = false;
	this.imageWidth = imageWidth;
	this.imageHeight = imageHeight;

	this.generateInnerHtml = function() {
		return '<a href="' + this.url + '">' +
			   '<img src="' + this.src + '" title="' + this.altText + '" width="' + this.imageWidth + '" height="' + this.imageHeight + '" id="' + this.id + '"/>' + 
			   '<\/a>';
	}
}
var imageHeight = 80;
var imageWidth = 58;
var carItems = new Hash();
var carousel; // for ease of debugging; globals generally not a good idea

function addProductToCarousel(itemId, partNumber, altText, imgSrc, url) {
	var product = new ProductObject(itemId, partNumber, altText, imgSrc, url);
	carItems.set(itemId, product);
}

/**
 * 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, 1, 10);
};
/**
 * 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);
		initCovers();
	}
};

/**
 * 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 (last > 16) {
		load(this, start, last);
	}
};

var load = function(carousel, start, last) {
   for(var i=start;i<=last;i++) {
		var itemIndex = i;
		while (itemIndex > carItems.length) {
			itemIndex -= carItems.length;
		}
		var p = carItems.get(itemIndex);
		p.hasBeenLoaded = true;
		carousel.addItem(i, p.generateInnerHtml());
	}
};

/**
 * 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/left3-enabled.gif";    
	} else {
		leftImage.src = "/images/left3-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 pageLoad = function() 
{
	carousel = new YAHOO.extension.Carousel("car_container", 
		{
			numVisible:        9,
			animationSpeed:    0.45,
			scrollInc:         3,
			prevElement:       "prev-arrow",
			nextElement:       "next-arrow",
			loadInitHandler:   loadInitialItems,
			loadNextHandler:   loadNextItems,
			loadPrevHandler:   loadPrevItems,
			navMargin:		   23,
			firstVisible: 	   1,
			prevButtonStateHandler:   handlePrevButtonState
		}
	);
	initCovers();
};

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

function initCovers() {
	var htNormal = 80, htSmall = 80, htFull = 109, wNormal = 58, wSmall = 58, wFull = 80;
	var cvrs = $$("ul#carousel_list_content li img");
	var fx = new Fx.Elements(cvrs, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
	
	cvrs.each(function(cvr, i) {
		cvr.setStyles('width: '+wNormal+'px; height: '+htNormal+'px;');
		cvr.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [cvr.getStyle("width").toInt(), wFull],height: [cvr.getStyle("height").toInt(), htFull]}
			cvrs.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					var h = other.getStyle("height").toInt();
					if(h != htSmall) { o[j] = {height: [h, htSmall], width: [w, wSmall]}};
				}
			});
			fx.start(o);
		});
	}); 

	cvrs.addEvent("mouseleave", function(event) {
		var o = {};
		cvrs.each(function(cvr, i) {
			o[i] = {width: [cvr.getStyle("width").toInt(), wNormal],height: [cvr.getStyle("height").toInt(), htNormal]}			
		});
		fx.start(o);
	}); 
	
}