var index;
var contador = 0;
$(document).ready(function () {


	!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
	$( ".draggable" ).draggable({ revert: "invalid" });

	$( "#droppable" ).droppable({
		classes: {
			"ui-droppable-active": "ui-state-active",
			"ui-droppable-hover": "ui-state-hover"
		},
		drop: function( event, ui ) {		 
			ui.draggable.remove();
			contador++;
			if (contador == 5) {
				console.log("fin");

				$(".content-boxes,.s7_flecha").hide();
				$(".slide_retro").show(); 
			}  
			console.log(contador);
		}
	});

	$('.retro').on('click', function(){
		$(".retro_div").show();
		$(".slide3,.s7_flecha").hide();

	});

	$('.arrow').on('click', newNextSlide);
	$('.go').on('click', goSlide);
	$('.btn-feedback').on('click', showFeedback);
	$('.close').on('click', closeFeedback);
	
	$('#eje1-p2').hide();
});

function newNextSlide() {
	indexSection = $(this).attr('data-section');
	direction = $(this).attr('data-direction');
	section = document.querySelector('#'+indexSection+' div[data-content="1"]');
	content = section.querySelectorAll('#'+indexSection+' div[data-content="1"] > .slide');
	limit = $('#'+indexSection+' div[data-content="1"]').attr('data-limit');
	console.log(content);
	for (var i = 0; i < content.length; i++) {
		if ($(content[i]).is(':visible')) {
			if (direction == 'next') {
				index = parseInt($(content[i+1]).attr('data-position'));
				console.log(index);

				$('#'+indexSection+' div[data-content="1"] .arrow').show();
				if (index == content.length || index == limit) {
					$(this).hide();
					$('.flecha_atras').hide();
				}

				if (index == 2 || index == 3 || index == 4) {

					$('.flecha_adelante').hide();
				} 
			} else if (direction == 'previous') {
				index = parseInt($(content[i-1]).attr('data-position'));
				console.log(index);
				$('#'+indexSection+' div[data-content="1"] .arrow').show();
				if (index == 1) {
					$(this).hide();
				}
			}
		}
	}
	for (var i = 1; i < 3; i++) {
		v =	$('#'+indexSection+' .content'+i).attr('data-content');
		if (v != 0) {
			for (var i2 = 1; i2 <= content.length; i2++) {
				$('#'+indexSection+' .slide'+i2).hide();
			}
			$('#'+indexSection+' .slide'+index).fadeIn();
			break
		}
	}
}

function goSlide() {
	n = $(this).attr('data-index');
	indexSection = $(this).attr('data-section');
	section = document.querySelector('#'+indexSection+' div[data-content="1"]');
	content = section.querySelectorAll('#'+indexSection+' div[data-content="1"] > .slide');
	g = $(this).attr('data-go');
	// on = $('#'+indexSection+' div[data-content="1"] .slide').is(':visible');
	console.log(content);
	if (g == 0) {
		$('#'+indexSection+' div[data-content="1"] .arrow').css({'pointer-events': 'none', 'z-index': '-1'}); 
	} else if (g == 1) {
		$('#'+indexSection+' div[data-content="1"] .arrow').css({'pointer-events': 'auto', 'z-index': 0});
	}
	for (var i = 1; i < 3; i++) {
		v =	$('#'+indexSection+' .content'+i).attr('data-content');
		if (v != 0) {
			for (var i2 = 1; i2 <= content.length; i2++) {
				$('#'+indexSection+' .slide'+i2).hide();
			}
			$('#'+indexSection+' .slide'+n).fadeIn();
			break
		}
	}
}

function showFeedback() {
	$('.box-feedback').hide();
	$('.flecha_adelante').show();

	indexSection = $(this).attr('data-section');
	//$('#' + indexSection + ' div[data-content="1"] .arrow').css('pointer-events', 'none');
	indexFeedback = $(this).attr('data-feedback');
	$('#' + indexSection + ' div[data-content="1"] #feedback' + indexFeedback).show();
}

function closeFeedback() {
	indexSection = $(this).attr('data-section');
	$('#' + indexSection + ' div[data-content="1"] .arrow').css('pointer-events', 'auto');
	indexFeedback = $(this).attr('data-feedback');
	$('#' + indexSection + ' div[data-content="1"] #feedback' + indexFeedback).hide();
	btn = $(this).attr('data-btn');
	if (btn) {
		contentBtn = document.querySelectorAll('input[data-btn="' + btn + '"]'); // colocar este data en la img de x que estas en la retro. data-btn = ipt1, ipt2, ipt3...
		for (var i = 0; i < contentBtn.length; i++) {
			$(contentBtn[i]).attr('disabled', 'disabled');
		}
	}
}

