[%
USE date;
USE CGI;
USE Api2;

SET CPANEL.CPVAR.dprefix = "../../";
USE default_page = URL('index.html');
SET FORM.from = date.format(date.now, format => '%Y-%m-%d 00:00', gmt => 1);
SET FORM.to = date.format(date.now, format => '%Y-%m-%d 23:59', gmt => 1);

SET page_scripts = ["/3rdparty/cloudlinux/jquery/jquery-1.10.2.min.js", "/3rdparty/cloudlinux/jquery/jquery-ui.min.js", "/3rdparty/cloudlinux/jquery/jquery.dataTables.min.js"];
SET page_stylesheets = ["/3rdparty/cloudlinux/jquery/jquery-ui.css", "/3rdparty/cloudlinux/jquery/jquery.dataTables.css"];
%]
[% css_code = PROCESS css_block %]
[% TRY # try load template, generate automatically if not present master.html.tt %]
[% WRAPPER '_assets/master.html.tt'
    page_title = "Snapshots"
    page_styles = css_code
    include_cjt = 0
    hide_page_heading = 1
    app_key = "snapshots"
    use_master_bootstrap = 0
%]

[%- FOR source IN page_scripts %]
<script type="text/javascript" src="[% theme_magic_url(source) %]"></script>
[% END -%]

[% FOR source IN page_stylesheets %]
<link rel="stylesheet" type="text/css" href="[% theme_magic_url(source) %]" />
[% END %]

[% INCLUDE main %]
[% END #wrapper %]

[% CATCH %]
  [% execute("Branding", "include", { file='stdheader.uapi' }).data %]

  [%- FOR source IN page_scripts %]
    <script type="text/javascript" src="[% theme_magic_url(source) %]"></script>
  [% END -%]

  [% FOR source IN page_stylesheets %]
    <link rel="stylesheet" type="text/css" href="[% theme_magic_url(source) %]" />
  [% END %]
  [% css_code %]
  [% PROCESS branding_spritelist.tt %]

  [% INCLUDE main %]

  [% execute("Branding", "include", { file='stdfooter.uapi' }).data %]
[% END #TRY %]


[% BLOCK main %]
<div id="statusmessage"></div>
<div class="body-content">
    <div id="datepicker"></div>
    <div class="snapshot-all">
    Snapshot: made at <span id="snapshot-made-at">[ no data ]</span>
    <br>
    <br><i>We consider performance issues that happened within 5 minutes of each other as a single incident</i>
    <br><br>
      <div id='snapshot-selector-top'>
        [% INCLUDE "select-timestamp.html.tt" # include select snapshot form %]
      </div>
      <div id='snapshot-one'>
        Data loading...
      </div>
      <div id='snapshot-selector-bottom'>
        [% INCLUDE "select-timestamp.html.tt" # include select snapshot form %]
      </div>
    </div>
</div>


<script type="text/javascript">

    // configure tables
    var snapshot_options = {paging: false, searching: false, info: false, "oLanguage": {"sEmptyTable": "No data"}, "bAutoWidth": false};
    var ps_snapshot_options = jQuery.extend({}, snapshot_options, {"aoColumns": [{"sWidth": "4em"}, null, {"sWidth": "2em", "sClass": "center"}, {"sWidth": "2em", "sClass": "center"}]});
    var sql_snapshot_options = jQuery.extend({}, snapshot_options, {"aoColumns": [{"sWidth": "4em"}, {"sWidth": "2em", "sClass": "center"}, null ]});
    var http_snapshot_options = jQuery.extend({}, snapshot_options, {"aoColumns": [{"sWidth": "4em"}, {"sWidth": "4em", "sClass": "center"},null ]});

    /* change 'Snapshot made at' in interface */
    function change_made_at(timestamp){
        var made_at_str = '[ no data ]';
        if (timestamp != 0) {
            var made_at = new Date();
            made_at.setTime(timestamp*1000);
            made_at_str =  made_at.toUTCString();
        };
        document.getElementById('snapshot-made-at').innerHTML = made_at_str;
        $('#snapshot-made-at').text(made_at_str);
    }
    
    /* load snapshot per timestamp */
    function load_snapshot(timestamp){
        $.ajax({
            url: 'show-timestamp.html?timestamp=' + timestamp,
            dataType : "html",
            beforeSend: function(){$('#statusmessage').show().text('Working...').animate({'margin-bottom':0},200);},
            success: function (data, textStatus) {
                var $data = $('<div>' + data + '</div>');
                $data.find('#table-ps-snapshot' ).DataTable(ps_snapshot_options);
                $data.find('#table-sql-snapshot').DataTable(sql_snapshot_options);
                $data.find('#table-http-snapshot').DataTable(http_snapshot_options);
                change_made_at(timestamp);
                $('#snapshot-one').html($data);

                // Add support tooltip for very long text in table cell
                // HTML - how can I show tooltip ONLY when ellipsis is activated http://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated
                $( 'table.dataTable tbody td' ).bind('mouseenter', function(){
                    var $this = $(this);
                    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
                    $this.attr('title', $this.text());
                    }
                });
                $( 'table.dataTable tbody td' ).tooltip();

                // Hide "Working label"
                $('#statusmessage').hide();
            }
        });
    }
    
    /* change "select snapshot" only */
    function change_selector(selector, timestamp){
        $(selector).find('option:selected').removeAttr('selected');
        $(selector).find('option[value="' + timestamp + '"]').prop('selected', 'selected');
    }
    
    /* change "select snapshot" to next and load snapshot */
    function next_snapshot()
    {
        $('option:selected', $('#snapshot-selector-top select, #snapshot-selector-bottom select')).removeAttr('selected').next('option').prop('selected', 'selected');
        load_snapshot($('option:selected', $('#snapshot-selector-top select')).val());
    }

    /* change "select snapshot" to previous and load snapshot */
    function prev_snapshot()
    {
        $('option:selected', $('#snapshot-selector-top select, #snapshot-selector-bottom select')).removeAttr('selected').prev('option').prop('selected', 'selected');
        load_snapshot($('option:selected', $('#snapshot-selector-top select')).val());
    }

    /* change "select snapshot" to first and load snapshot */
    function first_snapshot(){
        $('option:selected', $('#snapshot-selector-top select, #snapshot-selector-bottom select')).removeAttr('selected').first('option').prop('selected', 'selected');
        load_snapshot($('option:selected', $('#snapshot-selector-top select')).val());
    }

    /* change snapshot list in 'snapshot selector' and load first snapshot */
    function load_snapshot_selector(dateText){
        $.ajax({
            url: 'select-timestamp.html?from=' + dateText + ' 00:00' + '&to=' + dateText + ' 23:59',
            dataType : "html",
            beforeSend: function(){$('#statusmessage').show().text('Working..').animate({'margin-bottom':0},200);}, /* show status message */
            success: function (data, textStatus) {
                $( '#snapshot-selector-top,#snapshot-selector-bottom' ).html(data);
                first_snapshot(); /* load first snapshot */
                $('#statusmessage').hide(); /* hide status message */
            }               
        });
    }

    /* Show next snapshot */
    function show_next_snapshot ( event )
    {
        event.preventDefault ( );
        next_snapshot ( );
    }

    /* Show previous snapshot */
    function show_prev_snapshot ( event )
    {
        event.preventDefault ( );
        prev_snapshot ( );
    }
                                    
    $(document).ready( function () {
        first_snapshot();
        change_made_at($('option:selected', $('#snapshot-selector-top select')).val());

        /* synchronous switching selector */
        $('#snapshot-selector-top,#snapshot-selector-bottom').change(function(event) {
            event.preventDefault(); /* prevent refresh html code */
            var timestamp = $(this).find('option:selected').val();
            change_selector('#snapshot-selector-top,#snapshot-selector-bottom', timestamp);
            load_snapshot(timestamp);
        } );

        /* generate calendar and loading data per date */
        $( '#datepicker' ).datepicker({
            dateFormat: "yy-mm-dd",
            onSelect: function(dateText, inst){
                // prevents the redraw when click on date http://stackoverflow.com/questions/6056287/jquery-ui-datepicker-prevent-refresh-onselect
                inst.inline = false;
                $(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");
                $(".ui-datepicker-calendar TBODY A").each(function(){
                    if ($(this).text() == inst.selectedDay) {
                        $(this).addClass("ui-state-active");
                        $(this).parent().addClass("ui-datepicker-current-day");
                    }
                });

                load_snapshot_selector(dateText);
            } // onSelect
        }); // datepicker
    } );
</script>

[% END # main %]

[% BLOCK css_block %]
<style type="text/css">
    #snapshot-prev { float: left;}
    .choose-snapshot {margin: 0 15%; display: inline;}
    .choose-snapshot select {display: inline; width: auto;}
    #snapshot-selector-top, #snapshot-selector-bottom { margin-top: 2em; }
    #snapshot-selector-top, #snapshot-selector-bottom { margin-bottom: 2em; }
    
    #snapshot-next { clear: left;}
    
    
    .snapshot-all {
        border: 2px solid;
        margin: 20px 0;
        padding: 3px 5px;
    }
    .table-title {text-align:  center;}
    .body-content {
      width: 100%;
    };
    #datepicker { width: 70%; }

    /* status message popup style */
    #statusmessage {
      position:fixed;
      z-index: 999999;
      padding:0 5px;
      line-height:25px;
      background-color:#eeee99;
      margin-bottom:-25px;
      font-weight:bold;
      left: 3px;
      top: 3px;
    }

    /* rewrite default jQwery UI tooltip style */
    .ui-tooltip {
      background: #ffe45c !important;
      border-color: #fed22f !important;
      color: black;
      max-width: 600px !important;
      word-break: break-all;   /* for breaking very long solid string in tooltip */
    }

    /* for using in DataTables options */
    .center {
       text-align: center;
    }
    /* rewrite DataTables style */
    table.dataTable tbody td {
      padding: 2px 6px; /* make table more compact */
      
      /* hide big string in table cell */
      max-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
</style>
[% END #css_block %]