function showViewer(url, initId) {
    var initId;
    var curNum = 0;
    var data = {};  
    var items = [];
        
    $(document.body).append(
        '<div id="viewer">'+
        '  <div class="shadow"></div>'+
        '  <div class="box window">'+
        '    <span class="closeViewer button"></span>'+
        '    <div class="image box"></div>'+
        '    <div class="listBg box"></div>'+
        '    <div class="list box"></div>'+
        '    <div class="prevImage button"></div> <div class="nextImage button"></div>'+
        '    <div class="scrollUp button"></div> <div class="scrollDown button"></div>'+
        '  </div>'+
        '</div>'
    );
 
    $('.shadow').css({
        position: 'absolute',
        top: 0,
        left: 0,
        width: $(window).width(),
        height: $(window.document).height(),
        opacity: 0.8,
        backgroundColor: 'black'
    });
    
    $(".window").css({
        top:  ($(window).scrollTop() + 100),
        left: (($(window).width()  - $(".window").width()) / 2)
    });
    
    function showImage(id) {   
        var src = data[id].big;        
    
        $(".image").fadeOut(function() {
            $(".image").html("<img src='"+src+"' />");
            $(".image").fadeIn();
        });    
    }
    
	$.getJSON(url, function(d) {
        data = d;
        var n = 0;
		for(var id in data) {
            //var thumb = $("<div class='thumb'><img src='"+data[i].thumb+"' /><br/>"+data[i].title+"</div>").appendTo(".list");	                    
            var thumb = $("<div class='thumb'><img src='"+data[id].thumb+"' /></div>").appendTo(".list");	                    
            items[n] = id;
            thumb.data('id', id);            
            thumb.click(function() {                  
                showImage($(this).data('id'));                
            });   
            n++;            
        }
        showImage(initId);
	});
    
    
    var scroll = $(".list");
    $(".scrollUp").click(function() {        
        var curPos = scroll.scrollTop();        
        scroll.animate({'scrollTop': curPos - scroll.height()});
    });
    $(".scrollDown").click(function() {        
        var curPos = scroll.scrollTop();        
        scroll.animate({'scrollTop': curPos + scroll.height()});
    });        
    
    $(".nextImage").click(function() {      
        curNum = (curNum < items.length-1) ? curNum+1 : 0;  
        showImage(items[curNum]);
    });      
    $(".prevImage").click(function() {  
        curNum = (curNum > 0) ? curNum-1 : items.length-1
        showImage(items[curNum]);
    });    
    
    $(".closeViewer, .image").click(function() {  
        $(".window").fadeOut(function() {
            $("#viewer").remove();
        });
    }); 
    
};