$(document).ready(function () {
    var clicked = false;
    $('.half_width_third_r img', this).click(function (event) {
        event.preventDefault();
        if (clicked)
            return false;
        clicked = true;
        
        setHouse($(this));
        event.preventDefault();
    });
    function setHouse(thumbImg) {
        largeImg = $(".half_width_third_l img:first");
        var obj = $('.element_title_np div:first');
        var objClone = $('.element_title_np div:first').clone();


        srcNewLarge = thumbImg.attr('src'); //.replace("_thumb", "");
        srcNewThumb = $(".half_width_third_l img:first").attr('src'); //.replace(".jpg", "_thumb.jpg").replace(".jpeg", "_thumb.jpeg").replace(".png", "_thumb.png");

        largeWidth = largeImg.width();
        largeHeight = largeImg.height();

        thumbWidth = thumbImg.width();
        thumbHeight = thumbImg.height();

        thumbPos = thumbImg.position();
        thumbOffset = thumbImg.offset();
        imagePos = largeImg.position();
        imageOffset = largeImg.offset();

        //alert(thumbPos.left + " " + thumbOffset.left);
        thumbImg.animate({ marginLeft: "-=" + (thumbOffset.left - imageOffset.left) + "px",
            marginTop: "-=" + (thumbOffset.top - imageOffset.top) + "px", width: largeWidth, height: largeHeight
        }, 500);

        largeImg.animate({ marginLeft: "+=" + (thumbOffset.left - imageOffset.left) + "px",
            marginTop: "-=" + (-thumbOffset.top + imageOffset.top) + "px", width: thumbWidth, height: thumbHeight
        }, 500);



        $(".half_width_third_l img").fadeOut(0, function () {
            $(".half_width_third_l img").attr('src', srcNewLarge).bind('readystatechange load', function () {
                if (this.complete) {
                    $(this).removeAttr("style");
                    $(this).fadeIn(0);
                }
            });
        });
        thumbImg.fadeOut(0, function (event) {
            thumbImg.attr('src', srcNewThumb).bind('readystatechange load', function () {
                if (this.complete) {
                    $(this).removeAttr("style");
                    $(this).fadeIn(0);
                }
            });
        });


        thumbTitle = thumbImg.attr('title');
        largeTitle = $(".half_width_third_l img").attr('title');

        thumbSuprafata = thumbImg.attr('suprafata');
        largeSuprafata = $(".half_width_third_l img").attr('suprafata');

        thumbLink = thumbImg.attr('data-link');
        largeLink = $(".half_width_third_l img").attr('data-link');


        objClone.prependTo('.element_title_np');
        objClone.css('display', 'none');
        objClone.children('.element_title_np h2:first').text(thumbImg.attr('title')); //change title
        objClone.children('.half_width_third_r .grey_item:first').html(thumbImg.attr('suprafata') + " m²"); //change suprafata
        objClone.children('.half_width_third_r .red_link:first').attr('href', thumbLink); //change link
        // swap data
        $(".half_width_third_l img").attr('title', thumbTitle);
        thumbImg.attr('title', largeTitle);
        $(".half_width_third_l img").attr('suprafata', thumbSuprafata);
        thumbImg.attr('suprafata', largeSuprafata);
        $(".half_width_third_l img").attr('data-link', thumbLink);
        thumbImg.attr('data-link', largeLink);
        $(".half_width_third_l img").parent().attr('href', thumbLink);
        thumbImg.parent().attr('href', largeLink);

        obj.slideFadeToggle(500);
        objClone.slideFadeToggle(500);
        obj.remove();
        // setTimeout(new function () { objClone.removeAttr("style") }, 1000);
        setTimeout(function () { objClone.removeAttr("style"); clicked = false; }, 500);

    }
});