
// 1 word (animal), 3 syllabics

AnimalsGame.LevelType5 = new Class(AnimalsGame.Level, {
	
	initialize: function(opts) {
		this.$super(opts);
		
		this.rightAnimals = this.animals.clone().shuffle();
		
		this.createQuestion();
	},
	
	createQuestion: function(opts) {
		var this_ = this;
		
		this_.$super(opts);
		
		var wrongSyllabics = this.rightAnswer.wrongSyllabics.clone();
		
		this.wrongAnswers = [
			wrongSyllabics.shift(),
			wrongSyllabics.shift()
		];
		
		var rightMissingSyllabic = this.rightAnswer.hudson.replace(new RegExp(this_.rightAnswer.withMissingSyllabic.split(/_+/).join('|'), 'g'), '');
		
		var actorPositions = ([
			
			{ left: '66%', top:  '9%' },
			{ left: '66%', top: '35%' },
			{ left: '66%', top: '61%' }
			
		]).shuffle();
		
		this.questionStageElements = [
		
			// question : animal picture
			new AnimalsGame.Actor({
				filename: this.rightAnswer.image,
				position: { left: '23%', top: '25%' },
				interactive: false
			}),
			new AnimalsGame.StageElement({
				position: { left: '15%', top: '62%' },
				element:  $E('h1').html( this.rightAnswer.withMissingSyllabic.replace('_', '<span class="missing-syllabic">_</span>') )._,
				interactive: false,
				className: 'question-type-5-animal-name'
			}),
			
			// right answer text
			new AnimalsGame.Actor({
				position: actorPositions.shift(),
				filename: 'section-' + this.section.sectionName + '-small-circle',
				filenameHover: 'section-' + this.section.sectionName + '-small-circle-hover',
				path: 'assets/images/circles',
				className: 'small-circle',
				click: function() {
					this_.triggerRightAnswer();
				},
				children: [
					new AnimalsGame.StageElement({
						element:  $E('h1').addClass('interactive').html( rightMissingSyllabic )._,
						autoAppend: false,
						interactive: false,
						className: 'question-type-3-answer-text'
					})
				]
			}),
			
			// wrong answers texts
			new AnimalsGame.Actor({
				position: actorPositions.shift(),
				filename: 'section-' + this.section.sectionName + '-small-circle',
				filenameHover: 'section-' + this.section.sectionName + '-small-circle-hover',
				path: 'assets/images/circles',
				className: 'small-circle',
				click: function() {
					this_.triggerWrongAnswer();
				},
				children: [
					new AnimalsGame.StageElement({
						element:  $E('h1').addClass('interactive').html( this.wrongAnswers[0] )._,
						autoAppend: false,
						interactive: false,
						className: 'question-type-3-answer-text'
					})
				]
			}),
			new AnimalsGame.Actor({
				position: actorPositions.shift(),
				filename: 'section-' + this.section.sectionName + '-small-circle',
				filenameHover: 'section-' + this.section.sectionName + '-small-circle-hover',
				path: 'assets/images/circles',
				className: 'small-circle',
				click: function() {
					this_.triggerWrongAnswer();
				},
				children: [
					new AnimalsGame.StageElement({
						element:  $E('h1').addClass('interactive').html( this.wrongAnswers[1] )._,
						autoAppend: false,
						interactive: false,
						className: 'question-type-3-answer-text'
					})
				]
			})
		];
		
		this.questionStageElements.each(function(el) { $(el.element).hide() });
		this.createTimer();
	}
});
