source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/Styling.js @ 9062

/*!
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'
        }
    });
}

$(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("resize",
        {
            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();
        });

        $(".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);

            $.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();
                        }
                    });
                    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);
                }
            });
        });
    } catch (e) {
    }
}
);