function DragAndDrop() {
}
DragAndDrop.prototype.Setup = function(className, type) {
    jQuery("." + className).draggable({
        cursor: 'pointer',
        revert: true,
        start: function(event, ui) {
            this.style.border = "2px solid black";
        },
        stop: function(event, ui) {
            this.style.border = "";
        }
    });

    jQuery("." + className).droppable({
        drop: function(event, ui) {
            var dspr = this.getElementsByTagName("em")[0].innerText;
            var dspr1 = ui.draggable.context.getElementsByTagName("em")[0].innerText;

            if (type == "project") {
                jQuery.getJSON("../handlers/PhotoRestHandler.ashx/SwapPhoto",
                { srcHref: this.getElementsByTagName("a")[0].id, srcDspr: dspr,
                    srcHref1: ui.draggable.context.getElementsByTagName("a")[0].id, srcDspr1: dspr1,
                    type: type
                });
            }
            else if (type == "group") {
                jQuery.getJSON("../handlers/PhotoRestHandler.ashx/SwapPhoto",
                { srcHref: this.getElementsByTagName("a")[0].href, srcDspr: dspr,
                    srcHref1: ui.draggable.context.getElementsByTagName("a")[0].href, srcDspr1: dspr1,
                    type: type
                });
            }

            var idx = dspr.indexOf(".");
            var idxNbr = dspr.substr(0, idx);
            var idx1 = dspr1.indexOf(".");

            dspr = dspr1.substr(0, idx1) + dspr.substr(idx);
            dspr1 = idxNbr + dspr1.substr(idx1);

            var buf = this.innerHTML;
            this.innerHTML = ui.draggable.context.innerHTML;
            ui.draggable.context.innerHTML = buf;

            this.getElementsByTagName("em")[0].innerText = dspr1;
            ui.draggable.context.getElementsByTagName("em")[0].innerHTML = dspr;
        }
    })
}