(function() {

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

//////////////////////////////////////////////////////////////////////////////
// example app
//////////////////////////////////////////////////////////////////////////////
YAHOO.example.DDApp = {
	init: function() {
		new YAHOO.util.DDTarget("firstlist");
		new YAHOO.util.DDTarget("secondlist");
		new YAHOO.util.DDTarget("thirdlist");
		new YAHOO.example.DDList("image_1");
		new YAHOO.example.DDList("image_2");
		new YAHOO.example.DDList("image_3");
		new YAHOO.example.DDList("image_4");
		new YAHOO.example.DDList("image_5");
		new YAHOO.example.DDList("image_6");
		new YAHOO.example.DDList("image_7");
		new YAHOO.example.DDList("image_8");
		new YAHOO.example.DDList("image_9");
		new YAHOO.example.DDList("image_10");
		new YAHOO.example.DDList("image_11");
		new YAHOO.example.DDList("image_12");
	}
};

//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////

YAHOO.example.DDList = function(id, sGroup, config) {

    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);

    this.logger = this.logger || YAHOO;
    var el = this.getDragEl();
    //
    // Begin changed code - Add a handle
    // var handleName = this.getEl().getElementsByTagName('span')[0];
    // YAHOO.util.Dom.generateId(handleName);
    // this.setHandleElId(handleName.id);
    var handleName = this.id + "-handle";
    this.setHandleElId(handleName);
    //
    // End changed code - Add a handle
    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent

    this.goingUp = false;
    this.lastY = 0;
};

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

    startDrag: function(x, y) {
        this.logger.log(this.id + " startDrag");

        // make the proxy look like the source element
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        // Dom.setStyle(clickEl, "visibility", "hidden");
	// dragEl.innerHTML = clickEl.innerHTML;

        Dom.setStyle(dragEl, "border", "2px dashed #333333");
        Dom.setStyle(dragEl, "backgroundColor", "#ffffff");
    },

    recordDrag: function(id){
        alert('record drag');
	    var movedelementid=this.getEl().id;
 	    var div=Dom.get(id);
            var items = div.getElementsByTagName("div");
            var out = "";
	    for (i=0;i<items.length;i=i+1) {
		if (items[i].id.substring(0,5)=='image') {
                	 out += "~" + items[i].id;
	 		}
        	    }
      		var url='default.aspx?reorder=Y&List='+id+'&SOURCE=' + movedelementid + "&NEWLIST=" & out;
	        var ajax = new Ajax.Request(url,{
                method: 'post'});

    },

    endDrag: function(e) {

        var srcEl = this.getEl();
        var proxy = this.getDragEl();

        // Show the proxy element and animate it to the src element's location
        Dom.setStyle(proxy, "visibility", "");
        var a = new YAHOO.util.Motion(
            proxy, {
                points: {
                    to: Dom.getXY(srcEl)
                }
            },
            0.2,
            YAHOO.util.Easing.easeOut
        )
        var proxyid = proxy.id;
        var thisid = this.id;

        // Hide the proxy and show the source element when finished with the animation
        a.onComplete.subscribe(function() {
                Dom.setStyle(proxyid, "visibility", "hidden");
                Dom.setStyle(thisid, "visibility", "");
            });
        a.animate();
    },

    onDragDrop: function(e, id) {

        // If there is one drop interaction, the li was dropped either on the list,
        // or it was dropped on the current location of the source element.
        if (DDM.interactionInfo.drop.length == 1) {

            // The position of the cursor at the time of the drop (YAHOO.util.Point)
            var pt = DDM.interactionInfo.point;

            // The region occupied by the source element at the time of the drop
            var region = DDM.interactionInfo.sourceRegion;

            // Check to see if we are over the source element's location.  We will
            // append to the bottom of the list once we are sure it was a drop in
            // the negative space (the area of the list without any list items)
            if (!region.intersect(pt)) {
                var destEl = Dom.get(id);
                var destDD = DDM.getDDById(id);
                destEl.appendChild(this.getEl());
                destDD.isEmpty = false;
                DDM.refreshCache();
            }

	    var movedelementid=this.getEl().id;
 	    var div=Dom.get(id);
            var items = div.getElementsByTagName("div");
            var out = "";
	    for (i=0;i<items.length;i=i+1) {
		if (items[i].id.substring(0,5)=='image') {
                	 out += "~" + items[i].id;
	 		}
        	    }
      		var url='default.aspx?reorder=Y&List='+id+'&SOURCE=' + movedelementid + '&NEWLIST=' + out;
	        var ajax = new Ajax.Request(url,{
                method: 'post'});
        }
    },

    onDrag: function(e) {

        // Keep track of the direction of the drag for use during onDragOver
        var y = Event.getPageY(e);
        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
        var srcEl = this.getEl();
        var destEl = Dom.get(id);

        // We are only concerned with divitems, we ignore the dragover
        // notifications for the list.
        if (destEl.nodeName.toLowerCase() == "div" && destEl.id.substring(0,5)=='image') {
            var orig_p = srcEl.parentNode;
            var p = destEl.parentNode;


            if (this.goingUp) {
                p.insertBefore(srcEl, destEl); // insert above
            } else {
                p.insertBefore(srcEl, destEl.nextSibling); // insert below
            }
            DDM.refreshCache();
        }
    }
});

Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);

})();