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: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
	$('#slice2').data( 'number', 2 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		 revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice3').data( 'number', 3 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice4').data( 'number', 4 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice5').data( 'number', 5 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice6').data( 'number', 6 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice7').data( 'number', 7 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice8').data( 'number', 8 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		
		$('#slice9').data( 'number', 9 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice10').data( 'number', 10 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice11').data( 'number', 11 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice12').data( 'number', 12 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice13').data( 'number', 13 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice14').data( 'number', 14 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  stack: '#cardPile',
		  cursor: 'move',
		  revert: true,
		  start: startSliceDrag,
		  stop: stopSliceDrag
		} );
		
		$('#slice15').data( 'number', 15 ).appendTo( '#cardPile' ).draggable( {
		  containment: '#pineapple',
		  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
		} );
	
	$('#leftbox4').data( 'number', 5).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice5',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
	
	$('#leftbox5').data( 'number', 6).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice6',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
		
	$('#leftbox6').data( 'number', 7).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice7',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox7').data( 'number', 8).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice8',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox8').data( 'number', 9).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice9',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );	
		
	$('#leftbox9').data( 'number', 10).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice10',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox10').data( 'number', 11).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice11',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox11').data( 'number', 12).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice12',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );	
		
	$('#leftbox12').data( 'number', 13).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice13',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox13').data( 'number', 14).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice14',
		  hoverClass: 'hovered',
		  drop: handleCardDrop
		} );
		
	$('#leftbox14').data( 'number', 15).appendTo( '#cardSlots' ).droppable( {
		  accept: '#slice15',
		  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 || cardNumber == 5  || cardNumber == 9 || cardNumber == 15  || cardNumber == 12 || cardNumber == 15){
	document.getElementById('good').play();
	}
	
	if (cardNumber == 2 || cardNumber == 6 || cardNumber == 8  || cardNumber == 10 || cardNumber == 13){
	document.getElementById('good1').play();
	}
	
	if (cardNumber == 3 || cardNumber == 4 || cardNumber == 7 || cardNumber == 11 || cardNumber == 14){
	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 == 15 ) {
	  $('#cardSlots').hide();
	    $('#instructions').hide();
		  $('#resetBt').hide();
	  $('#cardPile').hide();
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '100px',
      top: '50px',
      width: '1000px',
      height: '600px',
      opacity: 1
    } );
  }
 }
