/*Configuración variables scroll horizontal*/
var xpos_scrollH=0;
var ancho_barra=0;
var ancho_bola=0;
var ancho_izq=0;
var ancho_der=0;
var posfin_barra=0;
var posini_bola=0;
var posfin_bola=0;

var ancho_contenedor=0;
var ancho_contenido=0;
var ancho_contenido_visible=0;	
var posini_contenido=0;
var posfin_contenido=0;

var ancho_contenedor2=0;
var ancho_contenido2=0;
var ancho_contenido2_visible=0;	
var posini_contenido2=0;
var posfin_contenido2=0;

var intervalo_scrollH=0;
var intervalo_contenido=0;
var intervalo_contenido2=0;
var numintervalos_scrollH=0;

var posX_bola=0;
var posX_contenido=0;
var posX_contenido2=0;





var sw_desplazamientoH=false;
var sw_arrastreH=false;
var scrollH_utilizado='';			
var velocidadH=1;
var tempo="";		
/*Fin configuracion variables scroll horizontal*/


function calcularposiciones(contenedor,contenido,contenedor2,contenido2,barra,bola,izquierda,derecha){
	
        //ajustamos el tamaño de las capas a su contenido
	var alto_barra=document.getElementById(barra).firstChild.height;
	
	document.getElementById(barra).firstChild.width=document.getElementById(contenedor).offsetWidth-(document.getElementById(izquierda).firstChild.firstChild.offsetWidth*2);
	
	

	document.getElementById(barra).firstChild.height=alto_barra;
	//alert(document.getElementById(izquierda).width);
	document.getElementById(izquierda).style.width=document.getElementById(izquierda).firstChild.firstChild.offsetWidth;
	document.getElementById(bola).style.width=document.getElementById(bola).firstChild.firstChild.offsetWidth;
	
	document.getElementById(derecha).style.width=document.getElementById(derecha).firstChild.firstChild.offsetWidth;

	//calculamos las posiciones de las capas
	document.getElementById(barra).style.left=document.getElementById(contenedor).offsetLeft+document.getElementById(izquierda).firstChild.firstChild.offsetWidth;
	document.getElementById(barra).style.top=document.getElementById(contenedor).offsetTop+document.getElementById(contenedor).offsetHeight;
	document.getElementById(bola).style.left=document.getElementById(barra).offsetLeft;
	document.getElementById(bola).style.top=document.getElementById(barra).offsetTop+5;
	document.getElementById(izquierda).style.left=document.getElementById(barra).offsetLeft-document.getElementById(izquierda).firstChild.firstChild.offsetWidth;
	document.getElementById(izquierda).style.top=document.getElementById(barra).offsetTop+5;
	document.getElementById(derecha).style.left=document.getElementById(barra).offsetLeft+document.getElementById(barra).offsetWidth;
	document.getElementById(derecha).style.top=document.getElementById(barra).offsetTop+5;

	/*VARIABLES DEL SCROLL*/	
	//longitud horizontgetElementById de la barra de scroll horizontal
	ancho_barra=document.getElementById(barra).offsetWidth;
	
	//longitud horizontal de la bola de la barra de scroll horizontal
	ancho_bola=document.getElementById(bola).offsetWidth;
	
	//posición X inicial de la bola de la barra de scroll
	posini_bola=document.getElementById(bola).offsetLeft;
	
	//posición X final de la bola de la barra de scroll
	posfin_bola=posini_bola+ancho_barra-ancho_bola;
	/*FIN VARIABLES DEL SCROLL*/

	/*VARIABLES DEL CONTENEDOR Y EL CONTENIDO*/
        //longitud horizontal de la capa contenedora de la capa contenido (es la máscara del contenido a mostrar)
        ancho_contenedor=document.getElementById(contenedor).offsetWidth;
	
	//longitud horizontal de la capa contenido
	ancho_contenido=document.getElementById(contenido).offsetWidth;
	
	//longitud horizontal de la parte visible de la capa contenido
	ancho_contenido_visible=ancho_contenido-ancho_contenedor;
	

	
	//posición inicial del contenido
	posini_contenido=document.getElementById(contenido).offsetLeft;
	
	//posición final del contenido
	posfin_contenido=posini_contenido+ancho_contenido_visible;
	/*FIN VARIABLES DEL CONTENEDOR Y EL CONTENIDO*/
	
	/*VARIABLES DEL CONTENEDOR2 Y EL CONTENIDO2*/
	if(contenedor2!=""){
		
		//longitud horizontal de la capa contenedora2 de la capa contenido2 (es la máscara del contenido a mostrar)
	        ancho_contenedor2=document.getElementById(contenedor2).offsetWidth;
		
		//longitud horizontal de la capa contenido2
		ancho_contenido2=document.getElementById(contenido2).offsetWidth;
		
		//longitud horizontal de la parte visible de la capa contenido2
		ancho_contenido2_visible=ancho_contenido2-ancho_contenedor2;
		
		//posición inicial del contenido2
		posini_contenido2=document.getElementById(contenido2).offsetLeft;
		
		//posición final del contenido2
		posfin_contenido2=-posini_contenido2+ancho_contenido2_visible;
		
	}
	/*FIN VARIABLES DEL CONTENEDOR2 Y EL CONTENIDO2*/
	
        //número de pixeles que avanza la bola del scroll en cada movimiento
        intervalo_scrollH=3;
        
        if(ancho_contenido<400){
        	intervalo_scrollH=15;
        }else if(ancho_contenido<450){
        	intervalo_scrollH=5;
        }else if(ancho_contenido<500){
        	intervalo_scrollH=4;
        }
	
	//número de pixeles que avanza los contenidos en cada movimiento de la bola del scroll
	intervalo_contenido=(intervalo_scrollH*ancho_contenido_visible)/(ancho_barra-ancho_bola);
	if(contenedor2!="") intervalo_contenido2=(intervalo_scrollH*ancho_contenido2_visible)/(ancho_barra-ancho_bola);
		
	
	
	
	//visualizamos las capas del scroll uma vez posicionadas
	
	document.getElementById(bola).style.visibility='visible';
	document.getElementById(barra).style.visibility='visible';
	document.getElementById(izquierda).style.visibility='visible';
	document.getElementById(derecha).style.visibility='visible';

}

function desplazamientohorizontal(bola,contenido,contenido2,accion){

		if(accion=="izquierda_scrollH"){
				
			//Movemos la bola hacia la izquierda un intervalo del contenido
			posX_bola=document.getElementById(bola).offsetLeft-intervalo_scrollH;	
			
		}else if(accion=="derecha_scrollH"){
				
			//Movemos la bola hacia la derecha un intervalo del contenido
			posX_bola=document.getElementById(bola).offsetLeft+intervalo_scrollH;
			
			
	
		}else{//Si arrastramos la bola del scroll ('accion' vale ahora la posición del cursor)
			//Movemos la bola al punto donde está situado el cursor
			posX_bola=(accion-(ancho_bola/2))-document.getElementById('marcocentral').offsetLeft;
			
			
		}
		
		
		//calculamos el nº de intervalos que hay que mover los contenidos
		numintervalos_scrollH=(posX_bola-posini_bola)/intervalo_scrollH;

			
		//Movemos el contenido en correspondencia con el movimiento de la bola del cursor
		posX_contenido=-intervalo_contenido*numintervalos_scrollH;
		
			
		
		if(contenido2!=""){
				       
			//Movemos el contenido2 en correspondencia con el movimiento de la bola del cursor 
			posX_contenido2=-intervalo_contenido2*numintervalos_scrollH;
		}
		
			
		//estas condiciones obligan a los contenidos y a la bola de scroll a no superar los límites establecidos		
		if(posX_bola<posini_bola){
			posX_bola=posini_bola;
			
		}else if(posX_bola>(posfin_bola)){
			posX_bola=posfin_bola;	
			
		}
		if(posX_contenido>posini_contenido){
			posX_contenido=posini_contenido;
		
		}else if(-posX_contenido>posfin_contenido){
		
			posX_contenido=-posfin_contenido;			
		}
			
		
		if(contenido2!=""){
			if(posX_contenido2>posini_contenido2){
				posX_contenido2=posini_contenido2;
			}else if(-posX_contenido2>posfin_contenido2){
				posX_contenido2=posfin_contenido2;			
			}
		}
		
		
		//damos finalmente los valores de movimiento tanto de los contenidos como de la bola de scroll
		document.getElementById(bola).style.left=posX_bola;
		
		document.getElementById(contenido).style.left=posX_contenido;
		
			
		
			
		if(contenido2!="") document.getElementById(contenido2).style.top=posX_contenido2;
			
		//Si todavía mantenemos pulsado el extremo inferior del scroll	
		if(sw_desplazamientoH){
			tempo=setTimeout("desplazamientohorizontal('"+bola+"','"+contenido+"','"+contenido2+"','"+accion+"')",velocidadH);
		}else{
			clearTimeout(tempo);
		}
		//document.getElementById['capa'].innerHTML="<font color='white'>posX_contenido="+posX_contenido+'<br>'+'posini_contenido='+posini_contenido+'<br>'+'posfin_contenido='+posfin_contenido+'<br>intervalo_contenido='+intervalo_contenido+'<br>posX_bola='+posX_bola+'<br>numintervalos_scrollH='+numintervalos_scrollH+'<br>posX_bola='+posX_bola+'<br>posini_bola='+posini_bola+'<br>intervalo_scrollH='+intervalo_scrollH+'<br>accion-(ancho_bola/2);='+accion+', '+ ancho_bola+','+(accion-(ancho_bola/2))+'<br>left='+document.getElementById(contenido).style.left+'<br>offsetLeft='+document.getElementById(contenido).offsetLeft;	
}