(function($) {

    var getDropHeight = function(l) {
        var h;
        if (l > 10 || l < 1) {
            h = 10 * 18;
        } else {
            h = l * 18;
            h += 2;
        }
        return h;
    }  //计算下拉option显示高度


    $.fn.uxcombo = function(datas, config) {

        var comboDatas = [];
        var defaults = {
            dataTtype:"tree",
            text:"text",
            value:"value",
            cascade:"parent"
        };

        var selects = []
        var options = $.extend(defaults, config);


        return this.each(function(index) {
            var self = this;
            selects.push(this.id);

            var cascadeWith = undefined;
            if (options.dataTtype == "tree") {
                if (index == 0) {
                    comboDatas.push(datas)
                } else {
                    cascadeWith = selects[index - 1]
                    var selectDatas = []
                    for (i = 0; i < comboDatas[index - 1].length; i++) {
                        selectDatas = selectDatas.concat(comboDatas[index - 1][i].children)
                    }
                    comboDatas.push(selectDatas)
                }
            } else {
                comboDatas = datas;
            }

            var uc = new $.uxcombo(this, comboDatas[index], options, cascadeWith)

            if (options['defaultValue']) {
                if (typeof options['defaultValue'] == "array") {
                    if (options['defaultValue'].length >= index) {
                        uc.setValue(options['defaultValue'][index])
                    }
                }else{
                    uc.setValue(options['defaultValue'])
                }
            } else {
                uc.setValue(comboDatas[index][0])
            }
            var ucData = comboDatas[index];
            if (uc.cascadeWith) {
                jQuery("#" + uc.cascadeWith).bind("change", function(e) {
                    uc.setValue({text:"", value:""})
                    var cascadeValue = jQuery("#" + cascadeWith).val()
                    for (var i = 0; i < ucData.length; i++) {
                        if (ucData[i] && ucData[i][uc.cascadeField] == cascadeValue) {
                            uc.setValue(ucData[i])
                            break;
                        }
                    }
                })
            }

        })
    }
    $.uxcombo = function(select, data, options, cascadeWith) {
        this.select = select;


        this.textField = options['text'];
        this.valueField = options['value'];
        this.cascadeField = options['cascade'];
        this.cascadeWith = cascadeWith

        var datas = this.datas = data || [
            {
                text:"",
                value:""
            }
        ];
        this.options = options;

        this.wrapSelect(select)
        this.createOptions(select, datas);

    }
    $uc = $.uxcombo;
    $uc.fn = $.uxcombo.prototype = {};
    $uc.fn.extend = $uc.extend = $.extend

    $uc.fn.extend({
        showed:false,

        initEvents:function() {

        },
        wrapSelect:function(select) {

            var hiddenName = this.hiddenName = select.name;
            var hiddenNameId = this.hiddenNameId = select.id;
            var id = this.id = "combo_" + hiddenNameId;
            var name = this.name = "combo_" + hiddenName;

            jQuery(select).after('<input type="hidden" name="' + hiddenName + '" id="' + hiddenNameId + '"/>')
            jQuery(select).attr("readOnly", "readOnly");
            jQuery(select).attr("name", name)
            jQuery(select).attr("id", id)
            jQuery(select).wrap('<div id="wrap_' + name + '" style="position:relative;left:0;top:0;display:inline;z-index:0" class="comboWrap">')
            //            var dropIcon = jQuery('<div style="border:0;z-index:0;cursor:pointer;height:22px;width:16px;top:0px;position:absolute;right:0;"/>');

            var width = this.options['listWidth'] || jQuery("#" + id).width() + 3;
            var left = width - 16;
            var dropIcon = jQuery('<div style="border:0;cursor:pointer;height:22px;width:16px;top:0px;position:absolute;left:' + left + 'px;"/>');
//            jQuery(select).css({"position":"absolute", "left":"0", "top":"0", "margin":"0"})

            dropIcon.addClass("dropIcon")
            jQuery(select).after(dropIcon)

            var self = this;
            var showFn = function(event) {
                self.triggerOptions(event)
            }
            dropIcon.click(showFn);
            jQuery(select).click(showFn);


        },
        triggerOptions:function(event) {
            var cascadeWith = this.cascadeWith;
            var id = this.select.id;
            if (this.showed) {
                this.hideList();
            } else {
                if (cascadeWith) {
                    var length = 0;
                    var cascadeValue = jQuery("#" + cascadeWith).val();
                    jQuery("#_li_" + id + " > div").each(function(index) {
                        //                            var cascade = jQuery(this).attr('cascadeWith');
                        var cascade = this.getAttribute("cascadeWith")
                        if (cascade == cascadeValue) {
                            length++;
                            jQuery(this).show()
                        } else {
                            jQuery(this).hide();
                        }
                    })
                    jQuery("#_li_" + id).height(getDropHeight(length));
                }
                //                    if (notify("beforeShowList") !== false) {
                this.showList()
                //                    }
                //                    notify("showList");

            }
            event.stopPropagation();
        },
        hideList : function() {
            var id = this.id
            jQuery("#wrap_" + this.name).css("z-index", "0");
            jQuery("#_li_" + id).hide();
            this.showed = false;
            var self = this;
            jQuery(document).unbind("click", function() {
                self.hideList()
            });
        },
        showList : function() {
            var id = this.id
            jQuery("div[id^='_li_']").hide();
            jQuery("#wrap_" + this.name).css("z-index", "9999");
            jQuery("#_li_" + id).show();
            this.showed = true;
            var self = this;
            jQuery(document).bind("click", function() {
                self.hideList()
            });
        },
        createOptions:function(select, datas) {
            var options = this.options
            var id = select.id
            var top = jQuery(select).offset().top;   //获取控件top、left位置和width、height
            var left = jQuery(select).offset().left;
            var height = jQuery(select).height();
            var width = options['listWidth'] || jQuery(select).width() + 3;
            var div_html = "<div id='_li_" + id + "' style='position:absolute;background-color:#FFFFFF;top:22px;left:0px;width:" + ((width < 30) ? 30 : width) + "px;height:" + getDropHeight(datas.length) + "px;border:1px #666666 solid;overflow-x:hidden;overflow-y:auto;display:none;z-index:99999;'>"
            //for循环填充option
            for (var i = 0; i < datas.length; i++) {
                if (datas[i]) {
                    div_html += "<div style='text-align:left;padding-left:5px;cursor:pointer;' value='" + datas[i][this.valueField];
                    if (this.cascadeWith) {
                        div_html = div_html + "' cascadeWith='" + datas[i][this.cascadeField]
                    }
                    div_html = div_html + "'>" + datas[i][this.textField] + "</div>";
                }
            }
            div_html += "</div>";

            jQuery(select).after(div_html);  //添加到input控件后面

            var self = this;
            jQuery("#_li_" + id + " > div").hover(function() {
                jQuery(this).css({"background-color":"#DFE8F6"});
            }, function() {
                jQuery(this).css({"background-color":"#FFFFFF"});
            }).click(function() {
                var data = {text:jQuery(this).html(), value:this.getAttribute("value")}
                self.setValue(data)
            });
        },

        setValue:function(data) {
            var hiddenNameId = this.hiddenNameId
            var id = this.id
            var datas = this.datas;

            jQuery("#" + id).val("");
            jQuery("#" + hiddenNameId).val("");
            if (typeof data == "object") {
                jQuery("#" + id).val(data[this.textField]);
                jQuery("#" + hiddenNameId).val(data[this.valueField]);
            } else if (typeof data == "string") {
                for (var i = 0; i < datas.length; i++) {
                    if (datas[i][this.valueField] == data) {
                        jQuery("#" + id).val(datas[i][this.textField]);
                        jQuery("#" + hiddenNameId).val(datas[i][this.valueField]);
                        break;
                    }
                }
            }
            //            jQuery("#" + id).trigger("change")
            jQuery("#" + hiddenNameId).trigger("change")
        }
    })
})(jQuery)