var _initialized = false;
var _imageloaded = false;
var _pos = 0;            // Current scroll position
var _increment = 1;      // How many pixels to shift per frame
var _paneWidth = 200;    // Width of the scrollpane
var _img;                // The image
var _pane;               // The scrollpane
var _htmlBackup;         // Backup of the pane content
var _speedBackup;
var _x_center;
var _pausing = false;

/*
 * scroll(image, width)
 * 
 *  Setup a pane for scrolling.
 *  The pane (normally a <div>) must have the id "scrollpane".
 *
 * Arguments:
 *
 *  image: URI to the image that's to be scrolled
 *
 *  width: optional, the width of the scroll pane
 */
function scroll(image, width, where) {
         if (!_initialized) {
            _pane = document.getElementById(where);
            if (width) {
                _paneWidth = width;
            }
            _pane.style.width = _paneWidth + "px";
            _pane.style.height = 100 + "px";
            _htmlBackup = _pane.innerHTML;
            _pane.innerHTML =
                "<div style=\"text-align:center; \
                 font-weight: normal;\
                 height: 100px;\
                 background-color: white;\
                 font-size: large;\"><p style=\"text-align:center;\">Cargando la Imagen...</p>\
                 <img style=\"padding:0;margin:0;align:center;border:0;\"src='/images/panoramas/loading.gif'\>\
                </div>";
            _pane.style.border = "1px solid black";
            _pane.style.backgroundImage = "url(" + image + ")";
            _img = new Image();
            _img.src = image;
            _img.onload = imageHasLoaded;
/*            _pane.onclick = pauseResumeScrolling;
            _pane.onmousedown = mouseDown;*/
            
            _initialized = true;
            _x_center = (_pane.offsetWidth / 2) + _pane.offsetLeft
        }
        
        if (_imageloaded) {
            _pane.style.backgroundPosition = _pos + 'px 0px';
             
            
            _pos = (_pos - _increment); //% _img.width;
            
            if (_pos <= (-1*(_img.width) + _paneWidth) || _pos > 0) 
                _increment = _increment * -1;
        }
        
        if (_pausing) {
        	if (_increment > 1 || _increment < -1) {
	        	_increment = _increment / 1.3
	        } else {
	        	_increment = 0
	        	_pausing = false;
	        }
        }
        self.setTimeout("scroll()", 50);
    
}

function mouseDown (ev) {
mousePos = mouseCoords(ev)
_backupSpeed = _increment;
 if (mousePos.x > _x_center + 30) {
   increment = 3;
 } if (mousePos.x < _x_center - 30) {
   increment = -3; }
 else {
 	_increment;
 }
_increment += increment
if (_increment > 15) { _increment = 15 }
if (_increment < -15) { _increment = -15 }
}

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function imageHasLoaded() {
    _pane.innerHTML = _htmlBackup;
    _pane.style.height = _img.height + "px";
    _pane.style.width = _paneWidth + "px";
    _imageloaded = true;
    
    _pane.innerHTML = "<div id='controls'>\
    <img id='slowDown' title='Ralentiza la visualizaci&oacute;n panor&aacute;mica' \
    src='/images/panoramas/slow.gif' onClick='javascript:makeSlower()'>\
    <img id='play' title='Pausa/Inicia la visualizaci&oacute;n panor&aacute;mica' src='/images/panoramas/pause.gif'  \
    onClick='javascript:pauseResumeScrolling()'>\
    <img id='speedUp' title='Acelera la visualizaci&oacute;n panor&aacute;mica' \
    src='/images/panoramas/fast.gif' onClick='javascript:makeFaster()'>\
    </div>"
}
function changePanorama(image) {
	_increment = 1
    _pane.innerHTML =
        "<div style=\"text-align:center; \
         font-weight: normal;\
         height: 100px;\
         background-color: white;\
         font-size: large;\"><p style=\"text-align:center;\">Cargando la Imagen...</p>\
         <img style=\"padding:0;margin:0;align:center;border:0;\"src='/images/panoramas/loading.gif'\>\
        </div>";
    _pane.style.backgroundImage = "url(" + image + ")";
    _img = new Image();
    _img.src = image;
   _pos = 0;
   _pane.style.backgroundPosition = _pos + 'px 0px';
   _img.onload = imageHasLoaded;
}
function makeFaster() {
    if (_increment==0 ) document.getElementById('play').src = "/images/panoramas/pause.gif";
    _increment+=2;
    if (_increment > 8) _increment = 8
    if (_increment==0 ) document.getElementById('play').src = "/images/panoramas/play.gif";
}

function makeSlower() {
    if (_increment==0) document.getElementById('play').src = "/images/panoramas/pause.gif";
    _increment-=2;
    if (_increment < -8) _increment = -8
    if (_increment==0 ) document.getElementById('play').src = "/images/panoramas/play.gif";
}

function makeBigger() {
    if (_initialized) {
        _paneWidth += 12;
        _pane.style.width = _paneWidth + "px";
    }
}

function makeSmaller() {
    if (_initialized) {
        _paneWidth -= 12;
        _pane.style.width = _paneWidth + "px";
    }
}  
function pauseResumeScrolling() {
  if (_increment == 0) {
    _increment = _speedBackup;
    document.getElementById('play').src = "/images/panoramas/pause.gif";
  }
  else {
    _speedBackup = _increment;
    _pausing = true;
    document.getElementById('play').src = "/images/panoramas/play.gif";
  }
  ;
}