@(user: securesocial.core.Identity, userId: Long, leagueId: Long, portfolioId: Long)
@import securesocial.core.IdentityProvider
@import securesocial.core.Registry
@import securesocial.core.AuthenticationMethod._
@import securesocial.core.providers.utils.RoutesHelper
@import Http.Context.Implicit

@main("Paramount Investment League - Portfolio", user.fullName, userId, leagueId) {

<script>
    $(function() {
        var name = $( "#name" ),
        email = $( "#email" ),
        allFields = $( [] ).add( name ).add( email ),
        tips = $( ".validateTips" );
        function updateTips( t ) {
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }
        $( "#purchase-form" ).dialog({
            dialogClass:"diag",
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Purchase": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );
                    var ticker = document.getElementById('name').value;
                    var qty = document.getElementById('email').value;
                    if (ticker === "" || qty === "") {
                        alert("All fields must be filled out")
                    }
                    else {
                        myJsRoutes.controllers.Trader.buyStock(@portfolioId, ticker, qty).ajax({
                            success : function(data) {
                                requestOK = true;
                                if ((data.achv & 1) == 0) {
                                    //display achievement for first buy
                                    //set user.achv to 1
                                    //alert("need achievement!");
                                    var d = document.getElementById("achievements");
                                    $("#achievements").show();
                                    d.className = "achievements";
                                    d.innerHTML = '<div class="achv_wrap"><img class="achv_img" src="@routes.Assets.at("images/money_bag.png")"></img><div class="achv_text">ACHIEVEMENT EARNED</br>First Stock Purchase</div></div>';
                                    $("#achievements").delay(3000).fadeOut(3000);
                                }
                                initPortfolio();
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                var err = JSON.parse( jqXHR.responseText );
                                alert(err.message);
                            }
                        });
                        $( this ).dialog( "close" );
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
        $( "#purchase2" )
        .button()
        .click(function() {
            $( "#purchase-form" ).dialog( "open" );
        });
    });

    $(function() {
        var ticker = $( "#ticker2" ),
        qty = $( "#qty2" ),
        allFields = $( [] ).add( ticker ).add( qty ),
        tips = $( ".validateTips" );
        function updateTips( t ) {
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }
        $( "#sell-form" ).dialog({
            dialogClass:"diag",
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Sell": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );
                    var ticker = document.getElementById('ticker2').value;
                    var qty = document.getElementById('qty2').value;
                    if (qty === "" || ticker === "") {
                        alert("All fields must be filled out");
                    }
                    else {
                        myJsRoutes.controllers.Trader.sellStock(@portfolioId, ticker, qty).ajax({
                            success : function(data) {
                                requestOK = true;
																if (((data.achv & 1<<1) == 0) && (data.cashValueOfSale > 0)) {
																	//display achievement for first positive sale
																	var d = document.getElementById("achievements");
																	$("#achievements").show();
																	d.className = "achievements";
																	d.innerHTML = '<div class="achv_wrap"><img class="achv_img" src="@routes.Assets.at("images/money_bag.png")"></img><div class="achv_text">ACHIEVEMENT EARNED</br>First Positive Sale</div></div>';
																	$("#achievements").delay(3000).fadeOut(3000);
																}
                                initPortfolio();
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                var err = JSON.parse( jqXHR.responseText );
                                alert(err.message);
                            }
                        });
                        $( this ).dialog( "close" );
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
        $( "#sell1" )
        .button()
        .click(function() {
            $( "#sell-form" ).dialog( "open" );
        });
    });
    </script>

    <div id="purchase-form" title="Purchase Stock">
        <p class="validateTips">All form fields are required.</p>
        <form>
            <fieldset>
                <label for="name">Ticker: </label>
                <input style="text-transform:uppercase"type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
                <label for="email">Quantity: </label>
                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
            </fieldset>
        </form>
    </div>
    <div id="sell-form" title="Sell Stock">
        <p class="validateTips">All form fields are required.</p>
        <form>
            <fieldset>
                <label for="ticker2">Ticker: </label>
                <input style="text-transform:uppercase"type="text" name="ticker2" id="ticker2" class="text ui-widget-content ui-corner-all">
                <label for="qty2">Quantity: </label>
                <input type="text" name="qty2" id="qty2" class="text ui-widget-content ui-corner-all">
            </fieldset>
        </form>
    </div>


    <div class="x_container">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="main_top">
                        <div class="main_top_header">Portfolio Overview ></div>

                        <table class="main_top_table">
                            <tr>
                                <td>
                                    <b>Cash Available:</b>
                                    <span id="cash"></span>
                                </td>
                                <td>
                                    <b>League Name:</b>
                                    <span id="league_name"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Stock Value:</b>
                                    <span id="total_stock_value"></span>
                                </td>
                                <td>
                                    <b>Percentage Return:</b>
                                    <span id="percent_return"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Total Portfolio Value:</b>
                                    <span id="portfolio_value"></span>
                                </td>
                                <td>
                                    <b>Initial Cash Balance:</b>
                                    <span id="starting_value"></span>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">

                                </td>
                            </tr>
                        </table>
                        <div class="button_container">
                            <button id="sell1" class="purchase_stock2">Sell Stock</button>
                            <button id="purchase2" class="purchase_stock">Purchase Stock</button>
                        </div>
                    </div>

                    <div class="main_bot">

                        <style type="text/css">
                            .tftable {color:#333333;width:100%;text-align:center;}
                            .tftable th {background-color:#acc8cc;padding: 8px;text-align:center;}
                            .tftable tr {background-color:#d4ebff;}
                            .tftable td {padding: 8px;}
                            .tftable tr:hover {background-color:#f3f9ff;}
                        </style>

                        <table class="tftable" border="0">
                            <tr><td><b>SELL</b></td>
                                <td><b>TICKER</b></td>
                                <td><b>TYPEOF</b></td>
                                <td><b>QTY</b></td>
                                <td><b>PRICE</b></td>
                                <td><b>DATEOF</b></td>
                                <td><b>CURRENTPRICE</b></td>
                            </tr>
                            <tr><td>Sell1</td><td><span id="pos_ticker_1"></span></td>
                                <td><span id="pos_typeOf_1"></span></td>
                                <td><span id="pos_qty_1"></span></td>
                                <td><span id="pos_price_1"></span></td>
                                <td><span id="pos_dateOf_1"></span></td>
                                <td><span id="pos_currentPrice_1"></span></td>
                            </tr>
                            <tr><td>Sell2</td>
                                <td><span id="pos_ticker_2"></span></td>
                                <td><span id="pos_typeOf_2"></span></td>
                                <td><span id="pos_qty_2"></span></td>
                                <td><span id="pos_price_2"></span></td>
                                <td><span id="pos_dateOf_2"></span></td>
                                <td><span id="pos_currentPrice_2"></span></td>
                            </tr>
                            <tr><td>Sell3</td>
                                <td><span id="pos_ticker_3"></span></td>
                                <td><span id="pos_typeOf_3"></span></td>
                                <td><span id="pos_qty_3"></span></td>
                                <td><span id="pos_price_3"></span></td>
                                <td><span id="pos_dateOf_3"></span></td>
                                <td><span id="pos_currentPrice_3"></span></td>
                            </tr>
                            <tr><td>Sell4</td>
                                <td><span id="pos_ticker_4"></span></td>
                                <td><span id="pos_typeOf_4"></span></td>
                                <td><span id="pos_qty_4"></span></td>
                                <td><span id="pos_price_4"></span></td>
                                <td><span id="pos_dateOf_4"></span></td>
                                <td><span id="pos_currentPrice_4"></span></td>
                            </tr>
                            <tr><td>Sell5</td>
                                <td><span id="pos_ticker_5"></span></td>
                                <td><span id="pos_typeOf_5"></span></td>
                                <td><span id="pos_qty_5"></span></td>
                                <td><span id="pos_price_5"></span></td>
                                <td><span id="pos_dateOf_5"></span></td>
                                <td><span id="pos_currentPrice_5"></span></td>
                            </tr>
                            <tr><td>Sell6</td>
                                <td><span id="pos_ticker_6"></span></td>
                                <td><span id="pos_typeOf_6"></span></td>
                                <td><span id="pos_qty_6"></span></td>
                                <td><span id="pos_price_6"></span></td>
                                <td><span id="pos_dateOf_6"></span></td>
                                <td><span id="pos_currentPrice_6"></span></td>
                            </tr>
                            <tr><td>Sell7</td><td><span id="pos_ticker_7"></span></td>
                                <td><span id="pos_typeOf_7"></span></td>
                                <td><span id="pos_qty_7"></span></td>
                                <td><span id="pos_price_7"></span></td>
                                <td><span id="pos_dateOf_7"></span></td>
                                <td><span id="pos_currentPrice_7"></span></td>
                            </tr>
                            <tr><td>Sell8</td>
                                <td><span id="pos_ticker_8"></span></td>
                                <td><span id="pos_typeOf_8"></span></td>
                                <td><span id="pos_qty_8"></span></td>
                                <td><span id="pos_price_8"></span></td>
                                <td><span id="pos_dateOf_8"></span></td>
                                <td><span id="pos_currentPrice_8"></span></td>
                            </tr>
                            <tr><td>Sell9</td>
                                <td><span id="pos_ticker_9"></span></td>
                                <td><span id="pos_typeOf_9"></span></td>
                                <td><span id="pos_qty_9"></span></td>
                                <td><span id="pos_price_9"></span></td>
                                <td><span id="pos_dateOf_9"></span></td>
                                <td><span id="pos_currentPrice_9"></span></td>
                            </tr>
                            <tr><td>Sell10</td>
                                <td><span id="pos_ticker_10"></span></td>
                                <td><span id="pos_typeOf_10"></span></td>
                                <td><span id="pos_qty_10"></span></td>
                                <td><span id="pos_price_10"></span></td>
                                <td><span id="pos_dateOf_10"></span></td>
                                <td><span id="pos_currentPrice_10"></span></td>
                            </tr>
                        </table>

                        <span class="main_bot_link" id="slider_button_span">
                        </span>

                    </div>

                    <div class="slide">
                        <div class="btn-slide">
                            v</div></div>

                </div>

                <div class="col-md-4">

                    <div class="right">

                        <div class="right_header">Query ></div>

                        <div class="right_top">
                            <input
                            type="text"
                            maxlength=4
                            class="tb11"
                            id="query_input"
                            name="query"
                            style="text-transform:uppercase"
                            >
                            <a href="#"><div class="tb11_go"></div></a>
                        </div>

                        <div class="right_bot">
                            <table style="width:100%;">
                                <tr width="50%">
                                    <td><b><div title="The stock abbreviation of a company">Ticker:</div></b></td>
                                    <td><span id="stock_1"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="The price of the stock">Price:</div></b></td>
                                    <td><span id="stock_2"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Amount of shares that have been traded in a specific period">Volume:</div></b></td>
                                    <td><span id="stock_3"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="The price of a stock relative to how much it earns">PE Ratio:</div></b></td>
                                    <td><span id="stock_4"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Percent of company's profit allocated to each share">EPS:</div></b></td>
                                    <td><span id="stock_5"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Highest price of stock in 52 weeks">52 Week High:</div></b></td>
                                    <td><span id="stock_6"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Lowest price of stock in 52 weeks">52 Week Low:</div></b></td>
                                    <td><span id="stock_7"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Lowest price of stock during the day">Day Low:</div></b></td>
                                    <td><span id="stock_8"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Highest price of stock during the day">Day High:</div></b></td>
                                    <td><span id="stock_9"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Average closing price of stock over last 50 days">50 Day Moving Avg:</div></b></td>
                                    <td><span id="stock_10"></span></td>
                                </tr>
                                <tr width="50%">
                                    <td><b><div title="Total market value of all outstanding shares of company">Market Cap:</div></b></td>
                                    <td><span id="stock_11"></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!-- 
                    <div class="rr">
                        <div class="purchase_header">Purchase Stock ></div>
                        <div class="purchase">
                            <table style="table-layout:fixed; width:100%;">
                                <tr><td width="60%">
                                        <label for="ticker_input">Ticker:</label>
                                        <input
                                        type="text"
                                        maxlength=4
                                        id="ticker_input"
                                        name="ticker"
                                        style="text-transform:uppercase"
                                        >
                                        <label for="qty_input">Quantity:</label>
                                        <input
                                        type="text"
                                        id="qty_input"
                                        name="ticker"
                                        style="text-transform:uppercase"
                                        >
                                        </td><td>
                                        <button class="purchase_stock2" name="purchase_stock" id="purchase_stock">submit</button>
                                    </td>
                                </tr>

                            </table>

                        </div>

                    </div> -->

                </div>
            </div>
        </div>

        <div id="achievements"></div>

        <script src="@routes.Assets.at("javascripts/myJS.js")" type="text/javascript"></script>

        <script>
            initPortfolio();
            function initPortfolio() {
                myJsRoutes.controllers.PortfolioController.getPortfolioOverview(@userId, @leagueId).ajax({
                    type: "GET",
                    dataType: 'json',
                    success : function(data) {

                        var d = document.getElementById("bs_nav1");
                        d.className = "active";
                        var e = document.getElementById("bs_nav2");
                        e.className = "";

                        document.getElementById("league_name").innerHTML = capitalizeFirstLetter(data.leagueName);
                        document.getElementById("cash").innerHTML = "$ " + Number(data.cash).toFixed(2);
                        document.getElementById("total_stock_value").innerHTML = "$ " + Number(data.totalStockValue).toFixed(2);
                        document.getElementById("starting_value").innerHTML = "$ " + Number(data.startingValue).toFixed(2);
                        document.getElementById("portfolio_value").innerHTML = "$ " + Number(data.totalStockValue + data.cash).toFixed(2);
                        document.getElementById("percent_return").innerHTML = Number(-100 * (1 - (data.totalStockValue + data.cash) / data.startingValue)).toFixed(2) + "%";

                        arr = data.positions;
                        iterator = 0;
                        updateSlider();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("Something bad happened " + errorThrown);
                    }

                });
            }


        </script>


        }