var RedQuestions = new Class({
	initialize: function(id, title, content) {
		this.Id		= id;
		this.Title	= title;
		this.Content	= content;
	}
});

var RedQuestionsBox = new Class({
	initialize: function() {
		this.TitleElement	= $('QuestionsTitle');
		this.ContentElement	= $('QuestionsContent');
		this.Questions		= new Array();
		this.Current		= null;
		
//		var effectElements = new Array();
//		effectElements[0] = this.TitleElement;
//		effectElements[1] = this.ContentElement;
//		
//		this.Effect = new Fx.Elements(effectElements, {duration:100, transition:Fx.Transitions.Quad});
	},
	
	AddQuestions: function(question) {
		this.Questions[this.Questions.length] = question;
	},
	
	OnSelectionChange: function() {
		
	},
	
	LoadQuestion: function(questionId) {
		for (var i = 0; i < this.Questions.length; i++)
			if (this.Questions[i].Id == questionId)
				this.Current = this.Questions[i];
		this.Populate();	
	},
	
	
	ChangeQuestions: function() {
	  
	   var currentQuestionId = this.Current.Id;
	   var nextQuestionId = currentQuestionId.toInt() + 1;
	   if(this.Questions.length >= nextQuestionId)
	        this.LoadQuestion(nextQuestionId);
	},
	
	Populate: function() {
		this.TitleElement.setHTML("<h2>"+this.Current.Title+"</h2>");
		this.ContentElement.setHTML(this.Current.Content.replace("&singlequote","'"));
	},
	
	FadeOut: function() {
		var styles = { 'opacity': [1,0] };
		this.Effect.stop();
		this.Effect.start({
			'0': styles,
			'1': styles,
			'2': styles
		}).chain(this.FadeIn.bind(this));
	},
	
	FadeIn: function() {
		this.Populate();
		
		var styles = { 'opacity': [0,1] };
		this.Effect.stop();
		this.Effect.removeEvent('onComplete');
		this.Effect.start({
			'0': styles,
			'1': styles,
			'2': styles
		});
	}
});