var correctCards = 0;
var outside = 0;
$( init );


function init() {

  	// Hide the success message
  	$('#successMessage').hide();
  	$('#fantastic').hide();
	
  	// Reset the game
  	correctCards = 0;

	$('#slice1').data( 'number', 1 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#mango',
		  stack: '#cardPile',
		  cursor: 'move',
		   revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
	$('#slice2').data( 'number', 2 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#mango',
		  stack: '#cardPile',
		  cursor: 'move',
		   revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice3').data( 'number', 3 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#mango',
		  stack: '#cardPile',
		  cursor: 'move',
		   revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice4').data( 'number', 4 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#mango',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice5').data( 'number', 5 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#mango',
		  stack: '#cardPile',
		  cursor: 'move',
		   revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		
		
		
	 $('#leftbox4').data( 'number', 1).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice1',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		 $('#leftbox').data( 'number', 2).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice2',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		
		$('#leftbox3').data( 'number', 3).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice3',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	
	
	$('#leftbox1').data( 'number', 4).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice4',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	$('#leftbox2').data( 'number', 5).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice5',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	
}

function startSliceDrag(){
	outside = 0
}

function stopSliceDrag(){
	if(outside==0){
		document.getElementById('tryagain').play();
	}
}

function handleCardDrop( event, ui ) {

  	var slotNumber = $(this).data( 'number' );
  	var cardNumber = ui.draggable.data( 'number' );
	outside= 1;
  if ( slotNumber == cardNumber ) {
  
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'center top', at: 'center top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
	
	if (cardNumber == 1){
	document.getElementById('good4').play();
	}
	if (cardNumber == 2){
	document.getElementById('good').play();
	}
	if (cardNumber == 3){
	document.getElementById('good3').play();
	}
	if (cardNumber == 4){
	document.getElementById('good1').play();
	}
	if (cardNumber == 5){
	document.getElementById('good2').play();
	}

		 
 // If all the cards have been placed correctly then display a message
  // and reset the cards for another go		 
  
   if ( correctCards == 5 ) {

   $('#cardSlots').hide();
	    $('#instructions').hide();
		  $('#resetBt').show();
		   $('#nextBt').show();
		    $('#backBt').show();
	$('#cardPile').hide();
    $('#successMessage').show();
    $('#successMessage').animate( {
      width: '400px',
      height: '405px',
      opacity: 1
    } );
		 var audio = document.getElementById('fantastic');
			setTimeout(function() {
    		audio.play();        //play it through JavaScript after 10 seconds
		}, 3000);
  		}  
   
  		}
 		}
  
  
