var Fx = {};

(function() {

Fx.Window = function(config) {
	config = config || {};
	
	for (var prop in config) {
		this[prop] = config[prop];
	}
	
	this.config = config;
	
	this.initialized = false;
	this.initialize();
}

Fx.Window.prototype = {
	cls: 'window',
	padding: 10,
	hdTemplate: '<div class="hd"></div>',
	bdTemplate: '<div class="bd"></div>',
	ftTemplate: '<div class="ft"></div>',
	elTemplate: '<div class="window"></div>',
	contentElTemplate: '<div></div>',
	titleTemplate: '<h3></h3>',
	
	underlayTemplate: '<div class="underlay"></div>',
	
	initialize: function() {		
		if (!this.initialized) {
			this.el = this.createElement();
			
			this.hd = this.createHead();
			this.bd = this.createBody();
			this.ft = this.createFoot();
			
			this.el.append(this.hd);
			this.el.append(this.bd);
			this.el.append(this.ft);
			
			$('body').append(this.el);
			
			this.underlay = this.createUnderlay();
			$('body').append(this.underlay);
			
			this.initialized = true;
		}
	},
	
	createUnderlay: function() {
		var underlay = $(this.underlayTemplate);
		var el = this.el;
		
		underlay.width(el.outerWidth() + this.padding * 2);
		underlay.height(el.outerHeight() + this.padding * 2);
		
		return underlay;
	},
	createHead: function() {
		var hd = null;
		hdMatched = $('.hd', this.el);
		
		hdMatched.each(function() {
			hd = $(this);
		});
		
		if (hd != null) {
			return hd;
		}
		
		hd = $(this.hdTemplate);
		
		if (this.title) {
			var title = $(this.titleTemplate);
			title.text(this.title);
			
			hd.append(title);
		}
		
		return hd;
	},
	createBody: function() {
		var bd = $(this.bdTemplate);
		
		if (this.applyId != null) {
			this.contentEl = $('#' + this.applyId);
		} else {
			this.contentEl = $(this.contentElTemplate);
		}
		
		bd.append(this.contentEl);
		
		return bd;
	},
	createFoot: function() {
		var ft = $(this.ftTemplate);
		
		var buttons = this.buttons || [];
		
		for (var idx in buttons) {
			var buttonConfig = buttons[idx];
			if (typeof(buttonConfig) == 'string') {
				buttonConfig = {
					text: buttonConfig
				};
			}
			
			this.createButton(ft, buttonConfig);
		}
		
		return ft;
	},
	createButton: function(parent, button) {
		var bt = $('<button></button>');
		
		if (button.id != null) {
			bt.attr('id', button.id);
		}
		
		bt.text(button.text);

		if (button.handler != null && typeof(button.handler) == 'function') {
			bt.click(button.handler);
		}
		
		parent.append(bt);
	},
	createElement: function() {
		var el = null;
		
		if (this.id != null) {
			elMatched = $('#' + this.id);
			
			elMatched.each(function() {
				el = $(this);
			});
			
			if (el == null) {
				el = $(this.elTemplate);
				el.attr('id', this.id);
			} else {
				el.addClass(this.cls);
			}
		} else {
			el = $(this.elTemplate);
		}

		return el;
	},
	
	show: function() {
		this.adjustSize();
		
		this.underlay.show();
		this.el.show();
	},
	hide: function() {
		this.underlay.hide();
		this.el.hide();
	},
	adjustSize: function() {
		var doc = $(document);
		
		var offsetTop = doc.scrollTop();
		var offsetLeft = doc.scrollLeft();

		var viewport = $(window);
		var viewportWidth = viewport.width();
		var viewportHeight = viewport.height();
		
		var ralitiveTop = offsetTop + (viewportHeight - this.el.outerHeight()) / 2;
		var ralitiveLeft = offsetLeft + (viewportWidth - this.el.outerWidth()) / 2;
		
		this.el.css('top', ralitiveTop + 'px');
		this.el.css('left', ralitiveLeft + 'px');
		
		ralitiveTop -= this.padding;
		ralitiveLeft -= this.padding;
		
		this.underlay.css('top', ralitiveTop + 'px');
		this.underlay.css('left', ralitiveLeft + 'px');
	},
	setHead: function(content) {
		this.setContent(this.head, content);
	},
	setBody: function(content) {
		this.setContent(this.body, content);
	},
	setContent: function(el, content) {
		if (typeof(content) == 'string') {
			el.html(content);
		} else if (typeof(content) == 'object') {
			el.append(content);
		}
	}
}

})();

/*$(function() {
	new MapLocator();
	$('img').click(function() {
		new Fx.Window({
			id: 'map-panel',
			title: 'Map Locator',
			applyId: 'map-locator',
			buttons: ['ok', 'cancle']
		}).show();
	});
});*/