# HG changeset patch
# User Nobuyasu Oshiro  <dimolto@cr.ie.u-ryukyu.ac.jp>
# Date 1363356180 -32400
# Node ID 341766c5a6e929ee163b7d42cd36019a2dc419d9
# Parent  bf0cd5920429957a9bc7def8cb46dad9712207e5
modified viewer_whit.html

diff -r bf0cd5920429 -r 341766c5a6e9 public/viewer/viewer_white.html
--- a/public/viewer/viewer_white.html	Fri Mar 15 19:20:04 2013 +0900
+++ b/public/viewer/viewer_white.html	Fri Mar 15 23:03:00 2013 +0900
@@ -15,8 +15,24 @@
 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script>
 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script>
 <script type="text/javascript" src='treeArrangement.js'></script>
+
+<style>
+div.header{
+	position:absolute;
+	left:0;top:0;
+	z-index:5;
+	height:50px;
+	width:100%;
+	background:#223;
+	background:-moz-linear-gradient(top,#002,#223);
+	background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223));
+	color:silver;
+	font-size:40px;
+}
+</style>
+
+
 <script type="text/javascript">
-
 var LOAD_INTERVAL = 5;
 var BASE_URL = "";
 if(!Array.prototype.filter){
@@ -50,17 +66,109 @@
 $(function() {
     userName = localStorage.userName;
     if(userName) start();
-    else $("#loginPopup").css("display", "block");
+//    else $("#loginPopup").css("display", "hidden");
+    else $("#loginPopup").css("visibility", "visible");
 })
 
 function start() {
 
 }
+
+function beginScript() {
+    function begin(element, x, y) {
+	var s = '#' + element.id + '(begin drag)' + ' x:' + x + ', y:' + y;
+	updateInfo(s);
+    }
+    function drag(element, x, y) {
+	var s = '#' + element.id + ' (dragging)' + ' x:' + x +', y:' +y;
+	updateInfo(s);
+    }
+    function end(element, x, y) {
+	var s = '#' + element.id + ' (end drag)' + ' x:' + x +', y:' +y;
+	updateInfo(s);
+    }
+    function updateInfo(s) {
+	document.getElementById("info").innerHTML = s;
+    }
+    var infoForm = DragHandler.attach(document.getElementById('loginPopup'));
+    infoForm.dragBegin = begin;
+    infoForm.drag = drag;
+    infoForm.dragEnd = end;
+}
+
+var DragHandler = {
+    _oElem : null,
+    attach : function(oElem) {
+	oElem.onmousedown = DragHandler._dragBegin;
+	oElem.dragBegin = new Function();
+	oElem.drag = new Function();
+	oElem.dragEnd = new Function();
+	return oElem;
+    },
+    _dragBegin : function(e) {
+	var oElem = DragHandler._oElem = this;
+	if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
+	if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
+	var x = parseInt(oElem.style.left);
+	var y = parseInt(oElem.style.top);
+	e = e ? e : window.event;
+	oElem.mouseX = e.clientX;
+	oElem.mouseY = e.clientY;
+	oElem.dragBegin(oElem, x, y);
+	document.onmousemove = DragHandler._drag;
+	document.onmouseup = DragHandler._dragEnd;
+	return false;
+    },
+    _drag : function(e) {
+	var oElem = DragHandler._oElem;
+	var x = parseInt(oElem.style.left);
+	var y = parseInt(oElem.style.top);
+	e = e ? e : window.event;
+	oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
+	oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
+	oElem.mouseX = e.clientX;
+	oElem.mouseY = e.clientY;
+	oElem.drag(oElem, x, y);
+	return false;
+    },
+    _dragEnd : function() {
+	var oElem = DragHandler._oElem;
+	var x = parseInt(oElem.style.left);
+	var y = parseInt(oElem.style.top);
+	oElem.dragEnd(oElem, x, y);
+	document.onmousemove = null;
+	document.onmouseup = null;
+	DragHandler._oElem = null;
+    }
+
+};
+
+function addLoadEvent(func) {
+    var oldonload = window.onload;
+    if (typeof window.onload != 'function') {
+	window.onload = func;
+    } else {
+	window.onload = function() {
+	    if (oldonload) {
+		oldonload();
+	    }
+	    func();
+	}
+    }
+}
+
+addLoadEvent(function() {
+    beginScript();
+});
+
 </script>
 
-<nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
+<div class='header'>
+    <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
+</div>
 
-<div id="loginPopup" style='position:fixed; left:0; top:0; width:100%; height:100%; z-index:10; display:none;'>
+<div id='info'></div>
+<div id="loginPopup" style='position:fixed; left:20; top:70; width:35%; height:35%; border:solid 1px; border-radius:5px; '>
   <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div>
   <div style='position:absolute; left:50%; top:50%'>
   <div style='position:absolute; left:-160px; top:-80px; width:320px; height:120px; background:white;'>
@@ -69,8 +177,12 @@
 	  dimolto
       </div>
       <input type=text placeholder='username' style='position:absolute; left:20px; top:70px; width:180px; font-size:16px; height:24px;' id='loginUserName'>
+<!--
       <span style='position:absolute; left:220px; top:70px; width:80px; font-size:16px; height:24px; line-height:24px;' class='button' value='login' onclick="try{var a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}}catch(e){console.log(e)}return false;">Login</span>
+-->
+      <span style='position:absolute; left:220px; top:70px; width:80px; font-size:16px; height:24px; line-height:24px;' class='button' value='login' >move</span>
   </form>
   </div>
   </div>
 </div>
+