$(document).ready(function () {
    setStartupLargeBlock();

    // Thumbnail hover
    $("img.project-thumb-small").hover(
        function () {
            grow($(this));
        },
        function () {
            shrink($(this));
        }
    );

    // Make large block on click
    $("li.project-block-small div.thumbnail a").click(function (event) {
        var link = $(this);
        var href = $(this).attr("href");
        var projecturl = href.substr(href.lastIndexOf('/') + 1);
        var block = link.parents("li.project-block-small");

        window.location = "#" + projecturl;
        createLargeBlock(block, projecturl, event);
        _gaq.push(['_trackEvent', projecturl, 'vergroot'])
    });

    function setStartupLargeBlock() {
        var hash = window.location.hash;
        var projecturl = hash.substring(1, hash.length);
        if (projecturl != "") {
            var block = $("#portfolio").find("[data-url='" + projecturl + "']");
            createLargeBlock(block, projecturl, null);
        }
    }


    function createLargeBlock(block, projecturl, event) {
        // get the container of the thumb
        var section = $("#sctPortfolio");
        var blocksPerLine = parseInt(section.width() / block.width());

        if (blocksPerLine == 1) {
            return true;
        }

        if (event != null) {
            event.preventDefault();
        }
        resetOldLargeBlock();

        // put it somewhere else in the list so the blocks keep flowing nicely
        var list = $("#portfolio");

        if (blocksPerLine < 5) {
            reorderList(list);
        }

        var curposition = block.data("order");
        var curPosOnLine = curposition % blocksPerLine; //zero-based!

        switch (blocksPerLine) {
            case 2:
                // the right blocks have to move to the left
                if (curPosOnLine == 1) {
                    var leftpos = 0;
                    if (curposition > blocksPerLine) {
                        leftpos = curposition - 1;
                    }
                    var left = list.children("li").eq(leftpos);
                    left.before(block);
                }
                break;
            case 3:
                // the right blocks have to move to the left
                if (curPosOnLine == 1) {
                    var leftpos = 0;
                    if (curposition > blocksPerLine) {
                        leftpos = curposition - curPosOnLine;
                    }
                    var left = list.children("li").eq(leftpos);
                    left.before(block);
                } else if (curPosOnLine == 2) { // the most right block to next line on left
                    var leftpos = 4; // one extra because when removing the block, this one shifts one to left!
                    if (curposition > blocksPerLine) {
                        leftpos = curposition + 2;
                    }
                    var left = list.children("li").eq(leftpos);
                    left.before(block);
                }
                break;
            case 4:
                switch (curPosOnLine) {
                    case 1:
                        block.addClass("floatright");
                        break;
                    case 2:
                        // to first position
                        // get the first on the line: move 2 left
                        var beforepos = 0;
                        if (curposition > blocksPerLine) {
                            beforepos = curposition - 2;
                        }
                        var first = list.children("li").eq(beforepos);
                        first.before(block);
                        break;
                    case 3:
                        // to second position: move 2 left and float right
                        var beforepos2 = 1;
                        if (curposition > blocksPerLine) {
                            beforepos2 = curposition - 2;
                        }
                        var second = list.children("li").eq(beforepos2);
                        second.before(block);

                        block.addClass("floatright");
                        break;
                }
                break;
            case 5:
                if (curPosOnLine > 1) {
                    block.addClass("floatright");
                }
                break;
        }

        // make the clicked box big
        if (blocksPerLine > 2) {
            block.addClass("project-big");
        } else {
            block.addClass("project-medium");
        }

        // get contents from controller (ajax)
        var jqxhr = $.get("/Portfolio/GetProjectSummary/" + projecturl, function (html) {
            block.children("div.big-content").html(html);
        })
        .error(function () { alert("unable to get content"); });

        block.children("div.big-content").show();
        block.children("div.thumbnail").hide();

        list.find("li div.thumbnail img").each(function () {
            shrink($(this));
        });

        $("html,body").animate({ scrollTop: block.offset().top - 300 }, 500);
    }

    function resetOldLargeBlock() {
        // Remove new content and show old thumb from the now-big box (if any)
        var bigproject = $("li.project-big");
        if (!bigproject.length) {
            bigproject = $("li.project-medium"); // perhaps there are only two blocks per line: medium block
            bigproject.removeClass("project-medium");
        } else {
            bigproject.removeClass("project-big");
        }
        if (bigproject.length) {
            bigproject.find("div.big-content").hide();
            bigproject.find("div.thumbnail").show();
            bigproject.removeClass("floatright");
        }
    }

    function reorderList(list) {
        list.children("li").tsort({ data: "order" }); // using tinysort plugin
    }

    $("div.big-content").delegate("div.bar div.actions img.close", "click", function () {
        closeLargeBlock();
    });

    $(document).keyup(function (event) {
        var bigblock = $("ul#portfolio li.project-big, #project")
        if (bigblock.length) {
            var gallery = bigblock.find(".gallery");
            var key = event.which;
            switch (key) {
                case 27: //esc
                    closeLargeBlock();
                    break;
                case 37: //left
                    showPicture(gallery, false);
                    break;
                case 39: //right
                    showPicture(gallery, true);
                    break;
            }
        }
    });

    function closeLargeBlock() {
        resetOldLargeBlock();
        reorderList($("ul#portfolio"));
        removeHash();
    }

    function removeHash() {
        if ("pushState" in history) {
            history.pushState("", document.title, window.location.pathname);
        } else {
            window.location.hash = "";
        }
    }

    function grow(img) {
        var src = img.attr("src").replace("tmb1_", "tmb2_");
        img.attr("src", src);
        img.removeClass("project-thumb-small");
        img.addClass("project-thumb-large");
    }

    function shrink(img) {
        var src = img.attr("src").replace("tmb2_", "tmb1_");
        img.attr("src", src);
        img.removeClass("project-thumb-large");
        img.addClass("project-thumb-small");
    }

    /*
    gallery
    */
    //    $("div.big-content,#project").delegate(".gallery", "hover", function () {
    //        $("div#previous").toggle();
    //        $("div#next").toggle();
    //    });

    $(".big-content,#project").delegate("#previous", "click", function () {
        var gallery = $(this).closest(".gallery");
        showPicture(gallery, false);
    });

    $(".big-content,#project").delegate("#next", "click", function () {
        var gallery = $(this).closest(".gallery");
        showPicture(gallery, true);
    });

    $(".big-content,#project").delegate("a.picturelink", "click", function (event) {
        event.preventDefault();
        var gallery = $(this).closest(".gallery");
        setPictureProperties(gallery, $(this));
    });

    function showPicture(gallery, next) {

        linkForCurrentImg = gallery.find("a.selected");

        var newlink;
        if (next) {
            newlink = linkForCurrentImg.parent().next("li").find("a.picturelink");
            if (!newlink.length) {
                newlink = linkForCurrentImg.parent().parent().find("li:first a");
            }
        } else {
            newlink = linkForCurrentImg.parent().prev("li").find("a.picturelink");
            if (!newlink.length) {
                newlink = linkForCurrentImg.parent().parent().find("li:last a");
            }
        }

        setPictureProperties(gallery, newlink);
    }

    function setPictureProperties(gallery, link) {
        var href = link.attr("href");
        var alt = link.data("alt");
        var title = link.data("title");

        var bar = link.closest(".bar");
        if (!gallery.length) {
            gallery = bar.parent();
        }

        var img = gallery.children(".largeImage").children("img");
        img.attr("src", href);
        img.attr("alt", alt);
        img.attr("title", title);

        bar.find("a.selected").removeClass("selected");
        link.addClass("selected");
    }
});