//All the code on this page came from www.brainerror.net.

//This function identifies the element, and the timing, of changing the opacity of an element.  //It checks to see whether opacity should be increased or decreased.

function opacity(id,opacStart,opacEnd,millisec) {
//	alert("id is: " + id + ", opacStart is " + opacStart + ", OpacEnd is " + opacEnd + ", millseconds is " + millisec);
	var speed = Math.round(millisec/100);
	var timer = 0;
	if (opacStart > opacEnd) {
		for (i = opacStart; i>= opacEnd; i--) {
			setTimeout("changeOpac("+i+",'"+id+"')",(timer * speed));
			timer++;
		}
	} else if (opacStart < opacEnd) {
		for (i = opacStart; i<= opacEnd; i++) {
			setTimeout("changeOpac("+i+",'"+id+"')",(timer * speed));
			timer++;
		}
	}
}

//This function supports opacity requirements for multiple browsers.
function changeOpac(opacity,id) {
//	alert("opacity is: " + opacity + ", id is: " + id);
	var object = document.getElementById(id).style;
	object.opacity = (opacity/100);
	object.MozOpacity = (opacity/100);
	object.KhtmlOpacity = (opacity/100);
	object.filter = "alpha(opacity=" + opacity + "0)";
}
	

//This function simply checks the opacity of an element and sends the appropriate arguements to the opacity function. Using this function you don't have to check, or set, the elements current opacity.


function shiftOpacity(id, millisec) {
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id,0,100,millisec);
	} else {
		opacity(id,100,0,millisec);
	}
}

//This function allows you to blend multiple images.  Note, to prevent flickering, you need to have the following html code inserted in your html and css documents.  The background image is identical to the foreground image, so any flickering is not visible by the visitor. <div style="background-image: url(media/texts/photos_about/02aft.jpg); background-repeat: no-repeat; width: 200px; height: 150px;" id="blenddiv">. <img src="media/texts/photos_about/02aft.jpg" style="width: 200px; height: 150px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" /></div>

function blendImage(divid, imageid, imagefile, millisec) { 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 
     
    //set the current image as background 
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")"; 
     
    //make image transparent 
    changeOpac(0, imageid); 
     
    //make new image 
    document.getElementById(imageid).src = imagefile; 

    //fade in image 
    for(i = 0; i <= 100; i++) { 
        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed)); 
        timer++; 
    } 
} 

//This function checks to see if the opacity of an image is less than 100.  If it is, it starts making the image transition at that point.

//function currentOpac(id, opacEnd, millisec) { 
//    //standard opacity is 100 
//    var currentOpac = 100; 
//     
//    //if the element has an opacity set, get it 
//    if(document.getElementById(id).style.opacity < 100) { 
//        currentOpac = document.getElementById(id).style.opacity * 100; 
//    } 
//
//    //call for the function that changes the opacity 
//    opacity(id, currentOpac, opacEnd, millisec) 
//}