$(function()
{

	var top;
	var left;
	var dataValue;
	var cloneText;
	var zindex = 100;
	var answer = [4,10,7,6];
	var boxes = [0,0,0,0];

	for (var i = 0; i <=9; i++)
	{
		left = 210+(i*57);
		top = 555;
		$('main').append('<div style="left:'+left+'px;top:'+top+'px;" class="textbox" data-dropped="0" data-value="'+(i+1)+'">'+(i+1)+'</div>');
	}

	$(".textbox").draggable({ revert: true, helper: 'clone'});

	$(".target").droppable({
	tolerance: "pointer",
        drop: function(event, ui) {

		if (ui.draggable.data('dropped') === 0)
		{
			top = $(this).position().top + ($(this).height() / 2) - (ui.draggable.height() / 2);
			left = $(this).position().left + ($(this).width() / 2) - (ui.draggable.width() / 2);
			dataValue = ui.draggable.data('value');
			cloneText = ui.draggable.text();
			ui.helper.remove();
			if ($('.droppat'+$(this).data("value")).data('dropped') === 1) $('.droppat'+$(this).data("value")).remove();

			$('main').append('<div data-value="'+dataValue+'" data-dropped="1" style="position: absolute; top: '+top+'px; left: '+left+'px;" class="textbox bg clone droppat'+$(this).data("value")+'">'+cloneText+'</div>');
			$('.clone').draggable({
				start: function(){
					zindex++;
					$(this).css('z-index',zindex);
				}
				});
			boxes[$(this).data('value')] = ui.draggable.data('value');
		}

		},
	out: function(event, ui) {
			if (ui.draggable.data('dropped') === 1)
			{

				ui.draggable.data('dropped',0);
				boxes[$(this).data('value')]= 0;
			}
		}

	});

	$('.footer_game .check').click(function(e){

	if (answer.toString() === boxes.toString()) {
		$('#jplayer_well').jPlayer('play');
		} else $('#jplayer_wrong').jPlayer('play');
	});

});