<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="interface.js">
	
<style type="text/css" media="all">

body
{
	margin: 0;
	padding: 0;
	height: 100%;
}
#vr1
{
	position: absolute;
	top: 250px;
	left: 210px;
	height: 205px;
	width: 300px;
	overflow: hidden;
}
#vr2
{
	position: absolute;
	top: 500px;
	left: 210px;
	height: 205px;
	width: 300px;
	overflow: hidden;
}
#image1
{
	position: absolute;
	top: 250;
	left: 210;
	height: 205px;
	width: 1780px;  /* 2 x 890 */
	overflow: hidden;
}
#image2
{
	position: absolute;
	top: 500;
	left: 210;
	height: 200px;
	width: 3650px;  /* 2 x 1825 */
	overflow: hidden;
}
#slider
{
	position: absolute;
	top: 210px;	
	left: 580px;
	width: 200px;
	height: 200px;
	background-image: url(bigcircle.jpg);
	border: solid thin black;
}
#indicator
{
	position: absolute;
	top: 207px;
	left: 676px;
	width: 11px;
	height: 11px;
	background-image: url(select.gif);
	cursor: move;
	overflow: hidden;
}
</style>		
		
		
<p style="position: absolute; left: 210px; top: 210px">
          Mount Everest 360 degrees (image width = 890 pixels)</p>

<div id="vr1">
	
<div id="image1"><img src="everest360.gif" width="890" /><img src="everest360.gif" /></div>
	
</div>


<p style="position: absolute; left: 210px; top: 470px">
          Lichtenstein 360 degrees (image width = 1825 pixels)</p>

<div id="vr2">
	
<div id="image2"><img src="lichtenstein.jpg" width="1825" /><img src="lichtenstein.jpg" /></div>

</div>

<div id="slider"></div>
<div id="indicator"></div>
<script type="text/javascript">
$(document).ready(
	function()
	{
		
		$('#indicator').Draggable(
			{
				onDragModifier : function(x,y)
				{					
					var centerx = 674;
					var centery = 304;
					var angle = Math.atan((centery-y)/(centerx-x));
					var angle2 = angle;
					if((centerx-x)>=0)
						angle += Math.PI;
					if(centerx>=x)
						angle2 += Math.PI;
					angle2 += (Math.PI/2);
					radius = 97;
					$('#image1').css('left', parseInt(-890*angle2/(Math.PI*2)) + 'px');
					$('#image2').css('left', parseInt(-1825*angle2/(Math.PI*2)) + 'px');
					return {
						x: radius * Math.cos(angle) + centerx, 
						y: radius * Math.sin(angle) + centery
					}
				}
			}
		);

	}
);
</script>