var CE_Bio_Controller = new Class({
    options: {
		id: null,
		project_webroot: "/",
		thumbs: [],
		thumbnails: "thumbnails",
		current_bio: 0,
		fx_duration: 200,
		thumbnail_opacity: 0.5
    },

    initialize: function(options) {
		this.setOptions(options);
		this.thumbnails = $(this.options.thumbnails);
		this.bios = [];
		this.details = [];
		this.thumbs = [];
		this.current_bio = this.options.current_bio;
		this.ajax = null;

		for (var x = 0; x < this.options.thumbs.length; x++) {
			var container = document.createElement("div");
			container.setAttribute("class", "thumbnail");
			container.setAttribute("className", "thumbnail");

			var anchor = document.createElement("a");
			anchor.setAttribute("href", "javascript:bios.show("+ x + ")");
			
			var image = document.createElement("img");
			image.setAttribute("src", this.options.project_webroot + this.options.thumbs[x].path);
			image.setAttribute("alt", this.clean(this.options.thumbs[x].alt));
			
			anchor.appendChild(image);
			container.appendChild(anchor);
			this.thumbnails.appendChild(container);
			
			this.bios.push($("bio" + x));
			this.details.push($("detail" + x));
			this.thumbs.push($(container));
			
			if (x === this.current_bio) {
				container.setStyles({ opacity: this.options.thumbnail_opacity });
				container.addClass("selected");
			}
		}
		
		this.thumbnails.style.display = "block";
	},
	
	clean: function(str) {
		return str.replace(/"/g, "\\&quot;").replace(/'/g, "\\&apos;");
	},
	
	show: function(which) {
		if (which != this.current_bio) {
			// bio transition
			this.transition(this.bios[this.current_bio], this.bios[which]);
			
			// thumbnail opacity
			var up = this.thumbs[this.current_bio];
			var down = this.thumbs[which];
			var u = new Fx.Style(up, "opacity", { duration:this.options.fx_duration }).start(up.getStyle("opacity"), 1);
			var d = new Fx.Style(down, "opacity", { duration:this.options.fx_duration }).start(1, this.options.thumbnail_opacity);
			
			up.removeClass("selected");
			down.addClass("selected");
			
			this.current_bio = which;
		}
	},

	transition: function(from, to) {
		var f = new Fx.Style(from, "opacity", { duration:this.options.fx_duration, onComplete:function(elem) { elem.style.display = "none"; } });
		var t = new Fx.Style(to, "opacity", { duration:this.options.fx_duration });
		
		f.start(1, 0).chain(
			function() {
				$(to).setStyles({ opacity: 0, display:"block" });
				t.start(0, 1);
			}
		);
	}
});

CE_Bio_Controller.implement(new Options);