/**
 * This sourcecode shows and handles any content in a head-up-display
 * by given URL, width and height
 * 
 * @author Guido Buchholz
 * @link ...
 */

/**
 * global variables
 * opac {Float} value of opacity
 * flagHud {Boolean} flag, if hud is displayed
 */
var opac                = 0.0;
var flagHud             = false;
var flagContent         = false;
var globalContentWidth  = 0;
var globalContentHeight = 0;
var globalContentUrl    = 0;

/**
 * function for generating a HUD-Box (head-up-display)
 * @param url {String} adress of content
 * @param width {Int} width of content
 * @param height {Int} height of content
 */
function GenerateHudBox(contentUrl, contentWidth, contentHeight) {
    globalContentWidth  = contentWidth;
    globalContentHeight = contentHeight;
    globalContentUrl    = contentUrl;
    
    //--- generate HUD-Box ------------------------------------------
    if(document.getElementById('HudBox') == null || typeof(document.getElementById('HudBox')) == 'undefined') {
        var opacDiv = document.createElement("div");        
        var opacDiv_id = document.createAttribute("id");
        opacDiv_id.nodeValue = "HudBox";        
        opacDiv.setAttributeNode(opacDiv_id);        
        /*
        var opacDiv_onClick = document.createAttribute("onclick");
        opacDiv_onClick.nodeValue = "FadeOutHudBox();";
        opacDiv.setAttributeNode(opacDiv_onClick);
        */
        document.body.appendChild(opacDiv);
    }
    
    //--- generate HUD-Box ------------------------------------------
    if(document.getElementById('HudContainer') == null || typeof(document.getElementById('HudContainer')) == 'undefined') {
        var opacDiv = document.createElement("div");        
        var opacDiv_id = document.createAttribute("id");
        opacDiv_id.nodeValue = "HudContainer";        
        opacDiv.setAttributeNode(opacDiv_id);        
        document.body.appendChild(opacDiv);
    }
    
    //--- fill HUD-Box ----------------------------------------------
    flagHud = true;
    FillHudBox(contentUrl, contentWidth, contentHeight);
}

/**
 * function for fading in the HUD-Box
 */
function FadeInHudBox() {
    if (opac <= 0.7) {
        if (parseInt(opac) == 0) {
            document.getElementById('HudContentWait').style.display = 'block';
            document.getElementById('HudBox').style.display         = 'block';
        }
        document.getElementById('HudBox').style.opacity = opac;
        document.getElementById('HudBox').style.filter  = 'alpha(opacity='+(parseInt(opac * 100))+')';
        /*
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        */
        opac += 0.1;
        setTimeout('FadeInHudBox()', 10);
    } else {
        opac  = 0.7;
        document.getElementById('HudContainer').style.display = 'block';
    }
}

/**
 * function for opening content as HUD (head-up-display)
 * @param url {String} adress of content
 * @param width {Int} width of content
 * @param height {Int} height of content
 */
function FillHudBox(contentUrl, contentWidth, contentHeight) {
    document.getElementById('HudBox').style.width  = '100%';
    document.getElementById('HudBox').style.height = '100%';
    
    document.getElementById('HudContainer').style.width  = contentWidth + 'px';
    document.getElementById('HudContainer').style.height = contentHeight + 'px';
    
    //--- generate content ------------------------------------------
    var strHudContent = '    <div id="HudContentDiv" style="width: ' + contentWidth + 'px; height: ' + contentHeight + 'px;"></div>';
    strHudContent    += '        <div id="HudContentClose" class="iepngfix" onclick="FadeOutHudBox();" title="Close"></div>';
    strHudContent    += '        <div id="HudContentWait" style="top: ' + (contentHeight / 2 - 16) + 'px; left: ' + (contentWidth / 2 - 16) + 'px;"></div>';
    strHudContent    += '        <div id="HudContentDivIframe" style="width: ' + contentWidth + 'px; height: ' + contentHeight + 'px;">';
    strHudContent    += '            <iframe src="' + contentUrl + '" width="' + contentWidth + '" height="100%" frameborder="0" scrolling="auto" style="margin:0; border: 0; overflow: auto;"></iframe>';
    strHudContent    += '        </div>';
    strHudContent    += '    </div>';
    
    //--- fill HUD-Box with content and display it ------------------
    document.getElementById('HudContainer').innerHTML = strHudContent;
    FadeInHudBox();
    
    document.getElementById('HudContentWait').style.display  = 'none';
    document.getElementById('HudContentClose').style.display = 'block';

    //--- position HUD-Box at the center of the window -------------- 
    setTimeout('PositionHudContainer(\'' + contentWidth + '\', \'' + contentHeight + '\')', 1);
}

/**
 * function for fading out the HUD-Box
 */
function FadeOutHudBox() {
    flagHud = false;
    document.getElementById('HudContentDivIframe').style.display = 'none';
    document.getElementById('HudContainer').style.display        = 'none';
    flagContent = false;
    if (opac >= 0.0) {
        document.getElementById('HudBox').style.opacity = opac;
        document.getElementById('HudBox').style.filter  = 'alpha(opacity='+(parseInt(opac * 100))+')';
        opac -= 0.1;
        setTimeout('FadeOutHudBox()', 10);
    } else {
        opac = 0.0;
        document.getElementById('HudBox').style.display = 'none';
        document.getElementById('HudBox').innerHTML     = '';
    }
}

/**
 * function for positioning the HUD-Box
 */
function PositionHudContainer(contentWidth, contentHeight) {
    var scrollPos = 0;
    if (typeof( window.pageYOffset ) == 'number') {
        //--- Netscape compliant ----------------
        scrollPos = window.pageYOffset;
    } else if (document.body && document.body.scrollTop) {
        //--- DOM compliant ---------------------
        scrollPos = document.body.scrollTop;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        //--- IE6 standards compliant mode ------
        scrollPos = document.documentElement.scrollTop;
    }
    
    var wSize = getWinSize();
    
    document.getElementById('HudBox').style.width = wSize.width + 'px';
    document.getElementById('HudBox').style.height = wSize.height + 'px';
    
    var hudBoxOffsetWidth        = parseInt(document.getElementById('HudBox').offsetWidth);
    var hudBoxOffsetHeight       = parseInt(document.getElementById('HudBox').offsetHeight);
    var hudContainerOffsetWidth  = parseInt(contentWidth);
    var hudContainerOffsetHeight = parseInt(contentHeight);
    
    
    var centerPosHorizontal = ((wSize.width - hudContainerOffsetWidth) / 2 >= 1 ? ((wSize.width - hudContainerOffsetWidth) / 2) : '0'); 
    var centerPosVertical   = ((wSize.height - hudContainerOffsetHeight) / 2 >= 1 ? ((wSize.height - hudContainerOffsetHeight) / 2) : '0'); 
    
    document.getElementById('HudContainer').style.marginLeft = (parseInt(centerPosHorizontal)) + 'px';
    document.getElementById('HudContainer').style.marginTop  = (scrollPos + parseInt(centerPosVertical)) + 'px';
    var marginLeft = parseInt(document.getElementById('HudContainer').style.marginLeft);
    var marginTop  = parseInt(document.getElementById('HudContainer').style.marginTop);
    
    if (hudBoxOffsetWidth < hudContainerOffsetWidth + marginLeft + 5) {
        document.getElementById('HudContainer').style.marginLeft = '5px';
    }
    if (hudBoxOffsetHeight < hudContainerOffsetHeight + marginTop + 17) {
        document.getElementById('HudContainer').style.marginTop = '17px';
    }
    
    document.getElementById('HudBox').style.width = '100%';
    if (hudBoxOffsetWidth < document.body.offsetWidth) {
        document.getElementById('HudBox').style.width = (document.body.offsetWidth) + 'px';
    }
    
    document.getElementById('HudBox').style.height = '100%';
    if (hudBoxOffsetHeight < document.body.offsetHeight) {
        document.getElementById('HudBox').style.height = (document.body.offsetHeight) + 'px';
    }
    
    if (document.body.offsetHeight > document.getElementById('HudBox').offsetHeight) {
        centerPosVertical                              = ((document.body.offsetHeight - document.getElementById('HudBox').offsetHeight) / 2 >= 1 ? ((document.body.offsetHeight - document.getElementById('HudBox').offsetHeight) / 2) : '0'); 
        document.getElementById('HudBox').style.height = (document.body.offsetHeight + scrollPos) + 'px';
    }
    
    document.getElementById('HudBox').style.height = '5200px';
    
    if (scrollPos > 0) {
        document.getElementById('HudContainer').style.marginTop  = (scrollPos + parseInt(centerPosVertical)) + 'px';
    }
    
    if (flagContent == false) {
        setTimeout('showContent()', 700);
        flagContent = true;
    }
}

function showContent() {
    document.getElementById('HudContentDivIframe').style.display = 'block';
}

function ResizeAction () {
    if(flagHud && typeof(document.getElementById('HudBox') != 'undefined') && document.getElementById('HudBox')) {
        //window.scrollTo(0, 0);
        setTimeout('PositionHudContainer(' + globalContentWidth + ', ' + globalContentHeight + ')', 1);
    }
}

function getWinSize(win) {
    if (!win) {
        win = window;
    }
    var s = new Object();
    if (typeof win.innerWidth != 'undefined') {
        s.width = win.innerWidth;
        s.height = win.innerHeight;
    } else {
         var obj = getBody(win);
         s.width = parseInt(obj.clientWidth);
         s.height = parseInt(obj.clientHeight);
    }
    return s;
}

function getBody(w) {
    return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ? w.document.documentElement : w.document.body || null;
}  

window.onresize = ResizeAction;