function initCategory(cat) {




    var transactionhelper = new Transactionhelper();
    var transpackselector = new Transpackselector();
    var transpack = new Transpack();





    // this is what happens when the transactions are recieved
    var callback = function () {

        // submenu
        var subItems = [];

        subItems.push({
            name: "start",
            id: "subStart",
            selected: true
        });
        var submenu = submenuBuilder(subItems);

        var bankAccountDropdown = bankAccountDropdownBuilder();
        var periodDropdown = getPeriodDropDown(storage.transactions);
        $('#submenu').prepend(submenu + periodDropdown + bankAccountDropdown);



        // Set up the transpack with transactions
        transpack.setFromSelector(transpackselector);

        //build dropdown
        var dropdown = getCategoriesDropDown(cat, "catDropdown") + '<div class="clear"></div><br/>';
        $('#dropdownContainer').html(dropdown);

        // display category from url
        if (cat !== "") {
            displayCategory(cat)
        }
    };

    transactionhelper.updateStorage(callback);
}


function displayCategory(cat) {

    var transpackselector = new Transpackselector();
    var transpack = new Transpack();
    var categoryview = new Categoryview();

    var bankAccount = $('#bankAccountDropdown').val();
    var period = $('#periodDropdown').val();

    if (bankAccount > 0) {
        transpackselector.setBankAccount(bankAccount);
    }
    if (period.substr(0, 1) === 'M') {
        var start = new Date(period.substr(2, 4), period.substr(7, 2), 1, 0, 0, 0, 0);
        start.addMonths(-1);
        transpackselector.setStart(start);
        var end = new Date(start);

        transpackselector.setEnd(end.moveToLastDayOfMonth());
    }

    if (period.substr(0, 1) === 'Y') {
        var start = new Date(period.substr(2, 4), 0, 1, 0, 0, 0, 0);
        transpackselector.setStart(start);

        var end = new Date(start);
        transpackselector.setEnd(end.addMonths(11).moveToLastDayOfMonth());
    }


    //reset the page
    $('#innerContainer').html("");

    transpackselector.setCat(cat);
    transpack.setFromSelector(transpackselector);

    if (transpack.transactions.length === 0) {
        var message = '<div class="notice span-12">Det verkar som det inte finns några transaktioner som uppfyller dina kriterier.</div>'
        $('#innerContainer').html(message);
        return false;
    }



    transpack.transactions = $(transpack.transactions).sort("date", "desc");
    categoryview.setTranspack(transpack);


    //summering
    var summaryHtml = '<div class="span-6">' + categoryview.getSummary() + categoryview.getVendors() + categoryview.getTransactions() + '</div>';
    $('#innerContainer').append(summaryHtml);


    var graphLinks = '<span style="margin-right:400px;">Grafer</span><a href="#" id="lineLink" class="headlineLink">Paj</a><a href="#" id="pieLink" class="headlineLink">Linje</a>';
    var graph = '<div class="span-16 last" id="pieChartWrapper">' + grayBoxWrapper(graphLinks, '<div id="pieChartContainer"></div><div id="lineChartContainer" style="display:none;"></div>') + '</div>';

    $('#innerContainer').append(graph);

    transpack.transactions = $(transpack.transactions).sort("date", "asc");
    //piechart
    var piechart = new Piechart();

    piechart.setTarget("pieChartContainer");
    piechart.setMaxQuantity(10);

    var vendorData = categoryview.getTransactionsByVendorData();

    $(vendorData).each(function () {
        var total = 0;
        $(this.vendors).each(function () {
            total = total + parseFloat(this.getAmount());
        });
        piechart.addSeriesData(this.name.toString(), Math.round(total));
    });

    piechart.render();




    //Linechart
    var linechart = new Linechart();
    linechart.setTarget("lineChartContainer");
    linechart.setStartDate(transpack.transactions[0].getRealDate());
    linechart.setSeriesData(transpack.getLineGraphDataExpenses());
  
    if (linechart.getSeriesData().length > 1){
        linechart.render();
    } else {
        $('#lineChartContainer').html("För få transaktioner i denna kategori");
    }
    
    
    //Month by Month
    
    var month = '<div class="span-16 last" id="monthWrapper" style="float:right;">' + grayBoxWrapper('Månad för månad', '<div id="monthContainer"></div>') + '</div>';
    $('#pieChartWrapper').after(month);
    
    $('#monthContainer').html(categoryview.getMonthByMonth());
    
    //graph
    var barchart = new Barchart();
    barchart.setTarget("monthByMonthGraph");
    barchart.setSeriesData(transpack.getBarGraphDataByMonth());
    barchart.render();
    
    
}