var Simple_DropDown = (function () {

    var _self = this,
        _data = null,
        _shell_wrapper = $('#shell_wrapper');

    this.init = function (data) {
        _data = (data) ? data : getData()
        domInit();
    }


    var domInit = function () {

        let _instanceNo = _data.instanceNo || 1;
        let _drop_down = $("#drop_down_" + _instanceNo + " .simple_drop_down_holder");
        var _ddItem = $(`
                <div id="simple_drop_down_${_instanceNo}" class="simple_drop_down">
                    <div class="ui dropdown labeled inline disabled" role="listbox" tabindex="0">
                        <span class="text" aria-atomic="true" aria-live="polite" role="option" aria-selected="false">Select here</span>
                        <div class="menu transition hidden"></div>
                        </div>
                    </div>
                </div>
            `)

        _drop_down.append(_ddItem);

        let _menu = _drop_down.find('.menu');

        $.each(_data, function (i, item) {
            var _ddOption = $(`
                    <div
                    id = "dd-item_${_instanceNo}_${item.id}"
                    class = "item dd-item_${_instanceNo}_${item.id}"
                    aria-label = "${item['label']}"
                    role="option"
                    value = "${_instanceNo}_${item.id}" 
                    data-iNo = "${_instanceNo}" 
                    data-oNo = "${item.id}">${item['label']}</div>
            `)
            _menu.append(_ddOption);
        })

        addEvents()
    }

    var addEvents = function () {
        // globally inherited on init      
        $('.ui.dropdown').dropdown({
            onChange: function (value, text, sItem) {
                let aD = _data['pageData']['aD'];
                let iNo = sItem.attr('data-iNo');
                let oNo = sItem.attr('data-oNo');
                aD[iNo] = {
                    'oNo': oNo
                };
                let _dd = {
                    'iNo': iNo,
                    'oNo': oNo
                }
                _shell_wrapper.trigger("dropdownChange", _dd);
                // console.log('-- dropdown', _data)
            }
        });

    }


    var getData = function () {
        var _data = {};
        _data['audio'] = {
            url: "./shell/audio/blank.mp3",
            autoplay: true,
            timeline: [{}]
        }
        return _data
    }

    return this;

})