document.write('<div style="position: relative; height: 600px;">'
+'<div id="hcanvas0" style="position:absolute; width: 500px; height: 350px; top:0; left:0; filter:alpha(opacity=10);-moz-opacity:100; opacity: .1"><img src="images/eco/home.jpg" border="0" alt="Ecology Poster" /></div>'                                    
+'<div id="hcanvas1" style="position:absolute; width: 500px; height: 351px; top:100px; left:70px; filter:alpha(opacity=10);-moz-opacity:10; opacity: .1; visibility: hidden"><a href="viewposter.aspx"><img src="images/eco/gaia.jpg" border="0" alt="Ecology Poster" /></a></div>'                                    
+'<div id="hcanvas2" style="position:absolute; width: 500px; height: 351px; top:200px; left:140px; filter:alpha(opacity=10);-moz-opacity:10; opacity: .1; visibility: hidden"><a href="viewposter.aspx"><img src="images/eco/life.jpg" border="0" alt="Ecology Poster" /></a></div>'                                    
+'<div id="hcanvas3" style="position:absolute; width: 500px; height: 350px; top:300px; left:70px; filter:alpha(opacity=10);-moz-opacity:10; opacity: .1; visibility: hidden"><a href="viewposter.aspx"><img src="images/eco/hope.jpg" border="0" alt="Ecology Poster" /></a></div>'                                    
+'</div>');
 
var opac=.1
var pos = 1;
var topcanvas="hcanvas0";
var doingsomething = false;
var elem = document.getElementById("hcanvas0");

function setOpacity(e,value)	
{
	e.style.opacity = value;
	e.style.filter = 'alpha(opacity=' + (value * 100) + ')';
	e.style.MozOpacity = value;		
}

function fadein()
{
    if(opac<1)
    {
        opac+=.1
        setOpacity(elem,opac)
    }
    else
    {
        clearInterval(fadeinvar)
    }
}

function fadeout()
{
    if (opac > .5)
    {
        opac -= .1;
        setOpacity(elem,opac);
    }
    else
    {
        elem.style.zIndex = 0;  
        fadeinvar = setInterval("fadein()", 50);    
        clearInterval(fadeoutvar)
    }
}

//function slide()
//{
//    if(pos<100)
//    {
//        
//        opac+=.1
//        setOpacity(elem,opac)
//    }
//    else
//    {
//        clearInterval(fadeinvar)
//    }
//}

function setpic()
{
    opac = .1;
    setOpacity(elem,opac);

    elem.style.visibility="visible";
    elem.onmouseover = function() 
    {
        if(this.style.visibility=="hidden" || doingsomething)
            return;
        
        this.style.zIndex++;    
    }
    elem.onmouseout = function() 
    {
        if(this.style.visibility=="hidden" || doingsomething)
            return;

        this.style.zIndex = 0;
    }
    
    fadeinvar = setInterval("fadein()", 50);
}

function pic1()
{
    elem = document.getElementById("hcanvas0");
    setpic();
}

function pic2()
{
    elem = document.getElementById("hcanvas1");
    setpic();
}

//function slidepic2()
//{
//    elem = document.getElementById("hcanvas1");
//    slidepic();
//}

function pic3()
{
    elem = document.getElementById("hcanvas2");
    setpic()
}

//function slidepic3()
//{
//    elem = document.getElementById("hcanvas2");
//    slidepic()
//}

function loadecology()
{
    startSomething();
    setTimeout("pic1()",100)
    setTimeout("pic2()",2000)
    setTimeout("pic3()",4000)
    setTimeout("endSomething()",4500)
}

addLoadEvent(loadecology);

function startSomething()
{
    doingsomething = true;
}

function endSomething()
{
    doingsomething = false;
}