/*!
 * select v0.0.1
 * by liuyuchao
 * copyright 2015.2
 * date: tue feb 25 2015
 */

 ;(function($,window,document){

    var pluginname = 'selectlist',
        defaults = {

            //默认属性配置
            enable: true,   //选择列表是否可用
            zindex: null,  //选择列表z-index值，如需兼容ie6/7,必须加此属性
            width: null,   //选择列表宽度
            height: null,  //选择列表高度
            border: null,  //选择列表边框
            borderradius: null,  //选择列表圆角
            showmaxheight: null,  //选择列表显示最大高度
            optionheight: 38,   //选择列表单项高度
            trianglesize: 9,   //右侧小三角大小
            trianglecolor: '#036eb8',  //右侧小三角颜色
            
            topposition: false,  //选择列表项在列表框上部显示,默认在下边显示
            speed: 100,   //选择列表框显示动画速度（毫秒）
            onchange: function(){}  //自定义模拟选择列表项change事件
        };

    function selectlist(element,options){
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginname;
        this.init();        
    }
    
    selectlist.prototype={
        
        init: function(){
            var that = this,
                element = this.element;
                
            that.replaceprotoypeselect(element);
            that.setselectevent(element);
            that.setselectstyle(element);
        },
        
        //获取原生选择列表id值
        getselectid: function(element){
            var $this = $(element),
                selectid = $this.attr('id');
                
            if(typeof(selectid) !== 'undefined'){
                return selectid;
            }else{
                selectid='';
                return selectid;
            }
        },
        
        //获取原生选择列表name值
        getselectname: function(element){
            var that = this,
                $this = $(element),
                selectname = $this.attr('name');
                
            if(typeof(selectname) !== 'undefined'){
                return selectname;
            }else{
                return that.getselectid($this);
            }
        },
        
        //获取原生选择列表class名
        getselectclassname: function(element){
            var $this = $(element),
                tempclassnamearray = [],
                classnamearray = [],
                classname = $this.attr('class');
                
            if(typeof(classname) !== 'undefined'){
                classnamearray = classname.split(' ');
                classnamearray.sort();
                tempclassnamearray =[classnamearray[0]];
                for(var i = 1; i < classnamearray.length; i++){
                    if( classnamearray[i] !== tempclassnamearray[tempclassnamearray.length-1]){
                        tempclassnamearray.push(classnamearray[i]);
                    }
                }
                return tempclassnamearray.join(' ');
            }else{
                classname='';
                return classname;
            }
        },

        //获取原生选择列表选中索引值
        getselectedindex: function(element){
            var $this = $(element),
                selectedindex = $this.get(0).selectedindex || 0;
                
            return selectedindex;
        },
        
        //获取原生选择列表option的数量
        getoptioncount: function(element){
            var $this = $(element);

            return  $this.children().length;
        },
        
        //获取原生选择列表option的内容
        getoptiontext: function(element){
            var that = this,
                $this = $(element),
                $option = $this.children(),
                optiontext = [],
                selectlength = that.getoptioncount($this);
            
            for(var i=0;i<selectlength;i++){
                optiontext[i] = $.trim($option.eq(i).text());
            }
            return optiontext;
        },
        
        //获取原生选择列表选中值
        getselectedoptiontext: function(element){
            var that = this,
                $this = $(element),
                selectedindex = that.getselectedindex($this),
                optiontext = that.getoptiontext($this);
                
            return optiontext[selectedindex];
            
        },
        
        //获取原生选择列表选中option的value值
        getselectedoptionvalue: function(element){
            var that = this,
                $this = $(element),
                selectedindex = that.getselectedindex($this),
                optionvalue = that.getoptionvalue($this);
            
            return optionvalue[selectedindex];
        },
        
        //获取原生选择列表所有option的value,返回数组
        getoptionvalue: function(element){
            var that = this,
                $this = $(element),
                $option = $this.children(),
                optionvalue = [],
                selectlength = that.getoptioncount($this);
                
            for(var i = 0; i < selectlength; i++ ){
                optionvalue[i] = $option.eq(i).val();
            }
            return optionvalue;
        },
        
        //生成模拟选择列表
        renderselect: function(element){
            var that = this,
                $this = $(element),
                selectid = that.getselectid($this),
                selectname = that.getselectname($this),
                selectclassname = that.getselectclassname($this),
                selectoptiontext = that.getoptiontext($this),
                selectedoptiontext = that.getselectedoptiontext($this),
                selectoptionvalue = that.getoptionvalue($this),
                selectedindex = that.getselectedindex($this),
                selectedvalue = that.getselectedoptionvalue($this),
                selectlength = that.getoptioncount($this),
                selecthtml = '<div id="' + selectid + '" class="select-wrapper ' + selectclassname + '"><input type="hidden" name="' + selectname + '" value="' + selectedvalue + '" /><i class="icon select-down"></i><input type="button" class="select-button" value="' + selectedoptiontext + '" /><div class="select-list"><ul>',
                selectlisthtml = '';
                
            for(var i=0; i<selectlength; i++){
                if(i !== selectedindex){
                    selectlisthtml = selectlisthtml + '<li data-value="' + selectoptionvalue[i] + '">' + selectoptiontext[i] + '</li>';
                }else{
                    selectlisthtml = selectlisthtml + '<li data-value="' + selectoptionvalue[i] + '" class="selected">' + selectoptiontext[i] + '</li>';
                }
                
            }
            selecthtml = selecthtml + selectlisthtml + '</ul></div></div>';
                
            return selecthtml;                                          
        },
        
        //替换原生选择列表
        replaceprotoypeselect: function(element){
            var that = this,
                $this = $(element),
                selecthtml = that.renderselect($this);

            $this.replacewith(selecthtml);
        },
        
        //设置模拟选择列表不可用
        setselectdisabled: function(element){
            var that = this,
                $this = $(element),
                selectid = '#' + that.getselectid($this);
                
            $(selectid).children('i').addclass('disabled').end()
                .children('.select-button').attr('disabled','disabled');
        },
        
        //设置模拟选择列表可用
        setselectenabled: function(element){
            var that = this,
                $this = $(element),
                selectid = '#' + that.getselectid($this);
                
            $(selectid).children('i').removeclass('disabled').end()
                .children('.select-button').removeattr('disabled');
        },
        
        //设置模拟选择列表样式
        setselectstyle: function(element){
            var that = this,
                $this = $(element),
                selectid = '#' + that.getselectid($this),
                selectlength = that.getoptioncount($this);
                
            //设置模拟选择列表外层样式
            $(selectid).css({
                'z-index': that.setstyleproperty(that.settings.zindex),
                width: that.setstyleproperty(that.settings.width) - 2 + 'px',
                height: that.setstyleproperty(that.settings.height) + 'px'
            });
            
            //设置模拟选择列表向下箭头样式
            $(selectid).children('.select-down').css({
                top: that.setstyleproperty((that.settings.height - that.settings.trianglesize)/2) + 'px',
                'border-width': that.setstyleproperty(that.settings.trianglesize) + 'px',
                'border-color': that.setstyleproperty(that.settings.trianglecolor) + ' transparent transparent transparent'
            });
            
            //设置模拟选择列表按钮样式
            $(selectid).children('.select-button').css({
                width: function(){
                    if(!that.settings.width){
                        return;
                    }else{
                        return that.settings.width - 2 + 'px';
                    }
                },
                height: that.setstyleproperty(that.settings.height) + 'px',
                border: that.setstyleproperty(that.settings.border),
                'border-radius': that.setstyleproperty(that.settings.borderradius) + 'px'
            });
            
            //设置模拟选择列表下拉外层样式
            $(selectid).children('.select-list').css({
                width:  function(){
                    if(!that.settings.width){
                        return;
                    }else{
                        return that.settings.width - 2 + 'px';
                    }
                },
                'top': function(index,value){
                    if(!that.settings.height){
                        return;
                    }else{
                        if(!that.settings.topposition){
                            return that.settings.height + 1 + 'px';
                        }else{
                            if(!that.settings.optionheight){
                                //计算下拉列表高度
                            }else{
                                return -that.settings.optionheight*selectlength - 3 + 'px';
                            }
                        }
                    }   
                },
                'max-height': that.setstyleproperty(that.settings.showmaxheight) + 'px'
            }); 
            
            //设置设置模拟选择列表选项外层样式
            $(selectid + ' ul').css({
                'max-height': that.setstyleproperty(that.settings.showmaxheight) + 'px',
                'line-height': that.setstyleproperty(that.settings.optionheight) + 'px'
            });
            
            //设置模拟选择列表选项样式
            $(selectid + ' li').css({
                height: that.setstyleproperty(that.settings.optionheight) + 'px'
            }); 
            
        },
        
        //检测是否设置某个样式
        setstyleproperty: function(styleproperty){
            if(!styleproperty){
                return;
            }else{
                return styleproperty;
            }
        },
            
        //绑定模拟选择列表一系列事件
        setselectevent: function(element){
            var that = this,
                $this = $(element),
                showspeed = that.settings.speed,
                border = that.settings.border,
                selectid = '#' + that.getselectid($this),
                selectname = that.getselectname($this),
                selectedindex = that.getselectedindex($this),
                selectlength = that.getoptioncount($this),
                selectbtn = $(selectid + ' input[type="button"]'),
                selectitem = $(selectid + ' li');
            
            if(that.settings.enable){
                $(selectid)
                    .click(function(event){
                        event.stoppropagation();
                        $(this).children('.select-list').slidetoggle(showspeed);

                        if(that.settings.border){
                            $(this).css({border:border});
                        }else{
                            $(this).addclass('focus');
                        }

                        $(this).find('li').each(function(){
                            if($(this).text() === selectbtn.val()){
                                $(this).addclass('selected').siblings().removeclass('selected');
                            }
                        })

                    })
                    .on('focusin','input[type="button"]',function(){
                        $('.select-wrapper').children('.select-list').slideup(showspeed);
                        if($('.select-wrapper').hasclass('focus')){
                            $('.select-wrapper').removeclass('focus');
                        }
                    })
                    .on('keyup','input[type="button"]',function(event){
                        //缓存第一个被选中的值
                        var $selecteditem = $(this).siblings('.select-list').children().children('li.selected');
                        
                        switch(event.keycode){
                            //enter
                            case 13:
                                $(this)
                                    .val($selecteditem.text())
                                    .prev().prev().val($selecteditem.attr('data-value'));
                                if ($.isfunction(that.settings.onchange)) {
                                    that.settings.onchange.call(that);
                                }
                                break;
                            //esc
                            case 27:
                                $(this).siblings('.select-list').slideup(showspeed);
                                break;
                            //up
                            case 38:
                                event.preventdefault();
                                if(selectedindex !== 0){
                                    $selecteditem.removeclass('selected').prev().addclass('selected');
                                    selectedindex =  selectedindex - 1;
                                }else{
                                    $selectitem.last().addclass('selected').siblings().removeclass('selected');
                                    selectedindex = selectlength - 1;
                                }
                                $selecteditem =  $(this).siblings('.select-list').children().children('li.selected');
                                $(this)
                                    .val($selecteditem.text())
                                    .prev().prev().val($selecteditem.attr('data-value'));
                                break;
                            //down
                            case 40:
                                event.preventdefault();
                                if(selectedindex < selectlength - 1 ){
                                    $selecteditem.removeclass('selected').next().addclass('selected');
                                    selectedindex =  selectedindex + 1; 
                                }else{
                                    $selectitem.first().addclass('selected').siblings().removeclass('selected');
                                    selectedindex = 0;
                                }
                                $selecteditem =  $(this).siblings('.select-list').children().children('li.selected');
                                $(this)
                                    .val($selecteditem.text())
                                    .prev().prev().val($selecteditem.attr('data-value'));
                                break;
                        }
                        
                    })
                    .children('i').removeclass('disabled').end()
                    .children('.select-button').removeattr('disabled');
                    
                //绑定单击选项事件
                selectitem.on('click',function(event){
                    event.stoppropagation();                    
                    $(this)
                        .addclass('selected').siblings().removeclass('selected')
                        .parent().parent().slideup(showspeed)
                        .prev().val($(this).text())
                        .siblings('input[type="hidden"]').val($(this).attr('data-value'));

                    if($('.select-wrapper').hasclass('focus')){
                        $('.select-wrapper').removeclass('focus');
                    }
                
                    if($.isfunction(that.settings.onchange)){
                        that.settings.onchange.call(that);
                    }

                    return false;
                }).hover(function(){
                    $(this).addclass('selected').siblings().removeclass('selected');
                }).mouseenter(function(event){
                    var target = event.target,
                        realwidth =  target.offsetwidth,
                        wrapperwidth = target.scrollwidth,
                        text = $(target).text();
                    if(realwidth < wrapperwidth){
                         $(target).attr( "title", text);
                    }
                })

                $(document).on('click',function(){
                    $(this).find('.select-list').slideup(showspeed);
                    if($('.select-wrapper').hasclass('focus')){
                        $('.select-wrapper').removeclass('focus');
                    }
                })
                               
            }else{
                $(selectid)
                    .children('i').addclass('disabled').end()
                    .children('.select-button').attr('disabled','disabled');
                return;
            }
        }
        
    };

    $.fn[pluginname] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginname)) {
                $.data(this, "plugin_" + pluginname, new selectlist(this, options));
                if(!options.topposition){
                    options.zindex--;
                }else{
                    options.zindex++;
                };              
            }
        });
        return this;
    };
    
 })(jquery,window,document);