var CE_Transition_Controller = new Class({
    options: {
		id: null,
		subnav_container: "subnav", // id of the subnav's containing element
		logo: "logo", // id of the logo element
		members: null,
		default_member: "default",
		number_of_tiles: 12,
		start_tile: 1,
		randomize: false,
		fx_interval: 20,
		fx_duration: 200
    },

	initialize: function(options) { 
		this.setOptions(options);

		this.selected = this.options.default_member;
		this.subnav = $(this.options.subnav_container);
		
		var default_container = $("default_text");
		this.text_containers = [ { id: "default", container: default_container, height: default_container.getSize().y } ];
		
		// set the initial size of the text container
		this.text_container = $("text_container");
		this.set_text_height(this.selected);
		
		// set up our subnav links and get our non-default text containers
		for (var x = 0; x < this.options.members.length; x++) {
			var link = $("subnav_" + this.options.members[x]);
			
			if (Browser.Engine.trident4 == true) {
				// it's ie6; make a href property so the rollovers work correctly
				link.setProperty("href", "javascript:void(0)");
			}
			
			link.setStyle("cursor", "pointer");
			link.addEvent("click", this.transition.bindWithEvent(this, this.options.members[x]));

			var container = $(this.options.members[x] + "_text");
			this.text_containers.push({ "id": this.options.members[x], "container": container, "height": container.getSize().y });
		}

		// logo returns us to the default tiles
		var logo = $(this.options.logo);
		logo.setStyle("cursor", "pointer");
		logo.addEvent("click", this.transition.bindWithEvent(this, this.options.default_member));

		this.current_tile = 0;
		this.tiles = [];
		for (var x = this.options.start_tile; x <= this.options.number_of_tiles; x++) {
			this.tiles.push(x);
		}
	},
	
	set_text_height: function(which) {
		var height = null;

		for (var x = 0; x < this.text_containers.length; x++) {
			if (this.text_containers[x].id == which) {
				height = this.text_containers[x].height;
				break;
			}
		}

		this.text_container.setStyle("height", height);
	},
	
	crossfade: function(from, to) {
		var down = new Fx.Tween(from, { property: "opacity", duration: this.options.fx_duration }).start(1, 0);
		var up = new Fx.Tween(to, { property: "opacity", duration: this.options.fx_duration }).start(0, 1);
	},
	
	tile: function(from, to) {
		from_elem = from + "_" + this.tiles[this.current_tile];
		to_elem = to + "_" + this.tiles[this.current_tile];
		
		this.crossfade(from_elem, to_elem);
		
		if (this.current_tile < (this.tiles.length - 1)) {
			this.current_tile++;
			setTimeout(this.options.id + ".tile('" + from + "', '" + to + "')", this.options.fx_interval);
		} else {
			this.current_tile = 0;
		}
	},

	transition: function(parent, which) {
		if (which != this.selected) {
			if (this.options.randomize) {
				// scramble the tiles array
				var scrambled = [];
				while (this.tiles.length > 0) {
					var elem = this.tiles.getRandom();
					scrambled.push(elem);
					this.tiles.erase(elem);
				}
				this.tiles = scrambled;
			}

			// do the tiles
			this.tile(this.selected, which);

			// do the text
			var parent = this;
			var text_down = new Fx.Tween(this.selected + "_text", { property: "opacity", duration: this.options.fx_duration}).start(1, 0).chain(
				function () { 
					parent.set_text_height(which);
					var text_up = new Fx.Tween(which + "_text", { property: "opacity", duration: parent.options.fx_duration}).start(0, 1);
				}
			);

			// do the subtext
			this.crossfade("subtext_" + this.selected, "subtext_" + which);

			// deselect our old subnav item and select the new one
			this.subnav.removeProperty("class");
			this.subnav.addClass(which);
			this.selected = which;
			
			/* hide spotlight
			var hide = document.getElementById('spotlight');
			hide.fade.bind(hide, [0]);*/
			document.getElementById('spotlight').style.visibility = 'hidden';
		}
	}
});

CE_Transition_Controller.implement(new Options);