<e:fragment
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:b="http://www.backbase.com/2006/btl"
	xmlns:e="http://www.backbase.com/2006/xel"
	xmlns:xi="http://www.w3.org/2001/XInclude">
	<div id="appHeader">
		<div class="appHeaderLogo"></div>
		<div class="appHeaderText">Backbase Sample Layout</div>
	</div>
	<b:stretch>
		<b:windowArea id="windowArea" style="background-image:url(resources/media/desktop.jpg)">
			<img style="position:absolute;top:40px;left:30px;width:32px;height:32px" src="resources/media/users.png" alt="Contacts">
				<e:handler event="click" type="text/javascript">
					bb.document.getElementById('contactWin').open();
				</e:handler>
			</img>
			<img style="position:absolute;top:100px;left:30px;width:32px;height:32px" src="resources/media/preferences.png" alt="Address Book">
				<e:handler event="click" type="text/javascript">
					bb.document.getElementById('addressWin').open();
				</e:handler>
			</img>
			<b:window id="addressWin" label="Address Book" width="350px" height="300px" top="20px" left="100px">
				<b:toolBar>
					<b:toolBarButton icon="backbaseWindow">Edit</b:toolBarButton>
					<b:toolBarButton icon="backbaseWindow">Delete</b:toolBarButton>
				</b:toolBar>
				<b:dataSource name="mySource" e:behavior="b:localData">
					<b:dataContainer type="text/xml">
						<xi:include href="resources/contactsActors.xml" />
					</b:dataContainer>
				</b:dataSource>
				<b:stretch>
					<b:listGrid id="app7-list" dataSource="mySource" rows="25" height="100%" readonly="true" style="background:url(grad.png) repeat-x;">
						<b:listGridCol dataField="id" label="ID" width="50px" datatype="number" />
						<b:listGridCol dataField="first" label="First Name" />
						<b:listGridCol dataField="last" label="Last Name" />
						<b:listGridCol dataField="email" label="Email" />
						<b:listGridCol dataField="phone" label="Phone" />
					</b:listGrid>
				</b:stretch>
			</b:window>
			<b:window id="contactWin" label="Contact" top="150px" left="500px">
				<b:accordion height="100%">
					<b:accordionItem icon="backbaseWindow" label="Friends">
						<b:tree height="auto">
							<b:treeBranch label="Online" open="true">
								<b:treeLeaf label="Contact A" />
								<b:treeLeaf label="Contact B" />
								<b:treeLeaf label="Contact C" />
							</b:treeBranch>
							<b:treeBranch label="Offline" open="false">
								<b:treeLeaf label="Contact D" />
								<b:treeLeaf label="Contact E" />
								<b:treeLeaf label="Contact F" />
								<b:treeLeaf label="Contact G" />
								<b:treeLeaf label="Contact H" />
							</b:treeBranch>
						</b:tree>
					</b:accordionItem>
					<b:accordionItem icon="backbaseWindow" label="Work">
						<b:tree height="auto">
							<b:treeBranch label="Online" open="false">
								<b:treeLeaf label="Contact A" />
								<b:treeLeaf label="Contact B" />
								<b:treeLeaf label="Contact C" />
								<b:treeLeaf label="Contact D" />
								<b:treeLeaf label="Contact E" />
								<b:treeLeaf label="Contact F" />
							</b:treeBranch>
							<b:treeBranch label="Offline" open="false">
								<b:treeLeaf label="Contact G" />
								<b:treeLeaf label="Contact H" />
							</b:treeBranch>
						</b:tree>
					</b:accordionItem>
				</b:accordion>
			</b:window>
		</b:windowArea>
	</b:stretch>
	<table style="width:100%" cellpadding="0" cellspacing="0">
		<tr>
			<td>
				<b:menuBar>
					<b:menuBarItem label="Start">
						<b:menuPopUp>
							<b:menuPopUpItem label="Address Book" e:onclick="bb.document.getElementById('addressWin').open()" />
							<b:menuPopUpItem label="Contacts" e:onclick="bb.document.getElementById('contactWin').open()" />
							<b:menuPopUpItem label="Log Off" e:onclick="bb.document.getElementById('logoff').open()" />
						</b:menuPopUp>
					</b:menuBarItem>
				</b:menuBar>
			</td>
			<td><b:taskBar windowArea="id('windowArea')" /></td>
		</tr>
	</table>
	<b:modal id="logoff" label="Log Off" padding="10px">
		Are you sure you want to exit the application?
		<div style="margin-top:20px;padding-left:40px">
			<b:button e:onclick="bb.document.getElementById('logoff').close()">Log Off</b:button>
			<b:button e:onclick="bb.document.getElementById('logoff').close()" style="margin-left:20px">Cancel</b:button>
		</div>
	</b:modal>
</e:fragment>