$(function () {


    //Back to Top
    $('span.toTop').hover(
	    function () {
	        $(this).children('img').animate({ top: '-8px' }, 100);
	    },
	    function () {
	        $(this).children('img').stop().animate({ top: '-4px' }, 100);
	    }
    );

    //Missao visao valores
    $('.mvvContent').hide();
    $('#mvv .menu li .slideDown').css('opacity', '0');

    $('#mvv .menu li').hover(
	    function () {
	        $(this).not('.active').children('.slideDown').animate({ top: '11px', opacity: '1' }, 300);
	    },
	    function () {
	        $(this).not('.active').children('.slideDown').stop().animate({ top: '5px', opacity: '0' }, 100);
	    }
    );

    $('#mvv .menu li').click(function () {
        var seletor = '#' + $(this).attr('class');

        $(this).siblings().children('.activeImg').animate({ top: '-70px' }, 300);
        $(this).siblings().removeClass('active');

        if ($(this).is('.active')) {
            $(this).removeClass('active');
            $(this).children('.activeImg').animate({ top: '-70px' }, 300);
            $(this).children('.slideDown').animate({ top: '11px', opacity: '1' }, 300);
        }
        else {
            $(this).addClass('active');
            $(this).children('.slideDown').animate({ opacity: '0' }, 100);
            $(this).children('.activeImg').animate({ top: '-35px' }, 300);
        }

        $(seletor).slideToggle(300);
        $('.mvvContent').not(seletor).stop(false, true).slideUp(300);
    });

    //Etapas do escopo
    $('.etapa').hide();
    $('#escopo .menu li .slideDown').css('opacity', '0');

    $('#escopo .menu li').hover(
	    function () {
	        $(this).not('.active').children('.slideDown').animate({ top: '15px', opacity: '1' }, 300);
	    },
	    function () {
	        $(this).not('.active').children('.slideDown').stop().animate({ top: '5px', opacity: '0' }, 100);
	    }
    );

    $('#escopo .menu li').click(function () {
        var seletor = '#' + $(this).attr('class');

        $(this).siblings().children('.activeImg').animate({ top: '-84px' }, 300);
        $(this).siblings().removeClass('active');

        if ($(this).is('.active')) {
            $(this).removeClass('active');
            $(this).children('.activeImg').animate({ top: '-84px' }, 300);
            $(this).children('.slideDown').animate({ top: '15px', opacity: '1' }, 300);
        }
        else {
            $(this).addClass('active');
            $(this).children('.slideDown').animate({ opacity: '0' }, 100);
            $(this).children('.activeImg').animate({ top: '-42px' }, 300);
        }

        $(seletor).slideToggle(300);
        $('.etapa').not(seletor).stop(false, true).slideUp(300);
    });

    //Entregáveis
    $('.entregaveis .submenu li').hover(
	    function () {
	        $(this).not('.active').css('color', '#FFF');
	    },
	    function () {
	        $(this).not('.active').css('color', '#FDD100');
	    }
    );

    $('.entregaveis .submenu li').click(function () {
        if ($(this).is('.active')) {
            $('.entregaveisOver').fadeIn(500);
            $(this).removeClass('active').css({ color: '#FDD100', backgroundColor: 'transparent', backgroundImage: 'url(img/black.5.png)' });
        } else {
            $('.entregaveisOver').fadeOut(500);
            $(this).siblings().removeClass('active').css({ color: '#FDD100', backgroundColor: 'transparent', backgroundImage: 'url(img/black.5.png)' });
            $(this).addClass('active').css({ color: '#000', backgroundColor: '#FDD100', backgroundImage: 'none' });
        }
        switch (this.id) {
            case 'benchmark':
                $('.entregaveisImg').stop().animate({ left: '-488px' }, 500);
                break;
            case 'mapa':
                $('.entregaveisImg').stop().animate({ left: '-976px' }, 500);
                break;
            case 'fluxo':
                $('.entregaveisImg').stop().animate({ left: '-1464px' }, 500);
                break;
            case 'analise':
                $('.entregaveisImg').stop().animate({ left: '-1952px' }, 500);
                break;
            case 'prototipo':
                $('.entregaveisImg').stop().animate({ left: '-2440px' }, 500);
                break;
            case 'design':
                $('.entregaveisImg').stop().animate({ left: '-2928px' }, 500);
                break;
        }
    });

    //desenvolvimento bg
    crop = function () {
        var freeSpace = ($(window).width() - 980) / 2;
        //window.alert(freeSpace);
        if (freeSpace < 0) { freeSpace = 0 };
        var bgWidth = 790 + freeSpace;
        $('.desenvolvimentoBg').css('width', bgWidth);
    };
    crop();
    $(window).resize(crop);

    //Submit Hover
    $('input[type=submit]').hover(
	    function () {
	        $(this).css('backgroundImage', 'url("../Image/submitOver.png")');
	    },
	    function () {
	        $(this).css('backgroundImage', 'url("../Image/submit.png")');
	    }
    );

    //Cases
    //Filtro de cases
    $("div.filtro ul li a").click(function (e) {
        e.preventDefault();
        $(this).parent().siblings().children().removeClass("active");
        $(this).addClass("active");

        var filtro = $(this).attr('rel');
        switch (filtro) {
            case "todos":
                $.each($("#cases li"), function () {
                    limpaClass(this);
                });
                break;
            case "web":
                $.each($("#cases li"), function () {
                    limpaClass(this);
                    if ($(this).attr('class') != "web" && $(this).attr('class') != "web mobile") {
                        $(this).addClass('disable');
                    }
                });
                break;
            case "mobile":
                $.each($("#cases li"), function () {
                    limpaClass(this);
                    if ($(this).attr('class') != "mobile" && $(this).attr('class') != "web mobile") {
                        $(this).addClass('disable');
                    }
                });
                break;
        }

        function limpaClass(seletor) {
            $(seletor).removeClass('disable');
        }
    });

    //PPROJETOS CASES
    $("#cases li a").click(function (e) {

        Wefit.scrollToSection('paraquem');

        var nomeProjeto = $(this).attr('id');

        switch (nomeProjeto) {
            //GPDA DASHBOARD                       
            case "gpda-dash":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-gpda-dash case_custom"><div class="galery"><div class="main_custom" id="main-gpda-dash"></div></div><ul class="nav_custom" id="nav-gpda-dash"></ul><div class="project"><a class="fechar" id="cs-gpda-dash">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-gpda-dash ul#nav-gpda-dash").html('<li class="active"><img src="../Image/cases/gpda-dash/thumb/gpda-dash-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/gpda-dash/thumb/gpda-dash-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/gpda-dash/thumb/gpda-dash-3-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/gpda-dash/thumb/gpda-dash-4-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-gpda-dash #main-gpda-dash").html('<div id="pages-gpda-dash" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/gpda-dash/gpda-dash-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/gpda-dash/gpda-dash-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/gpda-dash/gpda-dash-3.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/gpda-dash/gpda-dash-4.jpg" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-gpda-dash .project h5").html("Grupo Pão de Açucar");
                $(".cs-gpda-dash .project h4").html("Dashboard");
                $(".cs-gpda-dash .project .target").html("Web");

                //Inicia a galeria
                $(".cs-gpda-dash #main-gpda-dash").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-gpda-dash");
                var horizontal = $(".cs-gpda-dash .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-gpda-dash").fadeIn();
                break;

            //VOLO LOGISTICA                       
            case "volo":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-volo case_custom"><div class="galery"><div class="main_custom" id="main-volo"></div></div><ul class="nav_custom" id="nav-volo"></ul><div class="project"><a class="fechar" id="cs-volo">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-volo ul#nav-volo").html('<li class="active"><img src="../Image/cases/volo/thumb/volo-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/volo/thumb/volo-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/volo/thumb/volo-3-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/volo/thumb/volo-4-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-volo #main-volo").html('<div id="pages-volo" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/volo/volo-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/volo/volo-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/volo/volo-3.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/volo/volo-4.jpg" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-volo .project h5").html("Volo Logística");
                $(".cs-volo .project h4").html("B.I.M");
                $(".cs-volo .project .target").html("Web");
                $(".cs-volo .project").append('<p class="target">Mobile</p>');

                //Inicia a galeria
                $(".cs-volo #main-volo").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-volo");
                var horizontal = $(".cs-volo .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-volo").fadeIn();
                break;

            //PINI                       
            case "pini":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-pini case_custom"><div class="galery"><div class="main_custom" id="main-pini"></div></div><ul class="nav_custom" id="nav-pini"></ul><div class="project"><a class="fechar" id="cs-pini">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-pini ul#nav-pini").html('<li class="active"><img src="../Image/cases/pini/thumb/pini-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/pini/thumb/pini-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/pini/thumb/pini-3-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/pini/thumb/pini-4-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-pini #main-pini").html('<div id="pages-pini" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/pini/pini-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/pini/pini-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/pini/pini-3.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/pini/pini-4.jpg" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-pini .project h5").html("Pini");
                $(".cs-pini .project h4").html("Guia de Construção");
                $(".cs-pini .project .target").html("Web");

                //Inicia a galeria
                $(".cs-pini #main-pini").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-pini");
                var horizontal = $(".cs-pini .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-pini").fadeIn();
                break;

            //MARABRAZ                       
            case "marabraz":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-marabraz case_custom"><div class="galery"><div class="main_custom" id="main-marabraz"></div></div><ul class="nav_custom" id="nav-marabraz"></ul><div class="project"><a class="fechar" id="cs-marabraz">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-marabraz ul#nav-marabraz").html('<li class="active"><img src="../Image/cases/marabraz/thumb/marabraz-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/marabraz/thumb/marabraz-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/marabraz/thumb/marabraz-3-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/marabraz/thumb/marabraz-4-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-marabraz #main-marabraz").html('<div id="pages-marabraz" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marabraz/marabraz-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marabraz/marabraz-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marabraz/marabraz-3.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marabraz/marabraz-4.jpg" width="615" height="465" /></div></div></div></div></div>');
                //$(".cs-marabraz .project h5").html("Marabraz");
                $(".cs-marabraz .project h4").html("Marabraz");
                $(".cs-marabraz .project .target").html("Web");

                //Inicia a galeria
                $(".cs-marabraz #main-marabraz").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-marabraz");
                var horizontal = $(".cs-marabraz .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-marabraz").fadeIn();
                break;

            //GRUPO PÃO DE AÇUCAR - MAIS                       
            case "gpda-mais":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-gpda-mais case_custom"><div class="galery"><div class="main_custom" id="main-gpda-mais"></div></div><ul class="nav_custom" id="nav-gpda-mais"></ul><div class="project"><a class="fechar" id="cs-gpda-mais">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-gpda-mais ul#nav-gpda-mais").html('<li class="active"><img src="../Image/cases/gpda-mais/thumb/gpda-mais-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/gpda-mais/thumb/gpda-mais-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/gpda-mais/thumb/gpda-mais-3-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-gpda-mais #main-gpda-mais").html('<div id="pages-gpda-mais" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/gpda-mais/gpda-mais-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/gpda-mais/gpda-mais-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/gpda-mais/gpda-mais-3.jpg" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-gpda-mais .project h5").html("Grupo Pão de Açucar");
                $(".cs-gpda-mais .project h4").html("Mais");
                $(".cs-gpda-mais .project .target").html("Web");

                //Inicia a galeria
                $(".cs-gpda-mais #main-gpda-mais").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-gpda-mais");
                var horizontal = $(".cs-gpda-mais .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-gpda-mais").fadeIn();
                break;

            //MARQUES                       
            case "marques":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-marques case_custom"><div class="galery"><div class="main_custom" id="main-marques"></div></div><ul class="nav_custom" id="nav-marques"></ul><div class="project"><a class="fechar" id="cs-marques">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-marques ul#nav-marques").html('<li class="active"><img src="../Image/cases/marques/thumb/marques-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/marques/thumb/marques-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/marques/thumb/marques-3-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/marques/thumb/marques-4-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-marques #main-marques").html('<div id="pages-marques" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marques/marques-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marques/marques-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marques/marques-3.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/marques/marques-4.jpg" width="615" height="465" /></div></div></div></div></div>');
                //$(".cs-marques .project h5").html("Marques");
                $(".cs-marques .project h4").html("Marques");
                $(".cs-marques .project .target").html("Web");

                //Inicia a galeria
                $(".cs-marques #main-marques").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-marques");
                var horizontal = $(".cs-marques .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-marques").fadeIn();
                break;

            //IGUATEMI                       
            case "iguatemi":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-iguatemi case_custom"><div class="galery"><div class="main_custom" id="main-iguatemi"></div></div><ul class="nav_custom" id="nav-iguatemi"></ul><div class="project"><a class="fechar" id="cs-iguatemi">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-iguatemi ul#nav-iguatemi").html('<li class="active"><img src="../Image/cases/iguatemi/thumb/iguatemi-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/iguatemi/thumb/iguatemi-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/iguatemi/thumb/iguatemi-3-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/iguatemi/thumb/iguatemi-4-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-iguatemi #main-iguatemi").html('<div id="pages-iguatemi" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/iguatemi/iguatemi-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/iguatemi/iguatemi-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/iguatemi/iguatemi-3.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/iguatemi/iguatemi-4.jpg" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-iguatemi .project h5").html("Iguatemi");
                $(".cs-iguatemi .project h4").html("SIG");
                $(".cs-iguatemi .project .target").html("Web");

                //Inicia a galeria
                $(".cs-iguatemi #main-iguatemi").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-iguatemi");
                var horizontal = $(".cs-iguatemi .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-iguatemi").fadeIn();
                break;

            //SAINT PAUL                       
            case "saintpaul":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-saintpaul case_custom"><div class="galery"><div class="main_custom" id="main-saintpaul"></div></div><ul class="nav_custom" id="nav-saintpaul"></ul><div class="project"><a class="fechar" id="cs-saintpaul">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-saintpaul ul#nav-saintpaul").html('<li class="active"><img src="../Image/cases/saintpaul/thumb/saintpaul-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/saintpaul/thumb/saintpaul-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/saintpaul/thumb/saintpaul-3-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/saintpaul/thumb/saintpaul-4-thumb.jpg" width="150" height="115" /></li>');
                $(".cs-saintpaul #main-saintpaul").html('<div id="pages-saintpaul" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/saintpaul/saintpaul-1.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/saintpaul/saintpaul-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/saintpaul/saintpaul-3.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/saintpaul/saintpaul-4.jpg" width="615" height="465" /></div></div></div></div></div>');
                //$(".cs-saintpaul .project h5").html("Saint Paul");
                $(".cs-saintpaul .project h4").html("Saint Paul");
                $(".cs-saintpaul .project .target").html("Web");

                //Inicia a galeria
                $(".cs-saintpaul #main-saintpaul").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-saintpaul");
                var horizontal = $(".cs-saintpaul .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-saintpaul").fadeIn();
                break;

            //IBM - FORUM                       
            case "ibm":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-ibm case_custom"><div class="galery"><div class="main_custom" id="main-ibm"></div></div><ul class="nav_custom" id="nav-ibm"></ul><div class="project"><a class="fechar" id="cs-ibm">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-ibm ul#nav-ibm").html('<li class="active"><img src="../Image/cases/ibm/thumb/ibm-1-thumb.png" width="150" height="115" /></li><li><img src="../Image/cases/ibm/thumb/ibm-2-thumb.png" width="150" height="115" /></li><li><img src="../Image/cases/ibm/thumb/ibm-3-thumb.png" width="150" height="115" /></li><li><img src="../Image/cases/ibm/thumb/ibm-4-thumb.png" width="150" height="115" /></li>');
                $(".cs-ibm #main-ibm").html('<div id="pages-ibm" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/ibm/ibm-1.png" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/ibm/ibm-2.png" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/ibm/ibm-3.png" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/ibm/ibm-4.png" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-ibm .project h5").html("IBM");
                $(".cs-ibm .project h4").html("Forum");
                $(".cs-ibm .project .target").html("Web");
                $(".cs-ibm .project").append('<p class="target">Mobile</p>');

                //Inicia a galeria
                $(".cs-ibm #main-ibm").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-ibm");
                var horizontal = $(".cs-ibm .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-ibm").fadeIn();
                break;

            //GRUPO FITTA                       
            case "fitta":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-fitta case_custom"><div class="galery"><div class="main_custom" id="main-fitta"></div></div><ul class="nav_custom" id="nav-fitta"></ul><div class="project"><a class="fechar" id="cs-fitta">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-fitta ul#nav-fitta").html('<li class="active"><img src="../Image/cases/fitta/thumb/fitta-1-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/fitta/thumb/fitta-2-thumb.jpg" width="150" height="115" /></li><li><img src="../Image/cases/fitta/thumb/fitta-3-thumb.png" width="150" height="115" /></li><li><img src="../Image/cases/fitta/thumb/fitta-4-thumb.png" width="150" height="115" /></li>');
                $(".cs-fitta #main-fitta").html('<div id="pages-fitta" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/fitta/fitta-1.jpg" width="615" height="470" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/fitta/fitta-2.jpg" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/fitta/fitta-3.png" width="615" height="470" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/fitta/fitta-4.png" width="615" height="480" /></div></div></div></div></div>');
                $(".cs-fitta .project h5").html("Grupo Fitta");
                $(".cs-fitta .project h4").html("Fitta Cambio");
                $(".cs-fitta .project .target").html("Web");
                $(".cs-fitta .project").append('<p class="target">Mobile</p>');

                //Inicia a galeria
                $(".cs-fitta #main-fitta").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-fitta");
                var horizontal = $(".cs-fitta .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-fitta").fadeIn();
                break;

            //BIOLAB - EDITOR DE APRESENTAÇÕES                       
            case "biolab":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-biolab case_custom"><div class="galery"><div class="main_custom" id="main-biolab"></div></div><ul class="nav_custom" id="nav-biolab"></ul><div class="project"><a class="fechar" id="cs-biolab">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-biolab ul#nav-biolab").html('<li class="active"><img src="../Image/cases/biolab/thumb/biolab-1-thumb.png" width="150" height="115" /></li><li><img src="../Image/cases/biolab/thumb/biolab-2-thumb.png" width="150" height="115" /></li>');
                $(".cs-biolab #main-biolab").html('<div id="pages-biolab" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/biolab/biolab-1.png" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/biolab/biolab-2.png" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-biolab .project h5").html("Biolab");
                $(".cs-biolab .project h4").html("Editor de apresentações");
                $(".cs-biolab .project .target").html("Mobile");

                //Inicia a galeria
                $(".cs-biolab #main-biolab").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-biolab");
                var horizontal = $(".cs-biolab .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-biolab").fadeIn();
                break;

            //EBF VAZ                       
            case "ebf":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-ebf case_custom"><div class="galery"><div class="main_custom" id="main-ebf"></div></div><ul class="nav_custom" id="nav-ebf"></ul><div class="project"><a class="fechar" id="cs-ebf">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-ebf ul#nav-ebf").html('<li class="active"><img src="../Image/cases/ebf/thumb/ebf-1-thumb.png" width="150" height="115" /></li><li><img src="../Image/cases/ebf/thumb/ebf-2-thumb.png" width="150" height="115" /></li><li><img src="../Image/cases/ebf/thumb/ebf-3-thumb.png" width="150" height="115" /></li>');
                $(".cs-ebf #main-ebf").html('<div id="pages-ebf" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/ebf/ebf-1.png" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/ebf/ebf-2.png" width="615" height="465" /></div></div></div></div><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/ebf/ebf-3.png" width="615" height="465" /></div></div></div></div></div>');
                //$(".cs-ebf .project h5").html("EBF Vaz");
                $(".cs-ebf .project h4").html("EBF Vaz");
                $(".cs-ebf .project .target").html("Mobile");

                //Inicia a galeria
                $(".cs-ebf #main-ebf").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-ebf");
                var horizontal = $(".cs-ebf .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-ebf").fadeIn();
                break;

            //BRADESCO - SEGURO AUTO                       
            case "bradesco":
                removeActiveCase();
                $(this).addClass("active");

                //Cria o .case-info
                $("#case-galery").html('<div class="cs-bradesco case_custom"><div class="galery"><div class="main_custom" id="main-bradesco"></div></div><ul class="nav_custom" id="nav-bradesco"></ul><div class="project"><a class="fechar" id="cs-bradesco">Fechar</a><h5></h5><h4></h4><p class="target"></p></div></div>');
                buttonClose();

                //Seta as informações no .case-info
                $(".cs-bradesco ul#nav-bradesco").html('<li class="active"><img src="../Image/cases/bradesco/thumb/bradesco-1-thumb.png" width="150" height="115" /></li>');
                $(".cs-bradesco #main-bradesco").html('<div id="pages-bradesco" class="pages_custom"><div class="page"><div class="scrollable"><div class="items"><div class="item"><img src="../Image/cases/bradesco/bradesco-1.png" width="615" height="465" /></div></div></div></div></div>');
                $(".cs-bradesco .project h5").html("Bradesco");
                $(".cs-bradesco .project h4").html("Seguro Auto");
                $(".cs-bradesco .project .target").html("Mobile");

                //Inicia a galeria
                $(".cs-bradesco #main-bradesco").scrollable({
                    vertical: true,
                    keyboard: 'static',
                    onSeek: function (event, i) {
                        horizontal.eq(i).data("scrollable").focus();
                    }
                }).navigator("#nav-bradesco");
                var horizontal = $(".cs-bradesco .scrollable").scrollable({ circular: true });
                horizontal.eq(0).data("scrollable").focus();

                $("#case-galery .cs-bradesco").fadeIn();
                break;

        }
    });

    //Button fechar .case-info
    function buttonClose() {
        $("a.fechar").click(function () {
            var caseFechar = $(this).attr('id');
            var idCase = caseFechar.substring(3, caseFechar.length);
            $("#case-galery ." + caseFechar).hide('slide');
            $("#cases li a#" + idCase).removeClass('active');
        });
    }

    //Remove hover de case active
    function removeActiveCase() {
        $.each($("#cases li a"), function () {
            if ($(this).attr('class') == "active") {
                $(this).removeClass('active');
            }
        });
    }

});