/* --------------
																Title information
																-------------- */

																	// LANGUAGE: JavaScript1.1
																	// APPLICATION: NewWaveGeo Scanning Previewer
																	// PLATFORM: WWW Browsers (IE4+ and NN4+)
																	// PROGRAMMER: Peter Kirkham

																/* --------------------
																Initiate browser checks
																-------------------- */

IE4 = (document.all) ? 1 : 0;
NN4 = (document.layers) ? 1 : 0;
ver4 = (IE4 || NN4) ? 1 : 0;

																/* ----------------------------------------
																Global Variables should be initialised here
																---------------------------------------- */

currentX = currentY = 0;											// current cursor position
which_el = null;													// object that is currently active
which_button = null;												// button code that cursor is currently over
event_place = null;													// where the mouse was clicked
var img = 0; 														// total number of buttons
button = new Array();												// define array to hold unlimited button images
scale = 1.2;														// zoom factor
maxwidth = 1500; minwidth = 300;									// default size range for image
beforeimage_src = "sectionbefore.jpg"
afterimage_src = "sectionafter.jpg"									// default image filenames

																/* ----------------------------------
																Now define all the required functions
																---------------------------------- */

function PressAction(e) {											// * action on mousedown event *
	if (IE4) {														// work down through parent elements
        event_place = "drag";
        which_el = event.srcElement;
        while (which_el.id.indexOf("DRAG") == -1) {					// keep looping until a 'DRAG' container is found
         	if (which_el.id.indexOf("VIEW") != -1) {				// break loop if a 'VIEW' is found
        		event_place = "view";
        		break;
    		}
	       	which_el = which_el.parentElement;						// check up a heiarchical level
	       	if (which_el == null) {									// quit function if no object element found
	        	event_place = null;
	        	return;
        	}
		}
    }
    else {
        mdX = e.pageX;
        mdY = e.pageY;
        for (i=0; i<document.layers.length; i++) {					// work up through layers
        	temp_layer = document.layers[i];
            if (temp_layer.visibility == "hide") { continue }			// ignore hidden layers
   	        if ((temp_layer.id.indexOf("DRAG") == -1)				// look at next layer if 'DRAG'
             && (temp_layer.id.indexOf("VIEW") == -1)) { continue }	// and 'VIEW' are not found
            if ((mdX > temp_layer.left) 							// check if click was in layer clip area
             && (mdX < (temp_layer.left + temp_layer.clip.width)) 
             && (mdY > temp_layer.top) 
             && (mdY < (temp_layer.top + temp_layer.clip.height))) {
            	which_el = temp_layer;
         		if (which_el.id.indexOf("VIEW") != -1) {			// break loop if a 'VIEW' is found
        			event_place = "view";
         		}
        		else { event_place = "drag" }
            }
        } 
        if (which_el == null) {										// quit function if no object element found
        	event_place = null;
        	return;
    	}
    }
    switch (event_place) {											// take appropriate action
    	case "drag" :												// action for 'DRAG' container click
		    if (which_el != active_el) {
		        if (IE4) { which_el.style.zIndex = active_el.style.zIndex + 1 }
		        else { which_el.moveAbove(active_el) }
		        active_el = which_el;
		    }
		    if (IE4) {
		        which_el.style.pixelLeft = which_el.offsetLeft;		// set equal to prevent coordinate bug
		        which_el.style.pixelTop = which_el.offsetTop;
		        currentX = (event.clientX + document.body.scrollLeft);
		        currentY = (event.clientY + document.body.scrollTop); 
		    }
		    else {
		        currentX = mdX;
		        currentY = mdY;
		        document.captureEvents(Event.MOUSEMOVE);
		    }
	        document.onmousemove = DragAction;
		    break;
    	case "view" :												// action for 'VIEW' click
			if (IE4) {
		    	which_el.style.pixelLeft = which_el.offsetLeft;	 
		    	which_el.style.pixelTop = which_el.offsetTop;
				currentX = (event.clientX + document.body.scrollLeft);
				currentY = (event.clientY + document.body.scrollTop);
 			}
			else {
		        currentX = mdX;
				currentY = mdY;
			}
       		switch (WhichToggleIsOn()) {							// find out appropriate response
    			case 0 :											// action for 'ZOOM IN' selected
		 			currentX-= ShiftX(); currentY-= ShiftY(); 
	   			   	ZoomCloser();
    				break;
				case 1 :											// action for 'ZOOM OUT' selected
		    		currentX-= ShiftX(); currentY-= ShiftY(); 
					ZoomFurther();
					break;
				case 2 :											// action for 'PAN' selected
					if (NN4) { document.captureEvents(Event.MOUSEMOVE); }			
				    document.onmousemove = PanAction;
				    break;
			    default : 
			    	alert("No function currently selected");
    		}
    }
}
    
function DragAction(e) {											// * action on mousemove dragging event *
    if (which_el == null) { return };								// return if not dragging
    if (IE4) {
        newX = (event.clientX + document.body.scrollLeft);
        newY = (event.clientY + document.body.scrollTop);
    }
    else {
        newX = e.pageX;
        newY = e.pageY;
    }
    deltaX = (newX - currentX);
    deltaY = (newY - currentY);
    currentX = newX;
    currentY = newY;
    if (IE4) {
        which_el.style.pixelLeft += deltaX;
        which_el.style.pixelTop += deltaY;
        event.returnValue = false;
    }
    else { 
    	which_el.moveBy(deltaX, deltaY);
    	return false;
    }
}
    
function ReleaseAction() {											// * action on mouseup event *
    if (NN4) { document.releaseEvents(Event.MOUSEMOVE) }
	document.onmousemove = Dud;
    which_el = null;
}

function OverAction(e) {											// * action on mouseover event *
	if (IE4) { 
 		ChangeCursor();												// change cursor depending on situation
		if (event.srcElement.id.indexOf("VIEW") != -1) {
			OverInfo();
		}
	}
}

function ChangeCursor() {											// * change cursor to suit situation *
    if (event.srcElement.id.indexOf("DRAG") != -1) {				// IMPORTANT: IE4 specific code
         event.srcElement.style.cursor = "move"
    }
    if (event.srcElement.id.indexOf("VIEW") != -1) {
    	if (WhichToggleIsOn() == 2) {
    		event.srcElement.style.cursor = "move";
    	}
    	else { event.srcElement.style.cursor = "crosshair" }
    }
}

function CheckHighlight() {											// * stop text highlighting *
    if (which_el != null) { return false }							// ... unless not dragging
}

function PreLoad(on, off, neutral, name, type) {					// * preload chameleon button into an array *
	button[img] = new Array(6);
	for (i = 0; i < 3; i++) {
		button[img][i] = new Image();
	}
	button[img][0].src = on;
	button[img][1].src = off;
	button[img][2].src = neutral;
	button[img][3] = name;
	button[img][4] = false;
	button[img][5] = type;
	++img;	
}

function ButtonOver(name) {											// * change button image for mouseover event *
	window.status = ("");
	for (i=0; i<img; i++) {											// find button identity number from name
		if (button[i][3] == name) {
			ident = i; break;
		}
	}
	if (IE4) { image_ref = document }
	else { image_ref = document.DRAGmenu.document }
	if (button[ident][4]) {											// if button state is true
		image_ref.images[button[ident][3]].src = button[ident][0].src;
	}
	else {
		image_ref.images[button[ident][3]].src = button[ident][1].src;
	}
	which_button = ident;											// this is the button cursor is currently over
}

function ButtonOut(name) {											// * change button image for mouseout event *
	for (i=0; i<img; i++) {											// find button identity number from name
		if (button[i][3] == name) {
			ident = i; break;
		}
	}
	if (IE4) { image_ref = document }
	else { image_ref = document.DRAGmenu.document }
	if (button[ident][4]) {											// if button state is true
		image_ref.images[button[ident][3]].src = button[ident][0].src;
	}
	else {
		image_ref.images[button[ident][3]].src = button[ident][2].src;
	}
	which_button = null;
}

function ReDisplayButtons() {										// * redisplay all the buttons in the document *
	if (IE4) { image_ref = document }
	else { image_ref = document.DRAGmenu.document }
	for (j=0; j<img; j++) {
		if (button[j][4]) {											// button on does not depend on cursor
			image_ref.images[button[j][3]].src = button[j][0].src;
			continue;
		}
		else if (j != which_button) {								// otherwise neutral if cursor not over
			image_ref.images[button[j][3]].src = button[j][2].src;
			continue;
		}
		else { 
			image_ref.images[button[j][3]].src = button[j][1].src;	// button off and cursor over
		}
	}
}

function ButtonPress() {											// * action on pressing a button *
	if (which_button == null) {return}								// return if not over a button
	ident = which_button
	state = button[ident][4];
	type = button[ident][5];
	if (type == "toggle") {											// reset all other toggle buttons to off
		for (i=0; i<img; i++) {
			if (button[i][5] == "toggle") { 
				button[i][4] = false;
			}
		}
	}
	if (type == "push") { button[ident][4] = false }				// push buttons don't flip
	else { button[ident][4] = !state }								// toggle and sticky buttons do flip
	ReDisplayButtons();
}

function WhichToggleIsOn() {										// * return identity of toggle button that is on *
	toggleid = img;													// returns the number of images by default
	for (i=0; i<img; i++) {
		if ((button[i][5] == "toggle")
		 && (button[i][4] == true)) { 
			toggleid = i; break;									// when found stop searching
		}
	}
return toggleid;
}

function OverInfo() {												// * display status info for toggle buttons *
	ident = WhichToggleIsOn();
	switch (ident) {
		case 0 :
			window.status = ("Click on image to zoom in");			// message for 'ZOOM IN' selected
			break;
		case 1 :
			window.status = ("Click on image to zoom out");			// message for 'ZOOM OUT' selected
			break;
		case 2 :
			window.status = ("Drag and drop to pan image");			// message for 'PAN' selected
			break;
		default : window.status = ("No button selected");			// message if no toggle button is on
	}
}

function Dud() { return }											// * do nothing function for IE4 mousemove *

function ZoomCloser() { 											// * zooms the before and after images in *
	if (IE4) {
		old_dimen = document.images['beforeGRAPHIC'].width;
		imgX = document.all.beforeIMAGE.style.pixelLeft;
		imgY = document.all.beforeIMAGE.style.pixelTop;
		if (document.images['beforeGRAPHIC'].width * scale < maxwidth) {
			new_dimen = old_dimen * scale;
			document.images['beforeGRAPHIC'].width*= scale;
			document.images['beforeGRAPHIC'].height*= scale;
			document.images['afterGRAPHIC'].width*= scale;
			document.images['afterGRAPHIC'].height*= scale;
		}
		else { alert("Maximum zoom") }
	}
	else {
		image_ref = document.beforeVIEW.document.beforeIMAGE.document;
		old_dimen = image_ref.images['beforeGRAPHIC'].width;
		imgX = document.beforeVIEW.document.beforeIMAGE.left;
		imgY = document.beforeVIEW.document.beforeIMAGE.top;
		new_width = image_ref.images['beforeGRAPHIC'].width * scale;
		new_height = image_ref.images['beforeGRAPHIC'].height * scale;
		if (new_width < maxwidth) {
			new_dimen = old_dimen * scale;
			html_stringb = "<IMG SRC=\"" + beforeimage_src +"\" WIDTH=" + new_width 
			 + " HEIGHT=" + new_height
			 + " NAME=\"beforeGRAPHIC\">"
			html_stringa = "<IMG SRC=\"" + afterimage_src +"\" WIDTH=" + new_width 
			 + " HEIGHT=" + new_height
			 + " NAME=\"afterGRAPHIC\">"
			with (image_ref) {										// need to re-write to <DIV> element in NN4
				open();
				write(html_stringb);
				close();
			}
			with (document.afterVIEW.document.afterIMAGE.document) {
				open();
				write(html_stringa);
				close();
			}
		}
		else { alert("Maximum zoom") }
	}
	ratioX = (currentX - imgX) / old_dimen;							// re-centre the image on the click coordinates
	ratioY = (currentY - imgY) / old_dimen;
	newX = currentX - (ratioX * new_dimen);
	newY = currentY - (ratioY * new_dimen);
	if (IE4) {
        document.all.beforeIMAGE.style.pixelLeft = newX;
        document.all.beforeIMAGE.style.pixelTop = newY;
        document.all.afterIMAGE.style.pixelLeft = newX;
        document.all.afterIMAGE.style.pixelTop = newY;
        event.returnValue = false;
    }
 	else {
    	document.beforeVIEW.document.beforeIMAGE.moveTo(newX, newY);
    	document.afterVIEW.document.afterIMAGE.moveTo(newX, newY); 
    }
}

function ZoomFurther() {											// * zooms the before and after images out *
	if (IE4) {
		old_dimen = document.images['beforeGRAPHIC'].width;
		imgX = document.all.beforeIMAGE.style.pixelLeft;
		imgY = document.all.beforeIMAGE.style.pixelTop;
		if (document.images['beforeGRAPHIC'].width / scale > minwidth) {
			new_dimen = old_dimen / scale;
			document.images['beforeGRAPHIC'].width/= scale;
			document.images['beforeGRAPHIC'].height/= scale;
			document.images['afterGRAPHIC'].width/= scale;
			document.images['afterGRAPHIC'].height/= scale;
		}
		else { alert("Minimum zoom") }
	}
	else {
		image_ref = document.beforeVIEW.document.beforeIMAGE.document;
		old_dimen = image_ref.images['beforeGRAPHIC'].width;
		imgX = document.beforeVIEW.document.beforeIMAGE.left;
		imgY = document.beforeVIEW.document.beforeIMAGE.top;
		new_width = image_ref.images['beforeGRAPHIC'].width / scale;
		new_height = image_ref.images['beforeGRAPHIC'].height / scale;
		if (new_width > minwidth) {
			new_dimen = old_dimen / scale;
			html_stringb = "<IMG SRC=\"" + beforeimage_src +"\" WIDTH=" + new_width 
			 + " HEIGHT=" + new_height
			 + " NAME=\"beforeGRAPHIC\">"
			html_stringa = "<IMG SRC=\"" + afterimage_src +"\" WIDTH=" + new_width 
			 + " HEIGHT=" + new_height
			 + " NAME=\"afterGRAPHIC\">"
			with (image_ref) {										// need to re-write to <DIV> element in NN4
				open();
				write(html_stringb);
				close();
			}
			with (document.afterVIEW.document.afterIMAGE.document) {
				open();
				write(html_stringa);
				close();
			}
		}
		else { alert("Minimum zoom") }
	}
	ratioX = (currentX - imgX) / old_dimen;							// re-centre the image on the click coordinates
	ratioY = (currentY - imgY) / old_dimen;
	newX = currentX - (ratioX * new_dimen);
	newY = currentY - (ratioY * new_dimen);
	if (IE4) {
        document.all.beforeIMAGE.style.pixelLeft = newX;
        document.all.beforeIMAGE.style.pixelTop = newY;
        document.all.afterIMAGE.style.pixelLeft = newX;
        document.all.afterIMAGE.style.pixelTop = newY;
        event.returnValue = false;
    }
    else { 
    	document.beforeVIEW.document.beforeIMAGE.moveTo(newX, newY);
    	document.afterVIEW.document.afterIMAGE.moveTo(newX, newY); 
    }
}

function PanAction(e) {												// * action on mousemove panning event *	
	if (which_el == null) { return }	
    if (IE4) {
        newX = (event.clientX + document.body.scrollLeft);
        newY = (event.clientY + document.body.scrollTop);
    }
    else {
        newX = e.pageX;
        newY = e.pageY;
    }
    deltaX = (newX - currentX);
    deltaY = (newY - currentY);
    currentX = newX;
    currentY = newY;
    if (IE4) {
        document.all.beforeIMAGE.style.pixelLeft += deltaX;
        document.all.beforeIMAGE.style.pixelTop += deltaY;
        document.all.afterIMAGE.style.pixelLeft += deltaX;
        document.all.afterIMAGE.style.pixelTop += deltaY;
        event.returnValue = false;
    }
    else { 
    	document.beforeVIEW.document.beforeIMAGE.moveBy(deltaX, deltaY);
    	document.afterVIEW.document.afterIMAGE.moveBy(deltaX, deltaY);
    	return false;
    }
}

function ShiftX() {													// * calculate the x-pos of VIEW element *
	var shiftX = 0;
	if (IE4) {
		if (which_el.id == "beforeVIEW") { 
			shiftX = document.all.beforeVIEW.style.pixelLeft
		}
		else { shiftX = document.all.afterVIEW.style.pixelLeft }
	}
	else { 
		if (which_el.id == "beforeVIEW") {
			shiftX = document.beforeVIEW.left
		}
		else { shiftX = document.afterVIEW.left }
	}
	return shiftX;
}

function ShiftY() {													// * calculate the y-pos of VIEW element *
	var shiftY = 0;
	if (IE4) {
		if (which_el.id == "beforeVIEW") { 
			shiftY = document.all.beforeVIEW.style.pixelTop
		}
		else { shiftY = document.all.afterVIEW.style.pixelTop }
	}
	else {
		if (which_el.id == "beforeVIEW") {
			shiftY = document.beforeVIEW.top
		}
		else { shiftY = document.afterVIEW.top }
	}
	return shiftY;
}

																/* -----------------------------------
																Actual program code is in this section
																----------------------------------- */

if (ver4) {															// * begin actual program for version 4 browsers *

    if (NN4) {														// set up initial event capturing for NN4
        document.captureEvents(Event.MOUSEDOWN | 
        					Event.MOUSEUP);
    }
    else {															// special event handling for IE4
        document.onselectstart = CheckHighlight;
    }

	document.onmousedown = PressAction;								// general event handling details
    document.onmouseup = ReleaseAction;
    document.onmouseover = OverAction;
    document.onmousemove = Dud;

}