course_builder.js

;(function($, window, document, undefined) {


	utils = {
			guid: function() {
				
				var s4 = function() {
					return Math.floor((1 + Math.random()) * 0x10000)
					.toString(16)
					.substring(1);	
				};

				return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
					s4() + '-' + s4() + s4() + s4();
			},
	};

	nav = {
			switch_off_bar: function($bar_ol) {
				$bar_ol.find('li').each(function() {
						$(this).find('div:first').removeClass('current');
				});
			},
			check_bar_item_selected: function($bar_ol) {
					result = $bar_ol.find('li div.current');
					return result.length > 0;
			}
	}

	var pname = 'course_builder';
		
	var CourseBuilder = function(element, options) {
				this.$element = $(element);
				this.element = element;
				this.options = options;
				this.init();
	};

	CourseBuilder.prototype = {
			init: function() {
					var self = this;
					var links = this.options.links;

					this.$element.on('click', links.add_chapter, $.proxy(this.render_create_chapter_form, this)
						).on('click', links.edit_chapter, $.proxy(this.render_edit_chapter_form, this)
						).on('itemSelected', $.proxy(self.on_itemSelected, this)
						).on('click', links.add_learning, $.proxy(this.render_create_learning_form, this)
						).on('click', links.edit_learning, $.proxy(this.render_edit_learning_form, this)
						).on('click', links.add_question, $.proxy(this.render_create_question_form, this)
						).on('click', links.edit_question, $.proxy(this.render_edit_question_form, this)
						).on('formReloaded', $.proxy(this.on_form_reloaded, this));
					
					var $active_chapter = $(this.options.tabs.chapter).find("li div[class*='current']");
					$active_chapter.find(links.edit_chapter).trigger('click', []);
			},
			render_create_chapter_form: function(evt) {
					evt.preventDefault();
					var self = this;
					var $create_chapter_form = $(this.options.chapter_form)
						.clone()
						.removeClass('hide')
						.attr('id', 'js-create-chapter-form');
					$(self.options.form_wrapper).html($create_chapter_form);

					$create_chapter_form.on('submit', function(evt) {
							evt.preventDefault();
							var url = $(this).data('url');
							self.crud_save_request(url, $(this).serializeObject(), function(obj) {
									var themes = self.options.state.themes;
									themes.push(obj);
									self.redraw_nav_bar('chapters', {'current': themes.length - 1});

									var $target = $(self.options.tabs.chapter);
									var e = $.Event('chapterCreated', {'relatedTarget': $target[0]});
									self.$element.trigger(e, [obj]);
									if(e.isDefaultPrevented()) return;
							});
							return false;
					});

					var e = $.Event('itemSelected', {'relatedTarget': $create_chapter_form[0]});
					this.$element.trigger(e, [{
						'which': 'chapter',
						'obj': null,
					}]);
					return false;
			},

			render_edit_chapter_form: function(evt) {
					evt.preventDefault();
					var self = this;
					
					nav.switch_off_bar($(evt.currentTarget).closest('ol'))
					var chapter_id = $(evt.currentTarget)
						.closest('div')
						.addClass('current').data('chapterId');
					var current_chapter = this.options.state.themes[chapter_id];
					$edit_chapter_form = $(this.options.chapter_form).clone()
						.loadJSON(current_chapter)
						.removeClass('hide')
						.attr('id', 'js-edit-chapter-form');
					var url = Urls['manage-course-edit-theme'](
							this.options.state.id, chapter_id.toString());
					$edit_chapter_form.data('url', url);
					$(self.options.form_wrapper).html($edit_chapter_form);
					$edit_chapter_form.on('submit', function(evt) {
							evt.preventDefault();
							var url = $(this).data('url');
							self.crud_save_request(url, $(this).serializeObject(), function(obj) {
									self.options.state.themes[chapter_id] = obj;
									self.redraw_nav_bar('chapters', {'current': chapter_id});

									var $target = $(self.options.tabs.chapter);
									var e = $.Event('chapterUpdated', {'target': $target[0]});
									self.$element.trigger(e, [obj]);
									if(e.isDefaultPrevented()) return;
							});
							return false;
					});

					var e = $.Event('itemSelected', {'relatedTarget': $edit_chapter_form[0]});
					this.$element.trigger(e, [{
						'which': 'chapter',
						'obj': this.options.state.themes[chapter_id],
						'current_chapterIdx': chapter_id
					}]);
					return false;
			},

			render_create_learning_form: function(evt) {
					evt.preventDefault();
					
					if(!nav.check_bar_item_selected($(this.options.tabs.chapter))) {
							alert('Chapter must be selected');
							return false;
					}
					nav.switch_off_bar($(evt.currentTarget).closest('ol:first'))

					var self = this,
							current_chapter_idx = $(evt.currentTarget).data('parentIdx'),
							current_chapter_id = $(evt.currentTarget).data('parentId'),
							current_theme = this.options.state.themes[current_chapter_idx];
					var $create_learning_form = $(this.options.learning_form)
						.clone()
						.removeClass('hide')
						.attr('id', 'js-create-learning-form-' + utils.guid());

					var url = Urls['manage-course-add-learning'](
						this.options.state.id, current_chapter_id);
					$create_learning_form.data('url', url);
					$(self.options.form_wrapper).html($create_learning_form);
					
					$create_learning_form.on('submit', function(evt) {
							evt.preventDefault();
							self.crud_save_request(url, $(this).serializeObject(), function(obj) {
									current_theme.learnings.push(obj);
									self.redraw_nav_bar('learnings', {
											'chapter_idx': current_chapter_idx,
											'learning_idx': current_theme.learnings.length - 1});
									
									var $target = $(self.options.tabs.learning);
									var e = $.Event('learningCreated', {'target': $target[0]});
									self.$element.trigger(e, [obj]);
									if(e.isDefaultPrevented()) return;
							});
							return false;
					});

					var e = $.Event('itemSelected', {'relatedTarget': $create_learning_form});
					this.$element.trigger(e, [{
							'which': 'learning',
							'obj': null,
							'chapter_idx': current_chapter_idx
					}]);
					return false;
			},

			render_edit_learning_form: function(evt) {
					evt.preventDefault();
					
					if(!nav.check_bar_item_selected($(this.options.tabs.chapter))) {
							alert('Chapter must be selected');
							return false;
					}
					nav.switch_off_bar($(evt.currentTarget).closest('ol'));
					$(evt.currentTarget).closest('div').addClass('current');

					var self = this,
							learning_state = $(evt.currentTarget).data('learningState');
					
					if(!learning_state || learning_state === undefined)
							return;

					var current_chapter = this.options.state.themes[learning_state['chapter_idx']];
					var current_learning = current_chapter.learnings[learning_state['material_idx']];
					var $edit_learning_form = $(this.options.learning_form)
						.clone()
						.loadJSON(current_learning.material)
						.removeClass('hide')
						.attr('id', 'js-edit-learning-form-' + utils.guid());
					// attach attachments
					var $cur_attachments = []
					var attach_tmpl = _.template($(this.options.templates.attachment).text());
					for(var i = 0; i<current_learning.material.attachments.length; i++) {
							var attachment = current_learning.material.attachments[i];
							$cur_attachments.push(attach_tmpl({
								'id': attachment.id,
								'name': attachment.name,
								'number': i + 1,  // attachments starts with 1 (just for consistency)
								'url': attachment.url,
								'method': 'POST'
							}));
					}
					$edit_learning_form.find('ul#attachments-list').html($cur_attachments);

					var url = Urls['manage-course-edit-learning'](
							this.options.state.id,
							learning_state['chapter_id'],
							learning_state['material_idx'].toString());
					
					$edit_learning_form.data('url', url);
					$(self.options.form_wrapper).html($edit_learning_form);

					$edit_learning_form.on('submit', function(evt) {
							evt.preventDefault();
							self.crud_save_request(url, $(this).serializeObject(), function(obj) {
									current_chapter.learnings[learning_state['material_idx']] = obj;
									self.redraw_nav_bar('learnings', {
											'chapter_idx': learning_state['chapter_idx'],
											'learning_idx': learning_state['material_idx']});
									
									var $target = $(self.options.tabs.learning);
									var e = $.Event('learningUpdated', {'target': $target[0]});
									self.$element.trigger(e, [obj]);
									if(e.isDefaultPrevented()) return;
							});
							return false;
					});

					var e = $.Event('itemSelected', {'relatedTarget': $edit_learning_form});
					this.$element.trigger(e, [{
							'which': 'learning',
							'obj': current_learning,
							'learning_idx': learning_state['material_idx'],
							'chapter_idx': learning_state['chapter_idx']
					}]);
					return false;
			},
			on_form_reloaded: function(evt, question_formObj) {
					evt.currentTarget = this.options.links.add_question;
					var self = this,
							current_chapter_idx = $(evt.currentTarget).data('chapterIdx'),
							current_learning_idx = $(evt.currentTarget).data('learningIdx');
							
					var current_theme = this.options.state.themes[current_chapter_idx],
							current_learning = current_theme.learnings[current_learning_idx];
					
					question_formObj.$form.on('questionSaved.question_builder', function(evt, question) {
							current_learning.questions.push(question);
							self.redraw_nav_bar('questions', {
									'chapter_idx': current_chapter_idx,
									'learning_idx': current_learning_idx,
									'question_idx': current_learning.questions.length - 1,});

							var $target = $(self.options.tabs.question);
							var e = $.Event('questionCreated', {'target': $target[0]});
							self.$element.trigger(e, [question]);
							if(e.isDefaultPrevented()) return;		
							return false;
					});
			},
			render_create_question_form: function(evt) {
					if(!nav.check_bar_item_selected($(this.options.tabs.learning))) {
							alert('Learning must be selected');
							return false;
					}
					nav.switch_off_bar($(evt.currentTarget).closest('ol'));

					var self = this,
							current_chapter_idx = $(evt.currentTarget).data('chapterIdx'),
							current_learning_idx = $(evt.currentTarget).data('learningIdx');
							
					var current_theme = this.options.state.themes[current_chapter_idx],
							current_learning = current_theme.learnings[current_learning_idx];

					var question_builder = this.$element.data('question_builder');
					if(question_builder !== undefined) {
							question_builder.unbind();
					}
					var question_ctx = $.extend({
						'chapter_id': current_theme.id,
						'learning_idx': current_learning_idx,
						'skills': this.options.state.skills || [],
						'material': current_learning.material,
						'action_type': 'create'
					}, this.options.question_builder_ctx);
					question_builder = this.$element.question_builder(
							question_ctx).data('question_builder');
					
					question_builder.$form.on('questionSaved.question_builder', function(evt, question) {
							current_learning.questions.push(question);
							self.redraw_nav_bar('questions', {
									'chapter_idx': current_chapter_idx,
									'learning_idx': current_learning_idx,
									'question_idx': current_learning.questions.length - 1,});

							var $target = $(self.options.tabs.question);
							var e = $.Event('questionCreated', {'target': $target[0]});
							self.$element.trigger(e, [question]);
							if(e.isDefaultPrevented()) return;		
							return false;
					});
					
					var e = $.Event('itemSelected', {'relatedTarget': null});
					this.$element.trigger(e, [{
							'which': 'question',
							'obj': null,
							'chapter_idx': current_chapter_idx,
							'learning_idx': current_learning_idx
					}]);
					return false;
			},
			render_edit_question_form: function(evt) {
					if(!nav.check_bar_item_selected($(this.options.tabs.learning))) {
							alert('Learning must be selected');
							return false;
					}
					nav.switch_off_bar($(evt.currentTarget).closest('ol'));
					$(evt.currentTarget).closest('div').addClass('current');
					var self = this,
							question_state = $(evt.currentTarget).data('questionState');
					var cur_theme = this.options.state.themes[question_state.chapter_idx];
					var cur_learning = cur_theme.learnings[question_state.learning_idx];
					var cur_question = $.extend({}, cur_learning.questions[question_state.idx]);

					var question_builder = this.$element.data('question_builder');
					if(question_builder !== undefined) {
							question_builder.unbind();
					}
					var question_ctx = $.extend({
						'chapter_id': question_state.chapter_id,
						'learning_idx': question_state.learning_idx.toString(),
						'skills': this.options.state.skills || [],
						'material': question_state.material_id,
						'action_type': 'edit'
					}, this.options.question_builder_ctx);
					question_builder = this.$element.question_builder(
							question_ctx).data('question_builder');
					var url = Urls['manage-course-question-edit'](
							question_state.chapter_id,
							question_state.learning_idx.toString(),
							question_state.id);
					var formObj = question_builder.load_question_form(question_state.type, url, cur_question);
					formObj.$form.on('questionSaved.question_builder', function(evt, question) {
							cur_learning.questions[question_state.idx] = question;
							self.redraw_nav_bar('questions', {
									'chapter_idx': question_state.chapter_idx,
									'learning_idx': question_state.learning_idx,
									'question_idx': question_state.idx,});

							var $target = $(self.options.tabs.question);
							var e = $.Event('questionUpdated', {'target': $target[0]});
							self.$element.trigger(e, [question]);
							if(e.isDefaultPrevented()) return;
					});
					return false;
			},
			redraw_nav_bar: function(where, ctx) {
					var themes = this.options.state.themes;
					switch(where) {
							case 'chapters':
								this.redraw_nav_chapters(ctx.current);
								this.redraw_nav_learnings(themes[ctx.current].learnings, themes[ctx.current].id);
								break;
							case 'learnings':
								this.redraw_nav_learnings(themes[ctx.chapter_idx].learnings, ctx.chapter_idx,
										ctx.learning_idx);
								this.redraw_nav_questions(themes[ctx.chapter_idx].learnings[ctx.learning_idx].questions,
										ctx.learning_idx, ctx.chapter_idx, null);
								break;
							case 'questions':
								var learning = themes[ctx.chapter_idx].learnings[ctx.learning_idx];
								this.redraw_nav_questions(learning.questions, ctx.learning_idx,
										ctx.chapter_idx, ctx.question_idx);
								break;
							default:
								alert("that's a bug");
					}
			},
			redraw_nav_chapters: function(current) {
					var self = this;
					var themes = this.options.state.themes;
					var tmpl = _.template($(this.options.templates.chapter_nav).text());
					var chapters = [];
					for(var i=0; i<themes.length; i++) {
							var cur = themes[i];
							cur.id = i;
							cur.is_current = current == i && true || false;
							var $nav_item = tmpl({'chapter': cur});
							chapters.push($nav_item);
					}
					$(this.options.tabs.chapter).html(chapters);
			},

			redraw_nav_learnings: function(learnings, parent_id, current) {
					if(current === undefined) current = -1;
					var self = this;
					var tmpl = _.template($(this.options.templates.learning_nav).text());
					var $learnings = [];
					for(var i = 0; i<learnings.length; i++) {
							var cur = learnings[i];
							var is_current = current == i && true || false;
							cur.parent_id = parent_id;
							var $nav_item = tmpl({
									'learning': cur.material,
									'learning_state': {
											'chapter_id': this.options.state.themes[parent_id].id,
											'chapter_idx': parent_id,
											'material_id': cur.material.id,
											'material_idx': i,
									},
									'is_current': is_current
							});
							$learnings.push($nav_item);
					}
					$(this.options.tabs.learning).html($learnings);
			},
			redraw_nav_questions: function(questions, learning_idx, chapter_idx, current_idx) {
					if(current_idx === undefined) current_idx = -1;
					var self = this;
					var tmpl = _.template($(this.options.templates.question_nav).text());
					var $questions = [];
					var the_theme = this.options.state.themes[chapter_idx];
					for(var i = 0; i<questions.length; i++) {
							var the_question = questions[i];
							var is_current = current_idx == i && true || false;
							var $question = tmpl({
									'question': the_question,
									'question_state': {
											'chapter_id': the_theme.id,
											'chapter_idx': chapter_idx,
											'learning_idx': learning_idx,
											'material_id': the_theme.learnings[learning_idx].material.id,
											'id': the_question.id,
											'idx': i,
											'type': the_question.code
									},
									'is_current': is_current
							});
							$questions.push($question);
					}
					$(this.options.tabs.question).html($questions);
			},
			
			crud_save_request: function(url, data, callback) {
					var self = this;
					data = JSON.stringify(data);
					$.post(url, data, function(result) {
							if(result.success === true) {
									if(callback && callback !== undefined) {
											callback(result.object);
									}
							} else {
									self.render_errors(result.errors);
							}
							return false;
					});
			},
			
			on_itemSelected: function(evt, data) {
				var $form = $(evt.relatedTarget);
				if(data.which === 'chapter') {
						if(data.obj != null) {
								this.redraw_nav_learnings(data.obj.learnings, data.current_chapterIdx);
								$(this.options.links.add_learning)
										.data('parentId', data.obj.id)
										.data('parentIdx', data.current_chapterIdx)
										.removeClass('hide').addClass('active');
								$(this.options.tabs.learning).removeClass('hide');
						} else {
								nav.switch_off_bar($(this.options.tabs.chapter));
								nav.switch_off_bar($(this.options.tabs.learning));
								$(this.options.links.add_learning)
									.data('parentId', '')
									.data('parentIdx', '')
									.removeClass('active').addClass('hide');
								$(this.options.tabs.learning).addClass('hide');
						}
				} else if(data.which === 'learning') {
						// init attachment plugin
						$form.find('ul#attachments-list').attachment_manager({
								'attachment_template': "#js-attachment-template",
								'main_form': '#' + evt.relatedTarget.id,
								'fileupload': '#fileupload',
								//'progress': '.fileupload-progress',
								'urls': {
										'upload': Urls['manage-material-attachment-upload'](),
								},
								'submit_btn': '#submit',
								'remove_btn': 'a.del',
								'cancel_btn': '#cancel',
								'dialog_trigger': '#js-file-dialog-btn'
    				});
    				$form.find('textarea[name="body_md"]').mdmagick({
    						'previewContainer': $form.find('#js-preview-container')});
    				if(data.obj != null) {
    						this.redraw_nav_questions(data.obj.questions, data.learning_idx, data.chapter_idx);
    						$(this.options.links.add_question).data({
										'parentId': data.obj.id,
										'parentIdx': data.learning_idx});
								$(this.options.links.add_question)
										.data('learningIdx', data.learning_idx)
										.data('chapterIdx', data.chapter_idx)
										.removeClass('hide').addClass('active');
								$(this.options.tabs.question).removeClass('hide');
						} else {
								nav.switch_off_bar($(this.options.tabs.learning));
								$(this.options.links.add_question)
									.data('learningIdx', '')
									.data('chapterIdx', '')
									.removeClass('active').addClass('hide');
								$(this.options.tabs.question).addClass('hide');
						}
				} else if(data.which === 'question') {
						console.log("question item selected");
						if(data.obj != null) {

						} else {
								nav.switch_off_bar($(this.options.tabs.question));
						}
				}
			},
			render_errors: function(errors) {
					console.log(errors);
					alert('errors');
			},
	};
	$.fn.course_builder = function(option) {
      var args = Array.prototype.slice.call(arguments, 1);
      return this.each(function() {
          var $this = $(this),
              data = $this.data(pname),
              options = $.extend({}, $.fn.course_builder.defaults, typeof option === 'object' && option);
          if(!data) {
              $this.data(pname, (data = new CourseBuilder($this, options)));
          }
          if(typeof option === 'string') {
              data[option].apply(data, args);
          }else {
          }
      });
  };
  $.fn.course_builder.defaults = {
			'state': '',
			'chapter_form': '',
			'lesson_form': '',
			'links': {
					
			},
			'form_wrapper': '',
      'tabs': {
          
      },
      'templates': {
          
      }
	};


	$.fn.serializeObject = function() {
			var o = {};
			var a = this.serializeArray();
			$.each(a, function() {
					if (o[this.name] !== undefined) {
							if (!o[this.name].push) {
									o[this.name] = [o[this.name]];
							}
									o[this.name].push(this.value || '');
					} else {
							o[this.name] = this.value || '';
					}
			});
			return o;
	};

})( jQuery );

question_builder.js

;(function($, window, document, undefined) {

	utils = {
			guid: function() {
				
				var s4 = function() {
					return Math.floor((1 + Math.random()) * 0x10000)
					.toString(16)
					.substring(1);	
				};

				return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
					s4() + '-' + s4() + s4() + s4();
			},
	};

	var pname = 'question_builder';
	
	var QuestionBuilderFactory = $.QuestionBuilder = Class.extend({
			init: function(element, options) {
					this.$element = $(element);
					this.element = element;
					this.ctx = $.extend({

					}, options);
					this.action_type = options.action_type;
					this.init_evt_handlers();
			},
			init_evt_handlers: function() {
					var self = this;
					this.$element.on('change.question_builder', this.ctx.set_question_type + ' select:first', function(evt) {
							var qtype = $(this).val();
							var formUrl = Urls['manage-course-question-add'](
									self.ctx.chapter_id, self.ctx.learning_idx.toString(), qtype);
							var question_formObj = self.load_question_form(qtype, formUrl, {});
							$(document).trigger('formReloaded', [question_formObj]);
							return false;
					});
					$(this.ctx.set_question_type).removeClass('hide');
					if(this.action_type == 'create') {
							var qtype = this.$element.find(this.ctx.set_question_type + ' select option:selected').val();
							var formUrl = Urls['manage-course-question-add'](
									self.ctx.chapter_id, self.ctx.learning_idx.toString(), qtype);
							var question_formObj = self.load_question_form(qtype, formUrl, {});
					} else {
							$(this.ctx.set_question_type).addClass('hide')
									.find('select:first').unbind('change.question_builder');
					}
			},
			load_question_form: function(qtype, url, params) {
					var $form = this.$form = $(this.ctx.forms[qtype])
						.clone()
						.removeClass('hide')
						.attr('id', 'js-create-question-form-' + qtype + "-" + utils.guid());
					// populate form with skills
					var $options = [];
					
					for(var i = 0; i<this.ctx.skills.length; i++) {
							var the_skill = this.ctx.skills[i];
							$options.push($(document.createElement('option'))
									.val(the_skill.id)
									.text(the_skill.name));
					}	
					this.$form.find('select#js-select-skills-input').html($options);
					if(this.action_type == 'create') {
							// create
							this.$form.find('input[name="material"]').val(this.ctx.material.id);
					} else {
							//edit
							this.$form.find('input[name="material"]').val(params.material.id);
					}
					var question_formObj = this.question_formObj = this.getQuestionForm(
							qtype, $form[0], url, params);
					$(this.ctx.form_wrapper).html($form);
					return question_formObj;
			},
			getQuestionForm: function(qtype, form, url, params) {
					var QuestionForm = QUESTION_FORMS[qtype];
					return (QuestionForm ? new QuestionForm(form, url, "POST", params) : null);
			},
			unbind: function() {
					$(this.ctx.form_wrapper).html('');
					$(document).unbind('.question_builder');
					if(this.$form !== undefined) {
							this.question_formObj.unbind();
							this.$form.remove();	
					}
					this.$element.data(pname, null);
			}
	});
	
	var QuestionFormWithContext = Class.extend({
			init: function(form, action, method, params) {
					this.form = form;
					this.$form = $(form)
						.attr('method', method)
						.attr('action', action);
					this.action = action;
					this.params = params;

					this.init_plugins();
					this.bind_to_evts();
					this.populate_dynamic_fields();
					this.populate_form_fields();
			},
			init_plugins: function() {
					this.$form.find('textarea[name="body_md"]').mdmagick({
    						'previewContainer': this.$form.find('#js-preview-container')});
			},
			bind_to_evts: function() {
					this.$form.on('click.question_builder', '#js-add-skill-link', $.proxy(this.add_skill, this)
					).on('click.question_builder', '.js-remove-skill-link', $.proxy(this.remove_skill, this)
					).on('submit.question_builder', $.proxy(this.on_submit, this));
			},
			populate_dynamic_fields: function() {
					var $skills = [];
					
					if(this.params.skills){
							for(var i = 0; i<this.params.skills.length; i++) {
									var the_skill =this.params.skills[i];
									var $the_skill = $(document.createElement('li')).html(
										the_skill.name + " <a href='#' class='js-remove-skill-link'>[" + gettext("remove") +
										"]</a><input type='hidden' name='skill' value='" + the_skill.id + "'/>"
									);
									$skills.push($the_skill);
							}
					}
					this.$form.find('ul.js-skill-list').html($skills);
			},
			populate_form_fields: function() {
					this.$form.loadJSON(this.params);
			},
			on_submit: function(evt) {
					evt.preventDefault();
					var self = this;
					this.crud_save_request(this.action, this.$form.serializeObject(), function(obj) {
							self.$form.trigger('questionSaved.question_builder', [obj]);
					});
					return false;
			},
			add_skill: function(evt) {
					var $selected_option = this.$form.find('#js-select-skills-input option:selected');
					var $skill_item = $(document.createElement('li')).html(
							$.trim($selected_option.text()) + " <a href='#' class='js-remove-skill-link'>[" + gettext("remove") +
							"]</a><input type='hidden' name='skill' value='" + $selected_option.val() + "'/>");
					this.$form.find('ul.js-skill-list').append($skill_item);
					return false;
			},
			remove_skill: function(evt) {

					$(evt.currentTarget).closest('li').remove();
					return false;
			},
			unbind: function() {
					this.$form.unbind('.question_builder');
			},
			crud_save_request: function(url, data, callback) {
					var self = this;
					data = JSON.stringify(data);
					$.post(url, data, function(result) {
							if(result.success === true) {
									if(callback && callback !== undefined) {
											callback(result.object);
									}
							} else {
									self.render_errors(result.errors);
							}
							return false;
					});
			},
			render_errors: function(errors) {
					console.log("errors", errors);
			}
	});

	var MCMAQuestionForm = QuestionFormWithContext.extend({
			bind_to_evts: function() {
					this._super();
					this.$form.on('click.question_builder', '#js-add-answer-choice-link', $.proxy(this.add_answer_choice, this)
					).on('click.question_builder', '.js-remove-answer-choice-link', $.proxy(this.remove_answer_choice, this)
					);
			},
			populate_dynamic_fields: function() {
					this._super();
					var $variants = [];
					for(var i in this.params.variants) {
							var variant = this.params.variants[i];
							var $variant = $(document.createElement('li')).html(
								variant.value + " <a href='#' class='js-remove-answer-choice-link'>[" + gettext('remove') + 
								"]</a><input type='hidden' name='value' value='" + variant.value + "'/>" + 
								"<input type='hidden' name='is_right' value='" + variant.is_right + "'/>");
							$variants.push($variant);
					}
					this.$form.find('ul.js-answer-choice-list').html($variants);
			},
			add_answer_choice: function(evt) {
					var $input = this.$form.find('input[name="js-answer-choice-input"]');
					var $selected_option = this.$form.find('select[name="js-answer-choice-select"] option:selected');
					if(!$.trim($input.val())) {
							alert(gettext("Provide answer choice, before adding something"));
							return false;
					}
					var $answer_choice_item = $(document.createElement('li')).html(
							$.trim($input.val()) + " <a href='#' class='js-remove-answer-choice-link'>[" + gettext('remove') + 
							"]</a><input type='hidden' name='value' value='" + $.trim($input.val()) + "'/>" + 
							"<input type='hidden' name='is_right' value='" + $selected_option.val() + "'/>");
					this.$form.find('ul.js-answer-choice-list').append($answer_choice_item);
					return false;
			},
			remove_answer_choice: function(evt) {
					$(evt.currentTarget).closest('li').remove();
					return false;
			}
	});

	var MCSAQuestionForm = MCMAQuestionForm.extend({

	});

	var EssayQuestionForm = QuestionFormWithContext.extend({
			bind_to_evts: function() {
					this._super();
					this.$form.on('click.question_builder', '#js-add-answer-field-link', $.proxy(this.add_keyword_group, this)
					).on('click.question_builder', '.js-remove-answer-field-link', $.proxy(this.remove_keyword_group, this)
					);
			},
			populate_dynamic_fields: function() {
					this._super();

					var $keywords = [];
					console.log(this.params)
					for(var i in this.params.keyword) {
							var kw_item = this.params.keyword[i].join(", ");
							var $kw_item = $(document.createElement('li')).html(
									kw_item + " <a href='#' class='js-remove-answer-field-link'>[" + gettext('remove') + 
									"]</a><input type='hidden' name='keyword' value='" + kw_item + "'/>");
							$keywords.push($kw_item);
					}
					this.$form.find('ul.js-question-answer-list').html($keywords);
			},
			add_keyword_group: function(evt) {
					var $input = this.$form.find('#js-keyword-input');
					if(!$.trim($input.val())) {
							alert(gettext("Provide keywords, before adding something."));
							return false;
					}
					var $keyword_item = $(document.createElement('li')).html(
						$.trim($input.val()) + " <a href='#' class='js-remove-answer-field-link'>[" + gettext('remove') + 
						"]</a><input type='hidden' name='keyword' value='" + $.trim($input.val()) + "'/>");
					this.$form.find('ul.js-question-answer-list').append($keyword_item);
					return false;
			},
			remove_keyword_group: function(evt) {
					$(evt.currentTarget).closest('li').remove();
					return false;
			}
	});

	var CTagQuestionForm = QuestionFormWithContext.extend({
			populate_form_fields: function() {
					if('fake_words' in this.params || 'real_words' in this.params) {
						this.params['fake_words'] = this.params['fake_words'].join(', ');
						this.params['real_words'] = this.params['real_words'].join(', ');	
					}
					this._super();
			},
	});

	var QUESTION_FORMS = {
			'es': EssayQuestionForm,
			'mc-ma': MCMAQuestionForm,
			'mc-sa': MCSAQuestionForm,
			'ctag': CTagQuestionForm
	};
	$.fn.serializeObject = function() {
			var o = {};
			var a = this.serializeArray();
			$.each(a, function() {
					if (o[this.name] !== undefined) {
							if (!o[this.name].push) {
									o[this.name] = [o[this.name]];
							}
									o[this.name].push(this.value || '');
					} else {
							o[this.name] = this.value || '';
					}
			});
			return o;
	};
})( jQuery, window, document);