function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.dd.on('click', function (event) {
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click', function () {            
            var opt = $(this);
            var hidden = $(this).find('[type=hidden]').val();
            $("#hdCategory").val(hidden);
            obj.val = opt.text();
            obj.index = opt.index();
            //obj.placeholder.text(obj.val);
            $("#spanCategory").text(obj.val);
            $("#imageMain").attr('src', $(this).find('img').attr('src'));            
            if (hidden != "0") {
                $("#imageMain").css("width", "18px");
                $("#imageMain").css("height", "24px");
                showHideHotspotType(false);                
            }
            else {
                $("#imageMain").css("width", "24px");
                $("#imageMain").css("height", "24px");
                showHideHotspotType(true);
            }
        });
    },
    getValue: function () {
        return this.val;
    },
    getIndex: function () {
        return this.index;
    }
}

$(function () {

    var dd = new DropDown($('#dd'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });

});