/**
 * This is a jQuery widget that renders a panel with dynamic controls. 
 * 
 * This widget requires the inclusion of jquery.ui.panel.css to render properly
 * 
 * If a 'src' option is provided, the panel content will be loaded remotely using ajax.
 * Otherwise, the contents will contain be the jquery element non which the widget function was invoked.
 * 
 * Options:
 *  src: The url from which to load the contents remotely using ajax
 *  data: If src provided, key/value pairs that will be submitted with the request 
 *  reloadable: If the 'src' option is provided, set this to true top provide a control to allow manual reloading of the contents
 *  resizable: Set this to true to provide a vertical resizing grip
 *  collapsible: set this to true to provide a control to collapse and expand the panel.
 *  title: The panel title 
 *  
 */


(function($) {

	$.widget("ui.panel", {
		
	   _init: function() {
	
			 var container = $("<div class='ui-panel ui-resizable ui-widget ui-widget-content ui-corner-all'/>").addClass(this.options.resizable ? " resizable" : "");					 
			 
			 if(this.options.title || this.options.collapsible == true || (this.options.src && this.options.reloadable == true)) {
				
				var header = $("<div class='ui-panel-header ui-widget-header ui-corner-all'/>").appendTo(container);
					
				if(this.options.title) {
					$("<div class='ui-panel-title'/>").text(this.options.title).appendTo(header);
				}
					
				if(this.options.collapsible == true) {	
					//collapse
					$("<span class='ui-panel-collapse ui-icon ui-icon-circle-triangle-n'>&nbsp;</span>").click(function() {
						$this = $(this);
						$this.parent().next().hide();
						$this.parent().parent().height('auto').removeClass("ui-resizable");
						$this.hide();
						$this.next().show();
					}).appendTo(header);				
					
					//expand
					$("<span class='ui-panel-expand ui-icon ui-icon-circle-triangle-s' style='display:none'>&nbsp;</span>").click(function() {
						$this = $(this);
						$this.parent().next().show();
						$this.parent().parent().height('auto').addClass("ui-resizable");
						$this.hide();
						$this.prev().show();
					}).appendTo(header);
				}

				if(this.options.src && this.options.reloadable == true) {
					var src = this.options.src;
					var data = this.options.data || {};
					//reload
					$("<span class='ui-panel-reload ui-icon ui-icon-arrowrefresh-1-w'>&nbsp;</span>").click(function() {
						$this = $(this);
						$this.parent().next().load(src,data);
					}).appendTo(header);	
				}
			}
			 
			var content = $("<div class='ui-panel-content'/>").appendTo(container);
			
			if(this.options.src) {
				this.element.replaceWith(container);
				content.load(this.options.src, this.options.data || {});
			} else {
				this.element.before(container).appendTo(content);	//cannot use replace() emthods here are they will strip events from contents
			}
			
			var id = this.element.attr("id");
			if(id) { 
				this.element.removeAttr("id");
				container.attr("id",id);
			}
			
			if(this.options.resizable == true) {
				
				var footer = $("<div class='ui-panel-footer ui-widget-header ui-corner-bottom'/>")
					.append("<span class='ui-resizable-handle ui-resizable-s ui-icon ui-icon-grip-dotted-horizontal'>&nbsp;</span>").appendTo(container);
				
				container.resizable({ handles: {s: '.ui-resizable-handle'}, alsoResize: content });
				
				container.resizable('option', 'minHeight', header.height() + footer.height() + 10);
			}
	   },
	   destroy: function() {
		   $.widget.prototype.destroy.apply(this, arguments);
	   }
	 });
	 
	$.extend($.ui.panel, {
		version: "1.0.0",
		defaults: {
			resizable: false,
			collapsible: false
		}
	});

})(jQuery);