Send and read mail

14 files changed, 425 insertions, 96 deletions

diff --git a/src/css/color.less b/src/css/color.less
index a5a2827..5752589 100644
--- a/src/css/color.less
+++ b/src/css/color.less
@@ -5,6 +5,7 @@
 @green:#1B813E;
 @orange:#F75C2F;
 
+@SmallFontSize:12px;
 @NormalFontSize:16px;
 
 @SmallPad:6px;
diff --git a/src/css/index.less b/src/css/index.less
index 202a348..d85bcce 100644
--- a/src/css/index.less
+++ b/src/css/index.less
@@ -114,7 +114,7 @@ body{
     }
 }
 #index_alert{
-    width:370px;
+    width:230px;
     position:fixed;
     bottom:@MediumPad;
     right:@MediumPad;
diff --git a/src/css/mail.less b/src/css/mail.less
index 433cf2c..dbfe3f2 100644
--- a/src/css/mail.less
+++ b/src/css/mail.less
@@ -2,7 +2,11 @@
     div.newmail{
         div.content{
             width:100%;
-            height:256px;
+        }
+    }
+    div.readmail{
+        div.content{
+            width:100%;
         }
     }
     table.maillist{
diff --git a/src/css/style.less b/src/css/style.less
index b38c941..97e519e 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -1,6 +1,14 @@
+@import "mixin.less";
+@import "color.less";
 @import "index.less";
 
 div.medium_modal{
     width:970px;
     margin-left:-485px;
 }
+.time{
+    font-size:@SmallFontSize;
+}
+.uneditable-input{
+    cursor:default;
+}
diff --git a/src/html/index.html b/src/html/index.html
index f476266..16b3880 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -61,7 +61,7 @@ $(document).ready(function(){
     <div class="navbar-inner">
         <div class="container">
             <p class="title offset1 span2 navbar-text"></p>
-            <ul class="nav"></ul>
+            <ul class="nav tabnav"></ul>
         </div>
         <div style="position:absolute; top:0px; right:0px;">
             <ul class="nav">
@@ -83,7 +83,7 @@ $(document).ready(function(){
         <ul class="nav nav-list">
             <li><a href="/toj/home/">首頁</a></li>
             <li class="profile" style="display:none;"><a href="">個人</a></li>
-            <li class="mail" style="display:none;"><a href="/toj/mail/">信箱</a></li>
+            <li class="mail" style="display:none;"><a href="/toj/mail/inbox/">信箱</a></li>
             <li><a href="#">狀態</a></li>
             <li><a href="#">關於</a></li>
         </ul>
@@ -121,7 +121,7 @@ $(document).ready(function(){
     </div>
 </div>
 
-<div id="index_alert"></div>
+<div id="index_alert" style="z-index:2000;"></div>
 <div id="index_page" class="container"></div>
 </body>
 </html>
diff --git a/src/html/mail.html b/src/html/mail.html
index 41250b7..fed43f8 100644
--- a/src/html/mail.html
+++ b/src/html/mail.html
@@ -1,4 +1,5 @@
 <link href="/toj/css/mail.css" rel="stylesheet">
+
 <div class="modal hide fade medium_modal newmail">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -15,7 +16,7 @@
                     <span class="add-on">標題</span>
                     <input class="title" type="text">
                 </div>
-                <div class="content"></div>
+                <div class="content" exheight=true exratio=38%></div>
             </div>
         </div>
     </div>
@@ -24,50 +25,40 @@
         <button class="btn cancel">取消</button>
     </div>
 </div>
+
 <div class="modal hide fade medium_modal readmail">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h3>範例郵件</h3>
+        <h3 class="title">範例郵件</h3>
     </div>
     <div class="modal-body container-fluid">
         <div class="row-fluid">
             <div class="span13"> 
                 <div class="input-prepend">
-                    <span class="add-on">收件人</span>
-                    <input class="uneditable-input from_username" type="text" value="Alice">
+                    <span class="add-on">寄件人</span>
+                    <span class="uneditable-input from_username" type="text"></span>
                 </div>
+                <div class="content" exheight=true exratio=38%></div>
             </div>
         </div>
     </div>
     <div class="modal-footer">
-        <button class="btn cancel">刪除</button>
+        <button class="btn reply">回信</button>
     </div>
 </div>
 
 <div class="row">
-    <div class="span2 offset1 oper">
-        <ul class="nav nav-tabs nav-stacked">
-            <li class="newmail"><a href="">寫新郵件</a></li>
-            <li><a href="">寄件備份</a></li>
-        </ul>
-    </div>
-    <div class="span7 mail">
+    <div class="offset3 span7 mail">
         <table class="table table-hover maillist">
             <thead>
                 <tr>
                     <th class="span2">發信者</th>
                     <th class="span3">標題</th>
-                    <th class="span2">時間</th>
+                    <th class="span2 time">時間</th>
                 </tr>
             </thead>
             <tbody></tbody>
         </table>
-        <div class="pagination">
-            <ul>
-                <li><a href="#">←</a></li>
-                <li class="disabled"><a href="#">1</a></li>
-                <li><a href="#">→</a></li>
-            </ul>
-        </div>
+        <div class="pagination"></div>
     </div>
 </div>
diff --git a/src/html/user_main.html b/src/html/user_main.html
index 0b11358..ae8b25d 100644
--- a/src/html/user_main.html
+++ b/src/html/user_main.html
@@ -1,12 +1,17 @@
 <link href="/toj/css/user_main.css" rel="stylesheet">
-
-<div class="row">
-    <div class="offset3 span3">
-        <img class="img-polaroid avatar" src="http://i.imgur.com/G3Uq50h.png"></img>
+<div style="width:100%; max-height:900px; overflow-y:hidden; position:absolute; top:0px; left:0px; z-index:0;">
+    <img src="http://i.imgur.com/Btrg9wz.jpg"></img>
+</div>
+<div class="row" style="height:768px; margin-top:560px; position:relative; z-index:0;">
+    <div class="offset4 span2">
+        <img class="img-polaroid avatar" src="http://i.imgur.com/R9lfWcm.jpg"></img>
     </div>
-    <div class="span7">
+    <div class="span7" style="color:white;">
         <h3 class="name"></h3>
         <h3>關於我</h3>
         <p class="aboutme"></p>
     </div>
 </div>
+
+
+
diff --git a/src/js/com.js b/src/js/com.js
index f436b3f..61af8ab 100644
--- a/src/js/com.js
+++ b/src/js/com.js
@@ -6,7 +6,6 @@ var WebSocketConnection = function(link,ws){
     that.__super__(link);
 
     that.send_msg = function(data){
-        console.log(ws.readyState);
         ws.send(new Blob([data],{'type':'application/octet-stream'}))
     };
     that.start_recv = function(recv_callback){
@@ -63,7 +62,6 @@ var vus = new function(){
         that.child_del = function(node){
             node.parent = null;
             delete that.child[node.name];
-
         };
         that.lookup = function(url,close_flag){
             var i;
@@ -409,14 +407,14 @@ return true;
         urlchg_reen = false;
     };
 
-    that.loadpage = function(menu,htmlurl){
+    that.loadpage = function(htmlurl){
         var j_index_page = $('#index_page');
         var defer = $.Deferred();
 
-        index.set_menu(menu);
-        index.set_title('');
         j_index_page.empty();
         j_index_page.load(htmlurl,function(data,stat,xhr){
+            that.exheight();
+
             defer.resolve();
         });
 
@@ -427,17 +425,26 @@ return true;
         var es = $('[exheight="true"]');
         var j_e;
         var winheight = $(window).innerHeight();
+        var exratio;
         var extop;
 
         for(i = 0;i < es.length;i++){
             j_e = $(es[i]);
 
-            if((extop = j_e.attr('extop')) == undefined){
-                extop = j_e.css('top');
+            if((exratio = j_e.attr('exratio')) != undefined){
+                exratio = parseInt(exratio.match('(.*)%')[1]) / 100;
+                j_e.height(winheight * exratio);
+            }else{
+                if((extop = j_e.attr('extop')) == undefined){
+                    extop = j_e.css('top');
+                }
+
+                extop = extop.match('(.*)px')[1];
+                j_e.height(winheight - extop);
             }
-            extop = extop.match('(.*)px')[1];
-            j_e.height(winheight - extop);
         }
+
+        $('.modal-body').css('max-height',(winheight * 0.5) + 'px');
     };
     that.get_cookie = function(){
         var ret;
@@ -458,13 +465,51 @@ return true;
 
         return ret;
     };
-    that.create_codebox = function(j_div,mode){
-        var codebox = CodeMirror(j_div[0],{
+    that.get_timestring = function(data,sec){
+        var date;
+        var ret;
+        var hr;
+        var min;
+        var sec;
+
+        function fix(num){
+            if(num < 10){
+                return '0' + num;
+            }
+            return num;
+        }
+
+        if(typeof(data) == 'string'){
+            date = new Date(data);
+        }else{
+            date = data;
+        }
+
+        ret =  date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate() + ' ' + 
+            fix(date.getHours()) + ':' + fix(date.getMinutes());
+
+        if(sec == true){
+            ret += ':' + fix(date.getSeconds());
+        }
+
+        return ret;
+    };
+    that.create_codebox = function(j_div,mode,readonly){
+        var codebox;
+        
+        if(readonly != true){
+            readonly = false;
+        }
+
+        j_div.empty();
+
+        codebox = CodeMirror(j_div[0],{
             'mode':mode,
             'theme':'lesser-dark',
             'lineNumbers':true,
             'matchBrackets':true,
-            'indentUnit':4
+            'indentUnit':4,
+            'readOnly':readonly
         });
 
         codebox.getWrapperElement().style.width = '100%';
@@ -474,6 +519,73 @@ return true;
 
         return codebox;
     };
+    that.create_pagination = function(j_div,start,end,curr,step){
+        var i;
+        var j_ul;
+        var j_li;
+        var off;
+        var offs = new Array;
+
+        start = Math.floor(start / step);
+        end = Math.floor((end - 1)/ step);
+        curr = Math.floor(curr / step);
+
+        j_div.empty();
+
+        j_div.addClass('pagination');
+        j_div.append('<ul></ul>');
+        j_ul = j_div.find('ul')
+
+        j_li = $('<li class="prev"><a href="">←</a></li>');
+        if(curr == 0){
+            j_li.find('a').on('click',function(e){
+                return false
+            });
+
+            j_li.addClass('disabled');
+            off = curr * step;
+        }else{
+            off = (curr - 1) * step;
+        }
+        offs.push(off);
+        j_li.attr('off',off);
+        j_ul.append(j_li);
+        
+        for(i = start;i <= end;i++){
+            j_li = $('<li><a href=""></a></li>');
+            off = i * step;
+            offs.push(off);
+            j_li.attr('off',off);
+            j_li.find('a').text(i + 1);
+
+            if(i == curr){
+                j_li.find('a').on('click',function(e){
+                    return false;
+                });
+
+                j_li.addClass('active');
+            }
+
+            j_ul.append(j_li);
+        }
+
+        j_li = $('<li class="next"><a href="">→</a></li>');
+        if(curr == end){
+            j_li.find('a').on('click',function(e){
+                return false;
+            });
+            
+            j_li.addClass('disabled');
+            off = curr * step; 
+        }else{
+            off = (curr + 1) * step;
+        }
+        offs.push(off);
+        j_li.attr('off',off);
+        j_ul.append(j_li);
+
+        return offs;
+    };
     that.is_callerr = function(result){
         if(result.stat == false || typeof(result.data) == 'string'){
             return true;
@@ -532,7 +644,7 @@ return true;
                     }
                 };
             }else{
-                setTimeout(conn_backend,5000);
+                setTimeout(that.conn_backend,5000);
             }
         });
     }
diff --git a/src/js/home.js b/src/js/home.js
index 1db88dd..dc13e34 100644
--- a/src/js/home.js
+++ b/src/js/home.js
@@ -6,9 +6,10 @@ var home = new function(){
 
         home_node.url_chg = function(direct,url_upart,url_dpart,param){
             if(direct == 'in'){
-                com.loadpage('首頁','/toj/html/home.html').done(function(){
-                    index.set_title('Taiwan Online Judge');
-                });
+                index.set_menu('首頁');
+                index.set_title('Taiwan Online Judge');
+                index.clear_tabnav();
+                com.loadpage('/toj/html/home.html');
             }
         };
         com.vus_root.child_set(home_node);
diff --git a/src/js/index.js b/src/js/index.js
index ce0db25..9f1ba44 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -109,10 +109,29 @@ var index = new function(){
     that.set_menu = function(tag){
         j_menutag.find('div.menu').text(tag); 
     };
+    that.add_tabnav = function(text,link){
+        var j_li = $('<li><a></a></li>');
+        var j_a = j_li.find('a');
+        
+        j_a.text(text);
+        j_a.attr('href',link);
+
+        j_header.find('ul.tabnav').append(j_li);        
+
+        j_li.active = function(){
+            j_header.find('ul.tabnav > li.active').removeClass('active');
+            j_li.addClass('active');
+        };
+
+        return j_li;
+    };
+    that.clear_tabnav = function(){
+        j_header.find('ul.tabnav').empty();        
+    };
     that.add_alert = function(type,title,content,autofade){
         var j_alert;
 
-        j_alert = $('<div class="alert fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><strong></strong>&nbsp&nbsp<span></span></div>');
+        j_alert = $('<div class="alert fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><strong></strong>&nbsp<span></span></div>');
 
         j_alert.addClass(type);
         j_alert.find('strong').text(title);
diff --git a/src/js/mail.js b/src/js/mail.js
index 867b60b..96fed56 100644
--- a/src/js/mail.js
+++ b/src/js/mail.js
@@ -2,46 +2,104 @@ var mail = new function(){
     var that = this;
     var j_index_page;
     var j_maillist;
+    var j_newmail;
+    var j_readmail;
+    var j_tabnav_inbox;
+    var j_tabnav_backup;
 
-    var mailitem_set = function(j_item,from,title,time,unread){
-        j_item.find('td.from').text(from);
+    var readmail_mailid = null;
+    var maillist_type = null;
+    var maillist_off = null;
+
+    function mailitem_set(j_item,mailid,from_username,title,time,unread){
+        j_item.find('td.from_username').text(from_username);
         j_item.find('td.title').text(title);
         j_item.find('td.time').text(time);
 
         if(unread == true){
             j_item.addClass('warning');
+        }else{
+            j_item.removeClass('warning');
         }
+        
+        j_item.off('click').on('click',function(e){
+            readmail_mailid = mailid;
+            j_readmail.modal('show'); 
+            return false;
+        });
     };
-    var mailitem_create = function(from,title,time,unread){
-        var j_item = $('<tr class="item"><td class="from"></td><td class="title"></td><td class="time"></td></tr>');
+    function mailitem_create(mailid,from_username,title,time,unread){
+        var j_item = $('<tr class="item"><td class="from_username"></td><td class="title"></td><td class="time"></td></tr>');
 
-        mailitem_set(j_item,from,title,time,unread);
+        mailitem_set(j_item,mailid,from_username,title,time,unread);
 
         return j_item;
     };
+    function update_maillist(){
+        com.call_backend('core/mail/','list_mail',function(result){
+            var data;
+            var mail;
+            var items;
+            var j_item;
+            var i;
+
+            if(com.is_callerr(result)){
+                //TODO GE
+            }else{
+                data = result.data; 
+
+                items = j_maillist.find('tr.item');
+                for(i = 0;i < Math.min(items.length,data.length);i++){
+                    mail = data[i];
+
+                    mailitem_set($(items[i]),mail.mailid,mail.from_username,mail.title,com.get_timestring(mail.send_time),mail.unread);
+                }
+                for(;i < data.length;i++){
+                    mail = data[i];
+
+                    j_item = mailitem_create(mail.mailid,mail.from_username,mail.title,com.get_timestring(mail.send_time),mail.unread);
+                    j_maillist.append(j_item);
+                }
+                for(;i < items.length;i++){
+                    $(items[i]).remove();
+                }
+            }
+        },maillist_type,maillist_off,maillist_off + 20);
+    };
 
     that.ready = function(){
         var mail_node = new vus.node('mail');
+        var inbox_node = new vus.node('inbox');
+        var backup_node = new vus.node('backup');
 
         j_index_page = $('#index_page');
-        
+
         mail_node.url_chg = function(direct,url_upart,url_dpart,param){
             if(direct == 'in'){
-                com.loadpage('信箱','/toj/html/mail.html').done(function(){
-                    var j_oper;
-                    var j_newmail;
+                index.set_menu('信箱');
+                index.set_title('');
+
+                index.clear_tabnav();
+                
+                mail_node.child_delayset('inbox');
+                mail_node.child_delayset('backup');
+
+                com.loadpage('/toj/html/mail.html').done(function(){
                     var newmail_content;
+                    var readmail_content;
 
                     j_maillist = j_index_page.find('table.maillist > tbody');
+                    j_newmail = j_index_page.find('div.newmail');
+                    j_readmail = j_index_page.find('div.readmail');
+                    newmail_content = com.create_codebox(j_newmail.find('div.content'),'text/html');
+                    readmail_content = com.create_codebox(j_readmail.find('div.content'),'text/html',true);
 
-                    j_oper = j_index_page.find('div.oper');
-                    j_oper.find('li.newmail > a').on('click',function(e){
+                    index.add_tabnav('寫新郵件','').on('click',function(e){
                         j_newmail.modal('show');
                         return false;
                     });
-
-                    j_newmail = j_index_page.find('div.newmail');
-                    newmail_content = com.create_codebox(j_newmail.find('div.content'),'text/html');
+                    j_tabnav_inbox = index.add_tabnav('收件匣','/toj/mail/inbox/');
+                    j_tabnav_backup = index.add_tabnav('寄件備份','/toj/mail/backup/');
 
                     j_newmail.on('shown',function(e){
                         newmail_content.refresh();
@@ -49,6 +107,8 @@ var mail = new function(){
                     j_newmail.on('hide',function(e){
                         j_newmail.find('input').val('');
                         newmail_content.setValue('');
+
+                        update_maillist();
                     });
                     j_newmail.find('button.submit').on('click',function(e){
                         var to_username = j_newmail.find('input.to_username').val();
@@ -59,8 +119,6 @@ var mail = new function(){
                             var data = result.data;
                             var errmsg;
 
-                            j_newmail.modal('hide');
-
                             if(com.is_callerr(result)){
                                 if(data == 'Etitle_too_short'){
                                     errmsg = '郵件標題過短';
@@ -79,6 +137,7 @@ var mail = new function(){
                                 index.add_alert('alert-error','失敗',errmsg,true);
                             }else{
                                 index.add_alert('alert-success','成功','信件已寄出',true);
+                                j_newmail.modal('hide');
                             }
                         },to_username,title,content);
                     });
@@ -86,27 +145,121 @@ var mail = new function(){
                         j_newmail.modal('hide');
                     });
 
-                    com.call_backend('core/mail/','get_mail_count',function(result){
-                        if(com.is_callerr(result)){
-                            //TODO GE
-                        }else{
-                            
-                        }
+                    j_readmail.on('show',function(e){
+                        com.call_backend('core/mail/','recv_mail',function(result){
+                            var data;
+
+                            if(com.is_callerr(result)){
+                                //TODO GE
+                            }else{
+                                data = result.data;
+
+                                j_readmail.find('h3.title').text(data.title);
+                                j_readmail.find('span.from_username').text(data.from_username);
+                                readmail_content.setValue(data.content);
+                            }
+                        },readmail_mailid); 
                     });
-                    com.call_backend('core/mail/','list_mail',function(result){
-                        console.log(result);
-                    },1);
+                    j_readmail.on('shown',function(e){
+                        readmail_content.refresh();
+                    });
+                    j_readmail.on('hide',function(e){
+                        j_readmail.find('h3.title').text('');
+                        j_readmail.find('span.from_username').text('');
+                        readmail_content.setValue('');
+                        
+                        update_maillist();
+                    });
+                    j_readmail.find('button.reply').on('click',function(e){
+                        j_newmail.find('input.to_username').val(j_readmail.find('span.from_username').text());
+                        j_newmail.find('input.title').val('Re: ' + j_readmail.find('h3.title').text());
 
-                    var j_item;
-                    var i;
+                        j_readmail.modal('hide');
+                        j_newmail.modal('show');
+                    });
 
-                    for(i = 0;i < 20;i++){
-                        j_item = mailitem_create('alice','範例右鍵標題','2013-6-17 10:24');
-                        j_maillist.append(j_item);
-                    }
+                    mail_node.child_set(inbox_node);
+                    mail_node.child_set(backup_node);
                 });
+
+                if(url_dpart.length == 0){
+                    com.url_update('/toj/mail/inbox/');
+                }
+            }else if(direct == 'out'){
+                mail_node.child_del(inbox_node);
+                mail_node.child_del(backup_node);
             }
+
+            return 'cont';
         };
         com.vus_root.child_set(mail_node);
+
+        inbox_node.url_chg = function(direct,url_upart,url_dpart,param){
+            if(direct == 'in' || direct == 'same'){
+                maillist_type = 1;
+                if(param == null){
+                    maillist_off = 0;
+                }else{
+                    maillist_off = parseInt(param);
+                }
+
+                j_tabnav_inbox.active();
+
+                com.call_backend('core/mail/','get_mail_count',function(result){
+                    var i;
+                    var j_div = j_index_page.find('div.pagination');
+                    var offs;
+                    var as;
+
+                    if(com.is_callerr(result)){
+                        //TODO GE
+                    }else{
+                        offs = com.create_pagination(j_div,0,result.data.tot_count,maillist_off,20);
+                        as = j_div.find('a');
+                        for(i = 0;i < as.length;i++){
+                            $(as[i]).attr('href','/toj/mail/inbox:' + offs[i] + '/');
+                        }
+                    }
+                },maillist_type);
+
+                update_maillist();
+            }
+
+            return 'cont';
+        };
+
+        backup_node.url_chg = function(direct,url_upart,url_dpart,param){
+            if(direct == 'in' || direct == 'same'){
+                maillist_type = 2;
+                if(param == null){
+                    maillist_off = 0;
+                }else{
+                    maillist_off = parseInt(param);
+                }
+
+                j_tabnav_backup.active();
+
+                com.call_backend('core/mail/','get_mail_count',function(result){
+                    var i;
+                    var j_div = j_index_page.find('div.pagination');
+                    var offs;
+                    var as;
+
+                    if(com.is_callerr(result)){
+                        //TODO GE
+                    }else{
+                        offs = com.create_pagination(j_div,0,result.data.tot_count,maillist_off,2);
+                        as = j_div.find('a');
+                        for(i = 0;i < as.length;i++){
+                            $(as[i]).attr('href','/toj/mail/backup:' + offs[i] + '/');
+                        }
+                    }
+                },maillist_type);
+
+                update_maillist();
+            }
+
+            return 'cont';
+        };
     };
 };
diff --git a/src/js/user.js b/src/js/user.js
index bb6531c..da4ae2c 100644
--- a/src/js/user.js
+++ b/src/js/user.js
@@ -76,14 +76,39 @@ var user = new function(){
         };
         com.vus_root.child_set(user_node);
 
+        function _tmp(y){
+            var now = 0;
+            var ay = 50;
+            
+            function __ani(){
+                if(y <= now){
+                    $(window).scrollTop(y);
+                    return;
+                }
+                $(window).scrollTop(now);
+
+                now = now + ay;
+                ay = Math.max(5,ay * 0.87);
+                setTimeout(__ani,10);
+            }
+
+            __ani();
+        }
+
         main_node.url_chg = function(direct,url_upart,url_dpart,param){
             if(direct == 'in'){
+                index.set_menu('使用者');
+                index.set_title('');
+                index.clear_tabnav();
+
                 $.when(
                     _get_user_info(user_node_uid),
-                    com.loadpage('使用者','/toj/html/user_main.html')
+                    com.loadpage('/toj/html/user_main.html')
                 ).done(function(data){
                     j_index_page.find('h3.name').text(data.nickname + '(' + data.username + ')');
                     j_index_page.find('p.aboutme').text(data.aboutme);
+
+                    _tmp(560);
                 });
             }
         };
@@ -91,7 +116,11 @@ var user = new function(){
 
         login_node.url_chg = function(direct,url_upart,url_dpart,param){
             if(direct == 'in'){
-                com.loadpage('登入','/toj/html/login.html').done(function(){
+                index.set_menu('登入');
+                index.set_title('');
+                index.clear_tabnav();
+
+                com.loadpage('/toj/html/login.html').done(function(){
                     var j_alert = j_index_page.find('div.alert');
                     var j_submit = j_index_page.find('button.submit');
 
@@ -128,7 +157,11 @@ var user = new function(){
         
         register_node.url_chg = function(direct,url_upart,url_dpart,param){
             if(direct == 'in'){
-                com.loadpage('註冊','/toj/html/register.html').done(function(){
+                index.set_menu('註冊');
+                index.set_title('');
+                index.clear_tabnav();
+
+                com.loadpage('/toj/html/register.html').done(function(){
                     var j_alert = j_index_page.find('div.alert');
 
                     j_index_page.find('[name="username"]').focus();
diff --git a/src/py/backend_server.py b/src/py/backend_server.py
index 443233e..197d820 100755
--- a/src/py/backend_server.py
+++ b/src/py/backend_server.py
@@ -38,7 +38,7 @@ class BackendWorker(tornado.tcpserver.TCPServer):
 
     def start(self):
         sock_port = random.randrange(4096,8192)
-        self.sock_addr = ('10.8.0.10',sock_port)
+        self.sock_addr = ('10.8.0.6',sock_port)
 
         self.bind(sock_port,'',socket.AF_INET,65536)
         super().start()
@@ -341,7 +341,7 @@ def start_backend_worker(ws_port):
     ]))
     http_serv.listen(ws_port)
 
-    backend_worker = BackendWorker(('10.8.0.10',5730),ws_port)
+    backend_worker = BackendWorker(('10.8.0.6',5730),ws_port)
     backend_worker.start()
 
     tornado.ioloop.IOLoop.instance().start()
diff --git a/src/py/mail.py b/src/py/mail.py
index eb733fd..c63e195 100644
--- a/src/py/mail.py
+++ b/src/py/mail.py
@@ -168,8 +168,8 @@ class Mail:
         cur = self.db.cursor()
         sqlstr = ('SELECT "mailid", "from_uid", "unread", "title", '
                   '"send_time" FROM "MAIL" WHERE "uid" = %s AND "mail_type" = '
-                  '%s ORDER BY "mailid" ASC LIMIT %s OFFSET %s;')
-        sqlarr = (uid, mail_type, end_index - start_index + 1, start_index - 1)
+                  '%s ORDER BY "mailid" DESC LIMIT %s OFFSET %s;')
+        sqlarr = (uid, mail_type, end_index - start_index, start_index)
         cur.execute(sqlstr, sqlarr)
 
         ret = []
@@ -220,14 +220,14 @@ class Mail:
         cur.execute(sqlstr, sqlarr)
 
     @imc.async.caller
-    def get_mail_count(self):
+    def get_mail_count(self, mail_type = None):
         uid = UserMg.get_current_uid()
         if uid == None:
             return 'Eno_uid'
 
         with TOJAuth.change_current_iden(self._idendesc):
-            tot_count = self._get_mail_count(uid)
-            unread_count = self._get_mail_count(uid, True)
+            tot_count = self._get_mail_count(uid, None, mail_type)
+            unread_count = self._get_mail_count(uid, True, mail_type)
 
         ret = {
             'tot_count': tot_count,
@@ -237,15 +237,17 @@ class Mail:
         return ret
 
     @TOJAuth.check_access(_accessid, TOJAuth.ACCESS_EXECUTE)
-    def _get_mail_count(self, uid, unread = None):
+    def _get_mail_count(self, uid, unread = None, mail_type = None):
         cur = self.db.cursor()
-        if unread == None:
-            sqlstr = ('SELECT COUNT(*) FROM "MAIL" WHERE "uid" = %s;')
-            sqlarr = (uid, )
-        else:
-            sqlstr = ('SELECT COUNT(*) FROM "MAIL" WHERE "uid" = %s AND '
-                      '"unread" = %s;')
-            sqlarr = (uid, unread)
+        sqlstr = ('SELECT COUNT(*) FROM "MAIL" WHERE "uid" = %s')
+        sqlarr = [uid]
+        if unread != None:
+            sqlstr = sqlstr + (' AND "unread" = %s')
+            sqlarr.append(unread)
+        if mail_type != None:
+            sqlstr = sqlstr + (' AND "mail_type" = %s')
+            sqlarr.append(mail_type)
+        sqlstr = sqlstr + (';')
         cur.execute(sqlstr, sqlarr)
 
         for data in cur: