$(document).ready(function () {

    $(window).load(function () {

        if ($('.dia').html()) {
            $('.dia img').css({ 'width': 110, 'height': 110 })
            $('.dia').css('position', 'relative');
            var tl = $('.dia').offset().left;
            var tt = $('.dia').offset().top;
            var tw = $('.dia').width();
            var th = $('.dia').height();

            function doimg() {
                $('.dia img').bind('mouseover', function () {
                    $('.dia img').unbind('mouseover');
                    $('#imglarge').remove();
                    var il = $(this).offset().left;
                    var it = $(this).offset().top;
                    var iw = $(this).width();
                    var ih = $(this).height();
                    //console.log(il + ' / ' + it + ' / ' + iw + ' / ' + ih);
                    $('.dia').prepend('<img id="imglarge" style="position:absolute;z-index:99;" src="">');
                    var isrc = $(this).attr('src');
                    $('#imglarge').attr('src', isrc);
                    $('#imglarge').css({
                        'left': il - tl,
                        'top': it - tt,
                        //'height':ih,
                        'width': iw
                    });
                    $('#imglarge').animate({
                        'width': tw - 40,
                        'height': th - 40,
                        'left': 0 + 10,
                        'top': 0 + 10
                    }, function () { largeleave(il - tl, it - tt, ih, iw); });

                });
            }
            doimg();

            function largeshrink(v1, v2, v3, v4) {
                $('#imglarge').animate({
                    'left': v1,
                    'top': v2,
                    'height': v3,
                    'width': v4
                }, 'fast', function () {
                    $('#imglarge').remove();
                    doimg();
                });
            }

            function largeleave(v1, v2, v3, v4) {
                $('#imglarge').mouseleave(function () {
                    largeshrink(v1, v2, v3, v4);
                });
            }
        } else {
            $('.dia').hide();
        }
    });




});