GX_carousels = [];
var GX_iconImgLE = new Image(20, 20); //Cache the image
GX_iconImgLE.src = "images/left-enabled.gif";
var GX_iconImgLD = new Image(20, 20); //Cache the image
GX_iconImgLD.src = "images/left-disabled.gif"; 
var GX_iconImgRE = new Image(20, 20); //Cache the image
GX_iconImgRE.src = "images/right-enabled.gif";
var GX_iconImgRD = new Image(20, 20); //Cache the image
GX_iconImgRD.src = "images/right-disabled.gif"; 

function GX_createCarousel(id, numShown) {
	cs = new GX_Carousel(id, numShown);
	GX_carousels[id] = cs;
	return cs;
}

function GX_Carousel(p_id, p_numShown) {
	this.items = [];
	this.id = p_id;
	this.numShown = p_numShown;
}
	
GX_Carousel.prototype.addItem = function(item) {
	this.items[this.items.length] = item;
}
	
GX_Carousel.prototype.getJS = function() {
	var script = "";
	script = "<div id=\"mycarousel" + this.id + "\" class=\"carousel-component\">";
	if(this.items.length > 0)
		script += this.getInnerScript(0);
	script += "</div>";
	return script;
}
	
GX_Carousel.prototype.getInnerScript = function(position) {
	var script = "";
	var leftImg = "images/left-disabled.gif";
	var rightImg = "images/right-disabled.gif";
	var rightEnabled = false;
	var leftEnabled = false;
	
	if(position > 0) {
		leftImg = "images/left-enabled.gif";
		leftEnabled = true;
	}
	if(position < this.items.length-this.numShown) {
		rightImg = "images/right-enabled.gif";
		rightEnabled = true;
	}
	
	script = "<div class=\"carousel-prev\">" +
				"<img class=\"prev-arrow\" class=\"left-button-image\" " +
		 		"src=\""+ leftImg + "\" alt=\"Previous Button\"";
	if(leftEnabled == true) {
		script += " onclick=\"javascript:GX_carousel_show('" + this.id + "'," + (position-this.numShown) + ");\" />";
	} else {
		script += " />";
	}
	script +=	"</div>";

	
	script += "<div class=\"carousel-clip-region\">" +
					"<ul class=\"carousel-list\">";
	for(var i=position; i<(position+this.numShown) && i<this.items.length; i++) {
		script += "<li><img width=\"125\" height=\"125\" src=\"" +  this.items[i] + "\" /></li>";
	}
	script += "</ul></div>";
	for(var i=(position+this.numShown); i<this.items.length; i++) {
		script += "<img width=\"125\" height=\"125\" src=\"" +  this.items[i] + "\" style=\"display:none\" />";
	}

	script += "<div class=\"carousel-next\">" +
				"<img class=\"next-arrow\" class=\"right-button-image\" " + 
					"src=\"" + rightImg + "\" alt=\"Next Button\" ";
	
	if(rightEnabled == true) {
		script += " onclick=\"javascript:GX_carousel_show('" + this.id + "'," + (position+this.numShown) + ");\" />";
	} else {
		script += " />";
	}
	script +=	"</div>";

	return script;
}

function GX_carousel_show(id, position) {
	var cs = GX_carousels[id];
	var script = cs.getInnerScript(position);
	document.getElementById('mycarousel' + id).innerHTML = script;
}