Untitled

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Movie Watcher</title>

    <link rel="stylesheet" type="text/css" href="http://www.teaching-materials.org/common/css/bootstrap.min.css">

    <style type="text/css">
      /* This puts titles always on a separate line from thumbnails */
      #videos-list img {
        display: block;
      }
      .red {
        color: red;
      }
    </style>
  </head>

  <body>

    <div class="container">

      <div class="row">
        <div class="col-md-12">
          <h1 class="page-header">Best Videos Ever ❤</h1>
        </div>
      </div>

      <div class="row">
        <div class="col-md-3">
          <ul id="videos-list">
          </ul>
        </div>

        <div class="col-md-9" id="video-watcher">
        </div>
      </div>

    </div>

    <script type="text/javascript" src="http://www.teaching-materials.org/common/youtube.js"></script>
    <script type="text/javascript" src="http://www.teaching-materials.org/common/js/jquery.min.js"></script>

    <script>
      var videos = [
        {
          "youtubeId": "6hB3S9bIaco",
          "title": "The Shawshank Redemption",
          "author": "ryy79",
          "theme": "horror",
          "fav": true
        },
        {
          "youtubeId": "sY1S34973zA",
          "title": "The godfather",
          "author": "ryy79",
          "theme": "action",
          "fav": true
        },
        {
          "youtubeId": "6hB3S9bIaco",
          "title": "The Shawshank Redemption",
          "author": "ryy79",
          "theme": "horror",
          "fav": true
        },
        {
          "youtubeId": "6hB3S9bIaco",
          "title": "The Shawshank Redemption",
          "author": "ryy79",
          "theme": "horror",
          "fav": true
        },
        {
          "youtubeId": "6hB3S9bIaco",
          "title": "The Shawshank Redemption",
          "author": "ryy79",
          "theme": "horror",
          "fav": true
        },
      ];

     var addVideoToList = function(video) {
        $.getJSON('http://www.omdbapi.com/?apikey=280793d3&t='+video.title, function(json) {
          console.log(json.imdbRating);
          if (video.fav == true) {
            var videoLink = $('<a>');
          } else {
            var videoLink = $('<a class="red">');
          }

          videoLink.append(video.title);
          var thumbnailUrl = youtube.generateThumbnailUrl(video.youtubeId);
          var thumbnailImg = $('<img>');
          thumbnailImg.attr('src', thumbnailUrl);
          videoLink.append(thumbnailImg);

          videoLink.on('click', function(e) {
              e.preventDefault();
              console.log(video.title);
              var videoEmbed = $('<iframe></iframe>');


              videoEmbed.attr('src', youtube.generateEmbedUrl(video.youtubeId));
              videoEmbed.attr('width', 560);
              videoEmbed.attr('height', 315);

              var videoWatcher = $('#video-watcher');
              videoWatcher.hide();
              videoWatcher.html('<h2>'+video.title+' - '+video.theme+'</h2>');
              videoWatcher.append(videoEmbed);
              videoWatcher.append('<h3>imdb rating: '+json.imdbRating+'</h3>');
              videoWatcher.append('<h3>Plot</h3>'+'<p>'+json.Plot+'</p>');
              videoWatcher.append('<h3>Actors</h3>'+'<p>'+json.Actors+'</p>');
              videoWatcher.fadeIn();
          });

          var videoItem = $('<li>');
          videoItem.append(videoLink);
          $('#videos-list').append(videoItem);
        })


     };

     for (var i = 0; i < videos.length; i++) {
        addVideoToList(videos[i]);
     }
    </script>

  </body>
</html>