// PhotoView JavaScript Library
// (C) Copyright 2007 AwesomeMonthly.com

$ = function() { return document.getElementById(arguments[0]); }
Class = {
  define: function() { return function() { return this.init.apply(this, arguments); }; },
  extend: function(dest, o) { for (var prop in o) { dest[prop] = o[prop]; }; return o; }
}

Function.prototype.context = function(ctx) {
  var _meth = this, _ctx = ctx;
  return function() { return _meth.apply(_ctx, arguments); };
}

PhotoViewer = Class.define();

PhotoViewer.prototype = {
  init: function() {
    this.imgContainer = document.createElement("div");
    this.imgContainer.className = PhotoViewer.containerClass;
    this.imgContainer.onmousedown = this.mouseDown.context(this);
    this.imgContainer.onmousemove = this.mouseMove.context(this);
    this.imgContainer.onmouseup = this.mouseUp.context(this);
    this.imgContainer.style.visible = "hidden";
    this.imgContainer.style.zIndex = PhotoViewer.nextZ();
    document.body.appendChild(this.imgContainer);
    return this;
  },

  view: function(image) {
    PhotoViewer.showLoading();
    this.hide();
    var img = document.createElement("img");
    this.replace(img);
    img.onload = this.show.context(this);
    img.onerror = PhotoViewer.hideLoading;

    if (typeof(image) == "string")
      img.src = image;
    else if (image.tagName == "A")
      img.src = image.href;
    else
      return;

    return false;
  },

  mouseMove: function(e) {
    if (this.moveable) {
      var mX = PhotoViewer.Utils.event(e).clientX;
      var mY = PhotoViewer.Utils.event(e).clientY;
      this.imgContainer.style.top = (this.posY - (this.startY - mY));
      this.imgContainer.style.left = (this.posX - (this.startX - mX));
    }
    return false;
  },

  mouseDown: function(e) {
    this.startX = PhotoViewer.Utils.event(e).clientX;
    this.startY = PhotoViewer.Utils.event(e).clientY;
    this.posX = parseInt(this.imgContainer.style.left);
    this.posY = parseInt(this.imgContainer.style.top);
    this.moveable = true;
    if (this.imgContainer.style.zIndex < PhotoViewer.lastZ()) {
      this.imgContainer.style.zIndex = PhotoViewer.nextZ();
    }
    //this.imgContainer.style.cursor = "move";
    return false;
  },

  mouseUp: function() {
    this.moveable = false;
    //this.imgContainer.style.cursor = "default";
    return true;
  },

  replace: function(e) {
    this.imgContainer.innerHTML = '<div class="pv_close"><button>X</button></div>';
    this.imgContainer.firstChild.firstChild.onclick = this.close.context(this);
    this.imgContainer.appendChild(e);
  },

  show: function() {
    PhotoViewer.hideLoading();
    var ph = this.imgContainer;
    var i = ph.lastChild;
    if (i && i.height) {
      var top = PhotoViewer.windowHeight() / 2 - (i.height / 2);
      if (top < 0) top = 0;
      var left = PhotoViewer.windowWidth() / 2 - (i.width / 2);
      if (left < 0) left = 0;
      ph.style.top = top;
      ph.style.left =  left;
    }
    ph.style.visibility = "visible";
  },

  hide: function() {
    this.imgContainer.style.visibility = "hidden";
  },

  close: function() {
    this.hide();
    this.imgContainer.innerHTML = "";
  }
}

Class.extend(PhotoViewer, {
  containerNumber: 0,
  lastZIndex: 1,
  containerId: "photoviewer",
  containerClass: "photoviewer",
  nextContainerId: function() { PhotoViewer.containerNumber++; return PhotoViewer.containerId + PhotoViewer.containerNumber; },
  windowWidth: function() { return window.innerWidth? window.innerWidth : document.body.clientWidth; },
  windowHeight: function() { return window.innerHeight? window.innerHeight : document.body.clientHeight; },
  nextZ: function() { return ++PhotoViewer.lastZIndex; },
  lastZ: function() { return PhotoViewer.lastZIndex; },
  showLoading: function() {
    var ldiv = $('pv_ldiv');
    if (ldiv == undefined) {
	ldiv = document.createElement("div");
	ldiv.id = 'pv_ldiv';
	ldiv.style.top = (PhotoViewer.windowHeight() / 2) - 100;
	ldiv.style.left = (PhotoViewer.windowWidth() / 2) - 105;
	document.body.appendChild(ldiv);
	ldiv.innerHTML = "<div>Loading Image...</div><img src='/images/wait.gif'>";
    }

    ldiv.style.visibility = 'visible';
  },

  hideLoading: function() {
    var ldiv = $('pv_ldiv');
    if (ldiv) ldiv.style.visibility = 'hidden';
  },

  Utils: {
    event: function(e) { return e? e : window.event; }
  }
});

// preload wait image
var plimg = new Image();
plimg.src = "/images/wait.gif";