var DragRegObserver = Class.create();
DragRegObserver.prototype = {
  initialize: function(element) {
    this.element = $(element);
  },
  onStart: function() {},
  onEnd: function (eventName, draggable, event) {
    if (Draggables.activeDraggable.element == this.element) {
      elem = draggable.element;
      new Ajax.Request(BaseUrl + 'savepos/' + elem.id + 
                       '/' + elem.style.top + '/' + elem.style.left);
    }
  }
}

function new_ZIndex() {
  cur_index = $$('.draggable').map(function(d) { return d.getStyle("z-index") }).max();
  return parseInt(cur_index) + 1
}

function setup_draggable(id) {
  drag = new Draggable(id, { scroll: window });
  old_endeffect = drag.options.endeffect;
  drag.options.endeffect = function(element) { 
    old_endeffect(element); 
    element.style.zIndex = new_ZIndex();
  }
  Draggables.addObserver(new DragRegObserver($(id)));
  $(id).appear({duration: 2.0});
}

function move_draggable_if_needed(id, left, top) {
  if ($(id).style.left != left || $(id).style.top != top) {
    var actDrag = Draggables.activeDraggable;
    if (!actDrag || actDrag.element != $(id)) {
      new Effect.Move(id, { x: left, y: top, mode: 'absolute' });
    }
  }
}

var pu = null;
function setup_pu() {
  if (!pu) {
    pu = new Ajax.PeriodicalUpdater('', BaseUrl + "current/", {
           method: 'get',
           frequency: 5,
           evalJSON: 'force',
           onSuccess: function(t) { 
             var json = t.responseJSON;
             if (json) {
               $H(json).each(function(pair) {
                 move_draggable_if_needed(pair.key, pair.value[0],
                                                    pair.value[1]);
               });
             }
           },
           onFailure: function() { alert("Something went wrong!") }
         });
  }
}