// Compatibilidad con el innombrable engendro de mocosoft
var is_ie = navigator.appName == 'Microsoft Internet Explorer';
// Compatibilidad con Opera
var is_op = navigator.appName == 'Opera' ? true : false;
// Compatibilidad con firefox o netscape
var is_ns = !is_ie && !is_op ? true : false;

// Función principal....

/*
    Esta función require dos parámetros
    el primero de ellos (e) es el evento
    el segundo es el elemento sobre el que se desea arrastrar y soltar. 
*/

function js_drag(e,elemento,numElementos,id,url)
{
	// ************************************************ cosecha propia ************************************************
	var topDestinoIncial = document.getElementById("destino").offsetTop;
	var topElementoIncial = elemento.offsetTop;
	var leftElementoIncial = elemento.offsetLeft;
	if(document.getElementById("elemento-1")) {var topPrimerElemento = document.getElementById("elemento-1").offsetTop;}
	// ************************************************ cosecha propia ************************************************
		
    // Por situaciónes de compatibilidad para ns es 'e' suficiente, en cambio para IE e no basta sino window
    // aún no entiendo ¿por qué? acaso no se supone que TODO se basa en el objeto window 8-)
    e||window.event;
    var e = e;
    // Creamos un nuevo Objeto
    var Obj = new Object(); 
    // Obtenemos el tag BODY, ( siempre hay uno de esos )...
    var body  = document.getElementsByTagName('body')[0];
    // El z-index ( el arrange , Hasta al frente, Hasta el fondo etc.. ) 
    Obj.zI = 0;
    // Ahora, el argumento 'elemento' puede ser un objeto o bien una id del elemento
    // es decir js_drag(event,this) ó js_drag(event,'id')
    Obj.Elemento = typeof(elemento) == 'object' ? elemento : document.getElementById(elemento);
    
    // Esta función obtiene la posición en la que está el elemento HTML.
    js_position = function(ly,x,y)
    {
        /*
            Si es IE u Opera sumamos:
            clientX ( que es la posición del ratón en la ventana )
            document.documentElement.scrollLeft ( qué es la posición del mouse en el elemento )
            body.scrollLeft ( que es el scroll que se le ha dado a la página )
            Si es ns ( firefox, netscape, etcétera, )
            Sólo sumamos la posición del raton en la ventana y el scroll que se le ha dado a la página.
        */
        x = is_ie||is_op ? e.clientX + document.documentElement.scrollLeft + body.scrollLeft : e.clientX + window.scrollX;
        y = is_ie||is_op ? e.clientY + document.documentElement.scrollTop + body.scrollTop : e.clientY + window.scrollY;
        // Guardamos la posición 'x' y 'y' inicial del elemento en una variable ( contando el scroll ).
        Obj.startX=x;
        Obj.startY=y;
        // Guardamos la posición 'Left' y 'Right' inicial del elemento en una variable ( sin contar el scroll ).
        Obj.startL=parseInt(Obj.Elemento.style.left,10);
        Obj.startT=parseInt(Obj.Elemento.style.top,10);
        Obj.startL=isNaN(Obj.startL) ? 0 : Obj.startL;
        Obj.startT=isNaN(Obj.startT) ? 0 : Obj.startT;
        // Aumentamos el z-index del objeto para enviarlo hasta el frente ( aunque para IE esto no significa NADA )
        Obj.Elemento.style.zIndex = ++Obj.zI;
        
        /*
            js_addEvent() es una función propia, que añade al primer argumento en este caso 'document'
            una función en este caso 'startdrag' que se ejecuta cada segundo argumento en este caso 'mousemove'
        */
        js_addEvent(document,'mousemove',startdrag);
        // mouseup para cuando se 'suelte' el elemento
        js_addEvent(document,'mouseup',enddrag);
        // keypress para cuando se presione una tecla o se haga click por cuestiones conocidas
        // ¿ realmente necesito explicar que es por IE ?
        js_addEvent(document,'keypress',enddrag);
        
        // Ahora prevenimos que los eventos que acabamos de agregar se ejecuten inmediatamente
        if(is_ie){    e.cancelBubble = true;    e.returnValue = false;    } else
        {
            e.preventDefault();
        }
    };
    
    startdrag = function(e) {

		// ************************************************ cosecha propia ************************************************
			elemento.style.opacity = 0.5; elemento.style.filter = "alpha(opacity=50)";
		// ************************************************ cosecha propia ************************************************
				
        // Esto ya lo expliqué arriba...
        var x, y;
        e||event;
        x = is_ie||is_op ? e.clientX + document.documentElement.scrollLeft + body.scrollLeft : e.clientX + window.scrollX;
        y = is_ie||is_op ? e.clientY + document.documentElement.scrollTop + body.scrollTop : e.clientY + window.scrollY;
		
      
        // Sumamos las posiciones guardardas y las actuales y ésa es la posición actual ( a donde debe moverse )
        ILeft = ( Obj.startL + x - parseInt(Obj.startX)    );
        ITop = ( Obj.startT + y - parseInt(Obj.startY) );
        
		// ************************************************ cosecha propia ************************************************
		//document.getElementById("Raton").RatonX.value = document.getElementById("elemento-1").offsetTop; // Posición del puntero
		//document.getElementById("Raton").RatonY.value = elemento.offsetLeft; // Posición left del elemento
		
		var ancho = document.getElementById("destino").offsetWidth;
		var alto = document.getElementById("destino").offsetHeight;
		document.getElementById("destino").style.visibility = "hidden";	
		if(numElementos==0) {
			if(x>document.getElementById("destino").offsetLeft&&x<(parseInt(document.getElementById("destino").offsetLeft) + parseInt(ancho))&&y>document.getElementById("destino").offsetTop&&y<(parseInt(document.getElementById("destino").offsetTop) + parseInt(alto))){
							document.getElementById("destino").style.visibility = "visible";
			}
		}
		else {
			if(x>document.getElementById("destino").offsetLeft&&x<(parseInt(document.getElementById("destino").offsetLeft) + parseInt(ancho))&&y>document.getElementById("destino").offsetTop&&y<(parseInt(document.getElementById("destino").offsetTop) + parseInt(alto))){
							document.getElementById("destino").style.visibility = "visible";
			}
			else {
				for (i=1; i<numElementos+1; i++){
					ancho = document.getElementById("elemento-"+i).offsetWidth;
					alto = document.getElementById("elemento-"+i).offsetHeight;
					if(x>document.getElementById("elemento-"+i).offsetLeft&&x<(parseInt(document.getElementById("elemento-"+i).offsetLeft) + parseInt(ancho))&&y>document.getElementById("elemento-"+i).offsetTop&&y<(parseInt(document.getElementById("elemento-"+i).offsetTop) + parseInt(alto))){
							if(document.getElementById("elemento-1").offsetTop==topPrimerElemento) {
									document.getElementById("destino").style.top = document.getElementById("elemento-"+i).style.top;
									var calcTop2 = document.getElementById("destino").offsetTop;
									for (z=i; z<numElementos+1; z++){
										calcTop = document.getElementById("elemento-"+z).offsetTop;
										if(calcTop>=calcTop2) {document.getElementById("elemento-"+z).style.top = parseInt(calcTop)+ 60;}
									}
							}
							document.getElementById("destino").style.visibility = "visible";
							break;
					}
					else {
						var calcTop2 = document.getElementById("destino").offsetTop;
						if(topDestinoIncial!=calcTop2) {
							for (z=i; z<numElementos+1; z++){
								calcTop = document.getElementById("elemento-"+z).style.top;
								calcTop = Left(calcTop, (calcTop.length) -2);
								if(calcTop>=calcTop2) {document.getElementById("elemento-"+z).style.top = parseInt(calcTop)- 60;}
							}
							document.getElementById("destino").style.top = topDestinoIncial;
						}
					}
				}
			}
		}
		// ************************************************ cosecha propia ************************************************
		
		
        // js_moveTo esta función cambia la posición del elemento cambiando el estilo css presizamente 'top' y 'left'
        js_moveTo(Obj.Elemento,ILeft,ITop);
        
        // Esto también lo expliqué arriba...
        if(is_ie){    e.cancelBubble = true; e.returnValue = false;    }else
        {
            e.preventDefault();
        }
    };
    
    enddrag = function (e)    {    
	
	// ************************************************ cosecha propia ************************************************
		document.getElementById("destino").style.visibility = "hidden";
		elemento.style.opacity = 1; elemento.style.filter = "alpha(opacity=100)";
		
        var x, y;
        e||event;
        x = is_ie||is_op ? e.clientX + document.documentElement.scrollLeft + body.scrollLeft : e.clientX + window.scrollX;
        y = is_ie||is_op ? e.clientY + document.documentElement.scrollTop + body.scrollTop : e.clientY + window.scrollY;
		ancho = document.getElementById("destino").offsetWidth;
		alto = document.getElementById("destino").offsetHeight;
		
		if(x>document.getElementById("destino").offsetLeft&&x<(parseInt(document.getElementById("destino").offsetLeft) + parseInt(ancho))&&y>document.getElementById("destino").offsetTop&&y<(parseInt(document.getElementById("destino").offsetTop) + parseInt(alto))){
			elemento.style.top = document.getElementById("destino").style.top;
			elemento.style.left = document.getElementById("destino").style.left;
			var posicion = 1
			for (i=1; i<numElementos+1; i++){
				if(document.getElementById("elemento-"+i).offsetTop>document.getElementById("destino").offsetTop){break;}
				else {posicion = posicion + 1;}
			} 
			window.location = url + "&idADD="+ id +"&posicion=" + (posicion-1);
		}
		else{
			if(document.getElementById("destino").offsetTop==topPrimerElemento) {
				var calcTop2 = document.getElementById("destino").offsetTop;
				if(topDestinoIncial!=calcTop2) {
					for (z=i; z<numElementos+1; z++){
						calcTop = document.getElementById("elemento-"+z).style.top;
						calcTop = Left(calcTop, (calcTop.length) -2);
						if(calcTop>=calcTop2) {document.getElementById("elemento-"+z).style.top = parseInt(calcTop)- 60;}
					}
					document.getElementById("destino").style.top = topDestinoIncial;
				}				
			}
			elemento.style.left = leftElementoIncial;
			elemento.style.top = topElementoIncial;
		}
	// ************************************************ cosecha propia ************************************************
	
	
	// Cuando se deje de arrastrar entonces eliminamos los eventos que ya no nos sirven.
        js_detEvent(document,'mousemove',startdrag);
        js_detEvent(document,'mouseup',enddrag);
    };
    
    // Aquí inicializamos el arrastrar y soltar....
    js_position(Obj.Elemento,e.clientX,e.clientY);
};

js_moveTo = function(element,Left,Top)
{
    element.style.left = Left + "px";
    element.style.top  = Top + "px";
};

// Función que agrega los eventos
js_addEvent = function(Layer,eventype,func)
{
// addEventListener,attachEvent son propiedades para agregar funciones a  eventos
    if( is_ns )
        Layer.addEventListener( eventype, func, true );
    else if( is_ie )
        Layer.attachEvent( "on" + eventype, func );
    else
// Opera simplemente lo usa como un array.
        Layer[ "on" + eventype ] = func;
};

// Igual que la función de arriba sólo que aquí quitamos las funciones a los eventos.
js_detEvent = function(Layer,typef,func)
{
    if(is_ie)
        Layer.detachEvent("on" + typef, func);
    else if(is_ns)
        Layer.removeEventListener( typef, func, true);
    else
        Layer["on" + typef] = null;
};

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function Left(str, n){
	if (n <= 0)
	    return "";
	else if (n > String(str).length)
	    return str;
	else
	    return String(str).substring(0,n);
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function js_drag2(e,elemento,numElementos,id,expand,url)
{
	// ************************************************ cosecha propia ************************************************
	document.getElementById("menu").style.height = document.getElementById("menu").offsetHeight - 60; // ajustamos el tamaño del menu
	
	tabla = new Array();
	for(i=0; i<3; i++){tabla[i] = new Array();}
	
	for (i=1; i<numElementos+1; i++){
		tabla[0][i] = document.getElementById("elemento-"+i).offsetTop;
		tabla[1][i] = document.getElementById("elemento-"+i).offsetHeight + document.getElementById("elemento-"+i).offsetTop;
		tabla[2][i] = i;
	}
	
	document.getElementById("destino").style.top = elemento.style.top;
	document.getElementById("destino").style.height = elemento.offsetHeight;

	// ************************************************ cosecha propia ************************************************
		
    // Por situaciónes de compatibilidad para ns es 'e' suficiente, en cambio para IE e no basta sino window
    // aún no entiendo ¿por qué? acaso no se supone que TODO se basa en el objeto window 8-)
    e||window.event;
    var e = e;
    // Creamos un nuevo Objeto
    var Obj = new Object(); 
    // Obtenemos el tag BODY, ( siempre hay uno de esos )...
    var body  = document.getElementsByTagName('body')[0];
    // El z-index ( el arrange , Hasta al frente, Hasta el fondo etc.. ) 
    Obj.zI = 0;
    // Ahora, el argumento 'elemento' puede ser un objeto o bien una id del elemento
    // es decir js_drag(event,this) ó js_drag(event,'id')
    Obj.Elemento = typeof(elemento) == 'object' ? elemento : document.getElementById(elemento);
    
    // Esta función obtiene la posición en la que está el elemento HTML.
    js_position = function(ly,x,y)
    {
        /*
            Si es IE u Opera sumamos:
            clientX ( que es la posición del ratón en la ventana )
            document.documentElement.scrollLeft ( qué es la posición del mouse en el elemento )
            body.scrollLeft ( que es el scroll que se le ha dado a la página )
            Si es ns ( firefox, netscape, etcétera, )
            Sólo sumamos la posición del raton en la ventana y el scroll que se le ha dado a la página.
        */
        x = is_ie||is_op ? e.clientX + document.documentElement.scrollLeft + body.scrollLeft : e.clientX + window.scrollX;
        y = is_ie||is_op ? e.clientY + document.documentElement.scrollTop + body.scrollTop : e.clientY + window.scrollY;
        // Guardamos la posición 'x' y 'y' inicial del elemento en una variable ( contando el scroll ).
        Obj.startX=x;
        Obj.startY=y;
        // Guardamos la posición 'Left' y 'Right' inicial del elemento en una variable ( sin contar el scroll ).
        Obj.startL=parseInt(Obj.Elemento.style.left,10);
        Obj.startT=parseInt(Obj.Elemento.style.top,10);
        Obj.startL=isNaN(Obj.startL) ? 0 : Obj.startL;
        Obj.startT=isNaN(Obj.startT) ? 0 : Obj.startT;
        // Aumentamos el z-index del objeto para enviarlo hasta el frente ( aunque para IE esto no significa NADA )
        Obj.Elemento.style.zIndex = ++Obj.zI;
        
        /*
            js_addEvent() es una función propia, que añade al primer argumento en este caso 'document'
            una función en este caso 'startdrag' que se ejecuta cada segundo argumento en este caso 'mousemove'
        */
        js_addEvent(document,'mousemove',startdrag);
        // mouseup para cuando se 'suelte' el elemento
        js_addEvent(document,'mouseup',enddrag);
        // keypress para cuando se presione una tecla o se haga click por cuestiones conocidas
        // ¿ realmente necesito explicar que es por IE ?
        js_addEvent(document,'keypress',enddrag);
        
        // Ahora prevenimos que los eventos que acabamos de agregar se ejecuten inmediatamente
        if(is_ie){    e.cancelBubble = true;    e.returnValue = false;    } else
        {
            e.preventDefault();
        }
    };
    
    startdrag = function(e) {

		// ************************************************ cosecha propia ************************************************
			document.getElementById("menu").style.visibility = "visible";
			document.getElementById("destino").style.visibility = "visible";
			elemento.style.opacity = 0.5; elemento.style.filter = "alpha(opacity=50)";
		// ************************************************ cosecha propia ************************************************
				
        // Esto ya lo expliqué arriba...
        var x, y;
        e||event;
        x = is_ie||is_op ? e.clientX + document.documentElement.scrollLeft + body.scrollLeft : e.clientX + window.scrollX;
        y = is_ie||is_op ? e.clientY + document.documentElement.scrollTop + body.scrollTop : e.clientY + window.scrollY;
		
      
        // Sumamos las posiciones guardardas y las actuales y ésa es la posición actual ( a donde debe moverse )
        ILeft = ( Obj.startL ); // deshabilito el movimiento horizontal
        ITop = ( Obj.startT + y - parseInt(Obj.startY) );
        
		// ************************************************ cosecha propia ************************************************
		//document.getElementById("Raton").RatonX.value = topElementoIncial; // Posición del puntero
		//document.getElementById("Raton").RatonY.value = y; // Posición left del elemento
		
		if(ITop<document.getElementById("menu").offsetTop){ITop=document.getElementById("menu").offsetTop;} // limitamos top
		if(ITop>document.getElementById("menu").offsetHeight){ITop=document.getElementById("menu").offsetHeight;} // y bottom
		
		for (i=1; i<numElementos+1; i++){
				if(y<tabla[1][i]&&y>tabla[0][i]) {
						document.getElementById("destino").style.top = tabla[0][i];
						break;
				}
		}

		// ************************************************ cosecha propia ************************************************
		
		
        // js_moveTo esta función cambia la posición del elemento cambiando el estilo css presizamente 'top' y 'left'
        js_moveTo(Obj.Elemento,ILeft,ITop);
        
        // Esto también lo expliqué arriba...
        if(is_ie){    e.cancelBubble = true; e.returnValue = false;    }else
        {
            e.preventDefault();
        }
    };
    
    enddrag = function (e)    {    
	
	// ************************************************ cosecha propia ************************************************
		document.getElementById("menu").style.visibility = "hidden";
		document.getElementById("destino").style.visibility = "hidden";
		elemento.style.opacity = 1; elemento.style.filter = "alpha(opacity=100)";
		
		//alert("posicion: "+ (tabla[2][i]-1) + " id:" + id);
		window.location = url + "&idDEl=" + id + "&idADD=" + id + "&posicion=" + (tabla[2][i]-1) + "&expand2=" + expand;

	// ************************************************ cosecha propia ************************************************
	
	
	// Cuando se deje de arrastrar entonces eliminamos los eventos que ya no nos sirven.
        js_detEvent(document,'mousemove',startdrag);
        js_detEvent(document,'mouseup',enddrag);
    };
    
    // Aquí inicializamos el arrastrar y soltar....
    js_position(Obj.Elemento,e.clientX,e.clientY);
};

js_moveTo = function(element,Left,Top)
{
    element.style.left = Left + "px";
    element.style.top  = Top + "px";
};

// Función que agrega los eventos
js_addEvent = function(Layer,eventype,func)
{
// addEventListener,attachEvent son propiedades para agregar funciones a  eventos
    if( is_ns )
        Layer.addEventListener( eventype, func, true );
    else if( is_ie )
        Layer.attachEvent( "on" + eventype, func );
    else
// Opera simplemente lo usa como un array.
        Layer[ "on" + eventype ] = func;
};

// Igual que la función de arriba sólo que aquí quitamos las funciones a los eventos.
js_detEvent = function(Layer,typef,func)
{
    if(is_ie)
        Layer.detachEvent("on" + typef, func);
    else if(is_ns)
        Layer.removeEventListener( typef, func, true);
    else
        Layer["on" + typef] = null;
};