<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SharePrices.aspx.vb" Inherits="SharePrices.SharePrices" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Steve's share prices</title>
    <link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="SharePricesStyles.css" type="text/css" />
    <link rel="stylesheet" href="SharePricesModal.css" type="text/css" />
    <link rel="stylesheet" href="jquery-ui.css" type="text/css" />
    <script src="scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.axislabels.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.downsample.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.crosshair.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.selection.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.time.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.tooltip.js" type="text/javascript"></script>
    <script src="scripts/jquery.flot.pie.js" type="text/javascript"></script>
    <script src="scripts/js.cookie-2.2.1.min.js" type="text/javascript"></script>
    <script src="scripts/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
    <script src="scripts/tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
    <script src="scripts/jquery.marquee.min.js" type="text/javascript"></script>
    <script src="scripts/SharePrices.js" type="text/javascript"></script>
    <script src="scripts/FlotGaps.js" type="text/javascript"></script>

    <!--<script src="scripts/highcharts_9.3.1/highcharts.js" type="text/javascript"></script>!--
    <!--<script src="scripts/highcharts_9.3.1/modules/broken-axis.js" type="text/javascript"></script>!-->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/stock/modules/stock.js"></script>
    <script src="https://code.highcharts.com/modules/broken-axis.js" type="text/javascript"></script>
</head>
<body>
  <div class="navbar">
    <table>
      <tr>
        <td class="navbarlink" style="width: 35%;">
          <a id="navCharts" class="activenav" onclick="showTab(this)" data-div="chartDiv">Charts</a>
          <a id="navCurrentHoldings" onclick="showTab(this);" data-div="holdingsDiv">Holdings</a>
          <a id="navAccounts" onclick="showTab(this);" data-div="accountsDiv">Accounts</a>
          <a id="navAnal" onclick="showTab(this);" data-div="analDiv">Analysis</a>
          <a id="navHist" onclick="showTab(this); refreshHistoryChart();" data-div="histDiv">History</a>
          <a id="navLog" onclick="showTab(this);" data-div="logDiv">Log</a>
        </td>
        <td style="width: 30%; text-align: center;">
          <span id="spnTotalHoldings"></span>
        </td>
        <td style="width: 35%; text-align: right;">
          <span id="spnCurrencies"></span>
        </td>
      </tr>
      <!--
      <tr>
        <td colspan="2" class="marquee" style="width: 100%;"> < !--id="tdIndexTicker" style="width: 600px;"!-- >
          <div class="marquee" id="divIndexMarquee" style="width: 100%;"></div>
        </td>
      </tr>
      !-->
    </table>
    <div class="marquee" id="divIndexMarquee" style="width: 100%;"></div>
  </div>
  <div class="tabParent">
    <div class="tabContainer" id="chartDiv">
      <div>
        <label for="displayAsPercent">Display as percent</label><input type="checkbox" name="displayAsPercent" id="displayAsPercent" onclick="handleClick(this)"/>
        <label for="excludeNoHoldings">Hide shares with no holdings</label><input type="checkbox" name="excludeNoHoldings" id="excludeNoHoldings" onclick="handleClick(this)"/>
        <button onclick="showModalDialog_AddInstrument()">Add Instrument</button>
      </div>
      <div id="chartsDiv">Charts</div>
    </div>
  </div>
  <div class="tabParent">
    <div class="tabContainer" id="holdingsDiv">
      <div>
        <label for="groupBySymbol">Group By Symbol</label><input type="checkbox" name="groupBySymbol" id="groupBySymbol" onclick="handleClick(this)"/>
      </div>
      <div id="holdingsTableDiv">Holdings table</div>
      <br />
      <div id="watchlistTableDiv">Watchlist table</div>
      <br />
      <table>
        <tr>
          <td>Book Cost currencies<div id="divHoldingCurrenciesChart" class="HoldingCurrenciesChart"></div></td>
          <td style="width:50px"></td>
          <td>Current Value currencies<div id="divHoldingCurrenciesChartCurrentValue" class="HoldingCurrenciesChart"></div></td>
          <td style="width:50px"></td>
          <td>Book Cost per Account<div id="divAccountBookCost" class="HoldingCurrenciesChart"></div></td>
          <td style="width:50px"></td>
          <td>Current Value per Account<div id="divAccountValue" class="HoldingCurrenciesChart"></div></td>
        </tr>
      </table>
    </div>
  </div>
  <div class="tabParent">
    <div class="tabContainer" id="accountsDiv">
      <div>
        <label for="hideEmptyAccounts">Hide Empty Accounts</label><input type="checkbox" name="hideEmptyAccounts" id="hideEmptyAccounts" onclick="handleClick(this)"/>
      </div>
      <div id="accountsSummaryDiv"></div>
    </div>
  </div>
  <div class="tabParent">
    <div class="tabContainer" id="analDiv">Analysis</div>
  </div>
  <div class="tabParent">
    <div class="tabContainer" id="histDiv" style="height: 85%;">History Chart</div>
    <!--<span onclick="refreshHistoryChart();">Refresh Chart</span>!-->
  </div>
  <div class="tabParent">
    <div class="tabContainer" id="logDiv">Log</div>
  </div>
  <div id="modalDialog" class="modal">
    <div class="modal-content">
      <div>
        <!--<span class="modal-title">Title<span class="close">&times;</span></span> !-->
        <table class="modal-title"><tr><td id="modalTitle">Title</td><td class="close">&times;</td></tr></table>
      </div>
      <br />
      <div id="modalContentDiv"></div>
    </div>
  </div>
  <div id="modalChart" class="modal-chart">
    <div style="height: 70px;">&nbsp;</div>
    <div class="modal-chart-content">
      <table style="height: 100%; width:100%; border-collapse: collapse;">
        <tr>
          <td>
            <table class="modal-title"><tr><td id="modalChartTitle">Title</td><td><span id="spnCompareInstruments">Compare</span></td><td class="close">&times;</td></tr></table>
          </td>
        </tr>
        <tr>
          <td>
            <div id="divFullScreenChart" class="FullScreenChart"></div>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div id="chartTooltip" class="chart-tooltip"></div>
  <script>
    function initPage() {
      let c = Cookies.get('activeTab');
      let t = $('#' + c);
      if (t && t.length > 0) {
        showTab(t[0]);
      } else {
        showTab($('#navCharts')[0]);
      }

      /*c = Cookies.get('showBreakevenLine');
      $("#showBreakevenLine").prop('checked', (c == 'true') ? true : false);*/
      c = Cookies.get('displayAsPercent');
      $("#displayAsPercent").prop('checked', (c == 'true') ? true : false);

      c = Cookies.get('excludeNoHoldings');
      $("#excludeNoHoldings").prop('checked', (c == 'true') ? true : false);

      /*c = Cookies.get('showPreviousHoldings');
      $("#showPreviousHoldings").prop('checked', (c == 'true') ? true : false);*/
      c = Cookies.get('groupBySymbol');
      $("#groupBySymbol").prop('checked', (c == 'true') ? true : false);

      c = Cookies.get('hideEmptyAccounts');
      $("#hideEmptyAccounts").prop('checked', (c == 'true') ? true : false);

      getInstruments();
    }
    function showTab(tab) {
      //$('.navbar>a').removeClass('activenav');
      $('.navbar').find('.activenav').removeClass('activenav');
      $('#' + tab.id).addClass('activenav');

      //$('#mainDiv>div').removeClass('activetab').addClass('inactivetab');
      $('.tabParent.activeTab').removeClass('activeTab');
      //$('#' + $(tab).attr('data-div')).removeClass('inactivetab').addClass('activetab');
      $('#' + $(tab).attr('data-div')).parent().addClass('activeTab');

      Cookies.set('activeTab', tab.id, {'sameSite': 'strict'});
    }
    function handleClick(checkbox) {
      Cookies.set(checkbox.id, checkbox.checked, {'sameSite': 'strict'});
      
      switch (checkbox.id) {
        /*case 'showBreakevenLine':
          redrawAllSharesCharts();
          break;*/
        case 'displayAsPercent':
          redrawAllSharesCharts();
          break;
        case 'excludeNoHoldings':
          createSharesTable();
          redrawAllSharesCharts();
          break;
        /*case 'showPreviousHoldings':
          redrawAllSharesCharts();
          break;*/
        case 'groupBySymbol':
          $("#tbMainHoldings").html(''); //Empty the table body to make sure no duplicate rows are created
          //updateHoldingsTable();
          tablesUpdateTimings.updateNeeded = true;
          tablesUpdateTimings.lastUpdate = 0;
          break;
        case 'hideEmptyAccounts':
          break;
      }
    }
    $(document).ready(initPage());
  </script>
</body>
</html>
