﻿try { console.log('init console... done'); } catch(e) { console = { log: function(msg) {alert(msg);} } }

function Utilities()
{
    this.getTop = function ( oElement )
    {
    	var curtop = 0;
    	
	    if (oElement.offsetParent) 
	    {
	        do 
	        {
			    curtop += oElement.offsetTop;
		    }
		    while (oElement = oElement.offsetParent);
	        return curtop;
	    }
	    return 0;
	}	

    this.getLeft = function( oElement )
    {
    	var curleft = 0;
    	
	    if (oElement.offsetParent) 
	    {
	        do 
	        {
			    curleft += oElement.offsetLeft;
		    }
		    while (oElement = oElement.offsetParent);
	        return curleft;
	    }
	    return 0;
    }
    
    this.getOffsetHeight = function( elementNode )
    {
		return elementNode.offsetHeight;
    }

    this.getOffsetWidth = function( elementNode )
    {
	    return elementNode.offsetWidth;
    }
    
    this.getScrollHeight = function( elementNode )
    {
        return elementNode.scrollHeight;
    }

    this.getScrollWidth = function( elementNode )
    {
	    return elementNode.scrollWidth;
    }    
}

function ElementFader(elementID, fadeSteps, maxFade, delay)
{
    this.elementFade = document.getElementById(elementID);
    this.fadeSteps = fadeSteps;
    this.maxFadeout = maxFade;
    this.opacity = 100;    
    this.delay = delay;
    this.ie5 = (document.all && document.getElementById);
    this.ns6 = (!document.all && document.getElementById);
    this.intervalID = 0;

    this.setOpacity = function(opacity)
    {    
        if (this.ie5)
            this.elementFade.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ");";
        if (this.ns6)
            this.elementFade.style.MozOpacity = opacity/100;
        
        this.opacity = opacity;
    }

    this.fadeIn = function()
    {
        var obj = null;
        if (obj == null)
            obj = this;

        if (obj.opacity < 100)
        {   
            obj.setOpacity(obj.opacity + obj.fadeSteps);

            if (obj.intervalID <= 0)
            {            
                obj.intervalID = setInterval(function () { obj.fadeIn(); }, obj.delay);
            }
        }
        else        
        {
            clearInterval(obj.intervalID);
            obj.intervalID = 0;
        }
    }

    this.fadeOut = function()
    {        
        if (this.opacity > this.maxFadeout)
        {        
            this.opacity -= this.fadeSteps;
            
            this.setOpacity(this.elementFade, this.opacity);
            
            this.fadeOut();
        }
    }
}

function ElementOverlay(elementBackgroundID, elementOverlayID, fadeSteps, maxFadeout)
{
    this.eleBackground = document.getElementById(elementBackgroundID);
    this.eleIndicator = document.getElementById(elementOverlayID);
    this.fader = new ElementFader(elementBackgroundID, fadeSteps, maxFadeout);    
    
    this.overlayOn = function(offSetX, offSetY)
    {
        var utilities = new Utilities();

        // Big Gotcha: element needs to be visible before the size attributes return a real value!
        this.eleIndicator.style.display = 'inline';
        this.eleIndicator.style.position = 'absolute';
        
        var nBackgroundLeft = utilities.getLeft(this.eleBackground);
        var nBackgroundTop = utilities.getTop(this.eleBackground);
        
        var nBackgroundWidth = utilities.getScrollWidth(this.eleBackground);
        var nBackgroundHeight = utilities.getScrollHeight(this.eleBackground);
        
        var nOverlayWidth = utilities.getScrollWidth(this.eleIndicator);
        var nOverlayHeight = utilities.getScrollHeight(this.eleIndicator);
        
        var nMiddleX = Math.round((nBackgroundWidth-nOverlayWidth)/2);
        var nMiddleY = Math.round((nBackgroundHeight-nOverlayHeight)/2);        
        
        var posLeft = nBackgroundLeft + nMiddleX;
        var posTop = nBackgroundTop + nMiddleY;        
        
        var offX = 0;
        var offY = 0;
        if (offSetX) offX = offSetX;
        if (offSetY) offY = offSetY;
        this.eleIndicator.style.left = posLeft + offX + 'px';
        this.eleIndicator.style.top = posTop + offY + 'px';

        this.fader.fadeOut();
    }

    this.overlayOff = function()
    {
        this.eleIndicator.style.display = 'none';
        this.fader.fadeIn();        
    }
}
