var stopTimer = 0;
var setImageOpacityID;
var testObj;
var total_images = 10;

/** START: ONCLICK - Image Fade Effect -**/
function showImage(divID){        
        stopTimer = divID; //Stop the Timer effect forever
        for(i=1;i<=total_images;i++){
                document.getElementById("display_image"+i).style.display="none";
        }
        document.getElementById("display_image"+divID).style.display="";
        for(q=1;q<=total_images;q++){
                document.getElementById(q).className="pageNumberBorder";
        }
        document.getElementById(divID).className="pageNumberBorderSelected";
       
        setImageOpacityID = document.getElementById("display_image"+divID);
        for (var op=0;op<11;op++){
                setTimeout('setImageOpacity('+op+')',100*op);
        }
}

function setImageOpacity(opValue)
{
        setImageOpacityID.style.opacity = opValue/10;
        setImageOpacityID.style.filter = 'alpha(opacity=' + opValue*10 + ')';
}
/** END: ONCLICK - Image Fade Effect**/



/** START: Timer - Image Fade Effect**/

function initFade(thisDIV) {
        testObj = document.getElementById(thisDIV);
        for (var m=1;m<6;m++){
                setTimeout('setOpacity('+m+')',100*m);
        }
        return false;
}
function setOpacity(value){
        testObj.style.opacity = value/10;
        testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}


var i = 1;
function count(){
    if(stopTimer == 0){
            setTimeout("setNum()", 6000); // ++ -- this number for slow timer transition
    }else{
            showImage(stopTimer);
    }
}
function setNum(){
    if (i < total_images) {
        i++;//alert(i);
    }else{
        i = 1;
    }
   
    updateImg(i);
    count();
}
function updateImg(number){        
        for(k=1;k<=total_images;k++){
                document.getElementById("display_image"+k).style.display="none";
        }
        document.getElementById("display_image"+number).style.display="";
       
        for(e=1;e<=total_images;e++){
                document.getElementById(e).className="pageNumberBorder";
        }
        document.getElementById(number).className="pageNumberBorderSelected";
               
        testObj = document.getElementById("display_image"+number);
        for (var opTime=0;opTime<11;opTime++){
                setTimeout('setOpacity('+opTime+')',100*opTime);
        }                
}

function onLoadOpacity(){
        var firstImageObj = document.getElementById("display_image1");
        firstImageObj.style.opacity = 10;
        firstImageObj.style.filter = 'alpha(opacity="100")';
}


count();
/** END: Timer - Image Fade Effect**/