<!-- http://brainerror.net/scripts/javascript/blendtrans/ -->

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 fadeTransition(id, millisec, newPic) {
     //speed for each frame
      var speed = Math.round(millisec / 100);
      var timer = 0;

      // fade out current image
      for (i = 100; i >= 0; i--) {
          setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
          timer++;
          }

      // set new image
      setTimeout("document.getElementById('"+id+"').src='"+newPic+"'",timer*speed);
      timer++;

      // fade in new image
      setTimeout("opacity('"+id+"',0,100,"+millisec+")",timer*speed);
}


//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 + ")";
}

function shiftOpacity(id, millisec) {
        //if an element is invisible, make it visible, else make it ivisible
        if(document.getElementById(id).style.opacity == 0) {
                opacity(id, 0, 100, millisec);
        } else {
                opacity(id, 100, 0, millisec);
        }
}

// NOTE:  works only when the two images are the same size
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++;
        }
}

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)
}