//Variable definitions
    var drawSatus = false;
    var isClickZoom = false;
    var iniPoint;
    var x_init=0; 
    var y_init=0; 
    var rectWidth=0; 
    var rectHeight=0; 
    var rectStatus = false; 
    
    

    //Usefull function to get cross browser css style
    function getStyle(el,styleProp){
  
   		var x = document.getElementById(el);
  		    
      if (window.getComputedStyle)    // Mozilla
  		  var y = window.getComputedStyle(x,null).getPropertyValue(styleProp);
      else if (x.currentStyle){       // IExplorer 6
  		  if (styleProp!='clip'){
          while (styleProp.indexOf('-') != -1){
            // clear '-' and  UpperCase  first next letters : background-color => backgroundColor
            var letter = styleProp.charAt(styleProp.indexOf('-')+1);
           	styleProp = styleProp.replace(/-\S{1}/,letter.toUpperCase());
          }
  				var y = eval('x.currentStyle.' + styleProp);
  			}
  			else{
          // Return clip style  in mozilla format : rect(top,right,bottom,left)
  				ctop=x.currentStyle.clipTop;
  				cright=x.currentStyle.clipRight;
  				cbottom=x.currentStyle.clipBottom;
  				cleft=x.currentStyle.clipLeft;
  				y='rect('+ctop+','+cright+','+cbottom+','+cleft+')';
  			}
   		}
  		return y;
    }

    //box zoom function called from above see control/button code
    function boxzoomHandler(aMap){
	  //*****************Box Zoom Style********************
      //Init
      //alert("init!!");
      
      document.getElementById("map").onmousemove = rectMouseMove;
      document.getElementById("map").onclick = rectClick;
      
      //Define rectangle element (div))
      var rect = document.createElement("div");
      rect.setAttribute("id","rectangle");
      //rect.setAttribute("class","rectangle");
      document.getElementById("map").appendChild(rect);
		  //********box zoom style for mouse end ***
		  
      //activate click and zoom function
      isClickZoom = true;
      aMap.disableDragging();
      document.body.style.cursor = "crosshair";   
    }

//**********
      //******************Click event handler (on DOM Element)********************
      function mouseX(evt) 
      {
        if (evt.pageX) return evt.pageX;
      	else if (evt.clientX)
          return evt.clientX + (document.documentElement.scrollLeft ?
         	  document.documentElement.scrollLeft :
         	  document.body.scrollLeft);
      	else return null;
      }
      
      function mouseY(evt) 
      {
      	if (evt.pageY) return evt.pageY;
      	else if (evt.clientY)
         	return evt.clientY + (document.documentElement.scrollTop ?
         		document.documentElement.scrollTop :
         		document.body.scrollTop);
      	else return null;
      }
      
      function rectClick(e) 
      {
        if (!e) var e = window.event;	// e gives access to the event in all browsers
      
        //Check status of rectangle
        if (!isClickZoom) return;
        
        if (!rectStatus)
        {
      
          //This is 1st cklick (rectangle is not being drawn)
          //alert ("1st click selectrect.js");
        
          //Store Mouse coordinates
          x_init=mouseX(e)- parseInt(document.getElementById("map").offsetLeft); 
          y_init=mouseY(e)- parseInt(document.getElementById("map").offsetTop); 
           
          //Rectangle Init 
          rectStatus=true;
          rectMouseMove(e);
          //Show it !
          document.getElementById("rectangle").style.visibility="visible";
          //alert (document.getElementById("rectangle").style.visibility);
        }
        else
        {
          //This is 2nd cklick (rectangle is being drawn)
          //alert ("2nd click rect");
          
          //Hide rectangle
          document.getElementById("rectangle").style.visibility="hidden"; 
          rectStatus=false;
          isClickZoom = false;
          map.enableDragging();
          document.body.style.cursor = "default";
        }
      
      }
      
      function rectMouseMove(e){
        
        if (!isClickZoom) return;
        if (!rectStatus) return;		// Not drawing rectangle
      
        if (!e) var e = window.event;	// e gives access to the event in all browsers
      
        //Store Mouse coordinates (+-5 : offset to capture click event on the map)
        var CurX = mouseX(e)- parseInt(document.getElementById("map").offsetLeft);
        var CurY = mouseY(e)- parseInt(document.getElementById("map").offsetTop);
        (CurX<x_init)? CurX +=5:CurX -=5;
        (CurY<y_init)? CurY +=5:CurY -=5;
                  
        //Store X and width
        rectWidth=Math.abs(CurX - x_init);
        if (CurX >= x_init) 
        { 
      
       	  document.getElementById('rectangle').style.left = x_init+"px"; 
        } 
        else 
        { 
       	  document.getElementById('rectangle').style.left = CurX+"px"; 
        } 
        document.getElementById('rectangle').style.width = rectWidth+"px";
        //alert ("mousemove4");
      
        //Store Y and height
        rectHeight=Math.abs(CurY - y_init); 
        if (CurY >= y_init) 
        { 
        document.getElementById("rectangle").style.top = y_init+"px"; 
        } 
        else 
        { 
          document.getElementById("rectangle").style.top = CurY+"px"; 
        } 
        document.getElementById("rectangle").style.height = rectHeight+"px";
        
      }