var FullScreenPopup = Class.create();

FullScreenPopup.prototype = {
    initialize: function(options) {
        this.options = {
          resizeDuration: 0.6,
          overlayDuration: 0.2,
          height: 250,
          width: 250,
          title: 'fsPopup',
          content: '<div />',
          destroyOnEnd: false,
          onEnd: null,
          loadingImage: '/pra/js/FullScreenPopup/images/loading.gif'
        };
        Object.extend(this.options, options || { });
        if(!this.options.initHeight) this.options.initHeight = this.options.height/2;
        if(!this.options.initWidth) this.options.initWidth = this.options.width/2;

        var bod = $$('body')[0];

        this.overlay = $(Builder.node('div', {className: 'overlay'}));
        this.overlay.hide().observe('click', (function() { this.end(); }).bind(this));
        
        bod.insert(this.overlay);

       this.head = $(Builder.node('div', {className:'head'}, [
           $(Builder.node('a', {className:'close', href:''}, 'X')).observe('click', (function(event) { event.stop(); this.end(); }).bind(this)),
           Builder.node('h2', this.options.title)
       ]));
       
       this.body = $(Builder.node('div', {className:'body'}, this.options.content));
       this.loading = $(Builder.node('div',{className:'fspLoading'}, Builder.node('img', {src: this.options.loadingImage})));
       this.placeholder = $(Builder.node('div')).setStyle({height: this.options.initHeight + 'px'});

       this.container = $(Builder.node('div', {className:'container ajaxPopup'}, [
        this.head.hide(),
        this.body.hide(),
        this.loading,
        this.placeholder
       ]));

       this.outerContainer = $(Builder.node('div', {className:'outerContainer'}, this.container));
       this.outerContainer.setStyle({ width: this.options.initWidth + 'px', height: this.options.initHeight + 'px'});
       
       this.box = $(Builder.node('div', {className: 'fspBox'}, this.outerContainer));
       this.box.hide().observe('click', (function(event) { if (event.element().hasClassName('fspBox')) this.end(); }).bind(this));
       bod.insert(this.box);
    },
    update: function(content){this.body.update(content);},
    insert: function(content){this.body.insert(content);},
    start: function() {
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
        
        // stretch overlay to fill page and fade in
        var arrayPageSize = this.getPageSize();
        this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

        // calculate top and left offset for the lightbox
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var boxTop = arrayPageScroll[1] + ((document.viewport.getHeight() - this.options.height)/2);
        var boxLeft = arrayPageScroll[0];
        this.box.setStyle({ top: boxTop + 'px', left: boxLeft + 'px' });
        this.box.show();
        new Effect.Appear(this.overlay, { duration: this.options.overlayDuration, from: 0.0, to: 0.8});

        new Effect.Parallel([
            new Effect.Morph(this.placeholder, {sync: true, style: 'height:'+this.options.height+'px;'}),
            new Effect.Morph(this.outerContainer, {sync: true, style: 'width:'+this.options.width+'px; height:'+this.options.height+'px;'})
        ], {afterFinish: function(){
                this.container.childElements().invoke('toggle');
                if (Prototype.Browser.IE) 
                	if (parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6) this.head.style.width = this.container.getWidth() + 'px';
                if (this.options.afterPopup) this.options.afterPopup();
            }.bind(this),
            duration: this.options.resizeDuration
        });
        this.boundResize = function() {
            var arrayPageSize = this.getPageSize();
            this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
        }.bind(this);
        Event.observe(window, 'resize', this.boundResize);
    },
    end: function() {
        if(Object.isFunction(this.options.onEnd))
        	try{
        		this.options.onEnd(this);
        	}catch(er){}
        this.box.hide();
        this.container.childElements().invoke('toggle');
        this.outerContainer.setStyle({ width: this.options.initWidth + 'px', height: this.options.initHeight + 'px'});
        this.placeholder.setStyle({height: this.options.initHeight + 'px'});
        new Effect.Fade(this.overlay, { duration: this.options.overlayDuration });
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
        Event.stopObserving(window, 'resize', this.boundResize);
        if(this.options.destroyOnEnd) this.destroy();
    },
    destroy: function(){
        this.overlay.remove();
        this.overlay = null;
        this.box.remove();
        this.box = null;
    },
    getPageSize: function() {
        /*From lightbox*/
	     var xScroll, yScroll;

		if (window.innerHeight && window.scrollMaxY) {
			xScroll = window.innerWidth + window.scrollMaxX;
			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
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth;
			} else {
				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 = xScroll;
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}
};