//Top members
if (!function_exists('kleo_top_members')) {
    function kleo_top_members( $atts, $content = null ) {
        $number = $class  = '';
        extract(shortcode_atts(array(
            'number' => '24',
            'class' => ''
            ), $atts));

    $output = '

    <div class="section-members '.$class.'">
        <div class="item-options" id="members-list-options">
          <a href="'.bp_get_members_directory_permalink().'" data-id="newest" class="members-switch">'.__("Newest", 'kleo_framework').'</a>
          <a href="'. bp_get_members_directory_permalink().'" data-id="active" class="selected members-switch">'.__("Active", 'kleo_framework').'</a>
          <a href="'.bp_get_members_directory_permalink().'" data-id="popular" class="members-switch">'.__("Popular", 'kleo_framework').'</a>
        </div>';

        $output .= '<ul class="item-list kleo-bp-active-members">';
        if ( bp_has_members( bp_ajax_querystring( 'members' ).'&type=active&max='.$number ) ) :
            while ( bp_members() ) : bp_the_member();
            $output .= section_members_li();

            endwhile;
        endif;
        $output .='</ul>';

        $output .= '<ul class="item-list kleo-bp-newest-members" style="display:none;">';
        if ( bp_has_members( bp_ajax_querystring( 'members' ).'&type=newest&max='.$number ) ) :
            while ( bp_members() ) : bp_the_member();
            $output .= section_members_li('newest');

            endwhile;
        endif;
        $output .='</ul>';

        $output .= '<ul class="item-list kleo-bp-popular-members" style="display:none;">';
        if ( bp_has_members( bp_ajax_querystring( 'members' ).'&type=popular&max='.$number ) ) :
            while ( bp_members() ) : bp_the_member();
            $output .= section_members_li('popular');

            endwhile;
        endif;
        $output .='</ul>';

        $output .= '</div><!--end section-members-->';

$output .= <<<JS
<script type="text/javascript">
jQuery(document).ready(function() {

    jQuery(".members-switch").click(function() {
        var bpMembersContext = jQuery(this).parent().parent();
        var container = "ul.kleo-bp-"+jQuery(this).attr('data-id')+"-members";

        jQuery("ul.item-list", bpMembersContext).hide();
        jQuery(".members-switch").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(container, bpMembersContext).show(0, function() {
            jQuery(container+" li").hide().each(function (i) {
                var delayInterval = 150; // milliseconds
                jQuery(this).delay(i * delayInterval).fadeIn();
            });
        });
        return false;
    });
});

jQuery(function () {
    if (!isMobile()) {
        jQuery('.kleo-bp-active-members').hide();
        jQuery('.section-members').one('inview', function (event, visible) {
          if (visible) {
              var container = ".kleo-bp-active-members";
              jQuery(container).show(0, function() {
                  jQuery(container+" li").hide().each(function (i) {
                      var delayInterval = 150; // milliseconds
                      jQuery(this).delay(i * delayInterval).fadeIn();
                  });
              });
          }
        });
    }

});

</script>
JS;
        return $output;

    }
    add_shortcode('kleo_top_members', 'kleo_top_members');
}