//CarouselPane function added by Clochase
function CarouselPane(obj,rowNum,parentID,isAllList) {
    document.getElementById(parentID).innerHTML = "";
	var initObj = new Object();
	if (parentID) {
	    initObj._parentID = parentID;
	} else {
	    initObj._parentID = "carouselHolderOne";
	}
	initObj._numRows = rowNum;
	initObj._sectionTitleSize = 12;
	initObj._imgWidth = 130;
	initObj._imgHeight = 80;
	if (isAllList == true) {
	    initObj._itemWidth = 173;
	    initObj._navPosition = "sides";
	} else {
	    initObj._itemWidth = 153;
	}
	initObj._itemHeight = 150;
	
	initObj._sectionsData = obj;
	
	var scrollPaneOne = new Carousel(initObj);
}

//begin savoury code
function Carousel(initObj){
	this.isIE = navigator.appName == 'Microsoft Internet Explorer';
	this.isIE6 = false;
	if (navigator.appName == 'Microsoft Internet Explorer') {
		var ua = navigator.userAgent;
		var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
		if (re.exec(ua) != null) {
			var ver = parseFloat(RegExp.$1);
			this.isIE6 = ver == 6;
		}
	}
	
	//### BEGIN VARIABLE DEFINITION
	//transfer all properties of the init object to this instance
	for (var prop in initObj) {
		var curValue = initObj[prop];
		this[prop] = curValue;
		if (prop == "_parentID") {
			this._parent = document.getElementById(curValue);
		}
		//alert("this " + prop + ": " + this[prop]);
	}
	
	if (this._parent == undefined) {
		alert("no _parentID defined for the carousel - this is required");
		return;
	}
	
	if (this._name == undefined) this._name = "carousel_" + this._parentID;
	
	//general
	if (this._imgPath == undefined) {
		if (typeof(layer)=="undefined") {
            this._imgPath = "img/carousel/";
        } else {
            this._imgPath = "../img/carousel/";
        }
	}
	if (this._bgSrc == undefined) this._bgSrc = "bg.png";
	if (this._outlineColor == undefined) this._outlineColor = "#6699CC";
	if (this._bgColor == undefined) this._bgColor = "#000000";
	
	//padding for the main container
	if (this._paddingTop == undefined) this._paddingTop = 10;
	if (this._paddingBottom == undefined) this._paddingBottom = 10;
	if (this._paddingLeft == undefined) this._paddingLeft = 10;
	if (this._paddingRight == undefined) this._paddingRight = 10;
	
	//section bar
	if (this._useTabs == undefined) this._useTabs = true;
	if (this._sectionDefault == undefined) this._sectionDefault = 0;
	if (this._sectionTabSrc == undefined) this._sectionTabSrc = "section_tab.png";
	if (this._sectionTitleColorOn == undefined) this._sectionTitleColorOn = "#FFFFFF";
	if (this._sectionTitleColorOff == undefined) this._sectionTitleColorOff = "#6699CC";
	if (this._sectionTitleSize == undefined) this._sectionTitleSize = 15;
	if (this._sectionTitleWeight == undefined) this._sectionTitleWeight = "bold";
	if (this._sectionTitleFont == undefined) this._sectionTitleFont = "Tahoma, Verdana, Helvetica";
	if (this._sectionLinkPaddingX == undefined) this._sectionLinkPaddingX = 20;
	if (this._sectionLinkPaddingY == undefined) this._sectionLinkPaddingY = 10;
	if (this._sectionsLinkBgColor == undefined) this._sectionsLinkBgColor = this._bgColor;
	
	//nav bar - general
	if (this._navRowHeight == undefined) this._navRowHeight = 21; //height of content - doesn't include margin
	if (this._navRowMarginBottom == undefined) this._navRowMarginBottom = 5;
	//nav bar - prev/next buttons
	if (this._navPosition == "sides") {
		if (this._prevButtonSrc == undefined) this._prevButtonSrc = "arrow_left_lrg.png";
		if (this._nextButtonSrc == undefined) this._nextButtonSrc = "arrow_right_lrg.png";
		if (this._scrollButtonsSize == undefined) this._scrollButtonsSize = 21;
	} else {
		if (this._prevButtonSrc == undefined) this._prevButtonSrc = "arrow_left_sml.png";
		if (this._nextButtonSrc == undefined) this._nextButtonSrc = "arrow_right_sml.png";
		if (this._scrollButtonsSize == undefined) this._scrollButtonsSize = 15;
	}
	if (this._navPosition == undefined) this._navPosition = "top"; //sides
	if (this._scrollButtonsXDistance == undefined) this._scrollButtonsXDistance = 4; //between buttons
	if (this._scrollButtonsXMargin == undefined) this._scrollButtonsXMargin = 8; //around buttons' sides
	//page icons ("dots")
	if (this._pageIconSrc == undefined) this._pageIconSrc = "page_dot.png";
	if (this._pageIconHeight == undefined) this._pageIconHeight = 8; //height of one visible "section"
	if (this._pageIconXMargin == undefined) this._pageIconXMargin = 2; //height of one visible "section"
	//SEE ALL button
	//if it's taller than the defined row height, we make row height match it
	if (this._allButtonSrc == undefined) this._allButtonSrc = "btn-see_all.png";
	if (this._allButtonWidth == undefined) this._allButtonWidth = 52;
	if (this._allButtonHeight == undefined) {
		this._allButtonHeight = 19;
	} else {
		if (this._allButtonHeight > this._navRowHeight) this._navRowHeight = this._allButtonHeight;
	}
	//### END VARIABLE DEFINITION
	
	this.draw();
}

Carousel.prototype.draw = function() {
	//create the item holder and mask
	if (this._useTabs == true) {
		this.drawSections(); //container for the top header and links (when there are multiple sections)
		this.gotoSection(this._sectionDefault);
	} else {
		this.drawSingleSection();
	}
}

Carousel.prototype.drawSingleSection = function(){
	//if only one data object was passed in, make it an array (just avoids having exception code below)
	var dataIsArray = this._sectionsData.length != undefined;
	if (dataIsArray == false) {
		this._sectionsData = [this._sectionsData];
	}
	
	//define the sections and current item data
	this.itemFunction = this._sectionsData[0].itemFunction;
	this.useItemOverlay = this._sectionsData[0].useItemOverlay;
	this.seeAllFunction = this._sectionsData[0].seeAllFunction;
	this.itemData = this._sectionsData[0].itemData;

	this.container = this.drawContainer(); //main wrapper div
	this.scrollPane = this.drawScrollPane(); //contains the pages to be scrolled
	this.drawFooter(); //draws the footer content under the scrollpane, if it's set
	this.pageHolder = this.drawPageHolder(); //container div that is moved back and forth for scrolling
	//fill the scrollPane with content items
	this.drawItems();
	//must draw nav after items so we know how many we're working with
	this.navHolder = this.drawNav();
	this.scrollToPage(0);
}

Carousel.prototype.drawSections = function(){
	var w = document.createElement('div');
	with (w.style) {
		position = "relative";
	}
	
	var t = this.appendTableElement(w);
	var tRow = t.appendChild(document.createElement('tr'));
	
	var tC1 = tRow.appendChild(document.createElement('td'));
	with (tC1.style) {
		width = this._paddingLeft + "px";
	}
	var tC2 = tRow.appendChild(document.createElement('td'));
	
	//SECTIONS links
	this.sectionLinks = new Array();
	//if only one data object was passed in, make it an array (just avoids having exception code below)
	var dataIsArray = this._sectionsData.length != undefined;
	if (dataIsArray == false) {
		this._sectionsData = [this._sectionsData];
	}
	for (var i = 0; i < this._sectionsData.length; i++) {
		var curTitleText = this._sectionsData[i].title;
		var curSectionLink = this.drawSectionLink(curTitleText);
		curSectionLink._index = i;
		tC2.appendChild(curSectionLink);
		this.sectionLinks.push(curSectionLink);
	}
	
	this.appendClearDiv(tC2);
	
	var sectionLinksHeight = this.getRenderedHeight(w);
	//alert("sectionLinksHeight: " + sectionLinksHeight);
	
	with (tC1.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll left " + sectionLinksHeight + "px";
	}
	with (tC2.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll right " + sectionLinksHeight + "px";
	}
	
	this._parent.appendChild(w);
	return w;
}

Carousel.prototype.getImgURL = function(whichSrc){
	var curName = whichSrc;
	if (this.isIE6 == true) {
		curName = this.parseSrcToGIF(curName);
	}
	var curURL = this._imgPath + curName;
	return curURL;
}

Carousel.prototype.parseSrcToGIF = function(whichName){
	var curName = whichName.substr(0, whichName.length - 3);
	curName += "gif";
	return (curName);
}

Carousel.prototype.drawSectionLink = function(whichText){
	var a = document.createElement('div');
	with (a.style) {
		background = this._sectionsLinkBgColor + " url(" + this.getImgURL(this._sectionTabSrc) + ") no-repeat scroll left top";
		styleFloat = "left"; //IE
		cssFloat = "left"; //FF and others
		overflow = "hidden";
		paddingLeft = this._sectionLinkPaddingX + "px";
	}
	
	var b = a.appendChild(document.createElement('a'));
	with (b.style) {
		display = "block";
		background = this._sectionsLinkBgColor + " url(" + this.getImgURL(this._sectionTabSrc) + ") no-repeat scroll right top";
		color = this._sectionTitleColorOff;
		fontFamily = this._sectionTitleFont;
		fontWeight = this._sectionTitleWeight;
		fontSize = this._sectionTitleSize + "px";
		textDecoration = "none";
		
		paddingRight = this._sectionLinkPaddingX + "px";
		paddingTop = paddingBottom = this._sectionLinkPaddingY + "px";
	}
	var linkText = b.appendChild(document.createTextNode(whichText));
	
	a._link = b;
	a._manager = this;
	a._imgHeight = 80; //this is the height of one button state in the PNG (e.g., height/3 if 3 states)
	//the size of one state should be the width/height required for whatever font size/text length you require
	return a;
}

Carousel.prototype.drawNav = function(){
	var d = document.createElement('div');
	with (d.style) {
		position = "relative";
		height = this._navRowHeight + "px";
		marginBottom = this._navRowMarginBottom + "px";
	}
	
	//SEE ALL button
	if (this.seeAllFunction != undefined) {
		var b = d.appendChild(document.createElement('a'));
		b._imgHeight = this._allButtonHeight;
		with (b.style) {
			display = "block";
			background = "transparent url(" + this.getImgURL(this._allButtonSrc) + ") no-repeat scroll center top";
			styleFloat = "right"; //IE
			cssFloat = "right"; //FF and others
			overflow = "hidden";
			width = this._allButtonWidth + "px";
			height = this._allButtonHeight + "px";
		}
		var seeAllClickFunction = new Function(this.seeAllFunction + '();');
		b.onclick = seeAllClickFunction;
		b.onmousedown = this.showCSSDownState;
		b.onmouseup = this.showCSSOverState;
		b.onmouseover = this.showCSSOverState;
		b.onmouseout = this.showCSSOffState;
	} else {
		//if there's no button, we draw an empty div to hold the row height - the page icons need this in case there's no title/nav either, since they're absolutely positioned
		var b = d.appendChild(document.createElement('div'));
		with (b.style) {
			display = "block";
			styleFloat = "right"; //IE
			cssFloat = "right"; //FF and others
			width = this._allButtonWidth + "px";
			height = this._allButtonHeight + "px";
		}
	}
	
	//PREV/NEXT buttons
	if (this._navPosition == "top") {
		var navHolderYOffset = Math.floor((this._navRowHeight - this._scrollButtonsSize) / 2) - 1;
		var pn = d.appendChild(document.createElement('div'));
		with (pn.style) {
			position = "relative";
			styleFloat = "right"; //IE
			cssFloat = "right"; //FF and others
			height = this._scrollButtonsSize + "px";
			top = navHolderYOffset + "px";
			marginLeft = this._scrollButtonsXMargin + "px";
			if (this.seeAllFunction != undefined) {
				marginRight = this._scrollButtonsXMargin + "px";
			}
		}
		d.prevButton = pn.appendChild(this.drawScrollButton("prev", this._prevButtonSrc));
		d.nextButton = pn.appendChild(this.drawScrollButton("next", this._nextButtonSrc));
	} else if (this._navPosition == "sides") {
		var l = document.createElement('td');
		with (l.style) {
			backgroundColor = this._bgColor;
			verticalAlign = "middle";
			width = this._scrollButtonsSize + "px";
		}
		d.prevButton = l.appendChild(this.drawScrollButton("prev", this._prevButtonSrc));
		this.insertBeforeContent(l);
		
		var m = document.createElement('td');
		with (m.style) {
			backgroundColor = this._bgColor;
			verticalAlign = "middle";
			width = this._scrollButtonsSize + "px";
		}
		d.nextButton = m.appendChild(this.drawScrollButton("next", this._nextButtonSrc));
		this.insertAfterContent(m);
	} else {
		alert("unsupported value for _navPosition - '" + this._navPosition + "'");
	}
		
	//PAGE ICONS (dots)
	var pageIconHolderYOffset = Math.floor((this._navRowHeight - this._pageIconHeight) / 2);
	var pageIconHolder = d.appendChild(document.createElement('ul'));
	var xPadding = 10; // To address IE6 rendering issue
	with (pageIconHolder.style) {
		height = this._pageIconHeight + "px";
		top = pageIconHolderYOffset + "px";
		margin = "0px";
		padding = "0px";
		overflow = "auto";
		position = "absolute";
	}
	d.pageIcons = new Array();
	for (var j = 0; j < this.pageHolder.numPages; j++) {
		var curPageIcon = this.drawNavPageIcon(j);
		d.pageIcons.push(curPageIcon);
		pageIconHolder.appendChild(curPageIcon);
	}
	var pageIconsWidth = this.getRenderedWidth(pageIconHolder);
	var availWidth = Math.floor(this.getAvailTotalWidth() - (this._paddingLeft + this._paddingRight));
	var pageIconsLeftEdge = Math.floor((availWidth - pageIconsWidth) / 2);
//	alert("getAvailTotalWidth: " + this.getAvailTotalWidth());
//	alert("availWidth: " + availWidth);
//	alert("pageIconsWidth: " + pageIconsWidth);
//	alert("pageIconsLeftEdge: " + pageIconsLeftEdge);
	with (pageIconHolder.style) {
		left = (pageIconsLeftEdge - (xPadding / 2)) + "px";
		width = (pageIconsWidth + xPadding) + "px";
		if (d.pageIcons.length == 0) {
		    display = "none";
		}
		if (this.pageHolder.numPages == 1) {
			display = "none";
		}
	}
	
	if (this._useTabs == false) {
	//add the carousel title in-body if no tabs are used
		var labelTargetWidth = (pageIconsLeftEdge - 10);
		var b = document.createElement('div');
		with (b.style) {
			position = "relative";
			color = this._sectionTitleColorOn;
			fontFamily = this._sectionTitleFont;
			fontWeight = this._sectionTitleWeight;
			fontSize = this._sectionTitleSize + "px";
			width = labelTargetWidth + "px";
			overflow = "hidden";
			whiteSpace = "nowrap";
		}
		var curTitleText = this._sectionsData[0].title;
		var fittedTextNode = this.fitTextToFieldByWidth(curTitleText, b, labelTargetWidth);
		b.appendChild(fittedTextNode);
		
		d.appendChild(b);
	}

	this.container.navHolderDiv.appendChild(d);
	
	return d;
}

Carousel.prototype.fitTextToFieldByWidth =  function (whichText, whichField, whichWidth) {
	this.displayName = whichText;
	var loopCount = 0;
	var maxLoopCount = 100;
	
	var tempDiv = whichField.cloneNode(true);
	tempDiv.style.position = "absolute";
	tempDiv.style.top = "3000px";
	var textNode = tempDiv.appendChild(document.createTextNode(whichText));
	document.body.appendChild(tempDiv);
	while (tempDiv.offsetWidth > whichWidth && loopCount < maxLoopCount) {
		var ellipsisText = this.getEllipsisText();
		//alert("ellipsisText: " + ellipsisText);
		tempDiv.removeChild(textNode);
		textNode = tempDiv.appendChild(document.createTextNode(ellipsisText));
		
		loopCount++;
	}
	var finalTextNode = textNode.cloneNode(true);
	document.body.removeChild(tempDiv);
	
	return finalTextNode;
	
}

Carousel.prototype.getEllipsisText =  function () {
	this.displayName = this.displayName.substr(0, this.displayName.length - 1);
	var lastChar = this.displayName.substr(this.displayName.length-1, 1);
	if (lastChar == " ") this.displayName = this.displayName.substr(0, this.displayName.length - 1);
	var tempString = this.displayName + "...";
	return tempString;
}

Carousel.prototype.drawScrollButton = function(whichButton, whichSrc){
	var b = document.createElement('a');
	b._scrollType = whichButton;
	b._manager = this;
	b._imgHeight = this._scrollButtonsSize;
	with (b.style) {
		display = "block";
		background = "transparent url(" + this.getImgURL(whichSrc) + ") no-repeat scroll center top";
		if (this._navPosition == "top") {
			styleFloat = "left";
			cssFloat = "left";
			if (whichButton == "prev") {
				marginRight = (this._scrollButtonsXDistance / 2) + "px";
			} else if (this.itemFunction != undefined) {
				marginLeft = (this._scrollButtonsXDistance / 2) + "px";
			}
		}
		width = this._scrollButtonsSize + "px";
		height = this._scrollButtonsSize + "px";
	}
	return b;
}

Carousel.prototype.drawNavPageIcon = function(whichIndex){
	var d = document.createElement('li');
	with (d.style) {
		display = "inline";
		textAlign = "center";
	}
	
	var l = d.appendChild(document.createElement('a'));
	with (l.style) {
		display = "block";
		background = "transparent url(" + this.getImgURL(this._pageIconSrc) + ") no-repeat scroll center top"; //#FF00FF
		styleFloat = "left"; //IE
		cssFloat = "left"; //FF and others
		overflow = "hidden";
		marginLeft = this._pageIconXMargin + "px";
		marginRight = this._pageIconXMargin + "px";
		padding = "0px";
		width = this._pageIconHeight + "px";
		height = this._pageIconHeight + "px";
	}
	d._link = l;
	l._index = whichIndex;
	l._imgHeight = this._pageIconHeight;
	l._manager = this;
	
	return d;
}

Carousel.prototype.gotoSection = function(whichIndex){
	if (this.curSectionIndex == whichIndex) {
		alert("already on section: " + whichIndex);
	} else {
		this.oldSectionIndex = this.curSectionIndex;
		this.curSectionIndex = whichIndex;
		this.showCurrentSection();
	}
}

Carousel.prototype.showCurrentSection = function(){
	//set the section tabs
	for (var i = 0; i < this.sectionLinks.length; i++) {
		var curLink = this.sectionLinks[i];
		if (curLink._index == this.curSectionIndex) {
			this.disableSectionLink(curLink);
		} else {
			this.enableSectionLink(curLink);
		}
	}
	
	//define the sections and current item data
	if (this._sectionsData != "") {
	    this.itemFunction = this._sectionsData[this.curSectionIndex].itemFunction;
	    this.useItemOverlay = this._sectionsData[this.curSectionIndex].useItemOverlay;
	    this.seeAllFunction = this._sectionsData[this.curSectionIndex].seeAllFunction;
	    this.itemData = this._sectionsData[this.curSectionIndex].itemData;
	    this.footerDivID = this._sectionsData[this.curSectionIndex].footerDivID;
    	
	    var oldSectionLink = this.sectionLinks[this.oldSectionIndex];
	    if (oldSectionLink != undefined) {
		    oldSectionLink.curPageIndex = this.curPageIndex;
		    oldSectionLink.container.style.display = "none";
	    }
	    var curSectionLink = this.sectionLinks[this.curSectionIndex];
	    if (curSectionLink.container == undefined) {
		    this.container = curSectionLink.container = this.drawContainer(); //main wrapper div
		    this.scrollPane = curSectionLink.scrollPane = this.drawScrollPane(); //contains the pages to be scrolled
		    this.drawFooter(); //draws the footer content under the scrollpane, if it's set
		    this.pageHolder = curSectionLink.pageHolder = this.drawPageHolder(); //container div that is moved back and forth for scrolling
		    //fill the scrollPane with content items
		    this.drawItems();
		    //must draw nav after items so we know how many we're working with
		    this.navHolder = curSectionLink.navHolder = this.drawNav();
		    this.scrollToPage(0);
	    } else {
		    //assign references to the objects owned by the current section link
		    this.container = curSectionLink.container;
		    this.scrollPane = curSectionLink.scrollPane;
		    this.pageHolder = curSectionLink.pageHolder;
		    this.navHolder = curSectionLink.navHolder;
		    this.container.style.display = "block";
    		
		    this.curPageIndex = curSectionLink.curPageIndex;
	    }
	}
}

Carousel.prototype.gotoPage = function(whichWay){
	var newPageIndex = this.curPageIndex;
	if (whichWay == "prev") {
		newPageIndex--;
	} else {
		newPageIndex++;
	}
	
	if (newPageIndex < 0) newPageIndex = this.pageHolder.numPages - 1;
	if (newPageIndex == this.pageHolder.numPages) newPageIndex = 0;
	
	this.scrollToPage(newPageIndex);
}

Carousel.prototype.scrollToPage = function(whichIndex){
	this.curPageIndex = whichIndex;
	
	if (this.pageHolder.numPages == 1) {
		this.disableScrollButton("prev");
		this.disableScrollButton("next");
	} else {
		this.enableScrollButton("prev");
		this.enableScrollButton("next");
	}
	
	//set the page icons
	for (var i = 0; i < this.navHolder.pageIcons.length; i++) {
		var curIcon = this.navHolder.pageIcons[i];
		if (curIcon._link._index == this.curPageIndex) {
			this.disablePageButton(curIcon._link);
		} else {
			this.enablePageButton(curIcon._link);
		}
	}
	
	var targetX = -(this.pageHolder.pagePositions[this.curPageIndex]);
	JSTweener.addTween(this.pageHolder.style, {
		time: 1,
		transition: 'easeInOutSine',
		left: targetX,
		suffix: {
			left: 'px'
		}
	});
}

Carousel.prototype.enableSectionLink = function(a){
	a.onclick = this.doSectionLinkClick;
	a.onmousedown = this.showCSSTabDownState;
	a.onmouseup = this.showCSSTabOverState;
	a.onmouseover = this.showCSSTabOverState;
	a.onmouseout = this.showCSSTabOffState;
	a.style.cursor = "pointer";
	a.style.backgroundPosition = "left top";
	a.style.borderBottom = "1px solid " + this._outlineColor;
	a._link.style.backgroundPosition = "right top";
	a._link.style.color = this._sectionTitleColorOff;
}

Carousel.prototype.disableSectionLink = function(a){
	a.onclick = null;
	a.onmousedown = null;
	a.onmouseup = null;
	a.onmouseover = null;
	a.onmouseout = null;
	a.style.cursor = "default";
	a.style.backgroundPosition = "left -" + a._imgHeight + "px";
	a.style.borderBottom = "1px solid " + this._sectionsLinkBgColor;
	a._link.style.backgroundPosition = "right -" + a._imgHeight + "px";
	a._link.style.color = this._sectionTitleColorOn;
}

Carousel.prototype.enablePageButton = function(whichLink){
	whichLink.onclick = this.doPageIconClick;
	whichLink.onmouseover = this.showCSSOverState;
	whichLink.onmouseout = this.showCSSOffState;
	whichLink.style.cursor = "pointer";
	whichLink.style.backgroundPosition = "center top";
}

Carousel.prototype.disablePageButton = function(whichLink){
	whichLink.onclick = null;
	whichLink.onmouseover = null;
	whichLink.onmouseout = null;
	whichLink.style.cursor = "";
	whichLink.style.backgroundPosition = "center -" + (this._pageIconHeight * 2) + "px";
}

Carousel.prototype.enableScrollButton = function(whichButton){
	var curButton = this.navHolder[whichButton + "Button"];
	curButton._enabled = true;
	curButton.onclick = this.doScrollButtonRelease;
	curButton.onmousedown = this.showCSSDownState;
	curButton.onmouseup = this.showCSSOverState;
	curButton.onmouseover = this.showCSSOverState;
	curButton.onmouseout = this.showCSSOffState;
	curButton.style.cursor = "pointer";
	curButton.style.backgroundPosition = "center top";
}

Carousel.prototype.disableScrollButton = function(whichButton){
	var curButton = this.navHolder[whichButton + "Button"];
	curButton._enabled = false;
	curButton.click = null;
	curButton.onmousedown = null;
	curButton.onmouseup = null;
	curButton.onmouseover = null;
	curButton.onmouseout = null;
	curButton.style.cursor = "";
	curButton.style.backgroundPosition = "center -" + (curButton._imgHeight * 3) + "px";
}


//BEGIN "ATTACHMENT" FUNCTIONS (added to objects as they're created - the scope is the object attached to)
Carousel.prototype.doSectionLinkClick = function(){
	this._manager.gotoSection(this._index);
}

Carousel.prototype.showCSSTabOffState = function(){
	this.style.backgroundPosition = "left top";
	this._link.style.backgroundPosition = "right top";
	this._link.style.color = this._manager._sectionTitleColorOff;
}

Carousel.prototype.showCSSTabOverState = function(){
	this.style.backgroundPosition = "left -" + this._imgHeight + "px";
	this._link.style.backgroundPosition = "right -" + this._imgHeight + "px";
	this._link.style.color = this._manager._sectionTitleColorOn;
}

Carousel.prototype.showCSSTabDownState = function(){
	this.style.backgroundPosition = "left -" + (this._imgHeight * 2) + "px";
	this._link.style.backgroundPosition = "right -" + (this._imgHeight * 2) + "px";
}

Carousel.prototype.showCSSOffState = function(){
	this.style.backgroundPosition = "center top";
}

Carousel.prototype.showCSSOverState = function(){
	this.style.backgroundPosition = "center -" + this._imgHeight + "px";
}

Carousel.prototype.showCSSDownState = function(){
	this.style.backgroundPosition = "center -" + (this._imgHeight * 2) + "px";
}

Carousel.prototype.doScrollButtonRelease = function(){
	this._manager.gotoPage(this._scrollType);
	if (this._enabled == true) {
		this.onmouseover(); //call showCSSOverState (attached as onmouseover)
	}
}

Carousel.prototype.doPageIconClick = function(){
	this._manager.scrollToPage(this._index);
}
//END "ATTACHMENT" FUNCTIONS

Carousel.prototype.drawItems = function(){
	var availWidth = this.getAvailScrollWidth();
	
	var columns = Math.floor(availWidth / this._itemWidth);
	var itemsPerPage = columns * this._numRows;
	this.pageHolder.numPages = Math.ceil(this.itemData.length / itemsPerPage);
	
	var curDataIndex = 0;
	var curX = 0;
	this.pageHolder.pages = new Array();
	this.pageHolder.pagePositions = new Array();
	for (var j = 0; j < this.pageHolder.numPages; j++) {
		var curPage = this.drawPage();
		curPage.style.width = availWidth + "px";
		curPage.style.left = curX + "px";
		this.pageHolder.pages.push(curPage);
		this.pageHolder.pagePositions.push(curX);
		curX += availWidth;
		
		for (var i = 0; i < itemsPerPage; i++) {
			var curInitObj = this.itemData[curDataIndex];
			if (curInitObj != undefined) {
				curInitObj._parent = this;
				curInitObj._index = curDataIndex;
				curInitObj._clickFunction = this.itemFunction;
				curInitObj._useItemOverlay = this.useItemOverlay;
				curInitObj._width = this._itemWidth;
				curInitObj._height = this._itemHeight;
				curInitObj._imgWidth = this._imgWidth;// - (itemPadding * 2);
				curInitObj._imgHeight = this._imgHeight;// - (itemPadding * 2);
				//curInitObj._defaultOpacity = this._itemDefaultOpacity;
				curInitObj.isIE = this.isIE;
				curInitObj.isIE6 = this.isIE6;
				var curItem = new CarouselItem(curInitObj);
				curPage.appendChild(curItem);
				
				curDataIndex++;
			} else {
				break;
			}
		}
		this.appendClearDiv(curPage);
		
		this.pageHolder.appendChild(curPage);
	}
	
	this.displayPageHeight = this.getRenderedHeight(this.pageHolder.pages[0]);
	//alert("this.displayPageHeight: " + this.displayPageHeight);
	this.pageHolder.style.height = this.displayPageHeight + "px";
}

Carousel.prototype.getRenderedHeight = function(whichDiv){
	//we need to actually add an item to the document body to get rendered height
	//this accepts a reference to a child element, creates a clone of it offscreen to get the height
	//then destroys the clone
	if (!whichDiv) { return 0;}
	var tempDiv = whichDiv.cloneNode(true);
	tempDiv.style.position = "relative";
	//tempDiv.style.top = "-3000px";
	tempDiv.style.left = "3000px";
	document.body.appendChild(tempDiv);
	var renderedHeight = tempDiv.offsetHeight;
	document.body.removeChild(tempDiv);
	return renderedHeight;
}

Carousel.prototype.getRenderedWidth = function(whichDiv){
	//we need to actually add an item to the document body to get rendered height
	//this accepts a reference to a child element, creates a clone of it offscreen to get the height
	//then destroys the clone
	var tempDiv = whichDiv.cloneNode(true);
	tempDiv.style.position = "absolute";
	tempDiv.style.top = "3000px";
	document.body.appendChild(tempDiv);
	var renderedHeight = tempDiv.offsetWidth;
	document.body.removeChild(tempDiv);
	return renderedHeight;
}

Carousel.prototype.showConfigError = function(whichMessage){
	var errMessage = "CAROUSEL CONFIG ERROR\n";
	errMessage += "-------------------------------------\n";
	errMessage += whichMessage;
	alert(errMessage);
}

Carousel.prototype.appendClearDiv = function(whichDiv){
	var d = document.createElement('div');
	with (d.style) {
		clear = "both";
	}
	whichDiv.appendChild(d);
}

Carousel.prototype.getAvailTotalWidth = function(){
	var availWidth = this._parent.offsetWidth;
	
	//we need to see if the _parent div has any padding or margins - they mess up the tab BGs in IE6... yeah
	var parentPaddingLeft = this._parent.style.paddingLeft;
	var parentPaddingRight = this._parent.style.paddingRight;
	if (parentPaddingRight != undefined && parentPaddingRight != "") {
		availWidth -= this.parseStyleValueToInteger(parentPaddingRight);
	}
	if (parentPaddingLeft != undefined && parentPaddingLeft != "") {
		availWidth -= this.parseStyleValueToInteger(parentPaddingLeft);
	}
	
	if (this._overrideWidth != undefined) {
		availWidth = this._overrideWidth;
	}
	//alert("getAvailTotalWidth: " + availWidth);
	return availWidth;
}

Carousel.prototype.parseStyleValueToInteger = function(whichValue){
	whichValue = whichValue.substr(0, whichValue.length-2);
	//alert("whichValue: " + whichValue);
	whichValue = parseInt(whichValue);
	//alert("whichValue: " + whichValue);
	return whichValue;
}

Carousel.prototype.getAvailScrollWidth = function(){
	var availWidth = this.getAvailTotalWidth() - (this._paddingLeft + this._paddingRight);
	
	//conditions for side nav
	if (this._navPosition == "sides") {
		availWidth -= (this._scrollButtonsSize * 2);
	}
	
	return availWidth;
}

Carousel.prototype.drawPage = function(){
	var d = document.createElement('div');
	with (d.style) {
		position = "absolute";
	}
	this.pageHolder.appendChild(d);
	return d;
}

Carousel.prototype.drawPageHolder = function(){
	var d = document.createElement('div');
	with (d.style) {
		position = "relative";
		width = this.getAvailScrollWidth() + "px";
	}
	this.scrollPane.appendChild(d);
	return d;
}

Carousel.prototype.drawScrollPane = function(){
	var d = document.createElement('div');
	with (d.style) {
		position = "relative";
		height = (this._itemHeight * this._numRows) + "px";
		overflow = "hidden";
		if (this._navPosition == "sides") {
			width = this.getAvailScrollWidth() + "px";
		}
	}
	this.appendToContainer(d);
	return d;
}

Carousel.prototype.drawFooter = function(){
	if (this.footerDivID != undefined) {
		var d = document.getElementById(this.footerDivID);
		if (d == null) {
			alert("div defined by footerDivID (" + this.footerDivID + ") doesn't exist");
		} else {
			d = d.cloneNode(true);
			//d = d.parentNode.removeChild(d);
			with (d.style) {
				display = "block";
			}
			this.appendToContainer(d);
		}
	}
}

Carousel.prototype.appendTableElement = function(whichElement){
	//create a table div with tbody for IE
	//returns a reference to the tbody, which is what content must be appended to to render in IE
	var t = document.createElement('table');
	t.cellSpacing = 0;
	t.cellPadding = 0;
	with (t.style) {
		position = "relative";
		width = "100%";
		clear = "both";
	}
	var b = t.appendChild(document.createElement('tbody'));
	whichElement.appendChild(t);
	return b;
}

Carousel.prototype.drawContainer = function() {
	var c = document.createElement('div');
	
	var d = this.appendTableElement(c);
	var dRow = d.appendChild(document.createElement('tr'));
	
	//when tabs are shown, the bgs in the cells below are shifted up by 1 since the top outline of the carousel is actually contained in the sections tab holder
	var bgPosition = "top";
	if (this._useTabs == true) bgPosition = "-1px";
	var dC1 = dRow.appendChild(document.createElement('td'));
	with (dC1.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll left " + bgPosition;
		height = this._paddingTop + "px";
	}
	var dC2 = dRow.appendChild(document.createElement('td'));
	with (dC2.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll right " + bgPosition;
		height = this._paddingTop + "px";
	}
	
	var h = this.appendTableElement(c);
	var hRow = h.appendChild(document.createElement('tr'));
	var hC1 = hRow.appendChild(document.createElement('td'));
	with (hC1.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll left center";
		width = this._paddingLeft + "px";
	}
	var hC2 = hRow.appendChild(document.createElement('td'));
	with (hC2.style) {
		backgroundColor = this._bgColor;
	}
	c.navHolderDiv = hC2.appendChild(document.createElement('div'));
	with (c.navHolderDiv.style) {
		height = (this._navRowHeight + this._navRowMarginBottom) + "px";
	}
	var hC3 = hRow.appendChild(document.createElement('td'));
	with (hC3.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll right center";
		width = this._paddingRight + "px";
	}
	
	var f = this.appendTableElement(c);
	var fRow = f.appendChild(document.createElement('tr'));
	var fC1 = fRow.appendChild(document.createElement('td'));
	with (fC1.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll center left";
		width = this._paddingLeft + "px";
	}
	var fC2 = fRow.appendChild(document.createElement('td'));
	with (fC2.style) {
		backgroundColor = this._bgColor;
	}
	c.contentHolder = fC2.appendChild(document.createElement('div'));
	with (c.contentHolder.style) {
		position = "relative";
	}
	var fC3 = fRow.appendChild(document.createElement('td'));
	with (fC3.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll center right";
		width = this._paddingRight + "px";
	}
	
	var e = this.appendTableElement(c);
	var eRow = e.appendChild(document.createElement('tr'));
	var eC1 = eRow.appendChild(document.createElement('td'));
	with (eC1.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll left bottom";
		height = this._paddingTop + "px";
	}
	var eC2 = eRow.appendChild(document.createElement('td'));
	with (eC2.style) {
		background = "transparent url(" + this.getImgURL(this._bgSrc) + ") no-repeat scroll right bottom";
		height = this._paddingTop + "px";
	}
	
	this._parent.appendChild(c);
	return c;
}

Carousel.prototype.appendToContainer = function(whichElement){
	this.container.contentHolder.appendChild(whichElement);
}

Carousel.prototype.insertBeforeContent = function(whichElement){
	var contentCell = this.container.contentHolder.parentNode;
	var contentRow = contentCell.parentNode;
	contentRow.insertBefore(whichElement, contentCell);
}

Carousel.prototype.insertAfterContent = function(whichElement){
	var contentCell = this.container.contentHolder.parentNode;
	var contentRow = contentCell.parentNode;
	contentRow.insertBefore(whichElement, contentCell.nextSibling);
}

function CarouselItem(initObj){
	//transfer all properties of the init object to this instance
	for (var prop in initObj) {
		var curValue = initObj[prop];
		this[prop] = curValue;
	}
	
	if (this._textColor == undefined) this._textColor = "#FFFFFF";
	if (this._linkColor == undefined) this._linkColor = "#FF9900";
	//for the shaded/image rollover state (the variable that determines whether or not to use the overlay is defined for each section)
	if (this.overlayImageSrc == undefined) this.overlayImageSrc = "overlay_play.png";
	this.overlayImagePath = this._parent._imgPath + this.overlayImageSrc;
	if (this.overlayImageWidth == undefined) this.overlayImageWidth = 32;
	if (this.overlayImageHeight == undefined) this.overlayImageHeight = 32;
	
	this.container = this.drawContainer();
	this.container.thumbImg = this.drawThumbImg();
	this.drawLabels();
	return this.container;
}

CarouselItem.prototype.drawContainer = function(){
	var clickFunction = new Function(this._clickFunction + '("' + this._id + '"); return false;');
	
	var c = document.createElement('span');
	var showContainerBorder = false;
	if (showContainerBorder == true) {
		this._width -= 2
		this._height -= 2;
	}
	with (c.style) {
		cursor = "pointer";
		styleFloat = "left"; //IE
		cssFloat = "left"; //FF and others
		display = "inline";
		width = this._width + "px";
		height = this._height + "px";
		
		if (showContainerBorder == true) {
			backgroundColor = "#666666";
			border = "solid 1px #eeeeee";
		}
	}
	c._manager = this;
	c.onmouseover = function() { this._manager.doRollOver() };
	c.onmouseout = function() { this._manager.doRollOut() };
	c.onclick = clickFunction;
	
	return c;
}

CarouselItem.prototype.drawThumbImg = function(){
	this.imgPadding = 3;
	this.imgBorderWeight = 3;
	
	var imageOffset = this.imgPadding + this.imgBorderWeight;
	var d = this.container.appendChild(document.createElement('div'));
	with (d.style) {
		position = "relative";
		textAlign = "center";
		width = this._imgWidth + "px";
		height = this._imgHeight + "px";
		left = (((this._width - this._imgWidth) / 2) - imageOffset) + "px";
		
		border = "solid " + this.imgBorderWeight + "px #000";
		padding = this.imgPadding + "px";
		marginTop = "10px";
		marginBottom = "5px";
	}
		
	var t = d.appendChild(document.createElement('img'));
	with (t.style) {
		height = this._imgHeight + "px";
		//position = "relative";
	}
	t._manager = this;
	t.src = this._src;
	
	
	if (this._useItemOverlay == true) {
		var o = d.appendChild(document.createElement('div'));
		with (o.style) {
			background = "#000000";
			position = "absolute";
			top = this.imgBorderWeight + "px";
			left = this.imgBorderWeight + "px";
			width = this._imgWidth + "px";
			height = this._imgHeight + "px";
		}
		if (this.isIE == true) {
			o.style.filter = "alpha(opacity=0)";
		} else {
			o.style.MozOpacity = 0;
		}
		this.overlay = o;
		
		var oi = d.appendChild(document.createElement('div'));
		with (oi.style) {
			background = "transparent url(" + this.overlayImagePath + ") no-repeat scroll center";
			position = "absolute";
			top = this.imgBorderWeight + ((this._imgHeight - this.overlayImageHeight) / 2) + "px";
			left = this.imgBorderWeight + ((this._imgWidth - this.overlayImageWidth) / 2) + "px";
			width = this.overlayImageWidth + "px";
			height = this.overlayImageHeight + "px";
			display = "none";
		}
		if (this.isIE == true) {
			oi.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.overlayImagePath + "')";
			oi.style.backgroundImage = "none";
		}
		this.overlayImage = oi;
	}
	
	return d;
}

CarouselItem.prototype.drawLabels = function(){
	var labelHolder = this.container.appendChild(document.createElement('div'));
	var labelPaddingX = 3;
	with (labelHolder.style) {
		textAlign = "center";
		paddingTop = "6px";
		paddingLeft = labelPaddingX + "px";
		paddingRight = labelPaddingX + "px";
		color = this._textColor;
		whiteSpace = "nowrap";
	}
	var labelLink = this.drawLabelDiv(this._labels[0], (labelPaddingX*2));
	labelHolder.appendChild(labelLink);
	if (this._labels.length > 1) {
		//add any additional lines to the label
		for (var i = 1; i < this._labels.length; i++) {
			var subDiv = this.drawLabelDiv(this._labels[i], (labelPaddingX*2));
			labelHolder.appendChild(subDiv);
		}
	}
	this.container.labelLink = labelLink;
}

CarouselItem.prototype.drawLabelDiv = function(whichText, whichPadding){
	var d = document.createElement('div');
	d.style.whiteSpace = "nowrap";
	var labelText = whichText;//this._labels[0];
	var targetLabelWidth = this._width - whichPadding;
	var fittedTextNode = this._parent.fitTextToFieldByWidth(labelText, d, targetLabelWidth);
	var e = document.createElement('div');
	e.appendChild(fittedTextNode);
	return e;
}

CarouselItem.prototype.doRollOver = function(){
	if (this._useItemOverlay == true) {
		this.overlayImage.style.display = "block";
		if (this.isIE == true) {
			this.overlay.style.filter = "alpha(opacity=50)";
		} else {
			this.overlay.style.MozOpacity = .5;
		}
	}
	this.container.thumbImg.style.borderColor = this._linkColor;
	this.container.labelLink.style.color = this._linkColor;
}

CarouselItem.prototype.doRollOut = function(){
	if (this._useItemOverlay == true) {
		this.overlayImage.style.display = "none";
		if (this.isIE == true) {
			this.overlay.style.filter = "alpha(opacity=0)";
		} else {
			this.overlay.style.MozOpacity = 0;
		}
	}
	this.container.thumbImg.style.borderColor = "#000";
	this.container.labelLink.style.color = this._textColor;
}

//cut below ---
var imgsLoaded = 0;
function updateImageCount(){
	imgsLoaded++;
	window.status = "imgsLoaded: " + imgsLoaded;
}

function fixPNG(whichElement){
	if (isIE6 == true) {
		bgImg = whichElement.style.backgroundImage;
		if (bgImg && bgImg != 'none') {
			if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i)) {
				var s = RegExp.$1;
				//if (currentStyle.width == 'auto' && currentStyle.height == 'auto') 
				//	style.width = offsetWidth + 'px';
				whichElement.style.backgroundImage = 'none';
				filt(whichElement, s, 'crop');
				// IE link fix.
				//for (var n = 0; n < childNodes.length; n++) 
				//	if (childNodes[n].style) 
				//		childNodes[n].style.position = 'relative';
			} else {
				alert("no bgImg.match");
				//	filt();
			}
		}
	}
}
function filt(whichElement, s, m){
	var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
	//alert("filters: " + filters);
	//if (filters[f] != undefined) {
	//	filters[f].enabled = s ? true : false;
	//	if (s) with (filters[f]) {
	//		src = s;
	//		sizingMethod = m
	//	}
	//} else {
		//if (s) style.filter = 'progid:' + f + '(src="' + s + '",sizingMethod="' + m + '")';
		whichElement.style.filter = 'progid:' + f + '(src="' + s + '",sizingMethod="' + m + '")';
	//}
}