var GameWindow = new Class({

	Implements: Options,
	
	initialize: function (options)
	{
		this.element = document.id(options.element);
		this.contentFunc = options.contentFunction;
		this.finalWidth = 723;
		this.finalHeight = 566;
		this.topLeftX = Math.floor(this.viewPortSize().width / 2 - this.finalWidth / 2);
		this.topLeftY = Math.floor(this.viewPortSize().height / 2 - this.finalHeight / 2);
		this.originX = Math.floor(this.viewPortSize().width / 2);
		this.originY = Math.floor(this.viewPortSize().height / 2);
		this.contentElement = this.element.getChildren('div')[0];
		
		/* Configure main element */
		this.element.setStyle("width", "1px");
		this.element.setStyle("height", "1px");
		this.element.setStyle("overflow", "hidden");
		this.element.setStyle("position", "absolute");
		this.element.setStyle("z-index", "1000");
		
		/* Configure content element */
		this.contentElement.setStyle('position', 'absolute');
		this.contentElement.setStyle('z-index', '1001');
		this.contentElement.setStyle('padding', '38px 0 0 41px');
		this.contentElement.dispose();
		
		/* Create background image */
		this.bgElement = new Element('img', {
			'src': '/KommunalSE/flash/webbspel_24-7/resources/popup.png',
			'styles': {
				'display':'block',
				'width':'100%',
				'height':'100%',
				'position':'absolute',
				'top':'0px',
				'left':'0px',
				'z-index':'1000'
			}
		});
		this.element.adopt(this.bgElement);
		
		/* Create close button */
		this.btnClose = new Element('a', {
			'href': '#',
			'styles': {
				'display':'block',
				'width':'25px',
				'height':'25px',
				'position':'absolute',
				'top':'7px',
				'left':'10px',
				'z-index':'1002',
				'text-decoration' : 'none'
			}
		});
		this.btnClose.innerHTML = "     ";
		this.btnClose.addEvent('click', function(event){this.close()}.bind(this));
	},
	
	open: function()
	{
		this.element.setStyle("top", this.originY);
		this.element.setStyle("left", this.originX);
		
		this.element.adopt(this.btnClose);
		var openFx = new Fx.Morph(this.element, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
		
		openFx.addEvent('complete', function() {
			this.element.adopt(this.contentElement);
			this.contentFunc();
		}.bind(this));
		
		openFx.start({
			'width': this.finalWidth,
			'height': this.finalHeight,
			'top': this.topLeftY,
			'left': this.topLeftX
		});
		
		document.id('startbanner').style.display = 'none';
	},
	
	close: function()
	{
		this.btnClose.dispose();
		this.contentElement.dispose();
		var closeFx = new Fx.Morph(this.element, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
		closeFx.start({
			'width': 1,
			'height': 1,
			'top': this.originY,
			'left': this.originX
		});
		
		document.id('startbanner').style.display = 'block';
	},
	
	viewPortSize: function()
	{
		var viewportwidth;
		var viewportheight;
		
		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
		
		if (typeof window.innerWidth != 'undefined')
		{
		  viewportwidth = window.innerWidth,
		  viewportheight = 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)
		{
		   viewportwidth = document.documentElement.clientWidth,
		   viewportheight = document.documentElement.clientHeight
		}
		
		// older versions of IE
		
		else
		{
		   viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		   viewportheight = document.getElementsByTagName('body')[0].clientHeight
		}
		
		return {width:viewportwidth, height:viewportheight};
	}
});