{% extends "website/base.html" %}


{% load sekizai_tags staticfiles %}


{% block feature_slider %}
	
	{% addtoblock "css" %}
	<style>
	
	#eventManagement.slide .info {
	    position: absolute;
	    top: 260px;
	    left: 8%;
	    width: 24%;
	    display: none;
	    z-index: 10;
	}
	#eventManagement.slide .info a {
	    text-transform: uppercase;
	    color: rgb(255, 255, 255);
	    background: none repeat scroll 0% 0% rgb(166, 3, 3);
	    font-size: 25px;
	    font-weight: bolder;
	    padding: 15px 24px;
	    border: 0px none;
	    border-radius: 6px 6px 6px 6px;
	    transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
	}
	#eventManagement.slide .info .subtitle  {
		margin: 25px;
		font-size: 20px;
		font-style: italic;
	}
	#eventManagement.slide .info .subtitlebg
	{
		background: none repeat scroll 0% 0% rgb(243, 243, 243);
		padding: 15px 24px;
		border-radius: 6px 6px 6px 6px;
	
	}
	
		
	
	</style>
	{% endaddtoblock %}   
	
    <section id="feature_slider" class="">
		<article class="slide" id="eventManagement" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/andi2.jpg') repeat-x top center;">
            <div class="info">
                <a href="/events">Einsatzplanung</a>
                <div class="subtitle subtitlebg">
                	{% if hasParticipationSetForAllEvents %}
                	Sehr gut - du hast dich für alles eingetragen 
                	{% else %}
                		Du hast dich noch nicht für alle Termine eingetragen!!
                	{% endif %}
                </div>
            </div>
        </article>
		
		<article class="slide" id="eventManagement" style="background: url('{{STATIC_URL}}/img/backgrounds/silver.jpg') repeat-x top center;">
            <img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/blechreiz01/gruppe.png" />
            <div class="info">
                <a href="/messages">Forum</a>
                <div class="subtitle"> Nachricht an alle schreiben... </div>
            </div>
        </article>
    </section>

{% endblock %}

{% block content %}

	{% addtoblock "css" strip %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/lib/animate.css" media="screen, projection">{% endaddtoblock %}                                                       
	{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/coming-soon.css" type="text/css" media="screen" />{% endaddtoblock %}                                    
	{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/contact.css" type="text/css" media="screen" />{% endaddtoblock %}                                    
	
	{% if event %}
		
		{% addtoblock "js" %}
		    <script type="text/javascript">
	        $(function () {
	        
	
	            
	            function callback(event) {
	                $this = $(this);
	                $this.find('span#'+event.type).html(event.value);
	                switch(event.type) {
	                    case "seconds":
	                    case "minutes":
	                    case "hours":
	                    case "days":
	                    case "weeks":
	                    case "daysLeft":
	                    case "finished":
	                }
	            }
	      
	            $('div#clock').countdown(new Date().valueOf() + {{epoch}} , callback);
	        });
	    	</script>
		{% endaddtoblock %}
	
	
		
	    <div id="coming_soon">
	        <div class="head">
	            <div class="container">
		           <div class="span6 text">
		               <h4>Der nächste Termin:</h4>
		               <p>
		                   {{event.title}} ist am {{event.date}} um {{event.displaytime | time:"H:i" }} in {{event.location}} 
		                   
		                   <br/>
		                   {% if participation == "?" %}
		                   		Du hast dich noch nicht für diesen Termin eingetragen!
		                   {% elif participation == "Yes" %}
		                   		Du hast für diesen Termin zugesagt.
		                   {% elif participation == "No" %}
		                   		Du hast für diesen Termin abgesagt.
		                   {%endif %}
		               </p>
		           </div>
	                <div class="span6 count" id="clock">
	                    <div class="box last">
	                        <div class="circle">
	                            <span id="seconds"></span>
	                        </div>
	                        <p>Sekunden</p>
	                    </div>
	                    <div class="box">
	                        <div class="circle">
	                            <span id="minutes"></span>
	                        </div>
	                        <p>Minuten</p>
	                    </div>
	                    <div class="box">
	                        <div class="circle">
	                            <span id="hours"></span>
	                        </div>
	                        <p>Stunden</p>
	                    </div>
	                    <div class="box">
	                        <div class="circle">
	                            <span id="days"></span>
	                        </div>
	                        <p>Tage</p>
	                    </div>
	                   <!--  <div class="box">
	                        <div class="circle">
	                            <span id="weeks"></span>
	                        </div>
	                        <p>Weeks</p>
	                    </div> -->
	                </div>
	            </div>
	        </div>
		</div>
	{% endif %}
	
	
	
	
	{% addtoblock "js" %}
	<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&amp;language=de"></script>
	<script type="text/javascript" src="{{STATIC_URL}}/js/jquery-ui-1.10.0.custom.min.js" ></script>                           
	
	{% if hasNextConcertInfo %}
		<script type="text/javascript">
		// Kartenparameter beim Laden der Seite festlegen
		$(document).ready(function() {
		    // Das Element für die Anzeige suchen
		    var m = $("#map")[0];
		    // Mittelpunkt der Karte
		    var myLatlng = new google.maps.LatLng(49.340174,10.890595);
		    var myOptions = {
		        zoom: 10,
		        center: myLatlng,
		        mapTypeId: google.maps.MapTypeId.ROAD,
		    }
		    var directionsService = new google.maps.DirectionsService();
		    var directionsDisplay = new google.maps.DirectionsRenderer();
		    var map               = new google.maps.Map(m, myOptions);
			
		    directionsDisplay.setMap( map );
		    
		    var request = {
		    	origin:      "{{routeInfo.origin}}",
		    	destination: "{{routeInfo.destination}}",
		    	travelMode: google.maps.DirectionsTravelMode.DRIVING
		    }
	
		    directionsService.route(request, function(response, status) {
		        if (status == google.maps.DirectionsStatus.OK) {
		          directionsDisplay.setDirections(response);
		          
		          var leg = response.routes[0].legs[0];
	
				  $("#route_duration").html( leg.duration.text );
				  $("#route_distance").html( leg.distance.text ) ;
		        }
		      });
		   
		   $("#map_box a").click( function() {
			   $("#map_box").hide();	
		   	});
		  }
		);
		</script>
	{% endif %}
	
	{% endaddtoblock %}
	
	
	
	{% addtoblock "css" %}
	<style>
		#map {
			width: 100%;
			height: 480px;
		}
		#map_box a {
			margin-top: 30px;
		}
		
	</style>
	{% endaddtoblock %}   
	
	{% if hasNextConcertInfo %}
		<div id="contact">
			<div id="map"></div>	        
		
		    <div id="map_box" class="row map">
		        <div class="container">
		            <div id="route_info_box" class="span5 box_wrapp">
		                <div class="box_cont">
		                    <div class="head">
		                        <h6>Fahrt zum Konzert:</h6>
		                    </div>
		                    Nächstes Konzert ist in {{nextConcert.location}} am {{nextConcert.date}} um {{nextConcert.time | time:"H:i" }} <br/>
            		                    {% if nextConcert.meeting_time %} Treffpunkt ist um {{ nextConcert.meeting_time | time:"H:i" }} <br/> {% endif %}
		                    
		                    <table>
							<tr> <td> Fahrzeit:</td> <td> <span id="route_duration"></span> </td> </tr>
							<tr> <td> Strecke: </td> <td> <span id="route_distance"></span> </td> </tr>
							</table>
							<a class="btn" >Schliessen</a>
		                </div>
		            </div>
		        </div>
		        
		    </div>
		</div>
	{% endif %}
	
	
	
	
{% endblock %}