davidsulc/gist:1533326

## gistfile1.html
<!-- the demo can be found at ap-popcorn-demo.heroku.com -->
<!doctype html>
<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <style type="text/css">
      /* CSS grid from foundation.zurb.com */
      /* Arfully Masterminded by ZURB */

      /* --------------------------------------------------
        :: Grid

        This is the mobile-friendly, responsive grid that
        lets Foundation work much of its magic.

        -------------------------------------------------- */

        .container { padding: 0 20px; }

        .row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
        /* To fix the grid into a certain size, set max-width to width */
        .row .row { min-width: 0; }

        .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
        .column:first-child, .columns:first-child { margin-left: 0; }

        .row .one.columns     { width: 4.3%; }
        .row .two.columns     { width: 13%; }
        .row .three.columns   { width: 21.68%; }
        .row .four.columns    { width: 30.37%; }
        .row .five.columns    { width: 39.1%; }
        .row .six.columns     { width: 47.8%; }
        .row .seven.columns   { width: 56.5%; }
        .row .eight.columns   { width: 65.2%; }
        .row .nine.columns    { width: 73.9%; }
        .row .ten.columns     { width: 82.6%; }
        .row .eleven.columns  { width: 91.3%; }
        .row .twelve.columns  { width: 100%; }

        .row .offset-by-one   { margin-left: 13.1%;  }
        .row .offset-by-two   { margin-left: 21.8%;  }
        .row .offset-by-three   { margin-left: 30.5%;  }
        .row .offset-by-four  { margin-left: 39.2%;  }
        .row .offset-by-five  { margin-left: 47.9%;  }
        .row .offset-by-six   { margin-left: 56.6%;  }
        .row .offset-by-seven   { margin-left: 65.3%;  }
        .row .offset-by-eight   { margin-left: 74.0%;  }
        .row .offset-by-nine  { margin-left: 82.7%;  }
        .row .offset-by-ten   { margin-left: 91.4%;  }

        .row .centered { float: none; margin: 0 auto; }

        .row .offset-by-one:first-child   { margin-left: 8.7%;  }
        .row .offset-by-two:first-child   { margin-left: 17.4%;  }
        .row .offset-by-three:first-child   { margin-left: 26.1%;  }
        .row .offset-by-four:first-child  { margin-left: 34.8%;  }
        .row .offset-by-five:first-child  { margin-left: 43.5%;  }
        .row .offset-by-six:first-child   { margin-left: 52.2%;  }
        .row .offset-by-seven:first-child   { margin-left: 60.9%;  }
        .row .offset-by-eight:first-child   { margin-left: 69.6%;  }
        .row .offset-by-nine:first-child  { margin-left: 78.3%;  }
        .row .offset-by-ten:first-child   { margin-left: 87%;  }
        .row .offset-by-eleven:first-child  { margin-left: 95.7%;  }

        /* Source Ordering */
        .push-two     { left: 17.4% }
        .push-three   { left: 26.1%; }
        .push-four    { left: 34.8%; }
        .push-five    { left: 43.5%; }
        .push-six     { left: 52.2%; }
        .push-seven   { left: 60.9%; }
        .push-eight   { left: 69.6%; }
        .push-nine    { left: 78.3%; }
        .push-ten     { left: 87%; }

        .pull-two     { right: 17.4% }
        .pull-three   { right: 26.1%; }
        .pull-four    { right: 34.8%; }
        .pull-five    { right: 43.5%; }
        .pull-six     { right: 52.2%; }
        .pull-seven   { right: 60.9%; }
        .pull-eight   { right: 69.6%; }
        .pull-nine    { right: 78.3%; }
        .pull-ten     { right: 87%; }


        img, object, embed {
          max-width: 100%;
          /* modified from Foundation */
          /* height: auto; */
        }
        img { -ms-interpolation-mode: bicubic; }

        /* Nicolas Gallagher's micro clearfix */
        .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
        .row:after, .clearfix:after { clear: both; }
        .row, .clearfix { zoom: 1; }


      /*  --------------------------------------------------
        :: Block grids

        These are 2-up, 3-up, 4-up and 5-up ULs, suited
        for repeating blocks of content. Add 'mobile' to
        them to switch them just like the layout grid
        (one item per line) on phones

        For IE7/8 compatibility block-grid items need to be
        the same height. You can optionally uncomment the
        lines below to support arbitrary height, but know
        that IE7/8 do not support :nth-child.
        -------------------------------------------------- */

        .block-grid { display: block; overflow: hidden; }
        .block-grid>li { display: block; height: auto; float: left; }

        .block-grid.two-up { margin-left: -4% }
        .block-grid.two-up>li { margin-left: 4%; width: 46%; }
      /*  .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */

        .block-grid.three-up { margin-left: -2% }
        .block-grid.three-up>li { margin-left: 2%; width: 31.3%; }
      /*  .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */

        .block-grid.four-up { margin-left: -2% }
        .block-grid.four-up>li { margin-left: 2%; width: 23%; }
      /*  .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */

        .block-grid.five-up { margin-left: -1.5% }
        .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; }
      /*  .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */

      /* custom rules */
      html {
        height: 100%;
      }
      body {
        min-height: 100%;
        padding-top: 60px;
        background-color: black;
        background-image: url(images/logo_ap_white.gif);
      }
      .content {
        background-color: white;
        padding: 30px;
      }
      #video {
        width: 360px;
        height: 300px;
      }
      #timeline {
        height: 300px;
        overflow: atuo;
      }
    </style>

    <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {
        var $body = $('body');

        var setDefaultBackground = function(){
              $body.css('background-color', 'black')
                .css('background-image', 'url(images/logo_ap_white.gif)')
                .css('background-repeat', 'repeat');
          }

           // Create a popcorn instance by calling the Youtube player plugin
         var video = Popcorn.youtube(
           '#video',
           'http://www.youtube.com/watch?v=pvhQPLPhd60' );

          video.timeline({
            start: 6,
            target: "timeline",
            title: "Salon International de la Haute Horlogerie",
            text: "The SIHH is where brands premiere their latest watches, the result of often years of intensive research.  The SIHH is also where watchmakers and designers, the representatives of an entire creative team, share their passion for watchmaking one-to-one.",
            innerHTML: "Learn more about <a href='http://www.sihh.org'>SIHH</a>",
            direction: "up"
          })
          .timeline({
            start: 10,
            target: "timeline",
            title: "Royal Oak Offshore Grand Prix Chronograph",
            text: "Reference 26290IO.OO.A001VE.01",
            innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-offshore-43/royal-oak-offshore-grand-prix-chronograph-1448/'>More</a>",
            direction: "up"
          })
          .timeline({
            start: 30,
            target: "timeline",
            title: "Octavio Garcia",
            text: "Design director at Audemars Piguet",
            innerHTML: "<a href='http://www.marketwatch.com/story/octavio-garcia-designer-from-the-hood-storms-val%C3%A9e'>Learn more</a>",
            direction: "up"
          })
          .timeline({
            start: 54,
            target: "timeline",
            title: "Royal Oak Equation of Time",
            text: "Reference 25865BC.OO.1105BC.04",
            innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-30/grande-complication-42/royal-oak-grande-complication-61/'>More</a>",
            direction: "up"
          })
          .timeline({
            start: 95,
            target: "timeline",
            title: "Royal Oak Offshore Diver",
            text: "Reference 15703ST.OO.A002CA.01",
            innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-offshore-43/hours-and-minutes-44/royal-oak-offshore-diver-1466/'>More</a>",
            direction: "up"
          });

          video.loop(true);

          // show watch images
          video.image({
            start: 10,
            end: 18,
            src: "images/gp_red.jpg",
            target: "watch"
           }).image({
            start: 18,
            end: 24,
            src: "images/gp_blue.jpg",
            target: "watch"
           }).image({
            start: 24,
            end: 29,
            src: "images/gp_red.jpg",
            target: "watch"
           }).image({
            start: 95,
            end: 103,
            src: "images/diver_watch.jpg",
            target: "watch"
           });

          // change background colors
          video.code({
            start: 10,
            end: 29,
            onStart: function( options ) {
              $body.css('background-image', 'url(images/formula_one.jpg)')
                .css('background-repeat', 'no-repeat')
                .css('background-position', 'bottom left')
                .css('background-attachment', 'fixed');
            },
            onEnd: function( options ) {
              setDefaultBackground();
            }
          }).code({
            start: 95,
            end: 103,
            onStart: function( options ) {
              $body.css('background-color', '#0077d3')
                .css('background-image', 'url(images/diver.jpg)')
                .css('background-repeat', 'no-repeat')
                .css('background-position', 'bottom right')
                .css('background-attachment', 'fixed');
            },
            onEnd: function( options ) {
              setDefaultBackground();
            }
          });

         // play the video right away
//          video.play();

      }, false);
    </script>
  </head>
  <body>
    <div class="row">
      <div class="nine columns centered">
        <div class="row content">
          <div class="six columns">
            <div id="video"></div>
          </div>
          <div class="six columns">
            <div id="timeline"></div>
          </div>
        </div>
      </div>
      <div class="nine columns centered">
        <div class="row content">
          <div class="twelve columns">
          <div id="watch"></div>
          </div>
        </div>
    </div>
  </body>
</html>
	<!-- the demo can be found at ap-popcorn-demo.heroku.com -->
	<!doctype html>
	<html>
	<head>
	<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<style type="text/css">
	/* CSS grid from foundation.zurb.com */
	/* Arfully Masterminded by ZURB */

	/* --------------------------------------------------
	:: Grid

	This is the mobile-friendly, responsive grid that
	lets Foundation work much of its magic.

	-------------------------------------------------- */

	.container { padding: 0 20px; }

	.row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
	/* To fix the grid into a certain size, set max-width to width */
	.row .row { min-width: 0; }

	.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
	.column:first-child, .columns:first-child { margin-left: 0; }

	.row .one.columns { width: 4.3%; }
	.row .two.columns { width: 13%; }
	.row .three.columns { width: 21.68%; }
	.row .four.columns { width: 30.37%; }
	.row .five.columns { width: 39.1%; }
	.row .six.columns { width: 47.8%; }
	.row .seven.columns { width: 56.5%; }
	.row .eight.columns { width: 65.2%; }
	.row .nine.columns { width: 73.9%; }
	.row .ten.columns { width: 82.6%; }
	.row .eleven.columns { width: 91.3%; }
	.row .twelve.columns { width: 100%; }

	.row .offset-by-one { margin-left: 13.1%; }
	.row .offset-by-two { margin-left: 21.8%; }
	.row .offset-by-three { margin-left: 30.5%; }
	.row .offset-by-four { margin-left: 39.2%; }
	.row .offset-by-five { margin-left: 47.9%; }
	.row .offset-by-six { margin-left: 56.6%; }
	.row .offset-by-seven { margin-left: 65.3%; }
	.row .offset-by-eight { margin-left: 74.0%; }
	.row .offset-by-nine { margin-left: 82.7%; }
	.row .offset-by-ten { margin-left: 91.4%; }

	.row .centered { float: none; margin: 0 auto; }

	.row .offset-by-one:first-child { margin-left: 8.7%; }
	.row .offset-by-two:first-child { margin-left: 17.4%; }
	.row .offset-by-three:first-child { margin-left: 26.1%; }
	.row .offset-by-four:first-child { margin-left: 34.8%; }
	.row .offset-by-five:first-child { margin-left: 43.5%; }
	.row .offset-by-six:first-child { margin-left: 52.2%; }
	.row .offset-by-seven:first-child { margin-left: 60.9%; }
	.row .offset-by-eight:first-child { margin-left: 69.6%; }
	.row .offset-by-nine:first-child { margin-left: 78.3%; }
	.row .offset-by-ten:first-child { margin-left: 87%; }
	.row .offset-by-eleven:first-child { margin-left: 95.7%; }

	/* Source Ordering */
	.push-two { left: 17.4% }
	.push-three { left: 26.1%; }
	.push-four { left: 34.8%; }
	.push-five { left: 43.5%; }
	.push-six { left: 52.2%; }
	.push-seven { left: 60.9%; }
	.push-eight { left: 69.6%; }
	.push-nine { left: 78.3%; }
	.push-ten { left: 87%; }

	.pull-two { right: 17.4% }
	.pull-three { right: 26.1%; }
	.pull-four { right: 34.8%; }
	.pull-five { right: 43.5%; }
	.pull-six { right: 52.2%; }
	.pull-seven { right: 60.9%; }
	.pull-eight { right: 69.6%; }
	.pull-nine { right: 78.3%; }
	.pull-ten { right: 87%; }



	img, object, embed {
	max-width: 100%;
	/* modified from Foundation */
	/* height: auto; */
	}
	img { -ms-interpolation-mode: bicubic; }

	/* Nicolas Gallagher's micro clearfix */
	.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
	.row:after, .clearfix:after { clear: both; }
	.row, .clearfix { zoom: 1; }




	/* --------------------------------------------------
	:: Block grids

	These are 2-up, 3-up, 4-up and 5-up ULs, suited
	for repeating blocks of content. Add 'mobile' to
	them to switch them just like the layout grid
	(one item per line) on phones

	For IE7/8 compatibility block-grid items need to be
	the same height. You can optionally uncomment the
	lines below to support arbitrary height, but know
	that IE7/8 do not support :nth-child.
	-------------------------------------------------- */

	.block-grid { display: block; overflow: hidden; }
	.block-grid>li { display: block; height: auto; float: left; }

	.block-grid.two-up { margin-left: -4% }
	.block-grid.two-up>li { margin-left: 4%; width: 46%; }
	/* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */

	.block-grid.three-up { margin-left: -2% }
	.block-grid.three-up>li { margin-left: 2%; width: 31.3%; }
	/* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */

	.block-grid.four-up { margin-left: -2% }
	.block-grid.four-up>li { margin-left: 2%; width: 23%; }
	/* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */

	.block-grid.five-up { margin-left: -1.5% }
	.block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; }
	/* .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */

	/* custom rules */
	html {
	height: 100%;
	}
	body {
	min-height: 100%;
	padding-top: 60px;
	background-color: black;
	background-image: url(images/logo_ap_white.gif);
	}
	.content {
	background-color: white;
	padding: 30px;
	}
	#video {
	width: 360px;
	height: 300px;
	}
	#timeline {
	height: 300px;
	overflow: atuo;
	}
	</style>

	<script>
	// ensure the web page (DOM) has loaded
	document.addEventListener("DOMContentLoaded", function () {
	var $body = $('body');

	var setDefaultBackground = function(){
	$body.css('background-color', 'black')
	.css('background-image', 'url(images/logo_ap_white.gif)')
	.css('background-repeat', 'repeat');
	}

	// Create a popcorn instance by calling the Youtube player plugin
	var video = Popcorn.youtube(
	'#video',
	'http://www.youtube.com/watch?v=pvhQPLPhd60' );

	video.timeline({
	start: 6,
	target: "timeline",
	title: "Salon International de la Haute Horlogerie",
	text: "The SIHH is where brands premiere their latest watches, the result of often years of intensive research. The SIHH is also where watchmakers and designers, the representatives of an entire creative team, share their passion for watchmaking one-to-one.",
	innerHTML: "Learn more about <a href='http://www.sihh.org'>SIHH</a>",
	direction: "up"
	})
	.timeline({
	start: 10,
	target: "timeline",
	title: "Royal Oak Offshore Grand Prix Chronograph",
	text: "Reference 26290IO.OO.A001VE.01",
	innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-offshore-43/royal-oak-offshore-grand-prix-chronograph-1448/'>More</a>",
	direction: "up"
	})
	.timeline({
	start: 30,
	target: "timeline",
	title: "Octavio Garcia",
	text: "Design director at Audemars Piguet",
	innerHTML: "<a href='http://www.marketwatch.com/story/octavio-garcia-designer-from-the-hood-storms-val%C3%A9e'>Learn more</a>",
	direction: "up"
	})
	.timeline({
	start: 54,
	target: "timeline",
	title: "Royal Oak Equation of Time",
	text: "Reference 25865BC.OO.1105BC.04",
	innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-30/grande-complication-42/royal-oak-grande-complication-61/'>More</a>",
	direction: "up"
	})
	.timeline({
	start: 95,
	target: "timeline",
	title: "Royal Oak Offshore Diver",
	text: "Reference 15703ST.OO.A002CA.01",
	innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-offshore-43/hours-and-minutes-44/royal-oak-offshore-diver-1466/'>More</a>",
	direction: "up"
	});

	video.loop(true);

	// show watch images
	video.image({
	start: 10,
	end: 18,
	src: "images/gp_red.jpg",
	target: "watch"
	}).image({
	start: 18,
	end: 24,
	src: "images/gp_blue.jpg",
	target: "watch"
	}).image({
	start: 24,
	end: 29,
	src: "images/gp_red.jpg",
	target: "watch"
	}).image({
	start: 95,
	end: 103,
	src: "images/diver_watch.jpg",
	target: "watch"
	});

	// change background colors
	video.code({
	start: 10,
	end: 29,
	onStart: function( options ) {
	$body.css('background-image', 'url(images/formula_one.jpg)')
	.css('background-repeat', 'no-repeat')
	.css('background-position', 'bottom left')
	.css('background-attachment', 'fixed');
	},
	onEnd: function( options ) {
	setDefaultBackground();
	}
	}).code({
	start: 95,
	end: 103,
	onStart: function( options ) {
	$body.css('background-color', '#0077d3')
	.css('background-image', 'url(images/diver.jpg)')
	.css('background-repeat', 'no-repeat')
	.css('background-position', 'bottom right')
	.css('background-attachment', 'fixed');
	},
	onEnd: function( options ) {
	setDefaultBackground();
	}
	});

	// play the video right away
	// video.play();

	}, false);
	</script>
	</head>
	<body>
	<div class="row">
	<div class="nine columns centered">
	<div class="row content">
	<div class="six columns">
	<div id="video"></div>
	</div>
	<div class="six columns">
	<div id="timeline"></div>
	</div>
	</div>
	</div>
	<div class="nine columns centered">
	<div class="row content">
	<div class="twelve columns">
	<div id="watch"></div>
	</div>
	</div>
	</div>
	</body>
	</html>