$(document).ready(function () {

    $(".ContTxt").load('Sobre.html');
    //PNG FIX 
    $(document).pngFix();



    //desenha balao


    var canvas = document.getElementById('Balao');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.moveTo(0, 270);
        ctx.bezierCurveTo(0, 120, 150, 0, 330, 0);
        ctx.bezierCurveTo(518, 0, 666, 120, 666, 270);
        ctx.bezierCurveTo(666, 425, 518, 548, 330, 548);
        ctx.bezierCurveTo(150, 548, 0, 425, 0, 270);
        grd = ctx.createLinearGradient(100, 300, 150, 0);
        grd.addColorStop(0, "#0176c8");
        grd.addColorStop(1, "#01cdfc");
        ctx.fillStyle = grd;
        ctx.fillRect(0, 666, 666, 548);
        ctx.fill()

    } else {
        //document.write("Seu navegador não suporta esta aplicação"); 
    }

    var canvas = document.getElementById('parteBalao');
    if (canvas.getContext) {
        var ctx2 = canvas.getContext('2d');

        ctx2.beginPath();
        ctx2.moveTo(0, 80);
        ctx2.bezierCurveTo(0, 80, 58, 88, 88, 0);
        ctx2.lineTo(140, 90);
        ctx2.bezierCurveTo(140, 90, 80, 125, 0, 80);
        ctx2.fillStyle = "#0176c8";
        ctx2.fill();



    } else {
        //document.write("Seu navegador não suporta esta aplicação"); 
    }




    //Menu
    $("#menu li:eq(0)").css("list-style", "url(Img/marcador.png)");
    $("#menu li a").click(function () {
        $("#menu li a").removeClass("menuSelecionado");
        $(this).addClass("menuSelecionado");
        $("#menu li").css("list-style", "none");
        $($(this).parent()).css("list-style", "url(Img/marcador.png)");

        //numero de itens do menu:
        numeroItens = $(this).parent().parent().find("li").size();

        //numero do indice do Pai do item Clicado.
        indiceItemClicado = $("#menu li").index($(this).parent());

        //mudança de poisçoes
        switch (indiceItemClicado) {
            case 0:
                $("#parteBalao").animate({ bottom: "130px", left: "-65px" }, 1500);
                $(".ContTxt").load('Sobre.html');
                break;
            case 1:
                $("#parteBalao").animate({ bottom: "87px", left: "-54px" }, 1500);
                $(".ContTxt").load('Portfolio.html');
                break;
            case 2:
                $("#parteBalao").animate({ bottom: "42px", left: "5px" }, 1500);
                $(".ContTxt").load('Blog.html');
                document.location = "http://tiagoos.com/blog";
                break;
            case 3:
                $("#parteBalao").animate({ bottom: "11px", left: "74px" }, 1500);
                $(".ContTxt").load('Biblioteca.html');
                break;
            case 4:
                $("#parteBalao").animate({ bottom: "-8px", left: "175px" }, 1500);
                break;
            default:
                //acao padrao 
        }

    });
    //fim do menu


});