<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <title>ChocolateChip-UI iOS</title>
  <link rel="stylesheet" href="../chui/chui-ios-3.9.0.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="../chui/chui-3.9.0.js"></script>
  <style>
    /* Popup Demo Styles */
    #popupMessageTarget {
      opacity: 0;
      font-size: 14pt;
      line-height: 16pt;
      font-weight: 200;
      font-family: SegoeWP, SegoeUI, HelveticaNeue, Roboto, Sans-serif;
      padding: 0 15px;
    }
    .animatePopupMessage {
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: updatePopupMessage;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-name: updatePopupMessage;
    }
    @-webkit-keyframes updatePopupMessage {
      0% { opacity: 0; }
      20% { opacity: 1; }
      90% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    @keyframes updatePopupMessage {
      0% { opacity: 0; }
      20% { opacity: 1; }
      90% { opacity: 1; }
      100% { opacity: 0; }
    }
  </style>
  <script>
    $(function() {
      // This is just an animation for popup callback, 
      // Not part of popup functionality.
      $("#popupMessageTarget").on("webkitAnimationEnd", function() {
        this.className = "";
        this.textContent = "";
      });
      
      // Bind event to show the popup:
      $("#openPopup").on("singletap", function() {
        $.UIPopup({
          id: "warning",
          title: 'Attention Viewers!', 
          message: 'The performance of "Merchant of Venice", Act 4 scene 1, will begin shortly. Thank you for your patience.', 
          cancelButton: 'Skip', 
          continueButton: 'Stay', 
          callback: function() {
            var popupMessageTarget = document.querySelector('#popupMessageTarget');
            popupMessageTarget.textContent = 'Thanks for staying with us a bit longer.';
            popupMessageTarget.classList.remove("animatePopupMessage");
            popupMessageTarget.classList.add("animatePopupMessage");
          }
        });
      });
    });
  </script>
</head>
<body>
  <nav>
    <h1>Popup Example</h1>
    <button class='align-flush' id="openPopup">
      <label>Popup</label>
    </button>
  </nav>
  <article id="main" class="current">
    <section>
      <p id='popupMessageTarget' class='attentionGrapper'></p>
      <h2>The Merchant of Venice</h2>
      <ul class='list'>
        <li>
          <h3>Speaker: Portia</h3>
          <h4>Audience: Shylock</h4>
          <p>The quality of mercy is not strained. 
It droppeth as the gentle rain from heaven upon the place beneath. It is twice blest: It blesseth him that gives and him that takes. Tis mightiest in the mightiest; it becomes the throned monarch better than his crown. His scepter shows the force of temporal power, the attribute to awe and majesty, wherein doth sit the dread and fear of kings. But mercy is above this sceptered sway; it is enthroned in the hearts of kings; it is an attribute of God himself; and earthly power doth then show like God's when mercy seasons justice.</p>
        </li>
      </ul>
      <p>Portia's entreaty to Shylock to show mercy to Antonio.</p>
    </section>
  </article>
</body>
</html>
