Ext.namespace('BWSO.extcore');

//config object:
//cls: the css class assigned to the content area
//title: title text on top of the dialog
//url: the url of the content fetched by an ajax request
//width: the width of the outer div
//height: the height of the outer div
BWSO.extcore.SimplePanel = Ext.extend(Ext.util.Observable, {

	constructor: function(config) {

		this.config = config;

		this.animation = {
			easing: 'easeIn',
			duration: 0.8
		};

		this.render();

	},


	render: function() {
		this.container = Ext.getBody().createChild({
			tag: 'div',
			cls: 'z-simplepanel-bg',
			style: 'cursor: pointer; position: fixed; top:0; left: 0; background: transparent; z-index: 2'
		});
		this.container.setWidth(this.getViewportSize().width - 25);
		this.container.setHeight(this.getViewportSize().height);
		this.container.setStyle('position', 'fixed');
		
		this.container.on('click', this.onCloseWindow, this);

		this.panelDiv = this.container.createChild({
			tag: 'div',
			cls: 'z-simplepanel',
			animate: true
		});
		this.panelDiv.setWidth(this.config.width);
		this.panelDiv.setX((this.container.getWidth() - this.config.width)/2);
		this.panelDiv.setHeight(this.config.height);
		this.panelDiv.setY((this.container.getHeight() - this.config.height)/2);
		this.panelDiv.setVisible(false);
		/*var shadow = new Ext.Shadow({mode: 'drop', offset: 3});*/

		this.panelDiv.on('click', function(event){
			event.stopPropagation();
		}, this);
		
		this.buttonClose = this.panelDiv.createChild({
			tag: 'div',
			cls: 'z-button-close',
			html: '<span>close</span>'
		});
		this.buttonClose.on('click', this.onCloseWindow, this);

		this.contentArea = this.panelDiv.createChild({
			tag: 'div',
			cls: 'z-panel-content ' + this.config.cls,
			html: 'bitte warten',
			style: 'cursor: pointer;'
		});

		this.contentArea.load({
			url: this.config.url,
			success: this.requestSuccess,
			failure: this.requestFailure,
			scope: this
		});

		this.panelDiv.setVisible(true, this.animation);
		/*shadow.show(this.panelDiv);*/
	},

	onCloseWindow: function(){
		this.panelDiv.setVisible(false, this.animation);
		this.container.remove();
	},

	requestSuccess: function(response){
		//this.contentArea.replace(response);
	},

	requestFailure: function(){
		this.contentArea.replace('Übertragung fehlgeschlagen');
	},

	getViewportSize: function(){
		var size = {
			width: 0,
			height: 0
		};

		 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
		 if (typeof window.innerWidth != 'undefined') {
		 	size.width = window.innerWidth;
			size.height = window.innerHeight;
		 }

		// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
		 else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
			size.width = document.documentElement.clientWidth;
			size.height = document.documentElement.clientHeight;
		 }

		 // older versions of IE
 		 else {
			size.width = document.getElementsByTagName('body')[0].clientWidth;
			size.height = document.getElementsByTagName('body')[0].clientHeight;
		 }

		return size;

	}

});