<?php

if(!empty($rec_productGegevens['labelTitel']) && !empty($rec_productGegevens['labelOmschrijving'])){ ?>

<div class="label">
    <div class="content">
        <span class="alsH1"><?php echo(html_entity_decode($rec_productGegevens['labelTitel'])); ?></span>
        <span class="citaat"><?php echo(html_entity_decode($rec_productGegevens['labelOmschrijving'])); ?></span>
    </div>
    <a class="button"><span class="cross"></span></a>
    <div class="shadow"></div>
</div>
<?php } ?>

<div class="fotoFrame">
    <ul>

        <?php
        $firstFoto = true;
        $array_thumbsCounter = 0;

        $q_fotoFile = "SELECT kms_categorie_images.icon_dir FROM kms_categorie_images WHERE kms_categorie_images.categorie_id = '".$categorie_id."' ORDER BY kms_categorie_images.sort_order ASC";
        $r_fotoFile = mysql_query($q_fotoFile);

        while($rec_fotoFile = mysql_fetch_assoc($r_fotoFile)){
            $array_thumbs[$array_thumbsCounter] = $rec_fotoFile['icon_dir'];
            $array_thumbsCounter++;
            ?>
            <li <?php if($firstFoto){ echo("class=\"first\""); $firstFoto =  false; } ?>><img src="/categorie_images/<?php echo($rec_productGegevens['image_dir']); ?>/foto_<?php echo($rec_fotoFile['icon_dir']); ?>.jpg" /></li>

        <?php } ?>
    </ul>
</div>
<div class="headerMenu">
    <div class="content">
        <ul>

            <?php $firstThumb = true;

            foreach($array_thumbs as &$value){ ?>
            <li class="<?php if($firstThumb){ echo("active"); $firstThumb = false; }else{ echo("notActive"); } ?> gevuld">
                <div class="up" style="background-image:url(/categorie_images/<?php echo($rec_productGegevens['image_dir']); ?>/thumb_<?php echo($value); ?>.jpg);"></div>
                <div class="hover" style="background-image:url(/categorie_images/<?php echo($rec_productGegevens['image_dir']); ?>/thumb_<?php echo($value); ?>.jpg);"></div>
            </li>

            <?php }

            for ($i = 0; $i < 6 - $array_thumbsCounter; $i++) { ?>
                <li class="notActive nietGevuld"></li>
            <?php } ?>
        </ul> 
    </div>
    <div class="shadow"></div>
</div>
<div class="fotoVerlengde"></div>