var theImages = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif', '6.gif'];
var imgIdName = 'bearPic';
var imgEIndex = Math.floor(Math.random()*theImages.length-1)+1;
var element;
var contain;
var timeout;


function startImages()
{
	if (!document.getElementById) return;
	
	// Get element & container
	element = document.getElementById(imgIdName);

	// Set timeout
	timeout = window.setTimeout("nextImage()", 8000);
}

function nextImage()
{
	if (!document.getElementById) return;

	var nextImage = '/images/bears/'+theImages[imgEIndex];

	// New, different image index
	var newVal = imgEIndex;
	while(newVal == imgEIndex)
	{
		newVal = Math.floor(Math.random()*theImages.length-1)+1;
	}
	imgEIndex = newVal;

	// Fade
	blend(imgIdName, nextImage, 1000);

	timeout = window.setTimeout("nextImage()", 8000);
}


function blend(element, image, time) {
	var speed = Math.round(time/100);
	var timer = 0;

	// Fade out old
	for(i=100; i>=0; i--) {
		setTimeout("changeOpac(" + i + ",'" + element + "')",(timer * speed));
		timer++;
	}

	// Blend in again
	setTimeout("blendIn('"+element+"','"+image+"',"+time+")", (time+200));

}

function blendIn(element, image, time) {
	var speed = Math.round(time/100);
	var timer = 0;

	// Swap new image
	document.getElementById(element).src = image;
	changeOpac(0, element);

	// Fade in new
	timer = 0;
	for(i=0; i<=100; i++) {
		setTimeout("changeOpac(" + i + ",'" + element + "')",(timer * speed));
		timer++;
	}
}


//change the opacity for different browsers 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
}