Adding sum of values within nested each loop on resize

Question

I am building a horizontal website that is comprised of a series of sections, floated next to each other in an absolutely positioned WIDE wrapper. Please see diagram below:

I need to loop through the contents of each section, add up the widths of it's contents, and set each section's widths (so it's contents can fit horizontally). I then want to loop through each section and add up each section width, and set the width of the wrapper (so all of the sections will fit.)

If you look at the diagram, the goal is simple - sum up the contents of each section, set the section width. Then sum up the section widths, and set the wrapper width.

Below is my code. A similar script is run on page load which works great. This is JUST for the resize event.

function adjustPanels(){
    var sections = $("section"), count = sections.length;

    sections.each(function(){

        var totalWidth = 0,
        select = $(this).find('.mainScroll div, .mainScroll img');

        //we loop through all content within a section and sum it's widths
        select.each(function(index) {
            totalWidth += parseInt($(this).outerWidth(true), 10);
        });

        //here we add up all of the section widths so we can set a master width for the container
        sunWidth += parseInt(totalWidth, 10);

        //we set the width of each section
        $(this).css({ 'width' : totalWidth});

        //now we set the width of the container if we are done iterating (callback)
        if (!--count){
            $("#sectionWrap").css({'width' : sunWidth});
        }  
    });
}

$(window).resize(adjustPanels);

This does not work correctly. The line that seems to be causing the problems is sunWidth += parseInt(totalWidth, 10); This seems to be adding up these numbers exponentially, so the container is FAR too wide. The individual sections seem to have the correct widths, but the total is incorrect. Any idea how to fix this?

Answer 1

Setting the sunWidth to zero at the top of the function fixes this like so:

function adjustPanels(){
    var sunWidth = 0, sections = $("section"), count = sections.length;

    sections.each(function(){

        var totalWidth = 0,
        select = $(this).find('.mainScroll div, .mainScroll img');

        select.each(function(index) {
           totalWidth += parseInt($(this).outerWidth(true), 10);    
        });

        $(this).css({ 'width' : totalWidth});
        sunWidth += parseInt(totalWidth, 10);

        if (!--count){
             $("#sectionWrap").css({'width' : sunWidth});
        }

    });
}