var jg;

var xStart = 79.5;
var xEnd = 60.5;
var yStart = 23;
var yEnd = 37.5;

var theWidth;
var theHeight;
var minLat, minLong, maxLat, maxLong, radx, rady, radius
/************************************************************/
function draw(which)
{
  
  if (!jg)
  {
    jg = new jsGraphics("myCanvas");
  }
  theWidth = document.getElementById("myCanvas").style.width;
  theHeight = document.getElementById("myCanvas").style.height;
  theWidth = theWidth.substring(0,theWidth.length-2);
  theHeight = theHeight.substring(0,theHeight.length-2)
  
  DrawTheMap();
  
  var thePoints = document.getElementById("Polygon").value;
  if (thePoints)
    DrawThePoly(thePoints);
  
  if (which == 1){
      
	  if (minLat != "" && minLong != "" && maxLat != "" && maxLong != ""){
	     
	    DrawTheRect(minLat, minLong, maxLat, maxLong );
	  }
	  
  }else if (which == 2){
     document.getElementById("filterType2").checked = true;
	 
    // var thePoints = document.getElementById("Polygon").value;
    // if (thePoints)
    //   DrawThePoly(thePoints);
  }else if (which == 3){
     if (radx != "" && rady != "" && radius != ""){
	     DrawTheCirc(radx, rady, radius);
     }	 
  }  
}
/************************************************************/
function returnScale()
{
  var xDiff = xEnd - xStart;
  var yDiff = yEnd - yStart;

  var xScale = theWidth/xDiff;
  var yScale = theHeight/yDiff;

  return [xScale,yScale];
}
/************************************************************/
function DrawTheMap()
{
  var scale = returnScale();
  var thePoints = getMap();
  var splittedPoints = thePoints.split(",");

  var xs = new Array(splittedPoints.length);
  var ys = new Array(splittedPoints.length);

  for (i=0; i < splittedPoints.length; i++)
  {
    xandy = splittedPoints[i].split(" ");
    xs[i] = theWidth - Math.round((xandy[0]-xStart) * scale[0]);
    ys[i] = theHeight - Math.round((xandy[1]-yStart) * scale[1]);
  }

  jg.setColor("green"); 

  jg.clear();

  jg.drawPolygon(xs, ys);
  jg.paint();    
}
/************************************************************/
function DrawThePoly(Points)
{
  Draw = '1';
  thePoints = Points;
  var scale = returnScale();
   
  var splittedPoints = thePoints.split(",");

  var xs = new Array(splittedPoints.length);
  var ys = new Array(splittedPoints.length);

  for (i=0; i < splittedPoints.length; i++)
  {
    xandy = splittedPoints[i].split(" ");
    xs[i] = theWidth - Math.round((xandy[0]-xStart) * scale[0]);
    ys[i] = theHeight - Math.round((xandy[1]-yStart) * scale[1]);
  }

  jg.setColor("red"); 

  if (Draw == '1'){
   jg.drawPolygon(xs, ys);
  }
  else if (Draw == '2'){
   jg.fillPolygon(xs, ys);
  }
  jg.paint();    
}
/************************************************************/
function DrawTheRect(mnLat, mnLong, mxLat, mxLong ){

  var scale = returnScale();
  mnLong = theWidth - Math.round((mnLong-xStart) * scale[0])
  mnLat = theHeight - Math.round((mnLat-yStart) * scale[1]);
  mxLong = theWidth - Math.round((mxLong-xStart) * scale[0])
  mxLat = theHeight - Math.round((mxLat-yStart) * scale[1]);
  
   jg.setColor("blue"); 
   rectWidth = mxLong - mnLong;
   rectHeight = mnLat - mxLat;
   jg.drawRect(mnLong, mxLat, rectWidth, rectHeight);
   jg.paint();  
   
}
/************************************************************/
function DrawTheCirc(rx, ry, rad){

  var scale = returnScale();
  rad = (rad/100) * scale[1]
  
  rx = theWidth - Math.round((rx-xStart) * scale[0])-(rad/2);
  ry = theHeight - Math.round((ry-yStart) * scale[1])-(rad/2);
  
  
  jg.setColor("blue"); 
  
  jg.drawEllipse(rx, ry, rad, rad);
  
  jg.paint();  
   
}
/************************************************************/
function toClear(any)
{
  if (jg)
  {
    jg.clear();
  }
}
/************************************************************/
function zoomin(){

  theWidthDiv = document.getElementById("myCanvas").style.width;
  theWidthDiv = theWidthDiv.substring(0, theWidthDiv.length-2);
  
  theHeightDiv = document.getElementById("myCanvas").style.height;
  theHeightDiv = theHeightDiv.substring(0, theHeightDiv.length-2);
  
  document.getElementById("myCanvas").style.width = (theWidthDiv-0)+75;
  document.getElementById("myCanvas").style.height = (theHeightDiv-0)+75;

  toClear();
  if (jg){
    draw()
  } 

}
/************************************************************/
function zoomout(){


  theWidthDiv = document.getElementById("myCanvas").style.width;
  theWidthDiv = theWidthDiv.substring(0, theWidthDiv.length-2);
  
  theHeightDiv = document.getElementById("myCanvas").style.height;
  theHeightDiv = theHeightDiv.substring(0, theHeightDiv.length-2);
  
  if (theWidth > 350 && theHeight > 350){
    document.getElementById("myCanvas").style.width = (theWidthDiv-0)-75;
    document.getElementById("myCanvas").style.height = (theHeightDiv-0)-75;
  }
  
  toClear();
  if (jg){
   draw()
  }
}
/************************************************************/
function zoomfull(){

  document.getElementById("myCanvas").style.width = 345;
  document.getElementById("myCanvas").style.height = 345;
  
  toClear();
  if (jg){
   draw()
  }
}
/************************************************************/
function getMap()
{
  var thePoints;
  thePoints =  
"71.212424 36.050190,71.662611 36.482369,72.130805 36.770488,72.851103 36.914548,73.229260 36.914548,73.841514 36.914548,74.255685 36.914548,74.579819 37.094623,75.048013 36.968571,75.552222 36.806503,75.948386 36.608421,75.966394 36.176242,76.110454 35.960153,76.452595 35.906130,76.992819 35.618011,77.695110 35.563989,78.091274 35.311884,78.145297 34.789668,78.685520 34.465533,79.045670 34.321474,78.793565 34.051362,78.775558 33.637190,79.261759 33.060952,79.279767 32.610765,78.919617 32.376668,78.415409 32.628772,78.073267 32.664787,77.731125 32.988922,77.406991 32.826855,76.974812 33.060952,76.308536 33.078959,75.822334 32.934899,75.912372 32.664787,75.624252 32.394675,75.408163 32.178586,74.741887 31.998511,74.615834 31.692385,74.579819 31.116146,74.309708 30.846034,73.985573 30.323817,73.463357 29.945661,72.995163 29.153333,72.292872 28.523071,71.932723 27.964840,70.816260 27.694728,70.564156 28.072885,70.059947 27.676721,69.573745 27.100482,69.501715 26.830370,69.915887 26.560258,70.149984 26.506236,70.059947 26.146087,70.167992 25.803945,70.600171 25.713907,70.690208 25.461803,70.852275 25.137669,71.086372 24.579437,71.032350 24.309326,70.762238 24.201281,70.618178 24.345340,70.384081 24.327333,69.969909 24.147258,69.537730 24.291318,68.799424 24.201281,68.763410 23.967184,68.583335 23.931169,68.313223 23.931169,67.971081 23.769102,67.754992 23.733087,67.430857 24.039214,67.322813 24.453385,67.070708 24.813534,66.692552 24.831542,66.746574 25.083646,66.620522 25.335751,66.242365 25.425788,65.558082 25.371766,64.549664 25.245714,63.469216 25.227706,61.722492 25.029624,61.650463 25.155676,61.704485 25.659885,61.830537 26.146087,62.172679 26.344169,62.442791 26.524243,63.109067 26.560258,63.271134 26.902400,63.307149 27.154504,63.073052 27.208527,62.784933 27.226534,62.802940 27.334579,62.784933 28.144915,62.676888 28.288974,62.352753 28.379012,61.758507 28.757168,61.344336 29.315400,60.876142 29.873631,62.370761 29.369422,63.487224 29.477467,64.081470 29.405437,64.531656 29.567504,64.981843 29.513482,66.080298 29.747579,66.350410 29.927653,66.260372 30.125735,66.296387 30.467877,66.386425 30.864041,66.674544 31.152161,66.980671 31.296220,67.178753 31.170168,67.664954 31.296220,67.592925 31.404265,67.592925 31.548325,67.917059 31.656370,68.187171 31.800429,68.565327 31.782422,68.925477 31.584340,69.285626 31.872459,69.231604 32.448698,69.357656 32.664787,69.555738 33.024937,69.753820 33.042944,70.312051 33.349071,70.041939 33.655198,69.861865 33.925310,69.897880 34.015347,70.366074 33.961325,71.032350 34.033354,71.158402 34.285459,70.960320 34.519556,71.212424 34.789668,71.662611 35.131810,71.626596 35.527974,71.464529 35.852108,71.212424 36.050190"

return thePoints;
   
}
function addToPolygon()
{
  
  var x = document.getElementById("x");
  var y = document.getElementById("y");
  var polygon = document.getElementById("polygon");
  

  
  if (x.value != "" && y.value != "")
  {
    if (polygon.value != "")
      polygon.value += ",";
    polygon.value += x.value + " " + y.value ;

    x.value = "";
    y.value = "";
    x.focus();
  }
  else
  {
    alert("Please Enter Value in both X and Y")
  }
  draw(2)
}
function checkPoly(){
 document.getElementById("filterType2").checked = true;
}
function drawRectangle(){
 
 document.getElementById("filterType1").checked = true;
 
 minLat = document.getElementById("minLat").value
 minLong = document.getElementById("minLong").value
 
 maxLat = document.getElementById("maxLat").value
 maxLong = document.getElementById("maxLong").value
 
  if (minLat != "" && minLong != "" && maxLat != "" && maxLong != ""){
     draw(1)
  }
}

function drawCircle(){
   
   document.getElementById("filterType3").checked = true;
   
   radx = document.getElementById("radx").value
   rady = document.getElementById("rady").value
   radius = document.getElementById("radius").value
   
   if (radx != "" && rady != "" && radius != ""){
       draw(3)
   }
}
/*************************************************************/
function displayLatLongMinMap(mX, mY){

  theWidth = document.getElementById("myCanvas").style.width;
  theHeight = document.getElementById("myCanvas").style.height;
  theWidth = theWidth.substring(0,theWidth.length-2);
  theHeight = theHeight.substring(0,theHeight.length-2)
  
  var theExtent = new Array();
  
  theExtent[0] = xEnd-0;
  theExtent[1] = yStart-0;
  theExtent[2] = xStart-0;
  theExtent[3] = yEnd-0;
  
  
  
  theX = (mX)-0;
  theY = (theWidth - mY)-0 ;
  
  longX = theExtent[0] + ((theExtent[2] - theExtent[0])/theHeight)*theX;
  latY = theExtent[1] + ((theExtent[3] - theExtent[1])/theWidth)*theY;
  
  longX = Math.round(longX*100)/100
  latY = Math.round(latY*100)/100
  
  window.status = "Long: "+longX+" Lat: "+latY;
}