(function($) {
    $.fn.dselect = function(autoPostBack) {
        var id = $(this).attr("id");
        var action = $(this).attr("onchange");
        var name = $(this).attr("name");
        var title = $(this).attr("title")
        $(this).hide();

        // ----- generate equivalent markups -----

        var menuId = "dselect_" + id;
        // <option>'s selected attribute is considered binary; not as an attribute name which can have different values
        var initialSelection = $(this).find("option:selected").text();
        var initialSelectionVal = $(this).find("option:selected").attr("value");
        var menuHtml = '<div id="' + menuId + '" class="dropdown clearfix">' + "\n";
        if (title)
            menuHtml += '	<div class="ddTitle">' + title + '</div>' + "\n";
        menuHtml += '	<div class="arrow">' + "\n" +
    					'		<div class="list">' + "\n" +
      					'			<p title="' + initialSelection + '" id="' + initialSelectionVal + '">' + initialSelection + '</p>' + "\n" +
						'		</div>' + "\n" +
						'	</div>' + "\n" +
						'</div>';

        var menuItemId = menuId + "_item";
        var menuItemHtml = '<div id="' + menuItemId + '" class="dropdownitem">' + "\n";
        menuItemHtml += '<div id="firstItem">&nbsp;</div>';
        // iterate all <option>
        $(this).find("option").each(function(i) {
            // e.g. <p id="1_value">value</p>
            menuItemHtml += '<p class="' + $(this).attr("value") + '" id="' + i + '___' + $(this).attr("value") + '">' + $(this).text() + '</p>' + "\n";
        });
        menuItemHtml += '</div>';
        $(this).before(menuHtml + menuItemHtml);

        // ----- visual initialization -----

        $("#" + menuItemId).hide();

        // ----- event handling -----

        var menuSelector = '#' + menuId;
        var menuItemSelector = '#' + menuItemId;

        $(menuSelector).click(function() {
            // show items list
            $(menuItemSelector).slideToggle("fast");

            if (navigator.userAgent.indexOf("Opera") > -1) {

                if (menuItemSelector.indexOf("sEmailAddress") > -1) {
                    var l = getObj("sEmailAddress", "div").offsetLeft;
                    $(menuItemSelector)[0].style.left = l + 16;
                }
                if (menuItemSelector.indexOf("sPhone") > -1) {
                    var l = document.getElementById("dselect_sPhone").offsetLeft;
                    $(menuItemSelector)[0].style.left = l + 16;

                }
                if (menuItemSelector.indexOf("ddlDialCode") > -1) {
                    var s = new String(document.location.href);
                    var lng = s.length;
                    var c = s.substring(lng - 1, lng);
                    var l = getObj("ddlDialCode", "div").offsetLeft;
                    
                    if (document.location.href.indexOf("index.html") > -1 || c == "/") {
                        $(menuItemSelector)[0].style.left = l;
                    }
                    else {
                        $(menuItemSelector)[0].style.left = l + 16;
                    }

                }


            }

            if (navigator.userAgent.indexOf("Safari") > -1) {

                if (menuItemSelector.indexOf("sEmailAddress") > -1) {

                    $(menuItemSelector)[0].setAttribute("style", "margin-left:196px");
                }
                if (menuItemSelector.indexOf("sPhone") > -1) {
                    $(menuItemSelector)[0].setAttribute("style", "margin-left:283px");
                }
                if (menuItemSelector.indexOf("ddlDialCode") > -1) {
                    var s = new String(document.location.href);
                    var lng = s.length;
                    var c = s.substring(lng - 1, lng);
                    /* If it's homepage */
                    if (document.location.href.indexOf("index.html") > -1 || c == "/") {
                        $(menuItemSelector)[0].setAttribute("style", "margin-left:16px");
                    }
                    else {
                        $(menuItemSelector)[0].setAttribute("style", "margin-left:19px");
                    }


                }

            }
            // only care when the menu item is visible
            if ($(menuItemSelector).css("display") != "none") {
                //var offset = $(this).offset();
                //$(menuItemSelector).css("left", offset.left + "px");
                //$(menuItemSelector).css("top", offset.top + 19 + "px");

                // highlight item list that is currently selected
                var currentVal = $(menuSelector + ' p').attr("id");
                $(menuItemSelector + ' p').each(function() {
                    var pId = $(this).attr("id").split("___");
                    var itemVal = pId[1];
                    if (itemVal == currentVal) {
                        $(this).addClass("selected");
                    }
                });
            }
        });

        $(menuItemSelector + ' p').mouseover(function() {
            // make sure other list item is not selected
            $(menuItemSelector + ' p').removeClass("selected");

            $(this).addClass("selected");
        });

        $(menuItemSelector + ' p').mouseout(function() { $(this).removeClass("selected"); });

        $(menuItemSelector + ' p').click(function() {
            // update current selection
            $(menuSelector + ' p').text($(this).text());
            var cls = $(this).attr('class');
            cls = cls.substring(0, cls.indexOf("selected") - 1);
            $(menuSelector + ' p').attr('id', cls);
            // hide items list
            $(menuItemSelector).hide();

            // update the original <option>
            var pId = $(this).attr("id").split("___");
            var itemIdx = pId[0];
            var menuOriSelector = "#" + id;
            $(menuOriSelector)[0].selectedIndex = itemIdx;
            if (autoPostBack)
                setTimeout("__doPostBack('" + name + "','')", 0);

        });

        // hide menu when user clicks anywhere but the dropdown
        $(document).mouseup(function(event) {
            var fromDropdown = $(event.target).parents(menuSelector).length;
            if (fromDropdown == 0) {	// 0 means the event is not originated from the dropdown
                $(menuItemSelector).hide();
            }
        });
    }
})(jQuery);