<script language='javascript' src='./include/common/javascript/tool.js'></script>
<div id="div1" style="position:relative;">
    <div class="graph-options">
      <a onclick="javascript:switchCols(1)" class="ico-16 margin_right ico-col ico-col-1 active" alt="{t}One column{/t}" title="{t}One column{/t}">
      </a>
      <a onclick="javascript:switchCols(2)" class="ico-16 margin_right ico-col ico-col-2" alt="{t}Two columns{/t}" title="{t}Two columns{/t}">
      </a>
      <a onclick="javascript:switchCols(3)" class="ico-16 margin_right ico-col ico-col-3" alt="{t}Three columns{/t}" title="{t}Three columns{/t}">
      </a>
    </div>
    <div id="graphs" class="graph_content">
        <div class="graphZone">
          {foreach from=$periods item=period}
          <div id="graph_wrapper_{$period.short}" data-graph-id="{$svc_id}" data-graph-period="{$period.short}" class="graph">
            <div class="title">
              <img class="remove ico-14 margin_right" src="./img/icons/circle-cross.png">
              <span>{$srv_name} during {$period.long}</span>
              <a class="actions" href="#" data-href="./include/views/graphs/generateGraphs/generateImage.php">
                <img alt="Export graph" src="./img/icons/picture.png" class="ico-14 margin_right">
              </a>
              <a class="actions" href="#" data-href="./include/views/graphs/exportData/ExportCSVServiceData.php">
                <img alt="Export CSV" src="./img/icons/csv.png" class="ico-14 margin_right">
              </a>
            </div>
            <div class="content">
              <div class="chart" id="graph-{$period.short}" data-graph-interval="{$period.short}" data-graph-id="{$svc_id}" data-graph-type="service">
              </div>
            </div>
          </div>
          {/foreach}
        </div>
    </div>
</div>
<script src="./include/common/javascript/moment-with-locales.min.2.21.js"></script>
<script src="./include/common/javascript/moment-timezone-with-data.min.js"></script>
<script src="./include/common/javascript/centreon/centreon-select2.js"></script>
{literal}
<script>
function switchCols(number) {

  jQuery('.graphZone').removeClass(function (index, css) {
    return (css.match(/\bcol\S+/g) || []).join(' ');
  });
  if (number === 2 || number === 3) {
    jQuery('.graphZone').addClass('col' + number);
  }
  jQuery('.graphZone .chart').centreonGraph('resize');
  jQuery('.ico-col').removeClass('active');
  jQuery('.ico-col-' + number).addClass('active');
}

jQuery(function () {
  jQuery('.chart').centreonGraph();

  /* Add events on click on action download image/CSV */
  jQuery('.graphZone').delegate('a.actions', 'click', function (e) {
    let $a = jQuery(this);
    let baseUrl = $a.data('href');
    let chartId = $a.parents('.graph').data('graphId');
    let start;
    let end;
    let timezone = localStorage.getItem('realTimezone')
        ? localStorage.getItem('realTimezone')
        : moment.tz.guess();

    //Defining the period
    let graphPeriod = $a.parents('.graph').data('graphPeriod');
    let parseInterval = graphPeriod.match(/(\d+)([a-z]+)/i);
    start = moment().tz(timezone);
    end = moment().tz(timezone);
    start.subtract(parseInterval[1], parseInterval[2]);

    e.preventDefault();
    baseUrl += '?chartId=' + chartId + '&start=' + start.unix() + '&end=' + end.unix();
    window.location = baseUrl;
  });

  /* Active drag and drop */
  jQuery('.graphZone').sortable({
    handle: '.title',
  });
});
</script>
{/literal}
