/*
jquery.fixSelect

Fixes an whereby IE chops long options in a select box with fixed width. It does this by
surrounding the element within a span of the same width with overflow-x set to hidden,
and setting the select width to auto on a mousedown or keyup event then back to its
previous value on blur.

Syntax:

    $jQueryCollection.fixSelect([minWidth]);

The minWidth parameter is optional, but can be used to hard set a width for the elements.
If the result doesn't look quite right, you can use CSS to fix the result: the added span
wrapping the select element has the class "selectFix" to make this possible.

Two custom events are exposed:

    - "initfix" will recompute the natural width of the element; and
    - "applyfix" will resize the select element (e.g. after assigning focus programmatically).

(Merciful heavens, IE should just be taken outside and *shot*. This apparently simple code
involved more obscure bug workarounds than I have time or space to document.)
*/

(function($) {

$.fn.fixSelect = function(minWidth) {
    /* Fix only applies to IE 8 and below. */
    return (!($.browser.msie && $.browser.version < 9)) ? this : this.each(function() {
        if (this.tagName.toLowerCase() == 'select') { // Also only applies to select elements.

            var el = this,
            $this = $(this),
            minWidth = minWidth ? minWidth : el.offsetWidth, // Current width used as minimum.
            elementWidth = $this.outerWidth(),
            $wrapper = $('<span class="selectFix"></span>').css({ // Wraps the select element.
                display: ($this.css('display') == 'block') ? 'block' : 'inline-block',
                cssFloat: $this.css('float'),
                overflowX: 'hidden',
                overflowY: 'visible',
                width: minWidth
            }),
            naturalWidth;

            /* Set up element margins on wrapper instead. (For more complex styles, use CSS.) */
            $.each('marginTop marginRight marginBottom marginLeft'.split(' '), function(i, prop) {
                $wrapper.css(prop, $this.css(prop));
                $this.css(prop, 0);
            });

            if ($this.is(':visible')) { // Doesn't work for invisible elements, they have zero width!
                /* Determine what the "natural" (i.e. automatic) width would be. */
                $this.width('auto');
                naturalWidth = $this.outerWidth();
                $this.width(minWidth);

                $this
                .wrap($wrapper)
                .bind('mousedown keyup applyfix', function() {
                    /* Use "auto" or fixed width, whichever is biggest. */
                    $this.width((naturalWidth < elementWidth) ? minWidth : 'auto');
                    /* Horribly, IE 6 will ignore the overflow anyway unless some part of the
                    select element is already hidden before the options list is displayed. */
                    if ($.browser.version == 6) $this.css('marginLeft', 1);
                })
                .blur(function() {
                    /* Reset the element to fixed width. */
                    $this.width(minWidth);
                    if ($.browser.version == 6) $this.css('marginLeft', 0);
                })
                .bind('initfix', function() {
                    /* Recalculate "natural" width. */
                    $this.width('auto');
                    naturalWidth = $this.outerWidth();
                    $this.width(minWidth);
                });
            }
        }
    });
}

})(jQuery);