/**************************************************/
/*                                                */
/* k.animation.js                                 */
/* Versión 1.4                                    */
/* Animación para sitios HTML                     */
/*                                                */
/* (c) 2010 Komperio S.A. de C.V.                 */
/* David Vázquez                                  */
/* Basado en animation.as por Roberto G. Calvillo */
/*                                                */
/* Queda prohibido su uso, modificación, o        */
/* distribución, sin el consentimiento de su      */
/* propietario.                                   */
/*                                                */
/**************************************************/

//****  Variables configurables ****//

var intervaloVel = 33;
var divisorDefault = 2;

//**********************************//

var nextId = 0;
var zIndexCont = 50;

var animationArrays = new Object();
animationArrays.arrayAnimaciones = new Array();
animationArrays.arrayEventos = new Array();
animationArrays.arrayIntervals = new Array();
animationArrays.arrayPos = new Array();	
animationArrays.arrayAlpha = new Array();
animationArrays.arraySize = new Array();
animationArrays.arrayEndAnimation = new Array();

// Funcion moveTo
function moveTo(ide, x, y, vel){
	
	// Se crea un registro de que se va ha hacer la animacion
	if(animationArrays.arrayAnimaciones[ide] == null){
		animationArrays.arrayAnimaciones[ide] = new Object;
		animationArrays.arrayAnimaciones[ide].tipo = new Array;
		animationArrays.arrayAnimaciones[ide].tipo['moveTo'] = nextId;
	}else{
		if(animationArrays.arrayAnimaciones[ide].tipo == null){
			animationArrays.arrayAnimaciones[ide].tipo = new Array;
		}else{
			if(animationArrays.arrayAnimaciones[ide].tipo['moveTo'] == null){
				animationArrays.arrayAnimaciones[ide].tipo['moveTo'] = nextId;
			}else{
				// Si hay una animacion del mismo tipo de para y se continua con la nueva
				if(animationArrays.arrayAnimaciones[ide].tipo['moveTo'] >= 0){
					idAnterior = animationArrays.arrayAnimaciones[ide].tipo['moveTo'];
					clearInterval(animationArrays.arrayIntervals[idAnterior]);
				}
				animationArrays.arrayAnimaciones[ide].tipo['moveTo'] = nextId;
			}
		}
	
				
	}
	
	var divisor = (vel == undefined) ? divisorDefault : vel;
	
	// Se obtiene el apuntador al objeto a animar
	var lay  = document.getElementById(ide);
	lay.style.position = 'absolute';
	
	// Se agerga un registro en donde contenga la posicion de objeto
	animationArrays.arrayPos[nextId] = new Object;
	animationArrays.arrayPos[nextId].temp_posX = (x != undefined)? x : lay.offsetLeft;
	animationArrays.arrayPos[nextId].temp_posY = (y != undefined)? y : lay.offsetTop;
	
	// Se genera el evento del objeto a animar
	animationArrays.arrayEventos[nextId] = function(ide, divisor, nextId){
		
		lay  = document.getElementById(ide);
		var posX = lay.offsetLeft;
		var posY = lay.offsetTop;
		
		var temporal;
		var deltaX;
		var deltaY;
		
		if (animationArrays.arrayPos[nextId].temp_posX != posX) {
			
			animationArrays.arrayPos[nextId].difX = Math.abs(animationArrays.arrayPos[nextId].temp_posX - posX);
			
			if (animationArrays.arrayPos[nextId].difX > 1) {
				
				if((animationArrays.arrayPos[nextId].temp_posX - posX) < 0)
					deltaX = Math.floor((animationArrays.arrayPos[nextId].temp_posX - posX) / divisor);
				else
					deltaX = Math.ceil((animationArrays.arrayPos[nextId].temp_posX - posX) / divisor);
				
				temporal = posX + deltaX;
				lay.style.left = temporal + "px";
				
			}
			else {
				deltaX = 0;
				lay.style.left = animationArrays.arrayPos[nextId].temp_posX + "px";
				animationArrays.arrayPos[nextId].temp_posX = posX;
			}
		}
		
		if (animationArrays.arrayPos[nextId].temp_posY != posY) {
			
			animationArrays.arrayPos[nextId].difY = Math.abs(animationArrays.arrayPos[nextId].temp_posY - posY);
			
			if (animationArrays.arrayPos[nextId].difY > 1) {
				
				if((animationArrays.arrayPos[nextId].temp_posY - posY) < 0)
					deltaY = Math.floor((animationArrays.arrayPos[nextId].temp_posY - posY) / divisor);
				else
					deltaY = Math.ceil((animationArrays.arrayPos[nextId].temp_posY - posY) / divisor);
				
				temporal = posY + deltaY;
				lay.style.top = temporal + "px";
				
			}
			else {
				deltaY = 0;
				lay.style.top = animationArrays.arrayPos[nextId].temp_posY + "px";
				animationArrays.arrayPos[nextId].temp_posY = posY;				
			}
		}

		if (animationArrays.arrayPos[nextId].temp_posX == posX && animationArrays.arrayPos[nextId].temp_posY == posY) {
					
			animationArrays.arrayAnimaciones[ide].tipo['moveTo'] = -1;
			clearInterval(animationArrays.arrayIntervals[nextId]);
			animationArrays.arrayEndAnimation[nextId].endAnimationHandler();
			
		}
		
	}
	
	// Se crea el intervalo de la animacion
	animationArrays.arrayIntervals[nextId] = setInterval("animationArrays.arrayEventos[" + nextId + "]('" + ide + "', " + divisor + " , " + nextId + ")", intervaloVel);
	
	var idReturn = nextId;
	nextId++;
		
	animationArrays.arrayEndAnimation[idReturn] = new Object;
	animationArrays.arrayEndAnimation[idReturn].endAnimationHandler = function(){}
		
	return animationArrays.arrayEndAnimation[idReturn];

}


// Funcion fadeOut
function fadeOut(ide, vel){
	
	// Se crea un registro de que se va ha hacer la animacion
	if(animationArrays.arrayAnimaciones[ide] == null){
		animationArrays.arrayAnimaciones[ide] = new Object;
		animationArrays.arrayAnimaciones[ide].tipo = new Array;
		animationArrays.arrayAnimaciones[ide].tipo['fade'] = nextId;
	}else{
		if(animationArrays.arrayAnimaciones[ide].tipo == null){
			animationArrays.arrayAnimaciones[ide].tipo = new Array;
		}else{
			if(animationArrays.arrayAnimaciones[ide].tipo['fade'] == null){
				animationArrays.arrayAnimaciones[ide].tipo['fade'] = nextId;
			}else{
				// Si hay una animacion del mismo tipo de para y se continua con la nueva
				if(animationArrays.arrayAnimaciones[ide].tipo['fade'] >= 0){
					idAnterior = animationArrays.arrayAnimaciones[ide].tipo['fade'];
					clearInterval(animationArrays.arrayIntervals[idAnterior]);
				}
				animationArrays.arrayAnimaciones[ide].tipo['fade'] = nextId;
			}
		}
	}
	
	// Si es la primera vez que se anima este elemento se le asigna el grado de alpha
	if(animationArrays.arrayAlpha[ide] == null){
		animationArrays.arrayAlpha[ide] = 100;
	}
	
	var velocidad = (vel == undefined) ? 20 : vel;
	
	// Se genera el evento del objeto a animar
	animationArrays.arrayEventos[nextId] = function(ide, vel, nextId){
	
		if (animationArrays.arrayAlpha[ide] <= 0){
			animationArrays.arrayAnimaciones[ide].tipo['fade'] = -1;
			clearInterval(animationArrays.arrayIntervals[nextId]);
			animationArrays.arrayAlpha[ide] = 0;
			animationArrays.arrayEndAnimation[nextId].endAnimationHandler();
		}else{
			animationArrays.arrayAlpha[ide] -= vel;
		}
		
		// Dependiendo el navegador hace lo debido para la animacion
		var navegador = navigator.appName;
		if (navegador == "Microsoft Internet Explorer") 
			document.getElementById(ide).style.filter="alpha(opacity=" + animationArrays.arrayAlpha[ide] + ")";
		else 
			document.getElementById(ide).style.opacity = animationArrays.arrayAlpha[ide] / 100;
		
	}	
	
	// Se crea el intervalo de la animacion
	animationArrays.arrayIntervals[nextId] = setInterval("animationArrays.arrayEventos[" + nextId + "]('" + ide + "', " + velocidad + ", " + nextId + ")", intervaloVel);
	
	var idReturn = nextId;
	nextId++;
		
	animationArrays.arrayEndAnimation[idReturn] = new Object;
	animationArrays.arrayEndAnimation[idReturn].endAnimationHandler = function(){}
	
	return animationArrays.arrayEndAnimation[idReturn];
	
}


// Funcion fadeIn	
function fadeIn(ide, vel){
	
	// Se crea un registro de que se va ha hacer la animacion
	if(animationArrays.arrayAnimaciones[ide] == null){
		animationArrays.arrayAnimaciones[ide] = new Object;
		animationArrays.arrayAnimaciones[ide].tipo = new Array;
		animationArrays.arrayAnimaciones[ide].tipo['fade'] = nextId;
	}else{
		if(animationArrays.arrayAnimaciones[ide].tipo == null){
			animationArrays.arrayAnimaciones[ide].tipo = new Array;				
		}else{
			if(animationArrays.arrayAnimaciones[ide].tipo['fade'] == null){
				animationArrays.arrayAnimaciones[ide].tipo['fade'] = nextId;
			}else{
				// Si hay una animacion del mismo tipo de para y se continua con la nueva
				if(animationArrays.arrayAnimaciones[ide].tipo['fade'] >= 0){
					idAnterior = animationArrays.arrayAnimaciones[ide].tipo['fade'];
					clearInterval(animationArrays.arrayIntervals[idAnterior]);							
				}					
				animationArrays.arrayAnimaciones[ide].tipo['fade'] = nextId;
			}
		}
	}
	
	// Si es la primera vez que se anima este elemento se le asigna el grado de alpha
	if(animationArrays.arrayAlpha[ide] == null){
		animationArrays.arrayAlpha[ide] = 100;
	}

	var velocidad = (vel == undefined) ? 20 : vel;	
	
	// Se genera el evento del objeto a animar
	animationArrays.arrayEventos[nextId] = function(ide, vel, nextId){
	
		if (animationArrays.arrayAlpha[ide] >= 100){
			animationArrays.arrayAnimaciones[ide].tipo['fade'] = -1;
			clearInterval(animationArrays.arrayIntervals[nextId]);
			animationArrays.arrayAlpha[ide] = 100;
			animationArrays.arrayEndAnimation[nextId].endAnimationHandler();
		}else{
			animationArrays.arrayAlpha[ide] += vel;
		}
		
		// Dependiendo el navegador hace lo debido para la animacion
		var navegador = navigator.appName;
		if (navegador == "Microsoft Internet Explorer") 
			document.getElementById(ide).style.filter="alpha(opacity=" + animationArrays.arrayAlpha[ide] + ")";
		else 
			document.getElementById(ide).style.opacity = animationArrays.arrayAlpha[ide] / 100;
		
	}
	
	// Se crea el intervalo de la animacion
	animationArrays.arrayIntervals[nextId] = setInterval("animationArrays.arrayEventos[" + nextId + "]('" + ide + "', " + velocidad + ", " + nextId + ")", intervaloVel);
	
	var idReturn = nextId;
	nextId++;
	
	animationArrays.arrayEndAnimation[idReturn] = new Object;
	animationArrays.arrayEndAnimation[idReturn].endAnimationHandler = function(){}
	
	return animationArrays.arrayEndAnimation[idReturn];
	
}


// Funcion resize
function resize(ide, width, height, vel){	
	
	// Se crea un registro de que se va ha hacer la animacion
	if(animationArrays.arrayAnimaciones[ide] == null){
		animationArrays.arrayAnimaciones[ide] = new Object;
		animationArrays.arrayAnimaciones[ide].tipo = new Array;
		animationArrays.arrayAnimaciones[ide].tipo['resize'] = nextId;
	}else{
		if(animationArrays.arrayAnimaciones[ide].tipo == null){
			animationArrays.arrayAnimaciones[ide].tipo = new Array;
		}else{
			if(animationArrays.arrayAnimaciones[ide].tipo['resize'] == null){
				animationArrays.arrayAnimaciones[ide].tipo['resize'] = nextId;
			}else{
				// Si hay una animacion del mismo tipo de para y se continua con la nueva
				if(animationArrays.arrayAnimaciones[ide].tipo['resize'] >= 0){
					idAnterior = animationArrays.arrayAnimaciones[ide].tipo['resize'];
					clearInterval(animationArrays.arrayIntervals[idAnterior]);							
				}					
				animationArrays.arrayAnimaciones[ide].tipo['resize'] = nextId;
			}
		}
	}
	
	var divisor = (vel == undefined) ? divisorDefault : vel;
	
	var lay = document.getElementById(ide);
	
	// Se guarda en un vector las medidas del objeto, para futuras referencias
	animationArrays.arraySize[nextId] = new Object;
	animationArrays.arraySize[nextId].temp_width = (width != undefined)? width : lay.offsetWidth;
	animationArrays.arraySize[nextId].temp_height = (height != undefined)? height : lay.offsetHeight;
		
	// Se genera el evento del objeto a animar
	animationArrays.arrayEventos[nextId] = function(ide, elDivisor, nextId){
		
		lay = document.getElementById(ide);		
		
		if (animationArrays.arraySize[nextId].temp_width != lay.offsetWidth) {
			
			animationArrays.arraySize[nextId].difWidth = Math.abs(animationArrays.arraySize[nextId].temp_width - lay.offsetWidth);
			
			if (animationArrays.arraySize[nextId].difWidth > 1) {
				
				if((animationArrays.arraySize[nextId].temp_width - lay.offsetWidth) < 0)
					deltaW = Math.floor((animationArrays.arraySize[nextId].temp_width - lay.offsetWidth) / divisor);
				else
					deltaW = Math.ceil((animationArrays.arraySize[nextId].temp_width - lay.offsetWidth) / divisor);
				
				temporalW = lay.offsetWidth + deltaW;
				lay.style.width = temporalW + "px";
				
				
			}
			else {
				lay.style.width = animationArrays.arraySize[nextId].temp_width + "px";
				animationArrays.arraySize[nextId].temp_width = lay.offsetWidth;
			}
		}
		
		
		if (animationArrays.arraySize[nextId].temp_height != lay.offsetHeight) {
			
			animationArrays.arraySize[nextId].difHeight = Math.abs(animationArrays.arraySize[nextId].temp_height - lay.offsetHeight);
			
			if (animationArrays.arraySize[nextId].difHeight > 1) {				
				
				if((animationArrays.arraySize[nextId].temp_height - lay.offsetHeight) < 0)
					deltaH = Math.floor((animationArrays.arraySize[nextId].temp_height - lay.offsetHeight) / divisor);
				else
					deltaH = Math.ceil((animationArrays.arraySize[nextId].temp_height - lay.offsetHeight) / divisor);
				
				temporalH = lay.offsetHeight + deltaH;
				lay.style.height = temporalH + "px";
				
				
			}
			else {
				lay.style.height = animationArrays.arraySize[nextId].temp_height + "px";
				animationArrays.arraySize[nextId].temp_height = lay.offsetHeight;
			}
		}
		
		if (animationArrays.arraySize[nextId].temp_width == lay.offsetWidth && animationArrays.arraySize[nextId].temp_height == lay.offsetHeight) {
			animationArrays.arrayAnimaciones[ide].tipo['resize'] = -1;
			clearInterval(animationArrays.arrayIntervals[nextId]);
			animationArrays.arrayEndAnimation[nextId].endAnimationHandler();
		}
		
	}
		
	// Se crea el intervalo de la animacion
	animationArrays.arrayIntervals[nextId] = setInterval("animationArrays.arrayEventos[" + nextId + "]('" + ide + "', " + divisor + ", " + nextId + ")", intervaloVel);
	
	var idReturn = nextId;
	nextId++;
		
	animationArrays.arrayEndAnimation[idReturn] = new Object;
	animationArrays.arrayEndAnimation[idReturn].endAnimationHandler = function(){}
	
	return animationArrays.arrayEndAnimation[idReturn];
	
}


// Pone al frente la layer
function setFront(ide){
	
	lay  = document.getElementById(ide);
	lay.style.position = 'absolute';
	lay.style.zIndex = zIndexCont;
	zIndexCont++;
	
}

// Regresa la posicion en X
function getX(ide){
	var lay  = document.getElementById(ide);
	var posX = lay.offsetLeft;
	return posX;
}

// Regresa la posicion en Y
function getY(ide){
	var lay  = document.getElementById(ide);
	var posY = lay.offsetTop;
	return posY;
}