/**
  * fade id from start to end opacity over time ms
  */
function fade(id, start, end, time) {
    var speed = Math.round(time / 100);
    var timer = 0;

    if(start > end) {
        for(i = start; i >= end; i--) 
            setTimeout("setOpacity('"+id+"',"+i+")",(timer++ * speed));
    } else if(start < end) {
        for(i = start; i <= end; i++) 
            setTimeout("setOpacity('"+id+"',"+i+")",(timer++ * speed));
    }
}

/** 
  * set the opacity in a way that works across browsers
  */
function setOpacity(id, opacity) {
    var el = document.getElementById(id);
    var style = el.style;
    if (opacity == 0)
        style.display = 'none';
    else
        style.display = 'block';
    style.opacity = (opacity / 100);
    style.MozOpacity = (opacity / 100);
    style.KhtmlOpacity = (opacity / 100);
    style.filter = "alpha(opacity=" + opacity + ")";
}           

function openBox(vidID) {
    fade(vidID, 0, 100, 400);
    fade('video_popup_overlay', 0, 50, 500);
}
function closeBox(vidID) {
    fade(vidID, 100, 0, 400);
    fade('video_popup_overlay', 50, 0, 500);
}