var ficheros = Array('imagenes/animHombre/f1.png','imagenes/animHombre/f2.png','imagenes/animHombre/f3.png','imagenes/animHombre/fp1.png','imagenes/animHombre/fp2.png','imagenes/animHombre/fp3.png','imagenes/animHombre/fp4.png','imagenes/animHombre/fp5.png','imagenes/animHombre/fp6.png','imagenes/animHombre/fp7.png','imagenes/animHombre/fp8.png','imagenes/animHombre/fp9.png','imagenes/animHombre/fp10.png','imagenes/animHombre/fp11.png','imagenes/animHombre/fp12.png','imagenes/animHombre/AnimacionSaltosFinal.gif', 'imagenes/animHombre/fArrastre1.png', 'imagenes/animHombre/stopIzda/ia1.png', 'imagenes/animHombre/stopIzda/ia2.png', 'imagenes/animHombre/stopIzda/ia3.png', 'imagenes/animHombre/stopIzda/ia4.png', 'imagenes/animHombre/stopIzda/ia5.png', 'imagenes/animHombre/stopIzda/ia6.png');

/*
var nombreCapa = "animacionDiv";			// Nombre de la capa que contiene la animacion
var nombreImg = "animacionImg";				// Nombre de la imagen
var nombreCapaMax = "maxCapa";				// Nombre de la capa que marca el ancho de la pagina
*/
var imagenes = null;
var inicioAnimacion = 3;
var finAnimacion = 14;
var siguienteAnimacion = 1;
var inicioStop = 17;
var finStop = 22;
var siguienteStop = inicioStop;
var capa = null;
var xAnimacion, anchoAnimacion;
var desplazamiento = 9;
var tiempoAnimacion = 200;
var winWidth = 0, winHeight = 0, docWidth = 0, docHeight = 0, totWidth = 0;
var scrollHor; 
var enMovimiento = "adelante"; 



function preloadImages() { 
	imagenes = new Array();
	for ( i=0; i < ficheros.length; i++ ){
		imagenes[i] = new Image;
		imagenes[i].src = ficheros[i];
	}
}

function cambiaImagen(img_name,img_src) {
	document[img_name].src = img_src;
}

function mueveAnimacion(desp){
	capa.style.left = parseInt(capa.style.left) + desp + 'px';
	xAnimacion += desp;
}

// el: document element
// style: string
function getStyle(el, style) {
  if(!document.getElementById) return;
 
   var value = el.style[toCamelCase(style)];
 
  if(!value)
    if(document.defaultView)
      value = document.defaultView.
         getComputedStyle(el, "").getPropertyValue(style);
   
    else if(el.currentStyle)
      value = el.currentStyle[toCamelCase(style)];
  
   return value;
}

function setStyle(objId, style, value) {
  document.getElementById(objId).style[style] = value;
}

function toCamelCase( sInput ) {
  var oStringList = sInput.split('-');
  if(oStringList.length == 1)  
    return oStringList[0];
  var ret = sInput.indexOf("-") == 0 ?
      oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) : oStringList[0];
  for(var i = 1, len = oStringList.length; i < len; i++){
    var s = oStringList[i];
    ret += s.charAt(0).toUpperCase() + s.substring(1)
  }
  return ret;
}

function getWinSize() {
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		winWidth = window.innerWidth;
		winHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		winWidth = document.documentElement.clientWidth;
		winHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		winWidth = document.body.clientWidth;
		winHeight = document.body.clientHeight;
	}

	//IE Mozilla 
	if (document.body.clientWidth || document.body.clientHeight){ 
		docWidth = document.body.clientWidth; 
		docHeight = document.body.clientHeight; 
	} 
}

function getTotSize(){
	var div = document.getElementById(nombreCapaMax);
	totWidth = parseInt(getStyle(div, "width"));
}

function getScrollX() {
  var scrOfX = 0;
  if( typeof( window.pageXOffset ) == 'number' ) {
    //Netscape compliant
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft) ) {
    //DOM compliant
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft ) ) {
    //IE6 standards compliant mode
    scrOfX = document.documentElement.scrollLeft;
  }
  return scrOfX;
}

function actualizaAnimacion(){
	// Obtener la dimension de la ventana, pagina y scroll
	getWinSize();
	getTotSize();
	scrollHor = getScrollX();
	var maxWidth = Math.max(totWidth, docWidth);
	// Si la animacion se encuentra mas cerca que desplazamiento del margen izquierdo de la ventana, el desplazamiento sera esa distancia
	var minDesp = Math.min(docWidth+scrollHor-xAnimacion-anchoAnimacion, desplazamiento);
	minDesp = Math.max(minDesp, 1);
	if ( xAnimacion + anchoAnimacion > maxWidth ){						// La animacion esta mas a la derecha de la capa max.
		if ( enMovimiento != "atras" ){
			siguienteAnimacion = 0;
			siguienteStop = inicioStop;
		}
		if ( document[nombreImg].src != imagenes[15].src ){
			cambiaImagen(nombreImg, imagenes[15].src);					//AnimacionSaltosFinal
		}
		var nuevaPosicion = maxWidth - anchoAnimacion;
		var x = nuevaPosicion - xAnimacion;
		mueveAnimacion( x );	
		enMovimiento = "atras";
	}
	else if ( xAnimacion + anchoAnimacion + minDesp <= docWidth + scrollHor){   	// Puede moverse hacia a la izquierda
		if ( xAnimacion < (scrollHor - (5*minDesp))){								// La animacion esta fuera de la ventana
			mueveAnimacion( 5 * minDesp );
		}
		else{
			mueveAnimacion( minDesp );
		}
		cambiaImagen(nombreImg, imagenes[siguienteAnimacion].src);		//fp1.png -> fp12.png
		siguienteAnimacion = (siguienteAnimacion + 1);
		if ( siguienteAnimacion > finAnimacion ){
			siguienteAnimacion = inicioAnimacion;	
		}
		if (enMovimiento != "adelante"){
			enMovimiento = "adelante";
			siguienteStop =  inicioStop;
		}
	}
	else if ( xAnimacion + anchoAnimacion > docWidth + scrollHor){		// La animacion esta a la derecha de la ventana
		if ( enMovimiento != "atras" || ( document[nombreImg].src != imagenes[16].src )){
			cambiaImagen(nombreImg, imagenes[16].src);					//fArrastre1.png
			siguienteAnimacion = 0;
			siguienteStop = inicioStop;
		}
		// Calculo del desplazamiento segun la distancia de la animacion al borde de la ventana
		var distancia = xAnimacion + anchoAnimacion - (docWidth + scrollHor);
		var desp;
		if ( distancia > desplazamiento * 4 ){
			desp = desplazamiento * 4;
		}
		else if ( distancia > desplazamiento * 2 ){
			desp = desplazamiento * 2;
		}
		else{
			desp = Math.min(distancia, desplazamiento);
			desp = Math.max(desp, 1);
		}
		mueveAnimacion( -desp );
		enMovimiento = "atras";
	}
	else{																// La animacion esta parada al final de la ventana
		if ( enMovimiento != "atras" ){
			// Determinar si se ha llegado al final del documento
			var margen = winWidth - docWidth;
			if ( xAnimacion + anchoAnimacion + desplazamiento > totWidth - margen ){
				if ( ( enMovimiento != "parado" ) || ( document[nombreImg].src != imagenes[15].src ) ){
					cambiaImagen(nombreImg, imagenes[15].src);			//AnimacionSaltosFinal
					siguienteStop = inicioStop;	
				}
			}
			else{
				cambiaImagen( nombreImg, imagenes[siguienteStop].src );	// ia1.png -> ia6.png
				siguienteStop += 1;
				if ( siguienteStop > finStop )
					siguienteStop = inicioStop;
			}
			siguienteAnimacion = 0;
			enMovimiento = "parado";
		}
	}
}

function iniciaAnimacion(){
	preloadImages();
	getWinSize();
	getTotSize();
	capa = document.getElementById(nombreCapa);
	capa.style.left = '0px';
	anchoAnimacion = capa.offsetWidth;
	xAnimacion = 0;
	window.setInterval(actualizaAnimacion,tiempoAnimacion);
}