$(function()
{

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

	var sounds = ['alt','tenor'];
	var i = 0;
	for(i=0;i<=1;++i)
		{
		$('#jplayer_sound'+i).jPlayer(
			{
			ready: function()
				{
				$(this).jPlayer('setMedia', {mp3: './media/'+sounds[$(this).data('value')]+'.mp3'});
				},

			play: function()
				{
				$(this).jPlayer('pauseOthers');
				},

			swfPath: '../../styles/flash',
			supplied: 'mp3'
			});
		}


	$(".textbox").draggable({ stack: '.textbox'});

	$('.target').droppable(
			{
			addClasses: false,
			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);
						ui.draggable.data('dropped',1);

						$('.droppat'+$(this).data("value"))
							.removeClass('droppat'+$(this).data("value"))
							.data('dropped',0)
							.animate({top:"+=90px"},{duration: 500, easing: 'easeOutBounce'});

						ui.draggable
							.addClass('droppat'+$(this).data("value"))
							.animate({left:left, top:top},{duration: 500, easing: 'easeOutBounce'});

						boxes[$(this).data('value')] = ui.draggable.text();

						if ($.grep(boxes, function (n, i) {
							return n === 0;
						}).length === 0)
						{

							if ('A,L,T,T,E,N,O,R' === boxes.toString())
							{
								$('.nuty').fadeIn();
								$('#jplayer_well').jPlayer('play')
							} else
								$('#jplayer_wrong').jPlayer('play');
						}

					}
				},
				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;
					}
				}
			});

	$('.nuty').click(function(){
		$('#jplayer_sound'+$(this).data('value')).jPlayer('play');
	});


});