var ProgressOverlay = Class.create({
    initialize: function(options){
        this.options = options;
		this.context = {};
        this.browserVersion = new BrowserVersion();
		this._initializeDefaults();
        this._initializeOverlay();
        this._initializeContent(); 
    },
	
	_initializeDefaults : function(){
	    if(undefined == this.options.closeButton) this.options.closeButton = true ;
		if(undefined == this.options.backgroundColor) this.options.backgroundColor = '#1B1B1B;' ;
	},

    _initializeOverlay: function(){
        this._body().appendChild(this._background());
        // creating a form and appending display to it as IE fix
		this._createForm();
		this.options.display = this._createMessageOverlay();
		this._displayForm().appendChild(this.options.display);
    },
	
	_createMessageOverlay : function(){
		var parentDiv = new Element('div',{'id' : 'parentDiv'});
		if(this.options.message) {
			var messageDiv = this._createMessageDiv();
			parentDiv.appendChild(messageDiv);
		}
		var imageDiv = new Element('div').update(this._loadingImage());
		parentDiv.appendChild(imageDiv);
		return parentDiv;
	},
	
	_createMessageDiv : function(){
	  return new Element('div',{ 'class': 'message_text'}).update(this.options.message);
	},
    
    _createForm : function(){
     this._body().appendChild(new Element('form',{
                                        'id':'displayForm',
                                         'method': 'get',
                                         'style':'height:100%'
                                        }));
    },
    _displayForm: function(){
        return $('displayForm');
    },
    _form: function(){
        return $$('form').first();
    },
    
    _body: function(){
        return $$('body').first();
    },
    _background: function(){
        var color = this.options.backgroundColor;
		var background = new Element('div', {
                                             'id':'overlay' + Math.random(), 
                                             'style' :  'opacity:0.9;' + 
														'background-color:' + this.options.backgroundColor + 
														'display:none;' + 
														'left:0;' + 
														'position:absolute;' + 
														'top:0;' + 		
														'z-index:999;'
                                             });
        this.context.overlayId = background.id;
		return background;
    },
		
    _initializeContent: function(){
		this.dialogContentName = 'dialogcontent' ;
		if ($(this.options.display))
			this.dialogContentName += $(this.options.display).id;
        this._body().appendChild(this._createContent());
        this._center();
		$(this.options.display).wrap(this._content());
    },
	
    _createContent: function(suffix){
        var content;
        var position = this.browserVersion.IE6 ? 'absolute;' : 'fixed;';
		content = new Element('div',{
									 'id': this.dialogContentName ,
									 'class': 'dialogcontent',
									 'style': 'display:none;' +
											  'height:350px;' +
											  'position:' + position +                                            
											  'width:350px;' +
											  'z-index:1000;'
									 }
							  );      
        if(this.options.dimensions) {
            content.style.height = this.options.dimensions.height;
            content.style.width = this.options.dimensions.width;
        } 
		this.context.dialogContentId = content.id ;
        return content;
    },
	
    show: function(){
            this._attachModalDialogBehavior();
            this._showOverlay();
			this._showDialog();
    },

    _attachModalDialogBehavior: function(){
        var that = this;
        window.onresize = this._adustOverlayAndContent.bindAsEventListener(this);
        if(this.browserVersion.IE6) window.onscroll = this._adustOverlayAndContent.bindAsEventListener(this);
        document.observe('keypress', this._disableKeyUpKeyDown.bindAsEventListener(this));                          
    },
    _adustOverlayAndContent: function(){
        with(this){
            _center();
            _resizeOverlay();        
        }
    },
    _center: function(){
        top_position = document.viewport.getHeight()/2 - (this._content().getHeight()/2);
        left_position = document.viewport.getWidth()/2- (this._content().getWidth()/2);

        this._content().setStyle({top: top_position + 'px'});
        this._content().setStyle({left: left_position + 'px'});        
    },
    _resizeOverlay: function(){
        this._overlay().setStyle({height: this._pageSize()[1]+'px'});                      
        this._overlay().setStyle({width: '100%'});
    },
    _disableKeyUpKeyDown: function(e){
        if (!e) var e = window.event;
        if (e.keyCode == Event.KEY_DOWN || 
            e.keyCode == Event.KEY_UP ||
            e.keyCode == Event.KEY_PAGEDOWN){
            if(this._isOverlayVisible()){
                Event.stop(e);
            }
        }
    },
    _isOverlayVisible: function(){
         return this._content().visible();
    },
    _showOverlay: function(){
        this._resizeOverlay();
        Effect.Appear(this._overlay(),{from:0.0,to:0.6,duration:0.3});
    },
    _showDialog: function(){        
        Effect.Appear(this._content(),{from:0.6,to:1.0,duration:0.5});
		this._updateNonAjaxContent();
    },
	
	_loadingImage : function(){
        return	"<div class='img_loading_spl' >" + 
				"<img src='skins/images/loading.gif'/>" + 
				"</div>";
	},
	
    _updateNonAjaxContent: function(){
        with(this){
            _content().hide();
            _center();
            _showContent();            
        }
    },

    _showContent : function(){
        with(this){
            _content().show();
        }
    },
    
    closeDialog: function(){
		this.hideDialog();
		this.hideOverlay();
    },
	
	hideDialog: function(){
		this._dettachModalDialogBehavior();
		this._hideContent();
	},
	
    _dettachModalDialogBehavior: function(){
        // TODO: Should only stop observing specific functions
        document.stopObserving('keypress'); 
        window.onresize = function(){};
    },

    hideOverlay: function(){
        Effect.Fade(this._overlay(),{duration:0.2});
    },

    _hideContent: function(){
        Effect.Fade(this._content(),{duration:0.2});           
		if($('parentDiv'))$('parentDiv').remove();
    },

    _overlay : function(){
      return $(this.context.overlayId);
    },

    _content: function(){
        return $(this.context.dialogContentId);
    },

    _pageSize: 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;
	    }

	    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	    return arrayPageSize;    
    }
});