//Top members
if ( ! function_exists( 'kleo_top_members' ) ) {
	function kleo_top_members( $atts, $content = null ) {
		$number = $class = '';
		extract( shortcode_atts( array(
			'number' => '33',
			'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' );
}