/*
 *  elemId: element Id of the div which will hold the image
 *  image: URI to the image that's to be scrolled
 *  width: optional, the width of the scroll pane
 */
function Panorama (elemId, image, width)
{
	this._imageloaded = false;
	this._navTiles = 7;
	this._loadingTimeout = 10;	// seconds to wait before "img not found" message appears
	this._pos = 0;            // Current scroll position
	this._increment = 0;      // How many pixels to shift per frame
	this._paneWidth = width;    // Width of the scrollpane
	this._img;                // The image
	this._pane;               // The scrollpane
	this._htmlBackup;         // Backup of the pane content
	this._timerms = new Date().getTime();	// milliseconds start timer
	this._timeout;			// variable which stores the auto scroll timeout

	this.name = elemId;
	window[elemId] = this;
    this._pane = document.getElementById(elemId);
    if (width) {
    	this._paneWidth = width;
    }
    this._htmlBackup = this._pane.innerHTML;
    this._pane.style.display = "block";
    this._pane.innerHTML = "loading image...";
    this._pane.style.backgroundImage = "url(" + image + ")";
    this._img = new Image();
    this._img.src = image;

	this.scroll = function(increment)
	{
		this._increment = increment;
	}
	
    this.autoScroll = function()
	{
        if(!this._imageloaded)
        {
        	if(this._img.height > 0 && this._img.width > 0)
        	{
	    		var tileWidth = Math.floor(this._paneWidth/this._navTiles);
				var nav = '<div onmouseout="'+this.name+'.scroll(0);" style="cursor:move; margin-left: '+Math.floor((this._paneWidth-(tileWidth*this._navTiles))/2)+'px;">';
				var center = Math.ceil(this._navTiles/2);
	    		for(var i = 1; i <= this._navTiles; i++)
	    		{
	    			var pos = i*-1;
	    			if(i > center)
	    				pos = center-Math.abs(i-center);
	    			var factor = 10*(1/pos);
	    			if(i == center)
	    				factor = 0;
	    			nav += '<div onmouseover="'+this.name+'.scroll('+factor+');" style="float: left; width:'+tileWidth+'px; height:'+this._img.height+'px;"></div>';
	    		}
				nav += '</div>';
	    		this._pane.innerHTML = nav;
	        	this._pane.style.height = this._img.height + "px";
	        	this._pane.style.width = this._paneWidth + "px";
	        	this._pos = Math.floor((this._img.width-this._paneWidth)/2)*-1;
	        	this._pane.style.backgroundPosition = this._pos + 'px 0px';
	        	this._imageloaded = true;
        	}
        	if(Math.abs(Math.round((this._timerms-new Date().getTime())/1000)) > this._loadingTimeout)
        	{
        		if(this._htmlBackup.length > 0)
        			this._pane.innerHTML = this._htmlBackup;
        		else
        			this._pane.innerHTML = 'image not found'; 
        		self.clearTimeout(this._timeout);
        	}
        }
        if(this._imageloaded)
        {
            _newPos = (this._pos - this._increment) % this._img.width;
            if(_newPos <= 0 && Math.abs(_newPos) <= this._img.width-this._paneWidth)
            {
            	this._pane.style.backgroundPosition = _newPos + 'px 0px';
            	this._pos = _newPos;
            }
            else if(_newPos < (this._img.width-this._paneWidth)*-1)
            {
	            this._pane.style.backgroundPosition = ((this._img.width-this._paneWidth)*-1)+'px 0px';
	            this._pos = (this._img.width-this._paneWidth)*-1;
            }
            else
            {
            	this._pane.style.backgroundPosition = '0px 0px';
            	this._pos = 0;            
            }
        }
        if(this._imageloaded || Math.abs(Math.round((this._timerms-new Date().getTime())/1000)) <= this._loadingTimeout)
        	this._timeout = self.setTimeout(this.name+".autoScroll()", 50);
	}
    this.autoScroll();
}