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

//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 blendimage(headerDivId, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //make divs transparent to show backgrounds
    changeOpac(0, headerDivId);
    

    //set new image
    document.getElementById(headerDivId).style.backgroundImage = "url('" + imagefile + "')";
    
    

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

var imageIndex = 0;

function rotateImages(imageFolder) {
        
    var Images = new Array(2);

    Images[0] = ["3821 BlockArcade 1323x411.jpg", "/LinkClick.aspx?link=115&tabid=115"];
    Images[1] = ["3893 RoyalArcade 1323x411.jpg", "/LinkClick.aspx?link=114&tabid=114"];
    Images[2] = ["6618 Parliament House1333x411.jpg", "/LinkClick.aspx?link=114&tabid=114"];
    Images[3] = ["7353 WebBridge 1323x411.jpg", "/LinkClick.aspx?link=114&tabid=114"];
    Images[4] = ["7622 Pellegrini a 1323x411.jpg", "/LinkClick.aspx?link=114&tabid=114"];
    

    //set background div styles to the current styles in use (cant access ones set from css via javascript so use array)
    document.getElementById('bannerBack').style.backgroundImage = "url('" + imageFolder + Images[imageIndex][0] + "')";
      
  
    //get next image
    imageIndex++;
    
    if (imageIndex >= Images.length)
    {
        //reset array
        imageIndex = 0;
    }

    //set onclick
   // setBannerOnClick( Images[imageIndex][4]);

    //swap images
    blendimage('banner', imageFolder + Images[imageIndex][0], 4000)


   
    setRotation(imageFolder);
}

function setBannerOnClick(url) {
    document.getElementById('bannerBack').onclick = function() { document.location = url; };
}

function setRotation(imageFolder) {

    //run again in 10 seconds
    setTimeout("rotateImages('" + imageFolder + "')", 7000);
}