window.onload=start;


var netscape = ( document.getElementById && !document.all ) || document.layers;
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
var ie = (typeof window.ActiveXObject != 'undefined');

function start(){
  window.tileEngine = new tile_engine_new();
  if (!ie && navigator.userAgent.indexOf("KHTML") == -1){  
    window.setInterval('window.tileEngine.urlCheck()', 100);
  }
}




//
// Utility - get div position - may not be accurate
//

function getCSSPositionX(parent) {
	var offset = parent.x ? parseInt(parent.x) : 0;
	offset += parent.style.left ? parseInt(parent.style.left) : 0;
	for(var node = parent; node ; node = node.offsetParent ) { offset += node.offsetLeft; }
	return offset;
}

function getCSSPositionY(parent) {
	var offset = parent.y ? parseInt(parent.y) : 0;
	offset += parent.style.top ? parseInt(parent.style.top) : 0;
	for(var node = parent; node ; node = node.offsetParent ) { offset += node.offsetTop; }
	return offset;
}



function showhide(id, show) {
	var i = document.getElementById(id);
	if (! i) { return; }
	if (show) {
		i.style.visibility = "visible";
		i.style.display = "block";
	} else {
		i.style.visibility = "hidden";
		i.style.display = "none";
	}
}




// main object
function tile_engine_new() {
     this.parentname='drag';
    	// get parent div or fail
	this.parent = document.getElementById(this.parentname);
	if( this.parent == null ) {
		alert('The tile map engine cannot find a parent container named ['+this.parentname+']');
		return;
	}
	
	this.displaywidth = 613;
	this.displayheight = 450;
    this.parent.style.width = this.displaywidth + 'px';
    this.parent.style.height = this.displayheight + 'px';
	this.parent.tile_engine = this;
    
	
	//
	// enforce parent div style?
	// position absolute is really only required for firefox
	// http://www.quirksmode.org/js/findpos.html
	//

	this.parent_x = getCSSPositionX(this.parent);
	this.parent_y = getCSSPositionY(this.parent);

//		this.parent.style.left = this.parent_x;
//		this.parent.style.top = this.parent_y;
//		this.parent.style.position = 'absolute';

	this.parent.style.position = 'relative';
	this.parent.style.overflow = 'hidden';
	this.parent.style.cursor = 'move';
	this.parent.style.backgroundColor = '#000036';
    this.tiles = this.parent;
	this.iframeSatel=true;
	var date = new Date();
	this.lastUpdate = date.valueOf();
	
	
		// draw navigation buttons into the parent div
	this.navform = document.createElement('form');
	this.navform.name = this.parentname + "_form";
	this.navform.style.position = 'absolute';
	this.navform.style.zIndex = 15;
	this.navform.style.marginTop = '0';
	this.navform.tile_engine = this;

	this.navout = document.createElement('input');
	this.navout.name = this.parentname + "_out";
	this.navout.type = "button";
	/*this.navout.src = "/i/icons/map_zoomout.png";
	if( this.navout.runtimeStyle ) {
		this.navout.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/icons/map_zoomout.png',sizingMethod='scale')";
	}*/
	this.navout.value = "Zoom out";
	this.navout.style.zIndex = 99;
	this.navout.style.backgroundColor = "#CCC";
	this.navout.style.width = "98px";
	//this.navout.style.height = "20px";
	this.navout.style.margin = "2px";
	this.navout.style.cursor = this.zoom <= 0 ? 'arrow' : 'hand';
	this.navout.title="zoom out (see a smaller scale map showing a larger area)";
	//this.navout.onclick = this.zoom == 0 ? 0 : this.tile_engine_zoomout;

 

  this.navout.tile_engine = this;
	this.navform.appendChild(this.navout);

	this.navin = document.createElement('input');
	this.navin.name = this.parentname + "_in";
	this.navin.type = "button";
	this.navin.style.backgroundColor = "#CCC";
	this.navin.style.margin = "2px";
	this.navin.value = "Zoom in";
	this.navin.style.zIndex = 99;
	this.navin.style.width = "98px";
	//this.navin.style.height = "20px";
	this.navin.style.cursor = this.zoom >= 20 ? 'arrow' : 'hand';
    this.navin.title="zoom in on the centre (see a larger scale map)";

 
 
  
  this.navin.tile_engine = this;
	this.navform.appendChild(this.navin);
	
 this.br = document.createElement('br');
 this.navform.appendChild(this.br);

    this.complete = document.createElement('input');
	this.complete.name = this.parentname + "_complete";
	this.complete.type = "button";
	this.complete.value = "Centre Square Complete";
	this.complete.style.zIndex = 99;
	this.complete.style.backgroundColor = "#CCC";
	this.complete.style.width = "200px";
	//this.complete.style.height = "20px";
	this.complete.style.margin = "2px";
	this.complete.style.cursor = this.zoom <= 0 ? 'arrow' : 'hand';
	this.complete.title="Move your Grid square under the central cross and click here to report it complete";
	
    this.complete.tile_engine = this;
	this.navform.appendChild(this.complete);
    this.navform.appendChild(document.createElement('br'));

    this.norights = document.createElement('input');
	this.norights.name = this.parentname + "_norights";
	this.norights.type = "button";
	this.norights.value = "Centre has No Rights of Way";
	this.norights.style.zIndex = 99;
	this.norights.style.backgroundColor = "#CCC";
	this.norights.style.width = "200px";
	//this.norights.style.height = "20px";
	this.norights.style.margin = "2px";
	this.norights.style.cursor = this.zoom <= 0 ? 'arrow' : 'hand';
	this.norights.title="Move your Grid square under the central cross and click here to report  that it has no Public Rights of Way";
	
    this.norights.tile_engine = this;
	this.navform.appendChild(this.norights);
	
	this.Ne2GridRef = function(easting, northing, precision) {
	
        letters = "ABCDEFGHJKLMNOPQRSTUVWXYZ"; // 'I' is missing intentionally!

		easting=easting/10;
		northing=northing/10;
		// Origin of  the 500km grid is 1000km west / 500km
		// south of the origin used in the PAF data:
		easting += 100000;
		northing += 50000;

		// Grid goes left to right, top to bottom:
	    southing = 250000 - northing;

		// Get the x/y indices of the grid square:
		y = Math.floor((southing -1) / 50000);
		x = easting / 50000;
		firstLetter = letters.charAt(5 * y + x);

		// 100km square:
		southing -= 50000 * Math.floor((southing -1) / 50000);
		easting -= 50000 * Math.floor(easting / 50000);

		y = Math.floor((southing -1) / 10000);
		x = Math.floor(easting / 10000);
		secondLetter = letters.charAt(5 * y + x);

		// Digits
		southing -= 10000 * Math.floor((southing -1) / 10000);
		northing = 10000 - southing;
		easting -= 10000 * Math.floor(easting / 10000);
		// Format northing and easting to the right number of figures:	
		//numFigures = numFigures / 2;
		//easting = sprintf("%04".'u', easting);
		//northing = sprintf("%04".'u', northing);
		easting = easting.toString();
		while(easting.length < 4) easting = '0' + ''+ easting;
		easting = easting.substring(0, precision/2);
		northing = northing.toString();
		while(northing.length < 4) northing = '0' + ''+ northing;
		northing = northing.substring(0, precision/2);
		return firstLetter + secondLetter + easting + northing;
		
		}
	
	this.gridRef2Ne = function(gridRef){
	    var letters = "ABCDEFGHJKLMNOPQRSTUVWXYZ"; // 'I' is missing intentionally!
	    var majorLetter = gridRef.charAt(0);
		var minorLetter = gridRef.charAt(1);
		gridRef = gridRef.substring(2);

		// Get the origin of the grid square from the first 2 letters:

		var majPos = letters.indexOf(majorLetter);
		var majRow = 4 - Math.floor(majPos / 5);
		var majCol = majPos % 5;

		var minPos = letters.indexOf(minorLetter);
		var minRow = 4 - Math.floor(minPos / 5);
		var minCol = minPos % 5;

		var easting = 500 * majCol +100 * minCol -1000;
		var northing = 500 * majRow +100 * minRow -500;

		// Add on the numeric bits
		var xAdd = 0 - gridRef.substring(0, gridRef.length / 2);
		var yAdd = 0 - gridRef.substring(gridRef.length / 2);

		//xAdd = $xAdd."e". (4 - strlen($xAdd));
		//$yAdd = $yAdd."e". (4 - strlen($yAdd));
		//	echo "E:$xAdd:N:$yAdd";	
		easting -= xAdd;
		northing -= yAdd;
		easting = easting *1000;
		northing = northing * 1000;
		return new Array(easting , northing);
		}
    this.setFragmentIdent = function(){

      if(navigator.userAgent.indexOf("KHTML") != -1){
        // konqueror and safari reload the page if the location is changed
        // which isn't wanted here - better not to bother with the bookmark/history functionality
        return;
      }
      if (this.mousedown == 1){
        if(ie){              
	      this.iframeStale=true;
        }
        return;
      }
      
      var l = window.location.toString();
	  if (l.indexOf("#") != -1){
		l = l.substring(0, l.indexOf("#"));
	  }
	  var frag = Math.round(this.easting)+":"+Math.round(this.northing)+":"+this.zoom;
	  window.location = l +'#'+ frag;
	  

    }

/// focus over specified easting/northing and zoom
	/// user should call this.drag(0,0) after this to force an initial refresh
	///

	this.centerMap = function(easting,northing) {
	this.easting=easting;
	this.northing= northing;

		
		if (this.zoom==0){
		  this.easting_quant = 7000000;
          this.northing_quant = 7000000;
          this.scale = 350/700000; // ( meters per tile? )
          this.tilewidth = 350;
		  this.tileheight = 350;
		} else if (this.zoom==1){
          this.easting_quant = 100000;
          this.northing_quant = 100000;
          this.scale = 350/100000; // ( meters per tile? )
          this.tilewidth = 350;
		  this.tileheight = 350;
        }  else if (this.zoom==2){
          this.easting_quant = 10000;
          this.northing_quant = 10000;
          this.scale = 350/10000; // ( meters per tile? )
          this.tilewidth = 350;
		  this.tileheight = 350;
        } else if (this.zoom==3){
          this.easting_quant = 1000;
          this.northing_quant = 1000;
          this.scale = 200/1000; // ( meters per tile? )
          this.tilewidth = 200;
		  this.tileheight = 200;
        } 
       // get user requested exact lon/lat
        this.easting_scaled = Math.round( easting / this.easting_quant);
        this.northing_scaled = Math.round( northing / this.northing_quant);
 	       
       // convert requested exact easting/lat to quantized easting lat (rounding down or up as best suits)
       this.easting_round = Math.round( this.easting / this.easting_quant) * this.easting_quant;
       this.northing_round = Math.round( this.northing / this.northing_quant ) * this.northing_quant;
		
       // calculate world extents [ this is the span of all tiles in easting/northing ]
       this.easting_min = this.easting_round - this.easting_quant;
       this.easting_max = this.easting_round + this.easting_quant;
       this.northing_min = this.northing_round - this.northing_quant;
       this.northing_max = this.northing_round + this.northing_quant;
		
		// set tiled region details [ this is the span of all tiles in pixels ]
		//center should be set to e/n
		
		this.centerx = this.displaywidth/2;
		this.centery = -this.displayheight/2 - this.tileheight;

		this.left = -this.tilewidth;
		this.right = this.tilewidth;
		this.top = -this.tileheight;
		this.bot = +this.tileheight;
		
		this.centerx -=  (this.easting - this.easting_round)  *   this.scale;
		this.centery -= (this.northing - this.northing_round)*  this.scale; 
		
	
	}


	

//this function is called by a timer
   this.urlCheck = function(){ 
   if (this.mousedown == 1){
    return;
   }
     var location = '';
     if (ie  && !this.iframeStale){
        location = document.frames[0].getLocation();
        location = '#' + location.substring(location.indexOf('?')+1);
        if (location=="#"){
          //if using a bookmark the url will contain the location not the iframe
          location = window.location.toString();
        }
      } else {
        location = window.location.toString(); 
      }
      if (location != this.oldLocation){
        
        var matches = location.match(/.*#([0-9]+):([0-9]+):([0-9]).*/);
	    if (matches == null){
	      // should always be valid - if not reset location
	      this.easting = 350000;
	      this.northing = 350000;
	      this.setZoom(0);        
	    } else {    
          easting = matches[1]-0;
          northing = matches[2]-0;
          zoom = matches[3]-0; 
        /*  
          if (ie && this.iframeStale && (this.zoom != zoom || easting != this.easting || northing != this.northing)){
            var frag = Math.round(easting)+":"+Math.round(northing)+":"+zoom;	  
            document.getElementById('ielocationholder').setAttribute('src', '/blank.html?' + frag);
            this.iframeStale=false;
          }
          */ 
          if (this.zoom != zoom){
            this.easting = easting;
            this.northing = northing;
	        this.setZoom(zoom);         
          } else if (easting != this.easting || northing != this.northing){
            this.centerMap(easting, northing);
            this.drag(0,0);
            this.setFragmentIdent();            
          }
        
          
        }
      }
      this.oldLocation = window.location.toString();
    }
    
    
    ///
	/// draw the spanning easting/northing range
	/// drag is simply the mouse delta in pixels
	///

	this.drag = function(dragx,dragy) {

		// move the drag offset
		this.centerx += dragx;
		this.centery -= dragy;

		// update where we think the user is actually focused
		this.easting -= dragx /this.scale;//  100000/350;
		this.northing += dragy /this.scale;//  100000/350; 
		this.setFragmentIdent();

 		// LocationURLd sections
		while( this.left > -this.centerx ){
			this.left -= this.tilewidth;
			this.easting_min -= this.easting_quant;
		}
		while( this.right + this.centerx   < this.displaywidth){
			this.right += this.tilewidth;
			this.easting_max += this.easting_quant;
		}
		while(this.centery > this.top-(this.displayheight - this.tileheight)) {
			this.top += this.tileheight;
			this.northing_min -= this.northing_quant;			
		}
		while(this.centery < this.bot - this.displayheight - this.tileheight /2) {
			this.bot -= this.tileheight;
			this.northing_max += this.northing_quant;
		}

        
		// prepare to walk the container and assure that all nodes are correct
		var containerx;
		var containery;


			containerx = this.left + this.centerx;
			containery = this.top - this.centery;
/*
document.debug.text.value = "easting_quant:" + this.easting_quant + "   northing_quant:" + this.northing_quant;
document.debug.text.value += "\ne:"+ Math.round(this.easting) + "   n:" + Math.round(this.northing) ;
document.debug.text.value += "\nemin:" + this.easting_min + "   nmin:" + this.northing_min;
document.debug.text.value += "\nemax:" + this.easting_max + "   nmax:" + this.northing_max;
document.debug.text.value += "\ncenterx:" + this.centerx + "   centery:" + this.centery;
document.debug.text.value += "\nright:" + this.right + "   left:" + this.left;
document.debug.text.value += "\ntop:" + this.top + "   bottom:" + this.bot;
document.debug.text.value += "\ncontainerx:" + containerx + "   containery:" + containery;
		
*/

		// walk all tiles and repair as needed
		// xxx one bug is that it walks the _entire_ width and height... not just visible.
		// xxx this makes cleanup harder and perhaps a bitmap is better

		var containeryreset = containery;
		
        for( var x = this.easting_min; x < this.easting_max ; x+= this.easting_quant  ) {
		
			
            for( var y = this.northing_min; y < this.northing_max ; y+= this.northing_quant ) {
			

  				var key = this.url +"map_x="+x+"&map_y="+y+"&z="+this.zoom;
                var gridRef = this.zoom == 0 ? 'England and Wales' : 'Grid Square ' +this.Ne2GridRef(x, y, (this.zoom -1)*2);

				// see if our tile is already present
				var node = document.getElementById(key);

			
				// create if not present
				if(!node) {
					
					node = document.createElement('img');					
					node.id = key;
					node.className = 'tile';
					node.style.position = 'absolute';
					//node.style.backgroundColor = 'darkblue';
					node.style.border='0';
					node.style.padding='0';
					node.style.margin='0';
					
					node.style.width = this.tilewidth + 'px';
					node.style.height = this.tileheight + 'px';
					node.style.left = containerx + 'px';
					node.style.top = containery + 'px';
					node.style.zIndex = 10; // to appear under the rss elements
					node.tile_engine = this;

					if (x<0 || y<0 || x> 700000 || y > 1300000){
					node.src='blank.gif';
					} else { 
					//make sure tiles get updated if grids have been submitted
					node.src = key + '&t='+this.lastUpdate;
					}
					node.alt = gridRef;
					node.title = gridRef;
					node.style.color = "#ffffff";
					this.tiles.appendChild(node);
				} else {
					node.style.left = containerx + 'px';
					node.style.top = containery + 'px';
				}

				containery -= this.tileheight-1;
						//	window.status = " " + containery;
			}
			containery = containeryreset;
			containerx += this.tilewidth -1;
		}
        
	}


	///
	/// intercept context events to minimize out-of-browser interruptions
	///
	
	this.event_context = function(e) {
		return false;
	}


	///
	/// catch mouse move events
	/// this routine _must_ return false or else the operating system outside-of-browser-scope drag and drop handler will interfere
	///

	this.event_mouse_move = function(e) {

		var hostengine = null;
		if( window && window.event && window.event.srcElement ) {
			hostengine = window.event.srcElement.tile_engine;
		} else if( e.target ) {
			hostengine = e.target.tile_engine;
		} else if( e.srcElement ) {
			hostengine = e.srcElement.tile_engine;
		}

		if( hostengine && hostengine.drag ) {
			if( hostengine.mousedown ) {
				if( netscape ) {
					hostengine.mousex = parseInt(e.pageX) + 0.0;
					hostengine.mousey = parseInt(e.pageY) + 0.0;
				} else {
					hostengine.mousex = parseInt(window.event.clientX) + 0.0;
					hostengine.mousey = parseInt(window.event.clientY) + 0.0;
				}
				hostengine.drag(hostengine.mousex-hostengine.lastmousex,hostengine.mousey-hostengine.lastmousey);
			}
			hostengine.lastmousex = hostengine.mousex;
			hostengine.lastmousey = hostengine.mousey;
		}

		// must return false to prevent operating system drag and drop from handling events
		return false;
	}
	
	this.cleanup = function(){
    var children=this.parent.childNodes;
    var l = children.length;
    // work from the far end - removing elements on the way
    // the positions at the front remain the same
    for(i=l-1;i>=0;i--){
      //remove old images (and the initial paragraph)
      if (children[i].tagName.toLowerCase() == 'img' || children[i].tagName.toLowerCase() == 'p'){
        this.parent.removeChild(children[i]);
           }  
           
    }

	var xmark=document.createElement('img');
	xmark.style.position = 'absolute';
	xmark.src="x.gif";
	xmark.alt="+";
	xmark.style.border='0';
	xmark.style.padding='0';
	xmark.style.margin='0';
	xmark.style.left = 294 + 'px';
	xmark.style.top = 215 + 'px';
	xmark.style.zIndex = 30; 
	xmark.title='the centre of the map';
	
	
    this.tiles.appendChild(xmark);
	}
	
	this.setZoom = function(zoom){
	  if (zoom == this.zoom){
	    return;
	  }
	  minzoom = 0;
	  maxzoom = 3;
	  this.zoom = zoom >= minzoom ? zoom : minzoom;
	  this.zoom = zoom <= maxzoom ? zoom : maxzoom;	
	  if (this.zoom == minzoom){
	     this.navout.setAttribute('disabled', 'disabled');
	     this.navout.style.color='#AAA';	     
	  } else {
	     this.navout.removeAttribute('disabled');
	     this.navout.style.color='black';
	  }
	  if (this.zoom == maxzoom){
	     this.navin.setAttribute('disabled', 'disabled');
	     //this.navin.style.backgroundColor='white';
	     this.navin.style.color='#AAA';
	     this.complete.removeAttribute('disabled');
	     this.complete.style.color='black';
	     this.norights.removeAttribute('disabled');
	     this.norights.style.color='black'; 
	  } else {
	     this.navin.removeAttribute('disabled');
	     this.navin.style.color='black';
	     this.complete.setAttribute('disabled', 'disabled');
	     this.complete.style.color='#AAA';
	     this.norights.setAttribute('disabled', 'disabled');
	     this.norights.style.color='#AAA';
	  }
	  
	  this.cleanup();
	  this.centerMap(this.easting,this.northing);
      this.drag(0,0);
	}
	
	this.zoomIn = function(){
	  this.setZoom(this.zoom +1);
	}
	
	this.zoomOut = function(){
	  this.setZoom(this.zoom -1);
	}
	

    this.url = '/dynamicmaps/mapimage100.php?';
  

  	this.oldlocation=null;
  	
  	//urlCheck will set default location if none given on url
    this.zoom=-1;  // so urlcheck updates
  	this.urlCheck();






	///
	/// catch mouse down
	///

	this.event_mouse_down = function(e) {

		var hostengine = null;
		if( window && window.event && window.event.srcElement ) {
			hostengine = window.event.srcElement.tile_engine;
		} else if( e.target ) {
			hostengine = e.target.tile_engine;
		} else if( e.srcElement ) {
			hostengine = e.srcElement.tile_engine;
		}

		if( hostengine ) {
			if( netscape ) {
				hostengine.mousex = parseInt(e.pageX) + 0.0;
				hostengine.mousey = parseInt(e.pageY) + 0.0;
			} else {
				hostengine.mousex = parseInt(window.event.clientX) + 0.0;
				hostengine.mousey = parseInt(window.event.clientY) + 0.0;
			}
			hostengine.lastmousex = hostengine.mousex;
			hostengine.lastmousey = hostengine.mousey;
			hostengine.mousedown = 1;
		}

		// must return false to prevent operating system drag and drop from handling events
		return false;
	}

	///
	/// catch double click (use to center map)
	///

	this.event_double_click = function(e) {

		var hostengine = null;
		if( window && window.event && window.event.srcElement ) {
			hostengine = window.event.srcElement.tile_engine;
		} else if( e.target ) {
			hostengine = e.target.tile_engine;
		} else if( e.srcElement ) {
			hostengine = e.srcElement.tile_engine;
		}

		if( hostengine ) {
			if( netscape ) {
				hostengine.mousex = parseInt(e.pageX) + 0.0;
				hostengine.mousey = parseInt(e.pageY) + 0.0;
			} else {
				hostengine.mousex = parseInt(window.event.clientX) + 0.0;
				hostengine.mousey = parseInt(window.event.clientY) + 0.0;
			}
			var dx = hostengine.mousex-(hostengine.displaywidth/2)-hostengine.parent_x;
			var dy = hostengine.mousey-(hostengine.displayheight/2)-hostengine.parent_y;
			hostengine.drag(-dx,-dy); // TODO smooth
		}

		// must return false to prevent operating system drag and drop from handling events
		return false;

	}

	///
	/// catch mouse up
	///

	this.event_mouse_up = function(e) {

		var hostengine = null;
		if( window && window.event && window.event.srcElement ) {
			hostengine = window.event.srcElement.tile_engine;
		} else if( e.target ) {
			hostengine = e.target.tile_engine;
		} else if( e.srcElement ) {
			hostengine = e.srcElement.tile_engine;
		}

		if( hostengine ) {
			if( netscape ) {
				hostengine.mousex = parseInt(e.pageX) + 0.0;
				hostengine.mousey = parseInt(e.pageY) + 0.0;
			} else {
				hostengine.mousex = parseInt(window.event.clientX) + 0.0;
				hostengine.mousey = parseInt(window.event.clientY) + 0.0;
			}
			
		
	        hostengine.mousedown = 0;
			hostengine.setFragmentIdent();
			
		}
		

		// must return false to prevent operating system drag and drop from handling events
		return false;
	}

	///
	/// catch mouse out
	///

	this.event_mouse_out = function(e) {

		var hostengine = null;
		if( window && window.event && window.event.srcElement ) {
			hostengine = window.event.srcElement.tile_engine;
		} else if( e.target ) {
			hostengine = e.target.tile_engine;
		} else if( e.srcElement ) {
			hostengine = e.srcElement.tile_engine;
		}

		if( hostengine ) {
			if( netscape ) {
				hostengine.mousex = parseInt(e.pageX) + 0.0;
				hostengine.mousey = parseInt(e.pageY) + 0.0;
			} else {
				hostengine.mousex = parseInt(window.event.clientX) + 0.0;
				hostengine.mousey = parseInt(window.event.clientY) + 0.0;
			}
			
			hostengine.mousedown = 0;
		   // hostengine.setFragmentIdent();
		}

		// must return false to prevent operating system drag and drop from handling events
		return false;
	}

	///
	/// zoom a tile group
	///
	this.tile_engine_zoomout = function(e) {
	
	
		var hostengine = this.tile_engine;

		if( window && window.event && window.event.srcElement ) {
			hostengine = window.event.srcElement.tile_engine;
		} else if( e.target ) {
			hostengine = e.target.tile_engine;
		} else if( e.srcElement ) {
			hostengine = e.srcElement.tile_engine;
		}

		if( hostengine ) {
		
	      hostengine.zoomOut();
	      hostengine.drag(0,0);
		
		}

    return false; // or safari falls over

	}

	///
	/// zoom a tile group
	///
	this.tile_engine_zoomin = function(e) {

		var hostengine = this.tile_engine;

		if( window && window.event && window.event.srcElement ) {
			hostengine = window.event.srcElement.tile_engine;
		} else if( e.target ) {
			hostengine = e.target.tile_engine;
		} else if( e.srcElement ) {
			hostengine = e.srcElement.tile_engine;
		}

		if( hostengine ) {
		  hostengine.zoomIn();
          hostengine.drag(0,0);
		}
  
    return false; // or safari falls over
	}

	///
	/// register new handlers to catch desired events
	///

	this.event_catch = function(component) {

		if( netscape ) {
			window.captureEvents(Event.MOUSEMOVE);
			window.captureEvents(Event.KEYPRESS);
		}

		
		if( component ) {
			component.onmousemove = this.event_mouse_move;
			component.onmousedown = this.event_mouse_down;
			component.onmouseup = this.event_mouse_up;
			component.onmouseout = this.event_mouse_out;
			//component.onkeypress = this.event_key;
			window.ondblclick = this.event_double_click;
		}

		if( window ) {
			window.onmousemove = this.event_mouse_move;
			//window.onmousedown = this.event_mouse_down;
			window.onmouseup = this.event_mouse_up;
			window.onmouseout = this.event_mouse_out;
			//window.onkeypress = this.event_key;
			window.ondblclick = this.event_double_click;
		}

		//document.onkeypress = this.event_key;
		//document.addEventListener('keypress', this.key_handler, true);
	}



	

	this.getNodeValue = function(obj, nodeName) {
	    var st = "";
	    if (obj.hasChildNodes()) {
		var i = 0;
		while ((st == "") && (i < obj.childNodes.length)) {
		    st = (obj.childNodes[i].nodeName == nodeName) ? obj.childNodes[i].firstChild.nodeValue : this.getNodeValue(obj.childNodes[i], nodeName);
		    i++;
		}
	    }
	    return st;
	}

	
	

	

	// attach event capture parent div
	this.event_catch(this.parent);





	this.parent.appendChild(this.navform);
	
	this.norights.onclick = norights;
	this.complete.onclick = complete;
	 this.navout.onclick = this.tile_engine_zoomout;
 this.navin.onclick = this.tile_engine_zoomin;
}