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

    initialize: function(options) {
		this.setOptions(options);
		this.loader = $("loader");
		this.projects_container = $("projects_container");
		this.thumbnails = $(this.options.thumbnails);
		this.projects = [];
		this.details = [];
		this.thumbs = [];
		this.current_project = this.options.current_project;
		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:projects.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.projects.push($("project" + x));
			this.details.push($("detail" + x));
			this.thumbs.push($(container));
			
			if (x === this.current_project) {
				container.setStyles({ opacity: this.options.thumbnail_opacity });
				container.addClass("selected");
			}
		}
		
		this.loader.style.display = "none";
		this.projects_container.style.display = "block";
		this.thumbnails.style.display = "block";
	},
	
	clean: function(str) {
		return str.replace(/"/g, "\\&quot;").replace(/'/g, "\\&apos;");
	},
	
	show: function(which) {
		if (which != this.current_project) {
			// project transition
			this.transition(this.projects[this.current_project], this.projects[which]);
			
			// thumbnail opacity
			var up = this.thumbs[this.current_project];
			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_project = which;
		}
	},
	
	detail: function() {
		this.thumbnails.style.display = "none";
		this.transition(this.projects[this.current_project], this.details[this.current_project]);
		//var d = new Fx.Style(this.thumbnails, "opacity", { duration:this.options.fx_duration }).start(1, 0);
	},
	
	back: function() {
		this.transition(this.details[this.current_project], this.projects[this.current_project]);
		this.thumbnails.style.display = "block";
		//var u = new Fx.Style(this.thumbnails, "opacity", { duration:this.options.fx_duration }).start(0, 1);
	},

	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_Project_Controller.implement(new Options);