function detail(id)
{
    fade_step = 24;
    
    detail_object = document.getElementById("detail"+id);
    
    detail_height = detail_object.offsetHeight;
    
    if (detail_object && 
        typeof fade_interval == "undefined") {
        
        if (detail_height > 0) {
            // fade out
            current_height = detail_object.offsetHeight;
            target_height  = 0;
            
            fade_interval = window.setInterval("detail_fade('out')", 50);
        }
        else {
            // fade in 
            //detail_object.style.display       = "block";
            
            target_height  = height_detail[id]; // +20 = padding!
            current_height = 0;
            
            detail_object.style.display = "block";
            
            //detail_object.style.height     = "0px";
            //detail_object.style.visibility = "visible";
            
            fade_interval = window.setInterval("detail_fade('in')", 50);
        }
    }
}

function detail_fade(fade_type) {
    detail_object = detail_object;
    
    old_fade_step = fade_step;
    
    if (fade_type == "in") {
        current_height+=fade_step;
        //alert(current_height);
        
        if (current_height >= target_height) {
            current_height = target_height;
            clearInterval(fade_interval);
            delete fade_interval;
        }
        else if (target_height - current_height < 10) {
            fade_step = 3;
        }
        else if (target_height - current_height < 20) {
            fade_step = 6;
        }
        else if (target_height - current_height < 50) {
            fade_step = 12;
        }
    }
    else if (fade_type == "out") {
        //alert(current_height);
        
        current_height-=fade_step;
        
        if (current_height <= target_height) {
            current_height = target_height;
            clearInterval(fade_interval);
            delete fade_interval;
            
            detail_object.style.display = "none";
        }
        else if (current_height - target_height < 10) {
            fade_step = 3;
        }
        else if (current_height - target_height < 20) {
            fade_step = 6;
        }
        else if (current_height - target_height < 50) {
            fade_step = 12;
        }
    }
    
    if (fade_step != old_fade_step) {
       // alert ("fade_step changed to "+fade_step);
    }
    
    detail_object.style.height   = current_height + "px";
}