/**
 * ImageGallery
**/
var ImageGallery = Class.create({
	
	initialize: function (element) {
		this._element = $(element);
		this._controls = this._element.down("#gallery_controls_frame");
		this._pages_container = this._controls.down("#gallery_controls");
		if (this._pages_container) this._page_icons = this._pages_container.select("a");
		this._next = this._controls.down(".NextButton");
		this._prev = this._controls.down(".PrevButton");
		
		this._image_frame = this._element.down("#gallery_images_frame");
		this._image_container = this._image_frame.down();
		
		this._images = this._image_container.immediateDescendants().collect(this.create_item.bind(this));
		this._image_num = 0;
		
		this._controls.show();
		
		this._animator = null;
		
		this.size_frame();
		Event.observe(window, "load", this.size_frame.bind(this));
		
		this.activate_controls();
		
		if (this._images.length < 2) this._controls.hide();
		
		ImageGallery.instances.push(this);
	},
	
	create_item: function (element) {
		return new AnnotatedImage(element, this);
	},
	
	size_frame: function () {
		this._image_frame.setStyle({
			height: this._images.max(function (image) { return image.height() }) + "px"
		})
		
		var cumulative_width = 0;
		this._images.each(function (image) {
			image.set_x(cumulative_width);
			cumulative_width += image.width();
		})
	},
	
	activate_controls: function () {
		this.toggle_controls();
		this._next.observe("click", this.next_image.bindAsEventListener(this));
		this._prev.observe("click", this.prev_image.bindAsEventListener(this));
	},
	
	next_image: function (event) {
		event.stop();
		
		if (this._image_num < this._images.length - 1) this.goto_image(++this._image_num);
	},
	prev_image: function (event) {
		event.stop();
		
		if (this._image_num > 0) this.goto_image(--this._image_num);
	},
	
	goto_image: function (image_num) {
		this._image_num = image_num;
		this.toggle_controls();
		this.toggle_captions();
		this._animator = new Effect.Move(this._image_container, {x: -this.current_image().x, duration: 0.4, mode: "absolute", afterFinish: this.toggle_captions.bind(this)});
		this.select_page_icon();
	},
	
	select_page_icon: function () {
		if (!this._page_icons) return;
		this._page_icons.each(function (page_icon, num) {
			if (num - 1 == this._image_num) page_icon.addClassName("ActiveButton");
			else page_icon.removeClassName("ActiveButton");
		}.bind(this));
	},
	
	toggle_controls: function () {
		if (this._image_num < 1) this.disable_button(this._prev);
		else this.enable_button(this._prev);
		
		if (this._image_num >= this._images.length - 1) this.disable_button(this._next);
		else this.enable_button(this._next);
	},

	toggle_captions: function () {
		this._images.each(function (image) { image._annotation.visible() ? image._annotation.hide() : image._annotation.show() });
	},
	
	enable_button: function (button) {
		button.removeClassName("Disabled");
	},
	
	disable_button: function (button) {
		button.addClassName("Disabled");
	},
	
	current_image: function () {
		return this._images[this._image_num];
	}
	
});
ImageGallery.instances = [];
ImageGallery.goto_image = function (num) {
	ImageGallery.instances.first().goto_image(num);
}

/**
 * AnnotatedImage
**/
var AnnotatedImage = Class.create({
	
	initialize: function (element, controller) {
		this._element = $(element);
		this._parent = this._element.up();
		this._controller = $(controller);
		this._image = this._element.down("img");
		this._annotation = this._element.down(".ImageCaption");
		
		this.x = 0;
		
		this._element.addClassName("GalleryImageEnhanced");
		
		AnnotatedImage.instances.push(this);
	},
	
	set_x: function (new_x) {
		this.x = new_x;
		this._element.setStyle({ left: new_x + "px" });
	},
	
	annotation: function () {
		return this._annotation.innerHTML;
	},
	
	width: function () {
		return this._element.getWidth();
	},
	height: function () {
		return this._element.getHeight();
	}
	
})
AnnotatedImage.instances = [];