{% extends 'base.html' %}

{% block title %} | Commercial | Residential | Hospitality | Retail | Institutional {% endblock %}


{% block extra_meta_content %}: Projects {% endblock %}

{% block extra_head %}

<link rel="stylesheet" href="/static/css/projects.css" type="text/css"/>
<link rel="stylesheet" href="/static/css/projectslider.css" type="text/css"/>
<link rel="stylesheet" href="/static/css/simplyscroll.css" type="text/css"/>

<script type="text/javascript" src="/static/js/slides.min.jquery.js"></script>

<script type="text/javascript" src="/static/js/jquery.simplyscroll-1.0.4.js"></script>

<script type="text/javascript" src="/static/js/projects.js"></script>

<script type="text/javascript">

(function($) {
	$(function() { 
		$("#scroller").simplyScroll({
			speed: 5
		});
	});
})(jQuery);

</script>

{% endblock %}


{% block names %}
{% endblock %}

{% block content %}
    <div id="galleryContainer">
    
    <div id="slidesContainer">
	  	
        <div id="slidesDiv">
            <div class="slidesInner">
              	
            </div>
			
            <a href="#" class="prev"><img src="/static/images/arrowprevious.png" width="30" height="30" alt="Arrow Prev"></a>
			<a href="#" class="next"><img src="/static/images/arrownext.png" width="30" height="30" alt="Arrow Next"></a>
			
		</div>
	</div>
            
                <div id="textGallery">
                    
                	<p class="orange" id="projectTitle">Project</p>
                    <p></p>
                    <br>
                    
                    <p class="orange" id="projectSizeProgram">Size & Program</p>
                    <p></p>
                    <br>
                    
                    <p class="orange" id="projectDesignStatement">Design Statement</p>
                    <p></p>
                    <br>
                    <p class="orange" id="projectExtraText">Content Block</p>
                    <p></p>
                    <br>
                    
                </div><!--TEXT GALLERY CLOSING-->

             </div>   
                <div class="clear">
                </div><!--CLEAR CLOSING-->

<ul id="scroller">
    {% load thumbnail %}
    {% for p in projects %}
        {% thumbnail p.thumb_image "100x100" crop="center" as im %}
        <li><img id="thumb_{{ p.slug }}" src="{{ im.url }}" data-id="{{ p.id }}" width="100" height="100" alt="{{ p.title }}" title="{{ p.title }}" class="projectThumb" /></li>
        {% endthumbnail %}
    {% endfor %}    
</ul>  
{% endblock %}
