If combined width of elements < body change a div's ID?

I need to get the combined width of a set of divs (.image-div), and if their combined width is less than the body's width then change the ID of #makeMeScrollable to #makeMeScrollable2.

Here is what I have so far:

$(document).ready(function() {
    $('#makeMeScrollable').each(function() {
        var totalImageWidth = 0;

        $(".image-div", this).eac开发者_Python百科h(function () {
          totalImageWidth += $(this).width();
        });

    if (totalImageWidth < body ) {
    $(this).attr('id', 'makeMeScrollable2');
    }

    });
});

If I replace 'body' with a static number the code works so I must almost be there. I think this is just a syntax issue but I've tried every variation I can think of.

UPDATE Thanks to @ShankarSangoli ive got it working with the following:

$(document).ready(function() {
$('#makeMeScrollable').each(function() {
    var totalImageWidth = 0;

    $(".image-div", this).each(function () {
      totalImageWidth += $(this).width();
    });

    if (totalImageWidth < $(document.body).width() ) {
       $(this).attr('id', 'makeMeScrollable2');
    }

});
});

But is their a way of changing this line like this?:

if (totalImageWidth - 1000 < $(document.body).width() ) {

---

Try this

$(document).ready(function() {
    $('#makeMeScrollable').each(function() {
        var totalImageWidth = 0;

        $(".image-div", this).each(function () {
          totalImageWidth += $(this).width();
        });

        if (totalImageWidth < $(document.body).width() ) {
           $(this).attr('id', 'makeMeScrollable2');
        }

    });
});

---

You need to use the parseint function :)