$(function () {
    var large = $("#bilder table img[src*='400']");
    var thumbs = $("#bilder table img[src*='198']");
    
    var overlay = $('<img/>')
    .css($.extend(large.position(), { position: 'absolute', zIndex: 1000 }))
    .width(large.width()).height(large.height())
    .attr('src', large.attr('src')).insertAfter(large).hide();
    
    var origSrc = large.attr('src');
    
    var show = function (src) {
        var oldSrc = large.attr('src');
        if (oldSrc == src) return;
        large.attr('src', src);
        overlay.attr('src', oldSrc).show().fadeOut();
    };
    
    thumbs.each(function () {
        var thumbSrc = this.src;
        var fullSrc = ('' + thumbSrc).replace('198', '400');
        $(this)
        .css('cursor', 'pointer')
        .mouseover(function () { show(fullSrc); })
        .mouseout(function () { show(origSrc); });
        
        // preload image
        var img = new Image();
        img.src = fullSrc;
    });
});