/**
 * created by hzwy23 on 2016/10/23.
 */
(function($){
    $.fn.hselect = function(param){
        var sel = this
        var obj = document.createelement("div")

        //init div css
        //get parent class to it
        $(obj).css({
            "padding":"0",
            "margin":"0",
            "border":"none",
            "outline":"none",
            "text-align":"left",
            "position":"relative"
        }).addclass($(sel).attr("class"))

        // default parameters
        var __default = {
            data: "",
            height:"26px",
            width:"auto",
            border:"#ccc solid 1px",
            fontsize:"13px",
            borderradius:"0px",
            bgcolor:"white",
            placeholder:"地区",

            showliheight:"30px",
            showheight:"230px",
            showborder:"",
            showfontsize:"14px",
            iconcolor:"#ff5763",

            onchange:"",
        }

        $.extend(true,__default,param);

        // set showborder to border style
        if (__default.showborder==""){
            __default.showborder = __default.border
        }

        /*
         * this function sort array.
         * accept one array variable.
         * */
        function sorttree(a){

            // load result sorted
            var list = [];

            // get select's options
            // append it to new select which simulate by ul li
            if (object.prototype.tostring.call(a) == '[object array]'){
                $(sel).find("option").each(function(index,element){
                    var ijs = {}
                    ijs.id = $(element).val();
                    ijs.text = $(element).text()
                    a.push(ijs)
                })
            } else {
                $(sel).find("option").each(function(index,element){
                    var ijs = {}
                    ijs.id = $(element).val();
                    ijs.text = $(element).text()
                    list.push(ijs)
                })
                return list
            }

            //set max dept val
            var maxdept = 8;

            var index = 1;

            function getroots(arr){
                var roots = [];
                for(var i = 0; i < arr.length;i++){
                    var rootflag = true
                    for ( var j = 0; j < arr.length;j++){
                        if (arr[i].upid == arr[j].id){
                            rootflag = false
                            break
                        }
                    }
                    if (rootflag == true){
                        roots.push(arr[i])
                    }
                }
                return roots
            }

            function traversed(node,arr){
                if (++index > maxdept){
                    return
                }
                for (var i = 0; i < arr.length; i++){

                    if (node == arr[i].upid){
                        arr[i].dept = index
                        list.push(arr[i])
                        traversed(arr[i].id,arr)
                    }
                }
                index--;
            }

            function listelem(roots,arr){
                for (var i = 0; i < roots.length; i++){
                    roots[i].dept = index
                    list.push(roots[i])
                    traversed(roots[i].id,arr)
                }
            }

            listelem(getroots(a),a)

            return list
        }

        function gentreeui(a){
            var odivstyle='cursor:pointer;background-color: '+__default.bgcolor+';padding:0px;text-align: left !important;width: '+__default.width+'; border:'+__default.border+'; height: '+__default.height+'; line-height: '+__default.height+'; padding-left: 10px;border-radius:'+__default.borderradius+''
            var odiv = '<div class="hshowselectvalue" style="'+odivstyle+'">' +
                '<span style="height: '+__default.height+'; font-size: '+__default.fontsize+'">'+__default.placeholder+'</span>' +
                '<hzw style="position: relative;width: 20px; float: right;height: '+__default.height+'; line-height: '+__default.height+';">' +
                '<i style="border-color:#888 transparent transparent transparent;border-style: solid;border-width: 5px 4px 0px 4px;height: 0;left: 50%;margin-left: -4px;margin-top:-3px ;position: absolute;top: 50%;width: 0;"></i>' +
                '</hzw></div>'
            odiv+='<div class="hselectshowareahuangzhanwei" style="white-space:nowrap;background-color: #fefefe;border: '+__default.showborder+';display: none; border-radius: 3px ;position: fixed;z-index:9999">' +
                '<input style="border:#6699cc solid 1px; padding-left:5px;margin:5px 5px;height:'+__default.showliheight+';"/>'
            var opt = odiv+'<ul style="z-index: 9999;padding: 0px;list-style: none;margin:0px;' +
                'max-height:'+__default.showheight+';' +
                'overflow: auto;' +
                '">'
            for(var i = 0; i < a.length; i++){
                var pd = parseint(a[i].dept)*20 - 10
                if (isnan(pd)){
                    pd = 10
                }
                var li = '<li data-id="'+a[i].id+'" data-dept="'+a[i].dept+'" style="margin:0px; text-align: left;font-weight:500;padding-left:'+pd+'px; height:'+__default.showliheight+'; line-height: '+__default.showliheight+'; font-size: '+__default.showfontsize+'; cursor: pointer;position: relative;">' +
                    '<hzw class="hshoworhideiconhzw" style="height: '+__default.showliheight+'; line-height: '+__default.showliheight+'; width: 20px;cursor: cell;display: inline-block">' +
                    '<i style="border-color:'+__default.iconcolor+' transparent transparent transparent;border-style: solid;border-width: 6px 5px 0px 5px;height: 0;margin-left: 1px;margin-top: -5px;position: absolute;top: 50%;width: 0;"></i>' +
                    '</hzw>' +
                    '<span style="height: '+__default.showliheight+'; line-height: '+__default.showliheight+'; position: absolute;">'+a[i].text+'</span></li>'
       
                opt+=li;
            }
            opt +='</ul></div>'
            return opt;
        }

        function showup(e){
            var dept = $(e).attr("data-dept")
            $(e).prevall().each(function(index,element){
                if (parseint(dept)>parseint($(element).attr("data-dept"))){
                    $(element).show();
                    dept = $(element).attr("data-dept")
                }
            })
        }


        function initselect(selobj,arr){
            var opthtml = ""
            for (var i = 0; i < arr.length; i++){
                opthtml+='<option value="'+arr[i].id+'">'+arr[i].text+'</option>'
            }
            $(selobj).append(opthtml)
            $(selobj).hide()
        }

        function showorhide(e){
            var topbordercolor = __default.iconcolor+' transparent transparent transparent'
            var leftbordercolor = 'transparent transparent transparent '+__default.iconcolor
            var dept = $(e).attr("data-dept")
            var nextobj = $(e).next()
            var nextdept = $(nextobj).attr("data-dept")
            var nextdisplay = $(nextobj).css("display")
            if (nextdisplay == "none" && parseint(nextdept)>parseint(dept)){
                $(e).find("i").css({
                    "border-color":topbordercolor,
                    "border-width":"6px 5px 0px 5px"
                })

                $(e).nextall().each(function(index,element){
                    if (parseint(dept)+1==parseint($(element).attr("data-dept"))){
                        $(element).find("i").css({
                            "border-color":leftbordercolor,
                            "border-width":"5px 0px 5px 6px",
                        });

                        $(element).show();
                    }else if (parseint(dept)+1 < parseint($(element).attr("data-dept"))){
                        $(element).find("i").css({
                            "border-color":leftbordercolor,
                            "border-width":"5px 0px 5px 6px",
                        })

                        $(element).hide();
                    }else{
                        return false
                    }
                })
            }else if (nextdisplay == "none" && parseint(nextdept)<=parseint(dept)){
                return
            }else if (nextdisplay != "none" && parseint(nextdept)>parseint(dept)){

                $(e).find("i").css({
                    "border-color":leftbordercolor,
                    "border-width":"5px 0px 5px 6px",
                })

                $(e).nextall().each(function(index,element){
                    if (parseint(dept)<parseint($(element).attr("data-dept"))){
                        $(element).find("i").css({
                            "border-color":leftbordercolor,
                            "border-width":"5px 0px 5px 6px",
                        })

                        $(element).hide();
                    }else if (parseint(dept)>=parseint($(element).attr("data-dept"))){
                        return false
                    }
                })
            }else {
                return
            }
        }

        var ui = gentreeui(sorttree(__default.data))
        initselect(sel,__default.data)

        $(obj).html(ui)
        $(sel).after(obj)

        $(obj).find("input").focus();

        //when select was change
        //change show values
        $(sel).on('change',function(){

            //window.event.cancelbubble = true;
            var text = $(this).find("option:selected").text()
            $(obj).find(".hshowselectvalue span").html(text)
        })


        $(obj).find("ul li").each(function(index,element){
            var curdept = parseint($(element).attr("data-dept"))
            var nextdept = parseint($(element).next().attr("data-dept"))
            if (curdept>=nextdept || isnan(nextdept)){
                $(element).find("hzw").remove()
            }
        })

        $(obj).find("input").on('input',function(e){
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
            var inptext = $(this).val();
            if (inptext == ""){
                $(obj).find("ul li").show();
                return
            }
            $(obj).find("ul li").each(function(index,element){
                if ($(element).find("span").html().indexof(inptext)>=0){
                    $(element).show()
                    showup(element)
                }else{
                    $(element).hide()
                }
            })
        })

        $(obj).find("input").on('click',function(e){
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
            $(this).focus();
        })

        $(obj).find(".hshoworhideiconhzw").on("click",function(e){
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
            showorhide($(this).parent())
        })

        $(obj).find("li").on('mouseover',function(e){
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }

            var ul = $(this).closest("ul")

            $(ul).find("li").css({
                "background-color":"",
                "color":""
            })

            $(this).css({
                "background-color":"#6699cc",
                "color":"white"
            })
        })

        $(obj).find("li").on('click',function(e){
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }

            var text = $(this).find("span").html();
            var id = $(this).attr("data-id")
            $(sel).val(id)
            $('#areacode').val(id);
            $(this).closest("div").prev().find("span").html(text)
            $(this).closest("div").hide();
            $("body").find(".hzwy23fillbodyforselectitems").animate({height:'0px'},500,function(){
                $(this).remove()
            })

            $(obj).find(".hshowselectvalue i").css({
                "border-color":"#888 transparent transparent transparent",
                "border-width":"5px 4px 0px 4px"
            })

            if (typeof __default.onchange == "function"){
                __default.onchange();
            }
        })

        $(obj).find("ul").on('mousewheel',function(e){
           if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
        })

        $("div").scroll(function(e) {
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
            var showuistatus = $(obj).find(".hselectshowareahuangzhanwei").css("display")
            if (showuistatus != "none"){
                var ptop = $(obj).offset().top
                var pleft = $(obj).offset().left;
                var tp = ptop+$(obj).find(".hshowselectvalue").height()
                $(obj).find(".hselectshowareahuangzhanwei").offset({top:tp,left:pleft})
            }
        });

        $(document).scroll(function(e) {
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
            var showuistatus = $(obj).find(".hselectshowareahuangzhanwei").css("display")
            if (showuistatus != "none"){
                var ptop = $(obj).offset().top
                var pleft = $(obj).offset().left;
                var tp = ptop+$(obj).find(".hshowselectvalue").height()
                $(obj).find(".hselectshowareahuangzhanwei").offset({top:tp,left:pleft})
            }
        });

        $("body").scroll(function(e) {
           if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
            var showuistatus = $(obj).find(".hselectshowareahuangzhanwei").css("display")
            if (showuistatus != "none"){
                var ptop = $(obj).offset().top
                var pleft = $(obj).offset().left;
                var tp = ptop+$(obj).find(".hshowselectvalue").height()
                $(obj).find(".hselectshowareahuangzhanwei").offset({top:tp,left:pleft})
            }
        });

        $(obj).find(".hshowselectvalue").on('click',function(e){
            var showuistatus = $(obj).find(".hselectshowareahuangzhanwei").css("display")
            if(e){
				e.stoppropagation();
            }else{
            	window.event.cancelbubble = true;//ie
            }
            if (showuistatus == "none"){
                $(".hselectshowareahuangzhanwei").hide()
                $(".hshowselectvalue i").css({
                    "border-color":"#888 transparent transparent transparent",
                    "border-width":"5px 4px 0px 4px",
                })
                var w = $(obj).width()
                $(obj).find(".hselectshowareahuangzhanwei").css("min-width",w)
                $(obj).find(".hselectshowareahuangzhanwei input").css("min-width",w-12)


                var nextobj = $(this).next()
                $(nextobj).find("input").val("")
                $(nextobj).show();
                $(nextobj).find("input").focus();
                $(nextobj).find("ul").scrolltop(0);
                $(nextobj).find("ul").scrollleft(0);
                $(obj).find(".hshowselectvalue i").css({
                    "border-color":"transparent transparent #888 transparent",
                    "border-width":"0px 4px 5px 4px"
                })

                var ptop = $(obj).offset().top
                var pleft = $(obj).offset().left;
                var tp = ptop+$(this).height()
                var ulheight = $(nextobj).height()
                if (tp+ulheight > document.body.scrollheight){
                    var addheight = tp+ulheight+30 - document.body.scrollheight
                    var appdiv = document.createelement("div")
                    $(appdiv).css("height",addheight).addclass("hzwy23fillbodyforselectitems")
                    $("body").append(appdiv)
                    var st = $("body").scrolltop();
                    $("body").animate({scrolltop:st+addheight},500)
                }
                $(obj).find(".hselectshowareahuangzhanwei").offset({
                    top:tp,
                    left:pleft
                })

            }else{
                $(obj).find("li").closest("div").hide();
                $(obj).find(".hshowselectvalue i").css({
                    "border-color":"#888 transparent transparent transparent",
                    "border-width":"5px 4px 0px 4px"
                })

                $("body").find(".hzwy23fillbodyforselectitems").animate({height:'0px'},500,function(){
                    $(this).remove()
                })
            }
        })

        $(document).on('click',function(){
            $(obj).find("li").closest("div").hide();
            $(obj).find(".hshowselectvalue i").css({
                "border-color":"#888 transparent transparent transparent",
                "border-width":"5px 4px 0px 4px"
            })
            $("body").find(".hzwy23fillbodyforselectitems").animate({height:'0px'},500,function(){
                $(this).remove()
            })
        })
    }
}(jquery));