/*
src code http://www.brainerror.net/scripts_js_blendtrans.php
*/


function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	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++;
		}
	}
}

function opacityonl() {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	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++;
		}
	}
}


function opacityh() {
	//speed for each frame
	var speedH = Math.round(millisecH / 100);
	var timerH = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStartH > opacEndH) {
		for(i = opacStartH; i >= opacEndH; i--) {
			setTimeout("changeOpacH(" + i + ",'" + id + "')",(timerH * speedH));
			timerH++;
		}
	} else if(opacStartH < opacEndH) {
		for(i = opacStartH; i <= opacEndH; i++)
			{
			setTimeout("changeOpacH(" + i + ",'" + id + "')",(timerH * speedH));
			timerH++;
		}
	}
	//setTimeout("document.getElementById(divid).style.zIndex = '3'", 4000);
	setTimeout("document.getElementById(divid).style.visibility = 'hidden'", millisecH);
}
function changeOpacH(opacity, id) {
	var objectH = document.getElementById(id).style; 
	objectH.opacity = (opacity / 101);
	objectH.MozOpacity = (opacity / 101);
	objectH.KhtmlOpacity = (opacity / 100);
	objectH.filter = "alpha(opacity=" + opacity + ")";
	objectH.width = opacity + "%";
	objectH.height = opacity + "%";
}


//change the opacity for different browsers
function changeOpac(opacity, id) {
	var objectid = document.getElementById(id); 
	idt = 't'+id;
	idb = 'b'+id;
	var objectidt = document.getElementById(idt); 
	var objectidb = document.getElementById(idb); 
	if (objectid) { var object = objectid.style; }
	else if (objectidt) { var object = objectidt.style; }
	else if (objectidb) { var object = objectidb.style; }
	if (object) {
		object.opacity = (opacity / 101);
		object.MozOpacity = (opacity / 101);
		object.KhtmlOpacity = (opacity / 100);
		object.filter = "alpha(opacity=" + opacity + ")";
	}
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it invisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}

function shiftOpacity2(id, millisec) {
	//if an element is invisible, make it visible, else make it invisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} 
}

function blendimage() {

	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++;
	}
	
}

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)
}

/*
Des Des on the web
March 17, 2004 @ 10:48 AM
I wanted to use an image transition for my photo gallery and while revealTrans and blendTrans filters were available for IE and no equivalent filter was available for
Mozilla/Netscape until I came across your site. And found your code which was an affective use of setting the opacity in CSS.
 I used the following code with your code to ensure only one pass of the transition occurred if the user repeatedly retriggered it. 
 if you use 2 image elements with id1 and id2 one shown and one hidden you can load the next image into the hidden image element 
 while the user is viewing the shown image you solve the problem with preloading. 
*/

var fade_started=0;
function fadeTransStart(id1, id2, t1)
{
if(fade_started==0)
{
fadeTrans(id1, id2, t1);
}
}
function fadeTrans(id1, id2, t1)
{
if(fade_started==0)
{
fade_started=1;
opacity(id1,100,0,t1);
setTimeout("fadeTrans('"+id1+"', '"+id2+"', "+t1+")",t1);
}
else
{
document.getElementById(id1).src = document.getElementById(id2).src;
opacity(id1, 0, 100, t1);
setTimeout("fadeTransComplete()",t1);
}
}
function fadeTransComplete()
{
fade_started=0;
} 


/*
i used your code here in combination with some other code to generate an expandable cross platform slide show with cross fade... 
here's the code if you are interested...
Thanks for your good work!

function call:
<script language="JavaScript">RunSlideShow("divid","imageid","images/1.jpg;images/2.jpg;images/3.jpg;images/4.jpg;",3);</script>

functions:
//www.cryer.co.uk © 2004 and www.brainerror.net ver 1.3 © June 7,2004
//were reference for the following Javascript slide show code


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 + ")";
}

function blendimage(divid, imageid, imagefile, millisec)
{
var speed = Math.round(millisec / 10);
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++;
}
}

var slideCache = new Array();
function RunSlideShow(divid,imageid,imageFiles,displaySecs)
{
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);

changeOpac(0, imageid);
blendimage(divid,imageid,nextImage,100);

var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage;
setTimeout("RunSlideShow('"+divid+"','"+imageid+"','"+futureImages+"',"+displaySecs+")",displaySecs*1000);

// Cache the next image to improve performance.
imageSeparator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}
*/
/*
I Added a fuynction that works to set initial elements to a certain opacity, so that if someone has java script disabled...they can still access 
the site without fades etc.
It is set up so that whatever tag you assign a class of hide i.e.
<div class="hide"></div>
It will set the opacity variables to a given number, in this case xero.
Now it is truly accessible!

onload = function hide() {
var e, i = 0;
while (e = document.getElementsByTagName ('*')[i++]) {

if (/bhideb/.test (e.className)) {
e.style.opacity = 0;
e.style.MozOpacity = 0;
e.style.KhtmlOpacity = 0;
e.style.filter = "alpha(0)";
}
}
}
*/