Home Explore Help
Sign In
n4u
/
game_svg_erl_demo
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

visible but non-working editors

Maxim Sokhatsky 11 years ago
parent
220f875507
commit
ce8969eaca
7 changed files with 85 additions and 108 deletions
Unified View Show Diff Stats
  1. 3 2
      apps/web/priv/static/app/Kakaranet-Scene.svg
  2. 1 1
      apps/web/priv/static/app/css/main.css
  3. 1 1
      apps/web/priv/static/app/index.htm
  4. 14 85
      apps/web/priv/static/app/js/bootloader.js
  5. 58 12
      apps/web/priv/static/app/js/chat.js
  6. 2 0
      apps/web/priv/static/app/js/okey/okey.js
  7. 6 7
      apps/web/priv/static/app/js/roster.js

+ 3 - 2
apps/web/priv/static/app/Kakaranet-Scene.svg
View File 

@@ -466,13 +466,14 @@
 
     <foreignObject x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
 
     <foreignObject x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
 
         <div xmlns:data="Chat" id="edit"
 
         <div xmlns:data="Chat" id="edit"
 
           style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
 
           style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
 
-        contentEditable="true">Write here some text.</div>
 
+        contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
 
     </foreignObject>
 
     </foreignObject>
 
 
 
     <foreignObject x="10" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
 
     <foreignObject x="10" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
 
         <div xmlns:data="Chat+xxx" id="onlineChatEdit"
 
         <div xmlns:data="Chat+xxx" id="onlineChatEdit"
 
           style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
 
           style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
 
-        contentEditable="true">Write here some text.</div>
 
+        contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
 
     </foreignObject>
 
     </foreignObject>
 
 
 
+
 
 </svg>
 
 </svg>

+ 1 - 1
apps/web/priv/static/app/css/main.css
View File 

@@ -18,7 +18,7 @@ body {
 
     user-select: none;          
     user-select: none;          
 }
 
 }
 
 
 
-.svg { width: auto; height: 100%; }
 
+svg { width: auto; height: 100%; }
 
 text { cursor: default; }
 
 text { cursor: default; }
 
 .card text { cursor: inherit; }
 
 .card text { cursor: inherit; }
 
 @media all and (max-width: 1311px) { .svg { width: 100%; height: auto; } }
 
 @media all and (max-width: 1311px) { .svg { width: 100%; height: auto; } }

+ 1 - 1
apps/web/priv/static/app/index.htm
View File 

@@ -9,7 +9,7 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 
 
-    <svg id="Refined" preserveAspectRatio="xMidYMin meet" class="svg" viewBox="0 0 1071 661"
 
+    <svg id="Refined" preserveAspectRatio="xMidYMin meet" viewBox="0 0 1071 661"
 
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
 
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
 
         style="style="position:fixed; top:0; left:0; height:100%; width:100%;">    </svg>
 
         style="style="position:fixed; top:0; left:0; height:100%; width:100%;">    </svg>

+ 14 - 85
apps/web/priv/static/app/js/bootloader.js
View File 

@@ -33,56 +33,12 @@ function template_engine(html, data) {
 
 
 
 function discarder(name) { return template_engine(localStorage.getItem("svg/Discarder.svg?q=" + $.timestamp), { name: name }); }
 
 function discarder(name) { return template_engine(localStorage.getItem("svg/Discarder.svg?q=" + $.timestamp), { name: name }); }
 
 
 
-function initChat() {
 
-    var inGameChat = '<g id="Chat"         y="0" clip-path="url(#myClip2)" transform="translate(857.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
 
-    var onlineList = '<g id="Online-List"  y="0" clip-path="url(#myClip1)" transform="translate(1.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
 
-    var onlineChat = '<g id="Online-Chat"  y="0" clip-path="url(#myClip3)" transform="translate(1.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
 
-    document.getElementById("Page-1").appendChild(svg(inGameChat));
 
-    document.getElementById("Page-1").appendChild(svg(onlineList));
 
-    document.getElementById("Page-1").appendChild(svg(onlineChat));
 
-
 
-    document.getElementById('Page-1').addEventListener("mousewheel", mouseWheelHandler, false);
 
-
 
-    var clipPath1 = svg('<clipPath id="myClip1"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath>');
 
-    var clipPath2 = svg('<clipPath id="myClip2"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath>');
 
-    var clipPath3 = svg('<clipPath id="myClip3"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></clipPath>');
 
-
 
-    document.getElementsByTagName('defs').item(0).appendChild(clipPath1);
 
-    document.getElementsByTagName('defs').item(0).appendChild(clipPath2);
 
-    document.getElementsByTagName('defs').item(0).appendChild(clipPath3);
 
-
 
-     document.getElementById("Online-List").setAttribute("clip-path","url(#myClip1)");
 
-     document.getElementById("Chat").setAttribute("clip-path","url(#myClip2)");
 
-     document.getElementById("Online-Chat").setAttribute("clip-path","url(#myClip1)");
 
-
 
-    document.getElementById("Clip-Path-Left").setAttribute("transform", "translate(0,0)");
 
-    document.getElementById("Clip-Path-Right").setAttribute("transform", "translate(0,0)");
 
-    document.getElementById("Clip-Path-Left-Chat").setAttribute("transform", "translate(0,0)");
 
-}
 
-
 
-function initEditors() {
 
-    var left = 
-'<foreignObject xmlns="http://www.w3.org/2000/svg" x="864" y="504" width="198" height="120" mouseover="barHover(evt);" mouseout="barHoverOut(evt);">' +
 
-        '<div xmlns="http://www.w3.org/1999/xhtml" xmlns:data="Chat" id="edit" ' +
 
-          ' style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:"Exo 2";font-size:16px;" ' +
 
-        ' contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>' +
 
-    '</foreignObject>';
 
-
 
-    var right = '<foreignObject xmlns="http://www.w3.org/2000/svg" x="10" y="504" width="198" height="120"  onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);>' +
 
-        '<div xmlns="http://www.w3.org/1999/xhtml" xmlns:data="Chat+xxx" id="onlineChatEdit" ' +
 
-          ' style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:"Exo 2";font-size:16px;" ' +
 
-        ' contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>' +
 
-    '</foreignObject>';
 
-    document.getElementById("Page-1").appendChild(svg(left));
 
-    document.getElementById("Page-1").appendChild(svg(right));
 
-}
 
 
 
 function initDiscards() {
 
 function initDiscards() {
 
     [ {name:"Gabrielo-Discard", hand:"Player-Left-Hand"},
 
     [ {name:"Gabrielo-Discard", hand:"Player-Left-Hand"},
 
       {name:"Alina-Discard",    hand:"Player-Right-Hand"},
 
       {name:"Alina-Discard",    hand:"Player-Right-Hand"},
 
       {name:"Mustafa-Discard",  hand:"Player-Center-Hand"},
 
       {name:"Mustafa-Discard",  hand:"Player-Center-Hand"},
 
       {name:"You-Discard",      hand:"Player-Me-Hand"}                 ].map(function(e) {
 
       {name:"You-Discard",      hand:"Player-Me-Hand"}                 ].map(function(e) {
 
-//        document.getElementById(e.name).firstElementChild.remove();
 
         document.getElementById(e.name).appendChild(svg(discarder(e.hand)));
 
         document.getElementById(e.name).appendChild(svg(discarder(e.hand)));
 
          });
 
          });
 
 }
 
 }
 
@@ -90,35 +46,7 @@ function initDiscards() {
 
 function PatchSVG()
 
 function PatchSVG()
 
 {
 
 {
 
 
 
-        // Setup Clipping ViewPorts
 
-
 
-
 
-//  document.getElementById('Player-Statistics').style.display = 'none';
 
-    document.getElementById("Right-Bar").setAttribute("fill","lightblue");
 
-    document.getElementById("Left-Bar").setAttribute("fill","lightblue");
 
-    document.getElementById("Right-Bar").setAttribute("xmlns:data","Right-Bar");
 
-    document.getElementById("Left-Bar").setAttribute("xmlns:data","Left-Bar");
 
-
 
-    document.getElementById("Right-Bar").onmouseover = barHover;
 
-    document.getElementById("Right-Bar").onmouseout = barHoverOut;
 
-    document.getElementById("Left-Bar").onmouseover = onlineHover;
 
-    document.getElementById("Left-Bar").onmouseout = onlineHoverOut;
 
-    
-    document.getElementById("Player-Left").style.display = 'block';
 
-
 
-
 
-    // HTML editors
 
-
 
-    document.getElementById('onlineChatEdit').setAttribute("contentEditable","true");
 
-    document.getElementById('onlineChatEdit').onkeydown = chatEditor;
 
-    document.getElementById("onlineChatEdit").style.display = 'none';
 
-
 
-    document.getElementById('edit').setAttribute("contentEditable","true");
 
-    document.getElementById('edit').onkeydown = chatEditor;
 
-    document.getElementById('edit').setAttribute("xmlns:data","Chat");
 
-    document.getElementById("edit").style.display = '';
 
-
 
-    // showOnlineList ctor
 
+    $('Player-Statistics').hide();
 
 
 
     var onlineListOnClick = [
 
     var onlineListOnClick = [
 
         "Online-Users",
 
         "Online-Users",
 
@@ -130,9 +58,6 @@ function PatchSVG()
 
        onlineListOnClick.map(function(x) { 
        onlineListOnClick.map(function(x) { 
             document.getElementById(x).onclick = showOnlineList; });
 
             document.getElementById(x).onclick = showOnlineList; });
 
 
 
-    initDiscards();
 
-    initChat();
 
-
 
     Core(ControllerScope);
 
     Core(ControllerScope);
 
     Core(DragScope);
 
     Core(DragScope);
 
     Core(DropScope);
 
     Core(DropScope);
 
@@ -144,18 +69,22 @@ function PatchSVG()
 
     Core(DeckScope);
 
     Core(DeckScope);
 
     Core(RosterScope);
 
     Core(RosterScope);
 
 
 
+    initDiscards();
 
+    initChat();
 
+    initChatSample();
 
 
 
-        chatMessage("Chat","1","Maxim2","Joe:\nHello There!".encodeHTML());
 
-        chatMessage("Chat","2","Maxim2","Alice:\nYou got new Design. Eh?".encodeHTML());
 
-        chatMessage("Chat","3","Maxim","Maxim So:\nThis was made with pure SVG".encodeHTML());
 
-
 
-        barHover();
 
-        mouseWheelHandler({'detail':-100000,'wheelDelta':-100000});
 
-        barHoverOut();
 
+    //document.addEventListener('touchmove',function(e) {e.preventDefault();},false);
 
+    $svg.attr({preserveAspectRatio:"xMidYMid meet",width:"100%",height:"100%"});
 
+}
 
 
 
-//    document.addEventListener('touchmove',function(e) {e.preventDefault();},false);
 
+function initChatSample() {
 
+    chatMessage("Chat","1","Maxim2","Joe:\nHello There!".encodeHTML());
 
+    chatMessage("Chat","2","Maxim2","Alice:\nYou got new Design. Eh?".encodeHTML());
 
+    chatMessage("Chat","3","Maxim","Maxim So:\nThis was made with pure SVG".encodeHTML());
 
 
 
-    $svg.attr({preserveAspectRatio:"xMidYMid meet",class:"svg",width:"100%",height:"100%"});
 
+    barHover();
 
+    mouseWheelHandler({'detail':-100000,'wheelDelta':-100000});
 
+    barHoverOut();
 
 }
 
 }
 
 
 
 function onPlayerInfo(evt) {
 
 function onPlayerInfo(evt) {

+ 58 - 12
apps/web/priv/static/app/js/chat.js
View File 

@@ -2,8 +2,8 @@
 
 // Online User Chat and In-Game Chat
 
 // Online User Chat and In-Game Chat
 
 
 
 var scrollSensitivity = 0.2;
 
 var scrollSensitivity = 0.2;
 
-var scroll_left = 5;
 
-var scroll_left_chat = 5;
 
+var scroll_left = 0;
 
+var scroll_left_chat = 0;
 
 var scroll_right = -10000;
 
 var scroll_right = -10000;
 
 var currentChat = null;
 
 var currentChat = null;
 
 var user_count = 0;
 
 var user_count = 0;
 
@@ -26,12 +26,10 @@ function onlineHoverOutColor(evt) {
 
 function chatEditor(evt) {
 
 function chatEditor(evt) {
 
     var chatContainer = evt.target.getAttribute("xmlns:data");
 
     var chatContainer = evt.target.getAttribute("xmlns:data");
 
     if (evt.keyCode == 13 && evt.metaKey == false) {
 
     if (evt.keyCode == 13 && evt.metaKey == false) {
 
-        var e = evt.target; //document.getElementById('edit');
 
-        console.log(e);
 
+        var e = evt.target;
 
         if (e.innerText.trim() != ""){
 
         if (e.innerText.trim() != ""){
 
             var text = e.innerText.trim().encodeHTML();
 
             var text = e.innerText.trim().encodeHTML();
 
             chatMessage(chatContainer,"100","Maxim",text);
 
             chatMessage(chatContainer,"100","Maxim",text);
 
-//            if (null != currentChat)
 
                 ws.send(enc(tuple(atom('client'),
 
                 ws.send(enc(tuple(atom('client'),
 
                     tuple(atom('message'),bin(document.user),bin(chatContainer.substr(5)),bin(text)))));
 
                     tuple(atom('message'),bin(document.user),bin(chatContainer.substr(5)),bin(text)))));
 
             e.innerHTML = '';
 
             e.innerHTML = '';
 
@@ -53,7 +51,6 @@ function mouseWheelHandler(e) {
 
     var leftActive = leftFill == "skyblue";
 
     var leftActive = leftFill == "skyblue";
 
     var rightActive = rightFill == "skyblue";
 
     var rightActive = rightFill == "skyblue";
 
     if (!leftActive && !rightActive) return;
 
     if (!leftActive && !rightActive) return;
 
-//    console.log(leftActive);
 
 
 
     var evt = e;
 
     var evt = e;
 
     var scroll_dy = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
 
     var scroll_dy = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
 
@@ -61,7 +58,7 @@ function mouseWheelHandler(e) {
 
     var scroll = parseFloat(scroll_dy) + parseFloat(ori);
 
     var scroll = parseFloat(scroll_dy) + parseFloat(ori);
 
     var selectedBar = leftActive ? (currentChat == null ? "Online-List" : currentChat) : "Chat";
 
     var selectedBar = leftActive ? (currentChat == null ? "Online-List" : currentChat) : "Chat";
 
     var selectedClip = leftActive ? (currentChat == null ? "Clip-Path-Left" : "Clip-Path-Left-Chat") : "Clip-Path-Right";
 
     var selectedClip = leftActive ? (currentChat == null ? "Clip-Path-Left" : "Clip-Path-Left-Chat") : "Clip-Path-Right";
 
-    var selectedBarShift = leftActive ? 2 : 857;
 
+    var selectedBarShift = leftActive ? 0 : 857;
 
     var limit = parseFloat(document.getElementById(selectedBar).getBBox().height) - 400;
 
     var limit = parseFloat(document.getElementById(selectedBar).getBBox().height) - 400;
 
     if (scroll > 5) scroll = 5;
 
     if (scroll > 5) scroll = 5;
 
     if (scroll < -limit) scroll = -limit;
 
     if (scroll < -limit) scroll = -limit;
 
@@ -110,7 +107,6 @@ function chatMessage(chatName, id, me, string) {
 
     textElement.setAttribute("mouseout",hover+"Out(evt);");
 
     textElement.setAttribute("mouseout",hover+"Out(evt);");
 
     messageElement.setAttribute("onmouseover",hover+"(evt);");
 
     messageElement.setAttribute("onmouseover",hover+"(evt);");
 
     messageElement.setAttribute("onmouseout",hover+"Out(evt);");
 
     messageElement.setAttribute("onmouseout",hover+"Out(evt);");
 
-//    console.log(messageElement);
 
 }
 
 }
 
 
 
 function chatText(container, id, me, string) {
 
 function chatText(container, id, me, string) {
 
@@ -120,7 +116,6 @@ function chatText(container, id, me, string) {
 
         " xmlns='http://www.w3.org/2000/svg' "+
 
         " xmlns='http://www.w3.org/2000/svg' "+
 
         " font-family='Exo 2' font-size='16' font-weight='normal' fill='"+colors[i]+"'>" +
 
         " font-family='Exo 2' font-size='16' font-weight='normal' fill='"+colors[i]+"'>" +
 
             string + "</text>";
 
             string + "</text>";
 
-//    console.log(html);
 
     return svg(html);
 
     return svg(html);
 
 }
 
 }
 
 
 
@@ -128,7 +123,7 @@ function showOnlineList(evt)
 
 {
 
 {
 
     document.getElementById("onlineChatEdit").style.display = 'none';
 
     document.getElementById("onlineChatEdit").style.display = 'none';
 
     if (null != currentChat) { document.getElementById(currentChat).style.display = 'none'; }
 
     if (null != currentChat) { document.getElementById(currentChat).style.display = 'none'; }
 
-    document.getElementById("Online-List").style.display = 'block';
 
+    document.getElementById("Online-List").style.display = '';
 
     currentChat = null;
 
     currentChat = null;
 
 
 
     scroll_left = 0;
 
     scroll_left = 0;
 
@@ -215,8 +210,6 @@ function openChat(evt) {
 
     onlineHover();
 
     onlineHover();
 
     mouseWheelHandler({'detail':-100000,'wheelDelta':-100000});
 
     mouseWheelHandler({'detail':-100000,'wheelDelta':-100000});
 
     onlineHoverOut();
 
     onlineHoverOut();
 
-
 
-//    document.getElementById("users-online-text").textContent = currentChat;
 
 }
 
 }
 
 
 
 function create_multiline(target) {
 
 function create_multiline(target) {
 
@@ -255,3 +248,56 @@ function create_multiline(target) {
 
         }
 
         }
 
     }
 
     }
 
 }
 
 }
 
+
 
+function initChat()
 
+{
 
+
 
+    var inGameChat = '<g id="Chat"         y="0" clip-path="url(#myClip2)" transform="translate(857.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
 
+    var onlineList = '<g id="Online-List"  y="0" clip-path="url(#myClip1)" transform="translate(1.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
 
+    var onlineChat = '<g id="Online-Chat"  y="0" clip-path="url(#myClip3)" transform="translate(1.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
 
+
 
+    var page = document.getElementById("Kakaranet-12-maxim");
 
+    var settings = document.getElementById("Settings");
 
+
 
+    page.insertBefore(svg(inGameChat),settings);
 
+    page.insertBefore(svg(onlineList),settings);
 
+    page.insertBefore(svg(onlineChat),settings);
 
+
 
+
 
+    var clipPath1 = svg('<clipPath id="myClip1"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath>');
 
+    var clipPath2 = svg('<clipPath id="myClip2"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath>');
 
+    var clipPath3 = svg('<clipPath id="myClip3"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></clipPath>');
 
+
 
+    document.getElementsByTagName('defs').item(0).appendChild(clipPath1);
 
+    document.getElementsByTagName('defs').item(0).appendChild(clipPath2);
 
+    document.getElementsByTagName('defs').item(0).appendChild(clipPath3);
 
+
 
+     document.getElementById("Online-List").setAttribute("clip-path","url(#myClip1)");
 
+     document.getElementById("Chat").setAttribute("clip-path","url(#myClip2)");
 
+     document.getElementById("Online-Chat").setAttribute("clip-path","url(#myClip1)");
 
+
 
+    document.getElementById("Clip-Path-Left").setAttribute("transform", "translate(0,0)");
 
+    document.getElementById("Clip-Path-Right").setAttribute("transform", "translate(0,0)");
 
+    document.getElementById("Clip-Path-Left-Chat").setAttribute("transform", "translate(0,0)");
 
+
 
+    document.getElementById("Right-Bar").setAttribute("fill","lightblue");
 
+    document.getElementById("Left-Bar").setAttribute("fill","lightblue");
 
+    document.getElementById("Right-Bar").setAttribute("xmlns:data","Right-Bar");
 
+    document.getElementById("Left-Bar").setAttribute("xmlns:data","Left-Bar");
 
+
 
+    document.getElementById("Right-Bar").onmouseover = barHover;
 
+    document.getElementById("Right-Bar").onmouseout = barHoverOut;
 
+    document.getElementById("Left-Bar").onmouseover = onlineHover;
 
+    document.getElementById("Left-Bar").onmouseout = onlineHoverOut;
 
+
 
+    document.getElementById('onlineChatEdit').setAttribute("contentEditable","true");
 
+    document.getElementById('onlineChatEdit').onkeydown = chatEditor;
 
+    document.getElementById("onlineChatEdit").style.display = 'none';
 
+
 
+    document.getElementById('edit').setAttribute("contentEditable","true");
 
+    document.getElementById('edit').onkeydown = chatEditor;
 
+    document.getElementById("edit").style.display = '';
 
+
 
+    document.getElementById('Page-1').addEventListener("mousewheel", mouseWheelHandler, false);
 
+
 
+}

+ 2 - 0
apps/web/priv/static/app/js/okey/okey.js
View File 

@@ -301,5 +301,7 @@ function SetupRightMenu()
 
 
 
     SetupLeftMenu();
 
     SetupLeftMenu();
 
     SetupRightMenu();
 
     SetupRightMenu();
 
+    $("#Right-Menu").trigger("click");
 
+    $("#Left-Menu").trigger("click");
 
 
 
 }
 
 }

+ 6 - 7
apps/web/priv/static/app/js/roster.js
View File 

@@ -15,15 +15,14 @@ function RosterHandlers(scope) {
 
     scope.apiProvider.on("online", function (x) {
 
     scope.apiProvider.on("online", function (x) {
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
         var msg = e.detail, id = msg[0], name = msg[1], surname = msg[2];
 
         var msg = e.detail, id = msg[0], name = msg[1], surname = msg[2];
 
-        console.log(id);
 
-        try{removeOnlineUser(id)}catch(ex){}
 
+        if (null != document.getElementById(id)) removeOnlineUser(id);
 
         addOnlineUser(id,name+" "+surname,"insertTop");
 
         addOnlineUser(id,name+" "+surname,"insertTop");
 
     });
 
     });
 
 
 
     scope.apiProvider.on("offline", function (x) {
 
     scope.apiProvider.on("offline", function (x) {
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
         var msg = e.detail, id = msg[0], name = msg[1], surname = msg[2];
 
         var msg = e.detail, id = msg[0], name = msg[1], surname = msg[2];
 
-        try{removeOnlineUser(id)}catch(ex){}
 
+        if (null != document.getElementById(id)) removeOnlineUser(id);
 
         addOnlineUser(id,name+" "+surname,"appendChild");
 
         addOnlineUser(id,name+" "+surname,"appendChild");
 
     });
 
     });
 
 
 
@@ -36,20 +35,20 @@ function RosterHandlers(scope) {
 
     scope.apiProvider.on("roster_end", function (x) {
 
     scope.apiProvider.on("roster_end", function (x) {
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
         onlineHover();
 
         onlineHover();
 
-        mouseWheelHandler({'detail':5,'wheelDelta':5});
 
+        mouseWheelHandler({'detail':scroll,'wheelDelta':scroll});
 
         onlineHoverOut();
 
         onlineHoverOut();
 
         document.getElementById("Online-List").style.display = '';
 
         document.getElementById("Online-List").style.display = '';
 
     });
 
     });
 
 
 
     scope.apiProvider.on("roster_group", function (x) {
 
     scope.apiProvider.on("roster_group", function (x) {
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
         var e = {detail: x.detail.json, raw: x.detail.bert};
 
-        var list     = dec(e.raw).value[0][1];
 
+        var list = dec(e.raw).value[0][1];
 
         for (var i=0;i<list.length;i++) {
 
         for (var i=0;i<list.length;i++) {
 
             var item = list[i],
 
             var item = list[i],
 
                 id = item.value[0][0].value,
 
                 id = item.value[0][0].value,
 
-                names    = item.value[0][1].value,
 
+                names = item.value[0][1].value,
 
                 surnames = item.value[0][2].value;
 
                 surnames = item.value[0][2].value;
 
-            addOnlineUser(id,names+" "+surnames+ " "+user_count++,'appendChild');
 
+            addOnlineUser(id,names+" "+surnames,'appendChild');
 
         }
 
         }
 
     });
 
     });