var correctcoords = 0;
$( init );

function init() {
 
 	$("#messages").html("Drag the coordinates to the correct location");
 
	$('#successMessage').hide();
	$('#successMessage').css( {
		left: '580px',
		top: '250px',
		width: 0,
		height: 0
	} );

	/* RESET */

	$( "#reset" ).hover(
	  function() {
		$( this ).css("background-image", "url(images/resetgraphbutton-01hover.jpg)");		
	  }, function() {
		$( this ).css("background-image", "url(images/resetgraphbutton-01.jpg)");
	  }
	);	

	correctcoords = 0;
	$('#coordpile').html( '' );
	$('#coordslots').html( '' );

	var numbers = [ 1, 2, 3, 4, 5, 6 ]; 
	var words = [ 'P', 'Q', 'R', 'S', 'T', 'U'];
	var coords = [ "2,3","-2,1","-3,3","-1,-2","0,-3","3,-1"];

	/* CREATE COORDS */ 
	
	for ( var i=0; i<6; i++ ) {
		$('<div class="label1" id="coord'+(i+1)+'"><div class="label2">'+words[i]+'</div><div class="label3">('+coords[i]+')</div></div>')
		.data( 'number', numbers[i] ).attr( 'id', 'coord'+numbers[i] ).appendTo( '#coordpile' ).draggable( {
			start:handlestart,
			containment: '#content',
			stack: '#coordpile div',
			cursor: 'move',
			revert: true
			}).mouseup(function() {
				$("#messages").html("Incorrect!");
			})
	}

	/* CREATE SLOTS */

	for ( var i=1; i<=6; i++ ) {
		$('<div id="slot'+i+'"></div>').data( 'number', i ).appendTo( '#coordslots' ).droppable( {
			accept: '#coordpile div',
			hoverClass: 'hovered',
			drop: handleCardDrop
		} );
		}
	}

	function handlestart(){
		$("#messages").html("");
	}

	function handleCardDrop( event, ui ) {
		var slotNumber = $(this).data( 'number' );
		var cardNumber = ui.draggable.data( 'number' );
		
		if ( slotNumber == cardNumber ) {
			ui.draggable.addClass( 'correct' );
			ui.draggable.draggable( 'disable' );
			$(this).droppable( 'disable' );			
			ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
			ui.draggable.draggable( 'option', 'revert', false );
			$("#messages").html("Correct!");
			correctcoords++;
		}  
	
	/* SUCCESS */
	
		if ( correctcoords == 6 ) {
			$("#messages").html("Congratulation, you're finished!");
		}

	}
