var origXPos = [];
var origYPos = [];
var attempts = 0;
var correct = 0;

function myFunctions() {
    location.reload();
}
 
function LetterInit() {
	//console.log("ready");
	
	$("#detail").hide();
	$("#shareCon").hide();

	$( ".draggable" ).draggable({
		
		revert: "valid",
	containment: '#content',
	zIndex: 300,
    cursor: 'move',
    snap: '#content'
	
	
	
	
	
	});
	
	
	
	
	
	
	$( ".droppable" ).droppable({
      hoverClass: "boxHover",
	 drop: function( event, ui ) {
        $( this )
         var dragid = ui.draggable.attr("id").substring(1, ui.draggable.attr("id").length);
         var dropid = $(this).attr("id").substring(1, $(this).attr("id").length);
         var dataid = $(this).attr("data-id")
         if (dragid == dropid) {
	   			$("#" + dragid + "inside").css("display", "block");
				$("#t" + dropid + " .messageright").css("display", "inline").delay(1500).fadeOut( "slow" );
				ui.draggable.css("visibility", "hidden");
				attempts ++;
				correct ++;
				 new Audio("correct.mp3").play();
				$("#numAttempts").text(attempts);
				$("#numCorrect").text(correct);
				showInfo(dataid);

				$(this).click(function() {
					showInfo(dataid);
				});

				if (correct == 4) {
					$("#share").text("It took you " + attempts + " attempts to match them all. Share your score!")
					$("shareBtns").html("hello world");
					$("#shareCon").show(); 
					// $("#page-heading").text("well done");
					welldone();
					
				}

	         } else {
	         	//console.log("wrong");
	         	$("#t" + dropid + " .messagewrong").css("display", "inline").delay(1500).fadeOut( "slow" );
	         	attempts ++;
	         	$("#numAttempts").text(attempts);
				  new Audio("Try_Again.mp3").play();
	         }
			 
			 
			 
      	}
		
		
		
		
		
    });

	
	
	
	
	$( ".droppable3" ).droppable({
      //hoverClass: "boxHover",
	 drop: function( event, ui ) {
        $( this )
         var dragid = ui.draggable.attr("id").substring(1, ui.draggable.attr("id").length);
         var dropid = $(this).attr("id").substring(1, $(this).attr("id").length);
         var dataid = $(this).attr("data-id")
         if (dragid == dropid) {
			 new Audio("correct.mp3").play();
	   			//$("#" + dragid + "inside").css("display", "block");
				//$("#t" + dropid + " .messageright").css("display", "inline").delay(1500).fadeOut( "slow" );
				//ui.draggable.css("visibility", "hidden");
				//attempts ++;
				//correct ++;
				//$("#numAttempts").text(attempts);
				//$("#numCorrect").text(correct);
				showInfo(dataid);

				$(this).click(function() {
					showInfo(dataid);
				});

				if (correct == 4) {
					//$("#share").text("It took you " + attempts + " attempts to match them all. Share your score!")
					//$("shareBtns").html("hello world");
					//$("#shareCon").show(); 
					// $("#page-heading").text("well done")
				welldone();
				}

	         } else {
				  new Audio("Try_Again.mp3").play();
	         	//console.log("wrong");
	         	//$("#t" + dropid + " .messagewrong3").css("display", "inline").delay(1500).fadeOut( "slow" );
	         	//attempts ++;
	         	//$("#numAttempts").text(attempts);
	         }
      	}
    });

	
	/*
	
	
	*/
	
	
	
	function welldone() {
   setTimeout(function() {
new Audio("welldone.mp3").play();
	}, 2000); 
	
	setTimeout(function() {
    $('#bag').fadeOut('fast');
}, 2000); 

setTimeout(function() {
    $('#bag1').fadeOut('fast');
}, 2000); 


setTimeout(function() {
    $('#khemraj').fadeOut('fast');
}, 2000); 


setTimeout(function() {
    $('#bag2').fadeOut('fast');
}, 2000); 


setTimeout(function() {
    $('#pencil').fadeOut('fast');
}, 2000); 

setTimeout(function() {
    $('#pencil1').fadeOut('fast');
}, 2000); 

setTimeout(function() {
    $('#pencil2').fadeOut('fast');
}, 2000); 

setTimeout(function() {
    $('#desk').fadeOut('fast');
}, 2000); 

setTimeout(function() {
    $('#desk1').fadeOut('fast');
}, 2000); 

setTimeout(function() {
    $('#desk2').fadeOut('fast');
}, 2000); 


setTimeout(function() {
    $('#eraser').fadeOut('fast');
}, 2000); 
setTimeout(function() {
    $('#eraser1').fadeOut('fast');
}, 2000);

setTimeout(function() {
    $('#eraser2').fadeOut('fast');
}, 2000);


setTimeout(function() {
    $('#line').fadeOut('fast');
}, 2000);
setTimeout(function() {
    $('#tab').fadeOut('fast');
},2000); 



setTimeout(function() {
    $('#tab1').fadeIn('fast');
}, 2000); 



	setTimeout(function() {
    $('#one').fadeOut('fast');
}, 2000); 
setTimeout(function() {
    $('#sound15').fadeOut('fast');
}, 2000); 

	setTimeout(function() {
    $('#question').fadeOut('fast');
}, 2000);

setTimeout(function() {
    $('#hjohnson').fadeOut('fast');
}, 2000);
setTimeout(function() {
    $('#tjohnson').fadeOut('fast');
}, 2000);
setTimeout(function() {
    $('#hbarrea').fadeOut('fast');
}, 2000);
setTimeout(function() {
    $('#tbarrea').fadeOut('fast');
}, 2000);

setTimeout(function() {
    $('#hbrewer').fadeOut('fast');
}, 2000);
	setTimeout(function() {
    $('#hcunningham').fadeOut('fast');
}, 2000);

setTimeout(function() {
    $('#balloon').fadeIn('fast');
}, 2000);

	}
	
	
	
	
	
	
	
    $( ".droppable2" ).droppable();

    $("#detail").click(function() {
		$("#detail").hide();
		$("#detail").animate({ opacity: '0' }, 500);
	});

} 

function showInfo(which) {
       $("#detail").show();
	}


$(document).ready(function() {
	LetterInit();

});