function grayBoxStart(title) {
    var html = '';

    html += '<div class="gray box">';
    html += '<div class="headline">' + title + '<span class="toggler"></span></div>';
    html += '<div style="padding: 5px;" class="content">';

    return html;
}

function grayBoxEnd() {
    return '</div></div>';
}

function grayBoxWrapper(title, content) {
    var html = grayBoxStart(title);

    html += content;

    html += grayBoxEnd();

    return html;
}

function submenuBuilder(options) {
    var html = '';

    $(options).each(function () {

        if (this.selected) {
            html += '<a href="#" id="' + this.id + '" class="selected">';
        } else {
            html += '<a href="#" id="' + this.id + '">';
        }

        html += '<span>' + this.name + '</span></a>';
    });
    return html;
}

function bankAccountDropdownBuilder() {
    var bankAccounts = storage.bankAccounts;
    var html = '';
    if (bankAccounts.length === 1) {
        return html;
    }

    html += '<label style="margin-top: 6px;">Bankkonto </label>';

    html += '<select id="bankAccountDropdown" style="margin-top: 6px; margin-right: 10px;">';

    html += '<option value="0">Alla</option>';
    $(bankAccounts).each(function () {
        html += '<option value="' + this.id + '">' + this.name + '</option>';
    });

    html += '</select>';

 
    return html;
}

function getPeriodDropDown(source) {
    var html = '';

    var options = '';
    var temp = source;

    if (temp.length === 0) return '';
    

    // years that has transactions
    var years = []

    var now = new Date();

    var previousMonth = false;
    var thisMonth = false;

    //54
    $(temp).each(function () {

        //see what years we have
        if(this.getRealDate().toString('yyyy'))
        
        years.push(this.getRealDate().toString('yyyy'));

        // See if we have transactions last month
        if (this.getRealDate().getUTCMonth() === now.addMonths(-1).getUTCMonth()) {
            previousMonth = true;
        }
        now.addMonths(1);

        // See if we have transactions this month
        if (this.getRealDate().getUTCMonth() === now.getUTCMonth()) {
            thisMonth = true;
        }

    });
   
    
    years = _.uniq(years);
    
    html += '<label style="margin-top: 6px;">Period </label>';

    html += '<select id="periodDropdown" style="margin-top: 6px; margin-right: 10px;">';

    html += '<option value="A">Alla</option>';

    if (thisMonth) {   
        html += '<option value="M_' + now.toString('yyyy-MM') + '">Denna månad</option>';
    }

    if (thisMonth) {
        html += '<option value="M_' + now.addMonths(-1).toString('yyyy-MM') + '">Föregående månad</option>';
    }    

    $(years).each(function () {
        html += '<option value="Y_' + this + '">'+this+'</option>';
    });

    html += '</select>';

    return html;
};