var correctCards = 0;

$( init );

function init() {

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

  	// Reset the game
  	correctCards = 0;

	$('#slice1').data( 'number', 1 ).attr( 'id', 'card'+1 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
	$('#slice2').data( 'number', 2 ).attr( 'id', 'card'+2 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		$('#slice3').data( 'number', 3 ).attr( 'id', 'card'+3 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		$('#slice4').data( 'number', 4 ).attr( 'id', 'card'+4 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		$('#slice5').data( 'number', 5 ).attr( 'id', 'card'+5 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		$('#slice6').data( 'number', 6 ).attr( 'id', 'card'+6 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		$('#slice7').data( 'number', 7 ).attr( 'id', 'card'+7 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		$('#slice8').data( 'number', 8 ).attr( 'id', 'card'+8 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		
		$('#slice9').data( 'number', 9 ).attr( 'id', 'card'+9 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#apple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true
		} );
		
		
		
	 $('#leftbox').data( 'number', 1).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card1',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		 $('#leftbox1').data( 'number', 2).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card2',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		
		$('#leftbox2').data( 'number', 3).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card3',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	
	
	$('#leftbox3').data( 'number', 4).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card4',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	$('#leftbox4').data( 'number', 5).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card5',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	$('#leftbox5').data( 'number', 6).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card6',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		
	$('#leftbox6').data( 'number', 7).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card7',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox7').data( 'number', 8).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card8',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox8').data( 'number', 9).appendTo( '#cardSlots' ).droppable( {
		  accept: '#card9',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );			
	
	
}

function handleCardDrop( event, ui ) {

  	var slotNumber = $(this).data( 'number' );
  	var cardNumber = ui.draggable.data( 'number' );

  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 == 9 ) {
	  $('#cardSlots').hide();
	    $('#instructions').hide();
		  $('#resetBt').hide();
	  $('#cardPile').hide();
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '100px',
      top: '50px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }
 }
