/**
 * This JS shows and handles any content in a head-up-display
 * by given URL, width and height
 * 
 * @copyright  2009 Traveltainment
 * @author     Guido Buchholz
 * @version    1.0
 * @link       http://www.vidado.com/tools/booking/hud/js/ttHudBox.js
 * @since      Datei vorhanden seit 04.06.2009
 * @license    ...
 */
 
/**
 * function for element shortcut
 * @param idName {String} document element name
 * @returns {Object} document element object
 */
 function $Id(idName) {
    return document.getElementById(idName);
 }

/**
 * ttHudBox Instanz
 * @type Object
 */
function ttHudBox(name) {
    this.name = typeof(name) != 'undefined' ? name : 'ttHud';
}

ttHudBox.prototype = {
    /**
     * global variables
     * opac {Float} value of opacity
     * flagHud {Boolean} flag, if hud is displayed
     * flagContent {Boolean} flag, if hudContent is displayed
     * globalContentWidth {Int} width of hudContent
     * globalContentheight {Int} height of hudContent
     */
    opac                     : 0.0,
    flagHud                  : false,
    flagContent              : false,
    flagContentData          : false,
    globalContentWidth       : 0,
    globalContentHeight      : 0,
    globalCustomerHeadHeight : 0,
    globalCustomerWidth      : 56,
    globalCustomerHeight     : 56,
    globalContentData        : new Object(),
    globalThumbs             : new Array(),
    globalThumbsWidth        : new Array(),
    globalThumbsHeight       : new Array(),
    globalThumbsNaviWidth    : 78,
    globalThumbsNaviHeight   : 53,
    globalThumbsNaviEnv      : 4,
    globalThumbsSkipWidth    : 40,
    globalPicture            : '',
    globalPictureWidth       : 0,
    thumbActiveDiv           : 0,
    globalHotelName          : '',
    globalHotelCategory      : 0,
    globalHeadlineHeight     : 38,
    ttChangeWidth            : 0,
    ttChangeHeight           : 0,
    
    
    /**
     * function for generating a HUD-Box
     * @param contentUrl {String} adress of content
     * @param contentWidth {Int} width of content
     * @param contentHeight {Int} height of content
     * @param styleCustomer {Boolean} flag for customer style
     * @param fileName {String} URL of file
     */
    ttGenerateHudBox : function(contentData, contentWidth, contentHeight, styleCustomer, fileName, contentHotelName, contentHotelCategory) {
        this.globalContentData        = contentData;
        this.globalContentWidth       = parseInt(contentWidth);
        this.globalContentHeight      = parseInt(contentHeight);
        this.globalCustomerHeadHeight = typeof(customerHeadHeight) != 'undefined' ? customerHeadHeight : 0;
        this.globalHotelName          = contentHotelName;
        this.globalHotelCategory      = contentHotelCategory;
        this.globalPicture            = fileName.replace(/uid=(\S*)&/g, 'uid=174689&').toString();
        var contentUrl                = this.globalPicture;
        
        this.globalThumbs = new Array();
        
        var p = 0;
        for (var i = 0; i < this.globalContentData.length; i ++) {
            //console.debug(this.globalContentData[p].file);
            if (this.globalContentData[i].file.toString() != '') {
                this.globalThumbs[p]       = this.globalContentData[i].file.replace(/uid=(\S*)&/g, 'uid=174689&').toString();
                this.globalThumbsWidth[p]  = this.globalContentData[i].width;
                this.globalThumbsHeight[p] = this.globalContentData[i].height;
                
                if (this.globalThumbs[p] == this.globalPicture) {
                    this.globalPictureWidth = this.globalThumbsWidth[p];
                }
                
                p += 1;
            }
            
        }
        
        //--- generate HUD-Box --------------------------------------
        if($Id('ttHudBox') == null || typeof($Id('ttHudBox')) == 'undefined') {
            var opacDiv = document.createElement("div");        
            var opacDiv_id = document.createAttribute("id");
            opacDiv_id.nodeValue = "ttHudBox";        
            opacDiv.setAttributeNode(opacDiv_id);        
            document.body.appendChild(opacDiv);
        }
        
        //--- generate HUD-Box --------------------------------------
        if($Id('ttHudContainer') == null || typeof($Id('ttHudContainer')) == 'undefined') {
            var opacDiv = document.createElement("div");        
            var opacDiv_id = document.createAttribute("id");
            opacDiv_id.nodeValue = "ttHudContainer";        
            opacDiv.setAttributeNode(opacDiv_id);        
            document.body.appendChild(opacDiv);
        }
            
        //--- fill HUD-Box ------------------------------------------
        this.flagHud = true;
        
        if (browser == '3') {
            contentWidth  = parseInt(contentWidth);
            contentHeight = parseInt(contentHeight) + 62 + this.globalHeadlineHeight;
        } else if (browser == '0') {
            contentWidth  = parseInt(contentWidth);
            contentHeight = parseInt(contentHeight) + this.globalHeadlineHeight;
        } else {
            contentWidth  = parseInt(contentWidth) - 20;
            contentHeight = parseInt(contentHeight) + this.globalHeadlineHeight;
        }
        
        this.ttFillHudBox(contentUrl, contentWidth, contentHeight, styleCustomer);
    },
    
    /**
     * function for refilling a HUD-Box
     * @param contentWidth {Int} width of content
     * @param contentHeight {Int} height of content
     * @param styleCustomer {Boolean} flag for customer style
     * @param fileName {String} URL of file
     */
    ttRefillHudBox : function(contentWidth, contentHeight, styleCustomer, fileName) {
        this.globalPictureWidth = contentWidth;
        
        this.globalPicture = fileName.replace(/uid=(\S*)&/g, 'uid=174689&').toString();
        var contentUrl     = this.globalPicture;
        
        if (browser == '3') {
            contentWidth  = parseInt(contentWidth) + 20;
            contentHeight = parseInt(contentHeight) + 82 + this.globalHeadlineHeight;
        } else if (browser == '0') {
            contentWidth  = parseInt(contentWidth) + 20;
            contentHeight = parseInt(contentHeight) + this.globalHeadlineHeight;
        } else{
            contentWidth  = parseInt(contentWidth);
            contentHeight = parseInt(contentHeight) + this.globalHeadlineHeight;
        }
        
        this.globalContentWidth       = parseInt(contentWidth);
        this.globalContentHeight      = parseInt(contentHeight);
        this.globalCustomerHeadHeight = typeof(customerHeadHeight) != 'undefined' ? customerHeadHeight : 0;
        
        $Id('ttHudContainer').innerHTML    = this.ttGenerateContentDiv(contentUrl, contentWidth, contentHeight, styleCustomer);
        
        $Id('ttHudContainer').style.width  = (contentWidth + ttHud.globalCustomerWidth) + 'px';
        $Id('ttHudContainer').style.height = (contentHeight + ttHud.globalCustomerHeight) + 'px';
        
        //--- position HUD-Box at the center of the window ----------
        //setTimeout('ttHud.ttPositionHudContainer(\'' + contentWidth + '\', \'' + (contentHeight + ttHud.globalCustomerHeight) + '\')', 1);
        
        $Id('ttHudContentWait').style.display      = 'none';
        $Id('ttHudContentDivIframe').style.display = 'block';
        
        $Id('ttThumbsNavi_' + this.thumbActiveDiv).style.display = 'block';
    },
    
    /**
     * function for fading in the HUD-Box
     */
    ttFadeInHudBox : function() {
        if (typeof(detail) != 'undefined' && detail == 'zielgebiet' && 
            regionen_2.length > 100 && navigator.appName == 'Microsoft Internet Explorer') {
                this.opac  = 0.7;
                $Id('ttHudBox').style.filter        = 'alpha(opacity='+(parseInt(this.opac * 100))+')';
                $Id('ttHudBox').style.display       = 'block';
                $Id('ttHudContainer').style.display = 'block';
                return;
        }
        if (this.opac <= 0.7) {
            if (this.opac == 0) {
                $Id('ttHudContentWait').style.display = 'block';
                $Id('ttHudBox').style.display         = 'block';
            }
            $Id('ttHudBox').style.opacity = this.opac;
            $Id('ttHudBox').style.filter  = 'alpha(opacity='+(parseInt(this.opac * 100))+')';
            this.opac += 0.1;
            setTimeout(function(){ttHud.ttFadeInHudBox()}, 10);
        } else {
            this.opac  = 0.7;
            $Id('ttHudContainer').style.display = 'block';
        }
    },
    
    /**
     * function for fading out the HUD-Box
     */
    ttFadeOutHudBox : function() {
        this.flagHud = false;
        if ($Id('ttHudContentDivIframe')) {
            $Id('ttHudContentDivIframe').innerHTML     = '';
            $Id('ttHudContentDivIframe').style.display = 'none';
        }
        if ($Id('ttHudContainer')) {
            $Id('ttHudContainer').innerHTML            = '';
            $Id('ttHudContainer').style.display        = 'none';
        }
        this.flagContent = false;
        if (typeof(detail) != 'undefined' && detail == 'zielgebiet' && 
            regionen_2.length > 100 && navigator.appName == 'Microsoft Internet Explorer') {
                this.opac  = 0.0;
                $Id('ttHudBox').style.filter  = 'alpha(opacity='+(parseInt(this.opac * 100))+')';
                $Id('ttHudBox').style.display = 'none';
                $Id('ttHudBox').innerHTML     = '';
                return;
        }
        if (this.opac >= 0.0) {
            $Id('ttHudBox').style.opacity = this.opac;
            $Id('ttHudBox').style.filter  = 'alpha(opacity='+(parseInt(this.opac * 100))+')';
            this.opac -= 0.1;
            setTimeout('ttHud.ttFadeOutHudBox()', 10);
        } else {
            this.opac = 0.0;
            $Id('ttHudBox').style.display = 'none';
            $Id('ttHudBox').innerHTML     = '';
        }
    },
    
    /**
     * function for generating the content div
     * @param contentUrl {String} adress of content
     * @param contentWidth {Int} width of content
     * @param contentHeight {Int} height of content
     * @param styleCustomer {Boolean} flag for customer style
     */
    ttGenerateContentDiv : function(contentUrl, contentWidth, contentHeight) {
        var browserHeightFix        = browser == '3' ? 70 : 30;
        var borderBrowserHeightFix  = browser == '3' ? 0 : 38;
        var contentBrowserHeightFix = browser == '3' ? 0 : 38;
        var iframeBrowserHeightFix  = browser == '3' ? 38 : 0;
        
        /**
         * Sterne
         */
        var limitStars = parseInt(this.globalHotelCategory);
        var strStars = '';
        for (var m = 0; m < limitStars; m += 1) {
            strStars += '<img src="/kunden_parameter/opodo2/ibe_v2/images/1_stern.gif" style="vertical-align: top; margin: 4px 0 0 0;" alt="" />';
        }
        if (this.globalHotelCategory.search(/./) != '-1') {
            var tmpHalfStar = this.globalHotelCategory.split('.')[1] || 0;
            if (tmpHalfStar > 0) {
                strStars += '<img src="/kunden_parameter/opodo2t/ibe_v2/images/stern_halb.gif" style="vertical-align: top; margin: 4px 0 0 0;" alt="" />';
            }
        }
        
        var strHudContent = '<div class="ttHudContainerTopLeft iepngfix"><img src="/images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div id="ttHudContainerTopCenter" class="ttHudContainerTopCenter iepngfix" style="width: ' + contentWidth + 'px;"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div class="ttHudContainerTopRight iepngfix"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div class="clearboth"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div id="ttHudContainerLeftCenter" class="ttHudContainerLeftCenter iepngfix" style="height: ' + (contentHeight + borderBrowserHeightFix) + 'px;"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div id="ttHudContentDiv" style="width: ' + contentWidth + 'px; height: ' + (contentHeight + contentBrowserHeightFix) + 'px;">';
        
        strHudContent    += '    <div id="ttHudContentHead" class="ttHudContentHeadStyle iepngfix" onclick="ttHud.ttFadeOutHudBox(); return false;" title="Close"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '    <div id="ttHudContentWait" style="top: ' + parseInt((contentHeight / 2 - 16)) + 'px; left: ' + parseInt((contentWidth / 2 - 16)) + 'px;"></div>';
        
        strHudContent    += '    <div id="ttHudContentDivHeadline" style="width: ' + contentWidth + 'px;">';
        strHudContent    += this.globalHotelName + '&nbsp;&nbsp;' + strStars;
        strHudContent    += '    </div>';
        strHudContent    += '    <div id="ttHudContentDivIframe" style="width: ' + contentWidth + 'px; height: ' + (contentHeight - 65 - iframeBrowserHeightFix) + 'px; margin: 38px 0 0 0; padding: 0;">';
        strHudContent    += '        <iframe src="' + contentUrl + '" width="' + contentWidth + '" height="100%" frameborder="0" scrolling="no" style="top: ' + this.globalHeadlineHeight + 'px; padding: 0; margin: 0; border: 0; overflow: hidden;"></iframe>';
        strHudContent    += '    </div>';
        strHudContent    += '    <div class="ttHudContentThumbsContainer" style="position: absolute; top: ' + (contentHeight - browserHeightFix + this.globalHeadlineHeight) + 'px; width: ' + (this.globalPictureWidth) + 'px; background: #fff; z-index: 10002;">';
        strHudContent    += '        <iframe src="dummy.html" width="' + (this.globalPictureWidth) + '" height="57" frameborder="0" scrolling="no" style="width: ' + (this.globalPictureWidth) + 'px; background: #fff; z-index: 10001;"></iframe>';
        strHudContent    += '    </div>';
        strHudContent    += '    <div id="ttHudContentThumbs" style="top: ' + (contentHeight - browserHeightFix + this.globalHeadlineHeight) + 'px; width: ' + (this.globalPictureWidth) + 'px;">';
        
        //--- Thumb-Navigation --------------------------------------
        strHudContent    += '        <div id="ttThumbsNavi_0" style="width: ' + this.globalPictureWidth + 'px; padding: 0; margin: 0; display: none;">';
        var p = 0;
        var q = 0;
        var limit = this.globalThumbs.length;
        for (var i = 0; i < limit; i ++) {
            if ((p + 1) * (this.globalThumbsNaviWidth + this.globalThumbsNaviEnv) >= this.globalPictureWidth - this.globalThumbsSkipWidth) {
                p = 1;
                q += 1;
                
                strHudContent    += '<img style="cursor: pointer;" src="/kunden_parameter/opodo2/ibe_v2/images/layer/thumbArrowRight.jpg" onclick="$Id(\'ttThumbsNavi_' + (q - 1) + '\').style.display = \'none\'; $Id(\'ttThumbsNavi_' + q + '\').style.display = \'block\';" />';
                strHudContent    += '</div>';
                strHudContent    += '<div id="ttThumbsNavi_' + q + '" style="width: ' + this.globalPictureWidth + 'px; padding: 0; margin: 0; display: none;">';
                strHudContent    += '<img style="cursor: pointer;" src="/kunden_parameter/opodo2/ibe_v2/images/layer/thumbArrowLeft.jpg" onclick="$Id(\'ttThumbsNavi_' + q + '\').style.display = \'none\'; $Id(\'ttThumbsNavi_' + (q - 1) + '\').style.display = \'block\';" />';
            } else {
                p += 1;
            }
            
            strHudContent    += '<a href="javascript: void(0);" onclick="ttHud.ttRefillHudBox(' + this.globalThumbsWidth[i] + ', ' + this.globalThumbsHeight[i] + ', \'\', \'' + this.globalThumbs[i] + '\');">';
            strHudContent    += '<img src="' + this.globalThumbs[i] + '" width="' + this.globalThumbsNaviWidth + '" height="' + this.globalThumbsNaviHeight + '" alt="" style="border: 2px solid ' + (this.globalThumbs[i] == this.globalPicture ? '#ff0000' : '#fff') + ';" />';
            strHudContent    += '</a>';
            
            if (this.globalThumbs[i] == this.globalPicture) {
                this.thumbActiveDiv = q;
            }
        }
        strHudContent    += '        </div>';
        strHudContent    += '    </div>';
        strHudContent    += '</div>';
        strHudContent    += '<div id="ttHudContainerRightCenter" class="ttHudContainerRightCenter iepngfix" style="height: ' + (contentHeight + borderBrowserHeightFix) + 'px;"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div class="clearboth"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div class="ttHudContainerBottomLeft iepngfix"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div id="ttHudContainerBottomCenter" class="ttHudContainerBottomCenter iepngfix" style="width: ' + contentWidth + 'px;"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div class="ttHudContainerBottomRight iepngfix"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        strHudContent    += '<div class="clearboth"><img src="images/spacer.gif" width="0" height="0" alt="" border="0" /></div>';
        
        return strHudContent;
    },
    
    
    /**
     * function for opening content as HUD
     * @param contentUrl {String} adress of content
     * @param contentWidth {Int} width of content
     * @param contentHeight {Int} height of content
     * @param styleCustomer {Boolean} flag for customer style
     */
    ttFillHudBox : function(contentUrl, contentWidth, contentHeight, styleCustomer) {
        $Id('ttHudBox').style.width  = '100%';
        $Id('ttHudBox').style.height = '100%';
        
        $Id('ttHudContainer').style.width  = (contentWidth + ttHud.globalCustomerWidth) + 'px';
        $Id('ttHudContainer').style.height = (contentHeight + ttHud.globalCustomerHeight) + 'px';
        
        //--- fill HUD-Box with content and display it --------------
        $Id('ttHudContainer').innerHTML = this.ttGenerateContentDiv(contentUrl, contentWidth, contentHeight, styleCustomer);
        //$Id('ttHudContainer').innerHTML = strHudContent;
        
        this.ttFadeInHudBox();
        
        $Id('ttHudContentWait').style.display  = 'none';
        
        $Id('ttThumbsNavi_' + this.thumbActiveDiv).style.display = 'block';
        
        //--- position HUD-Box at the center of the window ----------
        setTimeout('ttHud.ttPositionHudContainer(\'' + contentWidth + '\', \'' + (contentHeight + ttHud.globalCustomerHeight) + '\')', 1);
    },
    
    /**
     * function for positioning the HUD-Box
     * @param contentWidth {Int} width of content
     * @param contentHeight {Int} height of content
     */
    ttPositionHudContainer : function(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 = ttHud.getWinSize();
        
        $Id('ttHudBox').style.width  = wSize.width + 'px';
        $Id('ttHudBox').style.height = wSize.height + 'px';
        
        var hudBoxOffsetWidth        = parseInt($Id('ttHudBox').offsetWidth);
        var hudBoxOffsetHeight       = parseInt($Id('ttHudBox').offsetHeight);
        var hudContainerOffsetWidth  = parseInt(contentWidth);
        var hudContainerOffsetHeight = parseInt(contentHeight);
        
        var centerPosHorizontal = ((wSize.width - hudContainerOffsetWidth - ttHud.globalCustomerWidth) / 2 >= 1 ? ((wSize.width - hudContainerOffsetWidth - ttHud.globalCustomerWidth) / 2) : '0'); 
        var centerPosVertical   = ((wSize.height - hudContainerOffsetHeight) / 2 >= 1 ? ((wSize.height - hudContainerOffsetHeight) / 2) : '0'); 
        
        $Id('ttHudContainer').style.marginLeft = (parseInt(centerPosHorizontal)) + 'px';
        $Id('ttHudContainer').style.marginTop  = (scrollPos + parseInt(centerPosVertical)) + 'px';
        
        var marginLeft = parseInt($Id('ttHudContainer').style.marginLeft) + ttHud.globalCustomerWidth;
        var marginTop  = parseInt($Id('ttHudContainer').style.marginTop);
        
        //--- minimum left margin -----------------------------------
        if (hudBoxOffsetWidth < hudContainerOffsetWidth + marginLeft + 15) {
            $Id('ttHudContainer').style.marginLeft = '15px';
        }
        //--- minimum top margin ------------------------------------
        if (hudBoxOffsetHeight < hudContainerOffsetHeight + marginTop + 15) {
            $Id('ttHudContainer').style.marginTop = '15px';
        }
        
        $Id('ttHudBox').style.width = '100%';
        if (hudBoxOffsetWidth < document.body.offsetWidth) {
            $Id('ttHudBox').style.width = (document.body.offsetWidth) + 'px';
        }
        
        $Id('ttHudBox').style.height = '100%';
        if (hudBoxOffsetHeight < document.body.offsetHeight) {
            $Id('ttHudBox').style.height = (document.body.offsetHeight) + 'px';
        }
        
        //--- if body height ist not valid --------------------------
        if (document.body.offsetHeight < 1200) {
            $Id('ttHudBox').style.height = '3000px';
        }
        
        if (document.body.offsetHeight > $Id('ttHudBox').offsetHeight) {
            centerPosVertical            = ((document.body.offsetHeight - $Id('ttHudBox').offsetHeight) / 2 >= 1 ? ((document.body.offsetHeight - $Id('ttHudBox').offsetHeight) / 2) : '0'); 
            $Id('ttHudBox').style.height = (document.body.offsetHeight + scrollPos) + 'px';
        }
    
        //--- top margin correction if scrolled ---------------------
        if (scrollPos > 0) {
            $Id('ttHudContainer').style.marginTop = (scrollPos + parseInt(centerPosVertical)) + 'px';
        }
        
        if (ttHud.flagContent == false) {
            setTimeout('ttHud.ttshowContent()', 700);
            ttHud.flagContent = true;
        }
    },
    
    /**
     * function for displaying the HUD-content
     */
    ttshowContent : function() {
        $Id('ttHudContentDivIframe').style.display = 'block';
    },
    
    /**
     * function for adapting the HUD-Box at resize action
     */
    ttResizeAction : function () {
        if(ttHud.flagHud && typeof($Id('ttHudBox') != 'undefined') && $Id('ttHudBox')) {
            setTimeout('ttHud.ttPositionHudContainer(' + (ttHud.globalContentWidth + ttHud.globalCustomerWidth) + ', ' + (ttHud.globalContentHeight + ttHud.globalCustomerHeight) + ')', 1);
        }
    },
    
    /**
     * function for closing the HUD-Box at mouseclick beside content
     */
    ttMouseAction : function (e) {
        if(ttHud.flagHud && typeof($Id('ttHudBox') != 'undefined') && $Id('ttHudBox')) {
            var contentLeftMargin = parseInt($Id('ttHudContainer').style.marginLeft);
            var contentTopMargin  = parseInt($Id('ttHudContainer').style.marginTop);
            
            if (!e) {
                e = window.event;
            }
            var mouseLeft = e.clientX;
            var mouseTop  = e.clientY;
            
            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;
            }
            
            if (mouseLeft < contentLeftMargin || 
                scrollPos + mouseTop < contentTopMargin || 
                mouseLeft > (contentLeftMargin + ttHud.globalContentWidth + ttHud.globalCustomerWidth + 20) || 
                scrollPos + mouseTop > (contentTopMargin + ttHud.globalContentHeight + 120)) {
                    ttHud.ttFadeOutHudBox();
            } 
        }
    },
    
    /**
     * function for positioning the HUD-Box
     * @param win {Object} browser window
     * @returns s {Object} window size object
     */
    getWinSize : function(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  = this.getBody(win);
            s.width  = parseInt(obj.clientWidth);
            s.height = parseInt(obj.clientHeight);
        }
        return s;
    },
    
    /**
     * function for getting browser mode
     * @param win {Object} window object
     * @returns mode {Object} browser mode object
     */
    getBody : function(win) {
        if (win.document.compatMode && win.document.compatMode == "CSS1Compat") {
            var mode = win.document.documentElement;
        } else {
            var mode = win.document.body || null;
        }
        return mode;
    }
};

/**
 * ttHudBox Instanz
 * @var {Object} ttHud
 */
var ttHud = new ttHudBox('ttHud');

/**
 * event handler for resize action
 */
window.onresize = ttHud.ttResizeAction;

/**
 * event handler for mouseclick
 */
document.onmousedown = ttHud.ttMouseAction;