MissActions = {
    JumpBack: 0,
    LeaveAsIs: 1
};
// Ext.override(Ext.dd.DDProxy, {
//     startDrag: function(x, y){
//         var dragEl = Ext.get(this.getDragEl()); // the dragging Proxy
//         var el = Ext.get(this.getEl()); //the Html Element of the DDButton
//         dragEl.update(el.dom.innerHTML);
//         dragEl.setStyle('border', 'none');
//         el.setVisible(false);
//         this.dropHopSpot = null;
//     },
//     onDragEnter: function(e, id){
//         var target = Ext.dd.DragDropMgr.getDDById(id);
//         if (target.DDType == 'HotSpot') {
//             target.HotSpotRef.onDDButtonEnter(this.DDButtonRef);
//         }
//     },
//     onDragOver: function(e, targetId){
//         var target = Ext.dd.DragDropMgr.getDDById(targetId);
//         if (target.DDType == 'HotSpot') {
//             target.HotSpotRef.onDDButtonOver(this.DDButtonRef);
//         }
//     },
//     onDragOut: function(e, targetId){
//         var target = Ext.dd.DragDropMgr.getDDById(targetId);
//         if (target.DDType == 'HotSpot') {
//             target.HotSpotRef.onDDButtonOut(this.DDButtonRef);
//         }
//     },
//     onDragDrop: function(e, targetId){
//         var target = Ext.dd.DragDropMgr.getDDById(targetId);
//         if (target.DDType == 'HotSpot') {
//             var dragEl = Ext.get(this.getDragEl());
//             var el = Ext.get(this.getEl());
//             var pageXY = Author.DisplayManager.BackgroundObject.getContent().getXY();
//             var xy = dragEl.getXY();
//             var left = (xy[0] - pageXY[0]) / Author.zoomRatio;
//             var top = (xy[1] - pageXY[1]) / Author.zoomRatio;
//             this.dropHopSpot = target.HotSpotRef;
//             target.HotSpotRef.onDDButtonDrop(left, top, this.DDButtonRef);
//         }
//     },
//     endDrag: function(){
//         var dragEl = Ext.get(this.getDragEl());
//         var el = Ext.get(this.getEl());
//         var pageXY = Author.DisplayManager.BackgroundObject.getContent().getXY();
//         var xy = dragEl.getXY();
//         var left = (xy[0] - pageXY[0]) / Author.zoomRatio;
//         var top = (xy[1] - pageXY[1]) / Author.zoomRatio;
//         this.DDButtonRef.endDrag(left, top, this.dropHopSpot);
//         el.setVisible(true);
//     }


// });
Ext.define('DDButtonClass15', {
    extend: 'DisplayableAction',
    constructor: function(cfgXML, o, actionSequence) {
        this.Value = null;
        this.MissAction = MissActions.LeaveAsIs;
        this.PictureBox = null;
        this.PictureFileName = null;
        this.PictureWidth = 0;
        this.PictureHeight = 0;
        this.TextBox = null;
        this.TextBlock = null;
        this.Text = "";
        this.TextX = 0;
        this.TextY = 0;
        this.TextPosition = AuthorAlignment.MiddleCenter;
        this.FontColor = '#000000';
        this.FontFamily = 'Arial';
        this.FontSize = 14;
        this.FontWeight = 'Normal';
        this.FontStyle = 'Normal';
        this.TextDecoration = 'none';
        this.OrginalPosition = null;
        this.LastPosition = null;
        this.DropPosition = null;
        this.callParent([cfgXML, o, actionSequence]);
        //start self
        this.Value = XmlHelper.tryGetValue(cfgXML, "value", TryGetValueOption.Normal, '');
        var picFileNameNode = cfgXML.getElementsByTagName("image")[0];
        try {
            this.PictureWidth = parseInt(picFileNameNode.getAttribute('width'));
            this.PictureHeight = parseInt(picFileNameNode.getAttribute('height'));
            this.PictureFileName = picFileNameNode.childNodes[0].nodeValue;
        } catch (err) {}
        this.Text = XmlHelper.getString(cfgXML, "text");
        this.TextX = XmlHelper.getInteger(cfgXML, "textX");
        this.TextY = XmlHelper.getInteger(cfgXML, "textY");
        this.TextPosition = XmlHelper.getInteger(cfgXML, "textPosition");
        this.FontFamily = XmlHelper.getString(cfgXML, "fontFamily");
        this.FontSize = XmlHelper.getFloat(cfgXML, "fontSize");
        this.TextDecoration = XmlHelper.getString(cfgXML, "textDecoration");
        this.FontStyle = XmlHelper.getString(cfgXML, "fontStyle");
        this.FontWeight = XmlHelper.getString(cfgXML, "fontWeight");
        this.FontColor = XmlHelper.getString(cfgXML, "fontColor");
        this.MissAction = XmlHelper.getInteger(cfgXML, "missAction");
        this.OrginalPosition = new AuthorPosition(this.Left, this.Top);
        this.LastPosition = new AuthorPosition(this.Left, this.Top);
        this.SittingHotSpot = null;
    },
    reset: function() {
        this.SittingHotSpot = null;
        this.LastPosition = this.OrginalPosition.clone();
        this.DropPosition = null;
    },
    getInteractionValue: function() {
        return this.Value;
    },
    jumpToOrginalPosition: function () {
        if (this.OrginalPosition !== null) {
            this.setXY([10,10], true);

        }
        this.LastPosition = this.OrginalPosition.clone();
        this.DropPosition = this.LastPosition.clone();
    },
    jumpBack: function () {
        this.DisplayableComponentContainer.dom.setAttribute("data-x", "0");
        this.DisplayableComponentContainer.dom.setAttribute("data-y", "0");
        this.DisplayableComponentContainer.dom.style.transform = "";
    },
    endDrag: function (x, y, dropHotSpot) {
        if (dropHotSpot === null) { // Missed
            if (this.MissAction === MissActions.LeaveAsIs) {
                this.LastPosition = new AuthorPosition(x, y);
                this.DropPosition = this.LastPosition.clone();
            } else {
                this.jumpToOrginalPosition();
            }
        }
        this.SittingHotSpot = dropHotSpot;
    },
    getTextBlockPosition: TextClass15.prototype.getTextBlockPosition,
    getTextStyle: TextClass15.prototype.getTextStyle,
    initializeDC: function (bg) {
        this.initializeDisplayComponent(bg);
        //Image
        this.PictureBox = this.ContentContainer.createChild({
            tag: 'img',
            id: this.ObjectType + "-" + this.id + "-Picture",
            src: Author.resourcePath + this.PictureFileName,
            style: "left:0px;top:0px;width:" + this.ContentContainerWidth + "px;height:" + this.ContentContainerHeight + "px;"
        });
        //then the text
        this.TextBox = this.ContentContainer.createChild({
            tag: 'div',
            id: this.ObjectType + "-" + this.id + "-TextBox",
            style: 'position:absolute;left:' + this.TextX + "px;top:" + this.TextY + "px;width:" + this.ContentContainerWidth + "px;height:" + this.ContentContainerHeight + "px;"
        });
        var replacedText = ExpressionEngine.replaceVariablesWithValue(this.Text);
        this.TextBlock = this.TextBox.createChild({
            tag: "div",
            id: this.ObjectType + "-" + this.id + "-TextBlock",
            style: "position:absolute;" + this.getTextStyle(),
            html: replacedText
        });
        var tbW = this.TextBlock.getWidth();
        var tbH = this.TextBlock.getHeight();

        var textBlockPosition = this.getTextBlockPosition(tbW, tbH);
        this.TextBlock.applyStyles(textBlockPosition.TextBlockPositionStyle);
        this.setCursor(CursorTypes.Pointer);
        this.setupEventListeners();
    },
    setupEventListeners: function() {},
    processAction: function(bg) {
        if (this.IsChangeAction) {
            Author.DisplayManager.changeAction(this);
        }
        this.initializeDC(bg);
        if (this.DropPosition) {
            this.moveTo(this.DropPosition.Left, this.DropPosition.Top);
        }
        this.setInitialVisibility();
        this.applyEffect();
        try {
            this.DisplayableComponentContainer.dom.classList.add("drag-drop");

        } catch (err) {
            console.log(err);
        }

        return { MoveOn: true, Interval: 0 };
    }
});

// target elements with the "draggable" class
interact('.drag-drop')
    .draggable({
        // enable inertial throwing
        inertia: false,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,

        // call this function on every dragmove event
        onmove: dragMoveListener,

        // call this function on every dragend event
        onend: dragEndListener,
        //snap: {
        //    targets: [startPos],
        //    range: Infinity,
        //    relativePoints: [{ x: 0.5, y: 0.5 }],
        //    endOnly: true
        //},
        onstart: function (event) {
            var rect = interact.getElementRect(event.target);

            // record center point when starting the very first a drag
            //startPos = {
            //    x: rect.left + rect.width / 2,
            //    y: rect.top + rect.height / 2
            //};

            //event.interactable.draggable({
            //    snap: {
            //        targets: [startPos]
            //    }
            //});
        },

    });

function dragEndListener(event) {
    var ddElement = event.target;
    var id = ddElement.id.split("-")[1];
    var ddComponent = Ext.getCmp(id);

    //Dropped outside of any hostspots
    if (ddComponent.SittingHotSpot === null) {
        if (ddComponent.MissAction === MissActions.LeaveAsIs) {//After missing, it should stay where it is
        }
        else {//After missing, it should return to original location
            ddComponent.jumpBack();
        }
        return;
    }
    //Dropped in the hotspot
    else {
        var hs = ddComponent.SittingHotSpot;
        if (hs.HoldingDDButton !== null && hs.HoldingDDButton !== ddComponent) {
            hs.HoldingDDButton.jumpBack();
            hs.HoldingDDButton.SittingHotSpot = null;
        }

        hs.HoldingDDButton = ddComponent;

        if (hs.RespondToDrop) {
            hs.onDrop(ddComponent);
        }
    }
}

function dragMoveListener(event) {
    var target = event.target;
    // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
        target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);


}
