function CustomDDL(selectControl, customControl) {
    this.selectControl = selectControl;
    this.customControl = customControl;
    this.isOpen = false;

    this.initCustomDDL();
}

CustomDDL.prototype.UnselectAll = function() {
    this.customControl.children('li').removeClass('option_hover');
}

CustomDDL.prototype.Close = function() {
    this.UnselectAll();
    this.customControl.children('li.option').hide()
    this.isOpen = false;
}

CustomDDL.prototype.Open = function() {
    this.customControl.children('li.selected').removeClass('option_hover').addClass('option_hover');
    this.customControl.children('li').show();
    this.customControl.parent().focus();
    this.isOpen = true;
}

CustomDDL.prototype.Toggle = function() {
    if (this.isOpen) {
        this.Close();
    }
    else {
        this.Open();
    }
}

CustomDDL.prototype.initCustomDDL = function() {
    var currentDDL = this;

    this.customControl.find('.default').click(
        function() {
            currentDDL.Toggle();
        }
    );

    this.customControl.find('.option').hover(
        function() {
            currentDDL.UnselectAll();
            $(this).addClass('option_hover');
        },
        function() { }
     );

    this.customControl.find('.option').click(function() {
        currentDDL.customControl.find('.default').text($(this).text());
        currentDDL.customControl.find('.selected').removeClass('selected');
        $(this).addClass('selected');
        currentDDL.selectControl.find('option[value="' + $(this).attr("rel") + '"]').attr('selected', 'selected');
        currentDDL.selectControl.change();
        currentDDL.Close();
    });

    this.customControl.parent().blur(function() { currentDDL.Close(); });
}