var CE_Featured_Gallery_Display_Controller = new Class({
    options: {
		id: null,
		application_webroot: null,
		datasource: null,
		gallery_path: null,
		gallery_id: null,
		container: "gallery-container",
		images_container: "gallery",
		links_container: "gallery-links",
		title_container: "gallery-title",
		more_link: "gallery-more",
		resize_image_width: 0, // set to zero to use the image's natural width/height
		max_featured_images: 10,
		fx_duration: 200
    },

    initialize: function(options) {
		this.setOptions(options);
		
		this.ajax = null;
		this.container = $(this.options.container);
		this.images_container = $(this.options.images_container);
		this.links_container = $(this.options.links_container);
		this.title_container = $(this.options.title_container);
		this.more_link = $("gallery-more");
		
		this.current_image = 0;
		this.tallest_image_height = 0;
	},
	
	init: function() {
		pars = "method=get_images&target=" + this.options.id + "&id=" + this.options.gallery_id;
		var success_fn = this.populate.bind(this);

		this.ajax = new Request({
			url: this.options.datasource,
			data: pars,
			onSuccess: success_fn
		}).send();
	},
	
	populate: function(request) {
		r = JSON.decode(request);
		
		var limit = r.images.length;
		if (limit > this.options.max_featured_images) { limit = this.options.max_featured_images; }
		
		for (var x = 0; x < limit; x++) {
			var image_container = new Element("div", {
				"id": "image_container_" + x,
				"class": "image-container"
			}).inject(this.images_container);

			if (x !== 0) {
				image_container.setStyle("display", "none");
			}
			
			var image = new Element("img", {
				"src": this.options.application_webroot + r.images[x].thumb_path,
				"alt": r.images[x].caption
			});
			
			var link = this.do_gallery_link(image, r.images[x].id);
			link.inject(image_container);
			
			var height = 0;
			if (this.options.resize_image_width === 0) {
				image.set("width", r.images[x].width);
				height = r.images[x].height;
			} else {
				image.set("width", this.options.resize_image_width);
				// IE is dumb and doesn't autosize the height if given just the width, so calculate and set it
				height = this.options.resize_image_width * r.images[x].height / r.images[x].width;
				// no need to round this, floats are valid! -> image.setAttribute("height", Math.ceil(this.options.resize_image_width * r.images[x].height / r.images[x].width));
			}
			image.set("height", height);

			//if (height > this.tallest_image_height) { this.tallest_image_height = height; }

			if ($chk(r.images[x].caption) && r.images[x].caption != "") {
				var caption = new Element("p", {
					"class": "caption",
					"html": r.images[x].caption
				}).inject(image_container);
			}
			
			var pipe = true;
			if (x === (limit - 1)) { pipe = false; }
			this.do_transition_link(x, pipe);
		}
		//this.images_container.setStyle("height", this.tallest_image_height);
		this.container.removeClass("loading");
		if (r.images.length > limit) {
			this.more_link.set("href", this.options.gallery_path + "?id=" + this.options.gallery_id);
			this.more_link.setStyle("display", "block");
		}
	},
	
	do_gallery_link: function(image, unid) {
		var controller = this;
		var link = new Element("a", {
			"styles": {
				"cursor": "pointer"
			},
			"events": {
				"click": function() {
					document.location.href = controller.options.gallery_path + "?id=" + controller.options.gallery_id + "&img=" + unid;
				}
			}
		});
		image.inject(link);
		
		return link
	},
	
	do_transition_link: function(index, pipe) {
		var controller = this;

		var link = new Element("a", {
			"id": "gallery-link-" + index,
			"text": index + 1,
			"styles": {
				"cursor": "pointer"
			},
			"events": {
				"mouseover": function() {
					controller.transition(index);
				}
			}
		}).inject(this.links_container);
		
		if (index === 0) { link.addClass("selected"); }
		
		if (pipe) {
			var span = new Element("span", {
				"text": " | "
			}).inject(this.links_container);
		}
	},
	
	transition: function(to) {
		if (this.current_image !== to) {
			var f = new Fx.Tween($("image_container_" + this.current_image), { duration:this.options.fx_duration, onComplete:function(elem) { elem.style.display = "none"; } });
			var t = new Fx.Tween($("image_container_" + to), { duration:this.options.fx_duration });
		
			f.start("opacity", 1, 0).chain(
				function() {
					$("image_container_" + to).setStyles({ opacity: 0, display:"block" });
					t.start("opacity", 0, 1);
				}
			);
		
			$("gallery-link-" + this.current_image).removeClass("selected");
			$("gallery-link-" + to).addClass("selected");
			this.current_image = to;
		}
	}
});

CE_Featured_Gallery_Display_Controller.implement(new Options);