var DIALOG_ZINDEX_BASE = 98;
var Dialog = new Class({
    initialize: function(width)
    {
        this.bgMask = document.body.appendChild(new Element('div', {
            'styles':
            {
                'left': '0px',
                'top': '0px',
                'background-color': 'white',
                'z-index': DIALOG_ZINDEX_BASE - 1,
                'visibility' : 'hidden'
            }
        }));
        this.bgMask.set('opacity', 0.3);
        this.container = document.body.appendChild(new Element('div',{
            'styles':
            {
                'position': 'absolute',
                'width': width + 'px',
                'z-index': DIALOG_ZINDEX_BASE,
                'visibility' : 'hidden'
            },
            
            'class' : 'dialog'
        }));
        this.container.makeDraggable();
        
        if(Browser.Engine.trident4)
        {
            var elBody = $(document.body);
            var bodySize = elBody.getScrollSize();
            this.bgMask.setStyles({
                'position': 'absolute',
                'width': bodySize.x  + 'px',
                'height': bodySize.y + 'px'
            });
            this.container.setStyle('position', 'absolute');
        }
        else
        {
            this.bgMask.setStyles({
                'position': 'fixed',
                'width': '100%',
                'height': '100%'
            });
            this.container.setStyle('position', 'fixed');
        }
        
        this.TitleBar = this.container.appendChild(new Element('div', {
            'class': 'dialogTitle'
        }));
        
        this.title = this.TitleBar.appendChild(new Element('span', {
            'styles':
            {
                'float': 'left'
            }
        }));
        
        this.closeButton = this.TitleBar.appendChild(new Element('img',{
            'src' : 'images/close.gif',
            'styles':
            {
                'float': 'right'
            }
        }));
        this.closeButton.addEvent('click', this.hide.bind(this));
        
        this.contentArea = this.container.appendChild(new Element('div'));
        
        this.orgScroll = window.getScroll();
        this.autoMoveHandler = 0;
    },
    
    show: function()
    {
        this.moveCenter();
        this.bgMask.style.visibility = 'visible';
        this.container.style.visibility = 'visible';
        if(Browser.Engine.trident4)
        {
            this.autoMoveHandler = this.autoMove.periodical(30, this);
        }
    },
    
    hide: function()
    {
        this.bgMask.style.visibility = 'hidden';
        this.container.style.visibility = 'hidden';
        if(Browser.Engine.trident4 && this.autoMoveHandler)
        {
            $clear(this.autoMoveHandler);
            this.autoMoveHandler = 0;
        }
    },
    
    moveCenter: function()
    {
        var winSize = window.getSize();
        var mySize = this.container.getSize();
        if(Browser.Engine.trident4)
        {
            var winScroll = window.getScroll();
            this.container.style.top = (winSize.y - mySize.y) / 2 + winScroll.y + 'px';
            this.container.style.left = (winSize.x - mySize.x) / 2 + winScroll.x + 'px';
        }
        else
        {
            this.container.style.top = (winSize.y - mySize.y) / 2 + 'px';
            this.container.style.left = (winSize.x - mySize.x) / 2 + 'px';
        }
    },
    
    autoMove: function()
    {
        var newScroll = window.getScroll();
        if(newScroll.x == this.orgScroll.x && newScroll.y == this.orgScroll.y) return;
        var deltaX = newScroll.x - this.orgScroll.x;
        var deltaY = newScroll.y - this.orgScroll.y;
        this.container.style.top = this.container.style.top.toInt() + deltaY + 'px';
        this.container.style.left = this.container.style.left.toInt() + deltaX + 'px';
        this.orgScroll = newScroll;
    },
    
    setTitle: function(text)
    {
        this.title.set('text', text);
    }
});

var ExtendDialog = new Class({
    initialize: function(target)
    {
        this.bgMask = document.body.appendChild(new Element('div', {
            'styles':
            {
                'left': '0px',
                'top': '0px',
                'background-color': 'white',
                'z-index': DIALOG_ZINDEX_BASE - 1
            }
        }));
        this.bgMask.set('opacity', 0.3);
        this.bgMask.setStyle('visibility', 'hidden');
        
        this.container = $(target);
        this.container.makeDraggable();
        this.container.setStyles({
            'z-index': DIALOG_ZINDEX_BASE
        });
        
        if(Browser.Engine.trident4)
        {
            var elBody = $(document.body);
            var bodySize = elBody.getScrollSize();
            this.bgMask.setStyles({
                'position': 'absolute',
                'width': bodySize.x  + 'px',
                'height': bodySize.y + 'px'
            });
            this.container.setStyle('position', 'absolute');
        }
        else
        {
            this.bgMask.setStyles({
                'position': 'fixed',
                'width': '100%',
                'height': '100%'
            });
            this.container.setStyle('position', 'fixed');
        }
        
        this.orgScroll = window.getScroll();
        this.autoMoveHandler = 0;
    },
    
    show: function()
    {
        this.moveCenter();
        this.bgMask.style.visibility = 'visible';
        this.container.style.visibility = 'visible';
        if(Browser.Engine.trident4)
        {
            this.autoMoveHandler = this.autoMove.periodical(30, this);
        }
    },
    
    hide: function()
    {
        this.bgMask.style.visibility = 'hidden';
        this.container.style.visibility = 'hidden';
        if(Browser.Engine.trident4 && this.autoMoveHandler)
        {
            $clear(this.autoMoveHandler);
            this.autoMoveHandler = 0;
        }
    },
    
    moveCenter: function()
    {
        var winSize = window.getSize();
        var mySize = this.container.getSize();
        if(Browser.Engine.trident4)
        {
            var winScroll = window.getScroll();
            this.container.style.top = (winSize.y - mySize.y) / 2 + winScroll.y + 'px';
            this.container.style.left = (winSize.x - mySize.x) / 2 + winScroll.x + 'px';
        }
        else
        {
            this.container.style.top = (winSize.y - mySize.y) / 2 + 'px';
            this.container.style.left = (winSize.x - mySize.x) / 2 + 'px';
        }
    },
    
    autoMove: function()
    {
        var newScroll = window.getScroll();
        if(newScroll.x == this.orgScroll.x && newScroll.y == this.orgScroll.y) return;
        var deltaX = newScroll.x - this.orgScroll.x;
        var deltaY = newScroll.y - this.orgScroll.y;
        this.container.style.top = this.container.style.top.toInt() + deltaY + 'px';
        this.container.style.left = this.container.style.left.toInt() + deltaX + 'px';
        this.orgScroll = newScroll;
    }
});