// **************************************************************************
// 			Written by Martin Krolik
// 			http://www.krolikconsulting.com
// 			martin@krolikconsulting.com
//
//			http://citone.com
// **************************************************************************
// Cross browser (NS4+,NS6,IE4+) DHTML 360 Degree Panormic Javascript Viewer

// Works by putting two of the same image adjacent.  A viewport scrolls throw the images
// as the images moves to compensate.

// There seem to be bugs in NS6 ... use version without roll overs for NS 6 support

// to change to a different image, search-and-replace "earthimage" with your image 

// vars below
var mytimer;
var xdist; 
var ydist;
var xoffset;
var yoffset;
var xviewport;
var yviewport;
var defaulttravel;
var defaulttimeout;
var imagename;
var borderheight;
var borderwidth;
var tempimage;

var bwidth;
var bheight;

var myobject;
var mypframe;
var myloadingdiv;
var myimage;
var initialized;
var loaded;
var xoffsetwithinpic;
var yoffsetwithinpic;

var imgNW;
var imgN;
var imgNE;
var imgW;
var imgE;
var imgSW;
var imgS;
var imgSE; 


// vars above


// ----------------------  Parameters below --------------------------------//

xoffset = 50;  // where do you want to put the picture 
//                 (remember the frame is 50 x 50 pixels as well)
yoffset = 200;


xoffsetwithinpic = 500; // messes everything up... see note in code - not implemented 
yoffsetwithinpic = 50; // messes everything up... see note in code - not implemented


xviewport = 420;   // size of view window ... must be less than size of image
yviewport = 400;

defaulttravel = 3; // how many pixels at a time we move .... choppy'ness VS. slowness
defaulttimeout = 10; // how many milliseconds between moves

borderheight = 0; // actually should be derived from NORTH or SOUTH BORDER image, but isn't
borderwidth = 20; // actualy should be derived from EAST or WEST BORDER image, but isn't


// ----------------------  Parameters above --------------------------------//

// init code below - no modifications required

initialized = false;
loaded = false;



var ns4, ie4, ns6;


ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

if (ie4 == false)
	{
	ns6 = (document.getElementById)? true:false;
	}
else
	{
	ns6 = false;
	}

function init() 
	{
	
	if (ns4) 
		{

		myobject = document.dimg
		mypframe = document.mypicframe
		myloadingdiv = document.nowloading
		myimage = document.dimg.document.ione
		myimagetwo = document.dimg.document.itwo

		imgNW = document.mypicframe.document.borderNW
		imgN = document.mypicframe.document.borderN
		imgNE = document.mypicframe.document.borderNE
		imgW = document.mypicframe.document.borderW
		imgE = document.mypicframe.document.borderE
		imgSW = document.mypicframe.document.borderSW
		imgS = document.mypicframe.document.borderS
		imgSE = document.mypicframe.document.borderSE
		}
    	if (ie4) 
		{

		myobject = dimg.style
		mypframe = mypicframe.style
		myloadingdiv = nowloading.style
		myimage = ione
		myimagetwo = itwo

		//imgNW = borderNW
		//imgN = borderN
		//imgNE = borderNE
		imgW = borderW
		imgE = borderE
		//imgSW = borderSW
		//imgS = borderS
		//imgSE = borderSE



		}

    	if (ns6) 
		{

		myobject = document.getElementById('dimg').style
		mypframe = document.getElementById('mypicframe').style
		myloadingdiv = document.getElementById('nowloading').style
		myimage = document.getElementById('ione')
		myimagetwo = document.getElementById('itwo')

		//imgNW = document.getElementById('borderNW')
		//imgN = document.getElementById('borderN')
		//imgNE = document.getElementById('borderNE')
		imgW = document.getElementById('borderW')
		imgE = document.getElementById('borderE')
		//imgSW = document.getElementById('borderSW')
		//imgS = document.getElementById('borderS')
		//imgSE = document.getElementById('borderSE')

		}
		
		loaded = true;
		
		centerit();
		Start_Position();
	}

	
function centerit()
{
		if (ns4 || ns6) 
			{
			bwidth=innerWidth;
			bheight=innerHeight;   
					
			}
		if (ie4) 
			{
			
			bwidth=document.body.offsetWidth;
			bheight=document.body.offsetHeight;
        	
			}
		//manualy set height of frame - if left blank, centers vertically	
		bheight=615;
		bwidth=bwidth-460;
		
		yoffset = Math.floor(bheight/2) - ((yviewport ) / 2);
		xoffset = Math.floor(bwidth/2) - ((xviewport ) / 2);
		
		moveto();
	
		ClipTo(myloadingdiv,0,0,0,0);
		ClipTo(myloadingdiv,0,0,0,0);
	
		ClipTo(myobject,0 , xviewport , yviewport , 0 );
		ClipTo(myobject,0 , xviewport , yviewport , 0 );
		
		ClipTo(mypframe,0,(xviewport+borderwidth+borderwidth),(yviewport+borderheight+borderheight),0);
		ClipTo(mypframe,0,(xviewport+borderwidth+borderwidth),(yviewport+borderheight+borderheight),0);
		
		// lines below seem to add wierd blank pixel lines to top and bottom of scroll in ie5
		//xdist = xoffsetwithinpic;
		//ydist = yoffsetwithinpic;
		//shiftover();
		//quitmoving();
		
		xdist=1
		ydist=0
		shiftover()
		}	

function moveto()
{
if (loaded) {
		if (ns4 || ns6) 
			{
		
			myobject.top = yoffset
			myobject.left = xoffset
			
			mypframe.top = yoffset - borderheight
			mypframe.left = xoffset - borderwidth
			
			}
		if (ie4) 
			{
			
        
			myobject.pixelTop = yoffset
			myobject.pixelLeft = xoffset
			
			mypframe.pixelTop = yoffset - borderheight
			mypframe.pixelLeft = xoffset - borderwidth
			}
		}
}

function shiftover()
{
	if (loaded) {
		quitmoving();
	
		if (ns4) 
			{
			
			var temp;	
			
			if ( (parseInt(myobject.top) >= yoffset) && (ydist==(-defaulttravel)) ) {
				
				ydist = 0
			}
			
			if ( (parseInt(myobject.top) <= (-myimage.height + yoffset + yviewport) ) && (ydist==defaulttravel) ) {
				ydist = 0
				
			}


		   	ClipTo(myobject,ClipValues("t") + ydist, ClipValues("r") + xdist, ClipValues("b") +  ydist, ClipValues("l") + xdist)
		
			temp = parseInt(myobject.left)
			myobject.left = (temp - xdist)
			temp = parseInt(myobject.top)
			myobject.top = (temp - ydist)


			if (myobject.left > xoffset )
				{
				temp = parseInt(myobject.left)
				myobject.left = (temp - myimage.width)

				ClipTo(myobject,null , ClipValues("r") + myimage.width , null , ClipValues("l") + myimage.width)
				
				}

			if (parseInt(myobject.left) < (-myimage.width + xoffset)) 
				{
				myobject.left = xoffset
				ClipTo(myobject,null,xviewport,null,0)
				
				myobject.clip.right = xviewport


				}
			}
		else
		if (ns6) 
			{
			
			var temp;	
			
			if ( (parseInt(myobject.top) >= yoffset) && (ydist==(-defaulttravel)) ) {
				
				ydist = 0
			}
			
			if ( (parseInt(myobject.top) <= (-myimage.height + yoffset + yviewport) ) && (ydist==defaulttravel) ) {
				ydist = 0
				
			}


	    	ClipTo(myobject,ClipValues("t") + ydist, ClipValues("r") + xdist, ClipValues("b") +  ydist, ClipValues("l") + xdist)
			
			temp = parseInt(myobject.left)
			myobject.left = (temp - xdist)
			temp = parseInt(myobject.top)
			myobject.top = (temp - ydist)


			if (parseInt(myobject.left) > xoffset )
				{
				temp = parseInt(myobject.left)
				myobject.left = (temp - myimage.width)

				ClipTo(myobject,null , ClipValues("r") + myimage.width , null , ClipValues("l") + myimage.width)
				
				}

			if (parseInt(myobject.left) < (-myimage.width + xoffset)) 
				{
				myobject.left = xoffset
				ClipTo(myobject,null,xviewport,null,0)
				
				}

			}
		else
		if (ie4) 
			{

			if ( (myobject.pixelTop >= yoffset) && (ydist==(-defaulttravel)) ) {
				
				ydist = 0
			}
			
			if ( (myobject.pixelTop <= (-myimage.height + yoffset + yviewport) ) && (ydist==defaulttravel) ) {
				ydist = 0
				
			}


			ClipTo(myobject,ClipValues("t") + ydist, ClipValues("r") + xdist, ClipValues("b") +  ydist, ClipValues("l") + xdist)

			myobject.pixelLeft = myobject.pixelLeft - xdist
					
			myobject.pixelTop = myobject.pixelTop - ydist

			if (myobject.pixelLeft > xoffset )
				{
				myobject.pixelLeft = myobject.pixelLeft -myimage.width
				ClipTo(myobject,null , ClipValues("r") + myimage.width ,null , ClipValues("l") + myimage.width)
		
 		
				}

			if (myobject.pixelLeft < (-myimage.width + xoffset)) 
				{
				myobject.pixelLeft = xoffset
				ClipTo(myobject,null , xviewport , null , 0 )
			
				
				}

			}

		}
		
		initialized == true;
		if ((xdist != 0) || (ydist != 0))
			{
			mytimer = setTimeout("shiftover()",defaulttimeout);
			}

	
}

function ClipValues(which) {
	if (ie4 || ns6) var clipv = myobject.clip.split("rect(")[1].split(")")[0].split("px")
	if (which=="t") return (ns4)? myobject.clip.top : Number(clipv[0])
	if (which=="r") return (ns4)? myobject.clip.right : Number(clipv[1])
	if (which=="b") return (ns4)? myobject.clip.bottom : Number(clipv[2])
	if (which=="l") return (ns4)? myobject.clip.left : Number(clipv[3])
}
function ClipTo(clipobject,t,r,b,l) {
	if (t==null) t = ClipValues('t')
	if (r==null) r = ClipValues('r')
	if (b==null) b = ClipValues('b')
	if (l==null) l = ClipValues('l')
	if (ns4) {
		clipobject.clip.top = t
		clipobject.clip.right = r
		clipobject.clip.bottom = b
		clipobject.clip.left = l
	}
	else if (ie4 || ns6) clipobject.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}


function quitmoving() 
{
	if (mytimer)
		{
		clearTimeout(mytimer);
		}

}

	function move_NW() {
	xdist=-defaulttravel;
	ydist=-defaulttravel;
	shiftover();
	}

	function move_N() {

	xdist=0;
	ydist=-defaulttravel;
	shiftover();
	}

	function move_NE() {
	
	xdist=defaulttravel;
	ydist=-defaulttravel;
	shiftover();
	}

	function move_W() {
	xdist=-defaulttravel;
	ydist=0;
	shiftover();
	}

	function Start_Position() {
	xdist=1100;
	ydist=0;
	shiftover();
	quitmoving();
	xdist=1
	ydist=0
	shiftover()
	}
	function move_E() {
	xdist=defaulttravel;
	ydist=0;
	shiftover();
	}

	function move_SW() {
	
	xdist=-defaulttravel;
	ydist=defaulttravel;
	shiftover();

	}

	function move_S() {
	xdist=0;
	ydist=defaulttravel;
	shiftover();
	}


	function move_SE() {
	xdist=defaulttravel;
	ydist=defaulttravel;
	shiftover();
	}