$(document).ready(function() {

    // Forcibly unhiding/hiding these so that Konqueror knows their initial dimensions.
    $("img.project-icon-big").css({display:"block"});
    $("img.project-icon-big").css({display:"none"});
    
    $("img.project-icon").bind("mouseenter", function () {

        var offset_left = ($(this).offset().left);
        var offset_top  = ($(this).offset().top);
        
        var big_icon = $(this).siblings("img.project-icon-big");
        big_icon.stop(); // Stop currently running animations.

        // Make sure we use the default dimensions, incase the mouseleave animation was still running.
        //big_icon.css({width:"", height:""});

        // Store the original image dimensions.
        if ( big_icon.data("orig_width") == undefined && big_icon.data("orig_height") == undefined ) {

            big_icon.data("orig_width", big_icon.width());
            big_icon.data("orig_height", big_icon.height());
        }
        
        big_icon.css('position', 'absolute');
        big_icon.css('left', offset_left + 'px');
        big_icon.css('top',  offset_top + 'px');

        // Only do size animation if initial width/height were available.
        //if (end_width && end_height) {
            big_icon.css('width', $(this).width() + 'px');
            big_icon.css('height', $(this).height() + 'px');
        //}


        big_icon.fadeIn(200);
        big_icon.css('display', 'block'); // .show() doesn't work in Konqueror 3.5.9
        big_icon.animate( {width:big_icon.data("orig_width"), height:big_icon.data("orig_height")}, {queue:false, duration:200});
    });

    $("img.project-icon-big").bind("mouseleave", function () {

        var small_icon = $(this).siblings("img.project-icon");

        var start_width  = $(this).width();
        var start_height = $(this).height();
        var end_width    = small_icon.width();
        var end_height   = small_icon.height();

        $(this).animate( {width:end_width, height:end_height}, {queue:false, duration:200});
        $(this).fadeOut(200, function () { $(this).css({width:"", height:""}); } ); // After it fades, reset to default width/height.

    });

});