{% extends 'D2CaseStudiesBundle::base.html.twig' %}

{% set seo_img_path = "/uploads/case_studies/images/" ~ case_study.getBestPath %}

{% if social_shares|length > 0 %}
	{% set built_snippets = d2_build_snippets(social_shares, route_url, case_study.title, case_study.subTitle, seo_img_path, case_study.hashTag, case_study.shareTag) %}
{% endif %}

{% block title %}
	<title>Migration:Cities Case Study: {{ case_study.title }}</title>
{% endblock title %}
{% block head_seo %}
	{% set tag_list = d2_get_tag_list(case_study) %}
	<meta content="index,follow" name="robots">
	<meta content="Case Study: {{ case_study.title }}" name="description">
	<meta content="migration:cities,case study,{{ tag_list }}" name="keywords">
	<meta content="never" http-equiv="expires">

	{{ built_snippets['meta_data']| raw }}
{% endblock head_seo %}

{% block head_script_extra %}
	<script type="text/javascript" src="{{ asset('bundles/d2casestudies/js/case_studies.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2comment/js/comments.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2core/js/utils.js') }}"></script>
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var duration = 0;
      var videoTimer = null;
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          //height: '390',
          width: '100%',
          playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0 },
          videoId: '{{ case_study.utubeUrl }}',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
		  var volume = player.getVolume();
		  var vol_pos = 
		  $('#volume_progress').css('width', volume + '%');
		  SetWatchCnt({{ case_study.id }});
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
			  var playerTotalTime = player.getDuration();
    		  $('#video_progress').attr('aria-valuemax', playerTotalTime);
    		  $('#display_duration').html(Math.ceil(playerTotalTime) + ' sec');

			  videoTimer = setInterval(function() {
				var playerCurrentTime = player.getCurrentTime();
				var playerTimeDifference = (playerCurrentTime / playerTotalTime) * 100;
     		    
     		    $('#display_remaining').html(Math.ceil((playerTotalTime - playerCurrentTime)) + ' sec');

				//progress(playerTimeDifference, $('#progressBar'));
				$('#video_progress').css('width', playerTimeDifference + '%');
			  }, 1000);
      			
        }
        else {
			if(videoTimer != null) 
				clearTimeout(videoTimer);
			videoTimer = null;
		}
      }
      function stopVideo() {
        player.stopVideo();
      }
      function playVideo() {
        player.setPlaybackRate(1);
        player.playVideo();
      }
      function pauseVideo() {
        player.pauseVideo();
      }
      function forwardVideo() {
        player.setPlaybackRate(2);
      }
      function seekToVideo(pos) {
		  player.seekTo(pos, true);
      }
      function setVolume(pos) {
		  player.setVolume(pos);
      }

	$(document).ready(function () {
		
		$( "#video_row" ).hover(
		  function() {
			$(  "#control_table"  ).stop(true, true).show(100, function() {});
			$(  "#video_progess_bar"  ).stop(true, true).show(100, function() {});
			$(  "#volume_progess_bar"  ).stop(true, true).show(100, function() {});
		  }, function() {
			$(  "#control_table"  ).stop(true, true).delay(1000).hide(2000, function() {});
			$(  "#video_progess_bar"  ).stop(true, true).delay(1000).hide(2000, function() {});
			$(  "#volume_progess_bar"  ).stop(true, true).delay(1000).hide(2000, function() {});
		  }
		);

		$( "#video_progess_bar" ).click(function(e) {
			var elm = $(this);
			var xPos = e.pageX - elm.offset().left;
			var len = $(this).css('width').replace('px', '');
			var perc = (xPos/len) * 100;
			//console.log(xPos, len, perc);
			seekToVideo((player.getDuration() * perc)/100);
		});

		$( "#volume_progess_bar" ).click(function(e) {
			var elm = $(this);
			var xPos = e.pageX - elm.offset().left;
			var len = $(this).css('width').replace('px', '');
			var perc = (xPos/len) * 100;
			//console.log(xPos, len, perc);
			setVolume(perc);
 		    $('#volume_progress').css('width', perc + '%');
		});
		
		$(function () {
		  $('[data-toggle="popover"]').popover()
		})
	});		  


    </script>

	{{ built_snippets['script']| raw }}
{% endblock head_script_extra %}

{% block page_header %}
{% endblock page_header %}

{% block content %}
<div id="video_row" class="row" style="background-color: #000000; margin-top:20px">
	<div class="col-md-offset-3 col-md-6">
		<div id="player" style="margin-top:20px; margin-bottom:20px"></div>
		<div class="clearfix"></div>
		<table style="width:100%">
			<tr>
				<td style="width:80%; padding-right:5px">
					<div id="video_progess_bar" class="progress" style="display:none">
					  <div id="video_progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1000" style="width: 0%; background-color:#4D4D4D">
						<span class="sr-only">60% Complete</span>
					  </div>
					</div>
				</td>
				<td>
					<div id="volume_progess_bar" class="progress" style="display:none">
					  <div id="volume_progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; background-color:#4D4D4D">
						<span class="sr-only">Volume</span>
					  </div>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="control_div" class="col-md-1" style="height:100%">
		<table id="control_table" style="height:100%; display:none">
			<tr><td><a href="javascript:stopVideo()" ><img src="{{ asset('bundles/d2core/images/video_stop.png') }}" style="width:50px; margin-top:25px" alt="STOP"></a></td></tr>
			<tr><td><a href="javascript:playVideo()" ><img src="{{ asset('bundles/d2core/images/video_play.png') }}" style="width:50px; margin-top:15px" alt="PLAY"></a></td></tr>
			<tr><td><a href="javascript:pauseVideo()" ><img src="{{ asset('bundles/d2core/images/video_pause.png') }}" style="width:50px; margin-top:15px" alt="PAUSE"></a></td></tr>
			<tr><td><a href="javascript:playVideo()" ><img src="{{ asset('bundles/d2core/images/video_rewind.png') }}" style="width:50px; margin-top:15px" alt="REWIND"></a></td></tr>
			<tr><td><a href="javascript:forwardVideo()" ><img src="{{ asset('bundles/d2core/images/video_forward.png') }}" style="width:50px; margin-top:15px" alt="FORWARD"></a></td></tr>
		</table>
	</div>
	<div id="control_div" class="col-md-2" style="height:100%">
		<table style="color:#4D4D4D; margin-top:50px">
			<tr><td style="width:85px">Title:</td><td>Migration:Cities Video</td></tr>
			<tr><td>Views:</td><td>{{ case_study.watchedCnt }}</td></tr>
			<tr><td>Duration:</td><td id="display_duration"></td></tr>
			<tr><td>Remaining:</td><td id="display_remaining"></td></tr>
		</table>
	</div>
</div>


<div class="row">
	<div class="col-md-7">

		<div id="description_row" class="row">
			<div class="col-md-offset-1 col-md-10">
				<hr/>
				<h3>{{ case_study.title }}</h3>
				<h4>{{ case_study.subTitle }}</h4>
				<p>{{ case_study.titleInfo }}</p>
				<hr/>
				<p class="lead">{{ case_study.description|raw }}</p>
				<p>This Case Study has been viewed {{ case_study.watchedCnt }} times.</p>
				{{ built_snippets['html']| raw }}
				<hr/>
			</div>
			<div class="col-md-5">
			</div>
		</div>

		{% if case_study.photos|length > 0 %}
		<div id="show_image_div" class="row" style="display:none">
			<div class="col-md-offset-1 col-md-10">
				<a title="Hide Image" href="javascript:HideCaseStudyImage()"><img id="full_image" src="" alt="PHOTO" class="img-responsive" /></a>
			</div>
		</div>

		<div id="thumbnail_div" class="row">
			<div class="col-md-offset-1 col-md-10">
				{% for photo in case_study.photos %}
					{% if photo.enabled %}
						{% if loop.first %}
							<div class="row">
						{% endif %}
								<div class="col-md-2">
									<a title="Show Image" href="javascript:ShowCaseStudyImage('/uploads/case_studies/photos/{{ photo.getPath }}')"><img src="/uploads/case_studies/photos/{{ photo.getBestPath }}" alt="PHOTO" class="img-responsive img-thumbnail" width="100%" /></a>
								</div>
						{% if not loop.first and loop.index%5 == 0 %}
							</div>
							<div class="row">
						{% endif %}
					{% endif %}
				{% endfor %}
						</div>
				<hr/>
			</div>
		</div>
		{% endif %}

		{% if case_study.customer is not null %}
		{% set customer = case_study.customer %}
		<div class="row">
			<div class="col-md-offset-1 col-md-2">
				{% if customer.path %}
				<img src="/uploads/customer/images/{{ customer.getBestPath }}" width="140px" alt="CONTRIBUTOR" class="img-responsive img-rounded">
				{% else %}
				<img src="{{ asset('bundles/d2core/images/user.png') }}" width="140px" alt="EXPERT" class="img-responsive img-rounded">
				{% endif %}
			</div>
			<div class="col-md-8">
				<h3>{{ customer.displayName }}</h3>
				<p>
				{{ customer.description }}
				</p>
			</div>
		</div>
		{% endif %}
		
		{# COMMENTS #}
		{% include 'D2CommentBundle::comments.html.twig' with {'comments_name': 'Case Study', 'comment_item_type': 'case_study', 'comment_item_id': case_study.id} %}
	</div>
	
	<div class="col-md-5">
		{# RELATED VIDEO's #}
		{% include 'D2CaseStudiesBundle::related.html.twig' with {'exclude_related': case_study.id} %}

		{# RELATED EXPERT'S #}
		{% include 'D2ExpertBundle::related.html.twig' with {'exclude_related': false} %}
		
		{# RELATED RESOURCE's #}
		{% include 'D2ResourceBundle::related.html.twig' with {'exclude_related': false} %}
		
		{# RELATED COLLECTIONS #}
		{% include 'D2CollectionBundle::related.html.twig' with {'exclude_related': false} %}
		
		{# RELATED NEWS #}
		{% include 'D2NewsBundle::related.html.twig' with {'exclude_related': false} %}

{#		
		<h2 style="margin-top:50px">Watch more Case Studies</h2>
		<div class="row" style="margin-top:30px">
			<div class="col-md-11">
				<p>View our other contributors Case Studies.</p>
				<a class="btn btn-default" href="{{ path('case_studies') }}" role="button">Case Studies</a>
			</div>	
		</div>	
		<hr/>
#}	
	</div>

</div>

{% endblock content %}