$(document).ready(function(){

    $(".enviar-orcamento").hide();

    var url_base = 'http://www.cartoespvc.com.br';

    $(".createdimage-frente").live("mouseover", function() {
        $(".createdimage-frente").draggable({
           drag: function(event, ui) {
                var indice = $(".createdimage-frente").index(this);

                var preview_corner = $("#preview-frente").offset();

                var corner = $(".createdimage-frente").eq(indice).offset();

                $("input[name=coor_x[]]").eq(indice).val(corner.left - preview_corner.left);
                $("input[name=coor_y[]]").eq(indice).val((corner.top + 21) - preview_corner.top);
           }
        });
    });

    $(".createdimage-verso").live("mouseover", function() {
        $(".createdimage-verso").draggable({
           drag: function(event, ui) {
                var indice = $(".createdimage-verso").index(this);

                var preview_corner = $("#preview-verso").offset();

                var corner = $(".createdimage-verso").eq(indice).offset();

                $("input[name=coor_x[]]").eq(indice).val(corner.left - preview_corner.left);
                $("input[name=coor_y[]]").eq(indice).val((corner.top + 21) - preview_corner.top);
           }
        });
    });

    $(".front_createdtext").live("mouseover", function() {
        $(".front_createdtext").draggable({
           drag: function(event, ui) {
                var indice = $(".front_createdtext").index(this);

                var preview_corner = $("#preview-frente").offset();

                var corner = $(".front_createdtext").eq(indice).offset();

                $("input[name=front_phrase_x[]]").eq(indice).val(corner.left - preview_corner.left);
                $("input[name=front_phrase_y[]]").eq(indice).val((corner.top + 41) - preview_corner.top);
           }
        });
    });

    $(".verso_createdtext").live("mouseover", function() {
        $(".verso_createdtext").draggable({
           drag: function(event, ui) {
                var indice = $(".verso_createdtext").index(this);

                var preview_corner = $("#preview-verso").offset();

                var corner = $(".verso_createdtext").eq(indice).offset();

                $("input[name=vs_phrase_x[]]").eq(indice).val(corner.left - preview_corner.left);
                $("input[name=vs_phrase_y[]]").eq(indice).val((corner.top + 41) - preview_corner.top);
           }
        });
    });
    

    $('#personalizacao').tabs();

    
    $(".enviar-imagem").fancybox({
            'onStart'		: function() {
                return confirm("Atenção: ao enviar uma imagem, a página será atualizada, e todo o trabalho feito anteriormente será perdido.")
            },
            'onClosed'		: function() {
                document.location.reload(false)
            },

            'autoDimensions'            : false,
            'width'         		: 500,
            'height'        		: 400,
            'transitionIn'              : 'elastic',
            'transitionOut'             : 'elastic',
            'type'			: 'iframe',
            'hideOnContentClick'        : false
    });


    $(".enviar-orcamento").fancybox({
            'autoDimensions'            : false,
            'width'         		: 500,
            'height'        		: 500,
            'transitionIn'              : 'elastic',
            'transitionOut'             : 'elastic',
            'type'			: 'iframe',
            'hideOnContentClick'        : false
    });


    var url_image_default = url_base +'/uploads/molduras/img/padrao.jpg';
    $("#preview-frente").append('<img src="'+ url_image_default +'" alt="Imagem padrão" />');
    $("input[name=textura_front]").val(url_image_default);
    $("input[name=textura_back]").val(url_image_default);
    
    
    $("input[name=formato]").val('horizontal');


    $("#icone-formato-vertical").click(function(){        
        
        $("input[name=formato]").val('vertical');
        $(".preview").css({'width':225,'height':350});
        $(".preview img").css({'max-width':225,'max-height':350});

        if($("input[name=tarja]:checked").val() == 'sim') {

            var corner = $("#preview-verso").offset();
            var box_width = $("#preview-verso").width();
            var box_height = $("#preview-verso").height();

            if($("input[name=formato]").val() == 'horizontal') {

                $("#preview-verso .tarja").css({top:corner.top + 23, left:corner.left + 1, display:'block', width:box_width, height:20});
            } else {

                $("#preview-verso .tarja").css({top:corner.top, left:corner.left + 23, display:'block', height:box_height - 20, width:40});
            }

            
        } else {
            $('span.tarja').css('display','none');
        }
    });


    $("#icone-formato-horizontal").click(function(){        

        $("input[name=formato]").val('horizontal');
        $(".preview").css({'width':350,'height':225});
        $(".preview img").css({'max-width':350,'max-height':225});

        if($("input[name=tarja]:checked").val() == 'sim') {

            var corner = $("#preview-verso").offset();
            var box_width = $("#preview-verso").width();
            var box_height = $("#preview-verso").height();

            if($("input[name=formato]").val() == 'horizontal') {

                $("#preview-verso .tarja").css({top:corner.top + 23, left:corner.left + 1, display:'block', width:box_width, height:20});
            } else {

                $("#preview-verso .tarja").css({top:corner.top, left:corner.left + 23, display:'block', height:box_height - 20, width:40});
            }
        } else {
            $('span.tarja').css('display','none');
        }
    });


    $(".miniaturas .frente a").click(function(){

        var indice = $(".miniaturas .frente a").index(this);
        var url = $(".miniaturas .frente a").eq(indice).attr("href");
        $("input[name=textura_front]").val(url);
        var element = '<img src="'+ url +'" alt="" />';
        $("#preview-frente").children("img").remove();
        $("#preview-frente").append(element);
        $("input[name=ctrl_change]").val('ok');
        return false;
    });


    $(".miniaturas .verso a").click(function(){

        var indice = $(".miniaturas .verso a").index(this);
        var url = $(".miniaturas .verso a").eq(indice).attr("href");
        $("input[name=textura_back]").val(url);
        var element = '<img src="'+ url +'" alt="" />';
        $("#preview-verso").children("img").remove();
        $("#preview-verso").append(element);
        $("input[name=ctrl_change]").val('ok');
        return false;
    });
    

    
    $(".enfeite-to-preview-frente").click(function(){

        var num_de_imgs = $(".createdimage-frente").children('img').size();

        if(num_de_imgs < 4) {
           var href_to_src = $(this).attr("href");

           $("#preview-frente").append('<div class="createdimage-frente"><span class="closeimage">x</span><img src="'+ href_to_src +'" alt="" /></div>');

           $('.createdimage-frente span').css('display','block');
           $("input[name=ctrl_change]").val('ok');

           var preview_corner = $("#preview-frente").offset();

           $('.createdimage-frente').eq(num_de_imgs).css({'top':preview_corner.top, 'left':preview_corner.left});

            var corner = $(".createdimage-frente").eq(num_de_imgs).offset();

            $('#form-gerar_cartao_front').append(
                '<input type="hidden" name="enfeite[]" value="'+ href_to_src +'" />\n\
                <input type="hidden" name="coor_x[]" value="'+ (corner.left - preview_corner.left) +'" />\n\
                <input type="hidden" name="coor_y[]" value="'+ ((corner.top + 21) - preview_corner.top) +'" />\n\n'
            );
            
        }
       
       return false;
    });


    $(".enfeite-to-preview-verso").click(function(){

        var num_de_imgs = $(".createdimage-verso").children('img').size();

        if(num_de_imgs < 4) {
           var href_to_src = $(this).attr("href");

           $("#preview-verso").append('<div class="createdimage-verso"><span class="closeimage">x</span><img src="'+ href_to_src +'" alt="" /></div>');

           $('.createdimage-verso span').css('display','block');
           $("input[name=ctrl_change]").val('ok');

           var preview_corner = $("#preview-verso").offset();

           $('.createdimage-verso').eq(num_de_imgs).css({'top':preview_corner.top, 'left':preview_corner.left});

            var corner = $(".createdimage-verso").eq(num_de_imgs).offset();

            $('#form-gerar_cartao_back').append(
                '<input type="hidden" name="enfeite[]" value="'+ href_to_src +'" />\n\
                <input type="hidden" name="coor_x[]" value="'+ (corner.left - preview_corner.left) +'" />\n\
                <input type="hidden" name="coor_y[]" value="'+ ((corner.top + 21) - preview_corner.top) +'" />\n\n'
            );

        }

       return false;
    });

    $(".createdimage-frente span.closeimage").live('click', function(){
       
       var indice = $(".createdimage-frente span.closeimage").index(this);

       $("input[name=enfeite[]]").eq(indice).remove();
       $("input[name=coor_x[]]").eq(indice).remove();
       $("input[name=coor_y[]]").eq(indice).remove();
       $(".createdimage-frente").eq(indice).remove();
    });

    $(".createdimage-verso span.closeimage").live('click', function(){

       var indice = $(".createdimage-verso span.closeimage").index(this);

       $("input[name=enfeite[]]").eq(indice).remove();
       $("input[name=coor_x[]]").eq(indice).remove();
       $("input[name=coor_y[]]").eq(indice).remove();
       $(".createdimage-verso").eq(indice).remove();
    });


    $(".preview").css({'width':350,'height':225});
    $(".preview img").css({'max-width':350,'max-height':225});


    $("#preview-verso").children('span.tarja').css('display','none');

    var i = 0;
    $("input[name=tarja]").click(function(){

       if($('input[name=tarja]:checked').val() == 'sim' && i == 0) {

            var corner = $("#preview-verso").offset();
            var box_width = $("#preview-verso").width();
            var box_height = $("#preview-verso").height();

            if($("input[name=formato]").val() == 'horizontal') {

                $("#preview-verso").children('span.tarja').css({top:corner.top + 23, left:corner.left + 1, display:'block', width:box_width});
            } else {

                $("#preview-verso .tarja").css({top:corner.top, left:corner.left + 23, display:'block', height:box_height - 20, width:40});
            }
            
       } else {
           
           $("#preview-verso").children('span.tarja').css('display','none');
       }
    });

    $(".front-gerar-texto").live("click", function(){

        var num_text = $(".front_createdtext").size();

        if(num_text < 4) {

            var texto =  $("input[name=front_texto]").val();
            if($("input[name=front_cor_fonte]").val() != '') {

                var color =  $("input[name=front_cor_fonte]").val();
            } else {

                color = 'FFFFFF';
            }
            
            var tipo_fonte = $("select[name=front_tipo]").val();
            var tam_fonte = $("select[name=front_tamanho]").val();

            $("#preview-frente").append('<div class="front_createdtext text-in-box"><span class="closetext">x</span>'+ texto +'</div>');
            $(".front_createdtext").eq(num_text).css({'color' : '#'+color, 'fontSize' : tam_fonte+'px', 'fontFamily' : tipo_fonte});

           $('.front_createdtext span').css('display','block');
           $("input[name=ctrl_change]").val('ok');

           var preview_corner = $("#preview-frente").offset();

           $('.front_createdtext').eq(num_text).css({'top':preview_corner.top, 'left':preview_corner.left});

           

           var corner = $(".front_createdtext").eq(num_text).offset();

           var font_to_php = fontsize_to_php(tam_fonte);

           $('#form-gerar_cartao_front').append(
                '<input type="hidden" name="front_fontfamily[]" value="'+ tipo_fonte +'" />\n\
                <input type="hidden" name="front_fontsize[]" value="'+ (font_to_php) +'" />\n\
                <input type="hidden" name="front_fontcolor[]" value="'+ color +'" />\n\
                <input type="hidden" name="front_phrase[]" value="'+ texto +'" />\n\
                <input type="hidden" name="front_phrase_x[]" value="'+ (corner.left - preview_corner.left + 2) +'" />\n\
                <input type="hidden" name="front_phrase_y[]" value="'+ ((corner.top + 41) - preview_corner.top) +'" />\n\n'
            );
        }
    });

    $(".front_createdtext span.closetext").live('click', function(){

       var indice = $(".front_createdtext span.closetext").index(this);

       $("input[name=front_fontfamily[]]").eq(indice).remove();
       $("input[name=front_fontsize[]]").eq(indice).remove();
       $("input[name=front_fontcolor[]]").eq(indice).remove();
       $("input[name=front_phrase[]]").eq(indice).remove();
       $("input[name=front_phrase_x[]]").eq(indice).remove();
       $("input[name=front_phrase_y[]]").eq(indice).remove();
       $(".front_createdtext").eq(indice).remove();
    });



    $(".verso-gerar-texto").live("click", function(){

        var num_text = $(".verso_createdtext").size();

        if(num_text < 4) {

            var texto =  $("input[name=vs_texto]").val();
            if($("input[name=vs_cor_fonte]").val() != '') {

                var color =  $("input[name=vs_cor_fonte]").val();
            } else {

                color = 'FFFFFF';
            }

            var tipo_fonte = $("select[name=vs_tipo]").val();            
            var tam_fonte =  $("select[name=vs_tamanho]").val();

            $("#preview-verso").append('<div class="verso_createdtext text-in-box"><span class="closetext">x</span>'+ texto +'</div>');
            $(".verso_createdtext").eq(num_text).css({'color' : '#'+color, 'fontSize' : tam_fonte+'px', 'fontFamily' : tipo_fonte});

           $('.verso_createdtext span').css('display','block');
           $("input[name=ctrl_change]").val('ok');

           var preview_corner = $("#preview-verso").offset();

           $('.verso_createdtext').eq(num_text).css({'top':preview_corner.top, 'left':preview_corner.left});
           
           var corner = $(".verso_createdtext").eq(num_text).offset();
           
           var font_to_php = fontsize_to_php(tam_fonte);

           $('#form-gerar_cartao_back').append(
                '<input type="hidden" name="vs_fontfamily[]" value="'+ tipo_fonte +'" />\n\
                <input type="hidden" name="vs_fontsize[]" value="'+ (font_to_php) +'" />\n\
                <input type="hidden" name="vs_fontcolor[]" value="'+ color +'" />\n\
                <input type="hidden" name="vs_phrase[]" value="'+ texto +'" />\n\
                <input type="hidden" name="vs_phrase_x[]" value="'+ (corner.left - preview_corner.left + 2) +'" />\n\
                <input type="hidden" name="vs_phrase_y[]" value="'+ ((corner.top + 41) - preview_corner.top) +'" />\n\n'
            );
        }
    });

    $(".verso_createdtext span.closetext").live('click', function(){

       var indice = $(".verso_createdtext span.closetext").index(this);

       $("input[name=vs_fontfamily[]]").eq(indice).remove();
       $("input[name=vs_fontsize[]]").eq(indice).remove();
       $("input[name=vs_fontcolor[]]").eq(indice).remove();
       $("input[name=vs_phrase[]]").eq(indice).remove();
       $("input[name=vs_phrase_x[]]").eq(indice).remove();
       $("input[name=vs_phrase_y[]]").eq(indice).remove();
       $(".verso_createdtext").eq(indice).remove();
    });


    $(".text-to-card").blur(function(){

       var texto = $(this).val();
       var acento = 'áàãâäéèêëíìîïóòõôöúùûüç�ÀÃÂÄÉÈÊË�ÌÎ�ÓÒÕÖÔÚÙÛÜÇ"';
       var semacento = 'aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC';
       var nova = '';

       for (var i = 0; i < texto.length; i++) {
             if (acento.search(texto.substr(i, 1)) >= 0) {
                 nova += semacento.substr(acento.search(texto.substr(i, 1)), 1);
             }
             else {
                 nova += texto.substr(i, 1);
             }
       }

       $(this).val(nova);       
    });
    
    
    window.onbeforeunload = function() {
        if($("input[name=ctrl_change]").val() != '') {
            return 'Seu cartão personalizado não foi salvo, ao sair ou atualizar a página, perderá os dados. \nLogo abaixo do cartão, clique em "Solicitar orçamento" para salvar e finalizar.';
        }
    }

    //normaliza o tamanho das fontes, para evitar diferenças entre a apresentada ao usuario e a impressa no cartão
    //onde tam_fonte é o tamanho da fonte original, gerada pelo formulario
    function fontsize_to_php(tam_fonte) {

            var _to_php = 0;

            if(tam_fonte <= 20) {

                _to_php = tam_fonte - (tam_fonte * 0.20);
            } else if(tam_fonte >= 21 && tam_fonte <= 40) {

                _to_php = tam_fonte - (tam_fonte * 0.25);
            } else {

                _to_php = tam_fonte - (tam_fonte * 0.26);
            }

            return _to_php;
    }
    
});