// sets div id to visible.
function show(usercnt) { 
 var divtag1 = document.getElementById(usercnt); 
 divtag1.style.display = 'inline';
 divtag1.style.opacity = '1'; 

}

// sets div id to hidden.

function hide(usercnt)
{
	var divtag1 = document.getElementById(usercnt);
	divtag1.style.display = 'none';	 
	divtag1.style.opacity = '0'; 
}


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

// show images onclick

function fadeImage1() {
show('mainImage1');
show('mainImage1');
hide('mainImage2');
hide('mainImage3');
hide('mainImage4');
changeOpac(0, 'mainImage1') ; 
opacity('mainImage1', 0, 100, 1000);
show('text1');
hide('text2');
hide('text3');
hide('text4') ;
changeOpac(0, 'text1');
opacity('text1', 0, 100, 200);
}
function fadeImage2() {
show('mainImage2');
hide('mainImage1');
show('mainImage2');
hide('mainImage3');
hide('mainImage4');
changeOpac(0, 'mainImage2') ; 
opacity('mainImage2', 0, 100, 1000);
hide('text1');
show('text2');
hide('text3');
hide('text4') ;
changeOpac(0, 'text2');
opacity('text2', 0, 100, 200);
}
function fadeImage3() {
show('mainImage3');
hide('mainImage1');
hide('mainImage2');
show('mainImage3');
hide('mainImage4');
changeOpac(0, 'mainImage3') ; 
opacity('mainImage3', 0, 100, 1000);
hide('text1');
hide('text2');
show('text3');
hide('text4') ;
changeOpac(0, 'text3');
opacity('text3', 0, 100, 200);
}
function fadeImage4() {
show('mainImage4');
hide('mainImage1');
hide('mainImage2');
hide('mainImage3');
show('mainImage4');
changeOpac(0, 'mainImage4') ; 
opacity('mainImage4', 0, 100, 1000);
hide('text1');
hide('text2');
hide('text3');
show('text4') ;
changeOpac(0, 'text4');
opacity('text4', 0, 100, 200);
}



// loop through images 

function showImage1() {
setTimeout("fadeImage1()", 0);

}
function showImage2() {
setTimeout("fadeImage2()", 5000);

}
function showImage3() {
setTimeout("fadeImage3()", 10000);

}
function showImage4() {
setTimeout("fadeImage4()", 15000);
}



/*
var c=1
var t

function timedCount()
{
document.getElementById('txt').value='showImage' + c + '();'
if (c <= 3){
c=c+1
}
else {
c=1
}
t=setTimeout("timedCount()",5000)
}

*/