var SVG_NS = 'http://www.w3.org/2000/svg';
var svg = document.querySelector("svg");
var oTrazados = []; 
var svgRaton = {x:0, y:0};// la posición del ratón relativo al lienzo SVG
var arrastrar = false;



var trazados = [
  {att:{cx:225, cy:175, rx:70,ry:50,fill:"#2a80b9"},
  nombreEtiqueta:"ellipse"},
  {att:{cx:280,cy:250,r:60,fill:"#16a086"},
  nombreEtiqueta:"circle"},
  {att:{x:70,y:70,width:125,height:90,fill:"#e77e23"},
  nombreEtiqueta:"rect"},
  {att:{points:"134,128 209,288 59,288",fill:"#f1c40f"},
  nombreEtiqueta:"polygon"},
  {att:{d:"M135,220C135,175 170,125 205,140C240,155 210,225 190,225C180,225 180,205 160,205C150,205 147,225 142,225C140,225 135,225 135,220Z", fill:"#8f44ad"},nombreEtiqueta:"path"}
];

function oMousePos(elemento, evt) {
  var ClientRect = elemento.getBoundingClientRect();
  return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}

function Trazado() {
  this.att = {};
  this.elemento;
  
  this.rectRaton = {x:0, y:0};// la posición del ratón relativo al trazado
  this.distInicial = {x:0, y:0};// la posición inicial del trazado
  
  this.nombreEtiqueta = "";
  
  this.dibujar = function(elementoPadre) {
    var elmt = document.createElementNS(SVG_NS, this.nombreEtiqueta);
    for (var name in this.att) {
      if (this.att.hasOwnProperty(name)) {
        elmt.setAttributeNS(null, name, this.att[name]);
      }
    }
    elementoPadre.appendChild(elmt);
    this.elemento = elmt;
  }
  
  this.actualizar = function(x,y){
    this.elemento.setAttributeNS(null, "transform", "translate("+x+","+y+")");
  }  
}//function Trazado()


for( var i = 0; i < trazados.length; i++ ){
  //crea un nuevo objeto Trazado
  var oTrazado = new Trazado();
  // establece los atributos del nuevo trazado
  oTrazado.att = trazados[i].att;
  // y el nombre de la etiqueta: rect, ellipse....
  oTrazado.nombreEtiqueta = trazados[i].nombreEtiqueta;  
  // dibuja el nuevo trazado
  oTrazado.dibujar(svg);
  // lo guarda en el array de los trazados: oTrazados
  oTrazados.push(oTrazado);
}

  var t = svg.querySelectorAll("*");


for(var n = 0; n < t.length; n++){
    (function(n) {
     var num = 0;// un contador
     t[n].addEventListener("mousedown", function(evt){
       num++
       svgRaton = oMousePos(svg, evt); 
       oTrazados[n].rectRaton = oMousePos(this, evt);
       
       if(num == 1){// calculado solo una vez, en el primer clic encima del trazado.
       // recupera la posición inicial del trazado
       oTrazados[n].distInicial.x = svgRaton.x - oTrazados[n].rectRaton.x;
       oTrazados[n].distInicial.y = svgRaton.y - oTrazados[n].rectRaton.y;
       }
       arrastrar = true;
     }, false);
      
     t[n].addEventListener("mousemove", function(evt) {
       if (arrastrar) {
        svgRaton = oMousePos(svg, evt);
         var x = svgRaton.x - oTrazados[n].rectRaton.x - oTrazados[n].distInicial.x;
         var y = svgRaton.y - oTrazados[n].rectRaton.y - oTrazados[n].distInicial.y;
        oTrazados[n].actualizar( x, y);  
       }
       }, false);
       
       t[n].addEventListener("mouseup", function(evt) {
       arrastrar = false;
       }, false);

       t[n].addEventListener("mouseout", function(evt) {
       arrastrar = false;
       }, false); 
          
    }(n));
}