From 1122fefa94e2fbcdfa58a84f599189a7a055d35a Mon Sep 17 00:00:00 2001
From: Miguel Freitas <miguelfreitas@users.noreply.github.com>
Date: Fri, 19 Sep 2014 19:09:08 -0300
Subject: [PATCH] merge nin theme by @myleneb
 https://github.com/myleneb/twister-nin

---
 following.html          |  49 +++++-
 home.html               |  55 +++++-
 js/interface_common.js  |  19 +-
 js/interface_home.js    |  36 +++-
 js/mobile_abstract.js   |   4 +
 js/twister_following.js |  43 ++++-
 js/twister_io.js        |  16 +-
 network.html            |  14 +-
 options.html            | 379 +++++++++++++++++++++-------------------
 profile-edit.html       |  12 +-
 10 files changed, 401 insertions(+), 226 deletions(-)

diff --git a/following.html b/following.html
index fdd7af8..6f7c88a 100644
--- a/following.html
+++ b/following.html
@@ -41,8 +41,8 @@
   <nav class="userMenu">
     <ul>
       <li class="userMenu-home"><a href="home.html"><span class="selectable_theme theme_original label">Home</span></a></li>
-      <li class="userMenu-network selectable_theme theme_original"><a class="label" href="network.html">Network</a></li>
-      <li class="userMenu-profile selectable_theme theme_original"><a class="label" href="profile-edit.html">Profile</a></li>
+      <li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li>
+      <li class="userMenu-profile selectable_theme theme_original theme_nin"><a class="label" href="profile-edit.html">Profile</a></li>
       <li class="userMenu-config current">
         <a class="userMenu-config-dropdown" href="#">
           <div class="config-menu dialog-modal">
@@ -105,10 +105,47 @@
 
 
   <div class="wrapper">
+  <!-- LADO ESQUERDO DE MÓDULOS INIT --> 
+    <div class="dashboard left">
+      
+      <!-- PROFILE MODULE INIT -->
+      <div class="module mini-profile selectable_theme theme_nin">
+        <div class="mini-profile-info">
+
+
+
+          <!-- THEME NIN added user menu (mentions, messages and edit profile) -->
+          <ul class="mini-profile-indicators selectable_theme theme_nin">
+            <li class="userMenu-connections">
+              <a href="#" title="Mentions"><span class="messages-qtd" style="display:none;">0</span>Mentions</a>
+            </li>
+            <li class="userMenu-messages">
+              <a href="#" title="Direct Messages"><span class="messages-qtd" style="display:none;">0</span>Messages</a>
+            </li>
+            <li class="userMenu-user">
+              <a href="profile-edit.html" title="Edit profile">Edit profile</a>
+            </li>
+          </ul>
+
+
+          <div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
+          <a href="#" class="mini-profile-name open-profile-modal"></a>
+          <span class="mini-profile-view">View</span>
+        </div>
+        <ul class="module profile-data">
+          <li><a href="#" class="open-profile-modal"><span class="posts-count">&nbsp;</span><span class="label">Posts</span></a></li>
+          <li class="current"><a href="following.html" class="open-following-page"><span class="following-count">&nbsp;</span><span class="label">Following</span></a></li>
+          <li><a href="#" class="open-followers"><span class="followers-count">&nbsp;</span><span class="label">Followers</span> *</a></li>
+        </ul>
+      
+      </div>
+      <!-- PROFILE MODULE INIT -->
+    </div>
+
 
   <!-- LADO ESQUERDO DE MÓDULOS INIT --> 
     <div class="following">
-      <h2> Following </h2>
+      <h2><span>Following</span></h2>
 
       <div class="postboard-loading" style="display: none;">
             <div></div>
@@ -360,10 +397,10 @@
               <div class="profile-bio"></div>
               <div id="msngrswr">
                 <div id="toxbtnwr" class="profile-extra-contact">
-                  <a class="profile-tox"></a><a class="tox-ctc"></a>
+                  <a class="profile-tox"><span class="selectable_theme theme_nin">TOX</span></a><a class="tox-ctc"></a>
                 </div>
                 <div id="bmbtnwr" class="profile-extra-contact">
-                  <a class="profile-bitmessage"></a><a class="bitmessage-ctc"></a>
+                  <a class="profile-bitmessage"><span class="selectable_theme theme_nin">BM</span></a><a class="bitmessage-ctc"></a>
                 </div>
               </div>
             </div>
@@ -385,7 +422,7 @@
         <!-- ÁREA DE POSTS INIT -->
           <div class="postboard">
             <h2>
-              Posts
+              <span>Posts</span>
               <!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
               <button class="postboard-news" style="display:none;"></button>
             </h2>
diff --git a/home.html b/home.html
index 89c97aa..9ebd479 100644
--- a/home.html
+++ b/home.html
@@ -39,9 +39,12 @@
   <!-- MENU SUPERIOR INIT --> 
   <nav class="userMenu">
     <ul>
-      <li class="userMenu-home current"><a href="home.html"><span class="selectable_theme theme_original label">Home</span></a></li>
-      <li class="userMenu-network selectable_theme theme_original"><a class="label" href="network.html">Network</a></li>
-      <li class="userMenu-profile selectable_theme theme_original"><a class="label" href="profile-edit.html">Profile</a></li>
+      <li class="userMenu-home current"><a href="home.html">
+        <span class="selectable_theme theme_original label">Home</span>
+        <span class="menu-news"></span>
+      </a></li>
+      <li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li>
+      <li class="userMenu-profile selectable_theme theme_original theme_nin"><a class="label" href="profile-edit.html">Profile</a></li>
       <li class="userMenu-config">
         <a class="userMenu-config-dropdown" href="#">
           <div class="config-menu dialog-modal">
@@ -112,6 +115,19 @@
       <!-- PROFILE MODULE INIT -->
       <div class="module mini-profile">
         <div class="mini-profile-info">
+          <!-- THEME NIN added sub-menu (mentions, messages and edit profile) -->
+          <ul class="mini-profile-indicators selectable_theme theme_nin">
+            <li class="userMenu-connections">
+              <a href="#" title="Mentions"><span class="messages-qtd" style="display:none;">0</span>Mentions</a>
+            </li>
+            <li class="userMenu-messages">
+              <a href="#" title="Direct Messages"><span class="messages-qtd" style="display:none;">0</span>Messages</a>
+            </li>
+            <li class="userMenu-user">
+              <a href="profile-edit.html" title="Edit profile">Edit profile</a>
+            </li>
+          </ul>
+          <!--/sub-menu -->
           <div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
           <a href="#" class="mini-profile-name open-profile-modal"></a>
           <span class="mini-profile-view">View</span>
@@ -163,10 +179,33 @@
   <!-- ÁREA DE POSTS INIT --> 
     <div class="postboard">
       <h2>
-        Postboard
+        <span>Postboard</span>
         <!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
-        <button class="postboard-news" style="display: none;"></button>
+        <button class="postboard-news selectable_theme theme_original theme_calm" style="display: none;"></button>
       </h2>
+      <!-- Tabs to switch between promoted post and normal posts-->
+      <ul class="promoted-posts-only promoted selectable_theme theme_nin">
+        <li class="normal-posts active">Normal posts</li>
+        <li class="promoted-posts disabled">Promoted posts</li>
+      </ul>
+      <!-- Post area on top of postboard --> 
+      <div id="postboard-top" class=" selectable_theme theme_nin">
+        <div class="post-area">
+          <form class="post-area-new">
+            <textarea placeholder="New Post..."></textarea>
+            <div class="post-area-extras">
+             <span class="post-area-remaining">140</span>
+                <button class="undo-unicode disabled" disabled="true">undo</button>
+                <button class="post-submit disabled" disabled="true">post</button>
+            </div>
+          </form>
+        </div>
+        <!-- User's pic --> 
+        <div class="profile-photo"><img src="img/genericPerson.png" alt="user-photo"/></div>
+      </div>
+      <div class="postboard-news" style="display:none"></div>
+      <!-- END postboard-top --> 
+
 
       <ol id="posts" class="postboard-posts">
         <!-- use "post-template" here -->
@@ -388,10 +427,10 @@
               <div class="profile-bio"></div>
               <div id="msngrswr">
                 <div id="toxbtnwr" class="profile-extra-contact">
-                  <a class="profile-tox"></a><a class="tox-ctc"></a>
+                  <a class="profile-tox"><span class="selectable_theme theme_nin">TOX</span></a><a class="tox-ctc"></a>
                 </div>
                 <div id="bmbtnwr" class="profile-extra-contact">
-                  <a class="profile-bitmessage"></a><a class="bitmessage-ctc"></a>
+                  <a class="profile-bitmessage"><span class="selectable_theme theme_nin">BitMessage</span></a><a class="bitmessage-ctc"></a>
                 </div>
               </div>
             </div>
@@ -433,7 +472,7 @@
         <!-- ÁREA DE POSTS INIT -->
           <div class="postboard">
             <h2>
-              Posts
+              <span class="selectable_theme theme_original">Posts</span>
               <!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
               <button class="postboard-news" style="display:none;"></button>
             </h2>
diff --git a/js/interface_common.js b/js/interface_common.js
index cceab36..9f8dea3 100644
--- a/js/interface_common.js
+++ b/js/interface_common.js
@@ -1246,15 +1246,26 @@ var retweetSubmit = function(e)
 function changeStyle() {
     var style, profile, menu;
     var theme = $.Options.getTheme();
-    if(theme == 'original')
+
+    if(theme == 'nin')
     {
-        style = 'css/style.css';
-        profile = 'css/profile.css';
-    }else
+        style = 'theme_nin/css/style.css';
+        profile = 'theme_nin/css/profile.css';
+        $.getScript('theme_nin/js/theme_option.js');
+
+    }
+
+    if(theme == 'calm')
     {
         style = 'theme_calm/css/style.css';
         profile = 'theme_calm/css/profile.css';
     }
+
+    if(theme == 'original')
+    {
+        style = 'css/style.css';
+        profile = 'css/profile.css';
+    }
     $('#stylecss').attr('href', style);
     $('#profilecss').attr('href', profile);
     $("<style type='text/css'> .selectable_theme{display:none!important;}\n" +
diff --git a/js/interface_home.js b/js/interface_home.js
index d2cf81a..5c930d6 100644
--- a/js/interface_home.js
+++ b/js/interface_home.js
@@ -15,13 +15,37 @@ var InterfaceFunctions = function()
     {
         $( ".wrapper .postboard-news").click(function() {
             requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly);});
-        $( ".promoted-posts-only").click(function() {
+
+
+        /*$( ".promoted-posts-only").click(function() {
             promotedPostsOnly = !promotedPostsOnly;
             $(this).text( promotedPostsOnly ? "Switch to Normal posts" : "Switch to Promoted posts" );
             timelineChangedUser();
             $.MAL.getStreamPostsParent().empty();
             requestTimelineUpdate("latestFirstTime",postsPerRefresh,followingUsers,promotedPostsOnly);
-            });
+            });*/
+
+
+        // Add refresh posts for home link in menu
+        $( ".userMenu-home.current a").click(function() {
+            requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly);});
+
+        // modified the way promoted posts are shown
+        $( ".promoted-posts-only").click(function() { 
+            promotedPostsOnly = !promotedPostsOnly;
+            //active promoted posts tab
+            $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
+            $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
+            $('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
+            //active normal posts
+            $(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active");
+            $(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled");
+            $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
+
+            timelineChangedUser();
+            $.MAL.getStreamPostsParent().empty();
+            requestTimelineUpdate("latestFirstTime",postsPerRefresh,followingUsers,promotedPostsOnly);
+        });
 
         initInterfaceCommon();
         initUserSearch();
@@ -77,6 +101,8 @@ var InterfaceFunctions = function()
             $miniProfile.find(".mini-profile-name").text(defaultScreenName);
             getFullname( defaultScreenName, $miniProfile.find(".mini-profile-name") );
             getAvatar( defaultScreenName, $miniProfile.find(".mini-profile-photo").find("img") );
+            // add avatar in postboard-top
+            getAvatar( defaultScreenName, $("#postboard-top").find("img") );
             getPostsCount( defaultScreenName,  $miniProfile.find(".posts-count") );
             getFollowers( defaultScreenName, $miniProfile.find(".followers-count") );
 
@@ -123,6 +149,10 @@ var InterfaceFunctions = function()
                      if( args.cbFunc )
                         args.cbFunc(args.cbArg);
                  }, {cbFunc:cbFunc, cbArg:cbArg});
+
+
+
+
         }
     }
 };
@@ -143,5 +173,5 @@ function fixDiv()
   else
     $cache.removeClass( "fixed" );
 }
-
 $(window).scroll(fixDiv);
+
diff --git a/js/mobile_abstract.js b/js/mobile_abstract.js
index 33ffe10..567d5e5 100644
--- a/js/mobile_abstract.js
+++ b/js/mobile_abstract.js
@@ -95,12 +95,16 @@ var MAL = function()
             }
         } else {
             var newTweetsBar = $(".wrapper").find(".postboard-news");
+            var newTweetsBarMenu = $(".userMenu").find(".menu-news"); // added for home menu entry
             if( newPosts ) {
                 document.title = "(" + String(newPosts) + ") twister";
                 newTweetsBar.text(String(newPosts) + " new posts");
                 newTweetsBar.fadeIn("slow");
+                newTweetsBarMenu.text(String(newPosts));
+                newTweetsBarMenu.addClass("show");
             } else {
                 newTweetsBar.hide();
+                newTweetsBarMenu.removeClass("show");
                 document.title = "twister";
             }
         }
diff --git a/js/twister_following.js b/js/twister_following.js
index af1d30d..eb19360 100644
--- a/js/twister_following.js
+++ b/js/twister_following.js
@@ -528,7 +528,7 @@ function showFollowingUsers(){
             resItem.find("button").hide();
         }
         
-        resItem.appendTo($followingList);
+        resItem.prependTo($followingList);
     }
     $.MAL.followingListLoaded();
 }
@@ -787,3 +787,44 @@ function initInterfaceFollowing() {
         initDMsCount();
     });
 }
+
+
+var InterfaceFunctions = function()
+{
+    this.init = function()
+    {
+        initUser(initFollowing_);
+    };
+
+    function initFollowing_(cbFunc, cbArg) {
+        var $miniProfile = $(".left .mini-profile");
+        if(!defaultScreenName)
+        {
+
+        }
+        else
+        {
+            $miniProfile.find("a.mini-profile-name").attr("href",$.MAL.userUrl(defaultScreenName));
+            $miniProfile.find("a.open-profile-modal").attr("href",$.MAL.userUrl(defaultScreenName));
+            $miniProfile.find(".mini-profile-name").text(defaultScreenName);
+            getFullname( defaultScreenName, $miniProfile.find(".mini-profile-name") );
+            getAvatar( defaultScreenName, $miniProfile.find(".mini-profile-photo").find("img") );
+            getPostsCount( defaultScreenName,  $miniProfile.find(".posts-count") );
+            getFollowers( defaultScreenName, $miniProfile.find(".followers-count") );
+
+            loadFollowing( function(args) {
+                     $(".left .following-count").text(followingUsers.length-1);
+                     initMentionsCount();
+                     initDMsCount();
+                 }, {cbFunc:cbFunc, cbArg:cbArg});
+
+        }
+        
+    }
+};
+
+//***********************************************
+//******************* INIT **************
+//***********************************************
+var interfaceFunctions = new InterfaceFunctions;
+$( document ).ready( interfaceFunctions.init );
diff --git a/js/twister_io.js b/js/twister_io.js
index 7b01dec..08ac255 100644
--- a/js/twister_io.js
+++ b/js/twister_io.js
@@ -255,11 +255,11 @@ function getBio( username, item ){
 // get tox address and store it in item.text
 function getTox( username, item ){
     getProfileResource( username, "tox", false, function(item, text){
-        item.empty();
+        //item.empty();
         if(text) {
             item.attr('href', 'tox:'+text);
-            item.next().attr('data', text);
-            item.parent().show().parent().show();
+            item.next().attr('data', text).attr('title', 'Copy to clipboard');
+            item.parent().css('display','inline-block').parent().show();
         }
     }, item);
 }
@@ -267,11 +267,11 @@ function getTox( username, item ){
 // get bitmessage address and store it in item.text
 function getBitmessage( username, item ){
     getProfileResource( username, "bitmessage", false, function(item, text){
-        item.empty();
+        //item.empty();
         if(text) {
             item.attr('href', 'bitmsg:'+text+'?action=add&label='+username);
-            item.next().attr('data', text);
-            item.parent().show().parent().show();
+            item.next().attr('data', text).attr('title', 'Copy to clipboard');
+            item.parent().css('display','inline-block').parent().show();
         }
     }, item);
 }
@@ -320,8 +320,10 @@ function _putResourceIntoStorage(locator, data) {
 
 // get avatar and set it in img.attr("src")
 function getAvatar( username, img ){
+    var theme = $.Options.getTheme();
     if( username == "nobody" ) {
-        img.attr('src', "img/tornado_avatar.png");
+        if(theme == 'nin') {img.attr('src', "theme_nin/img/tornado_avatar.png");}
+        else {img.attr('src', "img/tornado_avatar.png");}
         return;
     }
 
diff --git a/network.html b/network.html
index d562c33..e013ad2 100644
--- a/network.html
+++ b/network.html
@@ -38,8 +38,8 @@
   <nav class="userMenu">
     <ul>
         <li class="userMenu-home"><a href="home.html"><span class="selectable_theme theme_original label">Home</span></a></li>
-        <li class="userMenu-network current selectable_theme theme_original"><a class="label" href="network.html">Network</a></li>
-        <li class="userMenu-profile selectable_theme theme_original"><a class="label" href="profile-edit.html">Profile</a></li>
+        <li class="userMenu-network current selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li>
+        <li class="userMenu-profile selectable_theme theme_original theme_nin"><a class="label" href="profile-edit.html">Profile</a></li>
         <li class="userMenu-config">
           <a class="userMenu-config-dropdown" href="#">
             <div class="config-menu dialog-modal">
@@ -57,9 +57,6 @@
           </a>
         </li>
         <li class="userMenu-dhtindicator selectable_theme theme_calm"><a href="network.html"></a></li>
-        <li class="userMenu-search">
-          <input type="text" class="userMenu-search-field" placeholder="search"/>
-        </li>
     </ul>
   </nav>
   <!-- MENU SUPERIOR END -->
@@ -67,9 +64,9 @@
   <div class="wrapper">
 
     <div class="network singleBlock">
-      <h2> Network status </h2>
-
+      <h2 class="selectable_theme theme_original theme_calm"> Network status </h2>
       <div class="module">
+        <h2 class="selectable_theme theme_nin"> Network status </h2>
         <h3> General information</h3>
         <ul>
           <li>
@@ -129,9 +126,10 @@
 
       </div>
 
-      <h2>Configure block generation</h2>
+      <h2 class="selectable_theme theme_original theme_calm">Configure block generation</h2>
 
       <div class="module">
+        <h2 class="selectable_theme theme_nin">Configure block generation</h2>
         <h3> Generate blocks (send promoted messages)</h3>
         <ul>
           <li>
diff --git a/options.html b/options.html
index edf40ef..8996512 100644
--- a/options.html
+++ b/options.html
@@ -46,85 +46,106 @@
     </ul>
   </nav>
 
-  <div class="wrapper options">
+  <div class="wrapper">
+    <div class="options">
 
-    <div class="language">
+      <input id="tab_language" name="option_tab" type="radio" checked="checked" class="selectable_theme theme_nin"/>
+      <label for="tab_language" class="tabs selectable_theme theme_nin">Language</label>
+      <input id="t-2" name="option_tab" type="radio"  class="selectable_theme theme_nin"/>
+      <label for="t-2" class="tabs selectable_theme theme_nin">Theme</label>
+      <input id="t-3" name="option_tab" type="radio"  class="selectable_theme theme_nin"/>
+      <label for="t-3" class="tabs selectable_theme theme_nin">Sound</label>
+      <input id="t-4" name="option_tab" type="radio"  class="selectable_theme theme_nin"/>
+      <label for="t-4" class="tabs selectable_theme theme_nin">Keys</label>
+      <input id="t-5" name="option_tab" type="radio"  class="selectable_theme theme_nin"/>
+      <label for="t-5" class="tabs selectable_theme theme_nin">Postboard</label>
+      <input id="t-6" name="option_tab" type="radio" class="selectable_theme theme_nin" />
+      <label for="t-6" class="tabs selectable_theme theme_nin">Users</label>
 
-      <div class="module">
-        <p class="label"> Use language </p>
-        <div>
-            <form action="" id="selectLanguage">
-              <select name="" id="language">
-                <option value="auto">Auto</option>
-                <option value="pt-BR">Brazilian Portuguese</option>
-                <option value="zh">Chinese</option>
-                <option value="nl">Dutch</option>
-                <option value="en">English</option>
-                <option value="fr">French</option>
-                <option value="de">German</option>
-                <option value="it">Italian</option>
-                <option value="ja">Japanese</option>
-                <option value="ru">Russian</option>
-                <option value="es">Spanish</option>
-                <option value="tr">Turkish</option>
-              </select>
-            </form>
+      <div class="tab-content">
+
+        <div class="language">
+
+          <div class="module">
+            <p class="label"> Use language </p>
+            <div>
+              <form action="" id="selectLanguage">
+                <select name="" id="language">
+                  <option value="auto">Auto</option>
+                  <option value="pt-BR">Brazilian Portuguese</option>
+                  <option value="zh">Chinese</option>
+                  <option value="nl">Dutch</option>
+                  <option value="en">English</option>
+                  <option value="fr">French</option>
+                  <option value="de">German</option>
+                  <option value="it">Italian</option>
+                  <option value="ja">Japanese</option>
+                  <option value="ru">Russian</option>
+                  <option value="es">Spanish</option>
+                  <option value="tr">Turkish</option>
+                </select>
+              </form>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-    <div class="language">
 
-      <div class="module">
-        <p class="label"> Theme </p>
-        <div>
-            <form action="" id="selectTheme">
-              <select name="" id="theme">
-                <option value="original">Original</option>
-                <option value="calm">Calm</option>
-              </select>
-            </form>
-            <span class="selectable_theme theme_calm">
+        <div class="theme">
+          <div class="module">
+            <p class="label"> Theme </p>
+            <div>
+              <form action="" id="selectTheme">
+                <select name="" id="theme">
+                  <option value="original">Original</option>
+                  <option value="calm">Calm</option>
+                  <option value="nin">Nin</option>
+                </select>
+              </form>
+              <span class="selectable_theme theme_calm">
                 For new features check <a href="https://github.com/iHedgehog/twister-calm">twister-calm repository</a>!
-            </span>
+              </span>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
 
-    <div class="sounds">
+        <div class="sounds">
 
-      <div class="module">
-        <p class="label"> Sound notifications </p>
-        <div>
-            <form action="" id="notifyForm">
-              <p class="label">Mentions</p>
-              <select name="" id="sndMention" class="sndOpt">
-                <option value="false">none</option>
-                <option value="1">beat</option>
-                <option value="2">pip</option>
-                <option value="3">vibro</option>
-                <option value="4">flip</option>
-                <option value="5">click</option>
-              </select><br>
-              <p class="label">Direct Messages</p>
-              <select name="" id="sndDM" class="sndOpt">
-                <option value="false">none</option>
-                <option value="1">beat</option>
-                <option value="2">pip</option>
-                <option value="3">vibro</option>
-                <option value="4">flip</option>
-                <option value="5">click</option>
-              </select>
-              <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
-            </form>
-            <audio id="player"></audio>
+          <div class="module">
+            <p class="label"> Sound notifications </p>
+            <div>
+              <form action="" id="notifyForm">
+                <div>
+                  <p class="label">Mentions</p>
+                  <select name="" id="sndMention" class="sndOpt">
+                    <option value="false">none</option>
+                    <option value="1">beat</option>
+                    <option value="2">pip</option>
+                    <option value="3">vibro</option>
+                    <option value="4">flip</option>
+                    <option value="5">click</option>
+                  </select>
+                </div>
+                <div>
+                  <p class="label">Direct Messages</p>
+                  <select name="" id="sndDM" class="sndOpt">
+                    <option value="false">none</option>
+                    <option value="1">beat</option>
+                    <option value="2">pip</option>
+                    <option value="3">vibro</option>
+                    <option value="4">flip</option>
+                    <option value="5">click</option>
+                  </select>
+                </div>
+                <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
+              </form>
+              <audio id="player"></audio>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
 
-      <div class="keys">
-        <div class="module">
-          <p class="label"> Keys </p>
-          <div>
+        <div class="keys">
+          <div class="module">
+            <p class="label"> Keys </p>
+            <div>
               <form action="" id="keysOpt">
                 <p class="label">Send key</p>
                 <select name="" id="keysSend">
@@ -132,55 +153,48 @@
                   <option value="ctrlenter">Ctrl/Cmd+Enter</option>
                 </select>
               </form>
+            </div>
           </div>
         </div>
-      </div>
 
-  <div class="postboard-display">
-    <div class="module">
-      <p class="label"> Postboard displays </p>
-      <br/>
-      <div>
-        <form action="" id="hideRepliesOpt">
-          <p class="label">Posts that begin with mention</p>
-          <select name="" id="hideReplies">
-            <option value="disable">Show all</option>
-            <option value="only-me">Show only if I am in</option>
-            <option value="following">Show if it's between users I follow</option>
-          </select>
-        </form>
-      </div>
-      <br/>
-      <div>
-        <form action="" id="hideCloseRTsOpt">
-          <p class="label">RTs those are close to original twist</p>
-          <select name="" id="hideCloseRTs">
-            <option value="disable">Show all</option>
-            <option value="show-if">Show if the original is older than</option>
-          </select>
-          <div id="hideCloseRTsDesc">
-            <input name="" id="hideCloseRtsHour" maxlength="2" size="3"/> <span class="label">hour(s)</span>
+        <div class="postboard-display">
+          <div class="module">
+            <p class="label"> Postboard displays </p>
+            <div>
+              <form action="" id="hideRepliesOpt">
+                <p class="label">Posts that begin with mention</p>
+                <select name="" id="hideReplies">
+                  <option value="disable">Show all</option>
+                  <option value="only-me">Show only if I am in</option>
+                  <option value="following">Show if it's between users I follow</option>
+                </select>
+              </form>
+            </div>
+            <div>
+              <form action="" id="hideCloseRTsOpt">
+                <p class="label">RTs those are close to original twist</p>
+                <select name="" id="hideCloseRTs">
+                  <option value="disable">Show all</option>
+                  <option value="show-if">Show if the original is older than</option>
+                </select>
+                <div id="hideCloseRTsDesc">
+                  <input name="" id="hideCloseRtsHour" maxlength="2" size="3"/> <span class="label">hour(s)</span>
+                </div>
+              </form>
+            </div>
           </div>
-        </form>
-      </div>
-    </div>
-  </div>
-
-    <div class="posts-display">
-      <div class="module">
-        <p class="label"> Posts display </p>
-        <br/>
-        <div>
-            <form action="" id="lineFeedsOpt">
-              <p>Line feeds</p>
-              <select name="" id="displayLineFeeds">
-                <option value="disable">Ignore</option>
-                <option value="enable">Display</option>
-              </select>
-            </form>
-        </div>
-        <br/>
-        <div>
+          <div class="module">
+            <p class="label"> Posts display </p>
+            <div>
+              <form action="" id="lineFeedsOpt">
+                <p>Line feeds</p>
+                <select name="" id="displayLineFeeds">
+                  <option value="disable">Ignore</option>
+                  <option value="enable">Display</option>
+                </select>
+              </form>
+            </div>
+            <div>
             <form action="" id="showPreviewOpt">
               <p class="label">Inline image preview</p>
               <select name="" id="displayPreview">
@@ -188,87 +202,84 @@
                 <option value="enable">Display</option>
               </select>
             </form>
-        </div>
-        <br/>
-        <div>
+          </div>
+          <div>
             <form action="" id="useProxyOpt">
-                <p class="label">Use external links behind a proxy</p>
-                <select name="" id="useProxy">
-                    <option value="disable">none</option>
-                    <option value="ssl-proxy-my-addr">ssl-proxy.my-addr.org</option>
-                    <option value="anonymouse">anonymouse.org</option>
-                </select>
-                <input name="" id="useProxyForImgOnly" type="checkbox" /> <span class="label">Use proxy for image preview only</span>
+              <p class="label">Use external links behind a proxy</p>
+              <select name="" id="useProxy">
+                <option value="disable">none</option>
+                <option value="ssl-proxy-my-addr">ssl-proxy.my-addr.org</option>
+                <option value="anonymouse">anonymouse.org</option>
+              </select>
+              <input name="" id="useProxyForImgOnly" type="checkbox" /> <span class="label">Use proxy for image preview only</span>
             </form>
+          </div>
         </div>
-      </div>
-    </div>
-
-    <div class="post-editor">
-        <div class="module">
+        <div class="post-editor">
+          <div class="module">
             <p class="label"> Post editor</p>
-            <br/>
-            <div>
-                <form action="" id="unicodeConversionOpt">
-                    <p class="label">Automatic unicode conversion options</p>
-                    <select name="" id="unicodeConversion">
-                        <option value="disable">Ignore</option>
-                        <option value="enable">Convert all</option>
-                        <option value="custom">Custom</option>
-                    </select>
-                    <div class="suboptions">
-                        <input name="" id="convertPunctuationsOpt" type="checkbox" /> <span class="label">Convert punctuations to unicode</span><br/>
-                        <div>
-                            <label class="label">Supported punctuations: </label>
-                            <span>‥ … ⁇ ⁈ ⁉ ‼ — ⁓</span>
-                        </div> 
-                        <br/>
-                        <input name="" id="convertEmotionsOpt" type="checkbox" /> <span class="label">Convert emotions codes to unicode symbols</span><br/>
-                        <div>
-                            <label class="label">Supported emotions: </label>
-                            <span>😃 😇 🍺 😈 ❤ 😕 😢 😞 😎 😊 😊 😗 😆 😛 😉 😉 😮 😱 😐</span>
-                        </div>
-                        <br/>
-                        <input name="" id="convertSignsOpt" type="checkbox" /> <span class="label">Convert common signs to unicode</span><br/>
-                        <div>
-                            <label class="label">Supported signs:</label>
-                            <span>℡ ℻</span>
-                        </div>
-                        <br/>
-                        <input name="" id="convertFractionsOpt" type="checkbox" /> <span class="label">Convert fractions to unicode</span><br/>
-                        <div>
-                            <label class="label">Supported fractions:</label>
-                            <span>½ ⅓ ⅔ ¼ ¾ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅐ ⅛ ⅜ ⅝ ⅞ ⅑ ⅒</span>
-                        </div>
-                    </div>
-                </form>
-            </div>
-            <br/>
             <div>
-                <form action="" id="splitPostsOpt">
-                    <p class="label">Split long posts</p>
-                    <select name="" id="splitPosts">
-                        <option value="disable">Don't split</option>
-                        <option value="enable">Split all</option>
-                        <option value="only-new">Split only new post</option>
-                    </select>
+              <form action="" id="unicodeConversionOpt">
+                <p class="label">Automatic unicode conversion options</p>
+                <select name="" id="unicodeConversion">
+                  <option value="disable">Ignore</option>
+                  <option value="enable">Convert all</option>
+                  <option value="custom">Custom</option>
+                </select>
+                <div class="suboptions">
+                  <input name="" id="convertPunctuationsOpt" type="checkbox" /> <span class="label">Convert punctuations to unicode</span><br/>
+                  <div>
+                    <label class="label">Supported punctuations: </label>
+                    <span>‥ … ⁇ ⁈ ⁉ ‼ — ⁓</span>
+                  </div> 
+                  <input name="" id="convertEmotionsOpt" type="checkbox" /> <span class="label">Convert emotions codes to unicode symbols</span>
+                  <div>
+                    <label class="label">Supported emotions: </label>
+                    <span>😃 😇 🍺 😈 ❤ 😕 😢 😞 😎 😊 😊 😗 😆 😛 😉 😉 😮 😱 😐</span>
+                  </div>
+                  <input name="" id="convertSignsOpt" type="checkbox" /> <span class="label">Convert common signs to unicode</span><br/>
+                  <div>
+                    <label class="label">Supported signs:</label>
+                    <span>℡ ℻</span>
+                  </div>
+                  <input name="" id="convertFractionsOpt" type="checkbox" /> <span class="label">Convert fractions to unicode</span><br/>
+                  <div>
+                    <label class="label">Supported fractions:</label>
+                    <span>½ ⅓ ⅔ ¼ ¾ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅐ ⅛ ⅜ ⅝ ⅞ ⅑ ⅒</span>
+                  </div>
+                </div>
+              </form>
+              </div>
+
+              <div>
+              <form action="" id="splitPostsOpt">
+                <p class="label">Split long posts</p>
+                <select name="" id="splitPosts">
+                  <option value="disable">Don't split</option>
+                  <option value="enable">Split all</option>
+                  <option value="only-new">Split only new post</option>
+                </select>
                 </form>
+              </div>
+
             </div>
+          </div>
         </div>
-    </div>
 
-    <div class="users">
-        <div class="module">
+        <div class="users">
+          <div class="module">
             <form action="" id="isFollowingMeOpt">
-                <p class="label">Show if a user follows me</p>
-                <select name="" id="isFollowingMe">
-                    <option value="in-profile">Show at profile modal only</option>
-                    <option value="everywhere">Show with every user name</option>
-                </select>
+              <p class="label">Show if a user follows me</p>
+              <select name="" id="isFollowingMe">
+                <option value="in-profile">Show at profile modal only</option>
+                <option value="everywhere">Show with every user name</option>
+              </select>
             </form>
+          </div>
         </div>
-    </div>
 
-  </div>
-  </body>
+      </div><!-- /tab-content -->
+    </div><!-- /options -->
+  </div><!-- /options -->
+</body>
 </html>
diff --git a/profile-edit.html b/profile-edit.html
index b6414e8..3bbcd18 100644
--- a/profile-edit.html
+++ b/profile-edit.html
@@ -37,10 +37,13 @@
   <!-- MENU SUPERIOR INIT --> 
   <nav class="userMenu">
     <ul>
-      <li class="userMenu-home"><a href="home.html"><span class="selectable_theme theme_original label">Home</span></a></li>
-      <li class="userMenu-network selectable_theme theme_original"><a class="label" href="network.html">Network</a></li>
-      <li class="userMenu-profile current selectable_theme theme_original"><a class="label" href="profile-edit.html">Profile</a></li>
-      <li class="userMenu-config">
+      <li class="userMenu-home"><a href="home.html">
+        <span class="selectable_theme theme_original label">Home</span>
+        <span class="menu-news"></span>
+      </a></li>
+      <li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li>
+      <li class="userMenu-profile selectable_theme theme_original theme_nin"><a class="label" href="profile-edit.html">Profile</a></li>
+      <li class="userMenu-config current">
         <a class="userMenu-config-dropdown" href="#">
           <div class="config-menu dialog-modal">
             <div class="mini-profile-info selectable_theme theme_original">
@@ -66,7 +69,6 @@
 
 
   <div class="wrapper">
-
   <!-- ÁREA DE PROFILE PHOTO INIT --> 
     <div class="profile-card forEdition">
       <!-- Coloquei a imagem de fundo do card do usuário como background da div abaixo inline na tag para poder ser alterada dinamicamente -->