<panel jsml-class="mainformmenubar" height="28" padding="3,0,1,3">
		<panel jsml-base="menubarsimpl" dock="fill"></panel>
</panel>
<panel jsml-class="mainformstatusbar" height="28" padding="3,0,3,3">
	<panel jsml-base="statusbarimpl" dock="fill"></panel>
</panel>

<panel jsml-class="mainformdeptree">
	<panel jsml-base="frameskin" jsml-local="mfdt" text="Departments/Agents" dock="over"/>
	<panel jsml-base="deptreeimpl" dock="fill"></panel>
	<initialize>
		self.set_padding(mfdt.get_framepadding());
	</initialize>
</panel>
<panel jsml-class="mainformqueuelist">
	<panel jsml-base="frameskin" jsml-local="mfsq" text="Waiting Visitors" dock="over"/>
	<panel jsml-base="waitqueueimpl" dock="fill"></panel>
	<initialize>
		self.set_padding(mfsq.get_framepadding());
	</initialize>
</panel>
<panel jsml-class="mainformvisitorlist">
	<panel jsml-base="frameskin" jsml-local="mfvlskin" text="Visitors List" dock="over"/>
	<panel jsml-base="custlistimpl" dock="fill" />
	<initialize>
		self.set_padding(mfvlskin.get_framepadding());
	</initialize>
</panel>
<panel jsml-class="mainformchatcontainer">
	<panel jsml-base="frameskin" jsml-local="mfskincc" text="Chat Tabs" dock="over"/>
	<panel jsml-base="chattabsimpl" dock="fill" />
	<initialize>
		self.set_padding(mfskincc.get_framepadding());
	</initialize>
</panel>


	
<!--#init={

$vars.dialogoption={
	width:800,height:500,
	buttons: {
		"Ok": function() { 
			$(this).dialog("close"); 
		}, 
		"Cancel": function() { 
			$(this).dialog("close"); 
		} 
	},
	title:"Hello World",
	modal: true
}
$vars.showdialog=function()
{
	var div=document.createElement('div');
	$(div).dialog($vars.dialogoption);
	var newctx={myvar:'test123'}
	asyncloadcontrol('{$path}/newdialog.htm?{$urlsuffix}',div,newctx);
}

}-->


<button data-init="$(this).button().click($vars.showdialog)">
	Dialog
</button>