<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<div id="loading__main">
   <img id="loading__img" src="https://www.tsunami.gov/images/loader.gif" alt="Loading..." />
</div>
<header>
   <div class="navigation__bar">
      <ul>
         <li><a href="/home"><i class="fa fa-home"></i> Home</a></li>
         <li><a href="/forum"><i class="fa fa-pencil"></i> Forum</a></li>
         <li><a href="/shop"><i class="fa fa-shopping-cart"></i> Winkel</a></li>
         <li><a href="/vote"><i class="fa fa-user"></i> Voten</a></li>
         <li><a href="/vote"><i class="fa fa-user"></i> Dynmap</a></li>
         <li class="dropdown">
            <a href="#"><i class="fa fa-question-circle"></i> Leden</a>
            <ul>
               <li><a href="/home"><i class="fa fa-info-circle"></i> Staff team</a></li>
               <li><a href="/members"><i class="fa fa-question-circle"></i> Leden</a></li>
            </ul>
         </li>
                  <li class="dropdown">
            <a href="#"><i class="fa fa-question-circle"></i> Meer</a>
            <ul>
               <li><a href="/regels"><i class="fa fa-info-circle"></i> Regels</a></li>
               <li><a href="/solliciteren"><i class="fa fa-question-circle"></i> Soliciteeren</a></li>
               <li><a href="/home"><i class="fa fa-book"></i> Feedback/a></li>
            </ul>
         </li>
      </ul>
   </div>
   <div class="middle__bar">
      <div class="logo__main">
         <img src="https://i.imgur.com/dCBxcvw.png" />
      </div>
      <div class="server__box_wrap">
         <div id="player__heads" class="box" style="display:inline-block;position: absolute;margin-left: 15%;">
            <div class="player__list"></div>
         </div>
         <div class="server__box">
            <div class="players"><span id="online"></span> Spelers Online</div>
         </div>
         <div class="server__box">
            <div id="ip" data-clipboard-text="mc.dreamsurvival.nl">mc.dreamsurvival.nl</div>
            <div class="click__copy">klik om te kopieren!</div>
         </div>
      </div>
   </div>
   <a href="#" class="scroll__top"><i class="fa fa-arrow-up"></i></a>
</header>


<script>
$(function() {
  $('#player__heads').hide();
  $('.m_minecraftserverstatus_new').hide(); //Might require preset ID, if not working message me and I will fix it.
  $('.players').click(function(){
   $('#player__heads').fadeToggle('slow');
  });
  var onlinePlayerHeads = $(".player-grid a");

  onlinePlayerHeads.each(function( i ) {
    var avtLink = $(this).children('img').attr('src');
    var names = $(this).data('minitooltip');

    $("#player__heads").append('<a class="player__online" data-minitooltip='+ names +'><img src='+ avtLink +'></a>');


  });
});
$(function() {
    $('#enjin-tray-messaging,#enjin-tray').hide(0);
    $('header').prependTo('.body-wrap-2');
    var onlUsers = $('.featured').length;
    var news_auth = $('.m_news .info a').contents().filter(function() { return this.nodeType == 3; }).text();
    $('.m_news').find('.info a').text('Posted By ' + news_auth);
    $('.m_membersonline').find('.mask').text('Online Users - ' + onlUsers);
    $(window).load(function() {
        $('#loading__main').hide();
        $('#enjin-tray-messaging,#enjin-tray').show(0);
        var ip = new Clipboard('#ip');

        ip.on("success", function() {
            $('.click__copy').html("IP has been copied!");

            setTimeout(function() {
                $('.click__copy').html("Click to Copy!");
            }, 3000);

        });
        $('.server__ip').hover(function() {
            $('.tooltip').stop().fadeIn();
        }, function() {
            $('.tooltip').stop().fadeOut();
        });
        $('.scroll__top').click(function() {
            $('html, body').animate({
                scrollTop: 0
            }, '400');
        });
        $('#ip, #ip1, .scroll__top, .players').css('cursor', 'pointer');
        $(window).on("scroll", function() {
            if ($(this).scrollTop() > 100) {
                $('.scroll__top').fadeIn(300);
            } else {
                $('.scroll__top').fadeOut(300);
            }
        });
        $(document).ready(function() {

            getOnlinePlayers();

        });

        function getOnlinePlayers() {

            $.getJSON("https://mcapi.us/server/status?ip=mc.dreamsurvival.nl", function(json) {
                if (json.players.now !== undefined) {
                    $("#online,#online1").html(json.players.now);
                } else {
                    $("#online,#online1").html("#");
                }

                setTimeout(getOnlinePlayers, 5000);
            });
        }

    });
});
</script>

</html>