$(document).ready(function(){	
    $.getJSON(
        '/app.php?q=users_m',
        function (usr){            
            $.each(usr.data, function(key, value) { 

                var liElem = $('<li></li>');
                
                if (value['vip'] == 1){
                    liElem.addClass('vip');
                }
                
                $('<a id="tip_'+value['id']+'" href="/user/?id='+value['id']+'" class="u-s-photo" style="width: 46px; height: 62px; background-image: url('+value['avatar']+'); background-position: center center; background-repeat: no-repeat;"></a>').appendTo(liElem);
                
                var divElem = $('<div id="dtip_'+value['id']+'"></div>');
                divElem.appendTo(liElem);
                
                divElem.append('<span style="color: #0066cc;"> ' + value['name'] + '</span>, <img src="/design/images/sex' + value['sex'] + '.png">');
                divElem.append('<address>' + usr.city +  ', ' + value['age'] + '</address>');
                divElem.append('<div style="border-top: 1px solid #ccc; margin-top: 15px; padding-top: 5px;">Ищу ' + ( value['sex'] == 0 ? 'парня' : 'девушку' ) +'</div>');
                divElem.append('<span class="orangetext">Сейчас на сайте!</span>');
               
                $('#navElem').append(liElem);
            }); 
            
            $("#navElem a.u-s-photo").tooltip({
            	bodyHandler: function() {
            	    var divId = '#d' + $(this).attr('id');
            		return $(divId).html();
            	},
            	showURL: false
            });
        }
    );  
    
    $('#showTopBoys').click( function () {
        $(this).parent().attr('class', 'selected');
        $('#showTopGirls').parent().removeClass('selected');
        
        $('#femalePhotos').hide();
        $('#malePhotos').show();
    });    
        
    $('#showTopGirls').click( function () {
        $(this).parent().attr('class', 'selected');
        $('#showTopBoys').parent().removeClass('selected');
        
        $('#malePhotos').hide();
        $('#femalePhotos').show();        
    });
});