add some touch support

- fire touch(start|move|end) events after adding clinetX/Y
- use touch events in video and timeline widgets
- use touchstart to select item in ArrayEditable

source/UI/js/Video/BlockVideoTimeline.js

@@ -55,7 +55,9 @@ Ox.BlockVideoTimeline = function(options, self) {
             doubleclick: doubleclick,
             drag: function(data) {
                 mousedown(data);
-            }
+            },
+            touchmove: mousedown,
+            touchstart: mousedown
         });
 
     self.$images = [];

source/UI/js/Video/LargeVideoTimeline.js

@@ -53,7 +53,10 @@ Ox.LargeVideoTimeline = function(options, self) {
             anyclick: click,
             dragstart: dragstart,
             drag: drag,
-            dragend: dragend
+            dragend: dragend,
+            touchstart: dragstart,
+            touchmove: drag,
+            touchend: dragend
         });
     }
 

source/UI/js/Video/SmallVideoTimeline.js

@@ -110,7 +110,13 @@ Ox.SmallVideoTimeline = function(options, self) {
                 self.triggered = false;
                 mousedown(data);
             },
-            mousedown: mousedown
+            mousedown: mousedown,
+            touchend: function(data) {
+                self.triggered = false;
+                mousedown(data);
+            },
+            touchmove: mousedown,
+            touchstart: mousedown
         })
         .appendTo(that);
 

source/UI/js/Video/VideoPreview.js

@@ -92,6 +92,11 @@ Ox.VideoPreview = function(options, self) {
                 self.$frame.attr({src: self.options.getFrame(self.options.position)});
             }
         })
+        .bindEvent({
+            touchend: touchend,
+            touchmove: touchmove,
+            touchstart: startLoading
+        })
         .appendTo(that);
 
     function click(e) {
@@ -174,6 +179,19 @@ Ox.VideoPreview = function(options, self) {
         self.timeout && clearTimeout(self.timeout);
     }
 
+    function touchend(e) {
+        var position = getPosition(e.clientX - that.offset().left);
+        stopLoading();
+        self.$frame.attr({src: getClosestFrame(position)});
+        that.triggerEvent('click', {
+            position: position
+        });
+    }
+    function touchmove(e) {
+        var position = getPosition(e.clientX - that.offset().left);
+        self.$frame.attr({src: getClosestFrame(position)});
+    }
+
     return that;
 
 };

source/UI/js/Video/VideoTimelinePlayer.js

@@ -215,7 +215,13 @@ Ox.VideoTimelinePlayer = function(options, self) {
             key_up: function() {
                 self.options.position -= self.contentWidth / self.fps;
                 setPosition();
-            }
+            },
+            touchend: function (e) {
+                mousedown(e);
+                mouseleave();
+            },
+            touchmove: mousedown,
+            touchstart: mousedown
         });
 
     self.$playerbar = Ox.Bar({size: 16});