<!DOCTYPE html>
<html ng-app="invxApp">
<head>
    <title>Invexplorer - Wijmo/Angular sample</title>

    <!-- turn off IE's 'compatibility mode' to ensure HTML5 compatibility -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- jQuery/jQueryUI/Angular (angular after jQuery) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/jscript" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/jscript" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js" type="text/javascript"></script>

    <!-- Wijmo -->
    <link href="http://cdn.wijmo.com/themes/cobalt/jquery-wijmo.css" type="text/css" rel="stylesheet" title="metro-jqueryui" />
    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.0.min.css" type="text/css" rel="stylesheet" />
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.0.min.js" type="text/jscript" ></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.0.min.js" type="text/jscript" ></script>

    <!-- AngularJS scripts -->
    <script src="scripts/app.js" type="text/jscript"></script>
    <script src="scripts/directives/invxDctv.js" type="text/jscript"></script>
    <script src="scripts/controllers/invxCtrl.js" type="text/jscript"></script>

    <!-- view model -->
    <script src="scripts/view-model.js" type="text/jscript"></script>
    <script src="scripts/portfolio.js" type="text/jscript"></script>
    <script src="scripts/portfolioItem.js" type="text/jscript"></script>
    <script src="scripts/company.js" type="text/jscript"></script>

    <!-- our styles (override jQueryUI) -->
    <link href="styles/style.css" rel="stylesheet" type="text/css" />

</head>
<body ng-controller="invxCtrl">

    <h1>
        <img class="middle" src="resources/InvExplorerLogo.png" />
        ComponentOne Invexplorer
    </h1>

    <p>
        This application was implemented using
        <a href="http://angularjs.org/"><b>AngularJS</b></a>,
        <a href="http://jqueryui.com/"><b>jQueryUI</b></a>, and
        <a href="https://www.grapecity.com/en/controls/wijmo/wijmo-3/"><b>ComponentOne Wijmo</b></a>.
    <p>
        The data displayed is obtained from <a href="http://finance.yahoo.com">Yahoo finance</a> services.
        Yahoo services are <b>not free</b>; they are being used here for demonstration purposes only.</p>

    <!-- portfolio table -->
    <table>
        <thead>
            <tr>
                <th class="left">Name</th>
                <th class="left">Symbol</th>
                <th class="left">Chart</th>
                <th class="right">Last Price</th>
                <th class="right">Change</th>
                <th class="right">Change %</th>
                <th class="right">Shares</th>
                <th class="right">Unit Cost</th>
                <th class="right">Value</th>
                <th class="right">Gain</th>
                <th class="right">Gain %</th>
                <th class="center">Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in viewModel.portfolio.items" ng-style="{background: item.getRowColor()}">
                <td>
                    <span 
                    ng-style="{background: item.getColor()}">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;
                    <span>{{item.company.name}}</span>
                </td>
                <td>
                    {{item.symbol}}
                </td>
                <td class="center">
                    <input type="checkbox" ng-model="item.chart" ng-click="item.chartChanged()"/>
                </td>
                <td class="right">
                    {{item.lastPrice | number:2 }}
                </td>
                <td class="right" ng-style="{color: item.getAmountColor(item.change)}">
                    {{item.change | number:2 }}
                </td>
                <td class="right" ng-style="{color: item.getAmountColor(item.change)}">
                    {{item.getChangePercent() | number:2 }}
                </td>
                <td>
                    <input class="numeric" ng-model="item.shares" />
                </td>
                <td>
                    <input class="numeric" ng-model="item.unitCost" />
                </td>
                <td class="right">
                    {{item.getValue() | number:2 }}
                </td>
                <td class="right" ng-style="{color: item.getAmountColor(item.getGain())}" >
                    {{item.getGain() | number:2 }}
                </td>
                <td class="right" ng-style="{color: item.getAmountColor(item.getGain())}">
                    {{item.getGainPercent() | number:2 }}
                </td>
                <td class="center">
                    <a class="hlink" ng-click="item.remove()">x</a>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- add symbol -->
    <div class="addSymbol">
        Add Symbol: 

        <!-- jQueryUI autocomplete -->
        <invx-autocomplete
            ng-model="viewModel.portfolio.newSymbol"
            delay="300" 
            source="viewModel.autoCompleteSource" 
            select="viewModel.autoCompleteClose" >
        </invx-autocomplete>
        
        <!-- add the selected symbol to the portfolio -->
        <button 
            ng-click="viewModel.portfolio.addNewSymbol()" 
            ng-disabled="viewModel.portfolio.canAddNewSymbol == false">
            Add to Portfolio
        </button>

        <!-- progress indicator (visible when viewModel.updating > 0) -->
        <span class="floatRight" ng-show="viewModel.updating > 0">
            <img src="resources/progress.gif" /><i> retrieving data...</i>
        </span>
    </div>

    <!-- links to select time span to be charted -->
    <div ng-show="viewModel.chartVisible">
        <a class="hlink" ng-click="viewModel.setMinDate(6)">6m</a> 
        <a class="hlink" ng-click="viewModel.setMinDate(0)">YTD</a> 
        <a class="hlink" ng-click="viewModel.setMinDate(12)">1y</a> 
        <a class="hlink" ng-click="viewModel.setMinDate(24)">2y</a> 
        <a class="hlink" ng-click="viewModel.setMinDate(36)">3y</a> 
        <a class="hlink" ng-click="viewModel.setMinDate(1000)">All</a> 
    </div>

    <!-- portfolio chart -->
    <invx-chart
        series-list="viewModel.chartSeries"
        series-styles="viewModel.chartStyles"
        series-hover-styles="viewModel.chartHoverStyles"
        width="800" height="300" />
</body>
</html>
