/*
 *	Wimbomedia Main Module	
 *	Copyright 2007 - 2008 Petro Salema
 *	www.petrosalema.com
 *
 *	TODO - Fix errors when switching search pages (get ride of try-catch)
 *
 * --------------------------------------------- */




function trace(msg, overwrite)
{
	if(overwrite === false) { document.getElementById('console').innerHTML += msg; }
	else { document.getElementById('console').innerHTML = msg; }
}


var Wimbomedia = {}




/* Chat Functions
============================================================ */
Wimbomedia.openChat = function()
{
	var module_index = Wimbomedia.TabsManager.createTab('Chat');

	if(!module_index) return;

	document.getElementById(Wimbomedia.TabsManager.MODULE_PREFIX + module_index).innerHTML = Wimbomedia.TabsManager.DEFAULT_LOADING;

	Wimbomedia.Chat.start(Wimbomedia.TabsManager.MODULE_PREFIX + module_index);
}




/* Search Functions
============================================================ */

Wimbomedia.search = function(focus)
{
	if(!(Wimbomedia.search_focus || focus)) return;

	var input = Wimbomedia.search_bar;
	var query = input.value.strip().stripTags();

	var module_index = Wimbomedia.TabsManager.createTab("\"" + query + "\" search results");

	if(!module_index) return;

	document.getElementById(Wimbomedia.TabsManager.MODULE_PREFIX + module_index).innerHTML = Wimbomedia.TabsManager.DEFAULT_LOADING;

	new Ajax.Request('scripts/search.php?q=' + query, Wimbomedia.printSearchResults.bindTo({}, [module_index]));
}


Wimbomedia.printSearchResults = function(module_index, payload)
{
	var meta = /^{(\d+)}/;

	var count = payload.match(meta)[1];
	payload = payload.replace(meta, '');

	document.getElementById(Wimbomedia.TabsManager.MODULE_PREFIX + module_index).innerHTML = payload;

	var tab = document.getElementById(Wimbomedia.TabsManager.TAB_PREFIX + module_index);
	tab.getElementsByTagName('span')[0].innerHTML += ' (' + count + ')';

	Wimbomedia.Handle.resize();
}


Wimbomedia.showResultsPage = function(index)
{
	var tm = Wimbomedia.TabsManager;
	var id = tm.current_tab_id;

	var module = document.getElementById(tm.MODULE_PREFIX + id);

	var pages = Util.getElementsByClassName('pagebreak', module);
	var pagination = Util.getElementsByClassName('pagination', module)[0];
	var pa = pagination.getElementsByTagName('a');

	for(var i=0, j=pages.length; i<j; i++)
	{
		if(i == index)
		{
			pa[i].style.borderColor = '#08c';
			pages[i].style.display = 'block';
		}
		else
		{
			try
			{/* Something is causing non-fatal errors here!!! */

				pa[i].style.borderColor = '';
				pages[i].style.display = 'none';
			}
			catch(e) {/* Do nothing */}
		}
	}	
}



/* TabsManager Class
============================================================ */

var TabsManager = Class(EventListener, {


	MAX_TAB_WIDTH: 300,
	CLASS_BASE: 'tab',
	CLASS_OVER: 'tab_over',
	CLASS_CURRENT: 'tab_current',
	TAB_PREFIX: 'tab_',
	MODULE_PREFIX: 'tab_module_',
	DEFAULT_LOADING: "<br /><center><img src=\"images/loading.gif\" /></center><br />",


	tabs: [],
	last_tab_id: 0,
	current_tab_id: null,
	is_tab: /^tab(_over|_current)?$/,
	ribbon: null,


	init: function()
	{
		this.ribbon = document.getElementById('tabs');
		Wimbomedia.Handle.addEvent('resize', this.resizeTabs.bindTo(this));
	},


	createTab: function(title)
	{/* Returns the id of the created module */

		var tabs = this.tabs;
		var count = tabs.length;

		for(var i=0; i<count; i++)
		{
			if(tabs[i].title == title)
			{
				this.showModule(tabs[i].id);
				return false;
			}
		}

		var breaker = document.getElementById('tab_breaker');

		this.last_tab_id++;

		var new_tab = document.createElement('div');
		new_tab.setAttribute('title', title);
		new_tab.setAttribute('id', this.TAB_PREFIX + this.last_tab_id);
		new_tab.className = this.CLASS_BASE;

		new_tab.innerHTML = "<span>" + title +  "</span><a class=\"tab_btn\" href=\"javascript:Wimbomedia.TabsManager.closeTab('" + this.last_tab_id + "')\" title=\"Close this tab\">x</a>";

		Util.addEvent(new_tab, 'mouseover', this.onMouseOver.bindWithEventTo(this));
		Util.addEvent(new_tab, 'mouseout', this.onMouseOut.bindWithEventTo(this));
		Util.addEvent(new_tab, 'mousedown', this.onMouseDown.bindWithEventTo(this));
		Util.addEvent(new_tab, 'mouseup', this.onMouseUp.bindWithEventTo(this, this.last_tab_id));

		this.ribbon.insertBefore(new_tab, breaker);

		this.tabs.push({id:this.last_tab_id, title:title, tab:new_tab});

		this.resizeTabs();

		this.createTabModule(this.last_tab_id);

		return this.last_tab_id;
	},


	closeTab: function(id)
	{
		var tabs = this.tabs;
		var count = tabs.length;

		for(var i=0; i<count; i++)
		{
			if(tabs[i].id == id)
			{
				var id = tabs[i].id;

				Util.removeNode(tabs[i].tab.getAttribute('id'));
				Util.removeNode(this.MODULE_PREFIX + id);

				tabs.splice(i, 1);

				if(id == this.current_tab_id && tabs.length > 0) { this.showModule(tabs[0].id); }

				break;
			}
		}

		this.resizeTabs();
	},


	resizeTabs: function()
	{
		var offset = (this.ribbon.offsetLeft * 2);
		var tabs = this.tabs;
		var count = tabs.length;
		var margin = (count > 0) ? parseInt(Util.getStyle(tabs[0].tab, 'margin-right')) : 0;
		var span = Wimbomedia.Handle.left_width - offset + margin;

		var width = Math.floor(span / count);
		if(width > this.MAX_TAB_WIDTH) { width = this.MAX_TAB_WIDTH; }

		for(var i=0; i<count; i++)
		{
			tabs[i].tab.style.width = (width - margin) + 'px';
		}
	},


	createTabModule: function(index)
	{
		var breaker = document.getElementById('module_breaker');
		var module = document.createElement('div');
		var id = this.MODULE_PREFIX + index;

		module.setAttribute('id', id);
		module.className = 'module';
		module.style.display = 'none';

		breaker.parentNode.insertBefore(module, breaker);

		this.showModule(index);
	},


	showModule: function(index)
	{
		var tabs = this.tabs;
		var count = tabs.length;

		for(var i=0; i<count; i++)
		{
			var id = tabs[i].id;

			document.getElementById(this.MODULE_PREFIX + id).style.display = 'none';
			tabs[i].tab.className = this.CLASS_BASE;

			if(id == index)	{ tabs[i].tab.className = this.CLASS_CURRENT; }
		}

		document.getElementById('tab_module_' + index).style.display = 'block';

		this.current_tab_id = index;

		Wimbomedia.Handle.resize();
	},


	onMouseOver: function(e)
	{
		var src = e.target || window.event.srcElement;
		while(!this.is_tab.test(src.className)) { src = src.parentNode; }

		if(src.className == this.CLASS_CURRENT) return;

		src.className = this.CLASS_OVER;
	},


	onMouseOut: function(e)
	{
		var src = e.target || window.event.srcElement;
		while(!this.is_tab.test(src.className)) { src = src.parentNode; }

		if(src.className == this.CLASS_CURRENT) return;

		src.className = this.CLASS_BASE;
	},


	onMouseDown: function(e)
	{
		var src = e.target || window.event.srcElement;
		while(!this.is_tab.test(src.className)) { src = src.parentNode; }

		if(src.className != this.CLASS_CURRENT) { src.style.color = '#fff'; }
	},


	onMouseUp: function(e, index)
	{
		var src = e.target || window.event.srcElement;
		while(!this.is_tab.test(src.className))
		{
			if(src.className == 'tab_btn') return; // We are deleting so forget everthing else
			src = src.parentNode;
		}

		src.style.color = '';

		this.showModule(index);
	},


	empty: function()
	{
	}
	

}); /* ---------- END OF TabsManager CLASS ---------- */




/* Handle Class
============================================================ */

var Handle = Class(EventListener, { /* HANDLE CLASS */


	// Constant
	limit: 340,	// The minimum width either column can be
	a_base: 0.01,	// Alpha constants for handle bar
	a_over: 0.05,
	a_down: 1,


	start_x: 0,	// The x position of the mouse from where we start dragging
	startl_w: 0,	// The width of the right and left column at the point we start dragging
	startr_w: 0,
	left: null,	// Right and left columns we will be resizing
	right: null,	//
	is_dragging: false,


	left_width: 0,
	right_width: 0,


	// Objects
	div: null,	// Our handle div


	init: function()
	{
		var h = this.div = document.getElementById('handle');

		this.left = document.getElementById('column_left');
		this.right = document.getElementById('column_right');

		this.left_width = this.left.offsetWidth;
		this.right_width = this.right.offsetWidth;

		this.resize();

		Util.addEvent(h, 'mouseover', this.onMouseOver.bindWithEventTo(this));
		Util.addEvent(h, 'mouseout',  this.onMouseOut.bindWithEventTo(this));
		Util.addEvent(h, 'mousedown', this.onMouseDown.bindWithEventTo(this));
		Util.addEvent(h, 'mouseup',   this.onMouseUp.bindWithEventTo(this));
	},


	resize: function()
	{/* We need to do this now and again for IE */

		var left_height = this.left.offsetHeight;
		var right_height = this.right.offsetHeight;

		var height = (left_height > right_height) ? left_height : right_height;

		this.div.style.height = (height - (this.div.offsetTop * 2)) + 'px';
	},


	onMouseOver: function(e)
	{
		if(this.is_dragging) return;
		Util.setStyle(this.div, 'alpha', this.a_over);
	},


	onMouseOut: function(e)
	{
		if(this.is_dragging) return;
		Util.setStyle(this.div, 'alpha', this.a_base);
	},


	onMouseDown: function(e)
	{
		Util.disableSelecting();

		Util.setStyle(this.div, 'alpha', this.a_down);
		Util.setStyle(this.div, 'background', '#08c');

		this.start_x = Util.getMouse(e).x;
		this.startl_w = this.left.offsetWidth;
		this.startr_w = this.right.offsetWidth;

		document.onmousemove = this.onMouseMove.bindWithEventTo(this);
		document.onmouseup = this.onMouseUp.bindWithEventTo(this);
	},


	onMouseUp: function(e)
	{
		this.is_dragging = false;
		document.getElementsByTagName('body')[0].style.cursor = 'auto';

		Util.setStyle(this.div, 'alpha', this.a_base);
		this.div.style.background = '#000';

		Util.enableSelecting();
		document.onmousemove = null;
	},


	onMouseMove: function(e)
	{
		this.is_dragging = true;
		document.getElementsByTagName('body')[0].style.cursor = 'w-resize';

		var delta = Util.getMouse(e).x - this.start_x;
		var overshoot = 0;

		var wl = this.startl_w + delta;
		var wr = this.startr_w - delta;

		if(wl < this.limit) { overshoot = this.limit - wl; }
		else if(wr < this.limit) { overshoot = wr - this.limit; }

		this.left_width = wl + overshoot;
		this.right_width = wr - overshoot;

		this.left.style.width = this.left_width + 'px';
		this.right.style.width = this.right_width + 'px';

		this.resize();

		return false;
	}


}); /* ---------- END OF Handle CLASS ---------- */




/* KeyEvents Class
============================================================ */

var KeyEvents = Class(EventListener, {


	init : function()
	{
		Util.addEvent(document, "keydown",  this.onKeyDown.bindWithEventTo(this));
		Util.addEvent(document, "keypress", this.onKeyPress.bindWithEventTo(this));
		Util.addEvent(document, "keyup",    this.onKeyUp.bindWithEventTo(this));
	},


	onKeyDown : function(e)
	{
		var ev = e || window.event;
		var kc = ev.keyCode || ev.which;

		if(kc == 13) this.enterPressed();
	},

	onKeyUp: function(e) { return; },


	onKeyPress: function(e) { return; },


	enterPressed: function()
	{
		/* Did someone say "Enter"? */
	}


}); /* ---------- END OF KeyEvents CLASS ---------- */




function init()
{
	/* Create objects */

	Wimbomedia.KeyEvents	= new KeyEvents();
	Wimbomedia.Handle	= new Handle();
	Wimbomedia.TabsManager	= new TabsManager();
	Wimbomedia.Playlist	= new Playlist({id:null, fixed:null, opened:true});
	Wimbomedia.Chat		= new Chat();


	/* Consider creating a Search class */

	Wimbomedia.search_focus = false;
	Wimbomedia.search_bar = document.getElementById('search_query');
	Util.addEvent(Wimbomedia.search_bar, 'focus', function() { Wimbomedia.search_focus = true; });
	Util.addEvent(Wimbomedia.search_bar, 'blur', function() { Wimbomedia.search_focus = false; });

	Wimbomedia.KeyEvents.addEvent('enterPressed', Wimbomedia.search);
}