/**********************
 *	RASPtableZoom.js  *
 **********************/

		/* 
		 * Global Variables
		 */

		var oldDayIndex;
		var Loaded;
		var Pics;

		var Zoom = 1.0;			// Image Zoom factor
		var	oldZoom = 1.0;
		var oldleft = 0.0;
		var oldtop = 0.0;
		var	mouseDownPos = {
			X: 0,
			Y: 0
		};
		var	initialMousePos = {
			X: 0,
			Y: 0
		};

		var ffversion;

		var fullSet;

		// var ref;
		var oldParam;
		var oldDay;
		var times;

		var paramWindow;
		var origTblHt;
		var imgHt;
		var imgWid;
		var	imgSiz;
		var	topHeight;
		var leftSpace;
		var mapWidth;

		var enabletip=false;
		var tipobj;
		var pointerobj;
		var	mapObj;
		var	zoomObj;

		var offsetfromcursorX=1;		 	//Customize x offset of tooltip
		var offsetfromcursorY=1;		 	//Customize y offset of tooltip

		var offsetdivfrompointerX=00;	//Customize x offset of tooltip DIV relative to pointer image
		var offsetdivfrompointerY=14;	//Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).


 /***********************
 * initIt()             *
 *                      *
 * Initialise Variables *
 * Build Menus, etc     *
 ***********************/
function initIt()
{
		// ref = document.forms[0];	// shorthand
		oldDayIndex = document.getElementById("Day").options.selectedIndex;
		Loaded = new Array();
		Pics = new Array();

		oldParam = document.getElementById("Param").options.value;
		oldDay = document.getElementById("Day").value;

		paramWindow = "" ;

		/* There is a bug in FF 1.5 & 2 with DOMMouseScroll - look for ffversion below */
		if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
			ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
		}



		/**********************/
		/* Build the Day Menu */
		/**********************/

		var Now = new Date().getTime();	// Time now - in milliSec(!)
		var mS_Day = 24 * 60 * 60 * 1000;	// mS in a day
		var T = new Date();			// Instantiate a Date object
		var dayName   = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
		var monthName = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

		var day = document.getElementById("Day");	// save typing

		T.setTime(Now);					// Today
		day.options[0] = new Option(dayName[T.getDay()] + ' ' + T.getDate() + ' ' + monthName[T.getMonth()] + " - Today", dayName[T.getDay()]);
		day.options[1] = new Option("Today - Latest data - 12Km ", "UK12");

		T.setTime(Now + mS_Day);	// Tomorrow
		day.options[2] = new Option(dayName[T.getDay()] + ' ' + T.getDate() + ' ' + monthName[T.getMonth()], dayName[T.getDay()]);
		T.setTime(Now + 2 * mS_Day);
		day.options[3] = new Option(dayName[T.getDay()] + ' ' + T.getDate() + ' ' + monthName[T.getMonth()], dayName[T.getDay()]);
		T.setTime(Now + 3 * mS_Day);
		day.options[4] = new Option(dayName[T.getDay()] + ' ' + T.getDate() + ' ' + monthName[T.getMonth()], dayName[T.getDay()]);
		T.setTime(Now + 4 * mS_Day);
		day.options[5] = new Option(dayName[T.getDay()] + ' ' + T.getDate() + ' ' + monthName[T.getMonth()], dayName[T.getDay()]);
		T.setTime(Now + 5 * mS_Day);
		day.options[6] = new Option(dayName[T.getDay()] + ' ' + T.getDate() + ' ' + monthName[T.getMonth()], dayName[T.getDay()]);
		T.setTime(Now + 6 * mS_Day);
		day.options[7] = new Option(dayName[T.getDay()] + ' ' + T.getDate() + ' ' + monthName[T.getMonth()], dayName[T.getDay()]);


		/***********************/
		/* Set Default Options */
		/***********************/

		// document.getElementById("zoomMap").onload = setSize;
		document.getElementById("zoomMap").onerror = badImage;


		// Clear skewT option & install callback
		document.getElementById("skewT").checked = false;
		document.getElementById("skewT").onmousedown = toggleSkewT;

		// Set Short Param List
		fullSet = false;
		for (var i = 0; i < paramListLite.length; i++) {
			document.getElementById("Param").options[i] = new Option(paramListLite[i][2], paramListLite[i][1]);
			document.getElementById("Param").options[i].className = paramListLite[i][0];
		}

		document.getElementById("Param").onchange = doChange;	// Install handler
		document.getElementById("Day").onchange = doChange;	// Install handler
		document.getElementById("Time").onchange = doChange;	// Install handler
		document.getElementById("archiveDay").onchange = doChange;	// Install handler
		document.getElementById("archiveMonth").onchange = doChange;	// Install handler
		document.getElementById("archiveYear").onchange = doChange;	// Install handler
		document.getElementById("paramSet").onmousedown = switchParamList;	// Install handler


		// Install Time options

		 // Adjust Table times for BST
		 testDate = new Date();
		 // alert("BST = " + testDate.getHours() + " GMT = " + testDate.getUTCHours() + " TZ Offset = " + testDate.getTimezoneOffset() );

		 if (testDate.getTimezoneOffset() == 0)
			times = d2times;
		 else
			times = d2BSTtimes;

		for (var i = 0; i < times.length; i++) {
			document.getElementById("Time").options[i] = new Option(times[i], times[i]);
			if(times[i] == "1200")
				document.getElementById("Time").options[i].selected = true;
		}

		document.getElementById("Day").options[0].selected    = true;				// Today 4Km
		document.getElementById("Param").options[1].selected  = true;				// wstar
		document.getElementById("desc").innerHTML = paramListLite[document.getElementById("Param").selectedIndex][3] ;

		/* Sort out Archive year(s), at least, to handle 6 months */

		T.setTime(Now - 182 * mS_Day);
		document.getElementById("archiveYear").options[1] = new Option(T.getFullYear(), T.getFullYear());
		T.setTime(Now);
		if(T.getFullYear() != document.getElementById("archiveYear").options[1].value){
			document.getElementById("archiveYear").options[2] = new Option(T.getFullYear(), T.getFullYear());
		}

		for (i = 0; i < document.getElementById("Time").options.length; i++){
			Pics[i] = new Image();
			Loaded[i] = false;
		}

		whichBrowser();	// Determine punter's Browser


		titleObj = document.getElementById("theTitle");
		zoomObj  = document.getElementById("zoomMap");
		scaleObj = document.getElementById("theScale");
		setSize();

		loadImage(1);	// Assume forwards

		// Save the original Selector Table Height
		origTblHt = document.getElementById("selectors").offsetHeight;




		/********************* Material below adapted from *************************************
		* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
		* This notice MUST stay intact for legal use
		* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
		****************************************************************************************/


		document.write('<div id="dhtmltooltip" onload="ddrivetip(\'Ctl-Click for value\')" ></div>') //write out tooltip DIV
		document.write('<img id="dhtmlpointer" src="arrow2.gif" >') //write out pointer image


		if (ie){
			tipobj		 = document.all["dhtmltooltip"];
			pointerobj = document.all["dhtmlpointer"];
		}
		else{
			tipobj		 = document.getElementById("dhtmltooltip") ;
			pointerobj = document.getElementById("dhtmlpointer") ;
		}


		unfreezetip("Ctl-Click for a value");

		zoomObj.onmousemove = positiontip;
		zoomObj.onmouseout	= obscuretip;
		zoomObj.onmouseover	= revealtip;
		zoomObj.onmousedown = getPos;
		zoomObj.onmouseup   = doclick;
		pointerobj.onmouseover = positiontip;
		tipobj.onmouseover = positiontip;
		
		/* Mouse Wheel Initialization code */
		// Note that order is important: Chrome has both onmousewheel and addEventListener
		if(typeof(zoomObj.onmousewheel) != 'undefined' )
			zoomObj.onmousewheel = wheel;
		else if(zoomObj.addEventListener)
			zoomObj.addEventListener('DOMMouseScroll', wheel, false);
		else
			alert("No mouse wheel interface");


		/*****************************************
		 * Process URL tail and set menu options *
		 *****************************************/
		if( location.href.split("?")[1]){ // Any args?
			args=location.href.split("?")[1].split(",");

			for(i = 0; i < args.length; i++){
				prams = args[i].split("=");
				if(prams[0] == "param"){
					for(j = 0; j < document.getElementById("Param").options.length; j++){
						if(document.getElementById("Param").options[j].value == prams[1]){
							document.getElementById("Param").options[j].selected = true;
							break;
						}
					}
					if(j == document.getElementById("Param").options.length){
						switchParamList();
						for(j = 0; j < document.getElementById("Param").options.length; j++){
							if(document.getElementById("Param").options[j].value == prams[1]){
								document.getElementById("Param").options[j].selected = true;
								break;
							}
						}
						if(j == document.getElementById("Param").options.length){
							switchParamList();	// Put back if not found
						}
					}
				}
				if(prams[0] == "time"){
					for(j = 0; j < document.getElementById("Time").options.length; j++){
						if(document.getElementById("Time").options[j].value == prams[1])
							document.getElementById("Time").options[j].selected = true;
					}
				}
				
				if(prams[0] == "date"){
					var dateNow = new Date();
					// Build requested date
					var newDate = new Date(prams[1].substr(0,4), prams[1].substr(4,2) - 1, prams[1].substr(6,2));
					if(newDate > dateNow){
						// Set forecast date Menu Option (Today is from Archive - Same thing!
						for(j = 1; j < 7; j++){
							dateNow.setDate(dateNow.getDate() + 1);
							if(  newDate.getFullYear() == dateNow.getFullYear()
								&& newDate.getMonth() == dateNow.getMonth()
								&& newDate.getDate() == dateNow.getDate()
							){
								day.options[j+1].selected = true;	// Have to add 1 because of 12Km for Today!!!
							}
						}
						dateNow.setDate(dateNow.getDate() + 1);
						if(newDate > dateNow)
							alert("No forecast for " + newDate + " - Too far ahead!");
						archiveMode = 0;
					}
					else{
						// Set Archive Date (inc Today)
						for(j = 0; j < document.getElementById("archiveYear").options.length; j++){
							if(document.getElementById("archiveYear").options[j].value == prams[1].substr(0,4))
								document.getElementById("archiveYear").options[j].selected = true;
						}
						for(j = 0; j < document.getElementById("archiveMonth").options.length; j++){
							if(document.getElementById("archiveMonth").options[j].value == prams[1].substr(4,2))
								document.getElementById("archiveMonth").options[j].selected = true;
						}
						for(j = 0; j < document.getElementById("archiveDay").options.length; j++){
							if(document.getElementById("archiveDay").options[j].value == prams[1].substr(6,2))
								document.getElementById("archiveDay").options[j].selected = true;
						}
						archiveMode = 1;
					}
				}
			}
			doChange();
		}
}



/****************************************
 *      END OF INITIALISATION STUFF     *
 *      Start of functions              *
 ****************************************/

/**********************************
* Get Mouse Position on mousedown *
**********************************/
function getPos(E)
{
			if(!E)
				E = window.event;

			initialMousePos.X = mouseDownPos.X = E.clientX;
			initialMousePos.Y = mouseDownPos.Y = E.clientY;
			if(Zoom != 1){
				if(window.addEventListener){
					zoomObj.removeEventListener('mousemove', positiontip, false);
					zoomObj.addEventListener('mousemove', dragIt, false);
				}
				else{
					zoomObj.detachEvent('onmousemove', positiontip);
					zoomObj.attachEvent('onmousemove', dragIt);
				}
				if (E.preventDefault)
					E.preventDefault();
				E.returnValue = false;
			}
}

/**** 
 *	Constrain position of L, R, T & B edges
 ***/

function chkShift()
{
			var maxLeft, minLeft, minTop, maxTop ;

			theSiz = Number(document.getElementById("zoomMap").style.height.replace(/px/, ""));
			zoomBoxHt = Number(document.getElementById("zoomBox").style.height.replace(/px/, ""));

			// Trap Soundings, so that they can be moved anywhere
			if(document.getElementById("Param").value.match(/sounding/g)) {
				maxLeft = 0;
				minLeft = zoomBoxHt - theSiz;
				minTop  = zoomBoxHt - theSiz;
				maxTop  = 0;
			}
			else{
				maxLeft = leftSpace * (1 - Zoom);
				minLeft = (1 - Zoom) * (leftSpace + mapWidth);
				minTop  = zoomBoxHt - theSiz + Zoom * botHeight;
				maxTop  = Zoom * topHeight;
			}

			// Prevent Img moving too far Right
			if(oldleft > maxLeft){
				oldleft = maxLeft;
			}
			
			// Prevent Img moving too far Left
			if(oldleft < minLeft){
				oldleft = minLeft;
			}
			
			// Prevent Img moving too far Down
			if (oldtop > -maxTop){
				oldtop = -maxTop;
			}

			// Prevent Img moving too far Up
			if(oldtop < minTop){
				oldtop  = minTop;
			}

			// Write out the new positions
			zoomObj.style.left = oldleft;
			zoomObj.style.top  = oldtop;
}

function dragIt(E)
{
			if(!E)
				E = window.event;

			var coords = {
				X: E.clientX,
				Y: E.clientY
			};

			if(ie)
				zoomObj.releaseCapture();
			positiontip(E);

			oldleft = oldleft + coords.X - initialMousePos.X;
			oldtop  = oldtop  + coords.Y - initialMousePos.Y;

			initialMousePos.X = coords.X;
			initialMousePos.Y = coords.Y;
			if (E.preventDefault)
				E.preventDefault();
			E.returnValue = false;

			// Check have not shifted too far
			chkShift();
}



function popup(mylink, windowname, wid, ht)
{
			if (! window.focus)return true;
			var href;
			if (typeof(mylink) == 'string')
				href=mylink;
			else
				href=mylink.href;
			args = 'width=' + wid + ',height=' + ht + ',scrollbars=yes';
			// window.open(href, windowname, args);
			window.open(href, '', args);	// IE objects to a window name
			return false;
}

function ietruebody()
{
			return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function ddrivetip(thetext, thewidth, thecolor)
{
			if (typeof thewidth != "undefined")
				tipobj.style.width = thewidth+"px"
			if (typeof thecolor != "undefined" && thecolor != "")
				tipobj.style.backgroundColor = thecolor
			tipobj.innerHTML = thetext
			enabletip = true
			return false
}

function positiontip(e)
{
			if(tipstate === "frozen")
				return;
			if (enabletip){
				var nondefaultpos=false
				var curX=(ns) ? e.pageX : event.clientX+ietruebody().scrollLeft;
				var curY=(ns) ? e.pageY : event.clientY+ietruebody().scrollTop;

				//Find out how close the mouse is to the corner of the window
				var winwidth  = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth-20
				var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight-20

				var rightedge = ie &&!window.opera ? winwidth  - event.clientX - offsetfromcursorX : winwidth - e.clientX - offsetfromcursorX
				var bottomedge= ie &&!window.opera ? winheight - event.clientY - offsetfromcursorY : winheight - e.clientY - offsetfromcursorY

				var leftedge=(offsetfromcursorX<0) ? offsetfromcursorX*(-1) : -1000

				//if the horizontal distance isn't enough to accomodate the width of the context menu
				if (rightedge < tipobj.offsetWidth){
					//move the horizontal position of the menu to the left by it's width
					tipobj.style.left = curX - tipobj.offsetWidth + "px"
					nondefaultpos = true
				}
				else if (curX < leftedge)
					tipobj.style.left = "5px"
				else{
					//position the horizontal position of the menu where the mouse is positioned
					tipobj.style.left = curX + offsetfromcursorX - offsetdivfrompointerX + "px"
					pointerobj.style.left = curX + offsetfromcursorX + "px"
				}

				//same concept with the vertical position
				if (bottomedge<tipobj.offsetHeight){
					tipobj.style.top = curY - tipobj.offsetHeight - offsetfromcursorY + "px"
					nondefaultpos = true
				}
				else{
					tipobj.style.top = curY + offsetfromcursorY + offsetdivfrompointerY + "px"
					pointerobj.style.top = curY + offsetfromcursorY + "px"
				}
				tipobj.style.visibility = "visible"
				if (!nondefaultpos)
					pointerobj.style.visibility = "visible"
			}
}

function removePopup()
{
			// Remove popup window
			try {
				if(paramWindow != "" ){
					paramWindow.close();
					paramWindow = "" ;
				}
			}
			catch(err) {
				; // error irrelevant
			}
}

var tipstate = "";


function obscuretip()
{
			if(tipstate != "frozen")
				hidetip();
}

function unfreezetip(Str)
{
			removePopup();
			revealtip();
			tipobj.innerHTML = Str;
			tipobj.onmouseover  = positiontip;
			pointerobj.onmouseover  = positiontip;
			zoomObj.onmousemove = positiontip;
			tipstate = "";
}

function freezetip()
{
			if(window.addEventListener){
				zoomObj.removeEventListener("mousemove", positiontip, false);
				zoomObj.removeEventListener("mouseout", obscuretip, false);
			}
			else{
				zoomObj.detachEvent("onmousemove", positiontip);
				zoomObj.detachEvent("onmouseout", obscuretip);
			}
			pointerobj.onmouseover = "";
			tipobj.onmouseover = "";
			tipstate = "frozen";
}

function revealtip()
{
			if(checkParam() === ""){
				hidetip();
				return;
			}

			enabletip=true
			tipobj.style.visibility="visible"
			pointerobj.style.visibility="visible"
}

function hidetip()
{
			enabletip=false
			tipobj.style.visibility="hidden"
			pointerobj.style.visibility="hidden"
}



/*****************************/
/* Get image click Coords    */
/*****************************/ 
function getPageCoords (element)
{
			var coords = {x : 0, y : 0};
			while (element) {
				coords.x += element.offsetLeft;
				coords.y += element.offsetTop;
				element = element.offsetParent;
			}
			return coords;
}


/*****************************/
/* Get image click Posn info */
/*****************************/ 
function getOffsets(evt)
{
			if( ie ) {		// Internet Exploder
				target = event.srcElement;
				if (typeof target.offsetLeft == 'undefined') {
					target = target.parentNode;
				}
				var pageCoords = getPageCoords(target);
				var eventCoords = {
					x: window.pageXOffset + event.clientX,
					y: window.pageYOffset + event.clientY
				}
			}
			else {		// NS etc
				var target = evt.target;
				if (typeof target.offsetLeft == 'undefined') {
					target = target.parentNode;
				}
				var pageCoords =getPageCoords(target);
				var	eventCoords = {
						x: window.pageXOffset + evt.clientX,
						y: window.pageYOffset + evt.clientY
				};

			}
			var offsets = {
				offsetX: eventCoords.x - pageCoords.x,
				offsetY: eventCoords.y - pageCoords.y
			}
			return offsets;
}


/********************************/
/* CallBack for onclick (image) */
/********************************/
function doclick(E)
{
			var buttn;
			var dirn = 1; // forwards
			var pos = {	// current mouse posn
				X: 0,
				Y: 0
			};

			if(window.addEventListener){
				zoomObj.removeEventListener('mousemove',	dragIt,				false);
				zoomObj.removeEventListener('mousemove',	positiontip,	false);
			}
			else{
				zoomObj.detachEvent('onmousemove', dragIt);
				zoomObj.detachEvent('onmousemove', positiontip);

			}

			// Catch a stupid selection
			if (document.getElementById("Param").value === "nope1") {
				return false;
			}

			if(!E)	// IE stupidity
				E = window.event;

			// Grab mouse posn immediately
			pos.X = E.clientX;
			pos.Y = E.clientY;

			/*	buttn	IE		NS (etc?)
			 *  L			1			1
			 *  M			4			2
			 *  R			2			3
			 */
			var LEFT 	= 1;
			var MID  	= 2;
			var RIGHT	= 3;
			if ( ie ) {
				shiftPressed	= event.shiftKey;
				ctrlPressed		= event.ctrlKey;
				altPressed		= event.altKey;
				switch(event.button){
				case 1:	buttn = LEFT;  break;
				case 2: buttn = RIGHT; break;
				case 3:	buttn = MID; 	 break;
				case 4:	buttn = MID;	 break;
				default:
					alert("I don't understand which butoon you pressed!\nButton # = " + event.button);
					break;
				}
			}
			else if (ns || ko || op ) {
				shiftPressed	= E.shiftKey;
				ctrlPressed		= E.ctrlKey;
				altPressed		= E.altKey;
				switch(E.which){
				case 1:	buttn = LEFT; 	break;
				case 2:	buttn = MID;		break;
				case 3: buttn = RIGHT;	break;
				default:	alert("Which button was that?\nE.which = " + E.which); break;
				}				
			}
			else {
				alert("Which Button?\nE.which = " + E.which);
			}
			
			times = d2times;

			switch (buttn) {
			case 1:
				/**** ORDINARY CLICK -> NEXT TIME IN DAY / DRAG ****/
				if(!shiftPressed && !ctrlPressed){
					// This is a bit kludgy: movement < 5 px == No Movement!
					if( (Zoom == 1) || (Math.abs(mouseDownPos.X - pos.X) < 5 && Math.abs(mouseDownPos.Y - pos.Y) < 5)){
						// No movmt -> NextTimeInDay
						var i = document.getElementById("Time").selectedIndex;
						i = (i + 1) % times.length;
						document.getElementById("Time").options[i].selected   = true;
					}
					unfreezetip("Ctl-Click for Value");
				}

				/**** CTRL-SHIFT -> PREVIOUS TIME IN DAY ****/
				else if(shiftPressed && ctrlPressed){
					var i = document.getElementById("Time").selectedIndex;
					if (--i < 0) {
						i = (times.length - 1);
					}
					document.getElementById("Time").options[i].selected   = true;
					dirn = -1; // backwards;
					unfreezetip("Ctl-Click for Value");
				}

				/**** SHIFT -> PROVIDE A POPUP ****/
				else if(shiftPressed && !ctrlPressed){
						if( archiveMode && skewTpopup == true){	//SkewT Popup
								alert("SkewT PopUp not available for Archive dates!");
								break;
							}
					if( ie){		//Internet Exploder
						wx  = event.offsetX;
						wy  = event.offsetY;
						ht  = window.zoomMap.height;
						wid = window.zoomMap.width;
					}
					else{		// NS etc
						var offsets = getOffsets(E);
						target = E.target;
						ht  = E.target.height;
						wid = E.target.width;
						wx  = offsets.offsetX;
						wy  = offsets.offsetY
					}

					removePopup();

					parameter = checkParam();

					if((parameter === "") && (skewTpopup == false)) {
						unfreezetip("Unimplemented");
					}

					else { // Good parameter
						unfreezetip("Getting Value ...");
						positiontip(E);
						freezetip("Getting Value ...");

						if( skewTpopup 	== true){	//SkewT Popup
							switch(document.getElementById("Day").selectedIndex){
								case 0: wrffile = "UK4%2b1";	break;
								case 1: wrffile = "UK12";			break;
								case 2: wrffile = "UK5%2b1";	break; // Both 5Km runs go into the same directory 
								case 3: wrffile = "UK12%2b2"; break;
								case 4: wrffile = "UK12%2b3"; break;
								case 5: wrffile = "UK12%2b4"; break;
								case 6: wrffile = "UK12%2b5"; break;
								case 7: wrffile = "UK12%2b6"; break;
								default: alert("Bad day selector: " + document.getElementById("Day").selectedIndex); break;
							}
							blipSpotUrl = Server + "cgi-bin/get_rasp_skewt.cgi";
							tail = "region=" + wrffile
								+ "&grid="   + "d2"
								+ "&day="    + "0"
								+ "&i="      + wx + "&k=" + wy
								+ "&width="  + wid + "&height=" + ht
								+ "&time="	 +  document.getElementById("Time").value
								;
							txtPlace = "popUp";
							// alert("URL = " + blipSpotUrl + "\ntail = " + tail);
							paramWindow = window.open(blipSpotUrl + "?" + tail, 'SkewT', 'height=850,width=850');
							tipobj.innerHTML = "See PopUp" ;
						} // End SkewT
						else {	// Param Values for whole day
							unfreezetip("Getting Value ...");
							positiontip(E);
							freezetip("Getting Value ...");
							blipSpotUrl = Server + "cgi-bin/get_rasp_blipspot.cgi";
							str = (archiveMode ? "UK%2b0" : document.getElementById("Day").value) // %2b == '+'
							tail = "region=" + str
								+ "&grid="   + "d2"
								+ "&day=" + (archiveMode ? (document.getElementById("archiveYear").value
								+ document.getElementById("archiveMonth").value
								+ document.getElementById("archiveDay").value) : "0")
								+ "&i="      + wx + "&k=" + wy
								+ "&width="  + wid + "&height=" + ht
								+ "&linfo="  +  1
								+ "&param="  + parameter // Tried excluding this (for all params)
																				//	but *much* slower, and there is a blipspot maker 
							;

							txtPlace = "popUp";
							// alert("URL: " + blipSpotUrl + "\ntail: " + tail);
							doCallback(blipSpotUrl, tail);
							tipobj.innerHTML = "See PopUp" ;
						} // End Param Values
					}	// End Good Parameter
				}	// End Shft && !Ctrl

				/* CONTROL -> PARAMETER VALUE IN TOOLTIP ****/
				else if(!shiftPressed && ctrlPressed){
					if( ie){		//Internet Exploder
						wx  = event.offsetX;
						wy  = event.offsetY;
						ht  = window.zoomMap.height;
						wid = window.zoomMap.width;
					}
					else{		// NS etc
						var offsets = getOffsets(E);
						target = E.target;
						ht  = E.target.height;
						wid = E.target.width;
						wx  = offsets.offsetX;
						wy  = offsets.offsetY
					}

					removePopup();

					parameter = checkParam();
					if(parameter === "") {
						unfreezetip("Unimplemented");
					}

					else { // Good parameter
						unfreezetip("Getting Value ...");
						positiontip(E);
						freezetip("Getting Value ...");
						blipSpotUrl = Server + "cgi-bin/get_rasp_blipspot.cgi";
						str = (archiveMode ? "UK%2b0" : document.getElementById("Day").value) // %2b == '+'
						tail = "region=" + str
							+ "&grid="   + "d2"
							+ "&day="
							+ (archiveMode ? (document.getElementById("archiveYear").value
							+ document.getElementById("archiveMonth").value
							+ document.getElementById("archiveDay").value) : "0")
							+ "&i="      + wx + "&k=" + wy
							+ "&width="  + wid + "&height=" + ht
							+ "&linfo="	 + 0
							+ "&time="	 + document.getElementById("Time").value + "lst"
							+ "&param="	 + parameter 
							;
						txtPlace = "tip";
						// alert("URL = " + blipSpotUrl + "\ntail = " + tail);
						doCallback(blipSpotUrl, tail);
						tipobj.innerHTML = "Getting value ..." ;
						removePopup();
					}
				}
				break; // Case 1: -> LEFT BUTTON

			
			case 2:	// MID - was Previous time in day: Now Reset Zoom
			Zoom = 1.0;
			setSize();
			break;


			/* NOT NEEDED
			case 3:	// RIGHT - was BLIPspot
			alert("Use Ctrl-LeftClick for Parameter Value\nShift-LeftClick for PopUp");
			break;
			*/

			/* NO default: - We are not interested in any other Buttons! */

			}

			loadImage(dirn);

			if (E.preventDefault)
				E.preventDefault();
			E.returnValue = false;
			return false;		// Defeat normal contextmenu for Firefox
}

var txtPlace = "tip";

function writePopup()
{
			paramWindow = window.open('', "_blank", "resizable=yes,height=200,titlebar=no,scrollbars=yes" );
			paramWindow.focus();
			paramWindow.document.write("<html><head></head><body><pre>" + req.responseText + "</pre></body></html>");
}


/******************************************************
 * Check if param is implemented
 *
 * Returns true if not in list of unimplemented params
 ******************************************************/
function checkParam()
{
			var badParams = new Array();
			badParams[0]  = "";
			badParams[1]  = "press850";
			badParams[2]  = "press700";
			badParams[3]  = "press500";
			badParams[4]  = "boxwmax";
			badParams[5]  = "sounding1";
			badParams[6]  = "sounding2";
			badParams[7]  = "sounding3";
			badParams[8]  = "sounding4";
			badParams[9]  = "sounding5";
			badParams[10] = "sounding6";
			badParams[11] = "sounding7";
			badParams[12] = "sounding8";
			badParams[13] = "sounding9";
			badParams[14] = "sounding10";
			badParams[15] = "sounding11";
			badParams[16] = "sounding12";
			badParams[17] = "sounding13";
			badParams[18] = "sounding14";
			badParams[19] = "sounding15";
			badParams[20] = "topo" ;
			badParams[21] = "zblclmask" ;
			badParams[22] = "zsfclclmask" ;
			badParams[23]  = "press1000";
			badParams[24]  = "press950";

			for( i = 0; i < badParams.length; i++) 
				if( document.getElementById("Param").value === badParams[i])
					return "" ;

			var newParams = new Array();
			newParams[0]  = "wstar_bsratio";
			newParams[1] = "sfcwind" ;
			newParams[2] = "sfcwind0" ;
			newParams[3] = "blwind" ;
			newParams[4] = "bltopwind" ;

			/* Identify the Vector Params */
			for( i = 0; i < newParams.length; i++){
				if( document.getElementById("Param").value === newParams[i]){
					if(document.getElementById("Param").value === "wstar_bsratio")
						return("wstar bsratio");
					if(document.getElementById("Param").value === "sfcwind0")
						return("sfcwind0spd sfcwind0dir");
					if(document.getElementById("Param").value === "sfcwind")
						return("sfcwindspd sfcwinddir");
					if(document.getElementById("Param").value === "blwind")
						return("blwindspd blwinddir");
					if(document.getElementById("Param").value === "bltopwind")
						return("bltopwindspd bltopwinddir");
				}
			}
			return document.getElementById("Param").value ;
}

			
var req = false;
var responseText;

function doCallback(url, data)
{
			/************************************************/
			/* This stuff needed if running from file://... */
			/* DELETE THIS LINE TO INCLUDE
			try {
				netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
			} catch (e) {
				alert("Permission UniversalBrowserRead denied.");
			}
			AND THIS */
			// End This stuff needed
			/************************************************/

			if (window.XMLHttpRequest) {
				try {
					req = new XMLHttpRequest();
				}
				catch (e) {
					req = false;
				}
			}
			else if (window.ActiveXObject) {
				// For Internet Explorer on Windows
				try {
					req = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch (e) {
					try {
						req = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch (e) {
						req = false;
					}
				}
			}

			if (req) {
				req.onreadystatechange = processReqChange;
				try {
					req.open('POST', url, true);
				}
				catch (E){
					alert(E);
				}
				req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				req.send(data);
			}
			else {
				document.println("Failed");
			}
}

function processReqChange()
{
			if (req.readyState == 4) { // only if req shows 'loaded'
				if (req.status == 200) { // only if 'OK'
					// alert("Response = \"" + req.responseText + "\"");
					if(txtPlace === "tip"){
						tipobj.innerHTML = req.responseText;
						// A rather horrible hack for 2-line responses
						if(req.responseText.lastIndexOf('\n') - req.responseText.indexOf('\n') > 1){
							tipobj.innerHTML = req.responseText.replace(/\n/, (document.getElementById("Param").value === "wstar_bsratio" ? " BS: ": " Dirn: ")); 
						}
						// alert("Tip text = " + tipobj.innerHTML);
					}
					else
						writePopup();
				}
				else {
					alert('There was a problem retrieving the XML data: ' + req.responseText);
				}
			}
}


/******************/
/* Which Browser? */
/******************/
var ns;
var ko;
var ie;
var op;

function whichBrowser()
{
			// alert("Browser = " + navigator.appName);
			ns = navigator.appName === 'Netscape' ;
			ie = navigator.appName === 'Microsoft Internet Explorer' ;
			ko = navigator.appName === 'Konqueror' ;
			op = navigator.appName === 'Opera' ;
}


/** Event handler for mouse wheel event */
function wheel(event)
{
			var delta = 0;

			if (!event) /* For IE. */
				event = window.event;
			if (event.wheelDelta) { /* IE/Opera. */
				delta = event.wheelDelta/120;
				/** In Opera 9, delta differs in sign as compared to IE */
				if (window.opera)
					delta = -delta;
			} else if (event.detail) { /** Mozilla case. */
				/*
				 * In Mozilla, sign of delta is different than in IE.
				 * Also, delta is multiple of 3.
				 */
				delta = -event.detail/3;
			}

			/* Bug in FF < 3
			 * Correct values for clientX appear as screenX 
			 * See http://extjs.com/forum/showthread.php?t=20298
			 */
			if(ns && ffversion < 3){
				var eventCoords = {
					X: event.screenX,
					Y: event.screenY
				};
			}
			else if(event.clientX){
				var eventCoords = {
					X: event.clientX,
					Y: event.clientY
				}
			}

			/* If delta is nonzero, handle it.
			 * delta > 0 if wheel was scrolled up,
			 * delta < 0 if wheel was scrolled down.
			 */

			if (delta) {
				oldZoom = Zoom;
				if (delta < 0){
					Zoom /= 1.05;
				if(Zoom < 1)
					Zoom = 1.0;
				}
				else{
					Zoom *= 1.05;
				}
				zoomIt(eventCoords);
			}

			/* Prevent default actions caused by mouse wheel */
			if (event.preventDefault)
				event.preventDefault();
			event.returnValue = false;
}


function zoomIt(coords)
{
			var	X, Y;

			unfreezetip("Ctl-Click for a value");

			X = coords.X;
			Y = coords.Y;

			var ofstX = document.getElementById("zoomBox").offsetLeft;
			oldleft = Zoom * (oldleft + ofstX - X) / oldZoom + X - ofstX;

			var ofstY = document.getElementById("zoomBox").offsetTop;
			oldtop  = Zoom * (oldtop + ofstY - Y) / oldZoom + Y - ofstY;

			if(Zoom == 1){	// Reset to centre posn;
				oldleft = 0;
				oldtop  = -topHeight;
			}

			zoomObj.style.height   = Zoom * imgHt;
			zoomObj.style.width    = Zoom * imgWid;

			// Check have not shifted too far (and write out top & left)
			chkShift();
			// zoomObj.style.top  = oldtop;
			// zoomObj.style.left = oldleft;
}


/***************************/
/* Set Initial Image Size  */
/***************************/
function setSize()
{
			var titleBox;
			var zoomBox;
			var scaleBox;
			var ofst = document.getElementById("topTitle").offsetTop;

			// if (Zoom != 1.0)
			// 	return;		// Don't mess with it if zoomed


			// Deal with the Padding round the image
			if(ie){
				imgHt	 = document.body.offsetHeight - 44 ;
				imgWid = document.body.offsetHeight - 44 ;
			}
			else {
				imgHt  = window.innerHeight - 2 * ofst;	// Assume offsetTop == offsetBottom
				imgWid = window.innerHeight - 2 * ofst;	// And is the same for Left & Right
			}

			// Determine the Map Resolution - See mapdata.js
			if(archiveMode) {
				resolution = 4;
			}
			else {
				switch( document.getElementById("Day").options.selectedIndex){
				case 0:	resolution = 4;		break;	// Today 		- 4Km
				case 1: resolution = 12;	break;	// Today 		- 12Km
				case 2: resolution = 5;		break;	// Tomorrow	- 5Km
				case 3:														// Rest of week - 12Km
				case 4:
				case 5:
				case 6:
				case 7: resolution = 12;	break;
				default:
								alert("Unknown Day Index!");
				}
			}

			topHeight = imgHt * (1 - mapdata.MAPORIGINY[resolution]);
			botHeight = imgHt * (mapdata.MAPORIGINY[resolution] - mapdata.MAPHEIGHT[resolution]);
			leftSpace = imgHt * mapdata.MAPORIGINX[resolution];
			mapWidth  = imgHt * mapdata.MAPWIDTH[resolution];

			topHeight *= 0.78;		// Kludge Factors to remove Longitude Values
			botHeight *= 0.73;		// from the Title & the Scale
														// Experimentally determined :-(

			if (Zoom != 1.0)
				return;		// Don't mess with it if zoomed

			oldleft = 0;
			oldtop  = -topHeight;

			/* 
			 * See http://www.w3schools.com/Css/pr_class_position.asp
			 * for interaction of position = absolute, fixed, relative, static & inherit
			 */
			titleBox = document.getElementById("topTitle");
			titleBox.style.left     = 0  + "px" ;
			titleBox.style.top      = 0  + "px";
			titleBox.style.height   = (topHeight) + "px";
			titleBox.style.width    = imgHt + "px";
			titleBox.style.overflow = "hidden" ;
			titleBox.style.position = "relative" ;

			titleObj.style.left     = 0  + "px" ;
			titleObj.style.top      = 0 + "px";
			titleObj.style.height   = imgHt + "px";
			titleObj.style.width    = imgHt + "px";
			titleObj.style.position = "relative" ;

			zoomBox = document.getElementById("zoomBox");
			zoomBox.style.left     = 0  + "px" ;
			zoomBox.style.top      = 0  + "px";
			zoomBox.style.height   = (imgHt - topHeight - botHeight) + "px";
			zoomBox.style.width    = imgWid + "px";
			zoomBox.style.overflow = "hidden" ;
			zoomBox.style.position = "relative" ;

			zoomObj.style.left   = 0  + "px";
			zoomObj.style.width  = imgWid + "px";
			zoomObj.style.height = imgHt  + "px";
			zoomObj.style.top    = (-topHeight)  + "px";
			zoomObj.style.position = "relative" ;

			scaleBox = document.getElementById("botScale");
			scaleBox.style.left     = 0  + "px" ;
			scaleBox.style.top      = 0  + "px";
			scaleBox.style.height   = (botHeight) + "px";
			scaleBox.style.width    = imgHt + "px";
			scaleBox.style.overflow = "hidden" ;
			scaleBox.style.position = "relative" ;

			scaleObj.style.left   = 0  + "px";
			scaleObj.style.width  = imgWid + "px";
			scaleObj.style.height = imgHt  + "px";
			scaleObj.style.top    = (-imgHt + botHeight)  + "px";
			scaleObj.style.position = "relative" ;



			/* Now do the Selectors */

			tblHt = document.getElementById("selectors").offsetHeight;

			// alert("TableHt = " + tblHt + "ImgHt = " + imgHt);
			
			if( tblHt > imgHt ){
				document.getElementById("Param").size = 1;	// Set the number of Parameters visible
				document.getElementById("Time").size = 1;	// Set the number of Times visible
				document.getElementById("Day").size = 1;	// Set the number of Days visible
			}

			// if( imgHt > origTblHt ){		// The big Tables will fit
			else { // if( imgHt > origTblHt ){		// The big Tables will fit
				document.getElementById("Param").size = 15;	// Set the number of Parameters visible
				document.getElementById("Time").size = 8;	// Set the number of Times visible
				document.getElementById("Day").size = 8;	// Set the number of Days visible
			}
}


/********************/
/* Check if Archive */
/* 0 => normal      */
/* 1 => archive     */
/********************/
var archiveMode = 0;
var oldArchive = 0;
var oldArchiveDay;
var oldArchiveMonth;
var oldArchiveYear;
var oldDayIndex;

function isArchive()
{
			if((document.getElementById("archiveDay").value === "nope1")
				|| (document.getElementById("archiveMonth").value === "nope1")
				|| (document.getElementById("archiveYear").value === "nope1")){
				archiveMode = 0;
			}
			else
				archiveMode = 1;
}


function resetArchive()
{
			document.getElementById("archiveDay").options[0].selected = true;
			document.getElementById("archiveMonth").options[0].selected = true;
			document.getElementById("archiveYear").options[0].selected = true;
			doChange();
}



/*******************************/
/* CallBack from the selectors */
/*******************************/
function doChange()
{
			if(document.getElementById("Param").value === "nope1" ) {
				return 0;		// Catch a stupid selection
			}

			/*  Descriptions */
			if(fullSet){
				(document.getElementById("desc")).innerHTML = paramListFull[document.getElementById("Param").selectedIndex][3] ;
			}
			else {
				(document.getElementById("desc")).innerHTML = paramListLite[document.getElementById("Param").selectedIndex][3] ;
			}


			isArchive();
			unfreezetip("Ctl-Click for a value");

			if( oldArchive == 0 && archiveMode == 1){	// Change to Archive mode
				oldDayIndex =  document.getElementById("Day").options.selectedIndex;
				document.getElementById("Day").options[document.getElementById("Day").options.selectedIndex].selected = false;
				document.getElementById("Day").disabled = true;
			}
			else if (oldArchive == 1 && archiveMode == 0){ // Change to Normal mode
				document.getElementById("Day").disabled = false;
				document.getElementById("Day").options[oldDayIndex].selected = true;
			}


			/* Clear saved images
			 * if changing to / from archiveMode,
			 * or Param or Day changes
			 */
			if(  (oldParam !== document.getElementById("Param").value)
				|| (oldDay !== document.getElementById("Day").value)
				|| (oldArchive !== archiveMode)
				|| (archiveMode
						&& (		oldArchiveDay 	!= document.getElementById("archiveDay").value
								||	oldArchiveMonth != document.getElementById("archiveMonth").value
								||	oldArchiveYear  != document.getElementById("archiveYear").value
							 )
					 )
				){
				for(i = 0; i < document.getElementById("Time").options.length; i++){
					Loaded[i] = false;
				}
			}

			/* Save current values, so can detect change */
			oldParam = document.getElementById("Param").value;
			oldDay = document.getElementById("Day").value;
			oldArchive = archiveMode;
			oldArchiveDay = document.getElementById("archiveDay").value;
			oldArchiveMonth = document.getElementById("archiveMonth").value;
			oldArchiveYear  = document.getElementById("archiveYear").value;

			/* Load images */
			if(document.getElementById("Param").value.match("topo") ) {
				loadImage(0);
			}
			else {
				loadImage(1); // forwards
			}
}

/************************************/
/* Load the Image, and the next one */
/************************************/

function loadImage(dirn)
{
			// Load image and next, depending on direction
			// -1 => backwards
			//  0 => neither
			//  1 => forwards

			var tIdx = document.getElementById("Time").selectedIndex;
			var tValue;
			var	imgURL;


			var T = new Date();			// Instantiate a Date object; initialised to "Now"
			var str;

			tValue = document.getElementById("Time").options[tIdx].value;
			if(archiveMode){
				str = location.href.split("?")[0]
				+ "?" + "date="
				+ document.getElementById("archiveYear").value
				+ document.getElementById("archiveMonth").value
				+ document.getElementById("archiveDay").value
				+ ",param=" + document.getElementById("Param").value
				+ ",time=" + tValue; 
			}
			else {
				offset = document.getElementById("Day").selectedIndex;
				if(offset > 1){
					T.setDate(T.getDate() + offset - 1);
				}
				month = T.getMonth() + 1;
				if(month < 10)
					month = "0" + month;
				date = T.getDate();
				if(date < 10)
					date = "0" + date;
				year = T.getFullYear();
				// alert(date + "/" + month + "/" + year);
				str = location.href.split("?")[0]
				+ "?"
				+ "date=" + year + month + date
				+ ",param=" + document.getElementById("Param").value
				+ ",time=" + tValue; 
			}
			str = "<a href=" + str + ">" + "Page URL" + "</a>";
			document.getElementById("Url").innerHTML = str;

			for( i = 0; i < 2; i++){
				if (Loaded[tIdx]) {
					tIdx = (tIdx + dirn) % times.length;
					if (tIdx < 0)
						tIdx = times.length - 1;
					continue;
				}
				tValue = document.getElementById("Time").options[tIdx].value;

				if(document.getElementById("Param").value === "topo"){
					imgURL = Server
					  + document.getElementById("Day").value
						+ "/color_topo.g2.png"
						;
				}
				else {
					if(archiveMode == 1){
						imgURL = Server + "ARCHIVE/"
							+ "UK+0/"
							+ document.getElementById("archiveYear").value
							+ "/"
							+ document.getElementById("archiveYear").value
							+ document.getElementById("archiveMonth").value
							+ document.getElementById("archiveDay").value
							+ "/"
							;
							/*
							alert("archiveDate = " + document.getElementById("archiveYear").value + " "
							+ document.getElementById("archiveMonth").value + " " + document.getElementById("archiveDay").value);
							*/
					}
					else {
						imgURL =  Server 
							+ document.getElementById("Day").value
							+ "/FCST/"
							;
					}
					imgURL += document.getElementById("Param").value
							+ ".curr."
							+ tValue
							+ "lst.d2.png"
							;
				}

				Pics[tIdx].src = imgURL;
				Loaded[tIdx] = true;
				// alert( "imgURL = " + imgURL);
				if (dirn === 0)
					break;

				tIdx = (tIdx + dirn) % times.length;
				if (tIdx < 0)
					tIdx = times.length - 1;
			}
			document.getElementById("theTitle").src = Pics[document.getElementById("Time").selectedIndex].src;

			document.getElementById("zoomMap").src = Pics[document.getElementById("Time").selectedIndex].src;

			document.getElementById("theScale").src = Pics[document.getElementById("Time").selectedIndex].src;

}

/**************************
 * badimage()             *
 * Put up a warning image *
 * if image not found etc *
 **************************/
function badImage()
{
			if(archiveMode)
				document.images[0].src = Server + "noArchive.png";
			else
				document.images[0].src = Server + "noImage.png";
}


var skewTpopup = false;

function toggleSkewT()
{
			if(archiveMode){
				alert("SkewT PopUps not available for Archive!");
				return;
			}
			if(skewTpopup == false){
				document.getElementById("skewT").innerHTML = "Press for Parameter PopUp";
				skewTpopup = true;
			}
			else {
				document.getElementById("skewT").innerHTML = "Press for SkewT PopUp";
				skewTpopup = false;
			}
}
			

function switchParamList(E)
{
			if(fullSet){
				changeParamset(paramListLite);
				document.getElementById("paramSet").innerHTML = "Press for Full Parameter set";
			}
			else{
				changeParamset(paramListFull);
				document.getElementById("paramSet").innerHTML = "Press for Reduced Parameter set";
			}
}
		

function changeParamset(newParams)
{
			for (var i = 0; i < newParams.length; i++) {
				document.getElementById("Param").options[i] = new Option(newParams[i][2], newParams[i][1]);
				document.getElementById("Param").options[i].className = newParams[i][0];
			}
			if(document.getElementById("Param").options.length > newParams.length){
				for(i = newParams.length; i < document.getElementById("Param").length; i++){
					document.getElementById("Param").options[i] = null;
				}
			}
			document.getElementById("Param").options.length = newParams.length;
			fullSet = ((fullSet == true) ? false : true);

			// The parameter punter had selected
			// is available as oldParam !!

			for(var i = 0; i < document.getElementById("Param").options.length; i++){
				if(document.getElementById("Param").options[i].value == oldParam)
					break;
			}
			if(i == document.getElementById("Param").options.length){
				document.getElementById("Param").options[1].selected = true;	// Not available
			}
			else{
				document.getElementById("Param").options[i].selected =true;
			}
}