

    var imgs = new Array();
    var imgCnt = 0;
    var dv;
    var im;
    var bt;
    function loopBlend(imglist,divid,imgid,blendTime,displayTime){
        imgs = imglist.split(',');
        dv = divid;
        im = imgid;
        bt = blendTime;
        if (imglist.length>1){
          setInterval('blend(imgs,dv,im,bt)',displayTime);
        }
    }
    function blend(imglist,divid,imgid,blendTime){
        var imgFile = imgs[imgCnt];
        blendimage(divid,imgid,imgFile,blendTime)
        imgCnt++;
        if (imgCnt >= imgs.length){
          imgCnt = 0;
        }
    }
    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 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);
            }
        }
        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 / 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;
            //update alt tag
            document.getElementById(imageid).alt = "Examples of custom designed rubber keypads";

            //fade in image
            for(i = 0; i <= 100; i++) {
                setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
                timer++;
            }
        }




