Join Javascript and C#

Hi

I have an aspx page, which contains a picture box (id: MapImage) and ZoomIn Image Button

2 Files:

Javascript function: Draw a rectangle on the picture box
C# code: collect the starting and ending co-ordinates plus some other functions

When I click the zoomin button:
  1. Javascript function should fire up and I should be able to draw the rectangle
  2. When I finished drawing the rectangle ( i.e when I released the mouse button) C# code should fire up .

I should be able to repeat the above 2 steps until I click another button or exit out from the page.

Javascript function:

function init()
{

// Declarations
// ****************

  rect = null;
  ptr = null;

  MapImage = document.getElementById("MapImage");
  MapImage.onmousedown = setObj;
  MapImage.onmousemove = draw;

  xOffset = getX(MapImage);
  yOffset = getY(MapImage);
  document.onmouseup = clearObj;
  MapImage.ondragstart = function() {return false;};


// On Mouse Down
// *********************

  function setObj(e)
  {
    rect = document.createElement("div");
    rect.className = "rectDraw";

    sX = (window.event)? event.x: e.clientX;
    sY = (window.event)? event.y: e.clientY;
    sX -= xOffset;
    sY -= yOffset;

    rect.style.left = (sX+xOffset) + "px";
    rect.style.top = (sY+yOffset) + "px";

    document.body.appendChild(rect);
  }


//On Mouse Move (Draw Rectangle)
//*********************************************

  function draw(e)
  {
    if (rect)
    {
      var currX = (window.event)? event.x: e.clientX;
      var currY = (window.event)? event.y: e.clientY;

      // make sure not outside the bounds of image
      var leftX = getX(MapImage);
      var leftY = getY(MapImage);
      if (currX < leftX || currY < leftY)
     return false;

      currX -= xOffset;
      currY -= yOffset;

      var diffX = currX - sX;
      var diffY = currY - sY;

      if (currX < sX)
      {
        rect.style.left = (currX+xOffset) + "px";
        diffX = Math.abs(diffX);
      }
      if (currY < sY)
      {
        rect.style.top = (currY+yOffset) + "px";
        diffY = Math.abs(diffY);
      }

      rect.style.width = diffX + "px";
      rect.style.height = diffY + "px";

      // output start & end coordinates
      document.getElementById("startX").value = (sX > currX)? currX: sX;
      document.getElementById("startY").value = (sY > currY)? currY: sY;
      document.getElementById("endX").value = (sX < currX)? currX: sX;
      document.getElementById("endY").value = (sY < currY)? currY: sY;
    }
  }


// Get X and Y
//******************

  function getX(obj)
  {
    var temp = obj;
    var left = 0;
    while (temp.offsetParent)
    {
      left += temp.offsetLeft;
      temp = temp.offsetParent;
    }
    return left;
  }

  function getY(obj)
  {
    var temp = obj;
    var top = 0;
    while (temp.offsetParent)
    {
      top += temp.offsetTop;
      temp = temp.offsetParent;
    }
    return top;
  }
 
 
 // On Mouse Up (Clear Rectangle)
//******************************************

  function clearObj()
  {
    if (rect)
    rect.parentNode.removeChild(rect);
    rect = null;
  }
 
 
}

My C# Code:

RegisterStartupScript("FormSubmittedJSCode", "<script>init();</script>");
double sx = Convert.ToDouble(startX.Value);
double sy = Convert.ToDouble(startY.Value);
double ex = Convert.ToDouble(endX.Value);
double ey = Convert.ToDouble(endY.Value);
double realminx   = (sx * pux) + minxx;
double realminy   = ((300 - sy) * puy) + minyy;
double realmaxx  = (sx * pux) + maxxx;
double realmaxy  = ((300-sy) * puy) +  maxyy;
string XMLCommand1 = FrameXMLCommand(realminx, realminy, realmaxx, realmaxy, 0);


Now I'm able to draw the rectangle and execute the code.
But I'm unable to
-- execute the C# code as soon as I release the mouse (finishing drawing the rectangle)
-- and repeat the same until I click other button or exit the page.

Please help !

Regards
-- Praveen