var $ = require('jquery');

var drag = function(el, array, callback) {
    this.el = el;
    this.dataArray = array;
    this.callback = callback;
}
drag.prototype = {
    constructor: drag,
    minZindex: 1,
    dragItemList: null,
    dragItemPos: [],
    Initialize: function(){
        this.dragItemList = $(this.el).find(".dragItem");
        if(this.dragItemList.length > 0){
            var elHeight = $(this.el).height();
            $(this.el).css("position","relative").css("height", elHeight + "px");

            for(var i=0;i<this.dragItemList.length;i++){
                var top = this.dragItemList[i].offsetTop;
                var left = this.dragItemList[i].offsetLeft;
                $(this.dragItemList[i]).css("top", top + "px").css("left", left + "px");

                this.dragItemPos[i] = {left:left, top:top};
                this.dragItemList[i].index = i;
            }
            for(var i=0; i<this.dragItemList.length; i++){
                $(this.dragItemList[i]).css("position", "absolute").css("margin", 0).css("width","100%");
                this.setDrag(this.dragItemList[i]);
            }
        }
    },

    setDrag: function(obj){
        var _self = this;

        obj.onmouseover = function(){
            $(obj).css("cursor", "move");
            $(obj).css("border-color","#9a9fa4");
            $(obj).css("box-shadow","0 0 6px 0 rgba(0, 0, 0, 0.85)");
        }

        obj.onmouseout = function(){
            $(obj).css("cursor", "default");
            $(obj).css("border-color","none");
            $(obj).css("box-shadow","none");
        }

        obj.onmousedown = function(event){
            $(obj).css("z-index", _self.minZindex++);
            var disX = event.clientX - obj.offsetLeft;
            var disY = event.clientY - obj.offsetTop;

            document.onmousemove = function(event){
                var left = event.clientX - disX ;
                var top = event.clientY - disY ;
                $(obj).css("top", top + "px").css("left", left + "px");

                for(var i=0;i<_self.dragItemList.length;i++){
                    $(_self.dragItemList[i]).css("border","0px");
                }
                var oNear = _self.findMin(obj);
                if(oNear){
                    $(oNear).css("border","2px dashed red");
                }
            }

            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;

                //检测是否普碰上，在交换位置
                var oNear = _self.findMin(obj);
                if(oNear){
                    $(oNear).css("border","0px").css("z-index", _self.minZindex++);
                    $(obj).css("z-index", _self.minZindex++);

                    //_self.move(oNear,_self.dragItemPos[obj.index]);
                    //_self.move(obj,_self.dragItemPos[oNear.index]);

                    //交换index
                    oNear.index += obj.index;
                    obj.index = oNear.index - obj.index;
                    oNear.index = oNear.index - obj.index;

                    //数组排序后返回
                    _self.getArry(_self.dragItemList);
                }else{
                    _self.move(obj,_self.dragItemPos[obj.index]);
                }
            }

            clearInterval(obj.timer);
            return false;//低版本出现禁止符号
        }

    },

    findMin: function(obj){
        var minDis = 999999999;
        var minIndex = -1;
        for(var i=0;i<this.dragItemList.length;i++){
            if(obj == this.dragItemList[i])continue;
            if(this.coverCheck(obj,this.dragItemList[i])){
                var dis = this.getDis(obj,this.dragItemList[i]);
                if(dis < minDis){
                    minDis = dis;
                    minIndex = i;
                }
            }
        }
        if(minIndex == -1){
            return null;
        }else{
            return this.dragItemList[minIndex];
        }
    },

    coverCheck: function(obj1, obj2){
        var t1 = obj1.offsetTop;
        var r1 = obj1.offsetWidth + obj1.offsetLeft;
        var b1 = obj1.offsetHeight + obj1.offsetTop;
        var l1 = obj1.offsetLeft;

        var t2 = obj2.offsetTop;
        var r2 = obj2.offsetWidth + obj2.offsetLeft;
        var b2 = obj2.offsetHeight + obj2.offsetTop;
        var l2 = obj2.offsetLeft;

        if(t1>b2 || r1<l2 || b1<t2 || l1>r2){
            return false;
        }else{
            return true;
        }
    },

    getDis: function(obj1,obj2){
        var a = obj1.offsetLeft - obj2.offsetLeft;
        var b = obj1.offsetTop - obj2.offsetTop;
        return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
    },

    getArry: function(Array){
        var sortArray = [];
        for(var i=0; i<Array.length; i++){
            for(var j=0; j<Array.length; j++){
                if(Array[j].index == i){
                    sortArray.push(this.dataArray[j]);
                    break;
                }
            }
        }
        this.callback(sortArray);
    },

    move: function(obj,json){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var isStop = true;
            for(var attr in json){
                var iCur = 0;
                if(attr=="opacity"){
                    iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
                }else{
                    iCur = parseInt(getStyle(obj,attr));
                }
                var ispeed = (json[attr]-iCur)/8;
                ispeed = ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
                if(iCur!=json[attr]){
                    isStop = false;
                }
                if(attr=="opacity"){
                    obj.style.filter = "alpha:(opacity:"+(json[attr]+ispeed)+")";
                    obj.style.opacity = (json[attr]+ispeed)/100;
                }else{
                    obj.style[attr] = iCur+ispeed+"px";
                }
            }
            if(isStop){
                clearInterval(obj.timer);
            }
        },30);

        function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
        }
    },

    destroy: function(){
        this.dragItemList = $(this.el).find(".dragItem");
        if(this.dragItemList.length > 0){
            $(this.el).removeAttr("style");
            for(var i=0; i<this.dragItemList.length; i++){
                $(this.dragItemList[i]).removeAttr("style");
            }
        }
    }

}

module.exports = drag;