bsw/jbe@5: window.addEventListener("load", function(event) {
bsw/jbe@5:   var originalElement;
bsw/jbe@5:   var draggedElement;
bsw/jbe@5:   var mouseX;
bsw/jbe@5:   var mouseY;
bsw/jbe@5:   var mouseOffsetX;
bsw/jbe@5:   var mouseOffsetY;
bsw/jbe@5:   var elementOffsetX;
bsw/jbe@5:   var elementOffsetY;
bsw/jbe@5:   var dropFunc;
bsw/jbe@5:   var dragElement = function(element, func) {
bsw/jbe@5:     //if (typeof(element) == "string") element = document.getElementById(element);
bsw/jbe@5:     originalElement = element;
bsw/jbe@5:     draggedElement = originalElement.cloneNode(true);
bsw/jbe@5:     originalElement.style.visibility = "hidden";
bsw/jbe@5:     draggedElement.style.margin = 0;
bsw/jbe@5:     draggedElement.style.position = "absolute";
bsw/jbe@5:     draggedElement.style.left = elementOffsetX = originalElement.offsetLeft;
bsw/jbe@5:     draggedElement.style.top  = elementOffsetY = originalElement.offsetTop;
bsw/jbe@5:     draggedElement.style.width  = originalElement.clientWidth;
bsw/jbe@5:     draggedElement.style.height = originalElement.clientHeight;
bsw/jbe@5:     draggedElement.style.backgroundColor = "#eee";
bsw/jbe@5:     draggedElement.style.opacity = 0.8;
bsw/jbe@5:     originalElement.offsetParent.appendChild(draggedElement);
bsw/jbe@5:     // workaround for wrong clientWidth and clientHeight information:
bsw/jbe@5:     draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth;
bsw/jbe@5:     draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight;
bsw/jbe@5:     mouseOffsetX = mouseX;
bsw/jbe@5:     mouseOffsetY = mouseY;
bsw/jbe@5:     dropFunc = func;
bsw/jbe@5:   };
bsw/jbe@5:   window.addEventListener("mousemove", function(event) {
bsw/jbe@5:     mouseX = event.pageX;
bsw/jbe@5:     mouseY = event.pageY;
bsw/jbe@5:     if (draggedElement) {
bsw/jbe@5:       draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX;
bsw/jbe@5:       draggedElement.style.top  = elementOffsetY + mouseY - mouseOffsetY;
bsw/jbe@5:     }
bsw/jbe@5:   }, true);
bsw/jbe@5:   var mouseDrop = function(event) {
bsw/jbe@5:     if (draggedElement) {
bsw/jbe@5:       dropFunc(
bsw/jbe@5:         originalElement,
bsw/jbe@5:         elementOffsetX + mouseX - mouseOffsetX,
bsw/jbe@5:         elementOffsetY + mouseY - mouseOffsetY
bsw/jbe@5:       );
bsw/jbe@5:       originalElement.style.visibility = '';
bsw/jbe@5:       draggedElement.parentNode.removeChild(draggedElement);
bsw/jbe@5:       originalElement = null;
bsw/jbe@5:       draggedElement = null;
bsw/jbe@5:     }
bsw/jbe@5:   };
bsw/jbe@5:   window.addEventListener("mouseup",   mouseDrop, true);
bsw/jbe@5:   window.addEventListener("mousedown", mouseDrop, true);
bsw/jbe@5:   var elements = document.getElementsByTagName("*");
bsw/jbe@5:   for (var i=0; i<elements.length; i++) {
bsw/jbe@5:     var element = elements[i];
bsw/jbe@5:     if (element.className == "movable") {
bsw/jbe@5:       element.addEventListener("mousedown", function(event) {
bsw/jbe@5:         event.target.style.cursor = "move";
bsw/jbe@5:         dragElement(event.currentTarget, function(element, dropX, dropY) {
bsw/jbe@6:           event.target.style.cursor = '';
bsw/jbe@5:           elementDropped(element, dropX, dropY);
bsw/jbe@5:         });
bsw/jbe@5:         event.preventDefault();
bsw/jbe@5:       }, false);
bsw/jbe@5:     } else if (element.className == "clickable") {
bsw/jbe@5:       element.addEventListener("mousedown", function(event) {
bsw/jbe@5:         event.stopPropagation();
bsw/jbe@5:       }, false);
bsw/jbe@5:     }
bsw/jbe@5:   }
bsw/jbe@5: }, false);