var Question = new Class( {

	initialize : function(question, hint, answers) {
		var self = this;

		self.question = question;
		self.hint = hint;
		self.answers = answers;

		self.createQuestion();
		self.answers.each(function(answer) {
			self.createAnswer(answer);
		});

	},

	createQuestion : function() {
		var self = this;

		self.container = new Element('div.mask.question')
			.grab(self.inner = new Element('div.inner').adopt(
				new Element('h3', {
					'html': this.question
				}),
				new Element('div.hint', {
					'html': this.hint
				})
			)
		).inject(document.body);

		setTimeout(function(){
			self.container.addClass('show');
		}, 10);

	},

	createAnswer : function(options) {
		var self = this;

		var answer = new Element('a', Object.merge(options, {
			'class' : 'answer button '+(options['class'] || '')+(options.cancel ? ' cancel' : '')
		})).inject(this.inner);

		if (options.cancel) {
			answer.addEvent('click', self.close.bind(self));
		}
		else if (options.request) {
			answer.addEvent('click', function(e){
				e.stop();
				new Request(Object.merge(options, {
					'url': options.href,
					'onComplete': function() {
						(options.onComplete || function(){})();
						self.close();
					}
				})).send();
			});
		}
	},

	close : function() {
		var self = this;

		var ended = function() {
			self.container.dispose();
			self.container.removeEventListener('transitionend', ended);
		}
		self.container.addEventListener('transitionend', ended, false);

		// animate out
		self.container.removeClass('show');
	},

	toElement : function() {
		return this.container;
	}

});