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