/* 
>>>   SCROLL HORIZONTAL  <<<
 */

this.scroll_horizontal = function(contenedor_scroll, width){

    // id of the container element 
    var id = contenedor_scroll;
	
    // navigation buttons text
    var nav = ["", ""];
    
    //	id for each navigation button (OPTIONAL)
    var navId = ["en_scrollizq", "en_scrollder"];
	
	// desplazamiento destino (valor de left) al pulsar el boton de scroll
	var newWidth = 0;
    
    //
    // END CONFIG
    // do not edit below this line (unless you want to of course :) )
    //
    
    var obj = document.getElementById(id);
    
    obj.left = false;
    obj.right = false;
    
    var container = document.createElement("div");
    var parent = obj.parentNode;
    container.id = "scroll_horizontal";
    parent.insertBefore(container, obj);
    parent.removeChild(obj);
    
    container.style.position = "relative";
    container.style.height = 100 + "%";
    container.style.overflow = "hidden";
    obj.style.position = "absolute";
    obj.style.top = "0";
    obj.style.left = "0";
    container.appendChild(obj);
    
    var btns = new Array();

    var ul = document.createElement("ul");
    ul.id = "scroll_horizontalnav"; 
    for (var i = 0; i < nav.length; i++) {
        var li = document.createElement("li");
        li.innerHTML = nav[i];
        li.id = navId[i];
        btns.push(li);
        ul.appendChild(li);
    };
    parent.appendChild(ul);
//obj.offsetWidth es el ancho del contenedor de las paneles
// width es el ancho de un panel

    btns[0].onclick = function(){  // izq (que esta a la derecha del bocadillo)
    	if ((obj.offsetWidth + obj.offsetLeft - width) < width - 20) {  // 20= factor de correccion 
			obj.left = false;
//			alert('hola1');
		}
		else {
//			alert('hola2');
	        obj.left = true;
			newWidth -= width;			
		}
		obj.right = false;
    };
    btns[1].onclick = function(){  // der  (que esta a la izquierda del bocadillo)
    	if ( (Math.abs(obj.offsetLeft) + 5 ) < width ) {  // + 5 factor de correccion porque el left a veces es aprox 288 en vez de 290
			obj.right = false;
	//		alert('hola3');
		}
		else {
//			alert('hola4');
	        obj.right = true;
			newWidth += width;
		}
		obj.left= false;
    };
	
    
    
	// funcion start
    this.start = function(){
        var newLeft;
        var objWidth = obj.offsetWidth;
        var left = obj.offsetLeft;
				
//		objeto._x += (cordenadadestino - objeto._x)*0.10;
		
        if (obj.left) {
            newLeft = (((objWidth + left)) > width) ? left + ((newWidth-left)*0.2) : left;
            obj.style.left = newLeft + "px";
			if ( (newLeft <= newWidth) || ((objWidth + left - 5) <= width) )  {
	            obj.left = false;
				newWidth= -objWidth + width; // 0;				
				document.getElementById("en_scrollizq").style.visibility="hidden";				
				document.getElementById("en_scrollder").style.visibility="visible"; 
			}
			else if (-obj.offsetLeft > 10){
				document.getElementById("en_scrollder").style.visibility="visible";				
			}
        }        
        if (obj.right) {
            newLeft = (left < 0) ? left + ((newWidth-left)*0.2) : left;
            obj.style.left = newLeft + "px";
			if ( (left>=-10) || ((objWidth + left) <= width) ){
 	          	obj.right = false;
				newWidth=0;
				document.getElementById("en_scrollder").style.visibility="hidden";
				document.getElementById("en_scrollizq").style.visibility="visible";
			}
			else if (obj.offsetWidth - (-obj.offsetLeft) > width + 10){
				document.getElementById("en_scrollizq").style.visibility="visible";
			}
        };
    }; // fin start 
    obj.interval = setInterval("start()", 1);
}