$(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 = 10;
	top = 10 + (i*38);

		if (i>10)
		{
			left = 50;
			top = 10 + ((i-11)*38);
		}

	$('main').append('<div style="left:'+left+'px;top:'+top+'px;" class="textbox back dragg" data-dropped="0" data-value="'+i+'">'+i+'</div>');

	}
	$('main').append('<div style="left:50px;top:'+(top+38)+'px;" class="textbox back dragg" data-dropped="0" data-value=">">></div>');
	$('main').append('<div style="left:90px;top:'+(top+38)+'px;" class="textbox back dragg" data-dropped="0" data-value="<"><</div>');



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


	$(".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;
				}
			}
		};




	$(".targetBig").droppable({
        accept: ".wieza",
	drop: drop,
	out: out
	});

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


	$( ".check" ).click(function() {

		if(boxes[0] === 13  && boxes[1] === 7 && boxes[2] === 13 && boxes[3] === 7 && boxes[4] === '>') $('#jplayer_well').jPlayer('play');
			else $('#jplayer_wrong').jPlayer('play');
	});
});