$(document).ready(function () {

    //$(".filter-tab").click(function () {
    //    $("#block2").animate({ width: "90%" }, 1000)
    //         .animate({ fontSize: "24px" }, 1000)
    //         .animate({ borderLeftWidth: "15px" }, 1000);
    //});

    //Reveals first content
    $(".filter-content.one").show();

    //Filter box tab is clicked function
    $(".filter-tab").click(function () {

        //Sets selected state for tab
        if ($(this).hasClass("selected") == false) {
            $(".filter-tab").removeClass('selected');
            $(this).addClass('selected');
        }

        //Hides all content
        $(".filter-content").hide();

        //Reveals selected content
        if ($(this).hasClass("one") == true) {
            //$(".one").show();
            animation($(".filter-content.one"), "30px", $(".one"));
            animation($(".filter-tab.one"), "4px", $(".one"));
            animation($(".filter-tab.two"), "225px", $(".one"));
            animation($(".filter-tab.three"), "261px", $(".one"));
        }
        else if ($(this).hasClass("two") == true) {
            //$(".two").show();
            animation($(".filter-content.two"), "65px", $(".two"));
            animation($(".filter-tab.one"), "4px", $(".two"));
            animation($(".filter-tab.two"), "39px", $(".two"));
            animation($(".filter-tab.three"), "261px", $(".two"));
        }
        else if ($(this).hasClass("three") == true) {
            //$(".three").show();
            animation($(".filter-content.three"), "100px", $(".three"));
            animation($(".filter-tab.one"), "4px", $(".three"));
            animation($(".filter-tab.two"), "39px", $(".three"));
            animation($(".filter-tab.three"), "74px", $(".three"));
        }
    });

    function animation(object, position, content) {
        object.animate({ "top": position }, 300, "swing", function () {
            content.show();
        });


    }
});