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++;
        }
    }
    
//    if(opacEnd==0)
//    {
//        document.getElementById(id).style.display = 'none';
//    }else{
//        document.getElementById(id).style.display = 'block';
//    }
}


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


function fadeOut(id){
    opacity(id, 100, 0, 500);
    
}

function fadeIn(id){
    opacity(id, 0, 100, 500);
    
}

function changeHtmlWithFading(htmlElementId, sourceHtmlElement){
    fadeOut(htmlElementId);
    document.getElementById('temp').innerHTML = sourceHtmlElement.innerHTML;
    setTimeout("changeHtml('" + htmlElementId + "','" + 'temp' + "')", 600);
    setTimeout("fadeIn('"+htmlElementId+"')", 700);
}

function changeHtmlWithFadingById(htmlElementId, sourceHtmlElementId){
    fadeOut(htmlElementId);
    setTimeout("changeHtml('" + htmlElementId + "','" + sourceHtmlElementId + "')", 600);
    setTimeout("fadeIn('"+htmlElementId+"')", 700);
    
}

//function changeHtmlFromStringWithFading(htmlElementId, element){
//    
////    fadeOut(htmlElementId);
////    alert(element.innerHTML );
////    setTimeout('changeHtmlFromString("' + htmlElementId + '","' + element.innerHTML + '")', 600);
////    setTimeout("fadeIn('"+htmlElementId+"')", 700);
//alert('');
//document.getElementById(htmlElementId).innerHTML = element.innerHTML;
//}