// moodows 0.1b by jean-nicolas jolivet (silvertab(at)videotron.ca)
// DESC: an extremely simple window class for mootools
// TODO: make windows resizeable (working on it)
// TODO: make window's design skinnable/more customizable
// TODO: make the whole thing better ;)

var moodows = new Class({
	
	initialize: function(options) {
		
		this.el = new Element('div');
		this.id = 'moodow_' + new Date().getTime();
		this.el.id = this.id;
		this.el.addClass('moodows_win');
		
		
		//set default options
		this.options = Object.extend({
			width:			300,
			height:			200,
			top:			100,
			left:			100,
			title:			' ',
			status:			'',
			closable:		true,
			minimize:		true
		}, options || {});
		
		this.el.style.zIndex = 1;
		
		this.el.setStyles({
			width: this.options.width + 'px',
			height: this.options.height + 'px',
			top: this.options.top + 'px',
			left: this.options.left + 'px'
		});
		
/*
		this.innerContent = "<table border='0' padding='0' spacing='0' id='title_" + this.id + "' class='moodows_title'><tr><td id='titleText_" + this.id + "'>top</td></tr></table>\
		<table border='0' padding='0' spacing='0' id='middle_" + this.id + "'><tr><td id='content_" + this.id + "'  class='moodows_body'>content</td></tr></table>\
		<table border='0' padding='0' spacing='0' id='status_" + this.id +"' class='moodows_status'><tr><td id='statusText_" + this.id + "'>Status Text</td></tr></table>";
*/		
		this.innerContent = "<div id='title_" + this.id + "' class='moodows_title'><p id='titleText_" + this.id + "'>top</p></div>\
		<div id='content_" + this.id + "'  class='moodows_body'>content</div>\
		<div id='status_" + this.id +"' class='moodows_status'><p id='statusText_" + this.id + "'>Status Text</p></div>";
		
		this.el.innerHTML = this.innerContent;
		
		this.el.injectInside(document.body);
		this.titleHeight = $('title_' + this.id).getSize().size.y;
		this.statusHeight = $('status_' + this.id).getSize().size.y;
		
		this.contentHeight = this.options.height - (this.titleHeight + this.statusHeight) - 6;
		
		$('titleText_' + this.id).setStyles({
			'width': this.options.width
		});
		
		$('content_' + this.id).setStyles({
			'height': this.contentHeight,
			'width': this.options.width
		});
		
		$('statusText_' + this.id).setStyles({
			'width': this.options.width
		});
		
		this.dragOptions = {
			handle: $('title_' + this.id),
			onStart: function() {
				this.el.setStyle('opacity', 0.5);
				this.el.style.zIndex = this.getLastZIndex();
			}.bind(this),
			
			onComplete: function() {
				this.el.setStyle('opacity', 1);
			}.bind(this)
		};
		
		
		//everything is drawn, we can set titles etc..
		this.setTitle(this.options.title);
		this.setStatus(this.options.status);
		
		this.contentDiv = $('content_' + this.id);
		
		if(this.options.closable)
		{
			this.closeButton = new Element('div');
			this.closeButton.addClass('moodows_close');
			this.closeButton.setHTML('<b>x</b>');
			this.closeButton.setStyle('left', this.options.width - 20 + 'px');
			this.closeButton.injectInside(this.el);
		}
		
		if(this.options.minimize)
		{
			this.miniButton = new Element('div');
			this.miniButton.addClass('moodows_minimize');
			this.miniButton.setHTML('<b>_</b>');
			this.miniButton.setStyle('left', this.options.width - 40 + 'px');
			this.miniButton.injectInside(this.el);
		}
		
		this.minimized = false;
		this.el.makeDraggable(this.dragOptions);
		this.el.setStyle('display', 'none');
		this.watchEvents();
		
	},
	
	getLastZIndex: function() {
		var allMoodows = $$('div.moodows_win');
		var zindexArray = [];
		//if its's our first window, leave the zindex to 1...
		if(allMoodows.length <= 0)
		{
			return 1;
		}
		else
		{
			allMoodows.forEach(function(item) {
				zindexArray.push(item.style.zIndex);
			});
			zindexArray.sort(this.sortNumber);
			return zindexArray[zindexArray.length-1].toInt() + 1;
		}
	},
	
	sortNumber: function(a, b) {
		
		return a - b;
	},
	
	setContent: function(content) {
		$('content_' + this.id).setHTML(content);
	},
	
	setTitle: function(content) {
		$('titleText_' + this.id).setHTML(content);
	},
	
	setStatus: function(content) {
		$('statusText_' + this.id).setHTML(content);
	},
	
	watchEvents: function()
	{
		if(this.options.closable)
		{
			this.closeButton.onclick = function() { 
				this.hide(); 
			}.bind(this);
		}
		
		if(this.options.minimize)
		{
			this.miniButton.onclick = function() {
				this.minimize();
			}.bind(this);
		}
	},
	
	hide: function()
	{
		this.el.setStyle('display', 'none');
		this.executeHideEvents();
	},
	
	show: function()
	{
		this.el.style.zIndex = this.getLastZIndex();
		this.el.setStyle('display', 'block');
	},
	
	minimize: function()
	{
		if(!this.minimized)
		{
			this.contentDiv.oldHeight = this.contentDiv.getSize().size.y;
			this.middleTableOldHeight = $('middle_' + this.id).getSize().size.y;

			this.contentDiv.effect('height').start(0);
			this.el.effect('height').start(48);
			$('middle_' + this.id).effect('height').start(0);
			this.minimized = true;
		}
		else
		{
			this.contentDiv.effect('height').start(this.contentDiv.oldHeight);
			this.el.effect('height').start(this.options.height);
			$('middle_' + this.id).effect('height').start(this.middleTableOldHeight);
			this.minimized = false;
		}
	},
	
	addHideEvent: function (e) {
		if (!$defined(this.hideEvents)) {
			this.hideEvents = [];
		}
		this.hideEvents.push(e);
	},
	
	executeHideEvents: function () {
		if ($defined(this.hideEvents)) {
			var i;

			for (i=0; i<this.hideEvents.length; i++) {
				var hideEvent = this.hideEvents[i];
				hideEvent();
			}
		}
	}
});