function kaKeymap(oKaMap, szID ) {
    this.kaMap = oKaMap;
    this.domObj = this.kaMap.getRawObject(szID);
    this.domObj.kaKeymap=this;
    this.width = getObjectWidth(szID)+"px";
    this.height = getObjectHeight(szID)+"px";
    this.pxExtent =null;
    this.domExtents = null;
    this.aExtents = null;
    this.domImg = null;
    this.imgSrc = null;
    this.imgWidth = null;
    this.imgHeight = null;

    this.cellWidth = null;
    this.cellHeight = null;
    this.initialExtents = null;
    
    this.lastSearchDate = null;
	this.chronoUpdate = null;

    this.domObj.ondblclick= this.onclick;

    if ( this.domObj.captureEvents) {
        this.domObj.captureEvents(Event.DBLCLICK);
    }
    
    this.kaMap.registerForEvent( KAMAP_INITIALIZED, this, this.initialize );
    
    //this.kaMap.registerForEvent( KAMAP_EXTENTS_CHANGED, this, function(){alert("extents changed")});
    //this.kaMap.registerForEvent( KAMAP_INITIALIZED, this, function(){alert("init")});
};

kaKeymap.prototype.initialize = function() {
    this.firstCall = true;
    this.pxExtent = null;
    this.initialExtents = this.kaMap.getGeoExtents();
    var szURL = "map="+this.kaMap.currentMap;
    szURL+="&extents="+dataOPO['LEFT']+','+dataOPO['BOTTOM']+','+dataOPO['RIGHT']+','+dataOPO['TOP'];
	
    this.kaMap.registerForEvent( KAMAP_EXTENTS_CHANGED, this, this.update );
	
    if (this.kaMap.getCurrentScale()<=300000) {
    	call("/OPO/customKeymap.php?"+szURL, this, this.draw);
    }
};

kaKeymap.prototype.draw = function( szResult ) {
    try{
	    eval( szResult );
	}
	catch(e){
		//alert("eval for keymap failed");
		return;	
	}
    this.cellWidth = (this.aExtents[2] - this.aExtents[0]) / this.imgWidth;
    this.cellHeight = (this.aExtents[3] - this.aExtents[1]) / this.imgHeight;
    //clear old keymap
    for(var i = this.domObj.childNodes.length - 1; i >= 0; i--)
    this.domObj.removeChild (this.domObj.childNodes[i]);
    
    this.domObj.style.width = this.imgWidth + "px";
    this.domObj.style.height = this.imgHeight + "px";
    
    //create an image to hold the keymap
    this.domImg = document.createElement( 'img' );
    this.domImg.src = this.imgSrc; //+ '&map='+this.kaMap.currentMap;
    this.domImg.width = this.imgWidth;
    this.domImg.height = this.imgHeight;
    this.domObj.appendChild( this.domImg );
    
	//create a div to track the current extents
    this.domExtents = document.createElement( 'div' );
	this.domExtents.kaKeymap = this;
    this.domExtents.id="keymapDomExtents";
    this.domExtents.style.position = 'absolute';
    this.domExtents.style.border = '2px solid red';
    this.domExtents.style.top = "1px";
    this.domExtents.style.left = "1px";
    this.domExtents.style.width = "1px";
    this.domExtents.style.height = "1px";
    this.domExtents.style.backgroundColor = 'transparent';
    this.domExtents.style.visibility = 'visible';
	this.domObj.appendChild(this.domExtents);

    //create a div to allow click/drag of extents for nav
    this.domEvent = document.createElement( 'div' );
    this.domEvent.kaKeymap=this;

    this.domEvent.onmousedown = this.mousedown;
    this.domEvent.onmouseup = this.mouseup;
    this.domEvent.onmousemove = this.mousemove;
    this.domEvent.onmouseout = this.mouseup;
    if (this.domEvent.captureEvents) {
       this.domEvent.captureEvents(Event.MOUSEDOWN);
       this.domEvent.captureEvents(Event.MOUSEUP);
       this.domEvent.captureEvents(Event.MOUSEMOVE);
       this.domEvent.captureEvents(Event.MOUSEOUT);
    }

    this.domEvent.style.position = 'absolute';
    this.domEvent.id = 'keymapDomEvent';
    this.domEvent.style.border = '2px solid red';
    this.domEvent.style.top = "1px";
    this.domEvent.style.left = "1px";
    this.domEvent.style.width = "1px";
    this.domEvent.style.height = "1px";
    this.domEvent.style.backgroundColor = 'white';
    this.domEvent.style.visibility = 'visible';
    this.domEvent.style.opacity=0.01;
    this.domEvent.style.mozOpacity=0.01;
    this.domEvent.style.filter = "Alpha(opacity=0.01)";
    this.domObj.appendChild(this.domEvent);

    //changed use an image insetd divs to drow the cross air
    var d = document.createElement( 'img' );
    d.id="keymapCrossImage";
    d.src = "/images/cross.png";
    d.style.position='absolute';
	d.style.top = '0px';
	d.style.left = '0px';
    d.style.width = "19px";
    d.style.height = "19px";
    d.style.visibility = 'hidden';

    this.domExtents.appendChild(d);
	this.domCross = d;

	this.updateRedViewer(this.initialExtents);
};

kaKeymap.prototype.update = function( eventID, extents ) {
	if (this.kaMap.getCurrentScale()>300000) {
		return true;
	}
	var t = this;
	if (!this.aExtents || !this.domExtents) {
        this.initialExtents = extents;
		if (this.firstCall) {
			this.firstCall = false;
			var left = extents[0];
			var right = extents[2];
			var top = extents[3];
			var bottom = extents[1];
			var szURL = "map="+this.kaMap.currentMap;
			szURL += "&extents="+left+','+bottom+','+right+','+top;
			
			call("/OPO/customKeymap.php?"+szURL, this, this.draw);
		}
		return;
	}
    
    // set a timer to avoid calling the php file too much (when panning with keys for example)
	var goOn = true;
	if(this.lastSearchDate){
		var now = (new Date()).getTime();
		if(now - this.lastSearchDate > 1200){
			goOn = true;
		}
		else{
			goOn = false;
			clearTimeout(this.chronoUpdate);
			this.chronoUpdate = setTimeout(function(){t.update("fake_eventID", t.kaMap.getGeoExtents())}, 1000);
		}
	}
	

    if (eventID && goOn && this.kaMap.getCurrentScale()<=300000) {
		var width = extents[2] - extents[0];
		var height = extents[3] - extents[1];
		
		var left = extents[0];
		var right = extents[2];
		var top = extents[3];
		var bottom = extents[1];
		
		this.initialExtents = extents;
		var szURL = "map="+this.kaMap.currentMap;
		szURL += "&extents="+left+','+bottom+','+right+','+top;
		
		this.lastSearchDate = (new Date()).getTime();
		call("/OPO/customKeymap.php?"+szURL, this, this.draw);
    }
    else {
    	this.updateRedViewer(extents);
    }
    
}

kaKeymap.prototype.updateRedViewer = function(extents){
    var left = (extents[0] - this.aExtents[0]) / this.cellWidth;
    var width = (extents[2] - extents[0]) / this.cellWidth;
    var top = -1 * (extents[3] - this.aExtents[3]) / this.cellHeight;
    var height = (extents[3] - extents[1]) / this.cellHeight;

    this.pxExtent = new Array(left,top,width,height);
    this.domExtents.style.top = parseInt(top+0.5)+"px";
    this.domExtents.style.left = parseInt(left+0.5)+"px";
    this.domEvent.style.top = parseInt(top+0.5)+"px";
    this.domEvent.style.left = parseInt(left+0.5)+"px";
    
    // show crosshair and center on center of image
    if (parseInt(width+0.5) < parseInt(this.domCross.style.width) ||
			parseInt(height+0.5) < parseInt(this.domCross.style.height) ) {
		
		var ix = parseInt(this.domCross.style.width)/2;
		var iy = parseInt(this.domCross.style.height)/2;
		
		var ox = width/2;
		var oy = height/2;
		
		this.domExtents.style.width = this.domCross.style.width;
		this.domExtents.style.height = this.domCross.style.height;
		this.domEvent.style.width = this.domCross.style.width;
		this.domEvent.style.height = this.domCross.style.height;
		this.domExtents.style.top = (parseInt(this.domExtents.style.top) -iy + oy) + 'px';
		this.domExtents.style.left = (parseInt(this.domExtents.style.left) -ix  + ox) + 'px';
		this.domEvent.style.top = (parseInt(this.domEvent.style.top) -iy + oy) + 'px';
		this.domEvent.style.left = (parseInt(this.domEvent.style.left) -ix + ox) + 'px';
		this.domCross.style.visibility = 'visible';
		this.domExtents.style.border = '1px solid white';
		this.domEvent.style.border = 'none';
    }
    else { // else it's not the crosshair but the rectangle
		this.domExtents.style.width = parseInt(width+0.5) + "px";
		this.domExtents.style.height = parseInt(height+0.5) + "px";
		this.domEvent.style.width = parseInt(width+0.5) + "px";
		this.domEvent.style.height = parseInt(height+0.5) + "px";
		this.domCross.style.visibility = 'hidden';
		this.domExtents.style.border = '2px solid red';
		this.domEvent.style.border = '2px solid red';
		this.domEvent.style.visibility = 'visible';
		this.domExtents.style.visibility = 'visible';
	}
};

/*click event on div kaKeymap*/
kaKeymap.prototype.onclick = function(e) {
    e = (e)?e:((event)?event:null); 
    this.kaKeymap.centerMap(e);
};

/*call aPixPos to calculate geografic position of click and recenter kamap map*/
kaKeymap.prototype.centerMap = function(e) {
    var pos= this.aPixPos( e.clientX, e.clientY );
    this.kaMap.zoomTo(pos[0],pos[1]);
};

/**
 * kaKeymap_aPixPos( x, y )
 *
 * try to calculate geoposition in kaKeymap
 *
 * x - int, the x page coord
 * y - int, the y page coord
 *
 * returns an array with geo positions
 */
kaKeymap.prototype.aPixPos = function( x, y ) {
    var obj = this.domObj;
    var offsetLeft = 0;
    var offsetTop = 0;
    while (obj) {
        offsetLeft += parseFloat(obj.offsetLeft);
        offsetTop += parseFloat(obj.offsetTop);
        obj = obj.offsetParent;
    }
    var pX = x  - offsetLeft  ;
    var pY = y  -  offsetTop  ;
    pX = parseFloat(this.aExtents[0] + (this.cellWidth *pX)); 
    pY = parseFloat(this.aExtents[3] - (this.cellHeight *pY));
    return [pX,pY];
};

kaKeymap.prototype.mousedown = function(e) {
     e = (e)?e:((event)?event:null);
     
     this.kaKeymap.domEvent.style.top= "0px";
     this.kaKeymap.domEvent.style.left= "0px";
     this.kaKeymap.domEvent.style.width =this.kaKeymap.domObj.style.width;
     this.kaKeymap.domEvent.style.height = this.kaKeymap.domObj.style.height;
     this.kaKeymap.domExtents.init=1;
     this.kaKeymap.domExtents.oX=e.clientX;
     this.kaKeymap.domExtents.oY=e.clientY;
     var amount= 50;
     this.kaKeymap.domExtents.style.backgroundColor = 'pink';
     this.kaKeymap.domExtents.style.opacity=amount/100;

//     this.kaKeymap.domObj.style.mozOpacity = amount/100;
    //Nasty IE effect (or bug?) when you apply a filter
    //to a layer, it clips the layer and we rely on the
    //contents being visible outside the layer bounds
    //for 'railroading' the tiles
    if (this.kaKeymap.kaMap.isIE4) {
        this.kaKeymap.domExtents.style.filter = "Alpha(opacity="+amount+")";        
    }
    e=null;
};

kaKeymap.prototype.mouseup = function(e) {
    if(this.kaKeymap.domExtents.init) {
        e = (e)?e:((event)?event:null); 
        this.kaKeymap.domExtents.style.backgroundColor = 'transparent';
        this.kaKeymap.domExtents.style.opacity=1;
        if (this.kaKeymap.kaMap.isIE4) {
            this.kaKeymap.domExtents.style.filter = "Alpha(opacity=100)";
        } 
        this.kaKeymap.domExtents.init=0;
        var cG=this.kaKeymap.geoCentCoord();
        this.kaKeymap.kaMap.zoomTo(cG[0],cG[1]);
    }
};

kaKeymap.prototype.mousemove = function(e) {
    e = (e)?e:((event)?event:null); 
    if(this.kaKeymap.domExtents.init) {
        var xMov=(this.kaKeymap.domExtents.oX-e.clientX);
        var yMov=(this.kaKeymap.domExtents.oY-e.clientY);

        var oX=this.kaKeymap.pxExtent[0];
        var oY=this.kaKeymap.pxExtent[1];
        var nX = oX-xMov;
        var nY = oY-yMov;
        this.kaKeymap.domExtents.oX= e.clientX;
        this.kaKeymap.domExtents.oY= e.clientY;
        this.kaKeymap.pxExtent[0] = nX;
        this.kaKeymap.pxExtent[1] = nY;
        if(this.kaKeymap.domCross.style.visibility == 'visible') {
            var ix = parseInt(this.kaKeymap.domCross.style.width)/2;
            var iy = parseInt(this.kaKeymap.domCross.style.height)/2;
            var ox =  this.kaKeymap.pxExtent[2]/2;
            var oy = this.kaKeymap.pxExtent[3]/2;

            this.kaKeymap.domExtents.style.top = parseInt((nY+0.5)-iy+oy) + "px";
            this.kaKeymap.domExtents.style.left = parseInt((nX+0.5)-ix+ox) + "px";
        } else {
            this.kaKeymap.domExtents.style.top = parseInt(nY+0.5) + "px";
            this.kaKeymap.domExtents.style.left = parseInt(nX+0.5) + "px";
        }
    }
};

/**
 * calculate the geographic position of div's center
 * Use pxExtent left top width height because the 
 * div's top left width and heigth (casted to int)
 * this avoid in calculation error due to ins casting
 **/
kaKeymap.prototype.geoCentCoord = function() {
       var cpX = this.pxExtent[0] + this.pxExtent[2]/2;
       var cpY = this.pxExtent[1] +  this.pxExtent[3]/2;
       var cX = this.aExtents[0] + (this.cellWidth *cpX);
       var cY = this.aExtents[3] - (this.cellHeight *cpY); 
      return [cX,cY];
};