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: '#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
		} );
		
		$('#slice5').data( 'number', 5 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice6').data( 'number', 6 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice7').data( 'number', 7 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice8').data( 'number', 8 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice9').data( 'number', 9 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#car',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice10').data( 'number', 10 ).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', 10).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice10',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		
		$('#leftbox2').data( 'number', 4).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice4',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	
	
		$('#leftbox3').data( 'number', 5).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice5',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		$('#leftbox4').data( 'number', 6).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice6',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		$('#leftbox5').data( 'number', 9).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice9',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		$('#leftbox6').data( 'number', 7).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice7',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		$('#leftbox7').data( 'number', 2).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice2',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		$('#leftbox8').data( 'number', 3).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice3',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		
	$('#leftbox9').data( 'number', 8).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice8',
		  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 (cardNumber == 1 ){
	document.getElementById('head').play();
	}
	if (cardNumber == 2 ){
	document.getElementById('eye').play();
	}
	if (cardNumber == 3 ){
	document.getElementById('nose').play();
	}
	if (cardNumber == 4 ){
	document.getElementById('ear').play();
	}
	if (cardNumber == 5 ){
	document.getElementById('neck').play();
	}
	if (cardNumber == 6 ){
	document.getElementById('hand').play();
	}
	if (cardNumber == 7 ){
	document.getElementById('finger').play();
	}
	if (cardNumber == 8 ){
	document.getElementById('belly').play();
	}
	if (cardNumber == 9 ){
	document.getElementById('foot').play();
	}
	if (cardNumber == 10 ){
	document.getElementById('hair').play();
	}

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

  if ( correctCards == 10 ) {
	  $('#cardSlots').hide();
	    $('#instructions').hide();
		$('#alpha-header').hide();
		  $('#resetBt').show();
	  $('#cardPile').hide();
	  $('#boy').hide();
    $('#successMessage').show();
    $('#successMessage').animate( {

      width: '450px',
      height: '400px',
      opacity: 1
    } );
	var audio = document.getElementById('fantastic');
setTimeout(function() {
    audio.play();        //play it through JavaScript after 10 seconds
}, 3000);
  }
 }
