<?php echo $header; ?>

<div id="content_container" class="ccc_interior">
    <div class="container full-width">
        <div id="content" class="full-width">
            <div id="main-content" class="alpha">
                <ul id="order" class="steps">
                    <li class="inactive" id="step_1"><h3><a href="/bases/"><?php echo $step_1; ?></h3></a></li>
                    <li class="active" id="step_2"><h3><a href="/ingredients/<?php if ($base) { echo $base; }?>"><?php echo $step_2; ?></h3></a></li>
                    <li class="inactive" id="step_3"><h3><a href="/mixname/"><?php echo $step_3; ?></h3></a></li>
                </ul>


                <div id="tabs" class="ui-tabs">

                    <ul id="ingredient-types">
                        <li class="title"><?php echo $text_ingredient_type; ?></li>
                        <?php foreach ($categories as $category) {?>
                            <li><a href="#category-<?php echo $category['category_id']; ?>"><?php echo $category['category_name']; ?></a></li>
                        <?php } ?>
                    </ul>

                    <br class="clear"/>


                    <?php foreach ($categories as $category) {
                        $first_cat = $category['category_id'];
                    ?>

                        <div id="category-<?php echo $category['category_id']; ?>">
                            <table class="ingredients" cellpadding="0" cellspacing="0" border="0">
                            <?php for ($i = 0; $i < sizeof($category['products']); $i = $i + 3) { ?>
                                <tr>
                                <?php $k = 0; ?>
                                <?php for ($j = $i; $j < ($i + 3); $j++) { ?>
                                    <?php $k++; ?>
                                    <td class="grid_3 ingredient <?php echo 'column_' . $k; ?>">
                                        <?php if (isset($category['products'][$j])) { ?>

                                            <div class="pic">
                                                <a href="<?php echo $category['products'][$j]['zoom_href']; ?>" class="zoom"><img src="<?php echo $category['products'][$j]['thumb']; ?>" title="<?php echo $category['products'][$j]['product_name']; ?>" alt="<?php echo $category['products'][$j]['product_name']; ?>" /></a>
                                            </div>
                                            <form action="/cart" method="post" enctype="multipart/form-data" id="add_<?php echo $category['products'][$j]['product_id'] ?>">

                                                <div class="add_to_mix">
                                                    <a onclick="$('#add_<?php echo $category['products'][$j]['product_id'] ?>').submit();" class="add-to-cart button" href="#add-to-mix"><span><?php echo $text_add_to_mix; ?></span></a>
                                                    <input type="hidden" name="quantity" value="1" />
                                                    <input type="hidden" name="product_class_id" value="<?php echo $category['products'][$j]['product_class'] ?>" />
                                                    <input type="hidden" name="product_id" value="<?php echo $category['products'][$j]['product_id'] ?>" />

                                                </div>
                                            </form>

                                                <div class="view_larger"><a href="<?php echo $category['products'][$j]['zoom_href']; ?>" class="zoom"><?php echo $text_more_info; ?></a></div>
                                                <h3><a href="<?php echo $category['products'][$j]['href']; ?>"><?php echo $category['products'][$j]['product_name']; ?></a></h3>
                                                <p class="product_serving"><?php echo $text_ingredient_size; ?></p>
                                                <p class="product_price"><?php echo $category['products'][$j]['price']; ?></p>


                                        <?php } ?>
                                    </td>
                                    <?php } ?>

                                </tr>
                                <?php } ?>
                            </table>

                        <ul id="ingredient-types2">
                        <li class="title"><?php echo $text_ingredient_type; ?></li>
                        <?php foreach ($categories as $category) {
                            if ($category['category_id'] == $first_cat)
                            {
                        ?>
                            <li><a rel="category-<?php echo $category['category_id']; ?>" style="cursor:pointer;" class="bnav activate"><?php echo $category['category_name']; ?></a></li>
                        <?php
                            } else
                            {

                        ?>

                            <li><a rel="category-<?php echo $category['category_id']; ?>" style="cursor:pointer;" class="bnav"><?php echo $category['category_name']; ?></a></li>
                        <?php
                            }
                        <?php } ?>
                    </ul>


                            <a class="back button" href="/bases"><span><< Select Base</span></a>

                          <a class="forward button" href="/mixname"><span>Place Order >></span></a>
                        </div>
                    <?php } ?>


                    </div>
            </div>


            <div id="sidebar" class="omega">
                <?php echo $column_right; ?>
            </div>
        <br class="clear"/>
        </div>
    </div>
</div>



<?php echo $footer; ?>
 <script type="text/javascript">
 $("#tabs").tabs();
$('#ingredient-types2 a').click(function() {
   $("#tabs").tabs().tabs("select", $(this).attr("rel"));
   return false;
  });


 </script>