<style type="text/css">
    #fa_friends_widget { font-size:12px; font-family:Arial, Helvetica, Verdana, Sans-serif; }
    #fa_friends_stats { text-align:center; }
    #fa_friends_list { max-height:200px; overflow-y:auto; }
    .fa_friend_row { margin:10px 0; }
    .fa_friend_info { float:left; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; width:90px; }
    .fa_friend_online, a.fa_friend_username { color:#999 !important; text-decoration:none; }
    .fa_friend_avatar { background:#FFF; border:2px solid #999; height:30px; width:30px; vertical-align:top; margin-right:6px; display:block; float:left; }
    .fa_friend_avatar img { height:30px; width:30px; }
    .fa_friend_row:hover .fa_friend_online, .fa_friend_row:hover a.fa_friend_username { color:#777 !important; }
    .now_online .fa_friend_avatar { border-color:#69C; }
    .now_online .fa_friend_online, .now_online a.fa_friend_username { color:#69C !important; }
    .fa_friend_row.now_online:hover .fa_friend_online, .fa_friend_row.now_online:hover a.fa_friend_username { color:#47A !important; }
    #fa_friends_actions { color:#666; background:#FFF; border:1px solid #CCC; position:absolute; padding:3px 0; z-index:99999; }
    #fa_friends_actions a { color:#333; text-decoration:none; padding:4px 12px; display:block; }
    #fa_friends_actions a:hover { color:#FFF; background:#38F; }
    #fa_friends_actions a.danger:hover { background:#F33; }
    #fa_friends_actions .danger { border-top:1px solid #CCC; margin-top:3px; }
    </style>
    <div id="fa_friends_widget">
             
      <div id="fa_friends_stats">
             
      </div>
             
      <div id="fa_friends_list">
                   
          <div id="fa_friends_online">
                 
          </div>
                 
      </div>
             
      <div id="fa_friends_actions" style="display:none">
             
      </div>
    </div>
      <script type="text/javascript">//<![CDATA[
    (function() {
      window.fafl = {
        cache : 5*60*1000,
     
        lang : {
          online : 'متصل',
          offline : 'غير متصل',
          loading : 'جاري عرض قائمة أصدقائك',
          stats : 'أصدقائك المتواجدون الآن : %{ONLINE}',
          send_message : 'إرسالة رسالة خاصة',
          view_profile : 'مشاهدة الملف الشخصي',
          view_topics : 'مشاهدة  مواضيعه',
          view_posts : 'مشاهدة مساهماته',
          remove : 'حدف من القائمة',
          delete_friend : 'هل أنت متأكد بحدف %{NAME} من قائمة أصدقائك ؟',
          no_friends : 'لا يوجد لديك أصدقاء.'
        },
     
        node : {
          widget : document.getElementById('fa_friends_widget'),
          list : document.getElementById('fa_friends_list'),
          stats : document.getElementById('fa_friends_stats'),
          online : document.getElementById('fa_friends_online'),
          actions : document.getElementById('fa_friends_actions')
        },
     
        lastNode : null,
        toggleActions : function(node) {
          if (fafl.lastNode == node && !/none/.test(fafl.node.actions.style.display)) {
            fafl.node.actions.style.display = 'none';
            fafl.lastNode = null;
          } else {
            var offset = jQuery(node).offset(),
                id = node.href.replace(/.*?\/u(\d+).*/, function(M, S1) { return S1 }),
                name = jQuery(node).text();
         
            fafl.lastNode = node;
            fafl.node.actions.innerHTML = '<a href="/u' + id + '">' + fafl.lang.view_profile + '</a><a href="/st/' + name + '">' + fafl.lang.view_topics + '</a><a href="/spa/' + name + '">' + fafl.lang.view_posts + '</a><a href="/privmsg?mode=post&u=' + id + '">' + fafl.lang.send_message + '</a><a class="danger" href="/profile?mode=editprofile&page_profil=friendsfoes&remove=' + id + '" onclick="fafl.remove(this, \'' + name + '\');return false;">' + fafl.lang.remove + '</a>';
            fafl.node.actions.style.left = offset.left + 'px';
            fafl.node.actions.style.top = offset.top + 20 + 'px';
            fafl.node.actions.style.display = 'block';
          }
        },
     
        bindActionEvents : function() {
          jQuery(document).on('click', function(e) {
            if (/fa_friend_username/.test(e.target.className)) {
              e.preventDefault();
              fafl.toggleActions(e.target);
            } else if (/block/.test(fafl.node.actions.style.display)) {
              fafl.node.actions.style.display = 'none';
            }
          });
     
          jQuery(fafl.node.actions).mouseleave(function() {
            this.style.display = 'none';
          });
        },
     
        remove : function(node, name) {
          var del = confirm(fafl.lang.delete_friend.replace(/%\{NAME\}/, name));
       
          if (del) {
            if (storage) {
              storage.removeItem('faFriendsWidgetExp');
            }
            window.location.href = node.href;
          }
        },
     
        processed : 0,
        quota : 0
      };
   
      var storage = window.localStorage;
   
      if (storage && storage.faFriendsWidget && storage.faFriendsIdent == _userdata.user_id && storage.faFriendsWidgetExp > +new Date - fafl.cache) {
        fafl.node.widget.innerHTML = storage.faFriendsWidget;
        fafl.node.actions = document.getElementById('fa_friends_actions');
        fafl.bindActionEvents();
      }
   
      else {
        fafl.node.stats.innerHTML = fafl.lang.loading;
   
        jQuery.get('/profile?mode=editprofile&page_profil=friendsfoes', function(d) {
          for (var a = jQuery('div:has(> a[href*="page_profil=friendsfoes&remove"]) a:first-child', d), i = 0, j = a.length, container = document.createElement('DIV'), temp, row; i < j; i++) {
            temp = document.createElement('DIV');
            temp.id = 'fa_friend_u' + a[i].href.replace(/.*?\/u(\d+).*/, function(M, S1) { return S1 });
            temp.className = 'fa_friend_row';
            temp.innerHTML = '<a href="' + a[i].href + '" class="fa_friend_avatar"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png"/></a><div class="fa_friend_info"><a href="' + a[i].href + '" class="fa_friend_username">' + jQuery(a[i]).text() + '</a><br/><span class="fa_friend_online">' + fafl.lang.offline + '</span></div><div class="clear"></div>';
            container.appendChild(temp);
          }
       
          if (!j) {
            fafl.node.stats.innerHTML = fafl.lang.no_friends;
            return false;
          }
       
          container.id = 'fa_friends_offline';
          fafl.node.offline = container;
          fafl.node.list.appendChild(container);
          fafl.bindActionEvents();
       
          row = jQuery('.fa_friend_row', container);
          fafl.quota = row.length;
       
          row.each(function() {
            var t = this;
         
            jQuery.get('/' + t.id.slice(10), function(d) {
              var ava = jQuery('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
              jQuery('.fa_friend_avatar img', t).attr('src', ava ? ava.src : 'http://2img.net/i/fa/invision/pp-blank-thumb.png');
               
              if (jQuery('#profile-advanced-right em, .module-title em', d)[0]) {
                t.className += ' now_online';
                jQuery('.fa_friend_online', t).text(fafl.lang.online);
                fafl.node.online.appendChild(t);
              }
           
              if (++fafl.processed == fafl.quota) {
                var online = jQuery('.fa_friend_row', fafl.node.online).length;
                fafl.node.stats.innerHTML = fafl.lang.stats.replace(/%\{ONLINE\}/g, online).replace(/%\{TOTAL\}/g, online + jQuery('.fa_friend_row', fafl.node.offline).length);
               
                if (storage) {
                  storage.faFriendsIdent = _userdata.user_id;
                  storage.faFriendsWidget = fafl.node.widget.innerHTML;
                  storage.faFriendsWidgetExp = +new Date;
                }
              }
            });
          });
        });
      }
    }());
    //
    //]]></script>