LoadImages();
function LoadImages()
{
    setTimeout("blendimage('SQ11div', 'SQ11image', 'images/Boxes/Orange.gif', 2000)", 100);
    setTimeout("blendimage('SQ12div', 'SQ12image', 'images/Boxes/Red2.gif', 2000)", 500);
    setTimeout("blendimage('SQ13div', 'SQ13image', 'images/Boxes/Brown.gif', 2000)", 300);
    setTimeout("blendimage('SQ14div', 'SQ14image', 'images/Boxes/Green.gif', 2000)", 1000);
    setTimeout("blendimage('SQ21div', 'SQ21image', 'images/Boxes/Brown.gif', 2000)", 200);
    setTimeout("blendimage('SQ22div', 'SQ22image', 'images/Boxes/Orange.gif', 2000)", 800);
    setTimeout("blendimage('SQ23div', 'SQ23image', 'images/Boxes/Green.gif', 2000)", 600);
    setTimeout("blendimage('SQ24div', 'SQ24image', 'images/Boxes/Red1.gif', 2000)", 900);
    setTimeout("blendimage('SQ31div', 'SQ31image', 'images/Boxes/Red4.gif', 2000)", 1200);
    setTimeout("blendimage('SQ32div', 'SQ32image', 'images/Boxes/Green.gif', 2000)", 300);
    setTimeout("blendimage('SQ33div', 'SQ33image', 'images/Boxes/Brown.gif', 2000)", 500);
    setTimeout("blendimage('SQ34div', 'SQ34image', 'images/Boxes/Red3.gif', 2000)", 800); 
    setTimeout("LoadImages2()", 4000); 
}
function LoadImages2()
{
    setTimeout("blendimage('SQ11div', 'SQ11image', 'images/Boxes/Red4.gif', 2000)", 100);
    setTimeout("blendimage('SQ12div', 'SQ12image', 'images/Boxes/Green.gif', 2000)", 500);
    setTimeout("blendimage('SQ13div', 'SQ13image', 'images/Boxes/Brown.gif', 2000)", 300);
    setTimeout("blendimage('SQ14div', 'SQ14image', 'images/Boxes/Red3.gif', 2000)", 1000);
    setTimeout("blendimage('SQ21div', 'SQ21image', 'images/Boxes/Orange.gif', 2000)", 200);
    setTimeout("blendimage('SQ22div', 'SQ22image', 'images/Boxes/Red2.gif', 2000)", 800);
    setTimeout("blendimage('SQ23div', 'SQ23image', 'images/Boxes/Brown.gif', 2000)", 600);
    setTimeout("blendimage('SQ24div', 'SQ24image', 'images/Boxes/Green.gif', 2000)", 900);
    setTimeout("blendimage('SQ31div', 'SQ31image', 'images/Boxes/Brown.gif', 2000)", 1200);
    setTimeout("blendimage('SQ32div', 'SQ32image', 'images/Boxes/Orange.gif', 2000)", 300);
    setTimeout("blendimage('SQ33div', 'SQ33image', 'images/Boxes/Green.gif', 2000)", 500);
    setTimeout("blendimage('SQ34div', 'SQ34image', 'images/Boxes/Red1.gif', 2000)", 800); 
    setTimeout("LoadImages3()", 4000); 
}
function LoadImages3()
{
    setTimeout("blendimage('SQ11div', 'SQ11image', 'images/Boxes/Red1.gif', 2000)", 100);
    setTimeout("blendimage('SQ12div', 'SQ12image', 'images/Boxes/Green.gif', 2000)", 500);
    setTimeout("blendimage('SQ13div', 'SQ13image', 'images/Boxes/Orange.gif', 2000)", 300);
    setTimeout("blendimage('SQ14div', 'SQ14image', 'images/Boxes/Brown.gif', 2000)", 1000);
    setTimeout("blendimage('SQ21div', 'SQ21image', 'images/Boxes/Green.gif', 2000)", 200);
    setTimeout("blendimage('SQ22div', 'SQ22image', 'images/Boxes/Brown.gif', 2000)", 800);
    setTimeout("blendimage('SQ23div', 'SQ23image', 'images/Boxes/Red2.gif', 2000)", 600);
    setTimeout("blendimage('SQ24div', 'SQ24image', 'images/Boxes/Orange.gif', 2000)", 900);
    setTimeout("blendimage('SQ31div', 'SQ31image', 'images/Boxes/Red3.gif', 2000)", 1200);
    setTimeout("blendimage('SQ32div', 'SQ32image', 'images/Boxes/Brown.gif', 2000)", 300);
    setTimeout("blendimage('SQ33div', 'SQ33image', 'images/Boxes/Green.gif', 2000)", 500);
    setTimeout("blendimage('SQ34div', 'SQ34image', 'images/Boxes/Red4.gif', 2000)", 800); 
}

function blendimage(divid, imageid, imagefile, millisec)
{
     
    //set the current image as background 
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")"; 
     
    //make image transparent 
    changeOpac(0, imageid); 
    setTimeout("_blendimage('" + divid + "', '" + imageid + "', '" + imagefile + "', " + millisec + ")", 100); 
}

function _blendimage(divid, imageid, imagefile, millisec) 
{ 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 
     
    //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 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 + ")"; 
}