var Popup =
{
    /**
     * Creates and shows elements to overlay.
     * @param url       the location to load.
     * @param width     the width of the overlay.
     * @param height    the height of the overlay.
     */
    openOverlay: function(url, width, height)
    {
        var div = document.createElement("div");
        div.id                      = "overlay_div";
        div.style.display           = "block";
        div.style.zIndex            = this._getMaxZindex() + 1;
        div.style.opacity           = "0.65";
        div.style.filter            = "alpha(opacity=65)";
        div.style.backgroundColor   = "#323031";
        div.style.position          = "absolute";
        div.style.top               = "0px";
        div.style.left              = "0px";
        div.style.width             = "100%";
        div.style.height            = this._getPageHeight() + "px";
        document.body.appendChild(div);

        var iframe = document.createElement("iframe");
        iframe.id                   = "overlay_iframe";
        iframe.style.display        = "block";
        iframe.style.zIndex         = this._getMaxZindex() + 1;
        iframe.style.border         = "1px solid #333333";
        iframe.style.backgroundColor= "#FFFFFF";
        iframe.style.padding        = "10px";
        iframe.style.position       = "absolute";
        iframe.style.top            = this._getTopOffset(50);
        iframe.style.left           = "50%";
        iframe.style.marginLeft     = ((width / 2) * -1) + "px";
        iframe.style.width          = width + "px";
        iframe.style.height         = height + "px";
        iframe.frameBorder          = "no";
        iframe.src                  = url;
        document.body.appendChild(iframe);

        div = document.createElement("div");
        div.id                      = "overlay_close_div";
        div.style.display           = "block";
        div.style.zIndex            = this._getMaxZindex() + 1;
        div.style.position          = "absolute";
        div.style.top               = this._getTopOffset(35);
        div.style.left              = "50%";
        div.style.marginLeft        = ((width / 2) - 10) + "px";
        div.style.width             = "30px";
        div.style.height            = "30px";
        div.style.cursor            = "pointer";
        div.style.backgroundImage   = "url('/images/boxclose.png')";
        addEvent(div, "click", Popup.closeOverlay);
        addEvent(document, "keypress", Popup.keyPress);
        document.body.appendChild(div);
    },

    /**
     * Removes the created elements for the overlaying.
     */
    closeOverlay: function()
    {
        var div = document.getElementById("overlay_div");
        if (div != null) document.body.removeChild(div);
        var iframe = document.getElementById("overlay_iframe");
        if (iframe != null) document.body.removeChild(iframe);
        div = document.getElementById("overlay_close_div");
        if (div != null) document.body.removeChild(div);
    },

    /** 
     * Triggers closeOverlay when 'escape' key has been pressed.
     */
    keyPress: function(event)
    {
        var e = event || window.event;
        var code;
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        if (code == 27) Popup.closeOverlay();
    },

    /**
     *
     */
	_getTopOffset: function(diff)
	{
		var h = parseInt((window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop));
		if (h)
		{
			if (typeof diff != "undefined")
			{
			 	return (h + parseInt(diff)) + "px";
			}
			else
			{
				return h + "px";
			}
		}
		else if (typeof diff != "undefined")
		{
		 	return parseInt(diff) + "px";
		}
		return 0;
	},

    /**
     * Returns the height of the page.
     * @return          the height of the page.
     */
    _getPageHeight: function()
    {
        var result = 0;
        if (window.innerHeight && window.scrollMaxY)
            result = window.innerHeight + window.scrollMaxY;
        else if (document.body.scrollHeight > document.body.offsetHeight)
            result = document.body.scrollHeight;
        else
            result = document.body.offsetHeight;
        var result2 = Math.max(document.body && document.body.scrollHeight || 0, document.documentElement && document.documentElement.scrollHeight || 0);
        if (result2 > result)
            result = result2;
        return result;
    },

    /**
     * Returns the maximum zindex of all elements on the page.
     * @return          the max zindex.
     */
    _getMaxZindex: function()
    {
        var maxZIndex = 0;
        var elements = document.getElementsByTagName("*");
        for (var i = 0; i < elements.length; i++)
        {
            var element = elements[i];
            var zindex;
            if (element.currentStyle)
                zindex = element.currentStyle.zIndex;
            else if (document.defaultView)
                zindex = document.defaultView.getComputedStyle(element, null).getPropertyValue("z-index");
            if (!isNaN(zindex))
            {
                if (zindex > maxZIndex)
                    maxZIndex = zindex;
            }
        }
        return parseInt(maxZIndex);
    }
}