text: import webbrowser
  import os
  import re
  
  
  # Styles and scripting for the page
  main_page_head = '''
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Fresh Tomato.es</title>
  
      <!-- Bootstrap 3.3.2 -->
      <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
      <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
      <!-- Google Font Import -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans"
      rel="stylesheet">
      <!-- Favicon for the browser tab  -->
      <link rel="icon" href="images/favicon.png">
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="
      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
      </script>
      <style type="text/css" media="screen">
          body {
              background-color: #ffffff;
              padding-top: 51px;
          }
              /* Full page image background code from: https://goo.gl/RviyvB */
          .bg {
              /* The image used, image is  */
              background-image: url("images/bg.jpg");
  
              /* Full height & Width*/
              height: 170px;
              width: 100%;
  
              /* Center and scale the image nicely */
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
  
              line-height: 150px;
          }
          #trailer .modal-dialog {
              margin-top: 200px;
              width: 640px;
              height: 480px;
          }
          .hanging-close {
              position: absolute;
              top: -12px;
              right: -12px;
              z-index: 9001;
          }
          #trailer-video {
              width: 100%;
              height: 100%;
          }
          .movie-tile {
              margin-bottom: 20px;
              padding-top: 20px;
          }
          .movie-tile:hover {
              background-color: #60ad5e;
              cursor: pointer;
          }
          .scale-media {
              padding-bottom: 56.25%;
              position: relative;
          }
          .scale-media iframe {
              border: none;
              height: 100%;
              position: absolute;
              width: 100%;
              left: 0;
              top: 0;
              background-color: #d50000;
          }
          h2 {
              font-size: 30px;
              font-family: 'Open Sans', sans-serif;
              color: #d50000;
  
              /* On Hover, show description. Credit: banzomaikaka on StackEx */
  
          }
          .img__description_layer {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(136, 162, 106, 0.6);
              color: #ffffff;
              visibility: hidden;
              opacity: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: opacity .2s, visibility .2s;
          }
          .img__wrap:hover .img__description_layer {
              visibility: visible;
              opacity: 1;
          }
          .img__description {
              transition: .2s;
              transform: translateY(1em);
          }
          .img__wrap:hover .img__description {
              transform: translateY(0);
          }
       </style>
      <script type="text/javascript">
          // Pause the video when the modal is closed
          $(document).on('click',
           '.hanging-close, .modal-backdrop, .modal', function (event) {
              // Remove the src so the player gets removed, this is the only
              // reliable way to ensure the video stops playing in IE
              $("#trailer-video-container").empty();
          });
          // Start playing the video whenever the trailer modal is opened
          $(document).on('click', '.movie-tile', function (event) {
              var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
              var sourceUrl = 'http://www.youtube.com/embed/'
              + trailerYouTubeId + '?autoplay=1&html5=1';
              $("#trailer-video-container").empty().append($("<iframe></iframe>",
              {
                'id': 'trailer-video',
                'type': 'text-html',
                'src': sourceUrl,
                'frameborder': 0
              }));
          });
          // Animate in the movies when the page loads
          $(document).ready(function () {
            $('.movie-tile').hide().first().show("fast", function showNext() {
              $(this).next("div").show("fast", showNext);
            });
          });
      </script>
  </head>
  '''
  
  
  # The main page layout and title bar
  main_page_content = '''
    <body>
      <!-- Trailer Video Modal -->
      <div class="modal" id="trailer">
        <div class="modal-dialog">
          <div class="modal-content">
            <a href="#" class="hanging-close" data-dismiss="modal"
            aria-hidden="true">
              <img src="https://goo.gl/Yfnu4q" alt="Close button">
            </a>
            <div class="scale-media" id="trailer-video-container">
            </div>
          </div>
        </div>
      </div>
  
      <!-- Main Page Content -->
      <div class="container">
        <div class="navbar navbar-fixed-top" role="navigation"
        style="background-color: #9b0000;">
          <div class="container">
            <div class="default">
              <a class="navbar-brand" href="#">
              <p style="font-family: 'Open Sans',
              sans-serif; color:white; font-size: 20px;">
              <img src="images/favicon.png" alt="Favicon for navbar"
              height=16 width=16> Fresh Tomato.es Movie Trailers</p></a>
            </div>
          </div>
        </div>
      </div>
  
      <div class ="container bg" style="font-family: 'Open Sans',
      sans-serif; color:white; font-size: 50px;
      text-align: center; vertical-align: middle;">
      Today's Fresh Picks </div>
  
      <div class="container">
        {movie_tiles}
      </div>
    </body>
  </html>
  '''
  
  
  # A single movie entry html template
  movie_tile_content = '''
  <div class="col-md-6 col-lg-4 movie-tile text-center img__wrap"
  data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal"
  data-target="#trailer">
  <div class="img__description_layer">
  <p class="img__description">{movie_storyline}</p></div>
      <img src="{poster_image_url}" alt="Poster for {movie_title}"
      width="220" height="342">
      <h2>{movie_title}</h2>
  
  </div>
  '''
  
  
  def create_movie_tiles_content(movies):
      # The HTML content for this section of the page
      content = ''
      for movie in movies:
          # Extract the youtube ID from the url
          youtube_id_match = re.search(
              r'(?<=v=)[^&#]+', movie.trailer_youtube_url)
          youtube_id_match = youtube_id_match or re.search(
              r'(?<=be/)[^&#]+', movie.trailer_youtube_url)
          trailer_youtube_id = (youtube_id_match.group(0) if youtube_id_match
                                else None)
  
          # Append the tile for the movie with its content filled in
          content += movie_tile_content.format(
              movie_title=movie.title,
              poster_image_url=movie.poster_image_url,
              trailer_youtube_id=trailer_youtube_id,
              movie_storyline=movie.storyline
          )
      return content
  
  
  def open_movies_page(movies):
      # Create or overwrite the output file
      output_file = open('fresh_tomatoes.html', 'w')
  
      # Replace the movie tiles placeholder generated content
      rendered_content = main_page_content.format(
          movie_tiles=create_movie_tiles_content(movies))
  
      # Output the file
      output_file.write(main_page_head + rendered_content)
      output_file.close()
  
      # open the output file in the browser (in a new tab, if possible)
      url = os.path.abspath(output_file.name)
      webbrowser.open('file://' + url, new=2)
  