function annotateImage(event, i) {
    var pos_x = event.pageX - i.cumulativeOffset()[0];
    var pos_y = event.pageY - i.cumulativeOffset()[1];

    var annotation = prompt("Annotation text");
    if (annotation && annotation!='') {
        new Ajax.Request('submitImageAnnotation', {
          parameters: { text: annotation, id: i.id, x: pos_x, y: pos_y },
          onSuccess: function(transport) {
                var response = transport.responseText || "no response text";
                var mapId = i.attributes["usemap"].value;
                var map = $(mapId.substring(1));
                map.innerHTML = map.innerHTML + "<area alt='' title='"+annotation+"' nohref='' " +
                                "shape='rect' coords='"+(pos_x-10)+","+(pos_y-10)+","+(pos_x+10)+","+(pos_y+10)+"'>";
                aI.hideAreas(i);
                aI.prepImage(i);

              },
              onFailure: function(){ alert('Could not save comment') }
        });
    }
}

// Probably want to grab onMouseMove rather than onclick...
function initImageAnnotation() {
  $$("img.annotated").each( function(i) { i.onclick=function(event) { annotateImage(event, i); } } );
}

Event.observe(window, 'load', initImageAnnotation, false);