if (!llabs) var llabs = {};
if (!llabs.controls) llabs.controls = {};
if (!llabs.CONTROL) llabs.CONTROL = {};

// ----------------------------------------------------------- llabs.CONTROL.image
// Creates a control that will present the user with a popup 
// allowing for lookups to be performed
//
//
llabs.CONTROL.image = Class.create();
llabs.CONTROL.image.prototype = {
  initialize: function() {
  },
  init: function() {
    this.CONTROL = {};
	var control = Builder.node('div', {id: 'image-node'});
	control.innerHTML = '<div class="header">Click image to close</div><div id="image-div">Loading</div>';
	document.body.appendChild(control);
	this.CONTROL = {
		popup: $("image-node"),
		div: $("image-div"),
	}
	Element.hide(this.CONTROL.popup);
	this.closeOnClickCloseListener = this.close.bindAsEventListener(this);
  },
  open: function(anchor, image_url) {
	if (!this.CONTROL) {
		this.init();
	}
	this.anchor = $(anchor);
	var pos = Position.cumulativeOffset(this.anchor);
	pos[1] = (pos[1] + (this.anchor).offsetHeight + 7);
	this.CONTROL.popup.style.left = (pos[0]) + "px";
	this.CONTROL.popup.style.top = (pos[1]) + "px";
	this.CONTROL.div.innerHTML = '<img src="' + image_url + '">';
	new Effect.Appear('image-node', {duration: .5});
	Event.observe(this.CONTROL.popup, "click", this.closeOnClickCloseListener);
  },
  close: function(event) {
    this.isOpen = false;
    new Effect.Fade('image-node', {duration: .5});
    Event.stopObserving(this.CONTROL.popup, "click", this.closeOnClickCloseListener);
  }
}
llabs.controls.image = new llabs.CONTROL.image();

llabs.CONTROL.gallery = Class.create();
llabs.CONTROL.gallery.prototype = {
  initialize: function() {
  },
  init: function() {
        var control = Builder.node('div', {id: 'gallery-node'});
        control.innerHTML = '<div class="header">Click image to close</div><div id="gallery-div">Loading</div>';
        document.body.appendChild(control);
        this.CONTROL = {
                popup: $("gallery-node"),
                div: $("gallery-div"),
        }
        Element.hide(this.CONTROL.popup);
        this.closeOnClickCloseListener = this.close.bindAsEventListener(this);
  }, 
  open: function(anchor, url) {
        new Ajax.Request(url, {parameters:'ajax=true', onSuccess:this.callback, onFailure:this.error, method:'get'});
        if (!this.CONTROL) {
                this.init();
        }
        this.anchor = $(anchor);
        var pos = Position.cumulativeOffset(this.anchor);
        pos[1] = (pos[1] + (this.anchor).offsetHeight + 7);
        this.CONTROL.popup.style.left = (pos[0]) + "px";
        this.CONTROL.popup.style.top = (pos[1]) + "px";
        this.CONTROL.div.innerHTML = 'Loading...'
        new Effect.Appear('gallery-node', {duration: .5});
        Event.observe(this.CONTROL.popup, "click", this.closeOnClickCloseListener);
  },
  error: function(json) {
	alert('Unable to load gallery');
  },
  callback: function(t) {
//	var image_array = eval("(" + json + ")");
//	alert(image_array[0]);
//	this.CONTROL.div.innerHTML = '<img src="' + image_array[0] + '">';
	this.CONTROL.div.innerHTML = 'Hello World';
        new Effect.Appear('gallery-node', {duration: .5});
//        Event.observe(this.CONTROL.popup, "click", this.closeOnClickCloseListener);
  },
  close: function(event) {
    this.isOpen = false;
    new Effect.Fade('image-node', {duration: .5});
    Event.stopObserving(this.CONTROL.popup, "click", this.closeOnClickCloseListener);
  }
}

llabs.controls.gallery = new llabs.CONTROL.gallery();

gallery = function(anchor, url) {
	llabs.controls.gallery.open(anchor, url)
	return false;
}

pop_image = function(anchor, title, url) {
	llabs.controls.image.open(anchor, url)
	return false;
}