﻿EM.ModelSearch.DND = {
    Y: null,
    //yModules: ['node','dd-constrain','dd-delegate', 'dd-drop-plugin', 'dd-proxy', 'dd-drop', 'dd-scroll'],
    init: function () {
        var Y = this.Y = YUI();
        var me = this;
        Y.use('node', 'dd-constrain', 'dd-delegate', 'dd-drop-plugin', 'dd-proxy', 'dd-drop', 'dd-scroll', function (Y) {
            EM.ModelSearch.DND.Y = Y;
            var del = new Y.DD.Delegate({
                cont: '.modellist',
                nodes: 'div.model'
            });

            del.on('drag:end', function (e) {
                //restore the z-index

                //move back to the original position
                var node = del.get('currentNode');
                node.removeClass('em-is-dragging');
                node.setStyles({
                    top: 0,
                    left: 0
                });
                setTimeout(function () {
                    EM.Lightbox.dragBusy = false;
                }, 0);
            });
            del.on('drag:start', function (e) {
                //                if (e.target.get('node').hasClass('first')) {
                //                    
                //                }
                //e.target.get('node').setStyles({ 'z-index': '550000' });
                //e.target.get('node').setStyle('z-index', '550000');
                e.target.get('node').addClass('em-is-dragging');
                EM.Lightbox.dragBusy = true;
            });
            /*
            //The DDProxy plugin with 'cloneNode' enabled seems to cause trouble in IE
            del.dd.plug(Y.Plugin.DDProxy, {
            moveOnEnd: false,
            cloneNode: true,
            borderStyle:false
            });
            */
            //del.dd.plug(Y.Plugin.DDProxy, {moveOnEnd: false});
            del.dd.plug(Y.Plugin.DDWinScroll);


            me.refresh();
            me.refreshLightbox();
            me.initSearchFilters();
        });
    },
    initSearchFilters: function () {
        //because we don't need to interact with the other drag/drop items uses it's own YUI instance
        YUI().use('node', 'dd-constrain', 'dd-delegate', 'dd-drop-plugin', 'dd-proxy', 'dd-drop', 'dd-scroll', function (Y) {

            //Listen for all drop:over events
            //Y.DD.DDM._debugShim = true;

            Y.DD.DDM.on('drop:over', function (e) {
                //Get a reference to out drag and drop nodes
                var drag = e.drag.get('node'),
                    drop = e.drop.get('node');

                //Are we dropping on a li node?
                //if (drop.get('tagName').toLowerCase() === 'li') {

                if (drop.get('tagName').toLowerCase() === 'div' && drop.hasClass('sf_option') === true) {
                    //console.dir(drop.hasClass('sf_option'));
                    //Are we not going up?
                    if (!goingUp) {
                        drop = drop.get('nextSibling');
                    }
                    //Add the node to this list
                    e.drop.get('node').get('parentNode').insertBefore(drag, drop);
                    //Set the new parentScroll on the nodescroll plugin
                    e.drag.nodescroll.set('parentScroll', e.drop.get('node').get('parentNode'));
                    //Resize this nodes shim, so we can drop on it later.
                    e.drop.sizeShim();
                }
            });
            //Listen for all drag:drag events
            Y.DD.DDM.on('drag:drag', function (e) {
                //Get the last y point
                var y = e.target.lastXY[1];
                //is it greater than the lastY var?
                if (y < lastY) {
                    //We are going up
                    goingUp = true;
                } else {
                    //We are going down.
                    goingUp = false;
                }
                //Cache for next check
                lastY = y;
                Y.DD.DDM.syncActiveShims(true);
            });
            //Listen for all drag:start events
            Y.DD.DDM.on('drag:start', function (e) {
                //Get our drag object
                var drag = e.target;
                //Set some styles here
                drag.get('node').setStyle('opacity', '.55');
                drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
                drag.get('dragNode').addClass('filter_drag');
                drag.get('dragNode').addClass('sf_option');

                drag.get('dragNode').setStyles({
                    opacity: '.75',
                    borderColor: drag.get('node').getStyle('borderColor'),
                    backgroundColor: drag.get('node').getStyle('backgroundColor')
                });
            });
            //Listen for a drag:end events
            Y.DD.DDM.on('drag:end', function (e) {
                var drag = e.target;
                //Put out styles back
                drag.get('node').setStyles({
                    visibility: '',
                    opacity: '1'
                });
                EM.ModelSearch.renumberFilterPositions();
                setTimeout(function () {
                    EM.Lightbox.dragBusy = false;
                    EM.ModelSearch.searchByFilters();
                }, 0);
            });
            //Listen for all drag:drophit events
            Y.DD.DDM.on('drag:drophit', function (e) {
                var drop = e.drop.get('node'),
                    drag = e.drag.get('node');

                //if we are not on an li, we must have been dropped on a ul
                if (drop.get('tagName').toLowerCase() !== 'li') {
                    if (!drop.contains(drag)) {
                        drop.appendChild(drag);
                        //Set the new parentScroll on the nodescroll plugin
                        e.drag.nodescroll.set('parentScroll', e.drop.get('node'));
                    }
                }
            });

            //Static Vars
            var goingUp = false, lastY = 0;

            //Get the list of li's in the lists and make them draggable
            var lis = Y.all('#searchFilters div.sf_option');
            lis.each(function (v, k) {
                var dd = new Y.DD.Drag({
                    node: v,
                    target: {
                        padding: '0 0 0 20'
                    }
                }).plug(Y.Plugin.DDProxy, {
                    moveOnEnd: false
                }).plug(Y.Plugin.DDConstrained, {
                    constrain2node: '#searchFilters'
                }).plug(Y.Plugin.DDNodeScroll, {
                    node: v.get('parentNode')
                });
            });

            //Create simple targets for the 2 lists.
            var uls = Y.all('#searchFilters');
            uls.each(function (v, k) {
                var tar = new Y.DD.Drop({
                    node: v
                });
            });
        });
    },
    //refresh the drag & drop after dom nodes are replaced
    refresh: function () {
        //make sure we re-use the same YUI instance
        var Y = this.Y;
        //create drop target
        var drop = Y.one('.modellist div.first').plug(Y.Plugin.Drop);
        drop.drop.on('drop:hit', function (e) {
            //model dropped, modify selector based on the specs of this model
            var node = e.drag.get('node');
            drop.set('innerHTML', node.get('innerHTML'));
            //modelFrame
            //alert(node.get('.modelimg').getAttribute('data-modelId'));
            var modelId = node.getAttribute('data-modelId');

            EM.Lightbox.searchByModel(modelId);

        });
    },
    refreshLightbox: function () {
        var Y = this.Y;
        if (!Y) {
            return;
        }
        Y.all('.lbcontent .model').each(function (n) {
            var drop2 = n.plug(Y.Plugin.Drop);
            drop2.drop.on('drop:hit', function (e) {
                //model dropped, modify selector based on the specs of this model
                var node = e.drag.get('node');

                //alert(node.get('.modelimg').getAttribute('data-modelId'));
                var modelId = node.getAttribute('data-modelId');
                if (modelId) {
                    EM.Lightbox.addModel(modelId);
                }

            });
        });
    }
};
