var correctCards = 0;
var outside = 0;

$( init );

function init() {

  	// Hide the success message
  	$('#successMessage').hide();
  

  	// Reset the game
  	correctCards = 0;

	$('#slice1').data( 'number', 1 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
	$('#slice2').data( 'number', 2 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice3').data( 'number', 3 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice4').data( 'number', 4 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		
		
		
		
	 $('#leftbox').data( 'number', 1).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice1',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		 $('#leftbox1').data( 'number', 2).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice2',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		
		$('#leftbox2').data( 'number', 3).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice3',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	
	
	$('#leftbox3').data( 'number', 4).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice4',
		  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: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
	


	
  } 
  
  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 4 ) {
	  $('#cardSlots').hide();
	    $('#instructions').hide();
		$('#alpha-header').hide();
		  $('#resetBt').show();
	  $('#cardPile').show();
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '110px',
      top: '200px',
      width: '400px',
      height: '405px',
      opacity: 1
    } );
	 var audio = document.getElementById('fantastic');
	setTimeout(function() {
    audio.play();        //play it through JavaScript after 10 seconds
}, 2000);
  }  
  }
 
