(function($){
    $.fn.ThinkSelect = function(options){
        var self = this;

        /* 默认配置 */
        var defaults = {
            "style"   : "default", //默认皮肤
            "showType": "slide", //下拉列表显示方式 [slide - 滑动, fade - 淡入淡出, none - 无效果]
            "speed"   : "fast", //下拉列表关闭速度 [showType 为 slide,fade 时有效]
            "keys"    : true, //是否开启键盘支持
            "reset"   : false //显示前是否刷新下拉列表 [下拉列表需要动态添加选项时开启]
        };

        /* 配置当前SELECT */
        var options = $.extend({}, defaults, options || {});

        var zIndex  = 2011;

        /* 返回当前SELECT对象 */
        return this.each(function(){
            var _this = $(this);

            /* 获取原SELECT列表属性 */
            var size = {
                "width" : options.width  || _this.width(),
                "height": options.height || _this.height()
            };
            _this.hide(); //隐藏原SELECT

			_this.isMultiple = _this.attr('multiple') ? true : false; //是否多选

            /* 创建ThinkSelect */
            var select = $("<div/>")
				.addClass("ThinkSelect " + options.style)
				.css({
					"position":"relative",
					"width":size.width,
					"height":size.height,
					"line-height":size.height + "px",
					"z-index":zIndex++
				})
				.click(function(event){
					event.stopPropagation()
				})
				.insertAfter(_this);

            /* 给ThinkSelect 添加事件 */
            select.toTop = function(){
                toTop.call(this)
            };

            /* 创建显示框 */
            var box = $("<a/>")
				.text(_this.isMultiple ? _this.attr("title") || "可多选" : _this.find("option:selected").text())
				.attr("href", "javascript:void(0);")
				.css({
					"display":"block",
					"overflow":"hidden",
					'white-space' : 'normal',
					"height": size.height
				})
				.click(function(){
					if($.browser.webkit) this.focus(); //谷歌浏览器
					if(list.is(":visible")){
						var hover = list.find(".hover");
						if(hover.length){
							hover.removeClass("hover");
							hover.click();
						} else {
							list._hide()
						}
					} else{
						select.toTop();
						list._show();
					}
				})
				.appendTo(select);

            /* 创建下拉列表 */
            var list = $("<ul/>")
				.hide()
				.addClass(_this.isMultiple ? "multiple" : "")
				.css({
					"white-space":"nowrap",
					"position":"absolute"
				})
				.appendTo(select);

            /* 给list 添加事件 */
            list._show = function(callback){
                show.call(this, callback)
            };
            list._hide = function(callback){
                hide.call(this, callback)
            };
            list._set  = function(type){
                set.call(this, type)
            };
            list._list = function(){
                li.call(this, _this)
            };

            /* 将原SELECT列表 option 添加到ThinkSelect list 中 */
            list._list();

            /* 在页面中点击其他位置关闭列表 */
            $(document).click(function(){
                list._hide(function(){
                    this.find(".hover").removeClass("hover")
                })
            });

            /* 开启键盘支持 */
            if(options.keys){
                select.keydown(function(event){
                    if(list.is(":visible")){ //下拉列表可见
                        switch(event.keyCode){
                            case 38://向上
                                list._set(0);
                                return false;
                                break;
                            case 40://向下
                                list._set(1);
                                return false;
                                break;
                        }
                    }
                });
            }
        });

        /* 创建下拉列表 */
        function li(select){
            var list = this;
            var box  = list.parent().find("a");
            select.find("option").each(function(){
                var li = $("<li/>")
                .addClass(this.selected ? "selected" : "") //给选中项添加样式
                .attr("thinkval", this.value) //设置当前li的值
                .text(this.innerHTML) //设置当前li显示的文本
                .mouseover(function(){
                    $(this).addClass("hover"); //给当前li添加鼠标经过样式
                })
                .mouseout(function(){
                    $(this).removeClass("hover"); //给当前li卸载鼠标经过样式
                })
                .click(function(){
					var val  = $(this).attr("thinkval"); //当前点击值
					var option = select.find("option[value='" + val + "']"); //和当前值对应的option
					if(select.isMultiple){ //多选
						option.attr("selected", option[0].selected ? false : true);
						$(this).toggleClass("selected");
					} else { // 单选
						var oldVal = select.val(), change = false;
						if(oldVal !== val){ //是否更改了当前SELECT的值
							option.attr("selected", true); //给原select设置新的值
							list.find(".selected").removeClass("selected"); //卸载原li选中样式
							$(this).addClass("selected"); //给新选中的li添加样式
							box.text(this.innerHTML); //把选中的li中的文本放入显示框
							change = true;
						}

						/* 关闭下拉列表 */
						list._hide(function(){
							box.focus(); //关闭后让显示框获取焦点
							change && select.change(); //触发原select change事件
						});
					}
                })
                .appendTo(list);
            });

			/* 设置list的宽度 */
			list.css("width", "auto"); //把list的宽度设为自动便于获取到变化后的准确值
			list.css("width", Math.max(list.parent().width(), list.width()));
        }

        /* 显示下拉列表 */
        function show(callback){
            /* 关闭其他显示的列表 */
            $(".ThinkSelect").find("ul:visible").hide();

			/* 判断列表显示位置 */
			var select   = this.parent(), height = this.height();
			var viewsize = select[0].getBoundingClientRect();
			var bottom   = $(window).height() - viewsize.bottom;
			if(height > bottom && height < viewsize.top){
				this.css({"top":"", "bottom":select.height()});
			} else {
				this.css({"top":select.height(), "bottom":""});
			}

            var list = this;
            var _callback = function(){
                if($.isFunction(callback))
                    callback.call(list)
            };

			/* 重新获取下拉列表，用于动态的select */
            if(options.reset){
                this.find("li").remove();
                this._list();
            }

			/* 根据指定的方式显示下拉列表 */
            if(options.showType == "slide"){
                this.slideDown(options.speed, _callback);
            } else if(options.showType == "fade"){
                this.fadeIn(options.speed, _callback);
            } else {
                this.show();
                _callback();
            }
        }

        /* 隐藏下拉框 */
        function hide(callback){
            var list = this;
            var _callback = function(){
                if($.isFunction(callback))
                    callback.call(list)
            };
            if(options.showType == "slide"){
                this.slideUp(options.speed, _callback);
            } else if(options.showType == "fade"){
                this.fadeOut(options.speed, _callback);
            } else{
                this.hide();
                _callback();
            }
        }

        /* 设置当前选中的选项 */
        function set(type){
            var thisLi = this.find(".hover"), allLi = this.find("li");
            var index    = thisLi.index();
            if(index == -1){
                type ? allLi.first().addClass("hover") : allLi.last().addClass("hover");
            } else {
                thisLi.removeClass("hover");
                type ? thisLi.next().addClass("hover") : thisLi.prev().addClass("hover");
            }
        }

        /* 调整层叠位置 */
        function toTop(){
            this.css("z-index", zIndex++);
        }
    }
})(jQuery)