$(document).ready(
	function() {
		
		var top_shape = 2;
				
		$('div.shape').each(																		
			function() {
				var shape_id = $(this).attr('id');
				target_id = shape_id + "_target";
								
				$(this).draggable({
					snap: 'div#' + target_id,
					snapMode: 'inner',
					snapTolerance: 20
				})
				.mousedown(
					function() {
						$(this).css('z-index', top_shape);
						top_shape = top_shape + 1;
						$(this).children('img').attr({
							"src" : "images/floaters/shapes/" + shape_id + "-shadow.png"
						})
					}
				).mouseup(
					function() {
						$(this).children('img').attr({
							"src" : "images/floaters/shapes/" + shape_id + "-regular.png"
						})
					}
				);
				
			}
		)

			
		('div.target').each(																		
			function() {
				var element_id = $(this).attr('id');
				element_id = element_id.split("_");
				element_id = element_id.shift();
				
				$(this).droppable({
					drop: function() {
						$(this).addClass('ui-state-highlight').find('span').html('Click!');
						$('div#' + element_id + ' img').addClass('ui-state-dropped')
					},
					accept: 'div#' + element_id,
					hoverClass: 'drophover'
				})
			}
		);

	}
	
);