<!DOCTYPE html>
<html>
<head>
<script src="../dist/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
<style>
#close-button {
    position: absolute;
    top: 7px;
    right: 7px;
    height: 14px;
    width: 14px;
    margin: 0;
    background-image: url('resources/close_dialog.png');
}

#close-button:hover {
    background-image: url('resources/close_dialog_hover.png');
}

dialog {
/*    width: 50%;
    border-radius: 3px;
    opacity: 0;
    background: white;
    box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
    color: #333;
    min-width: 400px;
    padding: 0;
    z-index: 100;
    border: 0;
    padding: 15px;
*/}

dialog + .backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

dialog.no-backdrop + .backdrop {
    display: none;
}

.dialog-setting {
    margin: 30px;
}

/* keyframes used to pulse the overlay */
@-webkit-keyframes pulse {
 0% {
   -webkit-transform: scale(1);
 }
 40% {
   -webkit-transform: scale(1.05);
  }
 60% {
   -webkit-transform: scale(1.05);
  }
 100% {
   -webkit-transform: scale(1);
 }
}

.pulse {
  -webkit-animation-duration: 180ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
}
#messages {
    background-color: red;
}
body {
   font-family: sans-serif;
}

#open-button {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: lightgray;
  border: 1px solid;
  margin: 10px;
  padding: 15px;
}

#open-button:active {
  background-color: lime;
  margin: 9px;
}

#backdrop {
    display: none;
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: rgba(0,0,0,0.5);
    z-index: 10;
}
.post {
    margin: 10px;
    padding: 5px;
    border: 2px solid;
}

.post-buttons {
    margin: 5px;
    text-align: right;
}
.post-button:hover {
    color: green;
    font-weight: bold;
}
</style>
<body>
<div id="messages"></div>
<dialog id="dialog" class="_dialog_fixed">
    <h3>Reshare</h3>
    <input type="text" style="width: 75%" value="I am resharing this."><br>
    <div class="dialog-setting">
        <input id="click-outside-to-close" type="checkbox">
        <label for="click-outside-to-close">Close dialog upon clicking outside</label>
    </div>
    <div class="dialog-setting">
        <input id="enable-backdrop" type="checkbox" checked>
        <label for="enable-backdrop">Enable ::backdrop</label>
    </div>
    <div id="close-button"></div>
</dialog>
<div id="post-container"></div>
<script>
var dialog = document.getElementById('dialog');
dialogPolyfill.registerDialog(dialog);

function createPostButton(container, text) {
   var link = document.createElement('a');
   link.href = 'javascript:void(0)';
   link.textContent = text;
   link.className = 'post-button';
   container.appendChild(link);
   var span = document.createElement('span');
   span.textContent = ' ';
   container.appendChild(span);
   return link;
}

SampleText = 'From this spot I rise not, valiant knight, until your ' +
             'courtesy grants me the boon I seek, one that will redound ' +
             'to your praise and the benefit of the human race.';

function createPost(container) {
    var post = document.createElement('div');
    post.className = 'post';
    var postContent = document.createElement('div');
    postContent.className = 'post-content';
    postContent.textContent = SampleText;
    post.appendChild(postContent);
    var postButtons = document.createElement('div');
    postButtons.className = 'post-buttons';
    post.appendChild(postButtons);
    var reshare = createPostButton(postButtons, 'Reshare');
    reshare.addEventListener('click', openDialog);
    var reply = createPostButton(postButtons, 'Reply');
    reply.addEventListener('click', openDialog);
    createPostButton(postButtons, 'Enjoyed this post');

    container.appendChild(post);
    return post;
}

function initPosts() {
    var container = document.getElementById('post-container');
    for (var i = 0; i < 25; ++i) {
       var post = createPost(container);
    }
}

function shouldCloseDialogOnClickOutside() {
    return document.getElementById('click-outside-to-close').checked;
}

function closeDialog() {
    if (dialog.open)
        dialog.close();
}

function computeCenteredTop(dialog) {
    dialog.style.transition = '';
    dialog.showModal();
    var computedTopPx = window.getComputedStyle(dialog).top;
    var computedTop = parseInt(computedTopPx.substring(0, computedTopPx.length - 2), 10);
    dialog.close();
    return computedTop;
}

function openDialog() {
    dialog.style.opacity = 0;
    dialog.style.transition = 'all 250ms ease';

    dialog.showModal();

    dialog.style.opacity = 1;
}

function pulseDialog() {
  if (!dialog.style.webkitAnimation) {
    return;
  }
  // classList isn't supported in IE8, but it's safe to use here as this only
  // runs inside WebKit/Chrome anyway.
  dialog.classList.add('pulse');
  dialog.addEventListener('webkitAnimationEnd', function(e) {
    dialog.classList.remove('pulse');
  });
}

function clickedInDialog(mouseEvent) {
    var rect = dialog.getBoundingClientRect();
    return rect.top <= mouseEvent.clientY && mouseEvent.clientY <= rect.top + rect.height
        && rect.left <= mouseEvent.clientX && mouseEvent.clientX <= rect.left + rect.width;
}

function handleClickOutsideDialog() {
    if (!shouldCloseDialogOnClickOutside()) {
        pulseDialog();
        return
    }
    closeDialog();
}

document.body.addEventListener('keydown', function(e) {
    if (e.keyCode == 27)
        closeDialog();
});

var enableBackdrop = document.getElementById('enable-backdrop');
enableBackdrop.addEventListener('change', function(e) {
  if (this.checked) {
    dialog.className = '';
  } else {
    dialog.className = 'no-backdrop';
  }
});

var closeButton = document.getElementById('close-button');
closeButton.addEventListener('click', function(e) { closeDialog(); });

document.body.addEventListener('click', function(e) {
  console.info('document body click', e.target);
    if (!dialog.open)
        return;
    if (e.target != document.body)
        return;
    handleClickOutsideDialog();
});

dialog.addEventListener('click', function(e) {
    if (clickedInDialog(e))
        return;
    handleClickOutsideDialog();
});
initPosts();
</script>
</body>
</html>