Integrating jSquares and Jquery with WordPress loop

I am trying to integrate jSquares with wordpress and I am having a couple of issues. I am a beginner developer – but would love to solve this problem so that anyone can use jSquares with WordPress. jSquares info can be found here: boedesign.com/blog/2009/10/22/jsquares-for-jquery/

This is my code so far:

<div id="js-container">

    <?                      $boxes = array(
    // sizes are styled through css and top, left css attributes are hard-coded on the div
                    array('size' => 3, 'top' => 0, 'left' => 0),
                        array('size' => 2, 'top' => 0,'left' => 224),
                        array('size' => 2, 'top' => 78, 'left' => 224),
                        array('size' => 3, 'top' => 0, 'left' => 336),
                        array('size' => 2, 'top' => 0, 'left' => 560),
                        array('size' => 2, 'top' => 78, 'left' => 560),
                        array('size' => 2, 'top' => 156, 'left' => 0),
                        array('size' => 3, 'top' => 156, 'left' => 112),
                        array('size' => 2, 'top' => 156, 'left' => 336),
                        array('size' => 1, 'top' => 156, 'left' => 448),
                        array('size' => 1, 'top' => 195, 'left' => 448),
                        array('size' => 2, 'top' => 156, 'left' => 504),
                        array('size' => 1, 'top' => 156, 'left' => 616),
                        array('size' => 1, 'top' => 234, 'left' => 56),
                        array('size' => 1, 'top' => 234, 'left' => 336)); ?>

                <?php
                query_posts(array(
                    'showposts' => 15,
                    'post_type' => 'page',
                    'posts_per_page=15',
                    'orderby' => 'rand',
                    'post__not_in' => array(33,145,31,148,109,111,113,29,209)));

                if (have_posts()) : while (have_posts()) : the_post();
                foreach ($boxes as $box); ?>    

        <div class="js-image size-<?= $box['size']; ?>" style="top:<?= $box['top']; ?>px;left:<?= $box['left']; ?>px;">
            <a href="<?php the_permalink(); ?> "><img class="js-small-image" src="<? $image = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post_id ), 'single-post-thumbnail' ); echo $image[0]; ?>"/></a>
            <div class="js-small-caption">
                <span><?php the_title(); ?></span>
            </div>
            <div class="js-overlay-caption-content">
                <h4><?php the_title(); ?></h4>
                <p>
            <a href="<?php the_permalink(); ?>">Read</a>
                </p>
            </div>
        </div>

            <?php endwhile; endif; ?>
</div>

But the foreach ($boxes as $box); ?> is only reflecting the last array for $boxes instead of one of each. I hope this makes sense. Any suggestions would be greatly appreciated!!