Problems with Ajax request

Problems with Ajax request

Hi there, I am trying to make a view that stacks images on top of one another.  As the user uses mouseup or mousedown (+ LMB click) the user can scroll through the images.  I am trying to use Ajax to load the new image when the user mousesup.  RIght now nothing happens on mouseup.  Can someone tell me what I am doing wrong please?  thank you.

FYI: no errors on Firebug, hence I am posting here.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>radiology viewer</title>

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script type="text/javascript">
    $("#filmviewer").mouseup(function(){
 // ajax load the next image
 $.ajax({
 type: 'POST',
 url: 'mouseup.html',
 date: currentImage: one,
 success: function(data) {
$('.result').html(data);
alert('Load was performed.' + data);
 }
});
 // append the mouse output
      $("#mouseoutput").append('<span style="color:#fff;">Mouse up.</span>');
    }).mousedown(function(){
      $("#mouseoutput").append('<span style="color:#fff;">Mouse down.</span>');
    });

</script>
</head>

<body id="index" class="home" style="background-color:black;">

<div  id="filmviewer"style="width:400px;">
<img src="pic_1.jpg" />
</div>
<div style="color:#fff;">click on Left Mouse Button and move mouse to scroll through stackable images (labelled 1-5)</div>
<div id="mouseoutput"></div>
</body>
</html>

You can see the live demo here: