<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Chat with {talker}</title>
  {extra_css}
  {extra_js}
</head>

<body>
  <div id="chat" class="chatPanel normalPanel">
    <div class="chatMainPanel" id="chatMainPanel" style="padding-top:40px;">
      <div class="chatTitle" style="margin-top: -40px;">
        <div class="chatNameWrap">
          <p class="chatName" id="messagePanelTitle">{talker}</p>
        </div>
      </div>
      <div class="chatScorll" style="position: relative; font-family:initial;">
        <div id="chat_chatmsglist" class="chatContent" style="position: absolute;">
          {messages}
        </div>
      </div>
    </div>
  </div>
<script type='text/javascript'>
var playVoice = function(event) {{
  var target = event.target;
  while (!target.classList.contains('cloud'))
    target = target.parentElement;
  var audio = target.getElementsByTagName('audio')[0];
  audio.play();
}};

$(document).ready(function() {{
    $(".fancybox").fancybox({{
    // fancybox will otherwise scroll page to top
    helpers: {{ overlay : {{ locked : false}}}}
   }});
 }});
</script>
</body>
</html>
