pmux-logview 0.2.2

data/lib/pmux-logview/static/js/pmux-logview-index.js

@@ -0,0 +1,324 @@
+pmux_logview.index = {
+    parent:                            pmux_logview,
+    job_log_sort_keys:                 [ "job_id", "mapper", "start_time", "end_time", "elapsed_time" ],
+    job_log_sort_key:                  "start_time",
+    job_log_sort_order:                "desc",
+    job_log_nitems:                    20,
+    job_log_page:                      0,
+    job_log_jobs:                      {},
+    job_log_jobs_cookie:               0,
+    reload_job_log_type:               "archive",
+    reload_job_log_initialized:        false,
+    reload_dispatcher_log_initialized: false,
+    job_log_ajax_requested:            false,
+    dispatcher_log_ajax_requested:     false,
+    need_reload_job_log:               true,
+    need_reload_dispatcher_log:        false,
+    reload_job_log_timer_id:           null,
+    reload_dispatcher_log_timer_id:    null,
+    draw_invoke_timer_id:              null,
+    tab_active_index:                  0,
+    selected_job_id:                   null,
+    $main_tab:                         null,
+    $job_log_table:                    null,
+    $dispatcher_log_table:             null,
+    $more_button:                      null,
+    $job_chart_tchart:                 null,
+    max_mapper_length:                 60 
+};
+
+pmux_logview.index.draw_job_chart = function() {
+    // convert tchart format
+    var source = {
+       settings: {
+           drawActorsSwimlaneChart: false,
+           width: $(window).innerWidth() - 80,
+           tasksGanttChart : {
+               label: "jobs gantt chart"
+           },
+           tasksBarChart : {
+               label: "jobs bar chart"
+           }
+       },
+       actors : null,
+       tasks : {}
+    };
+    var job_count = 0;
+    for (job_id in this.job_log_jobs) {
+        var from = Number(this.job_log_jobs[job_id].start_time_msec);
+        var to;
+        if ("end_time_msec" in this.job_log_jobs[job_id]) {
+            to = Number(this.job_log_jobs[job_id].end_time_msec);
+        } else {
+            continue;
+        }
+        source.tasks[job_id] = {
+            name: "id " + job_id,
+            from: from,
+            to: to,
+            clickEventArg: this.job_log_jobs[job_id],
+            nextTasks: null
+        }
+        job_count += 1;
+    }
+    if (job_count != 0) {
+        this.$job_chart_tchart.tchart('update', source);
+    }
+}
+
+pmux_logview.index.open_detail = function(job_id) {
+    window.open("/detail?job_id=" + job_id, "_blank");
+};
+
+pmux_logview.index.update_progress_bar = function() {
+    $(".progress-bar").each(function() {
+        var $target = $(this);
+        var data_value =  $target.attr("data-value");
+        $target.progressbar({value: Number(data_value)});
+    });
+};
+
+pmux_logview.index.reload_job_log = function(force) {
+    if (!this.parent.can_reload) {
+        return;
+    }
+    if (!force && this.job_log_ajax_requested) {
+        return;
+    }
+    var self = this;
+    var param = { sort_key: this.job_log_sort_key,
+                  sort_order: this.job_log_sort_order,
+                  type: this.reload_job_log_type,
+                  nitems: this.job_log_nitems,
+                  page: this.job_log_page,
+                  jobs_cookie: this.job_log_jobs_cookie };
+    this.parent.ajax_base("/log/job", "GET", param).done(function(data, textStatus, XMLHttpRequest) {
+        if (!("jobs_cookie" in data && "jobs" in data)) {
+             self.$job_log_table.fnClearTable();
+             self.$job_log_table.fnAddData(["invalid response", "", "", "", ""]);
+             self.parent.activityOff(function(){ self.$main_tab.tabs("option", "disabled", false) });
+             return;
+        }
+        $.extend(true, self.job_log_jobs, data.jobs);
+        self.job_log_jobs_cookie = data.jobs_cookie;
+        self.$job_log_table.fnClearTable();
+        var sorted_jobs = [];
+        for (var job_id in self.job_log_jobs) {
+            if (self.$job_log_table.fnSettings().aaSorting.length == 0) {
+                var inserted = false; 
+                for (var i = 0; i < sorted_jobs.length; i++) {
+                    if (Number(self.job_log_jobs[job_id]["start_time_msec"]) > Number(sorted_jobs[i]["start_time_msec"])) {
+                        sorted_jobs.splice(i, 0, self.job_log_jobs[job_id]);
+                        inserted = true;
+                        break;
+                    }
+                }
+                if (!inserted) {
+                    sorted_jobs.push(self.job_log_jobs[job_id]);
+                }
+            } else {
+                sorted_jobs.push(self.job_log_jobs[job_id]);
+            }
+        }
+        var body_array = [];
+        for (i = 0; i < sorted_jobs.length; i++) {
+            var row_array = []
+            var job_id_html = '';
+            job_id_html += '<button class="container button-color button-normalize ui-corner-all" onClick="pmux_logview.index.open_detail(\'' + sorted_jobs[i]["job_id"] + '\')">';
+            job_id_html += '    <span class="icon-space">' + sorted_jobs[i].job_id + '</span>';
+            job_id_html += '    </span><span class="button-icon-adjust ui-icon ui-icon-info"></span>';
+            job_id_html += '</button>';
+            row_array.push(job_id_html)
+            if (sorted_jobs[i].mapper.length > self.max_mapper_length) {
+                row_array.push('<span class="text-ellipsis">'+ sorted_jobs[i].mapper.substring(0, self.max_mapper_length) + '...</span>');
+            } else {
+                row_array.push('<span class="text-ellipsis">'+ sorted_jobs[i].mapper + '</span>');
+            }
+            row_array.push('<span class="cell-nowrap">' + sorted_jobs[i].start_time + '</span>');
+            if (sorted_jobs[i].end_time.match(/^\d+%$/)) {
+                var percent = sorted_jobs[i].end_time.replace("%","");
+                row_array.push('<span class="cell-nowrap"><div class="progress-bar" data-value="' + percent + '" ></div></span>');
+            } else {
+                row_array.push('<span class="cell-nowrap">' + sorted_jobs[i].end_time + '</span>');
+            }
+            row_array.push(sorted_jobs[i].elapsed_time);
+            body_array.push(row_array);
+        }
+        self.$job_log_table.fnAddData(body_array);
+        self.update_progress_bar();
+        self.parent.activityOff(function(){ self.$main_tab.tabs("option", "disabled", false) });
+        self.valid_last_job_id = true; 
+        self.reload_job_log_type = "update";
+        self.job_log_ajax_requested = false;
+    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
+        self.parent.open_dialog("job log の読み込みに失敗しました。");
+        self.parent.activityOff(function(){ self.$main_tab.tabs("option", "disabled", false) });
+        self.job_log_ajax_requested = false;
+    });
+    self.job_log_ajax_requested = true;
+};
+
+pmux_logview.index.reload_dispatcher_log = function() {
+    if (!this.parent.can_reload) {
+        return;
+    }
+    if (this.dispatcher_log_ajax_requested) {
+        return;
+    }
+    var self = this;
+    this.parent.ajax_base("/log/dispatcher", "GET", {}).done(function(data, textStatus, XMLHttpRequest) {
+        self.$dispatcher_log_table.fnClearTable();
+        var body_array = [];
+        for (var i = data.length - 1; i >= 0; i--) {
+            body_array.push([data[i]]);
+        }
+        self.$dispatcher_log_table.fnAddData(body_array);
+        self.parent.activityOff(function(){ self.$main_tab.tabs("option", "disabled", false) });
+        self.dispatcher_log_ajax_requested = false;
+    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
+        self.parent.open_dialog("dispatcher log の読み込みに失敗しました。");
+        self.parent.activityOff(function(){ self.$main_tab.tabs("option", "disabled", false) });
+        self.dispatcher_log_ajax_requested = false;
+    });
+    this.dispatcher_log_ajax_requested = true;
+};
+
+pmux_logview.index.reload = function() {
+    var self = this;
+    if (this.need_reload_job_log) {
+        if (this.reload_job_log_timer_id == null) {
+            this.reload_job_log_timer_id = setInterval(function(){
+                self.reload_job_log(false); 
+            }, 3000);
+        }
+        if (!this.reload_job_log_initialized) {
+            this.parent.activityOn(function(){ self.$main_tab.tabs("option", "disabled", true) });
+            this.reload_job_log_type = "archive";
+            this.reload_job_log(true);
+            this.reload_job_log_initialized = true;
+        } 
+    } else {
+        if (this.reload_job_log_timer_id != null) {
+            clearInterval(this.reload_job_log_timer_id);
+            this.reload_job_log_timer_id = null;
+        } 
+    }
+    if (this.need_reload_dispatcher_log) {
+        if (this.reload_dispatcher_log_timer_id == null) {
+            this.reload_dispatcher_log_timer_id = setInterval(function(){
+                self.reload_dispatcher_log(); 
+            }, 3000);
+        }
+        if (!this.reload_dispatcher_log_initialized) {
+            this.parent.activityOn(function(){ self.$main_tab.tabs("option", "disabled", true) });
+            this.reload_dispatcher_log();
+            this.reload_dispatcher_log_initialized = true;
+        } 
+    } else {
+        if (this.reload_dispatcher_log_timer_id != null) {
+            clearInterval(this.reload_dispatcher_log_timer_id);
+            this.reload_dispatcher_log_timer_id = null;
+        } 
+    }
+};
+
+pmux_logview.index.draw_invoke = function() {
+    if (this.tab_active_index == 2) {
+        this.draw_job_chart();
+    }
+    if (this.draw_invoke_timer_id != null) {
+        clearInterval(this.draw_invoke_timer_id);
+        this.draw_invoke_timer_id = null;
+    }
+}
+
+pmux_logview.index.initialize = function() {
+    var self = this;
+    this.parent.initialize();
+    this.$main_tab = $("#main-tabs").tabs({
+                         active: this.tab_active_index,
+                         activate: function(event, ui) {
+                             self.tab_active_index = self.$main_tab.tabs("option", "active");
+                             if (self.tab_active_index == 0) { 
+                                  self.need_reload_job_log = true;
+                                  self.need_reload_dispatcher_log = false;
+                             } else if (self.tab_active_index == 1) {
+                                  self.need_reload_job_log = false;
+                                  self.need_reload_dispatcher_log = true;
+                             } else if (self.tab_active_index == 2) {
+                                  self.draw_job_chart();
+                             }
+                             self.reload();
+                         }
+                     });
+    this.$job_log_table = $("#job-log-table").dataTable({
+                              aaSorting: [],
+                              bPaginate: false,
+                              bScrollCollapse: true,
+                              bSort: true,
+                              bFilter: true,
+                              bJQueryUI: true,
+                              bAutoWidth: true,
+                              sPaginationType: "full_numbers",
+                              fnDrawCallback: function() { 
+                                  self.update_progress_bar();
+                                  var $this = (this)
+                                  if ($this.fnSettings().aaSorting.length  != 0) {
+                                      var sort_key = self.job_log_sort_keys[$this.fnSettings().aaSorting[0][0]];
+                                      var sort_order = $this.fnSettings().aaSorting[0][1];
+                                      if (self.job_log_sort_key != sort_key || self.job_log_sort_order != sort_order) {
+                                          self.job_log_sort_key = sort_key;
+                                          self.job_log_sort_order = sort_order;
+                                          self.job_log_page = 0;
+                                          self.reload_job_log_type = "archive";
+                                          self.reload_job_log(true);
+                                      }
+                                  }
+                              } 
+                         });
+    this.$dispatcher_log_table = $("#dispatcher-log-table").dataTable({
+                                     aaSorting: [],
+                                     bPaginate: false,
+                                     bScrollCollapse: true,
+                                     bSort: false,
+                                     bFilter: true,
+                                     bJQueryUI: true,
+                                     bAutoWidth: true
+                                 });
+    this.$more_button = $("#more-button").click(function() {
+                            self.job_log_page += 1;
+                            self.reload_job_log_type = "archive";
+                            self.parent.activityOn(function(){ self.$main_tab.tabs("option", "disabled", true) });
+                            self.reload_job_log(true);
+                        });
+    this.$job_chart_tchart = $("#job-chart-tchart").tchart({
+                                 onTaskClick: function(task, target, event) {
+                                     var html = '<table class="border task-tooltip"><thead class="task-tooltip"></thead>';
+                                     html += '<tbody class="task-tooltip"><tr class="task-tooltip">';
+                                     for (key in task) {
+                                         html += '<td class="task-tooltip">' + key +'</td>';
+                                         if (key == "job_id") {
+                                             html += '<td><button class="container button-color button-normalize ui-corner-all" onClick="pmux_logview.index.open_detail(\'' + task[key] + '\')">';
+                                             html += '    <span class="icon-space">' + task[key] + '</span>';
+                                             html += '    </span><span class="button-icon-adjust ui-icon ui-icon-info"></span>';
+                                             html += '</button></td></tr><tr class="task-tooltip">';
+                                         } else {
+                                             html += '<td class="task-tooltip">' + task[key] +'</td></tr><tr class="task-tooltip">';
+                                         }
+                                     }
+                                     html += '</tr></tbody></table>';
+                                     self.parent.open_tooltip(html, target, event);
+                                 }
+                             });
+    $(window).resize(function() {
+        if (self.draw_invoke_timer_id == null) {
+            self.draw_invoke_timer_id = setInterval(function() { self.draw_invoke() }, 1000);
+        }
+    });
+    this.reload();
+};
+
+$(document).ready(function(){
+    pmux_logview.index.initialize();
+});
+

data/lib/pmux-logview/static/js/tchart.js

@@ -0,0 +1,2125 @@
+(function($) {
+    var _tcColorPattern = ['#990033','#ff0066','#cc00cc','#6600cc','#3333ff','#003366','#009999','#00ff99',
+                           '#009933','#00cc00','#ccff00','#ffcc00','#996633','#cc9966','#ff3366','#ff3399',
+                           '#cc00ff','#9966ff','#3333cc','#6699cc','#669999','#339966','#33ff66','#33ff00',
+                           '#999900','#ffcc66','#330000','#ffcc99','#cc0033','#ff0099','#9900cc','#330066',
+                           '#0066ff','#006699','#99cccc','#006633','#00ff66','#66ff00','#cccc00','#ffcc33',
+                           '#663333','#ffffff','#ff0033','#ff33cc','#990099','#6600ff','#0033ff','#3399cc',
+                           '#ccffff','#336633','#ccffcc','#99ff00','#cccc33','#cc9933','#996666','#cccccc',
+                           '#ff9999','#ff00cc','#cc99cc','#6633ff','#3366ff','#0099cc','#33cccc','#669966',
+                           '#ccff99','#66cc00','#333300','#996600','#cc9999','#999999','#cc3366','#ff66ff',
+                           '#996699','#ccccff','#3366cc','#66ccff','#66cccc','#66cc66','#99ff66','#00ff00',
+                           '#666600','#cc9900','#993333','#666666','#ffccff','#ff33ff','#663366','#9999ff',
+                           '#000066','#3399ff','#339999','#99ff99','#99ff33','#33cc00','#999933','#ff9900',
+                           '#cc6666','#333333','#cc6699','#ff00ff','#660099','#9999cc','#000033','#003399',
+                           '#336666','#66ff66','#00ff33','#339900','#cccc66','#cc6600','#ffcccc','#993366',
+                           '#cc0099','#9933cc','#6666cc','#0000ff','#0099ff','#006666','#339933','#33ff33',
+                           '#99cc66','#666633','#993300','#ff3333','#660033','#990066','#660066','#6666ff',
+                           '#000099','#33ccff','#003333','#99cc99','#00cc33','#669933','#999966','#cc6633',
+                           '#cc3333','#cc3399','#cc66cc','#9900ff','#666699','#0033cc','#00ccff','#00ffcc',
+                           '#66ff99','#33cc33','#99cc33','#cccc99','#663300','#ff6666','#ff99cc','#cc33cc',
+                           '#9933ff','#333366','#0000cc','#99ffff','#33ffcc','#33ff99','#66ff33','#336600',
+                           '#ffffcc','#ff9966','#660000','#ff66cc','#cc99ff','#9966cc','#333399','#336699',
+                           '#66ffff','#33cc99','#33cc66','#009900','#669900','#ffff99','#ff6633','#990000',
+                           '#ff99ff','#cc66ff','#330033','#330099','#0066cc','#33ffff','#00cc99','#00cc66',
+                           '#66cc33','#99cc00','#ffff66','#ff9933','#cc0000','#ff6699','#cc33ff','#663399',
+                           '#3300cc','#99ccff','#00ffff','#66ffcc','#66cc99','#006600','#ccff66','#ffff33',
+                           '#ff6600','#ff0000','#cc0066','#993399','#6633cc','#3300ff','#6699ff','#00cccc',
+                           '#99ffcc','#009966','#003300','#ccff33','#ffff00','#cc3300','#ff3300','#000000'];
+
+    var _tcGetColor = function(pos) {
+        var idx = pos % _tcColorPattern.length;
+        return _tcColorPattern[idx];
+    }
+
+    var _tcGetStringLength = function(str) {
+        len = 0;
+        for (var i = 0; i < str.length; i++) {
+            if (str.charCodeAt(i) < 256) {
+                len += 1;
+            } else {
+                len += 2;
+            }
+        }
+        return len;
+    }
+
+    var _tcTFPad = function(v, len) {
+        return ("000" + v).substr(-len);
+    }
+
+    var _tcTimestampFormat = function(value, BrushFromTo) {
+        var differ = BrushFromTo[1] - BrushFromTo[0];
+        var msec = value % 1000;  
+        var dt = new Date(value);
+        if (differ < 1000) { 
+           // 1sec
+           return "" + _tcTFPad(dt.getHours(), 2) + ":" + _tcTFPad(dt.getMinutes(), 2) + ":" + _tcTFPad(dt.getSeconds(), 2) + "." + _tcTFPad(msec, 3);
+        } else if (differ < 60 * 1000) {
+           // 1min
+           return "" + _tcTFPad(dt.getHours(), 2) + ":" + _tcTFPad(dt.getMinutes(), 2) + ":" + _tcTFPad(dt.getSeconds(), 2) + "." + _tcTFPad(msec, 3);
+        } else if (differ < 60 * 60 * 1000) {
+           // 1hour
+           return "" + _tcTFPad((dt.getMonth() + 1), 2) + "-" +  _tcTFPad(dt.getDate(), 2) + " " + _tcTFPad(dt.getHours(), 2) + ":" + _tcTFPad(dt.getMinutes(), 2) + ":" + _tcTFPad(dt.getSeconds(), 2);
+        } else if (differ < 24 * 60 * 60 * 1000) {
+           // 1day
+           return "" + _tcTFPad(dt.getFullYear(), 4) + "-" + _tcTFPad((dt.getMonth() + 1), 2) + "-" +  _tcTFPad(dt.getDate(), 2) + " " + _tcTFPad(dt.getHours(), 2) + ":" + _tcTFPad(dt.getMinutes(), 2);
+        } else if (differ < 7 * 24 * 60 * 60 * 1000) {
+           // 1week
+           return "" + _tcTFPad(dt.getFullYear(), 4) + "-" + _tcTFPad((dt.getMonth() + 1), 2) + "-" +  _tcTFPad(dt.getDate(), 2) + " " + _tcTFPad(dt.getHours(), 2) + ":" + _tcTFPad(dt.getMinutes(), 2);
+        } else if (differ < 30 * 24 * 60 * 60 * 1000) {
+           // 1month
+           return "" + _tcTFPad(dt.getFullYear(), 4) + "-" + _tcTFPad((dt.getMonth() + 1), 2) + "-" +  _tcTFPad(dt.getDate(), 2); 
+        } else {
+           return "" + _tcTFPad(dt.getFullYear(), 4) + "-" + _tcTFPad((dt.getMonth() + 1), 2) + "-" +  _tcTFPad(dt.getDate(), 2); 
+        }
+    }
+
+    var _tcElapsedTimeFormat = function(value, BrushFromTo) {
+        var differ = BrushFromTo[1] - BrushFromTo[0];
+        var dt = new Date(value);
+        var week = Math.floor(value / (7 * 24 * 60 * 60 * 1000));
+        value -= week * (7 * 24 * 60 * 60 * 1000);
+        var day = Math.floor(value / (24 * 60 * 60 * 1000));
+        value -= day * (24 * 60 * 60 * 1000);
+        var hour = Math.floor(value / (60 * 60 * 1000));
+        value -= hour * (60 * 60 * 1000);
+        var min = Math.floor(value / (60 * 1000));
+        value -= min * (60 * 1000);
+        var sec = Math.floor(value / (1000));
+        value -= sec * (1000);
+        var msec = value;
+        if (differ < 1000) { 
+           // < 1sec
+           return "" + msec + "ms";
+        } else if (differ < 60 * 1000) {
+           // < 1min
+           return "" + sec + "s " + msec + "ms";
+        } else if (differ < 60 * 60 * 1000) {
+           // < 1hour
+           return "" + min + "m " +  sec + "s ";
+        } else if (differ < 24 * 60 * 60 * 1000) {
+           // < 1day
+           return "" + hour + "h " +  min + "m ";
+        } else if (differ < 7 * 24 * 60 * 60 * 1000) {
+           // < 1week
+           return "" + day + "d " + hour + "h " +  min + "m ";
+        } else  {
+           // other
+           return "" + week + "w " + day + "d " + hour + "h ";
+        }
+    }
+
+    var _tcAdjustBlushValue = function(brushFrom, brushTo, start, end) {
+        if (brushFrom == null ||
+            brushTo == null) {
+            brushFrom = start;
+            brushTo = end;
+        }
+        if (brushFrom < start) {
+            brushFrom = start;
+        }
+        if (brushTo > end) {
+            brushTo = end;
+        }
+        if (brushTo == brushFrom) {
+            brushFrom = start;
+            brushTo = end;
+        }
+        return [brushFrom, brushTo];
+    }
+
+    var _tcGetBrushExtent = function(viewRange, start, end) {
+        if (viewRange.from == null ||
+            viewRange.to == null) {
+            return [0, 0];
+        } else {
+            if (viewRange.from < start) {
+                viewRange.from = start; 
+            }
+            if (viewRange.to > end) {
+                viewRange.to = end;
+            }
+            return [viewRange.from, viewRange.to];
+        }
+    }
+    var _tcGetCommonData = function(source) {
+        var startDateMin = null;
+        var endDateMax = null;
+        var commonData = {}
+        commonData.scrolls = [];
+        commonData.tasks = [];
+        commonData.containers = [ {cls: "scrollButtonsContainer"},
+                                  {cls: "optionsContainer" } ];
+        commonData.datePickerContainersData = [ {cls: "datePickerContainer startDatePickerContainer", label: "start :"},
+                                                {cls: "datePickerContainer endDatePickerContainer", label: "end :"} ]
+        commonData.datePickersData = [ {span: "span.startDatePickerContainer", data: [{ cls: "startDatePicker" }] },
+                                       {span: "span.endDatePickerContainer", data: [{ cls: "endDatePicker" }] } ]
+        if (source.actors != null) {
+	    if (source.settings.drawActorsSummaryBarChart) {
+                commonData.scrolls.push({target: "div.actorsSummaryBarChart", label: source.settings.actorsSummaryBarChart.label , cls: "tchartButton  ui-corner-all"});
+	    } else if (source.settings.drawActorsSwimlaneChart) {
+                commonData.scrolls.push({target: "div.actorsSwimlaneChart", label: source.settings.actorsSwimlaneChart.label , cls: "tchartButton  ui-corner-all"});
+	    }
+        }
+        if (source.tasks != null) {
+            commonData.scrolls.push({target: "div.tasksGanttChart", label: source.settings.tasksGanttChart.label, cls: "tchartButton  ui-corner-all"});
+            commonData.scrolls.push({target: "div.tasksBarChart", label: source.settings.tasksBarChart.label, cls: "tchartButton  ui-corner-all"});
+            var count = 0;
+            for (var taskId in source.tasks) {
+                if (startDateMin == null) {
+                    startDateMin = source.tasks[taskId].from;
+                } else {
+                    if (source.tasks[taskId].from < startDateMin) {
+                        startDateMin = source.tasks[taskId].from;
+                    }
+                }
+                if (endDateMax == null) {
+                    endDateMax = source.tasks[taskId].to;
+                } else {
+                    if (source.tasks[taskId].to > endDateMax) {
+                        endDateMax = source.tasks[taskId].to;
+                    }
+                }
+                if (source.settings.startDate != null && source.settings.startDate > source.tasks[taskId].from) {
+                    continue;
+                }
+                if (source.settings.endDate != null && (source.settings.endDate + 86400000) < source.tasks[taskId].to) {
+                    continue;
+                }
+                var color = _tcGetColor(count);
+                source.tasks[taskId].color = color;
+                var task = {
+                    taskId: taskId,
+                    name: source.tasks[taskId].name,
+                    from: source.tasks[taskId].from,
+                    to: source.tasks[taskId].to,
+                    elapse: source.tasks[taskId].to - source.tasks[taskId].from,
+                    clickEventArg: source.tasks[taskId].clickEventArg,
+                    color: source.tasks[taskId].color 
+                };
+                commonData.tasks.push(task);
+                count += 1;
+            }
+        }
+        if (source.settings.startDate == null) {
+            source.settings.startDate = startDateMin;
+        }
+        if (source.settings.endDate == null) {
+            source.settings.endDate = endDateMax;
+        }
+        commonData.tickWidth = source.settings.fontSize * 25 / 2;
+        commonData.fromMin = d3.min(commonData.tasks, function(d){ return d.from });
+        commonData.toMax = d3.max(commonData.tasks, function(d){ return d.to });
+        commonData.elapseMax = d3.max(commonData.tasks, function(d){ return d.elapse });
+        commonData.startDateMin = startDateMin;
+        commonData.endDateMax = endDateMax;
+        return commonData;
+    }
+
+    var _tcDrawCreateContainers = function(self, divSel, containerData) {
+        var containers = d3.selectAll(self)
+                           .selectAll(divSel)
+                           .selectAll("div")
+                           .data(containerData);
+        containers.attr("class", function(d) { return d.cls })
+        containers.enter()
+                      .append("div")
+                      .attr("class", function(d) { return d.cls })
+        containers.exit().remove();
+    }
+
+    var _tcDrawCreateScrollButtons = function(self, divSel, scrollButtonsData) {
+        var scrollButtons = d3.selectAll(self)
+                              .selectAll(divSel)
+                              .selectAll("div.scrollButtonsContainer")
+                              .selectAll("button")
+                              .data(scrollButtonsData);
+        scrollButtons.attr("class", function(d) { return d.cls })
+                     .text(function(d) { return d.label })
+        scrollButtons.enter()
+                         .append("button")
+                         .attr("class", function(d) { return d.cls })
+                         .text(function(d) { return d.label })
+                         .on("click", function(d) {
+                             $('html,body').animate(
+                                 { scrollTop: $(d.target).offset().top},
+                                 { duration: 100, easing: "swing" }
+                             );
+                         });
+        scrollButtons.exit().remove();
+        return scrollButtons;
+    }
+
+    var _tcDrawCreateSummaryButton = function(self, divSel, summaryButtonData, callback) {
+        var summaryButton = d3.selectAll(self)
+                              .selectAll(divSel)
+                              .selectAll("div.optionsContainer")
+                              .selectAll("button")
+                              .data(summaryButtonData);
+        summaryButton.attr("class", "tchartButton ui-corner-all")
+                     .text(function(d) { return d.label })
+                     .on("click", function(d) {
+                         callback();
+                     });
+        summaryButton.enter()
+                         .append("button")
+                         .attr("class", "tchartButton ui-corner-all")
+                         .text(function(d) { return d.label })
+                         .on("click", function(d) {
+                             callback();
+                         });
+        summaryButton.exit().remove();
+        return summaryButton;
+    }
+
+    var _tcDrawCreatePrevNextInputs = function(self, divSel, startValue, stepValue, callbackAll, callbackPrev, callbackStart, callbackStep, callbackNext) {
+        var prevNextContainers = d3.selectAll(self)
+                                   .selectAll(divSel)
+                                   .selectAll("div.optionsContainer")
+                                   .selectAll("span")
+                                   .data([{cls: "allContainer", label: ""},
+                                          {cls: "prevContainer", label: ""},
+                                          {cls: "startContainer", label: "start"},
+                                          {cls: "stepContainer", label: "step"},
+                                          {cls: "nextContainer", label: ""}]);
+        prevNextContainers.enter()
+                              .append("span")
+                              .attr("class", function(d) { return d.cls })
+                              .text(function(d) { return d.label })
+        prevNextContainers.exit().remove();
+
+        var allButton = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.allContainer")
+                          .selectAll("button")
+                          .data([{label: "all" }]);
+        allButton.enter()
+                     .append("button")
+                     .attr("class", "tchartButton ui-corner-all")
+                     .text(function(d) { return d.label })
+                     .on("click", function(d) {
+                         callbackAll();
+                     });
+        allButton.exit().remove();
+
+        var prevButton = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.prevContainer")
+                          .selectAll("button")
+                          .data([{ label: "prev" }]);
+        prevButton.enter()
+                     .append("button")
+                     .attr("class", "tchartButton ui-corner-all")
+                     .text(function(d) { return d.label })
+                     .on("click", function(d) {
+                         callbackPrev();
+                     });
+        prevButton.exit().remove();
+
+        var startInput = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.startContainer")
+                          .selectAll("input")
+                          .data([{cls: "startInput", type : "number"}]);
+        startInput.enter()
+                     .append("input")
+                     .attr("class", function(d) { return d.cls })
+                     .attr("type", function(d) { return d.type })
+                     .on("change", function(d) {
+                         callbackStart(this, d3.event);
+                     });
+        startInput.exit().remove();
+        self.find("div.optionsContainer > span.startContainer > input.startInput").val(startValue + 1);
+
+        var stepInput = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.stepContainer")
+                          .selectAll("input")
+                          .data([{cls: "stepInput", type : "number"}]);
+        stepInput.enter()
+                     .append("input")
+                     .attr("class", function(d) { return d.cls })
+                     .attr("type", function(d) { return d.type })
+                     .on("change", function(d) {
+                         callbackStep(this, d3.event);
+                     });
+        stepInput.exit().remove();
+        self.find("div.optionsContainer > span.stepContainer > input.stepInput").val(stepValue);
+
+        var nextButton = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.nextContainer")
+                          .selectAll("button")
+                          .data([{ label: "next" }]);
+        nextButton.enter()
+                     .append("button")
+                     .attr("class", "tchartButton ui-corner-all")
+                     .text(function(d) { return d.label })
+                     .on("click", function(d) {
+                         callbackNext();
+                     });
+        nextButton.exit().remove();
+
+        return prevNextContainers;
+    }
+
+    var _tcDrawCreateHeadTailInputs = function(self, divSel, headValue, tailValue, callbackAll, callbackHead, callbackTail) {
+        var headTailContainers = d3.selectAll(self)
+                                   .selectAll(divSel)
+                                   .selectAll("div.optionsContainer")
+                                   .selectAll("span")
+                                   .data([{cls: "allContainer", label: ""},
+                                          {cls: "headContainer", label: "head"},
+                                          {cls: "tailContainer", label: "tail"}]);
+        headTailContainers.enter()
+                              .append("span")
+                              .attr("class", function(d) { return d.cls })
+                              .text(function(d) { return d.label })
+        headTailContainers.exit().remove();
+
+        var allButton = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.allContainer")
+                          .selectAll("button")
+                          .data([{ label: "all" }]);
+        allButton.enter()
+                     .append("button")
+                     .attr("class", "tchartButton ui-corner-all")
+                     .text(function(d) { return d.label })
+                     .on("click", function(d) {
+                         callbackAll();
+                     });
+        allButton.exit().remove();
+
+        var headInput = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.headContainer")
+                          .selectAll("input")
+                          .data([{cls: "headInput", type : "number"}]);
+        headInput.enter()
+                     .append("input")
+                     .attr("class", function(d) { return d.cls })
+                     .attr("type", function(d) { return d.type })
+                     .on("change", function(d) {
+                         callbackHead(this, d3.event);
+                     });
+        headInput.exit().remove();
+        self.find("div.optionsContainer > span.headContainer > input.headInput").val(headValue);
+
+        var tailInput = d3.selectAll(self)
+                          .selectAll(divSel)
+                          .selectAll("div.optionsContainer")
+                          .selectAll("span.tailContainer")
+                          .selectAll("input")
+                          .data([{cls: "tailInput", type : "number"}]);
+        tailInput.enter()
+                     .append("input")
+                     .attr("class", function(d) { return d.cls })
+                     .attr("type", function(d) { return d.type })
+                     .on("change", function(d) {
+                         callbackTail(this, d3.event);
+                     });
+        tailInput.exit().remove();
+        self.find("div.optionsContainer > span.tailContainer > input.tailInput").val(tailValue);
+
+        return headTailContainers;
+    }
+
+    var _tcDrawCreateTopSvg = function(self, divSel, topSvgData) {
+        var topSvg = d3.selectAll(self)
+                       .selectAll(divSel)
+                       .selectAll("svg")
+                       .data(topSvgData);
+        topSvg.attr("class", function(d) { return d.cls })
+              .attr("width", function(d) { return d.width })
+              .attr("height", function(d) { return d.height })
+              .attr("viewBox", function(d) { return d.viewBox });
+        topSvg.enter()
+              .append("svg")
+              .attr("class", function(d) { return d.cls })
+              .attr("width", function(d) { return d.width })
+              .attr("height", function(d) { return d.height })
+              .attr("viewBox", function(d) { return d.viewBox });
+        topSvg.exit().remove();
+        return topSvg;
+    }
+
+    var _tcDrawCreateSubSvgs = function(topSvg, svgSel, subSvgsData) {
+        var subSvgs = topSvg.selectAll(svgSel)
+                            .data(subSvgsData)
+        subSvgs.attr("x", function(d) { return d.x })
+               .attr("y", function(d) { return d.y })
+               .attr("width", function(d) { return d.width })
+               .attr("height", function(d) { return d.height })
+               .attr("viewBox", function(d) { return d.viewBox });
+        subSvgs.enter()
+                   .append("svg")
+                   .attr("class", function(d) { return d.cls })
+                   .attr("preserveAspectRatio", function(d) { return d.preserveAspectRatio})
+                   .attr("x", function(d) { return d.x })
+                   .attr("y", function(d) { return d.y })
+                   .attr("width", function(d) { return d.width })
+                   .attr("height", function(d) { return d.height })
+                   .attr("viewBox", function(d) { return d.viewBox});
+        subSvgs.exit().remove();
+        return subSvgs;
+    }
+
+    var _tcDrawCreateTasksRects = function(topSvg, subSvg, rectSel, tasksRectsData, source, onTaskClick) {
+        var tasksRects = topSvg.selectAll(subSvg)
+                               .selectAll(rectSel)
+                               .data(tasksRectsData);
+        tasksRects.attr("x", function(d) { return d.x; })
+                  .attr("y", function(d) { return d.y; })
+                  .attr("width", function(d) { return d.width; })
+                  .attr("height", function(d) { return d.height; })
+                  .attr("fill", function(d) { return d.color; });
+        tasksRects.enter()
+                      .append("rect")
+                      .attr("x", function(d) { return d.x; })
+                      .attr("y", function(d) { return d.y; })
+                      .attr("rx", function(d) { return d.rx; })
+                      .attr("ry", function(d) { return d.ry; })
+                      .attr("width", function(d) { return d.width; })
+                      .attr("height", function(d) { return d.height; })
+                      .attr("class", function(d) { return d.cls; })
+                      .attr("fill", function(d) { return d.color; })
+                      .on("click", function(d) {
+                           if (onTaskClick && d.taskId) {
+                               onTaskClick(source.tasks[d.taskId].clickEventArg, this, d3.event);
+			   }
+                      });
+        tasksRects.exit().remove();
+        return tasksRects;
+    }
+
+    var _tcDrawCreateLines = function(topSvg, subSvg, lineSel, linesData) {
+        var lines = topSvg.selectAll(subSvg)
+                          .selectAll(lineSel)
+                          .data(linesData);
+        lines.attr("x1", function(d) { return d.x1 })
+             .attr("y1", function(d) { return d.y1 })
+             .attr("x2", function(d) { return d.x2 })
+             .attr("y2", function(d) { return d.y2 });
+        lines.enter()
+                 .append("line")
+                 .attr("x1", function(d) { return d.x1 })
+                 .attr("y1", function(d) { return d.y1 })
+                 .attr("x2", function(d) { return d.x2 })
+                 .attr("y2", function(d) { return d.y2 })
+                 .attr("class", function(d) { return d.cls })
+        lines.exit().remove();
+        return lines;
+    }
+
+    var _tcDrawCreateLabels = function(topSvg, subSvg, textSel, labelsData, fontSize) {
+        var labels = topSvg.selectAll(subSvg)
+                           .selectAll(textSel)
+                           .data(labelsData);
+        labels.text(function(d) {return d.label})
+              .attr("x", function(d) { return d.x; })
+              .attr("y", function(d) { return d.y; })
+              .style("font-size", fontSize + "px");
+        labels.enter()
+                  .append("text")
+                  .text(function(d) {return d.label})
+                  .attr("x", function(d) { return d.x; })
+                  .attr("y", function(d) { return d.y; })
+                  .attr("class", function(d){ return d.cls; })
+                  .style("font-size", fontSize + "px");
+        labels.exit().remove();
+        return labels;
+    }
+
+    var _tcDrawCreateAxis = function(topSvg, subSvg, axisSel, axisData, axisScales, fontSize) {
+        var axis = topSvg.selectAll(subSvg)
+                         .selectAll(axisSel)
+                         .data(axisData);
+        axis.attr("class", function(d){ return d.cls; })
+            .attr("transform", function(d) { return d.trans; });
+        axis.enter()
+                .append("g")
+                .attr("transform", function(d) { return  d.trans; })
+                .attr("class", function(d){ return d.cls; });
+        axis.exit().remove();
+        for (var i = 0; i < axisScales.length; i++) {
+            topSvg.selectAll(subSvg)
+                  .selectAll(axisScales[i].group)
+                  .call(axisScales[i].scale)
+                  .selectAll("text")
+                  .style("font-size", fontSize + "px")
+                  .style("text-anchor", "start");
+        }
+        return axis;
+    }
+
+    var _tcDrawCreateBrushRects = function(topSvg, subSvg, rectSel, brushRectsData) {
+        var brushRects = topSvg.selectAll(subSvg)
+                               .selectAll(rectSel)
+                               .data(brushRectsData);
+        brushRects.attr("x", function(d) { return d.x; })
+                  .attr("y", function(d) { return d.y; })
+                  .attr("width", function(d) { return d.width; })
+                  .attr("height", function(d) { return d.height; })
+                  .attr("fill", function(d) { return d.color; });
+        brushRects.enter()
+                      .append("rect")
+                      .attr("x", function(d) { return d.x; })
+                      .attr("y", function(d) { return d.y; })
+                      .attr("rx", function(d) { return d.rx; })
+                      .attr("ry", function(d) { return d.ry; })
+                      .attr("width", function(d) { return d.width; })
+                      .attr("height", function(d) { return d.height; })
+                      .attr("class", function(d) { return d.cls; })
+                      .attr("fill", function(d) { return d.color; });
+        brushRects.exit().remove();
+        return brushRects;
+    }
+
+    var _tcDrawCreateBrush = function(topSvg, subSvg, brushSel, brushData, brushScales) {
+        var brush = topSvg.selectAll(subSvg)
+                          .selectAll(brushSel)
+                          .data(brushData)
+        brush.attr("class", function(d){ return d.cls; })
+        brush.enter()
+                 .append("g")
+                 .attr("class", function(d){ return d.cls; })
+        brush.exit().remove();
+        for (var i = 0; i < brushScales.length; i++) {
+            if (brushScales[i].type == "x") {
+                topSvg.selectAll(subSvg)
+                      .selectAll(brushScales[i].group)
+                      .call(brushScales[i].scale)
+                      .selectAll("rect")
+                          .attr("height", brushScales[i].height)
+            }
+        }
+        return brush;
+    }
+
+    var _tcDrawActorsSummaryBarChart = function(self, source, onTaskClick, commonData) {
+        if (source.actors == null || !source.settings.drawActorsSummaryBarChart) {
+            return;
+        }
+        // get need param
+        if (commonData == null) {
+            commonData = _tcGetCommonData(source);
+        }
+        var maxNameLen = 0;
+        for (actorId in source.actors) {
+            var len = _tcGetStringLength(source.actors[actorId].name);
+            if (maxNameLen < len) {
+                maxNameLen = len;
+            }
+        }
+        // create summary data
+        var actors = [];
+	var count = 0;
+	var tasksMax = 0;
+        for (actorId in source.actors) {
+		var actor = {
+		    name: actorId,
+		    color: _tcGetColor(count),
+		    taskSize: source.actors[actorId].tasks.length,
+		    taskId: null,
+		    clickEventArg: null
+		}
+		if (tasksMax < source.actors[actorId].tasks.length) {
+			tasksMax = source.actors[actorId].tasks.length;
+		}
+		actors.push(actor);
+		count += 1;
+	}
+        // sort
+        var sortedActors =  d3.values(actors).sort(function(a, b){ return d3.descending(a.taskSize, b.taskSize); });
+        // defines
+        var brushEndCb = function() {
+            var extent = d3.event.target.extent();
+            source.settings.actorsSummaryBarChart.viewRange.from = extent[0];
+            source.settings.actorsSummaryBarChart.viewRange.to = extent[1];
+            _tcDrawActorsSummaryBarChart(self, source, onTaskClick, null);
+        }
+        var fontSize = source.settings.fontSize;
+        var yPadding = 8;
+        var xOffset = ((maxNameLen * fontSize)/1.8) + fontSize + yPadding;
+        var axisHeight = 8 + fontSize + yPadding + fontSize + yPadding; 
+        var yOffset = axisHeight;
+        var brushHeight = source.settings.brushHeight + yPadding;
+        var barMaxHeight = source.settings.actorsSummaryBarChart.barMaxHeight;
+        var canvasHeight = barMaxHeight * sortedActors.length; 
+        var canvasWidth = source.settings.width - xOffset;
+        var svgHeight = yOffset + canvasHeight + axisHeight + brushHeight + 20;
+        var svgWidth = xOffset + canvasWidth;
+        var xmax = tasksMax;
+        var brushFromTo = _tcAdjustBlushValue(source.settings.actorsSummaryBarChart.viewRange.from,
+                                              source.settings.actorsSummaryBarChart.viewRange.to,
+                                              0,
+                                              xmax);
+        var zoom = xmax / (brushFromTo[1] - brushFromTo[0]);
+        if ((brushFromTo[1] - brushFromTo[0]) == 0) {
+           zoom = 1;
+        }
+        
+        var x = d3.scale.linear()
+                        .domain([0, xmax])
+                        .range([0, canvasWidth]);
+        var axisX = d3.scale.linear()
+                             .domain([0, xmax])
+                             .range([0, canvasWidth * zoom]);
+        var y = d3.scale.linear()
+                        .domain([0, 1])
+                        .range([0, barMaxHeight]);
+        var brushY = d3.scale.linear()
+                              .domain([0, sortedActors.length])
+                              .range([0, brushHeight - yPadding]);
+        var xAxisTop = d3.svg.axis()
+                             .scale(axisX)
+                             .orient("top")
+                             .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                             .tickSize(8, 4, 2)
+        var xAxisBottom = d3.svg.axis()
+                                .scale(axisX)
+                                .orient("bottom")
+                                .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                .tickSize(8, 4, 2)
+        var xBrushScale = d3.svg.brush().x(x)
+                                        .on("brushend", brushEndCb)
+                                        .extent(_tcGetBrushExtent(source.settings.actorsSummaryBarChart.viewRange, 0, xmax));
+        // convert data
+        var topSvgData = [{cls: "actorsSummaryBarChartSvg",
+                           width: svgWidth,
+                           height: svgHeight,
+                           viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + svgHeight }];
+        var subSvgsData = [{cls: "actorsSummaryBarChartRectsSvg actorsSummaryBarChartSubSvg",
+                            x: xOffset,
+                            y: yOffset,
+                            width: canvasWidth,
+                            height: canvasHeight,
+                            preserveAspectRatio: "none",
+                            viewBox: "" + x(brushFromTo[0]) + " " + 0 + " " + (canvasWidth / zoom) + " " + canvasHeight },
+                           {cls: "actorsSummaryBarChartAxisSvg actorsSummaryBarChartSubSvg",
+                            x: xOffset,
+                            y: 0,
+                            preserveAspectRatio: "xMidYMid",
+                            width: canvasWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            viewBox: "" + axisX(brushFromTo[0]) + " " + 0 + " " + canvasWidth + " " + (yOffset +canvasHeight + axisHeight) },
+                           {cls: "actorsSummaryBarChartLinesSvg actorsSummaryBarChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "actorsSummaryBarChartLabelsSvg actorsSummaryBarChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "actorsSummaryBarChartBrushSvg actorsSummaryBarChartSubSvg",
+                            x: xOffset,
+                            y: yOffset + canvasHeight + axisHeight,
+                            width: canvasWidth,
+                            height: brushHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + canvasWidth + " " + brushHeight }];
+        var axisData = [{trans: "translate(0, " + yOffset + ")" ,
+                         cls: "actorsSummaryBarChartXAxisTop actorsSummaryBarChartAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " + (yOffset + canvasHeight) + ")" ,
+                         cls: "actorsSummaryBarChartXAxisBottom actorsSummaryBarChartAxis",
+                         scale: "x"}];
+        var axisScales = [{group: "g.actorsSummaryBarChartXAxisTop",
+                           scale: xAxisTop},
+                          {group: "g.actorsSummaryBarChartXAxisBottom",
+                           scale: xAxisBottom}];
+        var brushData = [{cls:"actorsSummaryBarChartXBrush actorsSummaryBarChartBrush"}];
+        var brushScales = [{group: "g.actorsSummaryBarChartXBrush",
+                            scale: xBrushScale,
+                            type: "x",
+                            height: brushHeight - yPadding}];
+        var tasksRectsData = [];
+        var linesData = [];
+        var labelsData = [];
+        var brushRectsData = [];
+        brushRectsData.push({cls:"actorsSummaryBarChartBrushBackgroundRect actorsSummaryBarChartBrushRect",
+                            x: 0,
+                            y: 0,
+                            ry: 0,
+                            ry: 0,
+                            width: canvasWidth,
+                            height: brushHeight - yPadding,
+                            fill: "" });
+        for (var i = 0; i < sortedActors.length; i++) {
+            linesData.push({ x1: xOffset,
+                             y1: y(i) + yOffset,
+                             x2: canvasWidth + xOffset,
+                             y2: y(i) + yOffset,
+                             cls: "actorsSummaryBarChartLaneLine actorsSummaryBarChartLine" });
+            labelsData.push({ x: 0,
+                              y: yOffset + y(i) + (barMaxHeight / 2) + (fontSize / 2),
+                              label: sortedActors[i].name,
+                              cls: "actorsSummaryBarChartLabel" });
+            tasksRectsData.push({ x: x(0),
+                                  y: y(i) + (barMaxHeight/16),
+                                  rx: 6,
+                                  ry: 6,
+                                  width: x(sortedActors[i].taskSize) - x(0),
+                                  height: barMaxHeight - ((barMaxHeight/16) * 2),
+                                  taskId: null,
+                                  color: sortedActors[i].color,
+                                  cls: "actorsSummaryBarChartTaskRect" }); 
+            brushRectsData.push({ x: x(0),
+                                  y: brushY(i),
+                                  rx: 3,
+                                  ry: 3,
+                                  width: x(sortedActors[i].taskSize) - x(0),
+                                  height: (brushHeight - yPadding) / sortedActors.length,
+                                  color: sortedActors[i].color,
+                                  cls: "actorsSummaryBarChartBrushTaskRect actorsSummaryBarChartBrushRect" }); 
+        }
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "actorsSummaryBarChartCanvasLine actorsSummaryBarChartLine" });
+        linesData.push({ x1: canvasWidth + xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls:  "actorsSummaryBarChartCanvasLine actorsSummaryBarChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: yOffset,
+                         cls: "actorsSummaryBarChartCanvasLine actorsSummaryBarChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: canvasHeight + yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "actorsSummaryBarChartCanvasLine actorsSummaryBarChartLine" });
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yPadding + fontSize,
+                          label: "(tasks)",
+                          cls: "actorsSummaryBarChartLabel"});
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yOffset + canvasHeight + axisHeight - yPadding,
+                          label: "(tasks)",
+                          cls: "actorsSummaryBarChartLabel"});
+        labelsData.push({ x: 0,
+                          y: yOffset - yPadding,
+                          label: "(actors)",
+                          cls: "actorsSummaryBarChartLabel" });
+
+        var containers = _tcDrawCreateContainers(self,
+                                                 "div.actorsSummaryBarChart",
+                                                 commonData.containers);
+        var scrollButtons = _tcDrawCreateScrollButtons(self,
+                                                       "div.actorsSummaryBarChart",
+                                                       commonData.scrolls);
+        var summaryButtonData = [{ label: "detail" }];
+        var summaryButton = _tcDrawCreateSummaryButton(self,
+                                                       "div.actorsSummaryBarChart",
+                                                       summaryButtonData,
+                                                       function() {
+                                                           source.settings.drawActorsSummaryBarChart = false;
+                                                           _tcDraw(self, source, onTaskClick);
+                                                       });
+        var topSvg = _tcDrawCreateTopSvg(self,
+                                         "div.actorsSummaryBarChart",
+                                         topSvgData);
+        var subSvgs = _tcDrawCreateSubSvgs(topSvg,
+                                           "svg.actorsSummaryBarChartSubSvg",
+                                           subSvgsData);
+        var tasksRects = _tcDrawCreateTasksRects(topSvg,
+                                                 "svg.actorsSummaryBarChartRectsSvg",
+                                                 "actorsSummaryBarChartTaskRect",
+                                                 tasksRectsData,
+                                                 source,
+                                                 null);
+        var lines = _tcDrawCreateLines(topSvg,
+                                       "svg.actorsSummaryBarChartLinesSvg",
+                                       "line.actorsSummaryBarChartLine",
+                                       linesData);
+        var labels = _tcDrawCreateLabels(topSvg,
+                                         "svg.actorsSummaryBarChartLabelsSvg",
+                                         "text.actorsSummaryBarChartLabel",
+                                         labelsData,
+                                         fontSize);
+        var axis = _tcDrawCreateAxis(topSvg,
+                                     "svg.actorsSummaryBarChartAxisSvg",
+                                     "g.actorsSummaryBarChartAxis",
+                                     axisData,
+                                     axisScales,
+                                     fontSize);
+        var brushRects = _tcDrawCreateBrushRects(topSvg,
+                                                  "svg.actorsSummaryBarChartBrushSvg",
+                                                  "rect.actorsSummaryBarChartBrushRect",
+                                                   brushRectsData);
+        var brush = _tcDrawCreateBrush(topSvg,
+                                       "svg.actorsSummaryBarChartBrushSvg",
+                                       "g.actorsSummaryBarChartBrush",
+                                       brushData,
+                                       brushScales);
+    }
+
+    var _tcDrawActorsSwimlaneChart = function(self, source, onTaskClick, commonData) {
+        if (source.actors == null || !source.settings.drawActorsSwimlaneChart) {
+            return;
+        }
+        // get need param
+        if (commonData == null) {
+            commonData = _tcGetCommonData(source);
+        }
+        var maxNameLen = 0;
+        for (actorId in source.actors) {
+            var len = _tcGetStringLength(source.actors[actorId].name);
+            if (maxNameLen < len) {
+                maxNameLen = len;
+            }
+        }
+        // defines
+        var brushEndCb = function() {
+            var extent = d3.event.target.extent();
+            source.settings.actorsSwimlaneChart.viewRange.from = extent[0];
+            source.settings.actorsSwimlaneChart.viewRange.to = extent[1];
+            _tcDrawActorsSwimlaneChart(self, source, onTaskClick, null);
+        }
+        var fontSize = source.settings.fontSize;
+        var yPadding = 8;
+        var xOffset = ((maxNameLen * fontSize) / 1.8) + fontSize + yPadding;
+        var axisHeight = 8 + ((fontSize + yPadding) * 2) + fontSize; 
+        var yOffset = axisHeight;
+        var brushHeight = source.settings.brushHeight + yPadding;
+        var barMaxHeight = source.settings.actorsSwimlaneChart.barMaxHeight;
+        var canvasHeight = barMaxHeight * commonData.tasks.length; 
+        var canvasWidth = source.settings.width - xOffset;
+        var svgHeight = yOffset + canvasHeight + axisHeight + brushHeight + 20;
+        var svgWidth = xOffset + canvasWidth;
+        var xmax = commonData.toMax;
+        var startTime = source.settings.startTime;
+        if (startTime == null) {
+            startTime = commonData.fromMin;
+        }
+        var brushFromTo = _tcAdjustBlushValue(source.settings.actorsSwimlaneChart.viewRange.from,
+                                              source.settings.actorsSwimlaneChart.viewRange.to,
+                                              startTime,
+                                              xmax);
+        var zoom = (xmax - startTime) / (brushFromTo[1] - brushFromTo[0]);
+        if ((brushFromTo[1] - brushFromTo[0]) == 0) {
+           zoom = 1;
+        }
+        var x = d3.scale.linear()
+                        .domain([startTime, xmax])
+                        .range([0, canvasWidth]);
+        var axisX = d3.scale.linear()
+                             .domain([startTime, xmax])
+                             .range([0, canvasWidth * zoom]);
+        var axisXRel = d3.scale.linear()
+                               .domain([0, xmax - startTime])
+                               .range([0, canvasWidth * zoom]);
+        var y = d3.scale.linear()
+                        .domain([0, 1])
+                        .range([0, barMaxHeight]);
+        var brushY = d3.scale.linear()
+                              .domain([0, commonData.tasks.length])
+                              .range([0, brushHeight - yPadding]);
+        var xAxisTop = d3.svg.axis()
+                             .scale(axisX)
+                             .orient("top")
+                             .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                             .tickSize(8, 4, 2)
+                             .tickPadding(fontSize + 3)
+                             .tickFormat(function(d) { return _tcTimestampFormat(d, brushFromTo); })
+        var xRelAxisTop = d3.svg.axis()
+                                .scale(axisXRel)
+                                .orient("top")
+                                .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                .tickSize(8, 4, 2)
+                                .tickFormat(function(d) { return _tcElapsedTimeFormat(d, brushFromTo); })
+        var xAxisBottom = d3.svg.axis()
+                                .scale(axisX)
+                                .orient("bottom")
+                                .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                .tickSize(8, 4, 2)
+                                .tickPadding(fontSize + 3)
+                                .tickFormat(function(d) { return _tcTimestampFormat(d, brushFromTo); })
+        var xRelAxisBottom = d3.svg.axis()
+                                   .scale(axisXRel)
+                                   .orient("bottom")
+                                   .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                   .tickSize(8, 4, 2)
+                                   .tickFormat(function(d) { return _tcElapsedTimeFormat(d, brushFromTo); })
+        var xBrushScale = d3.svg.brush().x(x)
+                                        .on("brushend", brushEndCb)
+                                        .extent(_tcGetBrushExtent(source.settings.actorsSwimlaneChart.viewRange, startTime, xmax));
+        // convert data
+        var topSvgData = [{cls: "actorsSwimlaneChartSvg",
+                           width: svgWidth,
+                           height: svgHeight,
+                           viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + svgHeight }];
+        var subSvgsData = [{cls: "actorsSwimlaneChartRectsSvg actorsSwimlaneChartSubSvg",
+                            x: xOffset,
+                            y: yOffset,
+                            width: canvasWidth,
+                            height: canvasHeight,
+                            preserveAspectRatio: "none",
+                            viewBox: "" + x(brushFromTo[0]) + " " + 0 + " " + (canvasWidth / zoom) + " " + canvasHeight },
+                           {cls: "actorsSwimlaneChartAxisSvg actorsSwimlaneChartSubSvg",
+                            x: xOffset,
+                            y: 0,
+                            preserveAspectRatio: "xMidYMid",
+                            width: canvasWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            viewBox: "" + axisX(brushFromTo[0]) + " " + 0 + " " + canvasWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "actorsSwimlaneChartLinesSvg actorsSwimlaneChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "actorsSwimlaneChartLabelsSvg actorsSwimlaneChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "actorsSwimlaneChartBrushSvg actorsSwimlaneChartSubSvg",
+                            x: xOffset,
+                            y: yOffset + canvasHeight + axisHeight,
+                            width: canvasWidth,
+                            height: brushHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + canvasWidth + " " + brushHeight }];
+        var axisData = [{trans: "translate(0, " +  yOffset + ")" ,
+                         cls: "actorsSwimlaneChartXAxisTop actorsSwimlaneChartAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " +  yOffset + ")" ,
+                         cls: "actorsSwimlaneChartXRelAxisTop actorsSwimlaneChartRelAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " + (yOffset + canvasHeight) + ")" ,
+                         cls: "actorsSwimlaneChartXAxisBottom actorsSwimlaneChartAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " + (yOffset + canvasHeight) + ")" ,
+                         cls: "actorsSwimlaneChartXRelAxisBottom actorsSwimlaneChartRelAxis",
+                         scale: "x"}];
+        var axisScales = [{group: "g.actorsSwimlaneChartXAxisTop",
+                           scale: xAxisTop},
+                          {group: "g.actorsSwimlaneChartXRelAxisTop",
+                           scale: xRelAxisTop},
+                          {group: "g.actorsSwimlaneChartXAxisBottom",
+                           scale: xAxisBottom},
+                          {group: "g.actorsSwimlaneChartXRelAxisBottom",
+                           scale: xRelAxisBottom}];
+        var brushData = [{cls:"actorsSwimlaneChartXBrush actorsSwimlaneChartBrush"}];
+        var brushScales = [{group: "g.actorsSwimlaneChartXBrush",
+                            scale: xBrushScale,
+                            type: "x",
+                            height: brushHeight - yPadding}];
+        var tasksRectsData = [];
+        var linesData = [];
+        var labelsData = [];
+        var brushRectsData = [];
+        var totalTaskCount = 0;
+        brushRectsData.push({cls:"actorsSwimlaneChartBrushBackgroundRect actorsSwimlaneChartBrushRect",
+                            x: 0,
+                            y: 0,
+                            ry: 0,
+                            ry: 0,
+                            width: canvasWidth,
+                            height: brushHeight - yPadding,
+                            fill: "" });
+        for (actorId in source.actors) {
+            var laneMaxHeight = barMaxHeight * source.actors[actorId].tasks.length;
+            linesData.push({ x1: xOffset,
+                             y1: y(totalTaskCount) + yOffset,
+                             x2: canvasWidth + xOffset,
+                             y2: y(totalTaskCount) + yOffset,
+                             cls: "actorsSwimlaneChartLaneLine actorsSwimlaneChartLine" });
+            labelsData.push({ x: 0,
+                              y: yOffset + y(totalTaskCount) + (laneMaxHeight / 2) + (fontSize / 2),
+                              label: source.actors[actorId].name,
+                              cls: "actorsSwimlaneChartLabel" });
+            for (var j = 0; j < source.actors[actorId].tasks.length; j++) {
+                var task = source.tasks[source.actors[actorId].tasks[j]];
+                tasksRectsData.push({ x: x(task.from),
+                                     y: y(totalTaskCount) + (barMaxHeight/16),
+                                     rx: 6,
+                                     ry: 6,
+                                     width: x(task.to) - x(task.from),
+                                     height: barMaxHeight - ((barMaxHeight/16) * 2),
+                                     taskId: source.actors[actorId].tasks[j],
+                                     color: task.color,
+                                     cls: "actorsSwimlaneChartTaskRect" }); 
+                brushRectsData.push({ x: x(task.from),
+                                     y: brushY(totalTaskCount),
+                                     rx: 3,
+                                     ry: 3,
+                                     width: x(task.to) - x(task.from),
+                                     height: (brushHeight - yPadding) / commonData.tasks.length,
+                                     color: task.color,
+                                     cls: "actorsSwimlaneChartBrushTaskRect actorsSwimlaneChartBrushRect" }); 
+                totalTaskCount += 1;
+            }
+        }
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "actorsSwimlaneChartCanvasLine actorsSwimlaneChartLine" });
+        linesData.push({ x1: canvasWidth + xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls:  "actorsSwimlaneChartCanvasLine actorsSwimlaneChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: yOffset,
+                         cls: "actorsSwimlaneChartCanvasLine actorsSwimlaneChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: canvasHeight + yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "actorsSwimlaneChartCanvasLine actorsSwimlaneChartLine" });
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yPadding + fontSize,
+                          label: "(time)",
+                          cls: "actorsSwimlaneChartLabel"});
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yOffset + canvasHeight + axisHeight - yPadding,
+                          label: "(time)",
+                          cls: "actorsSwimlaneChartLabel"});
+        labelsData.push({ x: 0,
+                          y: yOffset - yPadding,
+                          label: "(actors)",
+                          cls: "actorsSwimlaneChartLabel" });
+
+        var containers = _tcDrawCreateContainers(self,
+                                                 "div.actorsSwimlaneChart",
+                                                 commonData.containers);
+        var scrollButtons = _tcDrawCreateScrollButtons(self,
+                                                       "div.actorsSwimlaneChart",
+                                                       commonData.scrolls);
+        var summaryButtonData = [{ label: "summary",
+                                   cls: "tchartSummaryButton  ui-corner-all"}];
+        var summaryButton = _tcDrawCreateSummaryButton(self,
+                                                       "div.actorsSwimlaneChart",
+                                                       summaryButtonData,
+                                                       function() {
+                                                           source.settings.drawActorsSummaryBarChart = true;
+                                                           _tcDraw(self, source, onTaskClick);
+                                                       });
+        var topSvg = _tcDrawCreateTopSvg(self,
+                                         "div.actorsSwimlaneChart",
+                                         topSvgData);
+        var subSvgs = _tcDrawCreateSubSvgs(topSvg,
+                                           "svg.actorsSwimlaneChartSubSvg",
+                                           subSvgsData);
+        var tasksRects = _tcDrawCreateTasksRects(topSvg,
+                                                 "svg.actorsSwimlaneChartRectsSvg",
+                                                 "actorsSwimlaneChartTaskRect",
+                                                 tasksRectsData,
+                                                 source,
+                                                 onTaskClick);
+        var lines = _tcDrawCreateLines(topSvg,
+                                       "svg.actorsSwimlaneChartLinesSvg",
+                                       "line.actorsSwimlaneChartLine",
+                                       linesData);
+        var labels = _tcDrawCreateLabels(topSvg,
+                                         "svg.actorsSwimlaneChartLabelsSvg",
+                                         "text.actorsSwimlaneChartLabel",
+                                         labelsData,
+                                         fontSize);
+        var axis = _tcDrawCreateAxis(topSvg,
+                                     "svg.actorsSwimlaneChartAxisSvg",
+                                     "g.actorsSwimlaneChartAxis",
+                                     axisData,
+                                     axisScales,
+                                     fontSize);
+        var brushRects = _tcDrawCreateBrushRects(topSvg,
+                                                  "svg.actorsSwimlaneChartBrushSvg",
+                                                  "rect.actorsSwimlaneChartBrushRect",
+                                                   brushRectsData);
+        var brush = _tcDrawCreateBrush(topSvg,
+                                       "svg.actorsSwimlaneChartBrushSvg",
+                                       "g.actorsSwimlaneChartBrush",
+                                       brushData,
+                                       brushScales);
+    }
+
+    var _tcDrawTasksGanttChart = function(self, source, onTaskClick, commonData) {
+        if (!source.settings.drawTasksGanttChart) {
+            return;
+        }
+        // get need param
+        if (commonData == null) {
+            commonData = _tcGetCommonData(source);
+        }
+        var maxNameLen = 0;
+        for (var i = 0; i < commonData.tasks.length; i++) {
+            var len = _tcGetStringLength(commonData.tasks[i].name);
+            if (maxNameLen < len) {
+                maxNameLen = len;
+            }
+        }
+        // sort
+        var sortedTasks = d3.values(commonData.tasks).sort(function(a, b){ return d3.ascending(a.from, b.from); });
+        var start = source.settings.tasksGanttChart.start;
+        var end = start + source.settings.tasksGanttChart.step;
+	if (start > sortedTasks.length - 1) {
+            start = 0;
+        }
+        if (end > sortedTasks.length) {
+            end = sortedTasks.length;
+        }
+	sortedTasks = sortedTasks.slice(start, end);
+        // defines
+        var brushEndCb = function() {
+            var extent = d3.event.target.extent();
+            source.settings.tasksGanttChart.viewRange.from = extent[0];
+            source.settings.tasksGanttChart.viewRange.to = extent[1];
+            _tcDrawTasksGanttChart(self, source, onTaskClick, null);
+        }
+ 
+        var fontSize = source.settings.fontSize;
+        var yPadding = 8;
+        var xOffset = ((maxNameLen * fontSize) / 1.8) + fontSize + yPadding;
+        var axisHeight = 8 + ((fontSize + yPadding) * 2) + fontSize;
+        var yOffset = axisHeight
+        var brushHeight = source.settings.brushHeight + yPadding;
+        var barMaxHeight = source.settings.tasksGanttChart.barMaxHeight;
+        var laneMaxHeight = source.settings.tasksGanttChart.laneMaxHeight;
+        var canvasHeight = laneMaxHeight * sortedTasks.length; 
+        var canvasWidth = source.settings.width - xOffset;
+        var svgHeight = yOffset + canvasHeight + axisHeight + brushHeight + 20;
+        var svgWidth = xOffset + canvasWidth;
+        var xmax = commonData.toMax;
+        var startTime = source.settings.startTime;
+        if (startTime == null) {
+            startTime = commonData.fromMin;
+        }
+        var brushFromTo = _tcAdjustBlushValue(source.settings.tasksGanttChart.viewRange.from,
+                                              source.settings.tasksGanttChart.viewRange.to,
+                                              startTime,
+                                              xmax);
+        var zoom = (xmax - startTime) / (brushFromTo[1] - brushFromTo[0]);
+        if ((brushFromTo[1] - brushFromTo[0]) == 0) {
+           zoom = 1;
+        }
+        var x = d3.scale.linear()
+                        .domain([startTime, xmax])
+                        .range([0, canvasWidth]);
+        var axisX = d3.scale.linear()
+                            .domain([startTime, xmax])
+                            .range([0, canvasWidth * zoom]);
+        var axisXRel = d3.scale.linear()
+                               .domain([0, xmax - startTime])
+                               .range([0, canvasWidth * zoom]);
+        var y = d3.scale.linear()
+                        .domain([0, 1])
+                        .range([0, laneMaxHeight]);
+        var brushY = d3.scale.linear()
+                              .domain([0, sortedTasks.length])
+                              .range([0, brushHeight - yPadding]);
+        var xAxisTop = d3.svg.axis()
+                             .scale(axisX)
+                             .orient("top")
+                             .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                             .tickSize(8, 4, 2)
+                             .tickPadding(fontSize + 3)
+                             .tickFormat(function(d) { return _tcTimestampFormat(d, brushFromTo); })
+        var xRelAxisTop = d3.svg.axis()
+                                .scale(axisXRel)
+                                .orient("top")
+                                .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                .tickSize(8, 4, 2)
+                                .tickFormat(function(d) { return _tcElapsedTimeFormat(d, brushFromTo); })
+        var xAxisBottom = d3.svg.axis()
+                                .scale(axisX)
+                                .orient("bottom")
+                                .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                .tickSize(8, 4, 2)
+                                .tickPadding(fontSize + 3)
+                                .tickFormat(function(d) { return _tcTimestampFormat(d, brushFromTo); })
+        var xRelAxisBottom = d3.svg.axis()
+                                   .scale(axisXRel)
+                                   .orient("bottom")
+                                   .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                   .tickSize(8, 4, 2)
+                                   .tickFormat(function(d) { return _tcElapsedTimeFormat(d, brushFromTo); })
+        var xBrushScale = d3.svg.brush().x(x)
+                                        .on("brushend", brushEndCb)
+                                        .extent(_tcGetBrushExtent(source.settings.tasksGanttChart.viewRange, startTime, xmax));
+        // convert data
+        var topSvgData = [{cls: "tasksGanttChartSvg",
+                           width: svgWidth,
+                           height: svgHeight,
+                           viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + svgHeight }];
+        var subSvgsData = [{cls: "tasksGanttChartRectsSvg tasksGanttChartSubSvg",
+                            x: xOffset,
+                            y: yOffset,
+                            width: canvasWidth,
+                            height: canvasHeight,
+                            preserveAspectRatio: "none",
+                            viewBox: "" + x(brushFromTo[0]) + " " + 0 + " " + (canvasWidth / zoom) + " " + canvasHeight },
+                           {cls: "tasksGanttChartAxisSvg tasksGanttChartSubSvg",
+                            x: xOffset,
+                            y: 0,
+                            preserveAspectRatio: "xMidYMid",
+                            width: canvasWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            viewBox: "" + axisX(brushFromTo[0]) + " " + 0 + " " + canvasWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "tasksGanttChartLinesSvg tasksGanttChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "tasksGanttChartLabelsSvg tasksGanttChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "tasksGanttChartBrushSvg tasksGanttChartSubSvg",
+                            x: xOffset,
+                            y: yOffset + canvasHeight + axisHeight,
+                            width: canvasWidth,
+                            height: brushHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + canvasWidth + " " + brushHeight }];
+        var axisData = [{trans: "translate(0, " + (yOffset) + ")" ,
+                         cls: "tasksGanttChartXAxisTop tasksGanttChartAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " + (yOffset) + ")" ,
+                         cls: "tasksGanttChartXRelAxisTop tasksGanttChartRelAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " + (yOffset + canvasHeight) + ")" ,
+                         cls: "tasksGanttChartXAxisBottom tasksGanttChartAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " + (yOffset + canvasHeight) + ")" ,
+                         cls: "tasksGanttChartXRelAxisBottom tasksGanttChartRelAxis",
+                         scale: "x"}];
+        var axisScales = [{group: "g.tasksGanttChartXAxisTop",
+                           scale: xAxisTop},
+                          {group: "g.tasksGanttChartXRelAxisTop",
+                           scale: xRelAxisTop},
+                          {group: "g.tasksGanttChartXAxisBottom",
+                           scale: xAxisBottom},
+                          {group: "g.tasksGanttChartXRelAxisBottom",
+                           scale: xRelAxisBottom}];
+        var brushData = [{cls:"tasksGanttChartXBrush tasksGanttChartBrush"}];
+        var brushScales = [{group: "g.tasksGanttChartXBrush",
+                            scale: xBrushScale,
+                            type: "x",
+                            height: brushHeight - yPadding}];
+        var tasksRectsData = [];
+        var linesData = [];
+        var labelsData = [];
+        var brushRectsData = [];
+        brushRectsData.push({cls:"tasksGanttChartBrushBackgroundRect tasksGanttChartBrushRect",
+                            x: 0,
+                            y: 0,
+                            ry: 0,
+                            ry: 0,
+                            width: canvasWidth,
+                            height: brushHeight - yPadding,
+                            fill: "" });
+        for (var i = 0; i < sortedTasks.length; i++) {
+            linesData.push({ x1: xOffset,
+                             y1: y(i) + yOffset,
+                             x2: canvasWidth + xOffset,
+                             y2: y(i) + yOffset,
+                             cls: "tasksGanttChartLaneLine tasksGanttChartLine" });
+            labelsData.push({ x: 0,
+                              y: yOffset + y(i) + (laneMaxHeight / 2) + (fontSize / 2),
+                              label: sortedTasks[i].name,
+                              cls: "tasksGanttChartLabel" });
+            tasksRectsData.push({ x: x(sortedTasks[i].from),
+                                  y: y(i) + ((laneMaxHeight - barMaxHeight) / 2),
+                                  rx: 6,
+                                  ry: 6,
+                                  width: x(sortedTasks[i].to) - x(sortedTasks[i].from),
+                                  height: barMaxHeight - ((barMaxHeight/16) * 2),
+                                  taskId: sortedTasks[i].taskId,
+                                  color: sortedTasks[i].color,
+                                  cls: "tasksGanttChartTaskRect" }); 
+            brushRectsData.push({ x: x(sortedTasks[i].from),
+                                  y: brushY(i),
+                                  rx: 3,
+                                  ry: 3,
+                                  width: x(sortedTasks[i].to) - x(sortedTasks[i].from),
+                                  height: (brushHeight - yPadding) / sortedTasks.length,
+                                  color: sortedTasks[i].color,
+                                  cls: "tasksGanttChartBrushTaskRect tasksGanttChartBrushRect" }); 
+        }
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "tasksGanttChartCanvasLine tasksGanttChartLine" });
+        linesData.push({ x1: canvasWidth + xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls:  "tasksGanttChartCanvasLine tasksGanttChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: yOffset,
+                         cls: "tasksGanttChartCanvasLine tasksGanttChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: canvasHeight + yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "tasksGanttChartCanvasLine tasksGanttChartLine" });
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yPadding + fontSize,
+                          label: "(time)",
+                          cls: "tasksGanttChartLabel"});
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yOffset + canvasHeight + axisHeight - yPadding,
+                          label: "(time)",
+                          cls: "tasksGanttChartLabel"});
+        labelsData.push({ x: 0,
+                          y: yOffset - yPadding,
+                          label: "(tasks)",
+                          cls: "tasksGanttChartLabel" });
+
+        var containers = _tcDrawCreateContainers(self,
+                                                 "div.tasksGanttChart",
+                                                 commonData.containers);
+        var scrollButtons = _tcDrawCreateScrollButtons(self,
+                                                       "div.tasksGanttChart",
+                                                       commonData.scrolls);
+        var prevNextInputs = _tcDrawCreatePrevNextInputs(self,
+                                                           "div.tasksGanttChart",
+                                                           source.settings.tasksGanttChart.start,
+                                                           source.settings.tasksGanttChart.step,
+                                                           function() {
+                                                               source.settings.tasksGanttChart.start = 0; 
+                                                               source.settings.tasksGanttChart.step = commonData.tasks.length; 
+                                                               _tcDrawTasksGanttChart(self, source, onTaskClick, null);
+                                                           },
+                                                           function() {
+                                                               source.settings.tasksGanttChart.start -= source.settings.tasksGanttChart.step;
+                                                               if (source.settings.tasksGanttChart.start < 0) {
+                                                                   source.settings.tasksGanttChart.start = 0;
+                                                               }
+                                                               _tcDrawTasksGanttChart(self, source, onTaskClick, null);
+                                                           },
+                                                           function(target, event) {
+                                                               var start = parseInt(event.target.value) - 1;
+                                                               if (typeof start === "number" && !isNaN(start) && start >= 0) {
+                                                                   source.settings.tasksGanttChart.start = start;
+                                                               }
+                                                               _tcDrawTasksGanttChart(self, source, onTaskClick, null);
+                                                           },
+                                                           function(target, event) {
+                                                               var step = parseInt(event.target.value);
+                                                               if (typeof step === "number" && !isNaN(step) && step >= 0) {
+                                                                   source.settings.tasksGanttChart.step = step;
+                                                               }
+                                                               _tcDrawTasksGanttChart(self, source, onTaskClick, null);
+                                                           },
+                                                           function() {
+                                                               if (source.settings.tasksGanttChart.start + source.settings.tasksGanttChart.step <= commonData.tasks.length - 1) {
+                                                                   source.settings.tasksGanttChart.start += source.settings.tasksGanttChart.step;
+                                                               }
+                                                               _tcDrawTasksGanttChart(self, source, onTaskClick, null);
+                                                           });
+        var topSvg = _tcDrawCreateTopSvg(self,
+                                         "div.tasksGanttChart",
+                                         topSvgData);
+        var subSvgs = _tcDrawCreateSubSvgs(topSvg,
+                                           "svg.tasksGanttChartSubSvg",
+                                           subSvgsData);
+        var tasksRects = _tcDrawCreateTasksRects(topSvg,
+                                                 "svg.tasksGanttChartRectsSvg",
+                                                 "tasksGanttChartTaskRect",
+                                                 tasksRectsData,
+                                                 source,
+                                                 onTaskClick);
+        var lines = _tcDrawCreateLines(topSvg,
+                                       "svg.tasksGanttChartLinesSvg",
+                                       "line.tasksGanttChartLine",
+                                       linesData);
+        var labels = _tcDrawCreateLabels(topSvg,
+                                         "svg.tasksGanttChartLabelsSvg",
+                                         "text.tasksGanttChartLabel",
+                                         labelsData,
+                                         fontSize);
+        var axis = _tcDrawCreateAxis(topSvg,
+                                     "svg.tasksGanttChartAxisSvg",
+                                     "g.tasksGanttChartAxis",
+                                     axisData,
+                                     axisScales,
+                                     fontSize);
+        var brushRects = _tcDrawCreateBrushRects(topSvg,
+                                                  "svg.tasksGanttChartBrushSvg",
+                                                  "rect.tasksGanttChartBrushRect",
+                                                   brushRectsData);
+        var brush = _tcDrawCreateBrush(topSvg,
+                                       "svg.tasksGanttChartBrushSvg",
+                                       "g.tasksGanttChartBrush",
+                                       brushData,
+                                       brushScales);
+    }
+
+    var _tcDrawTasksBarChart = function(self, source, onTaskClick, commonData) {
+        if (!source.settings.drawTasksBarChart) {
+            return;
+        }
+        // get need param
+        if (commonData == null) {
+            commonData = _tcGetCommonData(source);
+        }
+        var maxNameLen = 0;
+        for (var i = 0; i < commonData.tasks.length; i++) {
+            var len = _tcGetStringLength(commonData.tasks[i].name);
+            if (maxNameLen < len) {
+                maxNameLen = len;
+            }
+        }
+        // sort
+        var sortedTasks =  d3.values(commonData.tasks).sort(function(a, b){ return d3.descending(a.elapse, b.elapse); });
+        var head = source.settings.tasksBarChart.head;
+        var tail = source.settings.tasksBarChart.tail;
+        var snipdot = {
+            taskId: null,
+            name: "　.",
+            elapse: 0, 
+            taskId: null,
+            clickEventArg: null,
+            color: "#000000"
+        };
+        var snip = {
+            taskId: null,
+            name: "(snip)",
+            elapse: 0, 
+            taskId: null,
+            clickEventArg: null,
+            color: "#000000"
+        };
+        if (sortedTasks.length > head + tail) {
+		sortedTasks.splice(head, sortedTasks.length - (head + tail), snipdot, snipdot, snipdot, snip, snipdot, snipdot, snipdot);
+        }
+        // defines
+        var brushEndCb = function() {
+            var extent = d3.event.target.extent();
+            source.settings.tasksBarChart.viewRange.from = extent[0];
+            source.settings.tasksBarChart.viewRange.to = extent[1];
+            _tcDrawTasksBarChart(self, source, onTaskClick, null);
+        }
+        var fontSize = source.settings.fontSize;
+        var yPadding = 8;
+        var xOffset = ((maxNameLen * fontSize)/1.8) + fontSize + yPadding;
+        var axisHeight = 8 + fontSize + yPadding + fontSize + yPadding; 
+        var yOffset = axisHeight;
+        var brushHeight = source.settings.brushHeight + yPadding;
+        var barMaxHeight = source.settings.tasksBarChart.barMaxHeight;
+        var canvasHeight = barMaxHeight * sortedTasks.length; 
+        var canvasWidth = source.settings.width - xOffset;
+        var svgHeight = yOffset + canvasHeight + axisHeight + brushHeight + 20;
+        var svgWidth = xOffset + canvasWidth;
+        var xmax = commonData.elapseMax
+        var brushFromTo = _tcAdjustBlushValue(source.settings.tasksBarChart.viewRange.from,
+                                              source.settings.tasksBarChart.viewRange.to,
+                                              0,
+                                              xmax);
+        var zoom = xmax / (brushFromTo[1] - brushFromTo[0]);
+        if ((brushFromTo[1] - brushFromTo[0]) == 0) {
+           zoom = 1;
+        }
+        
+        var x = d3.scale.linear()
+                        .domain([0, xmax])
+                        .range([0, canvasWidth]);
+        var axisX = d3.scale.linear()
+                             .domain([0, xmax])
+                             .range([0, canvasWidth * zoom]);
+        var y = d3.scale.linear()
+                        .domain([0, 1])
+                        .range([0, barMaxHeight]);
+        var brushY = d3.scale.linear()
+                              .domain([0, sortedTasks.length])
+                              .range([0, brushHeight - yPadding]);
+        var xAxisTop = d3.svg.axis()
+                             .scale(axisX)
+                             .orient("top")
+                             .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                             .tickSize(8, 4, 2)
+                             .tickFormat(function(d) { return _tcElapsedTimeFormat(d, brushFromTo); })
+        var xAxisBottom = d3.svg.axis()
+                                .scale(axisX)
+                                .orient("bottom")
+                                .ticks((canvasWidth / commonData.tickWidth) * zoom)
+                                .tickSize(8, 4, 2)
+                                .tickFormat(function(d) { return _tcElapsedTimeFormat(d, brushFromTo); })
+        var xBrushScale = d3.svg.brush().x(x)
+                                        .on("brushend", brushEndCb)
+                                        .extent(_tcGetBrushExtent(source.settings.tasksBarChart.viewRange, 0, xmax));
+        // convert data
+        var topSvgData = [{cls: "tasksBarChartSvg",
+                           width: svgWidth,
+                           height: svgHeight,
+                           viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + svgHeight }];
+        var subSvgsData = [{cls: "tasksBarChartRectsSvg tasksBarChartSubSvg",
+                            x: xOffset,
+                            y: yOffset,
+                            width: canvasWidth,
+                            height: canvasHeight,
+                            preserveAspectRatio: "none",
+                            viewBox: "" + x(brushFromTo[0]) + " " + 0 + " " + (canvasWidth / zoom) + " " + canvasHeight },
+                           {cls: "tasksBarChartAxisSvg tasksBarChartSubSvg",
+                            x: xOffset,
+                            y: 0,
+                            preserveAspectRatio: "xMidYMid",
+                            width: canvasWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            viewBox: "" + axisX(brushFromTo[0]) + " " + 0 + " " + canvasWidth + " " + (yOffset +canvasHeight + axisHeight) },
+                           {cls: "tasksBarChartLinesSvg tasksBarChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "tasksBarChartLabelsSvg tasksBarChartSubSvg",
+                            x: 0,
+                            y: 0,
+                            width: svgWidth,
+                            height: yOffset + canvasHeight + axisHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + svgWidth + " " + (yOffset + canvasHeight + axisHeight) },
+                           {cls: "tasksBarChartBrushSvg tasksBarChartSubSvg",
+                            x: xOffset,
+                            y: yOffset + canvasHeight + axisHeight,
+                            width: canvasWidth,
+                            height: brushHeight,
+                            preserveAspectRatio: "xMidYMid",
+                            viewBox: "" + 0 + " " + 0 + " " + canvasWidth + " " + brushHeight }];
+        var axisData = [{trans: "translate(0, " + yOffset + ")" ,
+                         cls: "tasksBarChartXAxisTop tasksBarChartAxis",
+                         scale: "x"},
+                        {trans: "translate(0, " + (yOffset + canvasHeight) + ")" ,
+                         cls: "tasksBarChartXAxisBottom tasksBarChartAxis",
+                         scale: "x"}];
+        var axisScales = [{group: "g.tasksBarChartXAxisTop",
+                           scale: xAxisTop},
+                          {group: "g.tasksBarChartXAxisBottom",
+                           scale: xAxisBottom}];
+        var brushData = [{cls:"tasksBarChartXBrush tasksBarChartBrush"}];
+        var brushScales = [{group: "g.tasksBarChartXBrush",
+                            scale: xBrushScale,
+                            type: "x",
+                            height: brushHeight - yPadding}];
+        var tasksRectsData = [];
+        var linesData = [];
+        var labelsData = [];
+        var brushRectsData = [];
+        brushRectsData.push({cls:"tasksBarChartBrushBackgroundRect tasksBarChartBrushRect",
+                            x: 0,
+                            y: 0,
+                            ry: 0,
+                            ry: 0,
+                            width: canvasWidth,
+                            height: brushHeight - yPadding,
+                            fill: "" });
+        for (var i = 0; i < sortedTasks.length; i++) {
+            linesData.push({ x1: xOffset,
+                             y1: y(i) + yOffset,
+                             x2: canvasWidth + xOffset,
+                             y2: y(i) + yOffset,
+                             cls: "tasksBarChartLaneLine tasksBarChartLine" });
+            labelsData.push({ x: 0,
+                              y: yOffset + y(i) + (barMaxHeight / 2) + (fontSize / 2),
+                              label: sortedTasks[i].name,
+                              cls: "tasksBarChartLabel" });
+            tasksRectsData.push({ x: x(0),
+                                  y: y(i) + (barMaxHeight/16),
+                                  rx: 6,
+                                  ry: 6,
+                                  width: x(sortedTasks[i].elapse) - x(0),
+                                  height: barMaxHeight - ((barMaxHeight/16) * 2),
+                                  taskId: sortedTasks[i].taskId,
+                                  color: sortedTasks[i].color,
+                                  cls: "tasksBarChartTaskRect" }); 
+            brushRectsData.push({ x: x(0),
+                                  y: brushY(i),
+                                  rx: 3,
+                                  ry: 3,
+                                  width: x(sortedTasks[i].elapse) - x(0),
+                                  height: (brushHeight - yPadding) / sortedTasks.length,
+                                  color: sortedTasks[i].color,
+                                  cls: "tasksBarChartBrushTaskRect tasksBarChartBrushRect" }); 
+        }
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "tasksBarChartCanvasLine tasksBarChartLine" });
+        linesData.push({ x1: canvasWidth + xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls:  "tasksBarChartCanvasLine tasksBarChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: yOffset,
+                         cls: "tasksBarChartCanvasLine tasksBarChartLine" });
+        linesData.push({ x1: xOffset,
+                         y1: canvasHeight + yOffset,
+                         x2: canvasWidth + xOffset,
+                         y2: canvasHeight + yOffset,
+                         cls: "tasksBarChartCanvasLine tasksBarChartLine" });
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yPadding + fontSize,
+                          label: "(time)",
+                          cls: "tasksBarChartLabel"});
+        labelsData.push({ x: xOffset + canvasWidth - (fontSize * 4),
+                          y: yOffset + canvasHeight + axisHeight - yPadding,
+                          label: "(time)",
+                          cls: "tasksBarChartLabel"});
+        labelsData.push({ x: 0,
+                          y: yOffset - yPadding,
+                          label: "(tasks)",
+                          cls: "tasksBarChartLabel" });
+
+        var containers = _tcDrawCreateContainers(self,
+                                                 "div.tasksBarChart",
+                                                 commonData.containers);
+        var scrollButtons = _tcDrawCreateScrollButtons(self,
+                                                       "div.tasksBarChart",
+                                                       commonData.scrolls);
+        var headTailInputs = _tcDrawCreateHeadTailInputs(self,
+                                                         "div.tasksBarChart",
+                                                         source.settings.tasksBarChart.head,
+                                                         source.settings.tasksBarChart.tail,
+                                                         function() {
+                                                             source.settings.tasksBarChart.head = commonData.tasks.length;
+                                                             source.settings.tasksBarChart.tail = 0;
+                                                             _tcDrawTasksBarChart(self, source, onTaskClick, null);
+                                                         },
+                                                         function(target, event) {
+                                                             var head = parseInt(event.target.value);
+                                                             if (typeof head === "number" && !isNaN(head) && head >= 0) {
+                                                                 source.settings.tasksBarChart.head = head;
+                                                             }
+                                                             _tcDrawTasksBarChart(self, source, onTaskClick, null);
+                                                         },
+                                                         function(target, event) {
+                                                             var tail = parseInt(event.target.value);
+                                                             if (typeof tail === "number" && !isNaN(tail) && tail >= 0) {
+                                                                 source.settings.tasksBarChart.tail = tail;
+                                                             }
+                                                             _tcDrawTasksBarChart(self, source, onTaskClick, null);
+                                                         });
+        var topSvg = _tcDrawCreateTopSvg(self,
+                                         "div.tasksBarChart",
+                                         topSvgData);
+        var subSvgs = _tcDrawCreateSubSvgs(topSvg,
+                                           "svg.tasksBarChartSubSvg",
+                                           subSvgsData);
+        var tasksRects = _tcDrawCreateTasksRects(topSvg,
+                                                 "svg.tasksBarChartRectsSvg",
+                                                 "tasksBarChartTaskRect",
+                                                 tasksRectsData,
+                                                 source,
+                                                 onTaskClick);
+        var lines = _tcDrawCreateLines(topSvg,
+                                       "svg.tasksBarChartLinesSvg",
+                                       "line.tasksBarChartLine",
+                                       linesData);
+        var labels = _tcDrawCreateLabels(topSvg,
+                                         "svg.tasksBarChartLabelsSvg",
+                                         "text.tasksBarChartLabel",
+                                         labelsData,
+                                         fontSize);
+        var axis = _tcDrawCreateAxis(topSvg,
+                                     "svg.tasksBarChartAxisSvg",
+                                     "g.tasksBarChartAxis",
+                                     axisData,
+                                     axisScales,
+                                     fontSize);
+        var brushRects = _tcDrawCreateBrushRects(topSvg,
+                                                  "svg.tasksBarChartBrushSvg",
+                                                  "rect.tasksBarChartBrushRect",
+                                                   brushRectsData);
+        var brush = _tcDrawCreateBrush(topSvg,
+                                       "svg.tasksBarChartBrushSvg",
+                                       "g.tasksBarChartBrush",
+                                       brushData,
+                                       brushScales);
+    }
+
+    var _tcDraw = function(self, source, onTaskClick) {
+        if (source.tasks == null) {
+            return;
+        }
+
+        // getCommonData
+        var commonData = _tcGetCommonData(source);
+
+        // check tasks
+        if (commonData.tasks.length == 0) {
+            return;
+        }
+
+        // datepicket Containers
+        var datePickerContainers = d3.selectAll(self)
+                                     .selectAll("span.datePickerContainer")
+                                     .data(commonData.datePickerContainersData);
+        datePickerContainers.enter()
+                                .append("span")
+                                .text(function (d) { return d.label})
+                                .attr("class", function(d) { return d.cls })
+        datePickerContainers.exit().remove();
+
+        // datePickers
+        for (var i = 0; i < commonData.datePickersData.length; i++) {
+            var datePicker = d3.selectAll(self)
+                               .selectAll(commonData.datePickersData[i].span)
+                               .selectAll("input")
+                               .data(commonData.datePickersData[i].data)
+            datePicker.enter()
+                          .append("input")
+                          .attr("type", "text")
+                          .attr("class", function(d) { return d.cls });
+            datePicker.exit().remove()
+        }
+        var startDatePicker = $(".startDatePicker").datepicker({ onSelect: function() {
+                                  source.settings.startDate = Date.parse($(this).val());
+                                  _tcDraw(self, source, onTaskClick);
+                              }});
+        var startDate = new Date(source.settings.startDate);
+        startDatePicker.datepicker("option", "dateFormat", "yy-mm-dd")
+        startDatePicker.datepicker("option", "minDate", new Date(commonData.startDateMin))
+        startDatePicker.datepicker("option", "maxDate", new Date(commonData.endDateMax))
+        startDatePicker.val(startDate.getFullYear() + "-" + _tcTFPad((startDate.getMonth() + 1), 2) + "-" + _tcTFPad(startDate.getDate(), 2))
+
+        var endDatePicker = $(".endDatePicker").datepicker({ onSelect: function() {
+                                  source.settings.endDate = Date.parse($(this).val());
+                                  _tcDraw(self, source, onTaskClick);
+                            }});
+        var endDate = new Date(source.settings.endDate);
+        endDatePicker.datepicker("option", "dateFormat", "yy-mm-dd")
+        endDatePicker.datepicker("option", "minDate", new Date(commonData.startDateMin))
+        endDatePicker.datepicker("option", "maxDate", new Date(commonData.endDateMax))
+        endDatePicker.val(endDate.getFullYear() + "-" + _tcTFPad((endDate.getMonth() + 1), 2) + "-" + _tcTFPad(endDate.getDate(), 2))
+
+        // create svg divs
+        var containers = []
+        if (source.actors != null) {
+		if (source.settings.drawActorsSummaryBarChart) {
+		    containers.push("actorsSummaryBarChart chartContainer");
+		} else if (source.settings.drawActorsSwimlaneChart){
+		    containers.push("actorsSwimlaneChart chartContainer");
+		}
+	}
+	containers.push("tasksGanttChart chartContainer");
+	containers.push("tasksBarChart chartContainer");
+
+        var topDivs = d3.selectAll(self)
+                        .selectAll("div.chartContainer")
+                        .data(containers)
+        topDivs.attr("class", function(d) { return d });
+        topDivs.enter()
+                   .append("div")
+                   .attr("class", function(d) { return d });
+        topDivs.exit().remove();
+
+        // draw charts
+        if (source.actors != null) {
+		if (source.settings.drawActorsSummaryBarChart) {
+			_tcDrawActorsSummaryBarChart(self, source, onTaskClick, commonData);
+		} else if (source.settings.drawActorsSwimlaneChart) {
+			_tcDrawActorsSwimlaneChart(self, source, onTaskClick, commonData);
+		}
+	}
+        _tcDrawTasksGanttChart(self, source, onTaskClick, commonData);
+        _tcDrawTasksBarChart(self, source, onTaskClick, commonData);
+    };
+
+    var _tcRemove = function(self, data) {
+        d3.selectAll(self).selectAll("div")
+              .data([])
+              .exit()
+              .remove();
+    };
+
+    var _tcDataUpdate = function(data, source) {
+        source.settings.startDate = null;
+        if ("settings" in source) {
+            $.extend(true, data.source.settings, source.settings);
+        }
+        if ("actors" in source) {
+            data.source.actors = source.actors;
+        }
+        if ("tasks" in source) {
+            data.source.tasks = source.tasks;
+        }
+    }
+
+    var _tcAjax = function(self, data) {
+        $.ajax(data.ajaxParams).done(function(source) {
+            _tcDataUpdate(data, source);
+            _tcDraw(self, data.source, data.onTaskClick);
+        }) 
+    }
+
+    var _tcAjaxTimer = function(self, data) {
+        if (data.ajaxPending) {
+            if (data.ajaxTimerId != null) {
+                clearInterval(data.ajaxTimerId);
+                data.ajaxTimerId = null;
+            }
+        } else {
+            if (data.ajaxTimerId == null) {
+                data.ajaxTimerId = setInterval(function(){_tcAjax(self, data)();}, data.ajaxInterval);
+            }
+            _tcAjax(self, data);
+        }
+    }
+
+    var _tcDrawPrepare = function(self, data) {
+        if (data.source.actors || data.source.tasks) {
+            _tcDraw(self, data.source, data.onTaskClick);
+        } else if (data.ajax != null && typeof data.ajax == "object" && typeof data.ajaxInterval == "number") {
+            _tcAjaxTimer(self, data)
+        } else if (data.ajax != null && typeof data.ajax == "object") {
+            _tcAjax(self, data);
+        }
+    }
+
+    var _tcRemovePrepare = function(self, data) {
+        if (data.ajaxTimerId != null) {
+            clearInterval(data.ajaxTimerId);
+            data.ajaxTimerId = null;
+        }
+        _tcRemove(self, data.source);
+    }
+
+    var tchart = {
+        init: function(options) {
+            var data = this.data('tchart');
+            if (!data) {
+                this.data('tchart',
+                    $.extend(true, {
+                        ajaxTimerId: null,
+                        ajaxParams: null,
+                        ajaxInterval: null,
+                        ajaxPending: false,
+                        onTaskClick: null,
+                        source: {
+                            settings : {
+                                drawActorsSummaryBarChart: true,
+                                drawActorsSwimlaneChart: true,
+                                drawTasksGanttChart: true,
+                                drawTasksBarChart: true,
+                                fontSize: 12,
+                                width: 500,
+                                actorsSummaryBarChart : {
+                                    label: "actors summary bar chart",
+                                    barMaxHeight: 16,
+                                    viewRange: {
+                                         from: null,
+                                         to: null
+                                    }
+                                },
+                                actorsSwimlaneChart : {
+                                    label: "actors swimlane chart",
+                                    barMaxHeight:14,
+                                    viewRange: {
+                                         from: null,
+                                         to: null
+                                    }
+                                },
+                                tasksGanttChart : {
+                                    start: 0,
+                                    step: 50,
+                                    label: "tasks gantt chart",
+                                    barMaxHeight: 14,
+                                    laneMaxHeight:16,
+                                    viewRange: {
+                                         from: null,
+                                         to: null
+                                    }
+                                },
+                                tasksBarChart : {
+                                    head: 20,
+                                    tail: 20,
+                                    label: "tasks bar chart",
+                                    barMaxHeight: 16,
+                                    viewRange: {
+                                         from: null,
+                                         to: null
+                                    }
+                                },
+                                startTime: null,
+                                brushHeight: 30,
+                                startDate: null,
+                                endDate: null
+                            },
+                            actors: null,
+                            tasks: null
+                        },
+                    }, options));
+                data = this.data('tchart');
+            }
+            _tcDrawPrepare(this, data);
+            return this;
+        },
+        update: function(source) {
+            var data = this.data('tchart');
+            if (!data) {
+                return this;
+            }
+            _tcDataUpdate(data, source);
+            _tcDraw(this, data.source, data.onTaskClick);
+            return this;
+        },
+        remove: function() {
+            var data = this.data('tchart');
+            if (!data) {
+                return this;
+            }
+            _tcRemovePrepare(this, data.source);
+            return this;
+        },
+        pendingAjax: function(source) {
+            var data = this.data('tchart');
+            if (!data) {
+                return this;
+            }
+            data.ajaxPending = true;
+            _tcAjaxTimer(this, data);
+            return this;
+        },
+        resumeAjax: function(source) {
+            var data = this.data('tchart');
+            if (!data) {
+                return this;
+            }
+            data.ajaxResume = true;
+            _tcAjaxTimer(this, data);
+            return this;
+        }
+    }
+
+    $.fn.tchart = function(method) {
+        if (tchart[method]) {
+            return tchart[method].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else if (typeof method === 'object' || !method) {
+            return tchart.init.apply(this, arguments);
+        } else {
+            $.error('Method ' +  method + ' does not exist on jQuery.tchart');
+        }  
+        return this;
+    }
+})(jQuery);
+
+//////////////////////////////////////////////////////////////////////////
+//
+// * initizlize
+//      
+//     usage: 
+//        $(target).tchart([options])
+//
+//     option:
+//         ajaxParams: jquery ajax param
+//         ajaxInterval: ajax polling interval [ Number (milliseconds) ]
+//         onTaskClick: task click event callback [ function ]
+//      
+// * remove chart    
+//     
+//     usage: 
+//        $(target).tchart("remove")
+//
+// * update chart    
+//     
+//     usage: 
+//        $(target).tchart("update", source)
+//
+//     source: 
+//         {
+//             settings: {
+//                 drawActorsSummaryBarChart: boolean,
+//                 drawActorsSwimlaneChart: boolane,
+//                 drawTasksGanttChart: boolane,
+//                 drawTasksBarChart: boolane,
+//                 fontSize: Number,
+//                 width: Number,
+//                 actorsSwimlaneChart : {
+//                     barMaxHeight: Number
+//                 },
+//                 tasksGanttChart : {
+//                     barMaxHeight: Number,
+//                     laneMaxHeight: Number
+//                 },
+//                 tasksBarChart : {
+//                     barMaxHeight: Number, 
+//                 },
+//                 startTime: Number (millisecond) or null,
+//                 brushHeight: Number
+//             },
+//             actors : {
+//                 actorId1 : {
+//                     name: string,
+//                     tasks : [
+//                         taskId1
+//                     ]
+//                 },
+//                 actorId2 : {
+//                     name: string,
+//                     tasks : [
+//                         taskId2
+//                     ]
+//                 }
+//             },
+//             tasks : {
+//                 task_Id1: { 
+//                     name: string,
+//                     from: number (millisec time),
+//                     to: number (millisec time),
+//                     clickEventArg: object,
+//                     nextTasks : [
+//                         taskId2
+//                     ]
+//                 },
+//                 task_Id2: { 
+//                     name: string,
+//                     from: number (millisec time),
+//                     to: number (millisec time),
+//                     clickEventArg: object,
+//                     nextTasks : null
+//                 }
+//             }
+//         }
+//
+// *  pending ajax polling   
+//     
+//     usage: 
+//        $(target).tchart("pendingAjax")
+//
+// *  resume ajax polling   
+//     
+//     usage: 
+//        $(target).tchart("resumeAjax")
+//