function renderPeriodReport(data) {
    var html = "";

    var days = data.transpack.getTotalDays();


    html += '<span class="date">' + data.transpack.getSelectorPeriod().startDate.toString("yyyy-MM-dd") + '</span><span class="date">' + data.transpack.getSelectorPeriod().endDate.toString("yyyy-MM-dd") + '</span>';

    html += '<table>';
    html += '<thead><tr><th></th><th>Totalt</th><th>Per dag</th><th>Per Månad</th></tr></thead>';
    html += '<tr><td>Antal transaktioner</td><td>' + data.transpack.getNumberOfTransactions() + '</td><td>' + Math.round((data.transpack.getNumberOfTransactions() / days) * 10) / 10 + '</td><td>' + Math.round(30 * (data.transpack.getNumberOfTransactions() / days) * 10) / 10 + '</td></tr>';
    html += '<tr><td>Summa</td><td>' + Math.round(data.transpack.getTotalAmount()) + '</td><td>' + Math.round((data.transpack.getTotalAmount() / days)) + '</td><td>' + Math.round(30 * (data.transpack.getTotalAmount() / days)) + '</td></tr>';
    html += '</table';

    html += renderCategoriesData(data);

    return html;
}

function renderVendors(data) {
    var html = '<ul>';


    $(data).each(function () {

        if (this.vendors.length > 1) {
            html += '<li><span class="name">' + this.name + '</span>';

            var total = 0;
            var num = 0;
            $(this.vendors).each(function () {
                total = total + parseFloat(this.getAmount());
                num++;
            });

            html += '<span class="num">' + num + '</span>';
            html += '<span class="amount">' + Math.round(total) + '</span></li>';
        }
    });

    html += '</ul>';

    return html;
}

function renderCategorySummary(data) {
    var html = '<table>';


    html += '<tr><td class="name">Antal</td><td class="amount">' + data.getNumberOfTransactions() + '</td></tr>';
    html += '<tr><td class="name">Summa</td><td class="amount">' + data.getTotalAmount() + '</td></tr>';
    html += '<tr><td class="name">Snittsumma</td><td class="amount">' + data.getAverageAmount() + '</td></tr>';
    html += '<tr><td class="name">Summa per månad</td><td class="amount">' + data.getAmountPerMonth() + '</td></tr>';

    html += '</table>';

    return html;
}

function renderMonthReport(report) {
    var tp = report.transpack;
    var days = tp.getTotalDaysByTransactions();


    var reportData = report.getReportData();

    var total = Math.round((tp.getTotalAmount() / days) * 30);

    var categoryHtml = '';



    $(reportData.categories).each(function () {
        if (this.getAmountPerMonth() > 0) {
            categoryHtml += '<span style="width: 130px; float:left;">';
            categoryHtml += '<label>' + this.getName() + ': </label>';
            categoryHtml += this.getAmountPerMonth() + ' (' + Math.round((100 * this.getAmountPerMonth()) / total) + '%)';
            categoryHtml += '</span>';
        }
    });

    var html = '';
    html += categoryHtml;
    html += '<div class="clear"></div>';
    html += '<hr/>';
    html += '<span style="float:left;"><label>Summa</label>' + Math.round((tp.getTotalAmount() / days) * 30) + '</span><br/>';


    var period = getDisplayDate(tp.getFirstDate()) + " - " + getDisplayDate(tp.getLastDate());

    var returnHtml = renderBoxWrapper(html, "Månadsutgifter perioden: " + period, 900);

    return returnHtml;
}


function renderCategoryTable(reportData) {
    var html = '';

    html += '<table>';

    var sortedCategories = (reportData.categories).sort("totalAmount", "desc");


    $(sortedCategories).each(function () {

        if (this.getNumberOfTransactions() > 0) {
            html += '<tr><td style="width: 250px;">' + this.getName() + '</td><td style="width: 250px;">' + this.getNumberOfTransactions() + '</td><td>' + this.getTotalAmount() + '</td><td></td></tr>';
        }

    });



    html += '</table>';



    return html;
}

function renderBoxWrapper(htmlIn, title, width, padding) {

    if (padding === undefined) {
        padding = 5;
    }

    var html = '<div style="width: ' + width + 'px; margin-bottom: 20px;" class="gray box">';
    html += '<div class="headline">' + title + '</div>';

    html += '<div class="content" style="padding:' + padding + 'px;">';
    html += htmlIn;

    html += '</div></div>';
    return html;
}


function renderMultipleMonthReport(reports) {

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

    html += '<thead><tr><td>Månad</td><td>Antal</td><td>Summa</th><td></td></tr></thead><tbody>';


    $(reports).reverse().each(function () {


        if (this.transpack.transactions.length > 0) {
            html += '<tr class="monthRow"><td style="width: 250px;">' + this.transpack.transactions[0].getRealDate().getMonthName() + ' ' + this.transpack.transactions[0].getRealDate().getFullYear() + '</td>';

            html += '<td style="width: 250px;">' + this.transpack.getNumberOfTransactions() + '</td><td>' + this.transpack.getTotalAmount() + '</td><td><input type="button" class="moreInfo" value="info"/></td></tr>';
            html += '<tr style="display:none;"><td colspan="4">' + renderCategoryTable(this.getReportData()) + '</td></tr>';
        }
        //html += renderMonthReport(this);
    });

    html += '<script>$(".moreInfo").click(function(){ $(this).parent().parent().next().toggle();});</script>';



    html += '</tbody><table>';


    return html;
}

jQuery.fn.reverse = function () {
    return this.pushStack(this.get().reverse(), arguments);
};


function renderCategoriesData(data) {

    var html = "";

    html += '<table class="categoryTable">';

    html += '<thead><tr><th>Kategori</th><th>Antal</th><th>Summa</th><th>Per månad</th></tr></thead>';


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

        if (this.getNumberOfTransactions() > 0) {

            html += '<tr class="categoryRow"><td>' + this.getName() + '</td><td>' + this.getNumberOfTransactions() + '</td><td>' + this.getTotalAmount() + '</td><td>' + Math.round(30 * (this.getTotalAmount() / data.transpack.getTotalDays())) + '</td></tr>';

            html += '<tr style="display:none;"><td colspan ="3"><table>';

            $(this.transactions).each(function () {
                html += '<tr><td>' + this.getName() + '</td><td>' + this.getDate() + '</td><td>' + this.getAmount() + '</td></tr>';
            });

            html += '</table></td></tr>';
        }

    });

    html += '</table>';



    return html;
}