Overlaps in Kendo Gantt

Test.vfp

<apex:page >
    <style>
        .k-task {
            background: rgba(247,198,52,1)
        }
        .k-task-overlap {
            z-index:2;
            background: rgba(247,198,52,1);
            /* IE6-9 */
        }
    </style>
    <c:KendoResources ></c:KendoResources>
    <div id="gantt"></div>
    <script>
            
        var gantt =$("#gantt").kendoGantt({
          dataSource: [
             
            {
              id: 0,
              orderId: 0,
              parentId: null,
              title: "Task1",
              start: new Date("2014/6/17 9:00"),
              end: new Date("2014/6/19 11:00")
            },
             {
               id: 1,
               orderId: 1,
               parentId: null,
               title: "Task2",
               start: new Date("2014/6/18 10:30"),
               end: new Date("2014/6/20 14:00")
             },
             {
               id: 2,
               orderId: 2,
               parentId: null,
               title: "Task3",
               start: new Date("2014/6/18 10:30"),
               end: new Date("2014/6/18 18:00")
             },
             {
               id: 3,
               orderId: 3,
               parentId: null,
               title: "Task4",
               start: new Date("2014/6/16 10:30"),
               end: new Date("2014/6/18 18:00")
             },
             {
               id: 4,
               orderId: 4,
               parentId: null,
               title: "Task5",
               start: new Date("2014/6/17 10:30"),
               end: new Date("2014/6/17 18:00")
             }
            ],
            resources: {
              dataSource: [
                { id: 0, name: "Resource 1", color: "green", format: "p0" },
                { id: 1, name: "Resource 2", color: "#32cd32", format: "p0" }
              ]
            },
          views: ["week","month","day"],
          columns: [
            { field: "title", title: "Title" },
            { field: "resources", title: "Task Resources" }
          ],
          save: function(e){
              var me=this;
              e.preventDefault();
              if ( !e.values.parentId ) {
                  return;
              }
              var parent = me.dataSource.get(e.values.parentId);
              if ( parent && !parent.parentId ){ // this is the root node
                e.task.set('parentId', e.values.parentId);
              }
          }
        }).data('kendoGantt');
        
        var ds = gantt.dataSource;
        
        var OVERLAP_COLOR = 'rgba(231,56,39,1)',
            TASK_COLOR = 'rgb(58, 134, 200)';
        var overlaps ={
            0:{id: 0, start: new Date("2014/6/17 9:00"), end: new Date("2014/6/19 11:00")},
            1:{id: 1, start: new Date("2014/6/18 10:30"), end: new Date("2014/6/19 11:00")},
            2:{id: 2, start: new Date("2014/6/18 10:30"), end: new Date("2014/6/18 18:00")},
            4:{id: 4, start: new Date("2014/6/17 10:30"), end: new Date("2014/6/17 18:00")},
            3:{id: 3, start: new Date("2014/6/17 9:00"), end: new Date("2014/6/18 18:00")}
        };
        
        // could become costly!!
        var tasks = $('.k-task');
        
        var setTaskOverlaps = function (tasks, overlaps) {
            if (tasks) {
                tasks.each ( function(index, task){
                    var dataElement = ds.getByUid(task.dataset.uid),
                        overlap = overlaps[dataElement.id];
                    
                    if ( overlap ){
                        var el = $(task);
                        el.addClass('k-task-overlap');
                        if ( (dataElement.start -  overlap.start) == 0 && (dataElement.end - overlap.end) ==0 ) { 
                            el.css('background',OVERLAP_COLOR);
                        } else {
                            var startPercentage = (dataElement.start -  overlap.start) == 0 ? 0 : ( ((overlap.start-dataElement.start) / (dataElement.end - dataElement.start)) * 100 );
                            var endPercentage = (dataElement.end - overlap.end) ==0 ? 100 : ( ((overlap.end - dataElement.start) / (dataElement.end - dataElement.start)) * 100 );
                            
                            var bgStr = '';
                            
                            if ( startPercentage == 0) {
                                bgStr += OVERLAP_COLOR + ' ' + startPercentage + '%';
                            } else {
                                bgStr += TASK_COLOR + ' 0%,' +TASK_COLOR + ' ' + startPercentage+ '%,'+ OVERLAP_COLOR + ' ' + startPercentage+ '%' ;
                            }
                            
                            if ( endPercentage == 100 ) {
                                bgStr += ',' + OVERLAP_COLOR + ' 100%';
                            } else {
                                bgStr += ',' + OVERLAP_COLOR + ' ' + endPercentage + '%,' + TASK_COLOR + ' ' + endPercentage + '%,' + TASK_COLOR + ' 100%' ;
                            }
                            
                            el.css('background', '-moz-linear-gradient(left,'+ bgStr +')' );
                            el.css('background', '-webkit-linear-gradient(left,'+ bgStr +')' );
                            el.css('background', '-o-linear-gradient(left,'+ bgStr +')' );
                            el.css('background', '-ms-linear-gradient(left,'+ bgStr +')' );
                            el.css('background', 'linear-gradient(to right,'+ bgStr +')' );
                            //el.css('filter','filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="'+OVERLAP_COLOR+'", endColorstr="'+TASK_COLOR+'", GradientType=1 )')
                        }
                    }
                });
            }
        }
        
        setTaskOverlaps( tasks, overlaps);
        
    </script>
</apex:page>