minimal changes to detect touch/drag events in mobile safari

drag events in mobile safari

--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -70,9 +70,15 @@
     if (this.input && $F(this.input))
       this.positionThumb(parseFloat($F(this.input)) * this.width / 100);
 
-    this.div.observe('mousedown', this.onMouseDown.bindAsEventListener(this));
-    this.div.observe('mouseup',   this.onMouseUp.bindAsEventListener(this));
-    this.div.observe('mousemove', this.onMouseMove.bindAsEventListener(this));
+    if (Prototype.Browser.MobileSafari) {
+      this.div.observe('touchstart', this.onMouseDown.bindAsEventListener(this));
+      this.div.observe('touchend',   this.onMouseUp.bindAsEventListener(this));
+      this.div.observe('touchmove', this.onMouseMove.bindAsEventListener(this));
+    } else {
+      this.div.observe('mousedown', this.onMouseDown.bindAsEventListener(this));
+      this.div.observe('mouseup',   this.onMouseUp.bindAsEventListener(this));
+      this.div.observe('mousemove', this.onMouseMove.bindAsEventListener(this));
+    }
   },
 
   onMouseDown: function(e) {

@@ -87,11 +93,12 @@
   onMouseMove: function(e) {
     if (!this.dragging) return;
     this.handleEvent(e);
+    e.stop();
   },
 
   handleEvent: function(e) {
-    var x = e.pointerX() - this.thumb.offset;
-    this.positionThumb(x);
+    var x = e.targetTouches ? e.targetTouches[0].pageX : e.pointerX();
+    this.positionThumb(x - this.thumb.offset);
   },
 
   positionThumb: function(x) {