var CONFIG = {};
var objQuiz =  null;
var strQuizPath = null;

window.addEvent('domready', function()
{	
	var baseHref = $(document.head).getElement('base');
	CONFIG.BASE_URL = baseHref.href;
	
	strQuizPath = CONFIG.BASE_URL + 'quiz/';
	
	objQuiz = new quiz();
	
});

var quiz = new Class(
{
	intCurrentQuestion: null,
	intTotalQuestions: null,
	intCorrectAnswers: 0,
	elNextButton: null,
	elDivs:null,
	strUserhash:null,
	blnAllowClick: true,
	initialize:function()
	{
		var self = this;
		
		this.intCurrentQuestion = 1;
		this.intTotalQuestions = 10;
		
		this.elDivs = $('quiz').getElements('div');
		
		if($('quiz-start'))
		{
			$('quiz-start').addEvent('click', function(e) {
				e.stop();
				var request = new Request.JSON({
					url: strQuizPath + 'start/',
					onComplete: function(response) {
						self.start(response);
					}
				}).send();
			});	
		}
		
		// post answer
		$('quizform').addEvent('submit', function(e) {
			e.stop();
			this.set('send', {onComplete: function(response) { 
				var jsonResponse = JSON.decode(response);
				if(jsonResponse.error == false)
				{
					self.showResult(jsonResponse);
				}
			}});
			this.send();
		});	
		
		self.setEvents();
	},
	start: function(objResponse)
	{	
		var self = this;
		
		// set userhash
		this.strUserhash = objResponse.hash;
		
		var request = new Request.JSON({
			url: strQuizPath + 'question/' + this.intCurrentQuestion,
			onComplete: function(response) {
				self.showQuestion(response);
			}
		}).send();		
	},
	setEvents: function()
	{
		var self = this;		
		
		// add event to button to get new question
		if($('answer-submit'))
		{
			$('answer-submit').addEvent('click', function(e) {
				e.stop();
				if(self.blnAllowClick == true)
				{
					if(self.intCurrentQuestion == self.intTotalQuestions)
					{
						self.showFinalResult();
					}
					else
					{
						// you clicked, now just wait!!!!!!
						self.blnAllowClick = false;
						
						self.intCurrentQuestion++;
						
						
						var request = new Request.JSON({
							url: strQuizPath + 'question/' + self.intCurrentQuestion,
							onComplete: function(response) {
								self.showQuestion(response);
								self.blnAllowClick = true;
							}
						}).send();
					}
					
				}
			});	
	
		}
	},	
	showQuestion: function(objQuestions) {
		var el = $('quiz-question');
		var elQuestionId = new Element('input', {'type': 'hidden', 'name': 'question_id', 'value': objQuestions[0].question_id}).inject(el);
		var elHash = new Element('input', {'type': 'hidden', 'name': 'hash', 'value': this.strUserhash}).inject(el);
		var questionCount = new Element('h2', {'html': 'Vraag ' + this.intCurrentQuestion + ' van ' + this.intTotalQuestions}).inject(el);
		var strQuestion = new Element('p', {'html': objQuestions[0].question_question}).inject(el);
		var newEl = new Element('span', {'html': ' ', 'id': 'span-question'}).inject(el);			
			
		objQuestions.each(function(question) {
			var elRadioButton = new Element('input', 
			{
				'type': 'radio',
				'name': 'answer',
				'value': question.answer_id  
			});
			elRadioButton.inject(newEl);
			
			var elRadioLabel = new Element('label', 
			{
				'html':  question.answer
			});
			
			elRadioLabel.inject(newEl);			
		});
		
		var elSubmitButton = new Element('input', 
		{
			'type': 'submit',
			'name': 'question-submit',
			'id': 'question-submit',
			'value': '' 
		});
		elSubmitButton.inject(el);		

		// switch to question view
		this.switchView('quiz-question');
	},	
	showResult: function(objAnswer) {
		var el = $('quiz-answer');
		var questionCount = new Element('h2', {'html': 'Vraag ' + this.intCurrentQuestion + ' van ' + this.intTotalQuestions}).inject(el);
		var strMelding = 'Helaas. Je hebt het fout.';
		if(objAnswer.correct != false)
		{
			this.intCorrectAnswers++;
			strMelding = 'Perfect! Je hebt het goed!';
		}
		var strQuestion = new Element('h1', {'html': strMelding}).inject(el);
		var newEl = new Element('p', {'html': 'Het juiste antwoord is:'}).inject(el);			
		var newEl = new Element('span', {'html': objAnswer.answer, 'id': 'span-question'}).inject(el);	
		if(objAnswer.comment != '')
		{
			var newEl = new Element('p', {'html': objAnswer.comment, 'class': 'comment'}).inject(el);		
		}
		
		var elSubmitButton = new Element('a', 
		{
			'href': '#',
			'id': 'answer-submit'
		});
		elSubmitButton.inject(el);		
		
		// switch to answer view
		this.switchView('quiz-answer');
		
	},	
	showFinalResult: function()
	{				
		var self = this;
		
		// set scores
		$('correct').set('text', this.intCorrectAnswers);
		$('total').set('text', this.intTotalQuestions);	
		
		var elForm = $('quiz-end');
		var elHash = new Element('input', {'type': 'hidden', 'name': 'hash', 'value': this.strUserhash}).inject(elForm);
		
		// finish -> send email
		$('quizfinish').addEvent('submit', function(e) {
			e.stop();
			this.set('send', {onComplete: function(response) { 
				var jsonResponse = JSON.decode(response);
				if(jsonResponse.error == false)
				{
					self.switchView('quiz-bedankt');	
				}
				else
				{
					$('quiz-input').set('class', 'quiz-input-error');
				}
			}});
			this.send();
		});			
		
		// switch to final view
		this.switchView('quiz-end');	
	},
	switchView: function(visibleDiv) 
	{
		var elDivs = this.elDivs;
		elDivs.each(function(div) {
			if(div.id != visibleDiv && div.id != 'quiz-end' && div.id != 'quiz-bedankt')
			{
				var myDiv = $(div.id);
				myDiv.erase('html');				
			}
			
			div.setStyles({
					display: 'none'
			});
		})
		
		var elView = $(visibleDiv);
		elView.setStyle('display', 'block');
		
		// set new event cause the button is placed
		this.setEvents();
	}
});