$(function(){
	$('.checkbox-images').each(function(i1, el1) {
		
		var inputName = $(el1).attr('data-input-name');
		var inputClass = ( $(el1).attr('data-input-class') && $(el1).attr('data-input-class') != "") ? $(el1).attr('data-input-class') : "";
		var tagDataClass = (inputClass && inputClass != "") ? ' data-input-class="' + inputClass + '"' : '';
		$(el1).find('img').each(function(i2, el2) {
			el2.outerHTML = '<div class="checkbox-image" data-input-name="' + inputName + '"' + tagDataClass + ' ><div class="flag"><i class="fa fa-check-circle"></i></div>' + el2.outerHTML + '</div>';
		});
		$(el1).append('<input type="hidden" name="' + inputName + '" value="" class="inputToControlResult-checkbox-images ' + inputClass + '" />');

	});

	$('.radio-images').each(function(i1, el1) {
		var inputName = $(el1).attr('data-input-name');
		var inputClass = ( $(el1).attr('data-input-class') && $(el1).attr('data-input-class') != "") ? ' class="' + $(el1).attr('data-input-class') + '"' : "";
		var inputId = ( $(el1).attr('data-input-id') && $(el1).attr('data-input-id') != "") ? ' id="' + $(el1).attr('data-input-id') + '"' : "";
		$(el1).find('img').each(function(i2, el2) {
			el2.outerHTML = '<div class="radio-image" data-input-name="' + inputName + '"><div class="flag"><i class="fa fa-check-circle"></i></div>' + el2.outerHTML + '</div>';
		});
		$(el1).append('<input type="hidden" name="' + inputName + '" value=""' + inputClass + inputId + ' />');
	});

	var checkInputToControlResult = function(element, inputName, inputClass, inputId){
		if(element.parent().find('[name="' + inputName + '"]').length >= 1){
			element.parent().find('.inputToControlResult-checkbox-images').remove();
		}else{
			var inputId = (inputId && inputId != "") ? ' id="' + inputId + '"' : '';
			element.parent().append('<input type="hidden" name="' + inputName + '" value="" class="inputToControlResult-checkbox-images ' + inputClass + '"' + inputId + ' />');
		}
	};

	$(document).delegate('.checkbox-image', 'click', function(){
		var el = $(this);
		var inputName = el.attr('data-input-name');
		var inputClass = ( el.attr('data-input-class') && el.attr('data-input-class') != "") ? ' class="' + el.attr('data-input-class') + '"' : "";
		var imgValue = el.find('img').attr('data-value');
		if(el.attr('data-checked') == "true"){
			el.removeClass('checkbox-image-outline');
			el.find(".flag").hide();
			el.attr('data-checked', "false");
			el.parent().find('[name="' + inputName + '"]').each(function(index, el) {
				if($(this).val() == imgValue){
					$(this).remove();
				}
			});
		}else{
			el.addClass('checkbox-image-outline');
			el.find(".flag").show();
			el.attr('data-checked', "true");
			el.parent().append('<input type="hidden" name="' + inputName + '" value="' + imgValue + '"' + inputClass + ' />');
		}
		checkInputToControlResult(el, inputName, el.attr('data-input-class'), el.attr('data-input-id'));
	});

	$(document).delegate('.radio-image', 'click', function(){
		var el = $(this);
		var inputName = el.attr('data-input-name');
		var imgValue = el.find('img').attr('data-value');
		if(el.attr('data-checked') != "true"){
			var allEls = el.parent().find('.radio-image');
			allEls.removeClass('radio-image-outline');
			allEls.attr('data-checked', "false")
			allEls.find('.flag').hide();

			el.addClass('radio-image-outline');
			el.find(".flag").show();
			el.attr('data-checked', "true");
			el.parent().find('[name="' + inputName + '"]').val(imgValue);
		}
	});
});