<html>
<head>

<title>FloatingPane Widget Programatic Creation</title>

<script type="text/javascript">
	var djConfig = {isDebug: true };
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript">
	dojo.require("dojo.widget.FloatingPane");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.widget.Tree");
	dojo.require("dojo.widget.ComboBox");
	dojo.require("dojo.widget.DebugConsole");
	dojo.require("dojo.widget.TaskBar");
</script>

<script>

// description of parameters for floating pane
var paramDesc = [
	//basic
	{name: "widgetId", type: "string", value: ""},
	{name: "title", type: "string", value: "Window"},
	{name: "href", type: "string", value: "doc0.html"},
	{name: "iconSrc", type: "image", values: ["images/note.gif", "images/flatScreen.gif", "images/openFolder.gif"] },
	
	// hide/show
	{name: "displayCloseAction", type: "boolean"},
	{name: "displayMinimizeAction", type: "boolean"},
	{name: "displayMaximizeAction", type: "boolean"},
	{name: "toggle", type: "string", values: ["wipe", "fade", "explode"]},
	{name: "toggleDuration", type: "number", value: 500},
	{name: "taskBarId", type: "string", value: "mytaskbar"},
	{name: "resizable", type: "boolean"},
	{name: "windowState", type: "string", values: ["normal", "minimized", "maximized"]},
	
	// appearance
	{name: "hasShadow", type: "boolean"}
];

// must also specify size/position parameters
var sizeDesc = [
	{name: "top", type: "string", value: "100px"},
	{name: "left", type: "string", value: "200px"},
	{name: "width", type: "string", value: "400px"},
	{name: "height", type: "string", value: "300px"}
];
	
// creates a form for setting the parameters in descriptor
function makeTable(descriptor){
	// make table of parameters
	var text = "";
	dojo.lang.forEach(descriptor, function(item){
		text += "<tr><td>" + item.name + "</td><td>";
		var values = item.type=="boolean" ? [true, false] : item.values;
		if(values){
			dojo.lang.forEach(values, function(val){
				text += "<input type='radio' name='" + item.name + "' value='" + val + "'> " +
				((item.type=="image" && val != "none") ? "<img src='"+val+"'>" : val);
			});
		}else{
			text += "<input id='" + item.name + "' name='" + item.name + "' value='" + (item.value||"") + "'>";
		}
		text += "</td></tr>";
	});
	return "<table class='params'>"+text+"</table>";
}

// Runs on page load
function init(){
	// Fill in tables with parameters the user can set
	var form = dojo.byId("params");
	form.innerHTML= makeTable(paramDesc);
	var sizeForm = dojo.byId("size");
	sizeForm.innerHTML= makeTable(sizeDesc);
}
dojo.addOnLoad(init);

// return all the values in the given form as name/value pairs
// (see also dojo.io.encodeForm)
function serializeForm(formNode, description){
	formNode=dojo.byId(formNode);
	var params = {};
	for(var i = 0; i < formNode.elements.length; i++){
		var elm = formNode.elements[i];
		if(elm.type=="checkbox"){
			params[elm.name]= elm.checked ? true : false;
		}else if(elm.type=="radio"){
			if(elm.checked){
				switch(elm.value){
					case "true":
						params[elm.name]=true;
						break;
					case "false":
						params[elm.name]=false;
						break;
					default:
						params[elm.name]=elm.value;
				}
			}
		}else{
			if(elm.value!=""){
				if(/^[0-9]*$/.test(elm.value)){
					params[elm.name]=parseInt(elm.value);// convert from string --> number
				}else{
					params[elm.name]=elm.value;
				}
			}
		}
	}
	return params;
}

// Make a floating pane according to user set parameters
var cnt=0;
function makePane(){
	// get parameters for this floating pane (as json object)
	var params = serializeForm("params");
	dojo.debug("Making pane w/parameters:");
	for(var p in params){ dojo.debug("  " + p + ": " + params[p]); }

	// get size for floating pane, and setup dummy div to hold it
	var size = serializeForm("size");
	var div=document.createElement("div");
	div.style.position="absolute";
	div.innerHTML="Initial <i>dummy</i> <b>div</b> contents";
	document.body.appendChild(div);	// this didn't used to be necessary ?!
	for(var s in size){
		div.style[s] = size[s];
	}
	dojo.debug("Sizing div CSS: " + div.style.cssText);

	// make the widget
	var widget = dojo.widget.createWidget("FloatingPane", params, div);
	
	// pop-up a window so we can see what we created
	if( dojo.byId("debug").checked ){
		dojo.debugDeep(widget);
	}
	dojo.debug("**Created widget " + widget.widgetId);

	// change the title for next time
	dojo.byId("title").value="Window #" + (++cnt+1);
	
	// setup so we can test methods on this div
	dojo.byId("id").value=widget.widgetId;
}

// Return current (most recently created) widget
function currentPane(){
	var widgetId = dojo.byId("id").value;
	return dojo.widget.byId(widgetId);
}

</script>
<style>
	html, body {
		height: 100%;
		width: 100%;
	}
	#params, #size {
		background: #eeeeee; border: solid black 3px;
		margin-right: 20px;
	}
</style>
</head>
<body>
<h1>FloatingPane Widget Programatic Creation</h1>

<!-- the above code will fill in these divs -->
<div dojoType="TabContainer" style="width: 100%; height: 70%">
	<div dojoType="ContentPane" label="Create">
		<table valign=top id="creator">
			<tr><td><h3>Parameters</h3></td><td><h3>Sizing</h3></td></tr>
			<tr>
				<td>
					<form id="params"></form>
				</td>
				<td valign=top>
					<form id="size"></form>
				</td>
			</tr>
			<tr>
			<td colspan=2 align=center>
				<button onClick="makePane();">Create</button>
				<input type="checkbox" id="debug"> Debug widget
			</td>
		</table>
	</div>

	<div id="methods" dojoType="ContentPane" label="Methods">
		<h3>Method call tests:</h3>
		<table>
			<tr>
				<td>Id:</td>
				<td><input id="id"></td>
			</tr>
			<tr>
				<td>Content/URL:</td>
				<td><textarea id="content" cols=70 rows=4>Type content or a URL in here. <b>OK?</b></textarea></td>
			</tr>
		</table>
		<br>
		<div align=center>
			<button onclick="currentPane().destroy();">destroy()</button>
			<button onclick="currentPane().show();">show()</button>
			<button onclick="currentPane().hide();">hide()</button>
			<button onclick="currentPane().setUrl(dojo.byId('content').value);">setUrl()</button>
			<button onclick="currentPane().setContent(dojo.byId('content').value);">setContent()</button>
		</div>
	</div>
</div>

<div dojoType="DebugConsole" title="Debug output"
	style="position: absolute; width: 300px; height: 300px; right: 50px; top: 300px;">
</div>

<div dojoType="TaskBar" id="mytaskbar" hasShadow="true" resizable="false";
	style="width: 90%; height: 72px;margin: 0px; padding:0px; bottom: 30px; left: 5%; overflow: hidden;">
</div>
</body>
</html>