function showPics(counter) {
    if(! ('.show-pic-bg').length==0) {
        d = document.createElement('div');
        d.className = 'show-pic-bg';
        document.body.appendChild(d);
        $(d).hide();
    }

    $('.show-pic-bg').fadeIn();
    if($('.show-pic-p').length==0) {
        p = document.createElement('div');
        p.className='show-pic-p';
        document.body.appendChild(p);
        $(p).hide();
    }
       
    $('.show-pic-bg').click(hidePics);
    nextPic(counter);
}
function hidePics() {
    $('.show-pic-bg').fadeOut('fast', function(){
        $('.show-pic-bg').remove()
    });
    $('.show-pic-p').fadeOut('fast', function(){
        $('.show-pic-p').remove();
    });
    $(document).unbind('keydown')
}

function nextPic(c) {
    $('.show-pic-p').fadeOut('fast', function()
    {
        $('.show-pic-p').html('');
        var i = new Image();
        i.src="/user_pics/"+urls[c]+".jpg";
        $('.show-pic-p').append(i);
        $(i).bind('load', function() {
            p = $(".show-pic-p");
            var wh = i.width/i.height;
            i.height = Math.min(document.body.clientHeight-30, i.height);
            i.width = Math.min(document.body.clientWidth-30, i.height*wh);
            i.height = i.width/wh;
            i.height = Math.min(i.height, document.body.clientHeight-40);
            p.css("margin-left",-(i.width/2+10)+"px");
            p.css("margin-top",-(i.height/2+10)+"px");

            $(document).unbind('keydown').bind('keydown', function(e){
                if(e.which == 27) hidePics();
                else if(e.which == 37) nextPic(c-1<0?urls.length-1:c-1);
                else if(e.which == 39) nextPic(c+1>=urls.length?0:c+1);
                else if(e.which==38 || e.which==40) return false;
            });
                p.unbind('click').bind('click', function() {
                    p.fadeOut('fast', function() {
                        nextPic(c+1>=urls.length?0:c+1);
                    });
              
            });
            p.fadeIn();
        });
    });
}
