(function() {
    var filterable;
    var selectContainers;
    var originalSelect;
    var substituteSelect;
    var substituteDropDownPanel;
    var substituteOption;
    var filterInput;

    selectContainers = document.querySelectorAll('.styled-select-container');

    for (var i = 0; i < selectContainers.length; i++) {
        filterable = selectContainers[i].classList.contains('filterable');
        originalSelect = selectContainers[i].getElementsByTagName('select')[0];

        substituteSelect = document.createElement('DIV');
        substituteSelect.setAttribute('class', 'substitute-select');
        substituteSelect.innerHTML = originalSelect.options[originalSelect.selectedIndex].innerHTML;
        substituteSelect.setAttribute('tabindex', [-1]); /* to handle focus and blur events. */
        substituteSelect.addEventListener('click', handleClickedSelect);
        selectContainers[i].appendChild(substituteSelect);

        substituteDropDownPanel = document.createElement('DIV');
        substituteDropDownPanel.setAttribute('class', 'substitute-select-options-panel substitute-select-closed');
        substituteDropDownPanel.setAttribute('tabindex', [-1]); /* to handle focus and blur events. */

        if (filterable) {
            filterInput = document.createElement('INPUT');
            filterInput.setAttribute('type', 'text');

            filterInput.setAttribute('placeholder', substituteSelect.innerHTML);
            filterInput.setAttribute('class', 'filterInput');
            filterInput.setAttribute('tabindex', [-1]); /* to handle focus and blur events. */
            substituteSelect.appendChild(filterInput);
        }

        for (var j = 1; j < originalSelect.options.length; j++) {
            substituteOption = document.createElement('DIV');
            substituteOption.setAttribute('class', 'substitute-option');
            substituteOption.innerHTML = originalSelect.options[j].innerHTML;
            substituteOption.setAttribute('tabindex', [j - 1]); /* to handle focus and blur events. */
            substituteOption.addEventListener('click', handleClickedOption);
            substituteDropDownPanel.appendChild(substituteOption);
        }

        if (filterable) {
            var noMatch = document.createElement('DIV');
            noMatch.setAttribute('class', 'no-match');
            noMatch.innerHTML = 'No match found';
            noMatch.style.display = 'none';
            substituteDropDownPanel.appendChild(noMatch);
        }

        selectContainers[i].appendChild(substituteDropDownPanel);
    }

    function handleClickedSelect(e) {
        var select = this;
        var selectContainer = this.closest('.styled-select-container');
        var dropdown = selectContainer.querySelector('.substitute-select-options-panel');
        var options = selectContainer.querySelectorAll('.substitute-option');
        var filterInput = select.querySelector('.filterInput');

        e.preventDefault();
        e.stopPropagation();

        closeAllSelect(e);

        select.classList.toggle('substitute-select-open');
        dropdown.classList.toggle('substitute-select-closed');

        if (filterInput) {
            filterInput.addEventListener('focus', filterOptions);
            filterInput.addEventListener('keyup', filterOptions);
            filterInput.value = '';
            if (select.classList.contains('substitute-select-open')) {
                filterInput.focus();
            } else {
                for (var i = 0; i < options.length; i++) {
                    var selected = options[i].classList.contains('selected');
                    if ( selected) {
                        var selectedOption =  options[i].innerHTML;
                        filterInput.setAttribute('placeholder', selectedOption);
                    }
                }
                filterInput.blur();
            }
        }
    }

    function handleClickedOption(e) {
        var clickedOption = this;
        var selectContainer = this.closest('.styled-select-container');
        var originalSelect = selectContainer.getElementsByTagName('select')[0];
        var originalOptions = originalSelect.options;
        var select = selectContainer.querySelector('.substitute-select');
        var options = selectContainer.querySelectorAll('.substitute-option');
        var filterInput = select.querySelector('.filterInput');

        e.preventDefault();

        for (var i = 0; i < originalOptions.length; i++) {
            if (originalOptions[i].innerHTML == clickedOption.innerHTML) {
                originalSelect.selectedIndex = i;
                if (!filterInput) {
                    select.innerHTML = clickedOption.innerHTML;
                } else {
                    filterInput.value = '';
                    filterInput.placeholder = clickedOption.innerHTML;
                }

                for (var k = 0; k < options.length; k++) {
                    options[k].classList.remove('selected');
                }
                clickedOption.classList.add('selected');
                break;
            }
        }
        select.click();
    }

    function closeAllSelect(e) {
        var allSelectContainers = document.getElementsByClassName('styled-select-container');

        for (var i = 0; i < allSelectContainers.length; i++) {
            var select = allSelectContainers[i].querySelector('.substitute-select');
            var dropdown = allSelectContainers[i].querySelector('.substitute-select-options-panel');
            var filterInput = select.querySelector('.filterInput');

            if (e.target == select || e.target == filterInput) {
                // Stay open to select your options
                if (filterInput) {
                    // Or filter your options
                    filterInput.addEventListener('keyup', filterOptions);
                }
            } else {
                // Close
                select.classList.remove('substitute-select-open');
                dropdown.classList.add('substitute-select-closed');
                if (filterInput) {
                    filterInput.value = '';
                    var substituteOptions = allSelectContainers[i].querySelectorAll('.substitute-option');

                    for (var x = 0; x < substituteOptions.length; x++) {
                        var selected = substituteOptions[x].classList.contains('selected');
                        if (selected) {
                            var selectedOption = substituteOptions[x].innerHTML;
                            filterInput.setAttribute('placeholder', selectedOption);
                        }
                    }
                }
            }
        }
    }

    function filterOptions(e) {
        var filterInput = this;
        var selectContainer = this.closest('.styled-select-container');
        var options = selectContainer.querySelectorAll('.substitute-option');
        var noMatch = selectContainer.querySelector('.no-match');
        var filterText = filterInput.value.toUpperCase();
        var noMatchedOptionCount = 0;

        e.preventDefault();
        e.stopPropagation();

        for (var i = 0; i < options.length; i++) {
            var txtValue = options[i].textContent || options[i].innerText;
            if (txtValue.toUpperCase().indexOf(filterText) > -1) {
                options[i].style.display = '';
                if (noMatchedOptionCount > 0) {
                    noMatchedOptionCount -= 1;
                }
            } else {
                options[i].style.display = 'none';
                noMatchedOptionCount += 1;
            }
        }
        if (noMatchedOptionCount == options.length) {
            noMatch.style.display = '';
        } else {
            noMatch.style.display = 'none';
        }
    }

    document.addEventListener('click', closeAllSelect);

    // Test for placeholder support
    function placeholderIsSupported() {
        var input = document.createElement('input');
        return ('placeholder' in input);
    }
    // If placeholder text is supported, we can hide the <label> elements on page load.
    // Hiding the labels with JavaScript after the page loads ensures
    // that browsers with JavaScript turned off (and those without placeholder support)
    // can still use the form.

    // Hide labels by default if placeholders are supported and inputs are empty
    if(placeholderIsSupported) {
        var floatLabels = document.querySelectorAll('div.float-label');

        for(var floatLabel of floatLabels) {
            var customSelect = floatLabel.querySelector('.styled-select-container');

            if (customSelect) {
                var substituteSelect = customSelect.querySelector('.substitute-select');
                var substituteOptions = customSelect.querySelectorAll('.substitute-select-options-panel .substitute-option');
                var preSelect = false;

                for (substituteOption of substituteOptions) {
                    if (substituteSelect.innerHTML.includes(substituteOption.innerHTML)) {
                        preSelect = true;
                        break;
                    }
                }

                preSelect ? floatLabel.classList.add('js-unhighlight-label') : floatLabel.classList.add('js-hide-label');

                substituteSelect.addEventListener("blur", handleClasses());
                substituteSelect.addEventListener("focus", handleClasses());

                for (substituteOption of substituteOptions) {
                    substituteOption.addEventListener("blur", handleClasses());
                    substituteOption.addEventListener("focus", handleClasses());
                };

                var filterInput = customSelect.querySelector('.filterInput');
                if (filterInput) {
                    filterInput.addEventListener("blur", handleClasses());
                    filterInput.addEventListener("focus", handleClasses());
                }
            }
        }
    }

    function handleClasses() {
        return function(e) {
            e.preventDefault();

            var parentElement = this.closest('.float-label');
            var actualSelect = parentElement.getElementsByTagName("select")[0];

            if (e.type == 'blur') {
                if( actualSelect.value == '') {
                    parentElement.classList.add('js-hide-label');
                } else {
                    parentElement.classList.remove('js-hide-label');
                    parentElement.classList.add('js-unhighlight-label');
                }
            } else if (e.type == 'focus') {
                if( actualSelect.value != '') {
                    parentElement.classList.remove('js-hide-label');
                    parentElement.classList.remove('js-unhighlight-label');
                }
            }
        };
    };
}());