var MyPopup = Class.create({
	container : null,

	initialize : function(html, params){
		var body = $(document.getElementsByTagName('body')[0]);
		this.container = new Element('div', params).update(html);
		this.container.style.position = 'absolute';
		this.container.style.zIndex = '100';
		this.container.style.left = '0px';
		this.container.style.top = '0px';
		body.insert(this.container);
		var width = this.container.getWidth();
		var height = this.container.getHeight();
		var pageSize = this.getPageSize();
		var scrollXY = this.getScrollXY();
		var left = (pageSize[0]-width)/2;
		this.container.style.left = '' + left + 'px';
		var top = (pageSize[1]-height) / 2 + scrollXY[1];
		this.container.style.top = '' + top + 'px';

		$$('object').invoke('setStyle', { visibility: 'hidden' });

		var closeFunction = function(e) {
			Event.stop(e);
            this.close();
		}.bindAsEventListener(this);
		this.container.select(".popupCloseLink").each(function(el){
			el.observe('click', closeFunction);
		});

        this.container.observe('click',function(e){
        	if (Event.element(e).tagName.toLowerCase() != 'a') {
        		Event.stop(e);
        	}
        });

        this.firstClick = 1;
        this.documentOnclick = function(e) {
            if (this.firstClick == 1) {
                this.firstClick = 0;
                return;
            }
			Event.stop(e);
            this.close();
		}.bindAsEventListener(this);
        $(document).observe('click', this.documentOnclick);
	},

    close : function(){
        this.container.remove();
        $$('object').invoke('setStyle', { visibility: 'visible' });
        $(document).stopObserving('click',this.documentOnclick);
    },

	getPageSize : function(){
	    var de = document.documentElement;
	    var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	    var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	    arrayPageSize = [w,h];
	    return arrayPageSize;
	},

	getScrollXY : function() {
	  var scrOfX = 0, scrOfY = 0;
	  if( typeof( window.pageYOffset ) == 'number' ) {
	    //Netscape compliant
	    scrOfY = window.pageYOffset;
	    scrOfX = window.pageXOffset;
	  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
	    //DOM compliant
	    scrOfY = document.body.scrollTop;
	    scrOfX = document.body.scrollLeft;
	  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
	    //IE6 standards compliant mode
	    scrOfY = document.documentElement.scrollTop;
	    scrOfX = document.documentElement.scrollLeft;
	  }
	  return [ scrOfX, scrOfY ];
	}

});

/*
<script>
function popup(){
	new MyPopup(
        '<h2>Heal my heart</h2><a href="#close" class="popupCloseLink">Close</a>',
        {
            style : "width:200px;height:200px;padding:20px;background-color:#0ff;border:solid 1px #000;"
        }
    );
}
</script>
*/

function popAlert(text, title) {
		var html =
		'<a href="#" class="popupCloseLink" title="Close">X</a>'
		+ '<h2>' + title + '</h2>'
		+ '<div class="popupText">' + text + '</div>';
		var params = {class : 'popAlertContainer'};
		new MyPopup(html,params);
}