var ProfileViewer = Class.create({

	duration: .4,
	triggerClassName: 'expand',

	featureImagePathReplacement: function(string) {
		return string.replace(/large(\d*).jpg" width="306" height="171"/g, 'small$1.jpg" width="119" height="67"');
	},



	initialize: function(container, options) {
		this.container = $(container);
		// just in case we don't see this initially (i.e. if we don't have JS turned on)
		this.container.style.display = 'block';

		this.options(options);

		this.triggers();
		this.id();
		this.view();

		this._triggers.each(function(trigger) {
			// set the url if we don't know it to the href of the first trigger
			if (!this.url) this.url = trigger.href;

			// set the events on the triggers
			trigger.observe('click', this.triggerClicked.bind(this));
		}.bind(this));
	},

	options: function(options) {
		for (key in options) {
			var value = options[key];
			this[key] = value;
		}
	},

	triggers: function() {
		if (!this._triggers || this._triggers.length==0) {
			this._triggers = this.container.select('a.'+this.triggerClassName);
		}

		return this._triggers;
	},

	id: function() {
		if (!this._id) {
			this._id = this.triggers()[0].href.replace(/.*#/, '');

			var id = this._id.match(/\/([^\/\.]*)\.[^\/\.]*$/, '');
			if (id) this._id = id[1];
		}

		return this._id;
	},

	view: function() {
		if (!this._view) {
			this._view = new Element('div', { id:this.id()+'View', className:'slider', style:'overflow:visible; display:none;' });
			this.container.appendChild(this._view);
		}

		return this._view;
	},



	triggerClicked: function(evt) {
		evt.stop();

		// locked means we were doing something else, in that case ignore the click
		if (!this.lock) {
			this.lock = true;

			// load the remote content if we haven't already, otherwise just toggle
			if (!this.isContentLoaded()) {
				new Ajax.Request(this.url, {
					onSuccess: this.loadContent.bind(this),
					onFailure: arguments.callee.failedToadTemplateHTMLFromRequest, // TODO
					onException: function(r,e) { throw(e); } // FIXME remove me
				});
			} else {
				this.toggle();
			}
		}
	},

	isContentLoaded: function() {
		return !!this.content;
	},

	loadContent: function(response) {
		this.content = response.responseText;
		this.content = this.featureImagePathReplacement(this.content);
		this._view.innerHTML = this.content;

		// show now that we have the content
		this.toggle();
	},

	isShown: function() {
		return !!this._view.visible();
	},

	toggle: function(args) {
		if (this.isShown()) {
			this.hide();
		} else {
			this.show();
		}
	},

	show: function() {
		this._triggers.each(function(trigger) {
			trigger.innerHTML = trigger.innerHTML.replace('more', 'fewer');
			trigger.addClassName('collapse');
		});

		new Effect.BlindDown(this._view, {
			duration: this.duration,
			afterFinish: this.didToggle.bind(this)
		});
	},

	hide: function() {
		this._triggers.each(function(trigger) {
			trigger.innerHTML = trigger.innerHTML.replace('fewer', 'more');
			trigger.removeClassName('collapse');
		});

		new Effect.BlindUp(this._view, {
			duration: this.duration,
			afterFinish: this.didToggle.bind(this)
		});
	},

	didToggle: function() {
		this.lock = false;
	}

});



Event.onDOMReady(function() {

	var categories = $$('.category');
	categories.each(function(category) {
		if (!category.hasClassName('lead')) {
			new ProfileViewer(category);
		}
	});

});