$(document).ready(function(){
var flag="recover";

function to_recover()
{
	if (flag=="recover") return false;
	flag = "recover";
	$('#selector_inner').attr('class','to_protect');
	$('#selector_btn').appendTo('#selector_parent_l').css('left','0px');	
		if ($.browser.msie)
	{
		$('#protect').parent().hide();
		$('#recover').parent().show();
	}
	else
	{
		$('#protect').parent().fadeOut('fast', function(){
													$('#recover').parent().fadeIn();
											})
	}
}

function to_protect()
{
	if (flag=="protect") return false;
	flag = "protect";
	$('#selector_inner').attr('class','to_recover');
	$('#selector_btn').appendTo('#selector_parent_r').css('left','0px');
	if ($.browser.msie)
	{
		$('#recover').parent().hide();
		$('#protect').parent().show();
	}
	else
	{
		$('#recover').parent().fadeOut('fast', function(){
														$('#protect').parent().fadeIn();
						})
	}
}

$('#selector_btn').draggable({	
			//	connectToSortable: ".selector_pos",
				revert: "invalid",
				axis: 'x' ,
				opacity: 1,
				snap: false,
				helper: 'original',
				cursor: 'move',
				snapMode : 'both',
				containment : '#selector_inner'
				
			});


			$('.selector_pos').droppable({				
				accept: '#selector_btn',
				revert: true,
				addClasses: false,
				greedy: true,
				hoverClass: 'ui-state-highlight',
				drop: function(ev, ui) {
					if ($(this).attr('id')=='selector_parent_r')
					{
						
						to_protect();
					}
					else
					{
						to_recover();	
					}
					
				}
			});	


$(' #to_recover').bind('click', function()
{
	to_recover();
	
	return false;
});

$(' #to_protect').bind('click', function()
{
	to_protect();
	return false;
});
	
$('#selector_inner').bind('click', function()
{
	if (flag=="protect")
		to_recover();
	else
		to_protect();
	return false;
});
	
});