<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 

<title>Dojo DnD parent position test</title>

<style type="text/css"> body { margin: 50px; } </style>

<script type="text/javascript">
	var djConfig = { isDebug: true };
</script>

<script type="text/javascript" src="../../dojo.js"></script>

<script type="text/javascript">
	dojo.require("dojo.dnd.HtmlDragMove");
	dojo.require("dojo.widget.DebugConsole");
	dojo.require("dojo.widget.ResizeHandle");
	dojo.require("dojo.event.*");

	function init(){
		new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer1"));
		new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer2"));
		new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer3"));
		new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer4"));
		new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer5"));
		new dojo.dnd.HtmlDragMoveSource(dojo.byId("layer6"));
	}
	dojo.addOnLoad(init);
</script>
<p>Make sure that all can be dragged nicely.</p>
<p>Remember to check that it works when the window is scrolled!</p>
<p>a</p>
<p>b</p>
<p>c</p>
<!-- test for positioning bug if object is inside a form (that isn't at the top left of the body -->
<form>
	This list is inside a form: Drag should Not start from top left of screen.
	<ul id="layer3">
		<li>list 3 item 1</li>
		<li>list 3 item 2</li>
		<li>list 3 item 3</li>
	</ul>
</form>
<div>
	This list is inside a div
	<ul id="layer5">
		<li>list 5 item 1</li>
		<li>list 5 item 2</li>
	</ul>
</div>
<div>
	This list is inside a div, and the list itself is relative positioned
	<ul id="layer6" style="position:relative; left:100px;">
		<li>list 5 item 1</li>
		<li>list 5 item 2</li>
	</ul>
</div>		
<form style="position:relative; left:200px;">
	This list is also inside a form which is relative positioned.
	<ul id="layer1">
		<li>list 1 item 1</li>
		<li>list 1 item 2</li>
		<li>list 1 item 3</li>
	</ul>
</form>

<div style="position:relative; left:250px; height: 100px; background-color:yellow"> 	
<form>
	This list is inside a form, which is inside a relative positioned div
	<ul id="layer2">
		<li>list 2 item 1</li>
		<li>list 2 item 2</li>
		<li>list 2 item 3</li>
	</ul>
</form>
</div>

<div style="position:absolute; top:100px; left:300px; height: 100px; background-color:red"> 	
<form style="position:relative; left:50px">	
	This list is inside a relative-postioned form, which is inside an absolute positioned div
	<ul id="layer4">
		<li>list 4 item 1</li>
		<li>list 4 item 2</li>
		<li>list 4 item 3</li>
	</ul>
</form>
</div>

<div style="position:relative; left:200 px">
  <p>a debug conosle inside a relative div</p>
  <div dojoType="DebugConsole"
	title="Debug Console"
	style="width: 600px; height: 200px; left: 200px;"
	hasShadow="true"
	resizable="true"
	displayCloseAction="true"
	layoutAlign="client"
	>
  </div>
</div>

<p>a debug console in body</p>
  <div dojoType="DebugConsole"
	title="Debug Console"
	style="width: 600px; height: 200px; left: 200px;"
	hasShadow="true"
	resizable="true"
	displayCloseAction="true"
	layoutAlign="client"
	>
  </div>