add chapter marker, use in video edit panel

source/Ox.UI/css/Ox.UI.css

@@ -2328,6 +2328,7 @@ Video
     position: absolute;
     top: 4px;
 }
+.OxLargeVideoTimeline .OxChapter,
 .OxLargeVideoTimeline .OxCut {
     position: absolute;
     top: 62px;

source/Ox.UI/js/Video/LargeVideoTimeline.js

@@ -13,6 +13,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
             .defaults({
+                chapters: [],
                 cuts: [],
                 disabled: false,
                 duration: 0,
@@ -95,13 +96,15 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     setTimeout(function() {
-        self.options.cuts.forEach(function(v, i) {
+        var chapters = self.options.chapters.slice(1);
+        Ox.unique(chapters.concat(self.options.cuts)).forEach(function(v, i) {
             self.$cuts[i] = $('<img>')
-                .addClass('OxCut')
+                .addClass(Ox.contains(chapters, v) ? 'OxChapter' : 'OxCut')
                 .css({left: (v * self.fps) + 'px'})
                 .appendTo(self.$timeline);
         });
         // performs better
+        self.$timeline.find('.OxChapter').attr({src: Ox.UI.getImageURL('markerChapter')});
         self.$timeline.find('.OxCut').attr({src: Ox.UI.getImageURL('markerCut')});
     });
 

source/Ox.UI/js/Video/VideoEditPanel.js

@@ -460,6 +460,7 @@ Ox.VideoEditPanel = function(options, self) {
 
     function getTimeline() {
         return Ox.LargeVideoTimeline({
+                chapters: self.chapters,
                 cuts: self.cuts,
                 duration: self.options.duration,
                 getImageURL: self.options.getLargeTimelineURL,

source/Ox.UI/svg/markerChapter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <polygon points="96,248 96,8 160,8 160,248" fill="#FFFFFF" stroke="#000000" stroke-width="16"/>
+</svg>