var AnchorObserver = {
  enabled:  true,
  interval: 0.1
};

document.observe("dom:loaded", function() {
  var lastAnchor = "";

  function poll() {
    var anchor = (window.location.hash || "").slice(1);
    if (anchor != lastAnchor) {
      document.fire("anchor:changed", { to: anchor, from: lastAnchor });
      lastAnchor = anchor;
    }
  }

  if (AnchorObserver.enabled) {
    setInterval(poll, AnchorObserver.interval * 1000);
  }
});

Event.observe(window, "resize", function(event) {
  document.fire("viewport:resized");
});

Shade = Class.create({
  initialize: function(options) {
    this.options = options || { };
    this.createElement();
    $(document.body).insert(this.element);
    this.element.observe("click", this.onClick.bind(this));
  },

  show: function() {
    this.resizeElement();
    this.element.show();
  },

  hide: function() {
    this.element.hide();
  },

  createElement: function() {
    this.element = new Element("div").hide();
    this.element.setStyle({
      position:   "absolute",
      top:        0,
      left:       0,
      background: this.options.background || "#AB1217",
      opacity:    this.options.opacity || 0.25,
      zIndex:     this.options.zIndex || 1000
    });
  },

  resizeElement: function() {
    var dimensions = $(document.body).getDimensions();
    this.element.setStyle({
      width:  dimensions.width + "px",
      height: dimensions.height + "px"
    });
  },

  onClick: function(event) {
    this.element.fire("shade:clicked", { shade: this });
  }
});


DancerBox = {
	setup: function(){
		this.prefix = 'dancers'
		this.boxes = $$('.dancer')
		this.currentBox = null
		this.active = false
		this.hideBoxes()
		
		document.observe("anchor:changed", this.onAnchorChanged.bind(this))
		document.observe("shade:clicked", this.onShadeClicked.bind(this))
		document.observe("viewport:resized", this.onViewportResized.bind(this))
	},
	getShade: function() {
    	return this.shade = this.shade || new Shade({});
	},
	onViewportResized: function(event) {
		if (this.active) {
			this.getShade().resizeElement();
		}
	},
	onShadeClicked: function(){
		window.location.hash = "#/";
	},
	onAnchorChanged: function(e){
		if(this.isActableAnchor(e.memo.to)) {
			var components = (e.memo.to || "").split("/");
			this.showBox($(components[1]))
		}
		else {
			this.hideBoxes()
		}
	},
	isActableAnchor: function(anchor) {
    	var components = (anchor || "").split("/");
    	if (components[0] != this.prefix) return false;
    	if (!$(components[1])) return false;
    	return true;
  	},
	hideBoxes: function(){
		this.active = false
		this.boxes.invoke('hide')
		this.getShade().hide();
	},
	showBox: function(box){
		this.hideBoxes()
		
		if(!box)
			return false;
		
		this.active = true;
		
		this.getShade().resizeElement();
		this.getShade().show();
		
		this.currentBox = box
		this.currentBox.show()
		this.center()
	},
	center: function(){
		dimensions = this.currentBox.getDimensions()
		this.currentBox.setStyle("left:50%;top:50%")
		this.currentBox.setStyle({
			marginTop:  -(Math.abs(dimensions.height / 2)) + 'px',
			marginLeft: -(Math.abs(dimensions.width / 2)) + 'px'
		})
	}
}

document.observe("dom:loaded", function() {
	DancerBox.setup()
})