window.onload=displayMap;
var image;
var theDuration;
var interval;
var koko, panCurrent;
var leftStart0 = 150;
var leftStart1 = 662;
var leftStart2 = 932;
var topStart0 = 200;
var topStart1 = 716;
var topStart2 = 1038;
var zoomLevel = 0;

function doZoom(zmLvl) {
  zoomLevel = zmLvl;
  changeZoom();
}
function zoomIn() {
  zoomLevel += 1;
  if (zoomLevel > 2)
  {
   zoomLevel = 2;
  }
  changeZoom();
}
function zoomOut() {
  zoomLevel -= 1;
  if (zoomLevel < 0)
  {
    zoomLevel = 0;
  }
  changeZoom();
} 
function changeZoom() {
	var form = document.getElementById("trafficConditionsForm");
	var left;
	var top;
	var zm;
	
	// Update zoom level display.
	zm = document.getElementById("zoomLevel0_on");
	zm.style.display = 'none';
  zm = document.getElementById("zoomLevel1_on");
	zm.style.display = 'none';  
	zm = document.getElementById("zoomLevel2_on");
	zm.style.display = 'none';	
	zm = document.getElementById("zoomLevel0_off");
	zm.style.display = 'block';
  zm = document.getElementById("zoomLevel1_off");
	zm.style.display = 'block';  
	zm = document.getElementById("zoomLevel2_off");
	zm.style.display = 'block';	
	
	// Zoom map.
	if (zoomLevel === 0)
	{
		image = form.mapUrlZoom0.value + "?" + Math.random();
		left = leftStart0;
		top = topStart0;		
  	zm = document.getElementById("zoomLevel0_on");
  	zm.style.display = 'block';
  	zm = document.getElementById("zoomLevel0_off");
  	zm.style.display = 'none';		
	}
	else if (zoomLevel == 1)
	{
	  image = form.mapUrlZoom1.value + "?" + Math.random();
	  left = leftStart1;
	  top = topStart1;
  	zm = document.getElementById("zoomLevel1_on");
  	zm.style.display = 'block';	  
  	zm = document.getElementById("zoomLevel1_off");
  	zm.style.display = 'none';		  	
	}
	else if (zoomLevel == 2)
	{
	  image = form.mapUrlZoom2.value + "?" + Math.random();
	  left = leftStart2;
	  top = topStart2;
  	zm = document.getElementById("zoomLevel2_on");
  	zm.style.display = 'block';	  
  	zm = document.getElementById("zoomLevel2_off");
  	zm.style.display = 'none';		  	
	}

	// Initialize panorama object
	koko = new Panorama(image, 'window', {
		left: left,
		top: top,
		fx: {
			duration: theDuration
		}
	});

	doIt();
}
function displayMap() {
/*
	// Set window width and height depending on browser size
	var mapWindow = document.getElementById("window");
	if (window.innerWidth) {
		var browserHeight = window.innerHeight;
		var browserWidth = window.innerWidth;
	} else {
		var browserHeight = document.body.offsetHeight;
		var browserWidth = document.body.offsetWidth;
	}
	mapWindow.style.height = "" + browserHeight - 5 + "px";
	mapWindow.style.width = "" + browserWidth - (browserWidth * 0.02) + "px";
*/	
/*
	var mapWindow = document.getElementById("window");
	mapWindow.style.width = "733px";
	mapWindow.style.height = "550px";
*/
	// Get values from form
	var form = document.getElementById("trafficConditionsForm");
	image = form.mapUrlZoom0.value;
	theDuration = form.duration.value - 0;
	interval = form.interval.value - 0;
	zoomLevel = form.zoomLevel.value - 0;
	
	// Initialize panorama object
	koko = new Panorama(image, 'window', {
		left: leftStart0,
		top: topStart0,
		fx: {
			duration: theDuration
		}
	});

	// Start the panning process
	doIt();
}
function doIt() {
	//updateTime();
	setTimeout("refreshMap()", interval);
	/*
	setTimeout("panAround()", 1);
	// Repeat the pan process as many times as needed to ensure that
	// panning continues until the refresh
	var iterations = 1;
	if (interval > theDuration) {
		iterations = Math.round(interval / theDuration);
	}
	var i = 0;
	while (i < iterations) {
		panCurrent = setTimeout("panAround()", 1);
		i++;
	}
	*/
}
function refreshMap() {
	// Add a random value on to image name to ensure that the image reloads in browser
	var form = document.getElementById("trafficConditionsForm");
	var mapUrl = form.mapUrlZoom0.value;
	if (zoomLevel == 1)
	{
		mapUrl = form.mapUrlZoom1.value;
	}
	else if (zoomLevel == 2)
	{
		mapUrl = form.mapUrlZoom2.value;	
	}
	
	image = mapUrl + "?" + Math.random();	
	koko.image.src = image;
	doIt();
}
function panAround() {	
	//koko.move(463,303);
	//koko.move(8,554);
	//koko.move(-142,-880);
	//koko.move(-275,-407);
	//koko.move(-354,341);
	//koko.jump('top left');
	
	koko.move(200, 300);
	koko.jump('bottom right');
	koko.jump('top right');
	koko.jump('top left');
	
	$clear(panCurrent);
}
function updateTime() {
	var today = new Date();
	var timeDiv = document.getElementById("timeDiv");
	var meridian = "am";
	var hours = today.getHours() - 0;
	var minutes = today.getMinutes();
	if (minutes < 10) {
		minutes = "0" + minutes;
	}
	if (hours == 0) {
		hours = 12;
	} else if (hours >= 12) {
		if (hours > 12) {
			hours -= 12;
		}
		meridian = "pm";
	}
	if (koko.image.src.indexOf("LOS") > -1) {
		var text = "conditions";
	} else {
		var text = "reports";
	}
	timeDiv.innerHTML = text + " at " + hours + ":" + minutes + " " + meridian;
}
function swallowClick() {
	doIt();
}