var CS_DESELECTED = 'cs_code_deselected';

//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 =
	    {	
			itemCount: 0,
			multiSelect: 0,
			closeImg: '',
	        id:null,
		    animalSpeed:100,
            selectWidth:"190px",		   
            selectImage:"customselect/select.png",
            selectText:"My friend",
		    zIndex: 0,    
		    viewHeight:"100px",
		    viewWidth:"auto",
		    viewMouseoverColor:"#cfdfff",//#dcdcdc
		    viewTop:"28px",//top,bottom
		    viewLeft:" -1px"//left,right
	    };
	    
	    
        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 #999; padding: 3px; width: 180px; position: relative;">'
        tmp+='<div class="customselect_text" id="'+settings.id+'-Text" style=" width: '+settings.selectWidth+'; height: 21px; color: White; padding: 0  0 0 10px;">';
        tmp+='<div class="textshow" style="padding: 4px 0 0 0;">'+settings.selectText+'</div><div class="valueshow" style="display:none;"></div></div><div style=" color:#bbb; text-align:right;font-size:9px;"></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 #999; background: white;"></div></div>';
*/
        var tmp='<div class="customselect-top" id="'+settings.id+'-select" style="">'
        tmp+='<div class="customselect_text" id="'+settings.id+'-Text">';
        tmp+='<div class="textshow">'+settings.selectText+'</div><img name="Clear selection" class="jtipmindyn closer" id="closer-' + settings.id + '" width="12px" height="12px" src="' + settings.closeImg+ '"/><div class="valueshow" style="display:none;"></div></div><div style=" color:#bbb; text-align:right;font-size:9px;"></div><div id="'+settings.id+'-selectshow" style="display:none" class="customselect_data"></div></div>';
        

        
        var _handler = function() {
			if ($(this).is('.selectmulti')) {
				settings.multiSelect = 1;
			}
            // 從這裡開始
            $(this).html(tmp);
			bindCloser();
            bindArrowClick();
            bindSelectMouseover();
            bindSelectMouseleave();
        };

		var myself = this;
        var bindCloser = function() {
			settings.closer = $("#closer-" + settings.id);
			settings.closer.click(function(e){ 
				myself.deselect(myself);
				
				/* For the mock test */
				e.preventDefault();
				e.stopPropagation();
				return false;
				
			});
		}

        
        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');
                    });
					if (settings.onActive)
						settings.onActive();
                }
                else
                {
					if (settings.onInactive)
						settings.onInactive();
                    obj.slideUp(settings.animalSpeed,function(){                        
                        obj.hide();
                    });
                }
       
            });
        };
        
        var bindItemMouseover=function(self){
        
            var inx=0;

            while($(".selectitem",$("#"+settings.id+"-selectshow")).get(inx)!=null)
            {
                var item=$(".selectitem",$("#"+settings.id+"-selectshow")).get(inx);
                
				$(item).hover(function(e){
					$(this).addClass('selecthighlight');
                }, function(e){
					$(this).removeClass('selecthighlight');
                });
					/*		 
                $(item).bind("mouseover", function(e){
					$(this).addClass('selecthighlight');
                });
                
                $(item).bind("mouseout", function(e){
					$(this).removeClass('selecthighlight');
                });
                */
                $(item).bind("click", function(e){
                 
                    var tmpstr=$(".selecttext",$(this)).html();                     
/*                    var arr=$().getIndexByByte(tmpstr,100); 
                    if(arr[0]==true)
                        tmpstr=tmpstr.substring(0,arr[1])+'...';                    
	*/				
					if (!settings.multiSelect)
						document.getElementById(settings.id+'-selectshow').style.display="none";

					var acceptChange = true;
					if (self.selectionChanged) {
						acceptChange = self.selectionChanged($(".selectvalue",$(this)).html(), 
															 $(".selecttext",$(this)).html());
					}

					if (settings.multiSelect) {
						if (acceptChange) {
							$(this).toggleClass('selected');
							if (!$(this).is('.selected')) {
								var $all = $(".selectall", $("#"+settings.id+"-select"));

								$all.removeClass('selected');
							}

							var value = $(".selectvalue",$(this)).html();

							var $selected = $(".selected", $("#"+settings.id+"-select"));
							var currentValue = '';
							$selected.each(function() {
								if (currentValue)
									currentValue += ' , ';
								currentValue += $(".selectvalue",$(this)).html();
							});
							if (currentValue == '') {
								currentValue = settings.selectText;
								$("#closer-" + settings.id).hide();
							} else {
								$("#closer-" + settings.id).show();
							}

							$(".textshow",$("#"+settings.id+"-Text")).html(currentValue);
						}
					} else {
						if (acceptChange) {
							tmpstr = $(".selectvalue",$(this)).html(); // display value
							$(".textshow",$("#"+settings.id+"-Text")).html(tmpstr);
							$(".valueshow",$("#"+settings.id+"-Text")).html($(".selectvalue",$(this)).html());
							$("#closer-" + settings.id).show();
						}
					}
                });

                inx++;
            }

        }
        
        var bindSelectMouseover=function(){
            $('#'+settings.id+'-Text').bind("mouseover",function(){
                if($.browser.msie==false)
                    $('#'+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 = '';

            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);           
			setting.itemCount++;
            bindItemMouseover(this);             
        };

        this.addItems = function(itemlist, index, length){            
            var itemhtml = '<div class="customselect_group">';
			
			for (var i=index; i < index+length && i<itemlist.length; i++) {
				if (settings.itemCount % GROUP_COUNT == 0 && settings.itemCount) {
					itemhtml += '</div><div class="customselect_group">';

				}
				var classname = '';
				if (itemlist[i]['class'])
					classname = itemlist[i]['class'];

				itemhtml += '<div class="selectitem ' + classname + '"><div class="selecttext">';

				if (isNaN(parseInt(itemlist[i].value))) {
					itemhtml += '<a class="jtipmindyn" name="' + itemlist[i].value + '">' + 
						itemlist[i].text +
						'</a>';
				} else {
					itemhtml += itemlist[i].text;
				}

				itemhtml += '</div><div class="selectvalue" style=" display:none;">'+itemlist[i].value+'</div></div>'; 

				settings.itemCount++;
            }

			itemhtml += '</div>';
			
            $("#"+settings.id+'-selectshow').html($("#"+settings.id+'-selectshow').html()+itemhtml);

			JT_init_dyn();
            bindItemMouseover(this);             
        };
        
        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.removeAll = function(index){
            $('.selectitem',$('#'+settings.id+'-selectshow')).remove();
            $('.selectborder',$('#'+settings.id+'-selectshow')).remove();

//            $(".textshow",$("#"+settings.id+"-Text")).html(settings.selectText);
//            $(".valueshow",$("#"+settings.id+"-Text")).html('');
			settings.itemCount = 0;
        }

        this.setSelectedValue = function(str) {
			$("#closer-" + settings.id).show();			
			if (settings.multiSelect) {
				$(".textshow",$("#"+settings.id+"-Text")).html(str);
				var values = str.split(',');
				var hash = new Object;
				for (var i=0; i<values.length; i++)
					hash[values[i]] = true;

				$(".selectitem", $("#"+settings.id+"-select")).each(function() {
					var val = $(".selectvalue", $(this)).html();

					if (hash[val]) {
						$(this).addClass('selected');
					} else {
						$(this).removeClass('selected');
					}
				});				
			} else {
				$(".textshow",$("#"+settings.id+"-Text")).html(str);
			}
		}

		this.deselect = function(self) {
			$(".textshow",$("#"+settings.id+"-Text")).html(settings.selectText);
			$(".valueshow",$("#"+settings.id+"-Text")).html();

			if (settings.multiSelect)
				$(".selectitem", $("#"+settings.id+"-select")).removeClass('selected');

			if (self.selectionChanged) {
				acceptChange = self.selectionChanged(settings.multiSelect?CS_DESELECTED:'', '');
			}
			$("#closer-" + settings.id).hide();
		}

        this.getSelectedValue = function(str) {
			if (settings.multiSelect) {
				var value = '';
				$(".selected .selectvalue", $("#"+settings.id+"-select")).each(function() {
					if (isNaN(parseInt($(this).html()))) {
						if (value)
							value += ',';
						value += $(this).html();
					}
				});

				return value;
			} else {
				return $(".textshow",$("#"+settings.id+"-Text")).html();
			}
		}

        this.showDropdown = function() {
			$("#"+settings.id+'-Text').click();
		}

        this.hideDropdown = function() {
			document.getElementById(settings.id+'-selectshow').style.display="none";
		}
        
        this.getValue = function(){
            return $('.valueshow',$('#'+settings.id+'-Text')).html();
        }
        
        this.getText = function(){
            return $('.textshow',$('#'+settings.id+'-Text')).html();
        }

		this.multiSelectAll = function() {
			$all = $(".selectall", $("#"+settings.id+"-select"));
			$all.toggleClass('selected');

			var select = $all.is('.selected');
			if (select) {
				$(".selectitem", $("#"+settings.id+"-select")).addClass('selected');
				$("#closer-" + settings.id).show();
			} else {
				$(".selectitem", $("#"+settings.id+"-select")).removeClass('selected');
				$("#closer-" + settings.id).hide();
			}

			var currentValue = 'All tags';
			if (!select) {
				currentValue = settings.selectText;
			}

			$(".textshow",$("#"+settings.id+"-Text")).html(currentValue);
			
			return select;
		}

        return this.each(_handler);     
    }

  });

})(jQuery);