Test new UI, Fix nonblock.py bug

11 files changed, 358 insertions, 100 deletions

diff --git a/src/js/imc.js b/src/js/imc.js
index 98f2bdb..8e444a1 100644
--- a/src/js/imc.js
+++ b/src/js/imc.js
@@ -22,7 +22,7 @@ var imc = new function(){
         };
     };
 
-    this.Proxy = function(linkid,connect_linkid){
+    this.Proxy = function(linkid,auth,connect_linkid){
         var MSGTYPE_CALL = 'call';
         var MSGTYPE_RET = 'ret';
 
@@ -32,7 +32,7 @@ var imc = new function(){
         var conn_retidmap = {};
         var call_pathmap = {};
 
-        var route_call = function(caller_retid,timeout,iden,dst,func_name,param,callback){
+        var route_call = function(caller_retid,timeout,idendesc,dst,func_name,param,callback){
             var i;
             var part;
             var dst_linkid;
@@ -51,6 +51,8 @@ var imc = new function(){
             dst_linkid = part[2];
             dst_path = part.slice(3).join('/');
 
+            iden = auth.get_iden(idendesc);
+
             caller_linkid = iden.linkid
             if(caller_retid.split('/')[0] != caller_linkid){
                 return false;
@@ -60,14 +62,14 @@ var imc = new function(){
                 if((func = call_pathmap[dst_path + func_name]) != undefined){
                     _add_wait_caller(linkid);
 
-                    func(param,function(data){
+                    func(iden,param,function(data){
                         if(linkid in conn_retidmap && caller_retid in conn_retidmap[linkid]){
                             delete conn_retidmap[linkid][caller_retid];
                             callback({'stat':true,'data':data}); 
                         }   
                     });
                 }else{
-                    callback({'stat':true,'data':'Enoexist'}); 
+                    callback({'stat':false,'data':'Enoexist'}); 
                 }   
             }else{
                 that.request_conn(dst_linkid,function(conn){
@@ -75,7 +77,7 @@ var imc = new function(){
                         _add_wait_caller(conn.linkid);
                     }
 
-                    send_msg_call(conn,caller_retid,timeout,iden,dst,func_name,param);
+                    send_msg_call(conn,caller_retid,timeout,idendesc,dst,func_name,param);
                 });
             }
         };
@@ -89,12 +91,12 @@ var imc = new function(){
             }
         };
 
-        var send_msg_call = function(conn,caller_retid,timeout,iden,dst,func_name,param){
+        var send_msg_call = function(conn,caller_retid,timeout,idendesc,dst,func_name,param){
             msg = {
                 'type':MSGTYPE_CALL,
                 'caller_retid':caller_retid,
                 'timeout':timeout,
-                'iden':iden,
+                'idendesc':idendesc,
                 'dst':dst,
                 'func_name':func_name,
                 'param':param
@@ -105,15 +107,17 @@ var imc = new function(){
         var recv_msg_call = function(conn,msg){
             var caller_retid = msg.caller_retid;
             var timeout = msg.timeout;
-            var iden = msg.iden;
+            var idendesc = msg.idendesc;
             var dst = msg.dst;
             var func_name = msg.func_name;
             var param = msg.param;
-            var caller_linkid = iden.linkid;
 
-            route_call(caller_retid,timeout,iden,dst,func_name,param,function(result){
+            route_call(caller_retid,timeout,idendesc,dst,func_name,param,function(result){
                 that.request_conn(caller_retid,function(conn){
-                    send_msg_ret(conn,caller_linkid,caller_retid,result);
+                    var iden;
+
+                    iden = auth.get_iden(idendesc);
+                    send_msg_ret(conn,iden.linkid,caller_retid,result);
                 });
             });
         };
@@ -181,11 +185,11 @@ var imc = new function(){
             }
         };
 
-        that.call = function(iden,timeout,dst,func_name,param,callback){
+        that.call = function(idendesc,timeout,dst,func_name,param,callback){
             caller_retid = linkid + '/' + caller_retid_count;
             caller_retid_count += 1;
 
-            route_call(caller_retid,timeout,iden,dst,func_name,param,callback);
+            route_call(caller_retid,timeout,idendesc,dst,func_name,param,callback);
         };
 
         that.register_call = function(path,func_name,func){
@@ -197,10 +201,19 @@ var imc = new function(){
         imc.Proxy.instance = that;
     };
 
+    this.Auth = function(){
+        var that = this;
+
+        that.get_iden = function(idendesc){
+            return JSON.parse(JSON.parse(idendesc)[0]);
+        };
+
+        imc.Auth.instance = that;
+    };
 };
 
-function imc_call(iden,dst,func_name,param,callback){
-    imc.Proxy.instance.call(iden,10000,dst,func_name,param,callback); 
+function imc_call(idendesc,dst,func_name,param,callback){
+    imc.Proxy.instance.call(idendesc,10000,dst,func_name,param,callback); 
 }
 function imc_register_call(path,func_name,func){
     imc.Proxy.instance.register_call(path,func_name,func); 
diff --git a/src/py/backend_server.py b/src/py/backend_server.py
index d64d084..8575396 100644
--- a/src/py/backend_server.py
+++ b/src/py/backend_server.py
@@ -14,8 +14,8 @@ import tornado.httpserver
 import tornado.websocket
 
 import netio
+from tojauth import TOJAuth
 import imc.nonblock
-from imc.auth import Auth
 from imc.proxy import Proxy,Connection,imc_call,imc_call_async,imc_register_call
 
 class BackendWorker(tornado.tcpserver.TCPServer):
@@ -43,7 +43,9 @@ class BackendWorker(tornado.tcpserver.TCPServer):
             def __send_back(stat):
                 netio.send_pack(stream,bytes(json.dumps(stat),'utf-8'))
 
-            linkid = json.loads(data.decode('utf-8'))['linkid']
+            info = json.loads(data.decode('utf-8'))
+            linkclass = info['linkclass']
+            linkid = info['linkid']
 
             conn = Proxy.instance.get_conn(linkid)
             if conn != None:
@@ -52,14 +54,14 @@ class BackendWorker(tornado.tcpserver.TCPServer):
             if linkid not in self._pendconn_linkidmap:
                 __send_back(True)
 
-                conn = netio.SocketConnection(linkid,stream)
+                conn = netio.SocketConnection(linkclass,linkid,stream)
                 Proxy.instance.add_conn(conn)
 
             else:
                 if self._linkid > linkid:
                     __send_back(True)
 
-                    conn = netio.SocketConnection(linkid,stream)
+                    conn = netio.SocketConnection(linkclass,linkid,stream)
                     Proxy.instance.add_conn(conn)
 
                     pends = self._pendconn_linkidmap.pop(linkid)
@@ -74,7 +76,7 @@ class BackendWorker(tornado.tcpserver.TCPServer):
     def add_client(self,linkid,handler):
         self._client_linkidmap[linkid] = {}
 
-        conn = netio.WebSocketConnection(linkid,handler)
+        conn = netio.WebSocketConnection('client',linkid,handler)
         conn.add_close_callback(lambda conn : self.del_client(conn.linkid))
         Proxy.instance.add_conn(conn)
 
@@ -98,21 +100,20 @@ class BackendWorker(tornado.tcpserver.TCPServer):
             def ___recv_info_cb(data):
                 info = json.loads(data.decode('utf-8'))
 
-                Auth()
-                f = open('pubkey.pem','r')
-                Auth.instance.set_verifykey(f.read())
+                pubkey = open('pubkey.pem','r').read()
+                TOJAuth(pubkey)
 
                 self._idendesc = info['idendesc']
-                iden = Auth.instance.get_iden(self._idendesc)
+                iden = TOJAuth.instance.get_iden('backend',self._linkid,self._idendesc)
                 self._linkid = iden['linkid']
-                Proxy(self._linkid,Auth.instance,self._connect_linkid)
+                Proxy('backend',self._linkid,TOJAuth.instance,self._connect_linkid)
 
-                self.center_conn = netio.SocketConnection(info['center_linkid'],stream)
+                self.center_conn = netio.SocketConnection('center',info['center_linkid'],stream)
                 self.center_conn.add_close_callback(lambda conn : __retry())
                 Proxy.instance.add_conn(self.center_conn)
 
                 imc_register_call('','test_dst',self._test_dst)
-                time.sleep(1)
+                time.sleep(0.5)
 
                 #x = int(self._iden['linkid']) - (int(self._iden['linkid']) - 2) % 4
                 #self._test_call(None,str(x))
@@ -133,7 +134,7 @@ class BackendWorker(tornado.tcpserver.TCPServer):
         stream.set_close_callback(__retry)
         stream.connect(self.center_addr,__send_worker_info)
 
-    @imc.nonblock.func
+    @imc.nonblock.caller
     def _connect_linkid(self,linkid,callback):
         def __handle_pend(conn):
             pends = self._pendconn_linkidmap.pop(worker_linkid)
@@ -145,7 +146,7 @@ class BackendWorker(tornado.tcpserver.TCPServer):
                 stat = json.loads(data.decode('utf-8'))
 
                 if stat == True:
-                    conn = netio.SocketConnection(worker_linkid,stream)
+                    conn = netio.SocketConnection(worker_linkclass,worker_linkid,stream)
                     Proxy.instance.add_conn(conn)
                     __handle_pend(conn)
 
@@ -161,6 +162,7 @@ class BackendWorker(tornado.tcpserver.TCPServer):
             
             else:
                 netio.send_pack(stream,bytes(json.dumps({
+                    'linkclass':'backend',
                     'linkid':self._linkid
                 }),'utf-8'))
                 netio.recv_pack(stream,___recv_cb)
@@ -175,6 +177,7 @@ class BackendWorker(tornado.tcpserver.TCPServer):
             callback(None)
 
         else:
+            worker_linkclass = ret['worker_linkclass']
             worker_linkid = ret['worker_linkid']
 
             conn = Proxy.instance.get_conn(worker_linkid)
@@ -191,31 +194,17 @@ class BackendWorker(tornado.tcpserver.TCPServer):
                 stream.set_close_callback(lambda : __handle_pend(None))
                 stream.connect((ret['sock_ip'],ret['sock_port']),__send_info)
         
-    @imc.nonblock.func
+    @imc.nonblock.caller
     def _test_call(self,iden,param):
         print(time.perf_counter())
-        stat,ret = (yield imc_call(self._idendesc,'/backend/' + param + '/','test_dst','Hello'))
+        dst = '/backend/' + param + '/'
+        for i in range(10000):
+            stat,ret = (yield imc_call(self._idendesc,dst,'test_dst','Hello'))
         print(time.perf_counter())
 
-        print(time.perf_counter())
-        stat,ret = (yield imc_call(self._idendesc,'/backend/' + param + '/','test_dst','Hello'))
-        print(time.perf_counter())
-        
-        print(time.perf_counter())
-        stat,ret = (yield imc_call(self._idendesc,'/backend/' + self._linkid + '/','test_dst','Hello'))
-        print(time.perf_counter())
-
-
-        print(time.perf_counter())
-        for i in range(5000):
-            stat,ret = (yield imc_call(self._idendesc,'/backend/' + self._linkid + '/','test_dst','Hello'))
-        print(time.perf_counter())
-
-
-        if stat == True:
-            print(stat,ret)
+        print(stat,ret)
 
-    @imc.nonblock.func
+    @imc.nonblock.caller
     def _test_dst(self,iden,param):
         return param + ' Too'
 
diff --git a/src/py/center_server.py b/src/py/center_server.py
index b5f05f9..4fff693 100644
--- a/src/py/center_server.py
+++ b/src/py/center_server.py
@@ -10,13 +10,14 @@ import tornado.httpserver
 import tornado.web
 
 import netio
+from tojauth import TOJAuth
 import imc.nonblock
-from imc.auth import Auth
 from imc.proxy import Proxy,Connection,imc_call,imc_call_async,imc_register_call
 
 class Worker:
-    def __init__(self,stream,linkid,idendesc,worker_info,center_linkid):
+    def __init__(self,stream,linkclass,linkid,idendesc,worker_info,center_linkid):
         self.stream = stream
+        self.linkclass = linkclass
         self.linkid = linkid
         self.idendesc = idendesc
         self.sock_addr = (worker_info['sock_ip'],worker_info['sock_port'])
@@ -26,7 +27,7 @@ class Worker:
             'center_linkid':center_linkid
         }),'utf-8'))
 
-        conn = netio.SocketConnection(self.linkid,self.stream)
+        conn = netio.SocketConnection(self.linkclass,self.linkid,self.stream)
         conn.add_close_callback(lambda conn : self.close())
         Proxy.instance.add_conn(conn)
 
@@ -37,7 +38,7 @@ class BackendWorker(Worker):
     def __init__(self,stream,linkid,idendesc,worker_info,center_linkid):
         global center_serv
 
-        super().__init__(stream,linkid,idendesc,worker_info,center_linkid)
+        super().__init__(stream,'backend',linkid,idendesc,worker_info,center_linkid)
         self.ws_addr = (worker_info['ws_ip'],worker_info['ws_port'])
 
         center_serv.add_backend_worker(self)
@@ -57,15 +58,13 @@ class CenterServer(tornado.tcpserver.TCPServer):
         self._backend_clientmap = {}
         self._backend_workerlist = []
 
-        Auth()
-        f = open('privkey.pem','r')
-        Auth.instance.set_signkey(f.read())
-        f = open('pubkey.pem','r')
-        Auth.instance.set_verifykey(f.read())
+        pubkey = open('pubkey.pem','r').read()
+        privkey = open('privkey.pem','r').read()
+        TOJAuth(pubkey,privkey)
 
         self._linkid = self._create_linkid()
         self._idendesc = self._create_idendesc('center',self._linkid)
-        Proxy(self._linkid,Auth.instance)
+        Proxy('center',self._linkid,TOJAuth.instance)
 
         imc_register_call('','lookup_linkid',self._lookup_linkid)
         imc_register_call('','add_client',self._add_client)
@@ -125,9 +124,9 @@ class CenterServer(tornado.tcpserver.TCPServer):
         return linkid
 
     def _create_idendesc(self,linkclass,linkid):
-        return Auth.instance.sign_iden({'linkclass':linkclass,'linkid':linkid})
+        return TOJAuth.instance.create_iden(linkclass,linkid)
 
-    @imc.nonblock.func
+    @imc.nonblock.caller
     def _lookup_linkid(self,iden,param):
         linkid = param
 
@@ -135,12 +134,12 @@ class CenterServer(tornado.tcpserver.TCPServer):
             worker = self._worker_linkidmap[linkid]
             if iden['linkclass'] != 'client':
                 sock_ip,sock_port = worker.sock_addr
-                return {'worker_linkid':worker.linkid,'sock_ip':sock_ip,'sock_port':sock_port}
+                return {'worker_linkclass':worker.linkclass,'worker_linkid':worker.linkid,'sock_ip':sock_ip,'sock_port':sock_port}
 
         except KeyError:
             return None
         
-    @imc.nonblock.func
+    @imc.nonblock.caller
     def _add_client(self,iden,param):
         backend_linkid = iden['linkid']
         client_linkid = param['client_linkid']
@@ -151,9 +150,9 @@ class CenterServer(tornado.tcpserver.TCPServer):
 
         print(client_linkid);
 
-        imc_call_async(self._idendesc,'/client/' + client_linkid + '/','test_call','Hello Client',lambda result:print(result))
+        #imc_call_async(self._idendesc,'/client/' + client_linkid + '/','test_call','Hello Client',lambda result:print(result))
 
-    @imc.nonblock.func
+    @imc.nonblock.caller
     def _del_client(self,iden,param):
         backend_linkid = iden['linkid']
         client_linkid = param
@@ -164,7 +163,8 @@ class CenterServer(tornado.tcpserver.TCPServer):
 
 
 
-    @imc.nonblock.func
+    
+    @imc.nonblock.caller
     def _test_dst(self,iden,param):
         linkidlist = []
         clientmaps = self._backend_clientmap.values()
@@ -175,7 +175,7 @@ class CenterServer(tornado.tcpserver.TCPServer):
 
         return linkidlist
 
-    @imc.nonblock.func
+    @imc.nonblock.caller
     def _test_dstb(self,iden,param):
         return param + ' World'
 
diff --git a/src/py/imc/auth.py b/src/py/imc/auth.py
index 206812a..6b8224c 100644
--- a/src/py/imc/auth.py
+++ b/src/py/imc/auth.py
@@ -10,8 +10,6 @@ class Auth:
     def __init__(self):
         self._cache_hashmap = {}
 
-        Auth.instance = self
-
     def set_signkey(self,key):
         self._signer = PKCS1_v1_5.new(RSA.importKey(key))
 
diff --git a/src/py/imc/nonblock.py b/src/py/imc/nonblock.py
index 267bbaa..dab3b00 100644
--- a/src/py/imc/nonblock.py
+++ b/src/py/imc/nonblock.py
@@ -3,7 +3,7 @@ import types
 gen_current_id = None
 gen_waitmap = {}
 
-def call(f):
+def callee(f):
     def wrapper(*args,**kwargs):
         global gen_current_id
         global gen_waitmap
@@ -13,7 +13,7 @@ def call(f):
 
     return wrapper
 
-def func(f):
+def caller(f):
     def wrapper(*args,**kwargs):
         global gen_current_id
         global gen_waitmap
@@ -22,6 +22,7 @@ def func(f):
             gen = f(*args,**kwargs)
             if isinstance(gen,types.GeneratorType):
                 gen_current_id = str(id(gen))
+
                 gen_waitmap[gen_current_id] = gen
 
                 try:
@@ -37,7 +38,7 @@ def func(f):
             else:
                 return (True,gen)
 
-        except Exception:
+        except Exception as err:
             return (True,'Einternal')
 
     return wrapper
@@ -51,11 +52,11 @@ def retcall(genid,value):
         gen = gen_waitmap[gen_current_id]
         gen.send(value)
     
-        return (False,gen_current_id)
+        return (False,genid)
 
     except StopIteration as err:
-        del gen_waitmap[gen_current_id]
+        del gen_waitmap[genid]
         return (True,err.value)
 
-    except Exception:
+    except KeyError as err:
         return (True,'Einternal')
diff --git a/src/py/imc/proxy.py b/src/py/imc/proxy.py
index 2e7647a..dfbf942 100755
--- a/src/py/imc/proxy.py
+++ b/src/py/imc/proxy.py
@@ -8,7 +8,8 @@ from imc import nonblock
 from imc import auth
 
 class Connection:
-    def __init__(self,linkid):
+    def __init__(self,linkclass,linkid):
+        self.linkclass = linkclass
         self.linkid = linkid
         self.link_linkidmap = {}
         self._close_callback = []
@@ -27,8 +28,9 @@ class Connection:
             callback(self)
 
 class Proxy:
-    def __init__(self,linkid,auth,connect_linkid = None):
+    def __init__(self,linkclass,linkid,auth,connect_linkid = None):
         self._ioloop = tornado.ioloop.IOLoop.instance()
+        self._linkclass = linkclass
         self._linkid = linkid
         self._auth = auth
         self._connect_linkid = connect_linkid
@@ -100,7 +102,6 @@ class Proxy:
             callback(conn,*args)
 
         if linkid in self._conn_linkidmap:
-
             callback(self._conn_linkidmap[linkid],*args)
 
         else:
@@ -111,9 +112,9 @@ class Proxy:
 
     def call(self,caller_genid,timeout,idendesc,dst,func_name,param):
         caller_retid = ''.join([self._linkid,'/',caller_genid])
-        self._route_call(caller_retid,timeout,idendesc,dst,func_name,param)
+        self._route_call(self._linkclass,self._linkid,caller_retid,timeout,idendesc,dst,func_name,param)
 
-    def _route_call(self,caller_retid,timeout,idendesc,dst,func_name,param):
+    def _route_call(self,conn_linkclass,conn_linkid,caller_retid,timeout,idendesc,dst,func_name,param):
         def __add_wait_caller(conn_linkid,timeout,fail_callback):
             self._conn_retidmap[conn_linkid][caller_retid] = {
                 'caller_linkid':caller_linkid,
@@ -147,7 +148,7 @@ class Proxy:
             else:
                 self.request_conn(caller_linkid,__send_ret,caller_linkid,caller_retid,result)
 
-        iden = self._auth.get_iden(idendesc)
+        iden = self._auth.get_iden(conn_linkclass,conn_linkid,idendesc)
         if iden == None:
             __direct_ret((False,'Eilliden'))
 
@@ -260,7 +261,7 @@ class Proxy:
         func_name = msg['func_name']
         param = msg['param']
 
-        self._route_call(caller_retid,timeout,idendesc,dst,func_name,param)
+        self._route_call(conn.linkclass,conn.linkid,caller_retid,timeout,idendesc,dst,func_name,param)
 
     def _send_msg_ret(self,conn,caller_linkid,caller_retid,result):
         stat,data = result
@@ -290,12 +291,12 @@ class Proxy:
         else:
             self._ret_call(caller_linkid,caller_retid,result)
 
-@nonblock.call
+@nonblock.callee
 def imc_call(idendesc,dst,func_name,param,_genid):
     Proxy.instance.call(_genid,10000,idendesc,dst,func_name,param)
 
 def imc_call_async(idendesc,dst,func_name,param,callback = None):
-    @nonblock.func
+    @nonblock.caller
     def func():
         result = (yield imc_call(idendesc,dst,func_name,param))
         if callback != None:
diff --git a/src/py/netio.py b/src/py/netio.py
index 227ec3d..c6aacbc 100644
--- a/src/py/netio.py
+++ b/src/py/netio.py
@@ -16,8 +16,8 @@ def recv_pack(stream,callback):
     stream.read_bytes(8,_recv_size)
 
 class SocketConnection(Connection):
-    def __init__(self,linkid,stream):
-        super().__init__(linkid)
+    def __init__(self,linkclass,linkid,stream):
+        super().__init__(linkclass,linkid)
 
         self.ioloop = tornado.ioloop.IOLoop.current()
         self.stream = stream
@@ -67,8 +67,8 @@ class SocketConnection(Connection):
         self._ping_delay = 0
 
 class WebSocketConnection(Connection):
-    def __init__(self,linkid,handler):
-        super().__init__(linkid)
+    def __init__(self,linkclass,linkid,handler):
+        super().__init__(linkclass,linkid)
 
         self.ioloop = tornado.ioloop.IOLoop.current()
         self.handler = handler
diff --git a/src/py/tojauth.py b/src/py/tojauth.py
new file mode 100644
index 0000000..d5c13c3
--- /dev/null
+++ b/src/py/tojauth.py
@@ -0,0 +1,28 @@
+from imc.auth import Auth
+
+class TOJAuth(Auth):
+    def __init__(self,pubkey,privkey = None):
+        super().__init__()
+
+        self.set_verifykey(pubkey)
+        if privkey != None:
+            self.set_signkey(privkey)
+
+        TOJAuth.instance = self
+
+    def create_iden(self,linkclass,linkid):
+        iden = {
+            'linkclass':linkclass,
+            'linkid':linkid
+        }
+        return self.sign_iden(iden)
+
+    def get_iden(self,conn_linkclass,conn_linkid,idendesc):
+        iden = super().get_iden(idendesc) 
+        if iden == None:
+            return None
+
+        if conn_linkclass == 'client' and conn_linkid != iden['linkid']:
+            return None
+
+        return iden
diff --git a/src/test/wstest.css b/src/test/wstest.css
new file mode 100644
index 0000000..39b9fad
--- /dev/null
+++ b/src/test/wstest.css
@@ -0,0 +1,81 @@
+body{
+    overflow-y:scroll;
+}
+
+div.head ul.right_navbar{
+    margin-right:0px;
+    position:absolute;
+    top:0px;
+    left:auto;
+    right:0px;
+}
+div.head ul.right_navbar div.notice{
+    height:100%;
+    padding:5px 0px 5px 0px;
+}
+div.head ul.right_navbar div.notice > div.box{
+    width:30px;
+    padding:5px 0px 5px 0px;
+    background-color:#656765;
+    font-size:16px;
+    font-weight:bold;
+    text-align:center;
+    cursor:pointer;
+}
+div.head ul.right_navbar div:hover.notice > div.box{
+    color:white;
+}
+div.head ul.right_navbar div.notice_h > div.box{
+    background:#86C166;
+    color:white;
+}
+div.head ul.right_navbar div.menu{
+    width:80px;
+    padding:10px 0px 10px 0px;
+    text-align:center;
+    cursor:pointer;
+}
+
+div.panel_container{
+    width:0px;
+    position:absolute;
+    top:40px;
+    right:0px;
+    border-left:#DDD 1px solid;
+    overflow:hidden;
+
+    transition:width 200ms;
+}
+div.panel_container_a{
+    width:240px; 
+}
+div.panel_container > div.menu_container{
+    width:240px;
+    display:none;
+}
+div.panel_container > div.menu_container > ul.menu > li > a{
+    height:60px; 
+    font-weight:bold;
+    line-height:60px;
+}
+
+div.panel_container > div.notice_container{
+    width:240px;
+    display:none;
+}
+div.panel_container > div.notice_container > ul.notice > li > a > div{
+    height:60px; 
+    color:black;
+}
+
+div.modal{
+    width:978px;
+    margin-left:-489px;
+}
+
+div.panel_box{
+    width:322px;
+    position:absolute;
+    top:0px;
+    right:0px;
+}
diff --git a/src/test/wstest.html b/src/test/wstest.html
index f3ab51e..a17a0dc 100644
--- a/src/test/wstest.html
+++ b/src/test/wstest.html
@@ -1,11 +1,14 @@
 <!DOCTYPE HTML>
 <html>
 <head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
 
+<link href="/wstest.css" rel="stylesheet">
+
 <script src="/jquery-2.0.0.min.js"></script>
 <script src="/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="/imc.js"></script>
@@ -15,23 +18,77 @@
 
 $(document).ready(function(){
     conn_backend();
+
+    index.init();
 });
 
 </script>
 </head>
 <body>
 
-<div class="container" style="padding:32px 0px 32px 0px;">
+<div id="index_head" class="navbar navbar-inverse navbar-fixed-top head">
+    <div class="navbar-inner"> 
+        <div class="container">
+            <a class="brand span2" href="#">Taiwan OJ</a>
+            <ul class="nav bar">
+                <li class="active"><a href="#">Profile</a></li>
+                <li><a href="#">Edit Profile</a></li>
+            </ul>
+            <p class="navbar-text span3 title">Taiwan Online Judge Test Page</p>
+        </div>
+
+        <ul id="index_head_rightnavbar" class="nav bar right_navbar">
+            <li><a id="index_head_nickname" href="#">Elisha</a></li>
+            <li><div id="index_head_notice" class="notice notice_h"><div class="box">2</div></div></li>
+            <li><div id="index_head_menu" class="menu"><i class="icon-chevron-left icon-white"></i></div></li>
+        </ul>
+    </div>
+</div>
+
+<div id="index_panel" class="panel_container">
+    <div class="menu_container">
+        <ul id="index_panel_menu" class="nav nav-list menu">
+            <li><a href="#"><i class="icon-home"></i> Home</a></li>
+            <li class="active"><a href="#"><i class="icon-exclamation-sign"></i> Test</a></li>
+            <li><a href="#"><i class="icon-th-large"></i> Square</a></li>
+            <ul class="nav nav-list sq_list">
+                <li class="nav-header">Coming</li>
+                <li><a href="#">Test1</a></li>
+                <li><a href="#">Test2</a></li>
+                <li class="nav-header">Running</li>
+                <li><a href="#">Normal Test</a></li>
+                <li class="nav-header">Ended</li>
+                <li><a href="#">End Test</a></li>
+            </ul>
+
+            <li style="margin-top:30px;"><a href="#"><i class="icon-circle-arrow-left"></i> Logout</a></li>
+        </ul>
+    </div>
+
+    <div class="notice_container">
+        <ul id="index_panel_menu" class="nav nav-list notice">
+            <li><a href="#"><div><h5>Problem:573</h5>Wrong Answer</div></a></li>
+            <li><a href="#"><div><h5>Problem:573</h5>Runtime Error</div></a></li>
+        </ul>
+    </div>
+</div>
+
+<div class="container" style="padding:60px 0px 32px 0px;">
     <div class="row">
         <div class="span2 slide">
-            <ul class="nav nav-list">
-                <li class="nav-header">Header</li>
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#">Library</li>
-            </ul>
+            
         </div>
         <div class="span10 main">
-            sdfsdf
+            <button class="btn btn-primary" onclick="$('div.test_modal').modal('show');">Test Dialog</button>
+            <div class="modal hide fade test_modal" tabindex="-1" role="dialog" aria-hidden="true">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                    <h3>Test Dialog</h3>
+                </div>
+                <div class="modal-body">
+                    Hello, my name is Elisha.
+                </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/test/wstest.js b/src/test/wstest.js
index c0a1545..66d3012 100644
--- a/src/test/wstest.js
+++ b/src/test/wstest.js
@@ -1,3 +1,5 @@
+'use strict'
+
 var count = 0;
 var last = 0;
 var data = new ArrayBuffer(1024);
@@ -5,12 +7,14 @@ var data = new ArrayBuffer(1024);
 var linkid = null;
 var idendesc = null;
 
-function test_call(iden,param,callback){
-    callback('Hello Too');
+function test_display(iden,param,callback){
+    console.log(param);
+
+    callback(null);
 
-    imc_call(idendesc,'/center/1/','test_dst','',function(result){
+    /*imc_call(idendesc,'/center/1/','test_dst','',function(result){
         console.log(result); 
-    });
+    });*/
 }
 
 var WebSocketConnection = function(linkid,ws){
@@ -72,7 +76,7 @@ function conn_backend(ip,port){
                 });
                 imc.Proxy.instance.add_conn(conn);
 
-                imc_register_call('','test_call',test_call);
+                imc_register_call('','test_display',test_display);
             };
         }else{
             setTimeout(conn_backend,5000);
@@ -85,3 +89,89 @@ function perf(){
     last = count;
     setTimeout(perf,1000);
 }
+
+var index = new function(){
+    this.init = function(){
+        var j_navbar = $('#index_head ul.right_navbar');
+        var j_navbar_menu = $('#index_head_menu');
+        var j_navbar_notice = $('#index_head_notice');
+        var j_panel = $('#index_panel');
+        var j_panel_menu = $('#index_panel_menu');
+        var j_panel_notice = $('#index_panel_notice');
+
+        var _in_area = function(target,id){
+            return target.id == id || $(target).parents('#' + id).length > 0;
+        };
+        var _show_panel = function(){
+            var j_i;
+
+            if(!j_panel.hasClass('panel_container_a')){
+                j_i = j_navbar_menu.find('i');
+                j_i.removeClass('icon-chevron-left');
+                j_i.addClass('icon-chevron-down');
+
+                j_panel.addClass('panel_container_a');
+            }
+        };
+        var _hide_panel = function(){
+            var j_i;
+
+            if(j_panel.hasClass('panel_container_a')){
+                j_i = j_navbar_menu.find('i');
+                j_i.removeClass('icon-chevron-down');
+                j_i.addClass('icon-chevron-left');
+
+                j_panel.removeClass('panel_container_a');
+            }
+        };
+        var _show_menu = function(){
+            _hide_notice();
+            j_panel.find('div.menu_container').show();
+            _show_panel();
+        };
+        var _hide_menu = function(){
+            j_panel.find('div.menu_container').hide();
+        };
+        var _show_notice = function(){
+            _hide_menu();
+            j_panel.find('div.notice_container').show();
+            _show_panel();
+        };
+        var _hide_notice = function(){
+            j_panel.find('div.notice_container').hide();
+        };
+        
+        $(window).on('resize',function(e){
+            j_panel.css('min-height',($(window).height() - 40 + 'px'));
+        });
+        j_panel.css('min-height',($(window).height() - 40 + 'px'));
+
+        $(window).on('mouseover',function(e){
+            var target = e.target;
+
+            console.log(e.target);
+            if(target == null ||
+                _in_area(target,'index_panel') ||
+                (target.parentNode.id == 'index_head' && $(target).hasClass('navbar-inner'))){
+                return;
+            }
+
+            if(_in_area(target,'index_head_menu')){
+                if(!j_panel.hasClass('panel_container_a')){
+                    _show_menu();
+                }
+            }else{
+                if(!_in_area(target,'index_head_rightnavbar')){
+                    _hide_panel();
+                }
+            }   
+        });
+
+        j_navbar_menu.on('click',function(e){
+            _show_menu();
+        });
+        j_navbar_notice.on('click',function(e){
+            _show_notice();
+        });
+    };
+};