var cursorInDropDown = false;

//select
;(function($) {

    $.fn.extend({

        //
        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({

        //
        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: "178px",
	            selectWorkableWidth: "158px",
	            selectImage: "image/select.png",
	            selectText: "Please select...",
	            selectedValue: "",
	            zIndex: 0,
	            viewHeight: "100px",
	            viewWidth: "300px",
	            viewMouseoverColor: "#cfdfff", //#dcdcdc
	            viewTop: "20px", //top,bottom
	            viewLeft: " -1px"//left,right
	        };


            if (typeof (options) != 'undefined') {
                //
                jQuery.extend(settings, options);
            }

            var tmp = '<div id="' + settings.id + '-select" style="background:url(images/btn-select-down-arrow.gif) bottom right no-repeat; cursor:default;font-size:11px;z-index:' + settings.zIndex + ';border: 1px solid #abadb3; padding: 1px; width: 180px; position: relative;">'
            tmp += '<div id="' + settings.id + '-Text" style="width: ' + settings.selectWidth + '; height: 16px; color: #333333; padding: 0  0 0 3px;">';
            tmp += '<div class="textshow-wrapper" style="width: ' + settings.selectWorkableWidth + ';">';
            tmp += '<div class="textshow" style="padding: 0 0 0 0;">' + settings.selectText + '</div><div class="valueshow" style="display:none;"></div></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 #999; background: white;"><div class="item-container"></div></div></div>';



            var _handler = function() {
                //
                $(this).parent().append(tmp);

                bindArrowClick();
                bindSelectMouseover();
                bindSelectMouseleave();
                loadItems($(this));

                $(document).bind('click', function(e) {
                    if (!cursorInDropDown) {
                        $('#' + settings.id + '-selectshow').hide();
                    }
                });
            };

            var loadItems = function(objTop) {
                var itemtext;
                var itemvalue;
                var selectedText = '';
                var selectedValue = '';
                var _viewWidth = settings.viewWidth;

                if (_viewWidth != '') {
                    _viewWidth = _viewWidth.replace("px", "");

                    if (_viewWidth != '') {
                        _viewWidth = (parseInt(_viewWidth,10) - 20) + "px";
                    }
                    
                    $("#" + settings.id + '-selectshow .item-container').css("width", _viewWidth);
                }

                objTop.find("div").each(function(index) {
                    if (index % 2 == 0) {
                        itemtext = $(this).html();
                        itemvalue = trim($(this).find("li.colourid").html());

                        //alert($(this).html());

                        var itemhtml = '<div class="selectitem"><div class="selecttext">' + itemtext
                    + '</div><div class="selectvalue" style=" display:none;">' + itemvalue + '</div><div class="cleaner"><div></div>';

                        $("#" + settings.id + '-selectshow .item-container').html($("#" + settings.id + '-selectshow .item-container').html() + itemhtml);

                        bindItemMouseover();

                        if (settings.selectedValue == itemvalue) {
                            selectedText = itemtext;
                            selectedValue = itemvalue
                        }
                    }
                });

                if (selectedValue != '' && settings.selectedValue != '') {
                    $(".textshow", $("#" + settings.id + "-Text")).html(selectedText);
                    $(".valueshow", $("#" + settings.id + "-Text")).html(selectedValue);
                }
            };

            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();
                        $(".textshow", $("#" + settings.id + "-Text")).html(tmpstr);
                        document.getElementById(settings.id + '-selectshow').style.display = "none";

                        $(".valueshow", $("#" + settings.id + "-Text")).html($(".selectvalue", $(this)).html());

                        if (postSelection) { postSelection(e); }
                    });

                    inx++;
                }

            }

            var bindSelectMouseover = function() {
                $('#' + settings.id + '-selectshow').bind("mouseover", function() {
                    //if($.browser.msie==false)
                    //    $('#'+settings.id+'-Text').css("background-position","0 -21px");
                    cursorInDropDown = true;
                });
            }

            var bindSelectMouseleave = function() {
                $('#' + settings.id + '-selectshow').bind("mouseout", function() {
                    //if($.browser.msie==false)   {
                    //$('#'+settings.id+'-selectshow').css("background-position","0 0px");
                    //}
                    cursorInDropDown = false;
                });
            }

            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;
            }


            //
            //<span class="thistext"></span>
            //<span class="thistext"></span>
            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);