ball and line collision

<html>
<head>
<script type="text/javascript">

function getInternetExplorerVersion()
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}
var IE = getInternetExplorerVersion();

var mx = 0;
var my = 0;
var pmx = 0;
var pmy = 0;

if (IE==-1) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE>=0) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
mx = tempX;
my = tempY;
if(mx<0){mx=0;}
if(my<0){my=0;}
return true;
}


var ball = null;
var d = null;

var lx = 50;
var ly = 200

var x = 55;
var y = 0;
var xv = 0;
var yv = 0;
var xa = 0;
var ya = 0;

var friction = 0;
var bounce = 0.5;

var damping = 0;
var gravity = 0.1;

var grab = false;

function init(){
ball = document.getElementById("ball");
d = document.getElementById("d");
d.style.position="absolute";
ball.style.position="absolute";
line = document.getElementById("line");
line.style.position="absolute";
line.style.top = ly;
line.style.left = lx;
setInterval("loop();",100/6);
}
function loop(){

x1 = lx;
y1 = ly;
x2 = lx + 300;
y2 = ly + 100;

dx = x - x1;
dy = y - y1;
dx2 = x2 - x1;
dy2 = y2 - y1;

dp = dx*dx2 + dy*dy2;
lensq = (dx2*dx2 + dy2*dy2)

projx = ( dp / lensq ) * dx2;
projy = ( dp / lensq ) * dy2;

len = Math.sqrt(lensq);

if(projx < 0){projx = 0;}
if(projy < 0){projy = 0;}
if(projx > 300){projx = 300;}
if(projy > 100){projy = 100;}

px = projx+lx;
py = projy+ly;

d.style.left = px;
d.style.top = py;

dx = x - px;
dy = y - py;
distance = Math.sqrt(dx*dx + dy*dy);

if(distance < 50){

pen = 50 - distance;

udx = dx/distance;
udy = dy/distance;

x += udx * pen;
y += udy * pen;

vlen = Math.sqrt(xv*xv + yv*yv);
vux = xv/vlen;
vuy = yv/vlen;

dp = vux*udx + vuy*udy;
force = dp * vlen;

xa -= (force * udx) + (force * udx * bounce);
ya -= (force * udy) + (force * udy * bounce);

}

ya += gravity;

if(x < 50){
x = 50;
xa += -xv * bounce - xv;
}else if(x > 750){
x = 750;
xa += -xv * bounce - xv;
}
if(y < 50){
y = 50;
ya += -yv * bounce - xy;
}else if(y > 750){
y = 750;
ya += -yv * bounce - yv;
}

if(grab){
xa = mx - pmx;
ya = my - pmy;
xv = 0;
yv = 0;
x = mx;
y = my;
}

xv += xa;
yv += ya;
xa = 0;
ya = 0;
x += xv;
y += yv;

pmx = mx;
pmy = my;

ball.style.top = y-50;
ball.style.left = x-50;
}
</script>
</head>
<body onload="init();" onmouseup="grab = false;">
<img width="300" height="100" src="http://www.assertivemagazine.com/wp-content/uploads/canvas-element/03-09_diagonal_line.png" id="line" onmousedown="return false;"></img>
<img width="100" src="http://www.ozark.k12.mo.us/jrhi/cooks/redcircle.gif" id="ball" onmousedown="grab = true; return false;"></img>
<img width="5" src="http://www.ozark.k12.mo.us/jrhi/cooks/redcircle.gif" id="d" onmousedown="return false;"></img>
</body>
</html>