$(document).ready(function() {

    function checkNavigation(current, total) {

        if (current == total) {
            $(".next").fadeOut("fast");
        }
        else {
            $(".next").fadeIn("fast");
        }

        if (current === 0) {
            $(".prev").fadeOut("fast");
        }
        else {
            $(".prev").fadeIn("fast");
        }

    }

    function showInfo(itemIndex) {
        $(".item" + itemIndex).animate({
            marginTop: "-120px"
        }, 700);
    }

    function hideInfo(itemIndex) {
        $(".item" + itemIndex).animate({
            marginTop: "0px"
        }, 700);
    }

    function portfolioItem(s) {

        var title = s.title;
        var company = s.company;
        var project = s.project;
        var image = s.image;
        var subTitle = s.subTitle;

    }

    function buildPortfolio(targetElement, portfolioItems) {

        $(portfolioItems).each(function(index, portfolioItem) {

            var item = $("<div/>")
				.addClass("portfolio-item")
				.attr("id", "portfolio-item")
				.css("background-image", "url('" + portfolioItem.image + "')");

            var itemContainer = $("<div/>").addClass("portfolio-item-content-container");

            var itemContent = $("<div/>")
				.addClass("portfolio-item-content")
				.addClass("item" + index);

            itemContent.append($("<h1/>").html(portfolioItem.title));

            itemContent.append($("<div/>").addClass("subtitle").html(portfolioItem.subTitle));

            var row1 = $("<div/>").addClass("row");
            row1.append($("<div/>").addClass("label").html(portfolioItem.companyLabel));
            row1.append($("<div/>").addClass("text").html(portfolioItem.company));
            itemContent.append(row1);

            var row2 = $("<div/>").addClass("row");
            row2.append($("<div/>").addClass("label").html(portfolioItem.projectLabel));
            row2.append($("<div/>").addClass("text").html(portfolioItem.project));
            itemContent.append(row2);

            itemContainer.append(itemContent);

            item.append(itemContainer);

            item.append($("<br/>").css("clear", "both"));

            $(targetElement).append(item);

        });

    }

    var projects = [];

    $(".data-item").each(function(index, portfolioItem) {

        projects.push({
            title: $($(portfolioItem).find("h2 .sIFR-alternate")).html() == null ? $($(portfolioItem).find("h2")).html() : $($(portfolioItem).find("h2 .sIFR-alternate")).html(),
            subTitle: $($(portfolioItem).find("h3")).html(),
            company: $($(portfolioItem).find(".company")).html(),
            companyLabel: $($(portfolioItem).find(".company-label")).html(),
            project: $($(portfolioItem).find(".project")).html(),
            projectLabel: $($(portfolioItem).find(".project-label")).html(),
            image: $($(portfolioItem).find("img")).attr("src")

        });

    });

    //$.shuffle(projects);

    initPageGraphics("/Content/img/header-images/portfolio.jpg", "/Content/img/ribbons/ribbon-portfolio.png");

    disableButton("#mnuPortfolio");

    buildPortfolio("#portfolio-items", projects);

    // select #flowplanes and make it scrollable. use circular and navigator plugins
    var api = $("#flowpanes").scrollable({
        size: 1,
        api: true,
        onSeek: function(event, itemIndex) {

            showInfo(this.getIndex());

            checkNavigation(this.getIndex(), this.getPageAmount() - 1);

        },

        onBeforeSeek: function(event, itemIndex) {

            hideInfo(this.getIndex());

        }

    });

    $(".next").hover(function() {
        $(".next").css("background-position", "left bottom");
    }, function() {
        $(".next").css("background-position", "left top");
    });

    $(".prev").hover(function() {
        $(".prev").css("background-position", "left bottom");
    }, function() {
        $(".prev").css("background-position", "left top");
    });

    checkNavigation(0, api.getPageAmount() - 1);

    showInfo(0);

});