// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

// Can't pass events when using addEventListener, so we externally get the
// mouse's location.
function getMouseLocation(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

function hideFlashHeader() {
  // While changing the display to hide the header, would cause other document
  // elements to shift up to fill the gap left by the missing Flash header,
  // changing the visibility attribute instead just causes the Flash header to
  // disappear without any shifting of other elements.
  $('flashHeader').style.visibility = 'hidden';
}

function showFlashHeader() {
  $('flashHeader').style.visibility = 'visible';
}

function popupWindow(title_text, html, onAccept) {
  // Start moving the popup window.
  function startMove() {
    mouse_down = true;
    offsetX = mouseX - popup.offsetLeft;
    offsetY = mouseY - popup.offsetTop;
  }
  
  // Continue moving the popup window.
  function continueMove() {
    //alert('continueMove()');
    if (mouse_down) {
      popup.style.left = mouseX - offsetX + 'px';
      popup.style.top = mouseY - offsetY + 'px';
    }
  }

  // Stop moving the popup window.
  function stopMove() {
    mouse_down = false;
  }
  
  // Close the popup window.
  function closePopup() {
    bg.fade();
    popup.fade();
    showFlashHeader();
  }

  // Accept the contents of and close the popup window.
  function acceptPopup() {
    onAccept();
    closePopup();
  }
  
  // Create a title bar for the window.
  title_bar = document.createElement('h1');
  title_bar.innerHTML = title_text;
  title_bar.addEventListener('mousedown', startMove, false);
  
  // Create the body for the window.
  body = document.createElement('div');
  body = html;
  body.style.display = 'block';
  
  // Create an OK button.
  ok = document.createElement('button');
  ok.innerHTML = 'OK';
  ok.setAttribute('class', 'submit');
  ok.addEventListener('click', acceptPopup, false);

  // Create a Cancel button.
  cancel = document.createElement('button');
  cancel.innerHTML = 'Cancel';
  cancel.addEventListener('click', closePopup, false);
  
  // Create a popup window.
  popup = document.createElement('div');
  popup.className = 'popupWindow';
  popup.addEventListener('mousemove', continueMove, false);
  popup.addEventListener('mouseup', stopMove, false);
  popup.appendChild(title_bar);
  popup.appendChild(body);
  popup.appendChild(ok);
  popup.appendChild(cancel);
  
  // Create the background.
  bg = document.createElement('div');
  bg.className = 'popupBackground';
  bg.addEventListener('mousemove', continueMove, false);
  bg.addEventListener('mouseup', stopMove, false);
  
  document.body.appendChild(bg);
  document.body.appendChild(popup);
  hideFlashHeader();
  bg.appear({ to: 0.5 });
  popup.style.opacity = 0.0;
  popup.appear({ from: 0.0, to: 1.0 });

  // Place the popup in the middle of the screen.
  // Can only get the offsetWidth/Height after placing the popup in the DOM.
  popup.style.left = (window.innerWidth - popup.offsetWidth) / 2 + 'px';
  popup.style.top = (window.innerHeight - popup.offsetHeight) / 2 + 'px';
}

function popupGallery(postID, gallery, original) {
  // Create the background.
  bg = document.createElement('div');
  bg.className = 'popupBackground';

  // Create a popup window.
  popup = document.createElement('div');
  popup.className = 'popupImage';
  
  images_directory = '/posts/' + postID + '/images/';

  // Create the gallery image.
  image = new Image();
  image.onload = function() {
    // Must put the popup into the DOM before it's possible to center it.
    document.body.appendChild(popup);

    // Before the image has been loaded, it's width/height is 0 and therefore
    // the popup width is wrong/height.
    popup.style.left = (window.innerWidth - popup.offsetWidth) / 2 + 'px';
    popup.style.top = (window.innerHeight - popup.offsetHeight) / 2 + 'px';

    // Fade in the popup.
    popup.style.opacity = 0.0;
    popup.appear({ from: 0.0, to: 1.0 });
  };
  image.src = images_directory + 'gallery/' + gallery;
  
  // Create the download original link.
  download = document.createElement('a');
  download.innerHTML = 'Download Original';
  download.href = images_directory + 'originals/' + original;

  // Create the close link.
  function closePopup() {
    bg.fade();
    popup.fade();
    showFlashHeader();
  }
  close = document.createElement('a');
  close.innerHTML = 'Close';
  close.addEventListener('click', closePopup, false);

  // Move elements of the gallery into the popup.
  popup.appendChild(image);
  popup.appendChild(download);
  popup.appendChild(close);

  // Fade in the background.
  document.body.appendChild(bg);
  hideFlashHeader();
  bg.appear({ to: 0.5 });
}