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

{% if resource.banner is null %}
	{% set seo_img_path = asset("bundles/d2core/images/" ~ d2_resource_image_name(resource.origPath)) %}
{% else %}
	{% set seo_img_path = "/uploads/resources/" ~ resource.customer.id ~ "/" ~ resource.banner.getBestPath %}
{% endif %}

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

{% block title %}
	<title>Migration:Cities Resource: {{ resource.title }}</title>
{% endblock title %}
{% block head_seo %}
	{% set tag_list = d2_get_tag_list(resource) %}
	<meta content="index,follow" name="robots">
	<meta content="Resource: {{ resource.title }}" name="description">
	<meta content="migration:cities,resource,{{ 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/d2resource/js/resource.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>

{% if resource.utubeUrl|trim != '' %}
    <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: '{{ resource.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 + '%');
		  UpdateViewCnt({{ resource.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>
{% endif %}

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

{% block head_style_extra %}
 	<link href="{{ asset('bundles/d2core/css/olay.css') }}" rel="stylesheet">
 	<link href="{{ asset('bundles/d2core/css/select_add.css') }}" rel="stylesheet">
{% endblock head_style_extra %}

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

{% block content %}

{% if resource.utubeUrl|trim != '' %}
<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>{{ resource.viewCnt }}</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>
{% endif %}

<div class="row">
	<div class="col-md-7">
		<div class="row">
 		    <hr/>
 		    {% if resource.banner is null %}
			<div class="col-md-offset-1 col-md-10">
				<h3>{{ resource.title }}</h3>
				<h4>{{ resource.subTitle }}</h4>
				<p style="font-size:16px">{{ resource.description }}</p>
				<p>This Resource has been viewed {{ resource.viewCnt }} times.</p>
				{% if resource.utubeUrl|trim == '' %}
				<a id="resource_{{ resource.id }}" class="view_resource_btn btn btn-default" target="blank" href="/uploads/resources/{{ resource.customer.id }}/{{ resource.path }}" role="button">VIEW</a>
				{% endif %}
				{{ built_snippets['html']| raw }}
			</div>
			{% else %}
			<div class="col-md-offset-1 col-md-3">
				<div>
					<img src="/uploads/resources/{{ resource.customer.id }}/{{ resource.banner.getBestPath }}" alt="RESOURCE" class="img-responsive" width="100%" />
				</div>
			</div>
			<div class="col-md-7">
				<h3>{{ resource.title }}</h3>
				<h4>{{ resource.subTitle }}</h4>
				<p style="font-size:16px">{{ resource.description }}</p>
				<p>This Resource has been viewed {{ resource.viewCnt }} times.</p>
				{% if resource.utubeUrl|trim == '' %}
				<a id="resource_{{ resource.id }}" class="view_resource_btn btn btn-default" target="blank" href="/uploads/resources/{{ resource.customer.id }}/{{ resource.path }}" role="button">VIEW</a>
				{% endif %}
				{{ built_snippets['html']| raw }}
			</div>
			{% endif %}
		</div>
		{% if resource.customer is not null %}
		{% set customer = resource.customer %}
		<div class="row">
			<hr/>
			<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': 'Resource', 'comment_item_type': 'resource', 'comment_item_id': resource.id} %}
	</div>
	
	<div class="col-md-5">
		{# RELATED VIDEO's #}
		{% include 'D2CaseStudiesBundle::related.html.twig' with {'exclude_related': false} %}

		{# RELATED EXPERT'S #}
		{% include 'D2ExpertBundle::related.html.twig' with {'exclude_related': false} %}
		
		{# RELATED RESOURCE's #}
		{% include 'D2ResourceBundle::related.html.twig' with {'exclude_related': resource.id} %}
		
		{# 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">View more Resources</h2>
		<div class="row" style="margin-top:30px">
			<div class="col-md-11">
				<p>View our other contributors Resources.</p>
				<a class="btn btn-default" href="{{ path('resources') }}" role="button">Resources</a>
			</div>	
		</div>	
		<hr/>
#}
	</div>

</div>

{% endblock content %}