<?
if (!defined('SITE'))
    exit('Access Denied');
?>
<? template('html_head'); ?>
<script type="text/javascript" src="js/slides/slides-mod.min.jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('.slides').slides({
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 5000,
            pause: 2500,
            pagination: true,
            prependPagination :false 
        });
        $("#nav").width($(".pagination li").length*$(".pagination li:eq(0)").outerWidth()+2);                
        $(".pagination li:last").addClass("end");              
    });
</script>
<style type="text/css" media="screen">
    .slides_container {width:807px; display:none;}
    .slides_container div {width:807px;height:540px;display:block;}
    #nav {
        width:250px;
        /*        margin:0 auto;*/
        position:relative;
        /*        padding: 15px;*/
    }
    .pagination {list-style:none;margin:0;padding:0;}
    /*    .pagination li{display: inline-block;width:30px; text-align: center;border-left: 2px solid #717272;}*/
    .pagination li{width:36px; text-align: center;background: url(images/nav_pipe.jpg) no-repeat center left;float: left;}
    .pagination li.end{background: url(images/nav_pipe_end.jpg) no-repeat center left;}
    .pagination .current a {color:#FF1700;}
    /*    .prev{position :absolute;top:5px;left: -24px}*/
    .prev{position :absolute;top:1px;left: 0px}
    .next{position :absolute;top:1px;right: 0px}
    #galleryDetail{font-size: 23px;height: 140px;padding: 0px;width: 100%;}
    #galleryDetail br{clear: both;line-height: 0px;height: 0px;}
    #galleryDetail div{height: 18px;line-height: 18px;}
    #galleryDetail .labelLeft{float:left;width: 100px;}
    #galleryDetail .separate{float:left;width: 50px;text-align: center;}
    #galleryDetail .labelRight{float:left;width: 200px;}
</style>
<? template('page_header'); ?>
<div class="slides">
    <div id="body">
        <div style="float:left;width:423px;">
            <div style="padding:8px 23px;">
                <div style="font-size: 33px;line-height: 33px;text-transform:uppercase;"><?php echo $base['data']['catagHeadLink']; ?>&nbsp;</div>
                <hr/><div style="clear: both;height: 10px;">&nbsp;</div>
                <div style="font-size: 33px;color:#FF1700;"><?php echo $base['data']['projectname']; ?>&nbsp;</div>
                <div style="font-size: 25px;color:#FF1700;font-style: italic;"><?php echo $base['data']['area']; ?>&nbsp;</div>
                <div style="clear: both;height: 10px;">&nbsp;</div>
                <div id="galleryDetail">
                    <?php if ($base['data']['year'] != "") { ?>
                        <div class="labelLeft">Date</div><div class="separate">:</div><div class="labelRight"><?php echo $base['data']['year']; ?></div><br/>
                    <?php } ?>
                    <?php if ($base['data']['location'] != "") { ?>
                        <div class="labelLeft">Location</div><div class="separate">:</div><div class="labelRight"><?php echo $base['data']['location']; ?></div><br/>
                    <?php } ?>
                    <?php if ($base['data']['owner'] != "") { ?>
                        <div class="labelLeft">Owner</div><div class="separate">:</div><div class="labelRight"><?php echo $base['data']['owner']; ?></div><br/>
                    <?php } ?>
                    <?php if ($base['data']['information'] != "") { ?>
                        <div class="labelLeft">Information</div><div class="separate">:</div><div class="labelRight"><?php echo $base['data']['information']; ?></div><br/>
                    <?php } ?>
                    <?php if ($base['data']['conceptdesign'] != "") { ?>
                        <div class="labelLeft">Concept Design</div><div class="separate">:</div><div class="labelRight"><?php echo $base['data']['conceptdesign']; ?></div><br/>
                    <?php } ?>
                </div>
                <div style="width: 250px;height: 140px;">
                    <?php
                    if ($base['data']['youtube'] != "") {
                        echo '
                    <embed width="250px" height="140px" wmode="transparent" allowscriptaccess="never" allowfullscreen="true" type="application/x-shockwave-flash"
                    src="http://www.youtube.com/v/' . $base['data']['youtube'] . '&amp;rel=1&amp;fs=1"></embed>
                ';
                    }
                    ?>
                </div>
                <?php if ($base['data']['youtubedesc'] != "") { ?>
                    <div style="clear: both;">&nbsp;<?php echo $base['data']['youtubedesc']; ?></div>
                <?php } ?>
                <div style="clear: both;height: 13px;">&nbsp;</div>
                <div style="width: 220px;height: 25px;padding:0 15px 0 17px;position: relative;">
<!--                    <a href="#" class="prev"><img src="images/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>-->
                    <a href="#" class="prev"><img src="images/arrow-prev.jpg" width="15" height="20" alt="Arrow Prev"></a>
                    <div id="nav" style="margin: 0 auto;">
                        <ul class="pagination"></ul>
                    </div>
<!--                    <a href="#" class="next"><img src="images/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>-->
                    <a href="#" class="next"><img src="images/arrow-next.jpg" width="15" height="20" alt="Arrow Next"></a>
                </div>
                <div style="clear: both;height: 2px;">&nbsp;</div>
                <div style="width: 250px;text-align: center;">
                    <?php echo $base['data']['backProject']; ?>
                    &nbsp;&nbsp; Projects &nbsp;&nbsp;
                    <?php echo $base['data']['nextProject']; ?>
                </div>
            </div>
        </div>
        <div style="float:left;width:807px;height: 540px;">
            <div class="slides_container">
                <?php echo $base['data']['content']; ?>
            </div>
        </div>
    </div>
    <br style="clear:both;"/>
</div>
<? template('page_footer'); ?>