var images = [];
var first_id = null;
$(document).ready(function(){
    
    // preload images
    $('.img-id').each(function(){
        var pid = $(this).val();
        if (first_id == null) {
          first_id = pid;
        }
        images[pid] = new Image();
        images[pid].src = '/gallery/'+pid+'/';
    });
    
    $('#thumbnail-list img').click(function(){
        var pid = $(this).prev().val();
        if(pid > 0) {
            $('#preview').fadeOut(function(){
                $('#preview').html('');
                $(images[pid]).appendTo('#preview');
                var top = ($('#content').height()-images[pid].height)/2;
                $(images[pid]).css('margin-top',top+'px');
                $('#preview').fadeIn();
            });
        }
    });
   
    if (first_id != null && first_id > 0) {
        $('#preview').fadeOut(function(){
            $('#preview').html('');
            $(images[first_id]).appendTo('#preview');
            var top = ($('#content').height()-images[first_id].height)/2;
            $(images[first_id]).css('margin-top',top+'px');
            $('#preview').fadeIn();
        });
    }

});