//select表示select本身，view表示跳出的選項
;(function($){

  $.fn.extend({
  
    //計算文字Byte數，並回傳
    getByteLength: function(strIN){
        var i, cnt=0;
            
        for (i=0; i<strIN.length; i++){            
            if (escape(strIN.charAt(i)).length >= 4) cnt+=2;
            else cnt++;            
        } 
            
        return cnt;
    } 
    
  });
  
  $.fn.extend({
  
    //檢查文字的Byte數，超過limit指定的個數的話，就回傳true 和 未超過之前的文字index
    getIndexByByte: function(strIN,limit){
        var i, cnt=0;
            
        for (i=0; i<strIN.length; i++){            
            if (escape(strIN.charAt(i)).length >= 4) cnt+=2;
            else cnt++;            
            
            if(cnt>limit)
            {
                return [true,i];
            }
        } 
            
        return false;
    } 
    
  });
  
  $.fn.extend({

    finalselect: function(options) {
        
        var settings =
	    {	
	        id:null,
		    animalSpeed:100,
            selectWidth:"190px",		   
            selectImage:"image/select.png",
            selectText:"Wybierz",
			selectValue:"",
		    zIndex: 0,    
		    viewHeight:"100px",
		    viewWidth:"300px",
		    viewMouseoverColor:"#EAEAEA",//#dcdcdc
		    viewTop:"28px",//top,bottom
		    viewLeft:" -1px",//left,right
			blockLayer:"",
			input_id:""
	    };
	    
	    
        if (typeof(options)!='undefined')
	    {
	        //將整批options的值assign給settings
		    jQuery.extend(settings, options);
	    }
             
        var tmp='<div id="'+settings.id+'-select" style="cursor:default;font-size:12px;z-index:'+settings.zIndex+';border: solid 0px #e0dacc; padding: 3px; padding-left: 0px; width: '+settings.selectWidth+'; position: relative;">'
        tmp+='<div id="'+settings.id+'-Text" style="background: url('+settings.selectImage+') no-repeat 0 0; width: '+settings.selectWidth+'; height: 29px; color: #998f75; padding: 4px 0 0 9px;">';
        tmp+='<div class="textshow" id="textshow_'+settings.id+'" style="padding: 4px 0 0 0;">'+settings.selectText+'</div><div class="valueshow" style="display:none;">'+settings.selectValue+'</div></div><div id="'+settings.id+'-selectshow" style="overflow-y:auto; overflow-x:hidden; height:'+settings.viewHeight+';width:'+settings.viewWidth+'; display:none; position: absolute; left:'+settings.viewLeft+'; top:'+settings.viewTop+'; border: solid 1px #e0dacc; background: white;"></div></div>';
        

        
        var _handler = function() {
            // 從這裡開始
            $(this).html(tmp);
            bindArrowClick();
            bindSelectMouseover();
            bindSelectMouseleave();
            
        };
        
        
        
        var bindArrowClick=function(){
            var tmp=$('#'+settings.id+'-Text');
            $("#"+settings.id+'-Text').bind("click", function(e){            
                var obj=$('#'+settings.id+'-selectshow');
                if(obj.css('display')=='none')
                {
                   // obj.slide();                
                   obj.slideDown(settings.animalSpeed,function(){                        
                        obj.show();                       
                        obj.css('overflow','auto');
                        obj.css('overflow-x','hidden');
                    });
                }
                else
                {
                    obj.slideUp(settings.animalSpeed,function(){                        
                        obj.hide();
                    });
                }
       
            });
        };
        
        var bindItemMouseover=function(){
        
            var inx=0;
            while($(".selectitem",$("#"+settings.id+"-selectshow")).get(inx)!=null)
            {
                var item=$(".selectitem",$("#"+settings.id+"-selectshow")).get(inx);
                
                $(item).bind("mouseover", function(e){
                  $(this).css('background-color',settings.viewMouseoverColor);
                });
                
                $(item).bind("mouseout", function(e){
                  $(this).css('background-color','#fff');
                });
                
                $(item).bind("click", function(e){
                    var tmpstr=$(".selecttext",$(this)).html(); 
                    var arr=$().getIndexByByte(tmpstr,16); 
                    if(arr[0]==true)
                        tmpstr=tmpstr.substring(0,arr[1])+'...';     
                    $(".textshow",$("#"+settings.id+"-Text")).html(tmpstr);
                    document.getElementById(settings.id+'-selectshow').style.display="none";
                    $(".valueshow",$("#"+settings.id+"-Text")).html($(".selectvalue",$(this)).html());
					if (settings.blockLayer=="pics"){
						if ($(".valueshow",$("#"+settings.id+"-Text")).html()=='2'){
							var i;
							for (i=0;i<pic_sel.length;i++){
								if (pic_id[i]!=settings.id && ($(".valueshow",$("#"+pic_id[i]+"-Text")).html()=='2')){
									$(".valueshow",$("#"+pic_id[i]+"-Text")).html('1');
									$(".textshow",$("#"+pic_id[i]+"-Text")).html('Widoczne');
								}
							}
						}
					} else if(settings.blockLayer=="preferencje"){
						var num=$(".valueshow",$("#"+settings.id+"-Text")).html();
						var id_lay="pref_"+num;

						num=parseInt(num,10);
						if (preferencje.charAt(num)=='0'){
							set_preferencje(num,"1");
							document.getElementById(id_lay).style.display="block";
						} else {
							set_preferencje(num,"0");
							document.getElementById(id_lay).style.display="none";
						}

						$(".textshow",$("#"+settings.id+"-Text")).html('Wybierz...');
						$(".valueshow",$("#"+settings.id+"-Text")).html('-1');
					}
					else if (settings.blockLayer!=""){
						if ($(".valueshow",$("#"+settings.id+"-Text")).html()=='1'){
							document.getElementsByName(settings.blockLayer+"_start")[0].disabled="disabled";
							document.getElementsByName(settings.blockLayer+"_start")[0].value="0:00";
							document.getElementsByName(settings.blockLayer+"_stop")[0].disabled="disabled";
							document.getElementsByName(settings.blockLayer+"_stop")[0].value="24:00";
						} else if ($(".valueshow",$("#"+settings.id+"-Text")).html()=='2') {
							document.getElementsByName(settings.blockLayer+"_start")[0].disabled="";
							document.getElementsByName(settings.blockLayer+"_stop")[0].disabled="";	
							document.getElementsByName(settings.blockLayer+"_start")[0].focus();
							document.getElementsByName(settings.blockLayer+"_start")[0].select();
						} else if ($(".valueshow",$("#"+settings.id+"-Text")).html()=='0') {
							document.getElementsByName(settings.blockLayer+"_start")[0].disabled="disabled";
							document.getElementsByName(settings.blockLayer+"_start")[0].value="0:00";
							document.getElementsByName(settings.blockLayer+"_stop")[0].disabled="disabled";
							document.getElementsByName(settings.blockLayer+"_stop")[0].value="0:00";						
						}
					}
					if (settings.input_id!=""){
						document.getElementById(settings.input_id).value=$('.valueshow',$('#'+settings.id+'-Text')).html();
					}
                    
                });

                inx++;
            }

        }
        
        var bindSelectMouseover=function(){
            $('#'+settings.id+'-Text').bind("mouseover",function(){
                if($.browser.msie==false && 0==1)
                    $('#'+settings.id+'-Text').css("background-position","0 -21px");
            });
        }
        
        var bindSelectMouseleave=function(){
            $('#'+settings.id+'-Text').bind("mouseout",function(){
                if($.browser.msie==false)
                    $('#'+settings.id+'-Text').css("background-position","0 0px");
            });
        }
        
        this.setViewTop = function(top){
            $('#'+settings.id+'-selectshow').css('top',top+'px');
        } 
        
        this.setViewLeft = function(left){
            $('#'+settings.id+'-selectshow').css('left',left+'px');
        }     
        
        this.getLength = function(){
            return $('.selectitem',$('#'+settings.id+'-selectshow')).length;
        }   
       
       
        //add item到select裡面
        //在傳itemtext時，用<span class="thistext"></span>包起要顯示的 "文字"
        //例如:<span class="thistext">哇哈哈</span>，這樣select選擇後，就會顯示 "哇哈哈"
        this.addItem = function(itemtext,itemvalue){            
            
            var itemhtml='<div class="selectitem"><div class="selecttext">'+itemtext
            +'</div><div class="selectvalue" style=" display:none;">'+itemvalue+'</div></div><div class="selectborder"><div>';
            
            $("#"+settings.id+'-selectshow').html($("#"+settings.id+'-selectshow').html()+itemhtml);           
            
            bindItemMouseover();             
        };
        
        this.removeItem = function(index){
            if($('.selectitem',$('#'+settings.id+'-selectshow')).length>index)
            $($('.selectitem',$('#'+settings.id+'-selectshow')).get(index)).remove();
            if($('.selectborder',$('#'+settings.id+'-selectshow')).length>index)
            $($('.selectborder',$('#'+settings.id+'-selectshow')).get(index)).remove();
        }
        
        
        
        this.getValue = function(){
            return $('.valueshow',$('#'+settings.id+'-Text')).html();
        }
        
        this.getText = function(){
            return $('.textshow',$('#'+settings.id+'-Text')).html();
        }

        return this.each(_handler);     
    }

  });

})(jQuery);