var LEFT = new Array();
var RIGHT = new Array();

$(function() {
	$("div[id^=draggable_]").draggable();
	
    $( "#left_drop" ).droppable({
        drop: function( event, ui ) {
        	$(ui.draggable).hide();
        	
        	var row = new Object();
        	
        	row.id = $(ui.draggable).hide().attr('id').split("_")[1];
        	row.value = $(ui.draggable).find('input').val();
        	row.name = $(ui.draggable).find('#name').html();
        	row.date = $(ui.draggable).find('#date').html();
        	
        	LEFT.push(row);
        	DrawLeftTable();
        }
      });
  
    $( "#right_drop" ).droppable({
        drop: function( event, ui ) {
        	$(ui.draggable).hide();
        	
        	var row = new Object();
        	
        	row.id = $(ui.draggable).hide().attr('id').split("_")[1];
        	row.value = $(ui.draggable).find('input').val();
        	row.name = $(ui.draggable).find('#name').html();
        	row.date = $(ui.draggable).find('#date').html();
        	
        	RIGHT.push(row);
        	DrawRightTable();
        }
      });
});

function DrawLeftTable() {
	//clear data
	$("#left_site").empty();
	
	for (var i=0; i<LEFT.length; i++) {
		var row = '<tr style="width: 100%"><td style="width: 34%;">'+LEFT[i].name+'</td><td style="width: 33%;">'+LEFT[i].date+'</td><td style="width: 33%;">'+LEFT[i].value+'</td></tr>';
		$("#left_site").append(row);
	}
}

function DrawRightTable() {
	//clear data
	$("#right_site").empty();
	
	for (var i=0; i<LEFT.length; i++) {
		var row = '<tr style="width: 100%"><td style="width: 34%;">'+LEFT[i].name+'</td><td style="width: 33%;">'+LEFT[i].date+'</td><td style="width: 33%;">'+LEFT[i].value+'</td></tr>';
		$("#right_site").append(row);
	}
}