/**
 * View for rendering html concerning transactions
 * @author bjora857
 */

function Transactionview() {

    this.renderSortableTable = function (transactions, target) {

        var html = '<table style="float:left;" class="inputTable sortableTable">';

        html += '<thead><tr><th style="">Namn</th><th>Summa</th><th>Beskrivning</th><th>Datum</th><th>Kategori</th><th></th><th></th></tr></thead>';

        $(transactions).each(function () {

            html += '<tr id="t_' + this.getId() + '">';
            html += '<td>' + this.getName() + '</td>';
            html += '<td>' + this.getAmount() + '</td>';
            html += '<td>' + this.getDescription() + '</td>';
            html += '<td>' + this.getDate() + '</td>';
            html += '<td>' + this.getCategory() + '</td>';
            html += '<td><a href="/trans/updatetransaction/' + this.getId() + '" class="editLink" type="button">Ändra</a></td>';
            html += '<td><a href="#' + this.getId() + '" class="removeLink">Ta bort</a></td>';
            html += '</tr>';

        });

        html += '</table>';
        target.html(html);

        $('table').tableFilter({
            imagePath: "/img/tablefilter/icons",
            sortOnLoad: 3,
            pageLength: 100,
            loadPlugins: true
        });

        $(".editLink").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic'
        });

    };

    this.renderNoValidTransactions = function () {
        var message = '<span class="notice" style="margin-top: 10px; float:left;">Du har inte lagt in några transaktioner ännu. Klicka <a href="/parse">här</a> för att lägga in dina första transaktioner</span>';
        $('#container').html(message);

        return true;
    };

    this.getMonthReport = function () {
        var report = getMonthReport();
        var html = renderMonthReport(report);

        var eachMonthReports = getEachMonthReports(report.transpack);

        var multiMonthBox = grayBoxWrapper("Per månad", renderMultipleMonthReport(eachMonthReports));

        return html + multiMonthBox;

    };

    this.getLatestTransactions = function (num) {
        var html = '';

        // if we have no transactions return nada
        if (this.transpack.transactions.length === 0) {
            return;
        }


        // find the transactions
        var temp = this.transpack.transactions;
        temp = $(temp).sort("date", "desc");

        html += grayBoxStart('Senaste ' + num + ' transaktionerna');

        html += '<table>';

        // iterate over the latest "num" transactions 
        for (var i = 0; i < num; i++) {
            if (temp[i] === undefined) {
                return;
            }
            html += '<tr><td class="name">' + temp[i].getName() + '</td><td class="date">' + temp[i].getDate() + '</td><td class="amount">' + temp[i].getAmount() + '</td><td class="category">' + temp[i].getCategory() + '</td></tr></li>';
        }

        html += '</table>';

        html += grayBoxEnd();

        return html;
    };

    this.getStatistics = function () {
        var html = '';

        html += grayBoxStart('Statistik');

        html += '<table>';

        html += '<tr><td><label>Antal transaktioner</label></td><td>' + this.transpack.getNumberOfTransactions() + '</td></tr>';
        html += '<tr><td><label>Summa utgifter</label></td><td>' + this.transpack.getTotalAmount() + '</td></tr>';
        html += '<tr><td><label>Summa inkomster</label></td><td>' + this.transpack.getTotalIncomes() + '</td></tr>';
        html += '<tr><td><label>Resultat</label></td><td>' + this.transpack.getTotalDiff() + '</td></tr>';
        html += '<tr><td><label>Antal dagar</label></td><td>' + this.transpack.getTotalDaysByTransactions() + '</td></tr>';
        html += '<tr><td><label>Summa Utgifter per dag</label></td><td>' + this.transpack.getAmountPerDay() + '</td></tr>';
        html += '</table>';

        html += grayBoxEnd();

        return html;
    };

    this.getCategories = function () {
        var html = '';


        html += grayBoxStart('Kategorier');
        var data = this.transpack.getReportData();

        html += '<table>';

        var totalAmount = this.transpack.getTotalAmount();

        //6
        $(data.categories).each(function () {

            if (this.getTotalAmount() > 0) {
                html += '<tr>';
                html += '<td><label><a href="/category/index/'+this.getName()+'">' + this.getName() + '</a></label></td>';
                html += '<td style="width: 30px;"><label>' + this.getNumberOfTransactions() + '</label></td>';
                html += '<td><label>' + this.getTotalAmount() + '</label></td>';
                html += '<td><label>' + this.getPercentageOfTotal(totalAmount) + '%</label></td>';
                html += '</tr>';
            }
        });

        html += '</table>';

        html += grayBoxEnd();

        return html;
    };

    this.getPeriod = function () {
        var html = '';

        var period = this.transpack.getPeriod();
        html += getDisplayDate(period.start) + ' till ' + getDisplayDate(period.end);

        return html;
    };

    this.getMonthByMonth = function () {
        var html = '';

        var months = this.transpack.getMonthTranspacks();


        html += '<table class="zebra">';
        html += '<thead><tr><th>Månad</th><th>Antal</th><th>Utgifter</th><th>Inkomster</th><th>Resultat</th><th></th></tr></thead>';
        

        $(months).each(function () {

            var month = this.getFirstDate().getMonthName() + ' ' + this.getFirstDate().getFullYear();
            
              var resultClass ="";
                if(this.getTotalDiff() >0)
                    resultClass="greenColor";
                else {
                    resultClass="redColor";
                }

            
            html += '<tr><td><b>' + month + '</b></td><td>' + this.getNumberOfTransactions() + '</td><td>' + this.getTotalAmount() + '</td><td>' + this.getTotalIncomes() + '</td><td class="'+ resultClass+'">' + this.getTotalDiff() + '</td><td><span class="toggler mini"></span></td></tr>';
        
            html += '<tr style="display:none;"><td colspan="6">';
            html += '<table class="innerTable">';
            $(this.transactions).each(function () {
                html += '<tr><td>'+this.getName()+'</td><td>'+this.getDate()+'</td><td>'+this.getCategory()+'</td><td>'+this.getAmount()+'</td></tr>';
                            
            });
            html += '</table>';            
            html += '</td></tr>';
          
        });
        html += '</table>';


        return html;
    };

    this.getAverageMonth = function () {
        var html = '';
        //
        var days = this.transpack.getTotalDaysByDate();
        var totalAmount = this.transpack.getTotalAmount();
        var amount = parseInt((30.40 * totalAmount) / days, 10);
        var numTransactions = parseInt((30.40 * this.transpack.getNumberOfTransactions()) / days, 10);
        var totalIncomes = this.transpack.getTotalIncomes();
        var incomes = parseInt((30.40 * totalIncomes) / days, 10);
        var result = incomes -amount;

        var report = new Report(this.transpack);
        var reportData = report.getReportData();

        var num = 10;

        var catDiv = '<div>';

        $(reportData.categories).each(function () {
            num++;
            var amount = parseInt((30.40 * this.totalAmount) / days, 10);
            var percentage = parseInt(100 * this.totalAmount / totalAmount);
            var cat = '<span style="width: 100px; float:left; font-weight: bold;"><a href="/category/index/'+this.name+'">' + this.name + '</a>: </span><span style="text-align: right; width: 60px; float:left;">' + amount + ' (' + percentage + '%)</span>';
            catDiv += '<span style="width: 205px; margin-left: 10px; float:left;">' + cat + '</span>';
        });

        html += catDiv;



        html += '<div class="clear"></div>';
        html += '<hr/>';

        var resultClass ="";

        if(result >0)
            resultClass="greens";
        else {
            resultClass="reds";
        }    

        html += '<span style="width: 165px; margin-left: 10px; float:left;"><label style="float:left;">Summa utgifter:</label><span style="float: right; font-weight: bold;">' + amount + '</span></span>';
        html += '<br/><span style="width: 165px; margin-left: 10px; float:left;"><label style="float:left;">Summa inkomster:</label><span style="float: right; font-weight: bold;">' + incomes + '</span></span>';
        html += '<br/><span style="width: 165px; margin-left: 10px; float:left;"><label style="float:left;">Resultat:</label><span style="float: right; font-weight: bold;" class="'+resultClass+'">' + result + '</span></span>';

        html += '</table>';


        return html;
    };
    
    


    this.setTranspack = function (transpack) {
        this.transpack = transpack;
        return true;
    };

}