//inicio lib
function $(id){
    return document.getElementById(id);    
}
function addEvent(obj, evType, fn, useCapture){
 
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    
  } else if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn);
   
  } else {
   obj['on'+evType]=fn;
  }
}

function removeEvent(obj, evType, fn, useCapture){
  if (obj.removeEventListener){
    obj.removeEventListener(evType, fn, useCapture);
  } else if (obj.detachEvent){
    obj.detachEvent("on"+evType, fn);
  } else {
    obj['on'+evType]=function(){};
  }
}

function stopEvent(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}
function cancelEvent(e) {
    if (!e) e = window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

function getElementsByRelName(rel){
    var col=[];
    var tCol=document.getElementsByTagName('*');
    for(var i=0;i<tCol.length;i++)
        if(tCol[i].getAttribute('rel')==rel)
            col.push(tCol[i].id)
    return col;
}

Array.prototype.in_array=function(){
    for(var j in this){
        if(this[j]==arguments[0]){
            return true;
        }
    }
    return false;    
}

function getNextHighestDepth(){
    var tCol=document.getElementsByTagName('*');
    var z=0;
        for(var i=0;i<tCol.length;i++){
            if(tCol[i].style.zIndex>z){
                z=tCol[i].style.zIndex;
            }
            
        }
    return ++z;
}

//fin lib

arrastrable={};

function mover(e){
    e=e || window.event;
    o=e.srcElement || e.target;
    if(!arrastrable.coleccion.in_array(o.id)){
        if(arrastrable.coleccion.in_array(o.parentNode.id))
            o=o.parentNode;
    }
    arrastrable.c2x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
    arrastrable.c2y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
    o.style.left=arrastrable.c2x-arrastrable.c1x+arrastrable.o1x+'px';
    o.style.top=arrastrable.c2y-arrastrable.c1y+arrastrable.o1y+'px';
    cancelEvent(e);
    stopEvent(e);
}

function detener(){
    removeEvent(document, 'mousemove', mover, false);
    removeEvent(document, 'mouseup', detener, false);
}

function i(e){
    arrastrable.coleccion=getElementsByRelName('arrastrables');
    e=e || window.event;
    o=e.srcElement || e.target;
    if(!arrastrable.coleccion.in_array(o.id)){
        if(arrastrable.coleccion.in_array(o.parentNode.id))
            o=o.parentNode;
    }
    if(o.position!="relative"||!o.style.position){
        o.style.position="relative";
        o.style.cssFloat="none";
        o.style.zIndex=getNextHighestDepth();
    }
    arrastrable.c1x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
    arrastrable.c1y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
    arrastrable.o1x=!isNaN(parseInt(o.style.left))?parseInt(o.style.left):0;
    arrastrable.o1y=!isNaN(parseInt(o.style.top))?parseInt(o.style.top):0;
    addEvent(document, 'mousemove',mover, false);
    addEvent(document, 'mouseup',detener, false);
    cancelEvent(e);
    stopEvent(e);
}

function makeDraggable(){
    for(var j=0;j<arguments.length;j++){
        $(arguments[j]).setAttribute('rel','arrastrables');
        $(arguments[j]).style.cursor='move';
        addEvent($(arguments[j]), 'mousedown',i, false);
    }
}

window.onload=function(){
    makeDraggable('pp','Registro');
}