{% extends 'base.html' %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/projects.css" type="text/css"/>
<link rel="stylesheet" href="/static/css/global.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">
		$(function(){
			$('#slidesDiv').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 4000,
				hoverPause: true
			});
		});
</script>

<script type="text/javascript">

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

</script>

{% endblock %}


{% block content %}
    <div id="galleryContainer">
    <div id="slidesContainer">
		
        <div id="slidesDiv">
            <div class="slidesInner">
                <a href=""><img src="/static/images/dummyimage.jpg" width="600" height="450"></a>                
                <a href=""><img src="/static/images/Slidedummya.jpg" width="297" height="450" alt="Slide 1"></a>
                <a href=""><img src="/static/images/Slidedummyb.jpg" width="600" height="450" alt="Slide 2"></a>
                <a href=""><img src="/static/images/Slidedummyc.jpg" width="299" height="450" alt="Slide 2"></a>
                <a href=""><img src="/static/images/Slidedummyd.jpg" width="600" height="375" alt="Slide 2"></a>

       	      	
            </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">Project</p>
                    <p>Dummy text</p>
                    <br>
                    
                    <p class="orange">Size & Program</p>
                    <p>Dummy text</p>
                    <br>
                    
                    <p class="orange">Design Statement</p>
                    <p>Dummy text</p>
                    <br>
                    
                    <p class="orange">Start Date ???</p>
                    <p>Dummy text</p>
                    <br>
                    
                    <p class="orange">End Date ???</p>
                    <p>Dummy text</p>
                    <br>
                    
                    <p class="orange">Location ???</p>
                    <p>Dummy text</p>
                    <br>
                    
                    <p class="orange">Content Block ???</p>
                    <p>Dummy text Dummy text Dummy text</p>
                    <br>

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

<ul id="scroller"><!-- logo jutting right on 1024 -->
	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy2.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy3.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy4.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy5.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy2.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy3.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy4.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy5.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy2.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy3.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy4.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy5.jpg" width="100" height="100" class="selected"></li>
	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>

    
</ul>  
{% endblock %}