/** jQuery Window v0.1
 * by Jason "Palamedes" Ellis <palamedes[at]rocketmail.com>
 * Requires jQuery 1.3 or later
 *
 *
 */



// When the document is ready, search for all rel='jQueryWindow' and turn it into a window
// @TODO this wont always be the way we inject a window.. but for now it is.
$(document).ready(function() {

	jQuery.fn.loadCSS('jquery.windows.css');

	/** createWindow 
	 * Creates a window frame with all the attributes you send with it.
	 */
	jQuery.fn.createWindow = function(obj) {
		// What is the ID of the window we will be creating?
		var id = obj.id;

		// If this is a replace then kill the element and place a div there..
		if (obj.replace != undefined) {
			// get the object top/left
			var pos = $(obj.replace.element).offset();
			// we'll need these.
			obj.style.top = pos.top;
			obj.style.left = pos.left;
			// if our obj.replace.style isn't set, set some defaults
			obj.replace.style = (obj.replace.style != undefined)?obj.replace.style:{};
			obj.replace.style.width = (obj.replace.style.width != undefined)?obj.replace.style.width:"200px";
			obj.replace.style.height = (obj.replace.style.height != undefined)?obj.replace.style.height:"200px";
			// Now create a div there so it doesn't make the page shrink -- apply the css
			$(obj.replace.element).replaceWith($("<div></div>").css(obj.replace.style));
		}

		// add some default styles
		obj.style = (obj.style != undefined)?obj.style:{}
		obj.style.position = 'absolute';
		obj.style.width = (obj.style.width != undefined)?obj.style.width:"200px";
		obj.style.height = (obj.style.height != undefined)?obj.style.height:"200px";
		obj.style.top = (obj.style.top != undefined)?obj.style.top:"0";
		obj.style.left = (obj.style.left != undefined)?obj.style.left:"0";

		// Define the HTML
		var newWindow = "<div id='"+id+"' class='jQueryWindow'><div class='head'></div><ul class='tabs'></ul><div class='body'><div class='content'></div></div></div>";

		// Now create the window
		$('body').append(newWindow);
		
		// Apply our style
		$('#'+id).css(obj.style);

		// If draggable, apply it 
		if (obj.draggable != undefined) $('#'+id).draggable(obj.draggable);

		// Create the header
		$('#'+id).children('.head').append("<h2>" + obj.title + "</h2>");

		// Window inner height minus header height minus padding
		var h = $('#'+id).innerHeight() - $('#'+id).children('.head').height() - 10;

		// Add to resize the event to fix the body
	    obj.resizable.resize = function(event, ui) { 
			// How much do we need to adjust?
			var distance =  $('#'+event.target.id).innerHeight() - 
							$('#'+event.target.id).children('.head').height() - 
							$('#'+event.target.id).children('.tabs').height() - 19;//36;
			// Do we have tabs?
//			distance = $('#'+event.target.id).innerHeight() - $('#'+event.target.id).children('.head').height() - 36;
	        $("#"+event.target.id).children(".body").css('height', distance + 'px');
    	    $("#"+event.target.id).children(".body").children(".content").css('height', distance + 'px');
			// @TODO Resize the tabs too
	    }

		// resize
		$("#"+id).resizable(obj.resizable);

		/* Deal with Content
		 * If content is an object assume key is tab name, and value is content
		 * If string, then no tabs
		 */
		if (typeof(obj.content) == "string") {
			// No tabs, turn off the tab bar!
			$('#'+id).children('.tabs').css({height:0,border:0});
			// Add the content to the body
			$('#'+id).children('.body').children('.content').append("<div class='selected'>"+obj.content+"</div>");
		} else {
			// Tabs default to on, so no need to do that
			// Add a style to body in the event of tabs
			$('#'+id).children('.body').addClass('wTabs');

			// Iterate through our collection of tabs and create them.
			$.each(obj.content, function(tabCount,tabObj) {
				var tabID = "tab_"+id+"_"+tabCount;
				var divID = "div_"+id+"_"+tabCount;
				// Create the list items
				$('#'+id).children('.tabs').append("<li id='"+tabID+"'>"+tabObj.title+"</li>");
				// Create the content item div
//@TODO CREATE DIV ITEM BASED ON TYPE
				$('#'+id).children('.body').children('.content').append("<div id='"+divID+"'>"+tabObj.content+"</div>");
				

				// Make the first one selected
				if (tabCount == 0) {
					$('#'+tabID).addClass('selected');
					$('#'+divID).addClass('selected');
				}

				// Add the onClick for the list items
				$('#'+tabID).click(function(){
					// Remove the selected tabs and divs class
					$('#'+id).children('.tabs').children('li.selected').removeClass('selected');
					$('#'+id).children('.body').children('.content').children('div.selected').removeClass('selected');
					// Add selected to the clicked tab and div
					$('#'+tabID).addClass('selected');
					$('#'+divID).addClass('selected');
				});
			});

			// Woops our height just got skewed
			h = h - $('#'+id).children('.tabs').height()+ 15;

		}

		// Make sure the children are the same height.
		$('#'+id).children('.body').css('height', h+'px');
		$('#'+id).children('.body').children('.content').css('height', h+'px');

	}





	// For purposes of this demo, create the window at the known position... proof of concept.
	var pos = $("a[rel='jQueryWindow']").offset();


	// Define the window and it's content
	var windowDef = {
		'id' : '0123456789',
		'replace' : {
			'element' : "a[rel='jQueryWindow']",
			'style'	: {
				height : '300px',
				width : '520px',
				border : '1px dashed grey'
			}
		},
		'style' : {
			height : '300px',
			width: '520px'
		},
		'draggable' : {
			'handle' : '.head',
			'opacity' : 0.8
		},
		'resizable' : {
				maxHeight: 450,
				maxWidth: 700,
				minHeight: 200,
				minWidth: 200
		},
		'title' : 'Draggable/Resizable Window with Tabs!',
		'content' : [
			{	title : 'Multiple Tabs',
				type : 'string',
				content : "<p>So here we have a draggable window with multiple tabs.  Each tab is defined in the object sent to the creator. This tab contains just a string.</p><p>The window knows how to exist within the page, and be dragged around within the page.</p><p>It also knows how to be resized by dragging the various sides and corners</p><p>I'm in the process of fixing the styles as well as adding more widgets and whats'its to the definitions in order to allow all manner of nicities.</p><p>This first window will have all the bells and whistles I can throw at it, I'll create some less complex ones below.</p>"
			},
			{	title : 'String',
				type : 'string',
				content : 'This is another simple string tab.'
			}
		]
	}

	var windowDef1 = {
		'id' : 'demowindow1',
		'replace' : {
			'element' : "a[rel='jQueryWindow1']",
			'style'	: {
				height : '200px',
				width : '260px',
				border : '1px dashed grey'
			}
		},
		'style' : {
			height : '200px',
			width: '260px'
		},
		'draggable' : {
			'handle' : '.head',
			'opacity' : 0.8
		},
		'resizable' : {
				maxHeight: 450,
				maxWidth: 700,
				minHeight: 200,
				minWidth: 200
		},
		'title' : 'Simple Window',
		'type' : 'string',

		'content' : "<p>Here we have a very simple non-tabbed window that can still be dragged and resized.  The goal is to be able to drag this window into the window above allowing that window to absorb it.</p><p>Shouldn't be too hard I wouldn't think.  But this means windows need to be very very smart when it comes to how they behave for future things like ajax refreshing windows.. "

	}




// Fire off the window creates.. normally this is done differently but you get the idea here. 
	if (pos.top != 0) {
		jQuery.fn.createWindow(windowDef);
		jQuery.fn.createWindow(windowDef1);
	}
});