var Question = new Class({
	
	Implements: [Options, Events],
	
	options: {
		onAnswer : $empty
	},
	
	question 	: undefined,
	questionId	: undefined,
	
	initialize: function(id, question)
	{
		this.createHTML(id);
		this.setData(id, question);
		this.wrapper.addEvent("mouseenter", this.mouseenter.bind(this));
		this.wrapper.addEvent("mouseleave", this.mouseleave.bind(this));
	},
	
	mouseenter: function()
	{
		this.focusPlaceHolder.focus();
		this.wrapper.addClass("Hover");
	},
	
	mouseleave: function()
	{
		this.wrapper.removeClass("Hover");
		document.removeEvents("esc");
		document.removeEvents("enter");
	},
	
	createHTML: function(id)
	{
		this.wrapper 			= new Element("div", {"class":"questionContainer "+id});
		this.wrapper.set("tween", {duration:300});
		this.focusPlaceHolder	= new Element("a", {"href":"#"}).inject(this.wrapper);
		this.focusPlaceHolder.setStyle("outline", "none");
		
		this.questionElement	= new Element("div", {"class":"question", text:""}).inject(this.wrapper);
		
		this.answerOptions		= new Element("div", {"class":"answerOptions"}).inject(this.wrapper);
		
		this.createAnswers();
	},
	
	createAnswers: function(){},
	
	inject: function(wrapper)
	{
		this.wrapper.inject(wrapper);
	},
	
	answer: function(params)
	{
		document.removeEvents("esc");
		document.removeEvents("enter");
		this.fireEvent("onAnswer", [params, this]);
		this.wrapper.removeClass("Hover");
	},
	
	getQuestion: function()
	{
		return this.question;
	},
	
	getId: function()
	{
		return this.questionId;
	},
	
	highlight: function()
	{
		//this.wrapper.highlight();
	},
	
	destroy: function()
	{
		this.wrapper = this.wrapper.dispose();
	},
	
	preventEvent: function(e)
	{
		if(e)
		{
			e.stop();
		}
	},
	
	setData: function(id, question)
	{
		this.question = question;
		this.questionId = id;
		this.questionElement.set("html", question);
	}
	
});