/***************************************
*                                      *
* Author: Antoine Quint                *
* Article: Doing that drag thang       *
* Date: 24/02/2002                     *
*                                      *
***************************************/

// pointer to the root of the document
var root = document.documentElement;

// pointers to SVG elements we will access
var background = root.getElementById("background");
var target = root.getElementById("target");
var frame = root.getElementById("frame");
var filtered = root.getElementById("filtered");
var text = root.getElementById("text");

// SVGPoint to keep track of the offset of the dragging session
var offset = root.createSVGPoint();

// called on starting the drag
function initDrag () {
  // track the origin
  var matrix = target.getCTM();
  // get the relative position
  var mouse = getMouse(evt);
  offset.x = matrix.e - mouse.x;
  offset.y = matrix.f - mouse.y;
  // sets the new pointer-events
  target.style.setProperty('pointer-events', 'none');
  background.style.setProperty('pointer-events', 'all');
  // sets the style changes
  filtered.style.setProperty('filter', 'none');
  text.style.setProperty('display', 'none');
}

// called on dragging
function drag () {
  // gets the pointer position
  var mouse = getMouse(evt);
  var x = mouse.x + offset.x;
  var y = mouse.y + offset.y;
  // updating the matrix
  target.setAttribute('transform', 'translate(' + x + ',' + y + ')');
}

// called on finishing the drag
function endDrag () {
  // resets the pointer-events
  target.style.setProperty('pointer-events', 'all');
  background.style.setProperty('pointer-events', 'none');
  // reverts the style changes
  filtered.style.setProperty('filter', 'url(#dropShadow)');
  text.style.setProperty('display', 'inline');
}

// returns the mouse coordinates as an SVGPoint
function getMouse (evt) {
  var position = root.createSVGPoint();
  position.x = evt.clientX;
  position.y = evt.clientY;
  return position;
}