var smartlet = '';
var page;
//smartlet input data
var data = {};
//field id by order
var fieldIds = [];
//fieldset
var fields = {};
var botTmpl = $('div.bot-msg-container', $('#msgTemplate'));
var promptTmpl = $('div.user-prompt-container', $('#msgTemplate'));
var answerTmpl = $('div.user-answer-container', $('#msgTemplate'));

var r = $('#chatDiv');
r.html(''); 

var getNextQuestion = function (){
	var nextId = '';
	for (var i=0;i<fieldIds.length; i++){
		if (!data[fieldIds[i]] && data[fieldIds[i]] !== '' ) {
			nextId = fieldIds[i];
			break;
		}
	}
	if (nextId === '') return null;
	return fields[nextId]? fields[nextId] : null;
}

var renderQuestion = function(q) {
	var msg = botTmpl.clone();
	
	if (!q) {
		var p = page.navNextButton;
		if (p && p.navigation.navto !== "") { // p.navigation.navto is necessary because p might exist if a page was deleted
			var result = submitQuestion(p.htmlName, p.htmlName, p.htmlName); // this will reset the fieldIDs
			if (result === '') {
				var nextQuestion = getNextQuestion(); 
				if (nextQuestion) renderQuestion(nextQuestion);
			}
		} /*else {
			$('.direct-chat-txt', msg).html('You answered all questions, see you next time!').appendTo(r).focus();
		}*/
		
		return;
	};
	if (q.cssClass.indexOf("auto-submit") !== -1) {
		// Auto-submit field
		var result = submitQuestion(q.id, q.htmlName, q.value);
		if (result === '') renderQuestion(getNextQuestion());
		return;
	}

	var html = '';
	html += '<ul id="lbl' + q.htmlName + '"></ul>';
	$('.direct-chat-txt', msg).html(html);
	msg.appendTo(r);//.focus()
	
	var text = q.label;
	if (q.type === 'staticText') {
		text += " " + q.value;
	}
	   
    $("#lbl" + q.htmlName).chatBubble({
        messages: [text],
		typingSpeed: 30
    });

    setTimeout(function(){ renderPrompt(q); }, speed);
}
var renderPrompt = function(q) {
	// Prepare prompt
	var msg = promptTmpl.clone();
	var html = '';
	html += '<div class="form-group">';
	var placeholder = (lang === "en") ? "Type and hit return..." : "Tapez et appuyez sur la touche ENTR\xC9E...";
	if (q.type === 'text') {
		html += '<input type="text" class="form-control" data-fieldId="'+q.id+'" id="'+q.name+'" name="'+q.htmlName+'" placeholder="' + placeholder + '" />';
	} else if (q.type === 'num') {
		html += '<input type="number" class="form-control" data-fieldId="'+q.id+'" id="'+q.name+'" name="'+q.htmlName+'" placeholder="' + placeholder + '" />';
	} else if (q.type === 'radio') {
		for (var i=0;i<q.options.length; i++){
			var option = q.options[i];
			html += '<div class="radio"><label class="btn btn-info"><input type="radio" data-fieldId="'+q.id+'" name="'+q.htmlName+'" id="'+q.name+'" value="'+option.value+'"/>'+option.label+'</label></div>';
		}
	} else if (q.type === 'check') {
		for (var i=0;i<q.options.length; i++){
			var option = q.options[i];
			html += '<div class="check"><label><input type="checkbox" data-fieldId="'+q.id+'" name="'+q.htmlName+'" id="'+q.name+'" value="'+option.value+'"/> '+option.label+'</label></div>';
		}
		html +='<button type="button" class="btn btn-xs btn-info pull-right msgSubmit">Submit</button></div>';
	} else if (q.type === 'button') {
		html +='<input type="button" class="btn ' + q.cssClass + '" data-fieldId="' + q.id + '" name="' + q.htmlName +'" id="' + q.name +'" value="' + q.tooltip +'" />';
	}
	html += '</div>';
	$('.user-prompt', msg).html(html);
	
	// Display prompt
	msg.appendTo(r);
	$('html, body').animate({ 
	   scrollTop: $(document).height()-$(window).height()}, 
	   1400, 
	   "swing"
    );
	// Add event listeners
	if (q.type === 'text' || q.type === 'num'){
	    var submitted = false;
		$('input', msg).keydown(function (e) {
			var key = e.which;
			if(key === 9 || key === 13) { // 9 for Android 'Next' key (the 'Go' key does not appear for numeric fields)
				var field = $(e.target);
				var val = field.val();
				var answer = field.val();
				renderAnswer(msg, field, val, answer);
				submitted = true;
				return false;  
			}
		});
		//setTimeout(function(){ $('input', msg).focus(); }, 300);
		$('input', msg).blur(function() {
		    if (!submitted) {
    		    var field = $('input', msg);
    		    var val = field.val();
				var answer = field.val();
				renderAnswer(msg, field, val, answer);
    		    return false;
		    }
		});
	    /*
		$('input', msg).keydown(function (e) {
			var key = e.which;
			if(key === 9 || key === 13) { // 9 for Android 'Next' key (the 'Go' key does not appear for numeric fields)
				var field = $(e.target);
				var val = field.val();
				var answer = field.val();
				renderAnswer(msg, field, val, answer);
				return false;  
			}
		}).focus();
		*/
		var targetOffset = $('input', msg).offset().top - 160;
		$('html, body').animate({
	        scrollTop: targetOffset }, 
	        1400, 
	        "swing"
	    );
	} else if (q.type === 'radio'){
		$('input', msg).change(function(){
			var field = $('input[type="radio"]:checked', msg);
			var val = field.val();
			var answer = field.parent().text();
			renderAnswer(msg, field, val, answer);
		});
	} else if (q.type === 'check') {
		$('.msgSubmit', msg).click(function(){
			var field = $('input[type="checkbox"]', msg);
			var val = $('input:checkbox:checked').map(function() {return this.value;}).get().join(' ');
			var answer = $('input:checkbox:checked').map(function() {return $(this).parent().text();}).get().join(' ');
			renderAnswer(msg, field, val, answer);
		});
	} else if (q.type === 'button') {
		$('input', msg).click(function(e){
			var field = $(e.target);
			var val = field.val();
			var answer = field.val();
			if (q.cssClass.indexOf("no-ajax") > 0) {
				$('form#smartguide').append($('<input/>', {
					type: 'button',
					name: 'q.htmlName',
					value: val,
				})).submit();
			} else {
				renderAnswer(msg, field, val, answer);
			}
			return false; 
		});
	} else if (q.type === 'staticText') {
		var result = submitQuestion(q.id, q.htmlName, q.value);
		if (result === '') {
			setTimeout(function(){ renderQuestion(getNextQuestion()); }, 1000);
		}
	}
}
var renderAnswer = function(div, field, val, msg) {
	div.removeClass('has-error');
	$('span.help-block', div).remove();
	$('.msgSubmit', div).remove();
	var result =  submitQuestion(field.attr('data-fieldId'), field.prop('name'), val);
	if (result === '') {
		// Remove the prompt area
		$('.user-prompt', div).remove();
		// clone the answer template and append to 'r'
		var tpl = answerTmpl.clone().appendTo(r);//.focus();
		$('.direct-chat-text', tpl).html(msg);
		setTimeout(function(){ renderQuestion(getNextQuestion()); }, 1000);
	} else {
		div.addClass('has-error');
		$('<span class="help-block">'+result+'</span>').appendTo($('div.form-group',div));//.focus();
	}
}
var submitQuestion = function(id, htmlName, value){
	$.ajaxSetup({async:false});
	var url = '/smartlets/ajax/json/process/page?t_validate=t_validate&'+htmlName + '=' + encodeURIComponent(value);
	//TODO: find a way to validate without having to create an apnid:validate button in the Smartlet
	var result = '';
	$.getJSON(url, function(data) {
		page = data.page;
		//reset fieldIds for updated visibility
		fieldIds = [];
		if (!data.page.layout.rows) return;
		for (var i=0;i<data.page.fields.length; i++){
			var field = data.page.fields[i];
			if (id === field.id){
				if (!field.isValid) result = field.errorMessages[0];
			}
			if (field.isVisible) {
				fieldIds[fieldIds.length] = field.id;
				fields[field.id] = field;
			}
		}

	});
	$.ajaxSetup({async:true});
	data[id] = value;
	return result;
}

$(function() {
	$.ajaxSetup({async:false});
	$.getJSON('/smartlets/ajax/json/process/page?interviewID='+smartlet, function(data) {
		page = data.page;
		if (!data.page.layout.rows) return;
		for (var i=0;i<data.page.fields.length; i++){
			var field = data.page.fields[i];
			if (field.isVisible) {
				fieldIds[fieldIds.length] = field.id;
				fields[field.id] = field;
			}
		}
	});
	$.ajaxSetup({async:true});
	renderQuestion(getNextQuestion());
});