cmtoomey/Syria.html

## Syria.html
<!doctype html>
<html>

<head>
  <title>Syria Time with Video</title>
  <script src="https://public.tableau.com/javascripts/api/tableau-2.0.0.min.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <style>
    body {
      background-color: white;
    }

    #tableauViz1 {
      height: 210px;
      width: 930px;
      overflow: hidden;
    }
  </style>

  <body>
    <div class="sl-block" data-block-type="iframe" style="width: 872px; height: 490px; left: 37px; top: 0px;">
      <div id="player"></div>
    </div>
    <div class="sl-block" data-block-type="iframe" style="width: 930px; height: 210px; left: 2px; top: 490px;">
      <!--This is where you are going to put Tableau-->
      <div id="tableauViz1"></div>
    </div>

  </body>

  <script>
    //ALL THE JAVASCRIPT IS GOING HERE
    //First, build out your Tableau content
    var viz, one, workbooka, activeSheet, Worksheet, worksheet;
    var onePh = document.getElementById("tableauViz1");

    var oneUrl = "https://public.tableau.com/views/Syria_5/SyriaTime?:showVizHome=no&:display_spinner=no&:jsdebug=n&:embed=y&:display_overlay=no&:display_static_image=no&:animate_transition=yes"; //NELSON

    var oneOptions = {

      width: "100%",
      height: "130%",
      hideTabs: true,
      hideToolbar: true,
      hideSpinner: true,

      onFirstInteractive: function() {
        workbooka = viz1.getWorkbook();
      }
    };

    //initiate visualiztions

    viz1 = new tableauSoftware.Viz(onePh, oneUrl, oneOptions);
    //Don't show the viz until the time is correct
    viz1.hide();

    // Load the YouTube API asyncronously
    var tag = document.createElement('script');

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

    // This function creates an <iframe> (and YouTube player)
    // after the API code downloads.
    var player;

    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '490',
        width: '872',
        videoId: 'DLVtSTqVEB4',
        playerVars: {
          showinfo: 0,
          theme: 'light',
          rel: 0,
          modestbranding: 1,
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    // The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      //when the event of onReady fires
      //take the target (the player) and start the video
      //This is equivalent to pushing play
      event.target.playVideo();
      //then run the function setupViz (below)
      setupViz(event.target);
    }

    // 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.
    var done = false;

    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING) {
        // setTimeout(stopVideo, 6000);
        // done = true;
      }
    }

    function stopVideo() {
      player.stopVideo();
    }

    function setupViz(player) {
      //Interval works by setting a timer in milliseconds (1s = 1000ms)
      //every interval do the stuff in function()
      //it's going to check every second, resetting the month variable
      //which is how we can move back and forth in the viz, based on the time of the video
      window.setInterval(function() {
        //get the current time in seconds and convert to ms
        var curTime = player.getCurrentTime() * 1000;

        //var month = Math.floor((curTime - 10700) / 1000)
        //This converts that milliseconds to a month by subtracting and rounding downloads
        //This is because there is a lead-in on the video for which there is no data
        //We want it to start at a specific point - 10.1 seconds in.
        //We get the time, convert it, subtract out the duration and divide by 1000 to get back to an integer
        //Math.floor rounds it down
        //if that value is > 1 then we've passed the barrier and we want to show the viz
        var month = Math.floor((curTime - 10100) / 1000)
          //here's the comparison
          //first thing is to show the viz
        if (curTime > 0) {
          viz1.show();
        }
        //then run this function with the month variable we defined above
        changeDateMonthNumber(month);
        if (curTime > (player.getDuration() * 1000 - 1200)) {
          player.pauseVideo();
        }

      }, 1000);
    }

    //Take a value "a" and pass it into the Parameter "DateMonthNumber"
    //with a value of a
    //this will get substituted for the "month" variable in the interval
    function changeDateMonthNumber(a) {
      if (workbooka) {
        workbooka.changeParameterValueAsync("DateMonthNumber", [a]);
      }
    };

    function startViz(player) {

    }
  </script>

</html>
	<!doctype html>
	<html>

	<head>
	<title>Syria Time with Video</title>
	<script src="https://public.tableau.com/javascripts/api/tableau-2.0.0.min.js" type="text/javascript"></script>
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<style>
	body {
	background-color: white;
	}

	#tableauViz1 {
	height: 210px;
	width: 930px;
	overflow: hidden;
	}
	</style>

	<body>
	<div class="sl-block" data-block-type="iframe" style="width: 872px; height: 490px; left: 37px; top: 0px;">
	<div id="player"></div>
	</div>
	<div class="sl-block" data-block-type="iframe" style="width: 930px; height: 210px; left: 2px; top: 490px;">
	<!--This is where you are going to put Tableau-->
	<div id="tableauViz1"></div>
	</div>

	</body>

	<script>
	//ALL THE JAVASCRIPT IS GOING HERE
	//First, build out your Tableau content
	var viz, one, workbooka, activeSheet, Worksheet, worksheet;
	var onePh = document.getElementById("tableauViz1");

	var oneUrl = "https://public.tableau.com/views/Syria_5/SyriaTime?:showVizHome=no&:display_spinner=no&:jsdebug=n&:embed=y&:display_overlay=no&:display_static_image=no&:animate_transition=yes"; //NELSON

	var oneOptions = {

	width: "100%",
	height: "130%",
	hideTabs: true,
	hideToolbar: true,
	hideSpinner: true,

	onFirstInteractive: function() {
	workbooka = viz1.getWorkbook();
	}
	};

	//initiate visualiztions

	viz1 = new tableauSoftware.Viz(onePh, oneUrl, oneOptions);
	//Don't show the viz until the time is correct
	viz1.hide();

	// Load the YouTube API asyncronously
	var tag = document.createElement('script');

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

	// This function creates an <iframe> (and YouTube player)
	// after the API code downloads.
	var player;

	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '490',
	width: '872',
	videoId: 'DLVtSTqVEB4',
	playerVars: {
	showinfo: 0,
	theme: 'light',
	rel: 0,
	modestbranding: 1,
	},
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
	}
	});
	}

	// The API will call this function when the video player is ready.
	function onPlayerReady(event) {
	//when the event of onReady fires
	//take the target (the player) and start the video
	//This is equivalent to pushing play
	event.target.playVideo();
	//then run the function setupViz (below)
	setupViz(event.target);
	}

	// 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.
	var done = false;

	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	// setTimeout(stopVideo, 6000);
	// done = true;
	}
	}

	function stopVideo() {
	player.stopVideo();
	}

	function setupViz(player) {
	//Interval works by setting a timer in milliseconds (1s = 1000ms)
	//every interval do the stuff in function()
	//it's going to check every second, resetting the month variable
	//which is how we can move back and forth in the viz, based on the time of the video
	window.setInterval(function() {
	//get the current time in seconds and convert to ms
	var curTime = player.getCurrentTime() * 1000;

	//var month = Math.floor((curTime - 10700) / 1000)
	//This converts that milliseconds to a month by subtracting and rounding downloads
	//This is because there is a lead-in on the video for which there is no data
	//We want it to start at a specific point - 10.1 seconds in.
	//We get the time, convert it, subtract out the duration and divide by 1000 to get back to an integer
	//Math.floor rounds it down
	//if that value is > 1 then we've passed the barrier and we want to show the viz
	var month = Math.floor((curTime - 10100) / 1000)
	//here's the comparison
	//first thing is to show the viz
	if (curTime > 0) {
	viz1.show();
	}
	//then run this function with the month variable we defined above
	changeDateMonthNumber(month);
	if (curTime > (player.getDuration() * 1000 - 1200)) {
	player.pauseVideo();
	}

	}, 1000);
	}

	//Take a value "a" and pass it into the Parameter "DateMonthNumber"
	//with a value of a
	//this will get substituted for the "month" variable in the interval
	function changeDateMonthNumber(a) {
	if (workbooka) {
	workbooka.changeParameterValueAsync("DateMonthNumber", [a]);
	}
	};

	function startViz(player) {

	}
	</script>

	</html>