$(document).ready(function() {
    //quitamos selected de tipo y marcamos sólo el primero
    $("#awp_group_16 option").removeAttr("selected");
    $("#awp_group_16 option:first").attr("selected","selected");

    var g_num= 1;
    function init(event) {
        var h= '';
        h+= '<p class="test" style="font-size:20px;padding-left: 10px; width:150px;z-index:200;text-align:center;">';
        h+= '<span class="linea1"></span>';
        h+= '<span class="linea2"></span>';
        h+= '<span class="linea3"></span>';
        h+= '</p>';
        
        $("#image-block-fondo #visualizador").css("overflow","hidden");
        $("#image-block-fondo").append(h);

        h= h.replace(/test/g,'test2');
        $("#image-block-fondo").append(h);
         
        update_nombre();
        update_color_impl();
    }
    function close(event) {
        $("#awp_textarea_group_30").val("");
    }
    function update_nombre(event) {
        //alert("g:"+g_num);
        //en keypress según el color seleccionado
        var v= $("#awp_group_15").val();
        //blanco, color, mixto
        if(v == 35) g_num= 1;
        if(v == 34) g_num= 1;
        if(v == 36) g_num= 2;

        var txt1= $("#awp_textbox_group_69").val();
        var txt2= $("#awp_textbox_group_70").val();
        var txt3= $("#awp_textbox_group_71").val();

        txt1= txt1 != undefined? txt1: '';
        txt2= txt2 != undefined? txt2: '';
        txt3= txt3 != undefined? txt3: '';

        txt1= txt1.toUpperCase();
        txt2= txt2.toUpperCase();
        txt3= txt3.toUpperCase();

        $("p.test .linea1").text(txt1);
        $("p.test .linea2").text(txt2);
        $("p.test .linea3").text(txt3);
        if(g_num == 1) {
            $("p.test2 .linea1").text("");
            $("p.test2 .linea2").text("");
            $("p.test2 .linea3").text("");
        } else {
            $("p.test2 .linea1").text(txt1);
            $("p.test2 .linea2").text(txt2);
            $("p.test2 .linea3").text(txt3);
        }

        //recentrar según texto
		//var pos= $("#image-block-fondo").position();
		var pos= $("#image-block-fondo").offset();
        var w= $("#image-block-fondo img").width();
        var h= $("#image-block-fondo img").height();
		
        //centrar texto según medidas
        //la línea que tenga más caracteres
        var w_txt1= txt1 != ''? txt1.length : 0;
        var w_txt2= txt2 != ''? txt2.length : 0;
        var w_txt3= txt3 != ''? txt3.length : 0;

        //var cada_caracter_mide_px= 12;
        //var w_txt= Math.max(w_txt1,w_txt2,w_txt3) * cada_caracter_mide_px;
        var h_txt= $('#image-block-fondo p.test').height();
        var left= 100;
        var top= 15;
        //console.log(top);

        if(txt3 == "") {
            //2 primeras líneas abajo para centrar
            $("p.test .linea1, p.test .linea2")
                .css("position","relative")
                .css("top","20px");
            $("p.test2 .linea1, p.test2 .linea2")
                .css("position","relative")
                .css("top","20px");
        } else {
            $("p.test .linea1, p.test .linea2")
                .css("position","relative")
                .css("top","0px");
            $("p.test2 .linea1, p.test2 .linea2")
                .css("position","relative")
                .css("top","0px");
        }

        if(g_num == 2) {
            $("p.test")
                .css("position","absolute")
                .css("textAlign","center")
                .css("left",left+"px")
                .css("top",top+20+'px')
                .css("visibility","visible")
                .find("span[class^=linea]")
                    .css("display","block")
                    .css("height","24px");

            $("p.test2")
                .css("position","absolute")
                .css("textAlign","center")
                .css("left",left+"px")
                .css("top",top+145+'px')
                .css("visibility","visible")
                .find("span[class^=linea]")
                    .css("display","block")
                    .css("height","24px");
        } else {
            $("p.test")
                .css("position","absolute")
                .css("textAlign","center")
                .css("left",left+"px")
                .css("top",top+80+'px')
                .css("visibility","visible")
                .find("span[class^=linea]")
                    .css("display","block")
                    .css("height","24px");
        }

        //Cufon.replace('.test span,.test2 span', { fontFamily: 'Honey Script' });
        //Cufon.replace('.test span,.test2 span', { fontFamily: 'Jester' });
        //Cufon.replace('.test span,.test2 span', { fontFamily: 'Whackadoo' });
        update_typo();
    }
    function update_color(event) {
        update_nombre();
        update_color_impl();

        load_image_actual();
        //update_lineas();
        update_typo();
    }
    function update_color_impl() {
        var v= $("#awp_group_15").val();
        var color1= '';
        var color2= '';
        
        var nino= $("#categoria_genero").val() == 0? true: false; 
        //blanco
        if(v == 35) {
            g_num= 1;
            if(nino) {
                color1= '#000000';
            } else {
                color1= '#ec5c9c';
            }
        }
        //mixto
        if(v == 36) {
            g_num= 2;
            if(nino) {
                color1= '#000000';
                color2= '#ffffff';
            } else {
                color1= '#ec5c9c';
                color2= '#ffffff';
            }
        }
        $("p.test").css("color",color1);
        $("p.test2").css("color",color2);
    }
    function update_typo(event) {
        var v= $("#awp_group_16").val();
        //tipografías
        var tipo= '';

        //tipo1
        if(v == 37) {
            Cufon.replace('.test span,.test2 span', { fontFamily: 'Jester' });
        }
        //tipo2
        if(v == 38) {
            Cufon.replace('.test span,.test2 span', { fontFamily: 'Chalkboard' });
        }
        //tipo3
        if(v == 39) {
            Cufon.replace('.test span,.test2 span', { fontFamily: 'Whackadoo' });
        }
    }
    function load_image_actual() {
        //valor actual del select
        var v_sel= $("#awp_group_15").val();
        //console.log(v_sel);

        //donde está serializada la imagen
        var v= $("#image-block-fondo input").val();

        //borramos los que provocarán vacíos
        v= v.replace(/,:/g,':');
        //último char no :
        v= v.substr(0,(v.length-1));
        //console.log(v);

        //parse
        var pairs= v.split(':');
        var tmp= '';
        var selector= '';
        var img= "";
        var codes= '';
        for(i in pairs) {
            tmp= pairs[i].split(';');
            img= tmp[0];
            selector= tmp[1];
            codes= selector.split(',');
            for(j in codes) {
                //console.log(img,codes[j]);
                if(codes[j] == v_sel) {
                    //actualizamos imagen
                    $("#image-block-fondo #visualizador")
                        .attr("src",'/img/p/'+img);
                }
            }
        }
        
        //relación select - img

        //cargamos img correspondiente al select actual
    }

    //etiquetas ropa color
    $("#awp_group_15").bind("change",update_color);
    //typo
    $("#awp_group_16").bind("change",update_typo);
    //nombre
    $("#awp_textbox_group_69").bind("keyup",update_nombre);
    $("#awp_textbox_group_70").bind("keyup",update_nombre);
    $("#awp_textbox_group_71").bind("keyup",update_nombre);
	
    //al cerrar popup borramos input nombre
    $("#awp_box .awp_header img").bind("click",close);

    init();
    
    $("img[title^='fondo']").hide();

    //al abrir popup
    $("#awp_add_to_cart input").mouseup(function(){
        load_image_actual();
    });
});