/** jquery dropdown plugin
 *  
 *
*/
(function($) {
    var def = {
        width: '300px',
        height: '20px',
        bgColor: '#ffffff',
        fgColor: '#000000',
        arrow: 'img/arrow.png',
        arrowBg: '#ffffff',
		arrowWidth: 20
    };
    var openCountr = 0;
    function disableInput(e) {
        this.blur();
        return false;
    }
    function onExpand(e) {
        var me = $(this),
            menu = me.find('div.jq_dropdown_opts');

        if (me.data('opened') === true) {
            menu.hide();
            openCountr--;
            me.data('opened', false);
            me.css('z-index', '');
        } else {
            openCountr++;
            menu.show();
            me.data('opened', true);
            me.css('z-index', 100000 + openCountr);
        }
    }
    $.fn.toDropDown = function(opts) {
        opts = $.extend({}, def, opts || {});
        var w = parseInt(opts.width, 10);
		var arrowWidth = parseInt(opts.arrowWidth, 10);
        this.each(function() {
            var me = $(this),
            select = me,
            values = [],
            valuesToName = {},
            currentVal = me.val();
            me.find('option').each(function() {
                //collect select options
                var o = $(this);
                valuesToName[o.attr('value')] = o.html();
                values.push({ v: o.attr('value'), n: o.html() });

            });

            var nwContainer = $('<div />', {
                'class': 'jq_dropdown',
                css: {
                    position: 'relative',
                    'background-color': opts.bgColor,
                    color: opts.fgColor,
                    //border: 'solid 1px ' + opts.bgColor,
                    'background-image': 'url(' + opts.arrow + ')',
                    'background-position': 'right center',
                    width: opts.width,
                    height: opts.height
                },
                click: onExpand
            });
            var inputPadding = 5;
            var input = $('<input />', {
                'class': 'jq_dropdown_txt',
                //name: me.attr('name'),
                css: {
                    'background-color': opts.bgColor,
                    color: opts.fgColor,
                    //border: 'solid 1px ' + opts.bgColor,
                    border: 'none',
                    'padding-left': inputPadding,
                    width: (w - arrowWidth - inputPadding) + 'px',
                    height: opts.height
                }
            });
            input.val(valuesToName[currentVal] || '');
            nwContainer.append(input);

            var optionDv = $('<div />', {
                'class': 'jq_dropdown_opts',
                css: {
                    'display': 'none',
                    position: 'absolute',

                    top: '20px', left: '0px'
                }
            });
            for (var i = 0; i < values.length; i++) {
                $('<div />', {
                    'class': 'jq_dropdown_opts_value',
                    css: {
                        'background-color': opts.bgColor,
                        color: opts.fgColor,
                        width: (parseInt(opts.width, 10) - inputPadding),
                        'padding-left': inputPadding,
                        'padding-bottom': inputPadding,
                        cursor: 'pointer'
                    },
                    click: function() {
                        input.val($(this).data('label'));
                        select.val($(this).data('value'));

                    }
                }).data('value', values[i].v)
                    .data('label', values[i].n)
                    .html(values[i].n || values[i].v)
                    .appendTo(optionDv);
            }
            nwContainer.append(optionDv);

            //disable focus
            input.focus(disableInput);
            //me.replaceWith(nwContainer);
            me.before(nwContainer);
            me.hide();



        });
    };


})(jQuery);