var maxpicnum = 67;		// 最多圖片數 100.jpg ~ 165.jpg
var cbChangeIndex = -1;	// cbChangeIndex: the current item in cbChangeContent.
var PreIndex = -1;	// cbChangeIndex: the current item in cbChangeContent.
var cbChangePercent = 510;	// cbChangePercent: percent of change. (-64 to 510.)
var cbChangeSwitch = false;	// cbChangeSwitch: direction. (in or out)
var cbChangeScroller = document.getElementById('cbChangeScroller');	// cbChangeScroller: the actual div to mess with.
// The ranges to change from for R, G, and B. (how far apart they are.)
var cbChangeRange = {
	'r': cbChangeFrom.r - cbChangeTo.r,
	'g': cbChangeFrom.g - cbChangeTo.g,
	'b': cbChangeFrom.b - cbChangeTo.b
};

// Divide by 20 because we are doing it 20 times per one ms.
cbChangeDelay /= 40;

// Start the changer!
window.setTimeout('cbChanger();', 20);

// Main	fading function... called 50 times every second.
function cbChanger()
{
	if (cbChangeContent.length <= 1)
		return;

	// A fix for Internet Explorer 4: wait until the document is loaded so we can use setInnerHTML().
	if (typeof(window.document.readyState) != "undefined" && window.document.readyState != "complete") {
		window.setTimeout('cbChanger();', 20);
		return;
	}

	// Starting out?  Set up the first item.
	if (cbChangeIndex == -1) {
		//setInnerHTML(cbChangeScroller, cbChangeBefore + cbChangeContent[0] + cbChangeAfter);
		cbChangeIndex = 101;
		PreIndex = 101;

		// In Mozilla, text jumps around from this when 1 or 0.5, etc...
		if (typeof(cbChangeScroller.style.MozOpacity) != "undefined")
			cbChangeScroller.style.MozOpacity = "0.90";
		else if (typeof(cbChangeScroller.style.opacity) != "undefined")
			cbChangeScroller.style.opacity = "0.90";
		// In Internet Explorer, we have to define this to use it.
		else if (typeof(cbChangeScroller.style.filter) != "undefined")
			cbChangeScroller.style.filter = "alpha(opacity=100)";
	}

	// Are we already done fading in?  If so, change out.
	if (cbChangePercent >= 510){
		cbChangeSwitch = !cbChangeSwitch;
	}
	// All the way changed out?
	else if (cbChangePercent <= -64) {
		cbChangeSwitch = !cbChangeSwitch;

		// Go to the next item, or first if we're out of items.
		//setInnerHTML(cbChangeScroller, cbChangeBefore + cbChangeContent[cbChangeIndex++] + cbChangeAfter);
		cbChangeIndex_new = Math.floor(Math.random() * maxpicnum + 100);
		if(cbChangeIndex_new == PreIndex) {
			cbChangeIndex_new = Math.floor(Math.random() * maxpicnum + 100);
		}
		if(cbChangeIndex_new == PreIndex) {
			cbChangeIndex_new = cbChangeIndex + 1;
		}
		
		cbChangeIndex = PreIndex;
		PreIndex = cbChangeIndex_new;
		if (cbChangeIndex >= maxpicnum + 100)
			cbChangeIndex = 100;
		//cbChangeIndex = cbChangeIndex + 100;
		setInnerHTML(cbChangeScroller, cbChangeBefore + cbChangeIndex.toString()  + cbChangeAfter);
		setInnerHTML(cbChangeScrollerhide, cbChangeBefore + PreIndex.toString()  + cbChangeAfter);
	}

	// Increment or decrement the change percentage.
	if (cbChangeSwitch)
		cbChangePercent -= 255 / cbChangeDelay * 2;
	else
		cbChangePercent += 255 / cbChangeDelay * 2;

	// If it's not outside 0 and 256... (otherwise it's just delay time.)
	if (cbChangePercent < 256 && cbChangePercent > 0) {
		// Easier... also faster...
		var tempPercent = cbChangePercent / 255, rounded;

		if (typeof(cbChangeScroller.style.MozOpacity) != "undefined") {
			rounded = Math.round(tempPercent * 100) / 100;
			cbChangeScroller.style.MozOpacity = rounded == 1 ? "0.99" : rounded;
		}
		else if (typeof(cbChangeScroller.style.opacity) != "undefined") {
			rounded = Math.round(tempPercent * 100) / 100;
			cbChangeScroller.style.opacity = rounded == 1 ? "0.99" : rounded;
		}
		else {
			var done = false;
			if (typeof(cbChangeScroller.filters.alpha) != "undefined") {
				// Internet Explorer 4 just can't handle "try".
				eval("try\
					{\
						cbChangeScroller.filters.alpha.opacity = Math.round(tempPercent * 100);\
						done = true;\
					}\
					catch (err)\
					{\
					}");
			}

			if (!done) {
				// Get the new R, G, and B. (it should be bottom + (range of color * percent)...)
				var r = Math.ceil(cbChangeTo.r + cbChangeRange.r * tempPercent);
				var g = Math.ceil(cbChangeTo.g + cbChangeRange.g * tempPercent);
				var b = Math.ceil(cbChangeTo.b + cbChangeRange.b * tempPercent);

				// Set the color in the style, thereby fading it.
				cbChangeScroller.style.color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
			}
		}
	}

	// Keep going.
	window.setTimeout('cbChanger();', 20);
}

// Set the "inside" HTML of an element.
function setInnerHTML(element, toValue)
{
	// IE has this built in...
	if (typeof(element.innerHTML) != 'undefined')
		element.innerHTML = toValue;
	// Otherwise, try createContextualFragment().
	else {
		var range = document.createRange();
		range.selectNodeContents(element);
		range.deleteContents();
		element.appendChild(range.createContextualFragment(toValue));
	}
}