// JavaScript Document
function bindDropEvent(e, element) {
	e.preventDefault();
	var btn = $('<div class="activity-close"></div>');
	$(btn).click(function() {
		var origin = $(this).parent().attr('rel');
		$(this).parent().removeClass('activity-dropped');
		$(this).parent().bind('touchstart', function(e) {
			bindDropEvent(e, this);
		});
		$('#'+origin).append($(this).parent());	
		$(this).remove();
	});
	$(element).removeAttr('style');
	$(element).appendTo('#drop_area');
	//$(ui.draggable).css('background-color','#0099cc').css('background-image','none');
	$(element).addClass('activity-dropped');
	$(element).append(btn);
	$(element).unbind('touchstart');
	$('#submit-button').addClass('activebutton').removeAttr('disabled');
	$(element).css('background-image','none');
}
$(function(){
	var webpath = $('#const_webpath').val();
	$('#tabs').tabs();
	$('.activity').draggable({ 
		revert: 'invalid', 
		scope: 'activity', 
		containment: '#content', 
		helper: 'clone'
	});
	if ($.support.touch) {
		$('.activity').bind('touchstart', function(event) {
			bindDropEvent(event, this);
		});		
	}
	$("#drop_area").droppable({
		hoverClass: 'droparea-active',
		drop: function(event, ui) {
			bindDropEvent(event, ui.draggable);
		},
		scope: 'activity',
		tolerance: 'fit',
		accept: '.activity'
	});
	$('.tab').droppable({
		hoverClass: 'droparea-active',
		drop: function(event, ui) {

		},
		scope: 'activity',
		accept: '.activity'
	});
	$('#submit-button').click(function(){
		var activities = '';
		$("#drop_area .activity").each(function(){
			activities+=$(this).attr('id')+',';		
		});	
		$('#ipt_activity').val(activities);
		$('#go').submit();
	});
	$('.activity').mousedown(function(){
		$(this).addClass('activity-grab');				   
	});
});