pmux_logview.detail = {
    parent:                            pmux_logview,
    reload_job_log_detail_initialized: false,
    job_log_detail_ajax_requested:     false,
    need_reload_job_log_detail:        true,
    reload_job_log_detail_timer_id:    null,
    draw_invoke_timer_id:              null,
    $detail_body:                      null,
    $detail_chart_header:              null,
    $detail_chart_tchart:              null,
    $reload_button:                    null,
    $user_name:                        null,
    ajax_data:                         null
};

pmux_logview.detail.get_job_id = function() {
    return this.$detail_body.attr("data-job-id");
};

pmux_logview.detail.draw_detail_job_chat = function() {
    if (this.ajax_data == null) {
        return;
    }
    var data = this.ajax_data;
    var base_time = null;
    var table_html = '<table class="border" width=" ' + ($(window).innerWidth() - 50) + ';"><thead></thead><tbody><tr>';
    if (data.length >= 1) {
        // save started time
        base_time = Number(data[0]["job_started_at_msec"])
        // create html
        for (data_key in data[0]) {
            if (data_key == "params") {
                var cnt = 0;
                var params_html = "";
                for (params_key in data[0][data_key]) {
                    params_html += '<td class="border">' + params_key + '</td>';
                    params_html += '<td class="border">' + data[0][data_key][params_key] + '</td>';
                    params_html += '</tr><tr>'
                    cnt += 1;
                }
                table_html += '<td class="border" rowspan="' + cnt + '">' + data_key + '</td>' + params_html;
            } else {
                table_html += '<td class="border" colspan="2">' + data_key  + '</td>';
                table_html += '<td class="border">' + data[0][data_key]  + '</td>';
                table_html += '</tr><tr>';
            }
        }
    }
    if (data.length >= 3) {
        if ("job_finished_at" in data[2]) {
           this.parent.update_reload_button();
        }
        for (data_key in data[2]) {
            table_html += '<td class="border" colspan="2">' + data_key  + '</td>';
            table_html += '<td class="border">' + data[2][data_key]  + '</td>';
            table_html += '</tr><tr>';
        }
    }
    table_html += '</tr></tbody></table>';
    this.$detail_chart_header.html(table_html);
    // chart
    if (data.length >= 2) {
        // convert tchart format
        var source = {
            settings: {
                width: $(window).innerWidth() - 50
            },
            actors : {},
            tasks : {}
        };
        for (data_key in data[1]) {
            data[1][data_key].task_id = data_key;
            var from = base_time + Math.floor(parseFloat(data[1][data_key].allocated_at) * 1000);
            var to = from + Math.floor(parseFloat(data[1][data_key].elapse) * 1000);
            source.tasks[data_key] = {
                name: "task " + data_key,
                from: from,
                to: to,
                clickEventArg: data[1][data_key],
                nextTasks: null
            }
            if (!(data[1][data_key].node_addr in source.actors)) {
                source.actors[data[1][data_key].node_addr] = {
                    name: data[1][data_key].node_addr,
                    tasks: []
                };
            }
            source.actors[data[1][data_key].node_addr].tasks.push(data_key);
        }
        this.$detail_chart_tchart.tchart('update', source);
    } else {
        this.$detail_chart_tchart.tchart('remove');
    }
}

pmux_logview.detail.reload_job_log_detail = function() {
    if (!this.parent.can_reload) {
        return;
    }
    if (this.job_log_detail_ajax_requested) {
        return 
    }
    var self = this;
    var url = "/log/job/" + this.get_job_id() + "/detail";
    this.parent.ajax_base(url, "GET", {}).done(function(data, textStatus, XMLHttpRequest) {
        self.ajax_data = data;
        self.draw_detail_job_chat();
        self.parent.activityOff(null);
        self.job_log_detail_ajax_requested = false;
    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
        self.parent.open_dialog("job log の読み込みに失敗しました。");
        self.parent.activityOff(null);
        self.job_log_detail_ajax_requested = false;
    });
    this.job_log_detail_ajax_requested = true;
};

pmux_logview.detail.reload = function() {
    var self = this;
    if (this.need_reload_job_log_detail) {
        if (this.reload_job_log_detail_timer_id == null) {
            this.reload_job_log_detail_timer_id = setInterval(function(){
                self.reload_job_log_detail(); 
            }, 3000);
        }
        if (!this.reload_job_log_detail_initialized) {
            self.parent.activityOn(null);
            this.reload_job_log_detail();
            this.reload_job_log_detail_initialized = true;
        } 
    } else {
        if (this.reload_job_log_detail_timer_id != null) {
            clearInterval(this.reload_job_log_detail_timer_id);
            this.reload_job_log_detail_timer_id = null;
        } 
    }
};

pmux_logview.detail.draw_invoke = function() {
    if (this.ajax_data != null) {
        this.draw_detail_job_chat();
    } 
    if (this.draw_invoke_timer_id != null) {
        clearInterval(this.draw_invoke_timer_id);
        this.draw_invoke_timer_id = null;
    }
}

pmux_logview.detail.initialize = function() {
    var self = this;
    this.parent.initialize();
    this.$user_name = $("#user-name");
    this.$reload_button = $("#reload-button").click(function () {
                               self.update_reload_button();
                          });
    this.$detail_body = $("#detail-body");
    this.$detail_chart_header = $("#detail-chart-header");
    this.$detail_chart_tchart = $("#detail-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>';
                                            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.detail.initialize();
});