var points2points = null;


function onLoad() {

}

function isOccupied(el) {
  var p = coords(el);
  var b = points2points[p.getY()][p.getX()];
  return b;
}

function Point(x,y) {
  var _x = x;
  var _y = y;
  return {
    getX: function() {return _x;},
      getY: function() {return _y;},
      toString: function() {return "(" + _x + "," + _y + ")";}
  };
}

function coords(el) {
  var id = $(el).id;
  var parts = id.split(/_/);
  var x = parts[parts.length-2];
  var y = parts[parts.length-1];
  return new Point(x,y);
}

function move(el,x,y) {
  var p = coords(el);
  var px = p.getX()-x;
  var py = p.getY()-y;
  new Effect.Move(el, { x:px, y:py, mode: 'absolute' });
}

function makeSquare(imgId,divId) {
  if (!points2points) {
    points2points = new Array();
    for (var i=0; i<N; i++) {
      points2points.push(new Array(N));
    } 
  }
  var img = $(imgId);
  var parts = imgId.split(/_/);
  var x = parts[parts.length-2];
  var y = parts[parts.length-1];
  var p = new Point(x,y);
  points2points[y][x] = p;
  var div = $(divId);
  new Draggable(img);
  Droppables.add(div, {
      onDrop: function(draggable,droparea) {
	var p
	if (isOccupied(droparea)) {
	  p = coords(draggable);
	} else {
	  p = coords(droparea);
	}
	move(draggable,p.getX(),p.getY());
	  
      }
    });
  
}