/* 
  jquery.goatstone.variableDislay.js
 */
// generateTemplates
// setContent
// removeContent
// when the user clicks 
$.widget("ui.variableDisplay", {
	content : [],
	displays : [ "accordion", "flat", "dialogs", "tabs" ],
	options : {},
	_create : function() {
		$this = this;
		this.setContent();

		// accordion
		$.template("accordion", '<h3><a href="#">{{html head }}</a></h3> <div>{{html body }}</div>');
		$.tmpl("accordion", this.content).appendTo("#content-accordion");
		$("#content-accordion").accordion();

		// dialog
		$.template("dialog", '{{each(i,v) content}} <div class="dialog" id="dialog-${i}" title="{{html v.head }}"> {{html v.body }} </div> {{/each}}');
		$.tmpl("dialog", [ {
			content : this.content
		} ]).appendTo("#content-dialog");
		var x = 40;
		var y = 130;
		var z = 1000;
		var newSet =  $.makeArray($(".dialog")).reverse();
		$.each(newSet, function(i, v) {
			$(v).dialog({
				width : ( $('body').width() - 160 ),
				position : [ x, y ],
				maxHeight : ( 600 ),
				height : $(window).height()-200  
				})
			x += 20;
			y += 50;
		})
		// tabs
		$.template("tabsUL", '{{each(i,v) content}} <li><a href="#tabs-${ i }"> {{html v.head }} </a></li> {{/each}}');
		$.template("tabsDIV", '{{each(i,v) content}}  <div id="tabs-${ i }"> {{html v.body }} </div>  {{/each}}');
		$.tmpl("tabsUL", [ {
			content : this.content
		} ]).appendTo("#content-tab UL");
		$.tmpl("tabsDIV", [ {
			content : this.content
		} ]).appendTo("#content-tab");

		$("#content-accordion").hide();
		$("#content-tab").tabs();
		$("#content-tab").hide();
		$(".ui-dialog").hide();
	},
	flat : function() {
		this.hideAll();
		$("#content-flat").show();
	},
	accordion : function() {
		this.hideAll();
		$("#content-accordion").show();
	},
	dialog : function() {
		this.hideAll();
		$(".ui-dialog").show();
		// $("#content-dialog").show();
	},
	tab : function() {
		this.hideAll();
		$("#content-tab").show();
	},
	hideAll : function() {
		$("#content-accordion").hide();
		$("#content-flat").hide();
		$(".ui-dialog").hide();
		$("#content-tab").hide();
	},
	effects : function(name) {
		var options = {};
		if (name === "scale") {
			options = {
				percent : 0
			};
		} else if (name === "size") {
			options = {
				to : {
					width : 200,
					height : 60
				}
			};
		}
		// are the dialogs visible?
		if ($('.ui-dialog:visible').length > 0) {
			$(".ui-dialog").effect(name, options, 2000, function() {
				setTimeout(function() {
					$(".ui-dialog").show();
				}, 1000);
			});
		} else {
			$("#content").effect(name, options, 2000, function() {
				setTimeout(function() {
					$("#content").removeAttr("style").hide().fadeIn();
				}, 1000);
			});
		}
	},
	setContent : function() {
		var cont = $('#content-flat > *');
		for ( var i = 0; i < cont.length; i += 2) {
			var obj = {
				head : $(cont[i]).html(),
				body : $(cont[i + 1]).html()
			}
			this.content.push(obj);
		}
	},
	destroy : function() {
		$.Widget.prototype.destroy.apply(this, arguments); // default
	}
});