/*
/*  staff.js
*/

var Gallery = Class.create({
  initialize: function (el) {
    var gallery = this;
    this.el    = el;
    this.img   = this.el.down("img");
    this.items = this.el.select("li").map(function (li) {
      return new Item(gallery, li);
    });
    this.currentItem = null;
    this._observeMouse();
  },
  
  _observeMouse: function () {
    var gallery = this;
    this.el.observe("mouseover", function (event) {
      if (gallery._eventIsFromPhoto(event))
        gallery.showItemAtPoint(gallery._findMousePoint(event));
    });
    this.el.observe("mousemove", function (event) {
      if (gallery._eventIsFromPhoto(event))
        gallery.showItemAtPoint(gallery._findMousePoint(event));
    });
    this.el.observe("mouseout", function (event) {
      var dest = (event.relatedTarget) ? 
        event.relatedTarget : event.toElement;
      if (!dest.descendantOf(this)) gallery.hideAllItems();
    });
  },
  
  _eventIsFromPhoto: function (event) {
    return  event.element().up("#staff") == this.el && 
           !event.element().up("ul");
  },
  
  _findMousePoint: function (event) {
    var offset = this.el.cumulativeOffset();
    var scroll = document.viewport.getScrollOffsets();
    var x      = event.clientX - offset[0] - 10.0 + scroll[0];
    var y      = event.clientY - offset[1] - 10.0 + scroll[1];
    return new Point(x, y);
  },
  
  showItemAtPoint: function (point) {
    if (this.currentItem)
      this.currentItem.hide();
    var gallery = this;
    var item = this.items.find(function (item) {
      return item.polygon.containsPoint(point);
    });
    if (item) {
      this.currentItem = item;
      item.show();
    }
  },
  
  hideAllItems: function () {
    this.items.each(function (item) { item.hide(); });
    this.currentItem = null;
  }
});

var Item = Class.create({
  initialize: function (gallery, el) {
    this.gallery = gallery;
    this.el      = el;
    this.maskEl  = $("mask-" + this.el.id.split("-").last());
    this.polygon = Polygon.fromClassName(this.el.className);
    this.hide();
    this.maskEl.setOpacity(0.8);
  },
  
  show: function () {
    this.el.show();
    this.maskEl.show();
  },
  
  hide: function () {
    this.el.hide();
    this.maskEl.hide();
  }
});

var Point = Class.create({
  initialize: function (x, y) {
    this.x = parseFloat(x);
    this.y = parseFloat(y);
  }
});

var Polygon = Class.create({
  initialize: function (points) {
    this.points = points;
  },
  
  containsPoint: function (point) {
    var count = 0;
    var p1    = this.points[0];
    var p2;
    for (index = 1; index <= this.points.length; index++) {
      p2 = this.points[index % this.points.length];
      if (point.y  > Math.min(p1.y, p2.y) &&
          point.y <= Math.max(p1.y, p2.y) &&
          point.x <= Math.max(p1.x, p2.x) &&
          p1.y != p2.y) {
        var mx = (point.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x;
        if (p1.x == p2.x || point.x <= mx)
          count++;
      }
      p1 = p2;
    }
    return count % 2 == 1;
  }
});

Object.extend(Polygon, {
  fromClassName: function (name) {
    return new this(name.split(" ").map(function (point) {
      var values = point.split("x");
      return new Point(values[0], values[1]);
    }));
  }
});

Event.observe(window, "load", function () {
  new Gallery($("staff"));
  $$("#staff ul").first().style.visibility = "visible";
});