$(function()
	{
	var elements = [];
	for(var i=1;i<=16;++i)
	{
		elements[i-1] = i;
	}
	var positions = [
		[-82,-38],[52,-38],[185,-38],[318,-38],
		[-82,100],[52,100],[185,100],[318,100],
		[-82,235],[52,235],[185,235],[318,235],
		[-82,370],[52,370],[185,370],[318,370],
	];
	var turn = 0;


function makeTurn(){
	$('.wrapper').addClass('turn'+turn);
	if (turn < 2)
	{

		var count = 0;
		$.each(_.shuffle(elements),function(index,value)
			{
			$('.elements').append('<div style="position: absolute; right: '+positions[count][0]+'px; top: '+positions[count][1]+'px;" class="element_'+value+'" data-element="'+value+'"/>');
			count++;

			});

		$('.elements > *').each(function()
			{
			var $this = $(this);

			$this.draggable(
				{
				cursor: 'move',
				opacity: .7,
				stack: '.elements > *',
				scope: $this.data('element')
				});
			});

		var counter = 0;

		$('.boxes > *').each(function()
			{
			var $this = $(this);

			$this.droppable(
				{
				accept: $('.elements > *'),
				addClasses: false,
				scope: $this.data('kind'),

				drop: function(event,ui)
					{
					++counter;

					$(event.target).addClass('ok').droppable('destroy');
					$(event.target).css('background', '');
					if(!$("html").hasClass("ie8") ) {
						ui.helper.draggable('destroy').remove();
					};
					if (counter === 16)
					{
						$('.boxes > *').removeClass('ok').css('background','none');
						turn++;
						makeTurn();
					}
					}
				});
			});

		$('a.hint').click(function(e)
			{
			e.preventDefault();
			$('div.hint').fadeToggle();
			});
	}
	else
	{
	$('main > *:not(.turn2)').fadeOut(500,function(){$(this).remove();$('.turn2').fadeIn()})

	var boxes = [1,0];
	var top = 0;
	var left = 0;

	$('.dragg').draggable({stack:'.dragg'});


		$('.target').droppable(
				{
				addClasses: true,
				drop: function(event,ui)
					{
					if (ui.draggable.data('dropped') === 0)
						{
							ui.draggable.data('dropped',1);
							top = $(this).position().top + ($(this).height() / 2) - (ui.draggable.height() / 2 );
							left = $(this).position().left + ($(this).width() / 2) - (ui.draggable.width() / 2);
							$('.droppat'+$(this).data("value")).animate({top:"-=100px",duration: 500, easing: 'easeOutBounce'})
								.removeClass('droppat'+$(this).data("value"))
								.data('dropped',0)
								.removeClass('droppat'+$(this).data("value"))

							ui.draggable.animate({left:left, top:top},{duration: 500, easing: 'easeOutBounce'})
								.addClass('droppat'+$(this).data("value"));
							boxes[$(this).data('value')] = ui.draggable.data('value');
							if ($.grep(boxes, function( n, i ) {return n === 0;}).length === 0)
							{
								if ('1,2' === boxes.toString())
								{
								$('#jplayer_well').jPlayer('play');
								}
								else
								{
									$('#jplayer_wrong').jPlayer('play');
									for (var i = 0; i <=1; i++)
									{
										boxes[i] = 0;
										$('.droppat'+i)
											.css('color','red')
											.animate({top:'-=100'},1000,function(){$(this).css('color','')})
											.removeClass('droppat'+i)
											.data('dropped',0);
									}
								}
							}
						}
					},
					out: function(event, ui) {
						if (ui.draggable.data('dropped') === 1)
						{
							ui.draggable.removeClass('droppat'+$(this).data("value"));
							ui.draggable.data('dropped',0);
							boxes[$(this).data('value')] = 0;
						}
					}
				});
		}

}
makeTurn();

});
