Ext.onReady(function() {
    // Create an object that we'll use to implement and override drag behaviors a little later
    var overrides = {
        // Called the instance the element is dragged.
        b4StartDrag : function() {
            // Cache the drag element
            if (!this.el) {
                this.el = Ext.get(this.getEl());
            }
            
            //Cache the original XY Coordinates of the element, we'll use this later.
            this.originalXY = this.el.getXY();
        },
        // Called when element is dropped not anything other than a dropzone with the same ddgroup
        onInvalidDrop : function() {
            // Set a flag to invoke the animated repair
            this.invalidDrop = true;
        },
        // Called when the drag operation completes
        endDrag : function() {
            // Invoke the animation if the invalidDrop flag is set to true
            if (this.invalidDrop === true) {
                // Remove the drop invitation
                this.el.removeCls('dropOK');
                
                // Create the animation configuration object
                var animCfgObj = {
                    easing   : 'elasticOut',
                    duration : 1,
                    scope    : this,
                    callback : function() {
                        // Remove the position attribute
                        this.el.dom.style.position = '';
                    }
                };
                
                // Apply the repair animation
                this.el.setXY([this.originalXY[0], this.originalXY[1]], animCfgObj);
                delete this.invalidDrop;
            }
        },
        // Called upon successful drop of an element on a DDTarget with the same
        onDragDrop : function(evtObj, targetElId) {
            // Wrap the drop target element with Ext.Element
            var dropEl = Ext.get(targetElId);
            
            // Perform the node move only if the drag element's
            // parent is not the same as the drop target
            if (this.el.dom.parentNode.id != targetElId) {
                
                // Move the element
                dropEl.appendChild(this.el);
                
                // Remove the drag invitation
                this.onDragOut(evtObj, targetElId);
                
                // Clear the styles
                this.el.dom.style.position ='';
                this.el.dom.style.top = '';
                this.el.dom.style.left = '';
            }
            else {
                // This was an invalid drop, initiate a repair
                this.onInvalidDrop();
            }
        },
        // Only called when the drag element is dragged over the a drop target with the same ddgroup
        onDragEnter : function(evtObj, targetElId) {
            // Colorize the drag target if the drag node's parent is not the same as the drop target
            if (targetElId != this.el.dom.parentNode.id) {
                this.el.addCls('dropOK');
            }
            else {
                // Remove the invitation
                this.onDragOut();
            }
        },
        // Only called when element is dragged out of a dropzone with the same ddgroup
        onDragOut : function(evtObj, targetElId) {
            this.el.removeCls('dropOK');
        }
    };

    // Configure the cars to be draggable
    var carElements = Ext.get('cars').select('div');
    Ext.each(carElements.elements, function(el) {
        var dd = Ext.create('Ext.dd.DD', el, 'carsDDGroup', {
            isTarget  : false
        });
        //Apply the overrides object to the newly created instance of DD
        Ext.apply(dd, overrides);
    });

    var truckElements = Ext.get('trucks').select('div');
    Ext.each(truckElements.elements, function(el) {
        var dd = Ext.create('Ext.dd.DD', el, 'trucksDDGroup', {
            isTarget  : false
        });
        Ext.apply(dd, overrides);
    });
    
    // Instantiate instances of Ext.dd.DDTarget for the cars and trucks container
    var carsDDTarget = Ext.create('Ext.dd.DDTarget', 'cars','carsDDGroup');
    var trucksDDTarget = Ext.create('Ext.dd.DDTarget', 'trucks', 'trucksDDGroup');

    // Instantiate instnaces of DDTarget for the rented and repair drop target elements
    var rentedDDTarget = Ext.create('Ext.dd.DDTarget', 'rented', 'carsDDGroup');
    var repairDDTarget = Ext.create('Ext.dd.DDTarget', 'repair', 'carsDDGroup');

    // Ensure that the rented and repair DDTargets will participate in the trucksDDGroup
    rentedDDTarget.addToGroup('trucksDDGroup');
    repairDDTarget.addToGroup('trucksDDGroup');

});