//###################################
//  Config
//###################################
var timeout=10000;     //in ms
var opacityStep=0.06; // css opacity
var fadeStep=60;      // in ms

//###################################
// Config end
//###################################

var pics = new Array();
var a=0;

function startSlideShow() {
    if(!document.getElementById){
        return false;
    }

    pics = document.getElementById('sideBanner').getElementsByTagName('img');
    for(i=1; i<pics.length; i++){
        pics[i].OpacityCurrent = 0;
    }
    pics[0].style.display = 'block';
    pics[0].OpacityCurrent = 0.99;

    setTimeout(fade,timeout);
}

function fade(){
    OpacityPrev = pics[a].OpacityCurrent;
    key = pics[a+1]?a+1:0;
    OpacityNext = pics[key].OpacityCurrent;

    OpacityPrev-=opacityStep;
    OpacityNext+=opacityStep;

    pics[key].style.display = 'block';
    pics[a].OpacityCurrent = OpacityPrev;
    pics[key].OpacityCurrent = OpacityNext;

    transformImage(pics[a]);
    transformImage(pics[key]);

    if(OpacityPrev<=0){
        pics[a].style.display = 'none';
        a = key;
        setTimeout(fade,timeout);
    }
    else{
        setTimeout(fade,fadeStep);
    }
    
    function transformImage(obj){
        if(obj.OpacityCurrent>=1){
            return true;
        }

        obj.style.opacity = obj.OpacityCurrent;
        obj.style.filter = 'alpha(opacity=' + (obj.OpacityCurrent*100) + ')';
        obj.style.MozOpacity = obj.OpacityCurrent;
    }
}

if(window.addEventListener){
    window.addEventListener('load',startSlideShow,false)
}
else{
    window.attachEvent('onload',startSlideShow);
}