$(function()
{
	var boxes = [];
	var zindex = 10;
	var left = 0;
	var top = 0;

	$('#jplayer').on($.jPlayer.event.ready,function()
		{
			$('#jplayer').jPlayer('setMedia', {mp3: './media/file2.mp3'});

		});

	for (var i = 0; i <=20; i++)
	{
		left = 30+(i*43);
		top = 450;
		$('main').append('<div style="left:'+left+'px;top:'+top+'px;" class="textbox dragg" data-dropped="0" data-value="'+i+'">'+i+'</div>');
	}


	$(".dragg").draggable({
		start: function(){
					zindex++;
					$(this).css('z-index',zindex);
				}
	});

	var drop = function(event, ui) {

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

	var out = function(event, ui) {
		if (ui.draggable.data('dropped') === 1)
		{
			ui.draggable.data('dropped',0);

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


	$(".target").droppable({
        accept: ".dragg",
	drop: drop,
	out: out
	});

	$('.btn').click(function(){
		if ($(this).data('value') === 'ok' && boxes[0] === 8 && boxes[1] === 12) $('#jplayer_well').jPlayer('play');
			else $('#jplayer_wrong').jPlayer('play');
	});

});