var obj;

if (typeof jQuery != 'undefined') {
    $.fn.dropDown = function (options) {
        var defaults = {
            //default class for dropdown textarea
            left: "ddlText",
            //default class for dropdown button
            button: "ddlButton",
            //default dropdown option list height
            optionListHeight: "150",
            //default dropdown option list color
            optionListBorderColor: "ffffff",
            //default dropdown option list background-color
            optionListBackgroundColor: "ffffff",
            //default optionList left and right margin
            optionLeftAndRightMargin: "32"
        };
        var options = $.extend(defaults, options);
        $('select', this).hide();
        obj = $(this);
        StartStyleDropDown(options);
    }

    function StartStyleDropDown(o) {


        var leftClass = o.left;
        var buttonClass = o.button;
        var optionHeight = o.optionListHeight;
        var color = o.optionListBorderColor;
        var bgColor = o.optionListBackgroundColor;
        //create left input and right button for new dropdown list
        var leftInput = $('<div class="' + leftClass + '"></div>');
        var span = $('<span></span>');
        var ddlButton = $('<a href="" class="' + buttonClass + '"></a>');

        //append that to ddlWrapper class
        $(obj).append(leftInput);
        $(leftInput).append(span);
        $(obj).append(ddlButton);

        //setting width and height for ddlWrapper
        $(obj).css({ width: ($(leftInput).width() + $(ddlButton).width()) + "px", height: $(leftInput).height() + "px", position: "relative", "z-index": "1", float: "left" });

        //creating option list wrapper
        var optionList = $('<div class="optionList" style="width:' + ($(obj).width() * 2 - o.optionLeftAndRightMargin * 2) + 'px; max-height:' +
        optionHeight + 'px; height:auto; overflow-y:auto; float:left; position:absolute; top:' + $(obj).height() + 'px; left:' + '0' + 'px; display:none; background-color:#' + bgColor + '; border:1px solid #' + color + '; border-top:0px; cursor:pointer;"></div>');

        var optionItem = null;
        $('select option', obj).each(function () {
            optionItem = $('<span style="width:96%; float:left; padding:0 2%;" val="' + $(this).val() + '">' + $(this).text() + '</span>');
            $(optionList).append(optionItem);
        });

        $(obj).append(optionList);

        //$(span, obj).text($('.optionList span:first').text());
        $(span, obj).text($('.optionList span:first', obj).text());

        $('.optionList span').hover(
            function () {
                $(this).css({ "background-color": "#" + color, color: "#ffffff" });
            },
            function () {
                $(this).css({ "background-color": "#fff", color: "#000" });
            });

        $("." + buttonClass, obj).click(function (e) {
            e.preventDefault();
            if ($(this).next().css('display') == "none") {
                $('.ddlWrapper').css('z-index', '1');
                $(this).parent().css('z-index', '100000');
            }
            $(optionList).slideToggle('normal');
        });

        $("." + leftClass, obj).click(function (e) {
            e.preventDefault();
            if ($(this).next().next().css('display') == "none") {
                $('.ddlWrapper').css('z-index', '1');
                $(this).parent().css('z-index', '100000');
            }
            $(optionList).slideToggle('normal');
        });

        $('.optionList span', obj).click(function () {

            $(span).text($(this).text());

            $('select', obj).val($(this).attr('val'));
            $(optionList).slideToggle('normal');
            $('select', obj).change();
           
           
        });

    }
}