var Modal = 
{
    show: function(control, properties)
    { 
        var properties = this.center(control, properties);
        if(properties.overlay)
        {
            this.addOverlay(control, properties);
        }
        
        window.onresize = function()
        {
			Modal.center(control, properties);
        }
        window.onscroll = function () 
        { 
            control.style.top = document.body.scrollTop;
        }
    },
    getProperties: function() 
    {
        return  {
            'height'        : 600,
            'width'         : 700,
            'topOffSet'     : 0,
            'position'      : 'absolute',
            'display'       : 'block',
            'zIndex'		: 1000,
            'colorOverlay'  : '#000',
            'overlay' : true,
            'closeOverlay' : false,
            'opacity' : 0.2
        };
    },
    setProperties: function(destination, source) 
    {
        for (var property in source) 
        {
            destination[property] = source[property];
        }
        return destination;
    },
    center : function(control, properties) 
    {
        var property = this.setProperties(this.getProperties(), properties || {});
    
        var pageSize = this.getPageSize();
        var pos = this.realOffset(document.body);
        
        var newTopOffSet = (pageSize.windowHeight / 2 - property.height / 2 + pos[1] + property.topOffSet);
		if (newTopOffSet < 0)
		{
			control.style.top = property.topOffSet + 'px';
		}
		else
		{
			control.style.top = newTopOffSet + 'px';
		}
		
		control.style.display = property.display;
		control.style.left = (pageSize.windowWidth / 2 - property.width / 2 + pos[0]) + 'px';
        control.style.height = property.height;
        control.style.width = property.width;
		control.style.position = property.position;
		control.style.zIndex = property.zIndex;
		return property;
    },
    realOffset: function(element) 
    {
        var top = 0, left = 0;
        do 
        {
            top += element.scrollTop  || 0;
            left += element.scrollLeft || 0;
            element = element.parentNode;
        } while (element);
        
        return [left, top];
    },
    close: function(control) 
    {
        var overlay = document.body.childNodes[document.body.childNodes.length - 1];
        if(overlay != null)
        {
            document.body.removeChild(overlay);
        }
        control.style.display = 'none';
        window.onresize = null;
        window.onscroll = null;
    },
    addOverlay: function(control, properties)
    {
        var overlay = document.createElement('div');
        overlay.style.top = '0px';
        overlay.style.left = '0px';
        overlay.style.position = 'absolute';
		overlay.style.background = properties.colorOverlay;
		
        this.setOpacity(overlay, properties.opacity);
        var pageSize = this.getPageSize();
        overlay.style.height = pageSize.pageHeight+'px';
        overlay.style.width = '100%';
        overlay.style.zIndex = properties.zIndex - 1;
        
        if(properties.closeOverlay)
        {
            overlay.onclick = function(){
                                        Modal.close(control);
                                    }
        }
        
        document.body.appendChild(overlay);
        return overlay;
    },
	setOpacity: function(element, value)
    {
        if (typeof element == 'string')
        {
            element= $(element);
        }
        if (value == 1)
        {
            element.style.opacity = (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.999999 : 1.0 ;
            if(/MSIE/.test(navigator.userAgent) && !window.opera)
            {
                element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
            }
        } 
        else 
        {
            if(value < 0.00001) value = 0;
            {
                element.style.opacity = value;
            }
            
            if(/MSIE/.test(navigator.userAgent) && !window.opera)
            {
                element.style.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi,'') + 'alpha(opacity='+value*100+')';
            }
        }
        return element;
    },
    getPageSize: function()
    {
        var xScroll, yScroll;
        if (window.innerHeight && window.scrollMaxY) 
        {
            xScroll = document.body.scrollWidth;
            yScroll = window.innerHeight + window.scrollMaxY;
        } 
        else if (document.body.scrollHeight > document.body.offsetHeight)
        {
            // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } 
        else 
        {
            // Explorer Mac...would also work in Explorer 6 Strict,
            // Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
          
        var windowWidth, windowHeight;
        if (self.innerHeight) 
        {      // all except Explorer
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } 
        else if (document.documentElement && document.documentElement.clientHeight) 
        {
            // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } 
        else if (document.body) 
        { // other Explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }

        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight)
        {
            pageHeight = windowHeight;
        } 
        else 
        {
            pageHeight = yScroll;
        }

        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth)
        {
            pageWidth = windowWidth;
        } 
        else 
        {
          pageWidth = xScroll;
        }
        
        return {
          'pageWidth':pageWidth,
          'pageHeight':pageHeight,
          'windowWidth':windowWidth,
          'windowHeight':windowHeight,
          'yScroll':yScroll,
          'xScroll':xScroll
        };
    }
}