Index: /mnt/d/eclipse/workspace/mapbuilder-ol-integration/mapbuilder/lib/widget/Graticule.js
===================================================================
--- /mnt/d/eclipse/workspace/mapbuilder-ol-integration/mapbuilder/lib/widget/Graticule.js	(revision 2824)
+++ /mnt/d/eclipse/workspace/mapbuilder-ol-integration/mapbuilder/lib/widget/Graticule.js	(working copy)
@@ -12,7 +12,6 @@
 
 	ButtonBase.apply(this, new Array(widgetNode, model));
 
-	this.mapContainerId=widgetNode.selectSingleNode("mb:mapContainerId").firstChild.nodeValue;
 	this.display=false;
 	this.color=widgetNode.selectSingleNode("mb:color").firstChild.nodeValue;
 	
@@ -19,10 +18,8 @@
 	
 	/**
    * Remove divs
-   * @param objRef Pointer to this object.
    */
 	this.remove = function(objRef) {
-	
 	  try{
 			  var i = 0;
 			  var div = objRef.map;
@@ -43,7 +40,6 @@
    * @param objRef Pointer to this object.
    */
 	this.getBbox= function(objRef) {
-	
 			var bbox=new Object();
 			bbox.ll=new Object();
 			bbox.ur=new Object();
@@ -129,10 +125,8 @@
 
 	/* Draw graticules
 	*
-	*@param objRef pointer to this object.
 	*/
 	this.draw= function(objRef){
-
 		//Delete old graticule
 		objRef.remove(objRef);
 		
@@ -221,7 +215,7 @@
 		  var y = objRef.fromLatLngToDivPixel(objRef,b+dLat+dLat,l).y + 2;//coord for label
 		  
 		  //pane/layer to write on
-		  var mapDiv = objRef.map;//objRef.map_.getPane(G_MAP_MARKER_SHADOW_PANE);
+		  var mapDiv = objRef.targetContext.map.div.getElementsByTagName('div')[1];//objRef.map_.getPane(G_MAP_MARKER_SHADOW_PANE);
 		  
 		  var lo = l;
 		  
@@ -239,11 +233,12 @@
 				  	
 				 //label	 
 				 var d = document.createElement("DIV");
+				 d.style.zIndex = 10000;
 				 x = p.x + 3;
 				 
 				 d.style.position = "absolute";
-		         d.style.left = x.toString() + "px";
-		         d.style.top = y.toString() + "px";
+		     d.style.left = x.toString() + "px";
+		     d.style.top = y.toString() + "px";
 				 d.style.color = objRef.color;
 				 d.style.fontFamily='Arial';
 				 d.style.fontSize='x-small';
@@ -307,6 +302,7 @@
 			 
 			 //label
 			 var d = document.createElement("DIV");
+			 d.style.zIndex = "10000";
 			 y = p.y + 2;
 			 d.style.position = "absolute";
 			 d.style.left =x.toString() + "px";
@@ -350,8 +346,8 @@
 		var xy=objRef.proj.Forward(new Array(lon,lat));
 		var platlon=new Object();
 		
-		platlon.x=objRef.targetModel.extent.getPL(xy)[0];
-		platlon.y=objRef.targetModel.extent.getPL(xy)[1];
+		platlon.x=objRef.targetContext.extent.getPL(xy)[0];
+		platlon.y=objRef.targetContext.extent.getPL(xy)[1];
 		return platlon;
 	}
 	
@@ -364,6 +360,7 @@
 	this.createVLine = function (objRef,x) {
 
 		var div = document.createElement("DIV");
+		div.style.zIndex = "10000";
 		div.style.position = "absolute";
 		div.style.overflow = "hidden";
 		div.style.backgroundColor = objRef.color;
@@ -383,6 +380,7 @@
 	this.createHLine = function(objRef,y) {
 
 		var div = document.createElement("DIV");
+		div.style.zIndex = "10000";
 		div.style.position = "absolute";
 		div.style.overflow = "hidden";
 		div.style.backgroundColor = objRef.color;
@@ -406,6 +404,7 @@
 			var t = objRef.fromLatLngToDivPixel(objRef,lat,180);		
 		
 			var div = document.createElement("DIV");
+			div.style.zIndex = "10000";
 			div.style.position = "absolute";
 			div.style.overflow = "hidden";
 			div.style.backgroundColor = objRef.color;
@@ -431,11 +430,11 @@
 		*@param objRef pointer to this object.
 		*/ 
 		this.init= function (objRef){
-			objRef.width=parseInt(objRef.targetModel.getWindowWidth());
-			objRef.height=parseInt(objRef.targetModel.getWindowHeight());
+			objRef.width=parseInt(objRef.targetContext.getWindowWidth());
+			objRef.height=parseInt(objRef.targetContext.getWindowHeight());
 			
-			objRef.bbox=objRef.targetModel.getBoundingBox();
-			objRef.proj=new Proj( objRef.targetModel.getSRS());
+			objRef.bbox=objRef.targetContext.getBoundingBox();
+			objRef.proj=new Proj( objRef.targetContext.getSRS());
 		
 			if (objRef.bbox[1]<0)
 				if(objRef.bbox[3]<0)
@@ -452,10 +451,9 @@
 					objRef.diffLon=objRef.bbox[2]-objRef.bbox[0];
 			else
 				objRef.diffLon=objRef.bbox[2]+objRef.bbox[0];
-		
-			
-		  	objRef.draw(objRef);
 
+			objRef.draw(objRef);
+		
 }
 
 		/*Display graticule when click on button
@@ -469,13 +467,13 @@
 		  
 		if(selected && objRef.display==false)
 		 { 	
-		 	this.targetModel.addListener("bbox", this.init, this );
+		 	this.targetContext.addListener("bbox", this.init, this );
 		 	objRef.display=true;
-		 	objRef.map = document.getElementById(objRef.mapContainerId);
+		 	objRef.map = objRef.targetContext.map.div.getElementsByTagName('div')[1];
 			objRef.init(objRef);
 		}
 		else if (objRef.display==true)
-		{	this.targetModel.removeListener("bbox", this.init, this );
+		{	this.targetContext.removeListener("bbox", this.init, this );
 			objRef.display=false;
 			objRef.remove(objRef);
 		}      
@@ -480,4 +478,24 @@
 			objRef.remove(objRef);
 		}      
 	}
+
+  /**
+   * Creates the OpenLayers control for this button.
+   * This method will be called by ButtonBase when
+   * MapPaneOL is ready to have buttons added.
+   * The control should be defined in this method.
+   * @type function
+   * @param objRef reference to this object.
+   * @return class (not instance!) of the OL control.
+   */
+  this.createControl = function(objRef) {
+    objRef.init(objRef);
+    var Control = OpenLayers.Class.create();
+    Control.prototype = OpenLayers.Class.inherit( OpenLayers.Control, {
+      CLASS_NAME: 'mbControl.'+objRef.id,
+      type: OpenLayers.Control.TYPE_TOGGLE,
+    });
+    return Control;
+  }
+  
 }