source: branches/1888_OaaS/HeuristicLab.Services.Optimization.Web/Content/Styling.js @ 16654

/*!
Styling for heuristiclab via jQuery
*/

function retrieveMatrix(id) {
    var indexRegEx = /matrix-graph-(\d*)-(\d*)/g
    var array = indexRegEx.exec(id)
    if (array != null && array.length == 3) {
        return { runId: array[1], parameterOffset: array[2] }
    }
    return null;
}

function generatePlot(plotId, plotData) {
    var seriesData = plotData.Series;
    var showMarker = plotData.ShowMarker;
    var labels = new Array(seriesData.length);
    var series = new Array(seriesData.length);

    for (var i = 0; i < seriesData.length; i++) {
        labels[i] = { label: seriesData[i].Label, showMarker : showMarker };
        series[i] = seriesData[i].Values;
    }

    return $.jqplot(plotId, series, {
        cursor: {
            show: true,
            zoom: true,
            showTooltip: false
        },
        series: labels,
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        highlighter: {
            show: true,
            sizeAdjust: 7.5
        }
    });
}

function handleDatatableSelectionChanged(datatable, datarow) {
    $.ajax({
        url: '/chart/GetDatatableContent?datatable=' + datatable + '&datarow=' + datarow,

        success: function (result) {
            var plot = generatePlot('dataTableGraph', result)
            plot.replot({ resetAxes: true });

            var resizer = $("#dataTableGraph").closest('.resizable');
            $(resizer).unbind('resizestop');
            $(resizer).bind('resizestop', function (event, ui) {
                var id = $(this).children('div').get(0).id;
                $("#dataTableGraph").height($(this).height() * 0.96);
                $("#dataTableGraph").width($(this).width() * 0.96);
                plot.replot({ resetAxes: true });
            });
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

function redrawAccordions() {
    $(".collapsible").accordion("refresh");
}

function injectDatatableAnalyzer() {
    var datatable = null;
    var row = null;

    // crawl datatables for current run results
    if ($("#dataTable").length > 0) {
        $.ajax({
            url: '/chart/GetDatatables',

            success: function (result) {
                $("#dataTable").empty();
                $.each(result.Datatables, function (index, tableName) {
                    // http://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery
                    $("#dataTable").append($("<option></option>").attr("value", tableName).text(tableName));
                });

                // select first row
                // http://stackoverflow.com/questions/1414276/how-to-make-first-option-of-select-selected-with-jquery
                $("#dataTable").val($("#dataTable option:first").val());
                // fire selection changed event
                $("#dataTable").change();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus);
            }
        });

        $("#dataTable option:selected").each(function () {
            datatable = $(this).text();
        });

        $("#dataTable").change(function () {
            $("#dataTable option:selected").each(function () {
                datatable = $(this).text();
                $.ajax({
                    url: '/chart/GetRowNames?datatable=' + datatable,

                    success: function (result) {
                        $("#dataRow").empty();
                        $.each(result.RowNames, function (index, rowName) {
                            // http://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery
                            $("#dataRow").append($("<option></option>").attr("value", rowName).text(rowName));
                        });

                        // select first row
                        // http://stackoverflow.com/questions/1414276/how-to-make-first-option-of-select-selected-with-jquery
                        $("#dataRow").val($("#dataRow option:first").val());
                        // fire selection changed event
                        //$("#dataRow").change();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            });
        });

        $("#dataRow").change(function () {
            $("#dataRow option:selected").each(function () {
                row = $(this).text();
                handleDatatableSelectionChanged(datatable, row);
            });
        });
    }
}

function injectMatrixGraph() {
    $(".matrix-graph").each(function (i) {
        var tabable = $(this).closest(".tabable");
        var id = this.id;
        var resizerId = $(this).parent().get(0).id;
        var indices = retrieveMatrix(id);
        var graphCreated = false;

        $(tabable).bind('tabsactivate', function (event, ui) {
            if ($(ui.newPanel[0]).hasClass("resizable") && !graphCreated) {
                graphCreated = true;
                var id = $(ui.newPanel[0]).children("div")[0].id;
                var resizerId = $("#" + id).parent().get(0).id;
                var indices = retrieveMatrix(id);

                $.ajax({
                    url: '/Chart/GetMatrixContentForGraph?run=' + indices.runId + '&parameterOffset=' + indices.parameterOffset + "&showMarker=false",

                    success: function (result) {
                        var plot = generatePlot(id, result);
                        tabable.bind('tabsshow', function (event, ui) {
                            if (ui.index == 1 && plot._drawCount == 0) {
                                plot.replot();
                            }
                            redrawAccordions();
                        });
                        var resizer = $("#" + id).closest('.resizable');
                        $(resizer).bind('resizestop', function (event, ui) {
                            var id = $(this).children('div').get(0).id;
                            $("#" + id).height($(this).height() * 0.96);
                            $("#" + id).width($(this).width() * 0.96);
                            plot.replot({ resetAxes: true });
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                        alert(errorThrown);
                    }
                });
            }
        });
    });
}

function injectTableModifiers() {
    // TODO: Make row add / delete via javascript
    var i = 10 + 20;
    return i;
}

$(document).ready(

function () {

    /*
    $('input:submit, input:reset').each(function () {
    $(this).replaceWith('<button class="' + $(this).attr('class') + '" name="' + $(this).attr('name') + '" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
    });


    $('.hl-dataTable').dataTable(
    {
    "bJQueryUI": true,
    "sScrollX": "100%",

    }

    );



    $(".hl-dataTable").addClass("display");

    $(".hl-button-text-plus").button({ icons: { primary: 'ui-icon-plus'} });
    $(".hl-button-text-signon").button({ icons: { primary: 'ui-icon-key'} });
    $(".hl-button-text-back").button({ icons: { primary: 'ui-icon-triangle-1-w'} });
    $(".hl-icon-delete").button({ icons: { primary: 'ui-icon-close' }, text: false });
    $(".hl-icon-edit").button({ icons: { primary: 'ui-icon-pencil' }, text: false });
    $(".hl-icon-view").button({ icons: { primary: ' ui-icon-arrowthick-1-e' }, text: false });
    $(".hl-icon-refresh").button({ icons: { primary: ' ui-icon-refresh' }, text: false });
 
    // Standard Table
    $(".hl-table th").each(function () {

    $(this).addClass("ui-state-default hl-formHeader");

    });
    $(".hl-table td").each(function () {

    $(this).addClass("ui-widget-content");

    });

    $(".hl-table td:odd").addClass("odd");
    $(".hl-table td:even").addClass("even");
    */
    try {
        $(".viewableTable").dataTable()
    } catch (e) {
    }

    try {
        $(".editableTable").dataTable(
      {
          "bSort": false,
          "bFilter": false
      }
    )
    } catch (e) {
    }

    try {
        $(".tabable").tabs({
            collapsible: true,
            active: false
        }
        );
    } catch (e) {
    }

    try {
        $(".collapsible").accordion({
            heightStyle: "content",
            collapsible: true,
            active: false
        });
    } catch (e) {
    }

    try {
        $(".delete-row").click(function () {
            var row = $(this).closest("tr").get(0);
            var dt = $(this).closest(".editableTable");
            dt = dt.dataTable()
            dt.fnDeleteRow(dt.fnGetPosition(row));
            // TODO: Update the Ids of the next rows!!
        });
    } catch (e) {
    }

    try {
        $(".resizable").each(function (i) {
            $(this).resizable();
        });
    } catch (e) {
    }

    injectMatrixGraph();
    injectDatatableAnalyzer();
    //injectTableModifiers();
}
);