   function init(){

            var lines = 0;
        var tool;       
        var draw = 0;
        var mouse_state = 0;
        var path_id = 1;

        $("#tablero, #panel_herramientas").hide();
     $("#btn_cerrar").click(function(){
            $(this).parent().hide();
            $("#tablero, #panel_herramientas").fadeIn(1000);
       }); 

       $("#transportador_02").draggable({
            disabled : false,
            revert : true
       });

       $("#panel_herramientas img:not(#marcadores, #transportador_02)").click(function(){
           tool = $(this).attr('id');
           tool_class = $(this).attr('class').split(' ')[0];
            var pos_x;
            var pos_y;
            if(tool == "lapiz"){
                pos_x = 95;
                pos_y = 20;
            }
            else{
                pos_x = 55;
                pos_y = 0;
            }
            $("line, circle").attr({
                'style': 'cursor:url("img/cursor_' + tool + '.png") ' + pos_y + ' ' + pos_x + ', auto !important;',
            })
           $("#rect_1").attr({
                'style': 'cursor:url("img/cursor_' + tool + '.png") ' + pos_y + ' ' + pos_x + ', auto !important; fill:#42210B',
            })
            $("#inner").attr({
                'style': 'cursor:url("img/cursor_' + tool + '.png") ' + pos_y + ' ' + pos_x + ', auto !important; fill:#F2F2F2',
            })
            $("#rect_2").attr({
                'style': 'cursor:url("img/cursor_' + tool + '.png") ' + pos_y + ' ' + pos_x + ', auto !important;',
            })
    
            console.log(tool);
       });


       $("circle").click(function(){
            if(tool == "lapiz"){
                var pos_x = [];
                var pos_y = [];
                pos_x[0] = $(this).attr('cx');                
                pos_y[0] = $(this).attr('cy');                
                console.log(pos_x[0]);
                console.log(pos_y[0]);
                var SVG_Line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                if(lines == 0){
                    SVG_Line.setAttribute("x1",pos_x[0]);
                  SVG_Line.setAttribute("y1", pos_y[0]);
                }
                else{
                    var previous_x = $("#line_" + lines).attr('x2');
                    var previous_y = $("#line_" + lines).attr('y2');
                    SVG_Line.setAttribute("x1", previous_x);
                    SVG_Line.setAttribute("y1", previous_y);              
                }  

                  SVG_Line.setAttribute("x2",pos_x[0]);
                  SVG_Line.setAttribute("y2", pos_y[0]);
                  SVG_Line.setAttribute("style","stroke:#F7931E");
                  SVG_Line.setAttribute("stroke-width",3.5);                      
                  lines++;
                  console.log(lines);
                  SVG_Line.setAttribute("id", ("line_" + lines));
                  SVG_Line.setAttribute("class", "draw_line");
                  $("#svg_tablero").append(SVG_Line);
                }            
            });
        
      
        $("#svg_tablero line, #svg_tablero circle, #svg_tablero rect").mousemove(function(e){

            if(tool_class == "marcador"){
                if(e.which==1)
                {

           
                      var parentOffset = $(this).parent().offset(); 
                      var pos_x = (e.pageX);
                      var pos_y = (e.pageY);
                      
                      // var relX = e.pageX - parentOffset.left;
                      // var relY = e.pageY - parentOffset.top;
                      var color = $("#" + tool).attr('class').split('hex_')[1];
                      // console.log(color);

                     if(mouse_state == 0){
                        // console.log("Mouse presionando");
                          
                          // console.log(pos_y + " " + pos_x);
                          var SVG_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                          SVG_path.setAttribute("fill","none");             
                          SVG_path.setAttribute("stroke", ("#" + color));
                          SVG_path.setAttribute("opacity","none");
                          SVG_path.setAttribute("stroke-width",5);
                          SVG_path.setAttribute("style", "-webkit-tap-highlight-color: rgba(0, 0, 0, 0.8)");
                          SVG_path.setAttribute("id", ("path_" + path_id));
                          SVG_path.setAttribute('class', 'marcador_drawing');
                          SVG_path.setAttribute('d',('M' + pos_x + ',' + pos_y));
                          $("#sketch").append(SVG_path);  
                          mouse_state = 1;
                          // console.log(mouse_state);
                      }

                      else{
                          var coordinates = $("#path_" + path_id).attr('d');
                          coordinates += ("L" + pos_x + "," + pos_y);
                          $("#path_" + path_id).attr('d', coordinates);
                          // console.log(coordinates);
                          // console.log(mouse_state);
                      }   

                }        
            }
        });

        $(".ggb_contenidoInterno").mouseup(function(){
            if(tool_class == "marcador"){
                    console.log("Mouse suelto.");
                    mouse_state = 0;
                    path_id++;
                    console.log(path_id);
            }

          });

        $("#help").click(function(){
            $("#instrucciones").show();
        });

        $(".refresh").click(function(){
            $(".draw_line").remove();
            $(".marcador_drawing").remove();
        });
// <path fill="none" stroke="#000000" d="M419,209L418,209L418,209L418,211L419,212L419,213L419,213" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 3px;"></path>

   }
   