<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2012 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
<head>
  <title>Flash Topmost Check Example/Test</title>
</head>

<style type="text/css">
embed {
  position: absolute;
}
#box0 {
  background-color: #cccccc;
  line-height: 200px;
  padding: 0px;
  position: absolute;
  text-align: center;
  width: 2000px;
  height: 2000px;
  z-index: -2;
}
#box1 {
  background-color: #ffff00;
  line-height: 200px;
  padding: 0px;
  position: absolute;
  text-align: center;
  width: 200px;
  height: 200px;
  z-index: -1;
}
#box2 {
  background-color: #00ffff;
  line-height: 200px;
  padding: 0px;
  position: absolute;
  text-align: center;
  width: 200px;
  height: 200px;
  z-index: 1;
}
#box3 {
  background-color: #000000;
  line-height: 200px;
  padding: 0px;
  position: absolute;
  text-align: center;
  width: 2000px;
  height: 2000px;
  z-index: 2;
  visibility: hidden;
}
</style>

<script type="text/javascript">
var dragInfo = { lastX:0, lastY:0, target:null };

function onMouseDown(event) {
  dragInfo.lastX = event.clientX;
  dragInfo.lastY = event.clientY;
  dragInfo.target = event.target;
  document.addEventListener("mousemove", onMouseMove, true);
  document.addEventListener("mouseup", onMouseUp, true);
  event.preventDefault();
}

function onMouseMove(event) {
  deltaX = event.clientX - dragInfo.lastX;
  deltaY = event.clientY - dragInfo.lastY;
  dragInfo.lastX = event.clientX;
  dragInfo.lastY = event.clientY;
  baseX = parseInt(dragInfo.target.style.left, 10);
  baseY = parseInt(dragInfo.target.style.top, 10);
  dragInfo.target.style.left = (baseX + deltaX) + "px";
  dragInfo.target.style.top = (baseY + deltaY) + "px";
  event.preventDefault();
}

function onMouseUp(event) {
  document.removeEventListener("mousemove", onMouseMove, true);
  document.removeEventListener("mouseup", onMouseUp, true);
  event.preventDefault();
}
</script>

<div id="box0" style="left:0px;top:0px;"
     onmousedown="onMouseDown(event)">Box #0</div>
<div id="box1" style="left:100px;top:400px;"
     onmousedown="onMouseDown(event)">Box #1</div>
<embed id="plugin" type="application/x-ppapi-example-flash-topmost"
     width="400" height="400"
     style="left:200px;top:400px;" />
<div id="box2" style="left:200px;top:500px;"
     onmousedown="onMouseDown(event)">Box #2</div>
<div id="box3" style="left:0px;top:0px;"
     onmousedown="onMouseDown(event)">Box #3</div>

</body>
</html>