var Settings = (function() {
    var displayed = false,
        currentPage = null,

    pages = {
        services: "services",
        display: "display",
        privacy: "privacy"
    },

    spawn = function() {
        document.getElementById(R.id.settings.wrapper).classList.remove(R.klass.hidden);

        // SERVICES
        var serviceFrag = document.createDocumentFragment(),
            hasServices = false;
        for (var i in CONFIG.services) {
            var provider = CONFIG.services[i];
            for (var service in provider) {
                var serviceItem = document.createElement("li"),
                    providerDom = document.createElement("span"),
                    serviceDom = document.createElement("span");

                providerDom.textContent = i;
                serviceDom.textContent = provider[service];
                serviceItem.className = R.klass.settings.services.item;
                providerDom.className = R.klass.settings.services.provider;
                serviceDom.className = R.klass.settings.services.service;
                serviceItem.appendChild(providerDom);
                serviceItem.appendChild(serviceDom);
                serviceFrag.appendChild(serviceItem);
                hasServices = true;
            }
        }
        var serviceListDom = document.getElementById(R.id.settings.services.serviceList);
        serviceListDom.textContent = "";
        if (hasServices) {
            document.getElementById(R.id.settings.services.serviceListEmpty).classList.remove(R.klass.hidden);
            serviceListDom.appendChild(serviceFrag);
        } else {
            document.getElementById(R.id.settings.services.serviceListEmpty).classList.add(R.klass.hidden);
        }

        // EMOJIS
        var emojiFrag = document.createDocumentFragment(),
            emojiList = document.getElementById(R.id.settings.display.emojiProvider);
        for (var i in EmojiProvider) {
            var opt = document.createElement("option");
            opt.value = i;
            opt.textContent = EmojiProvider[i].name;
            if (EmojiProvider[i] === CURRENT_EMOJI_PROVIDER)
                opt.selected = true;
            emojiFrag.appendChild(opt);
        }
        emojiList.textContent = "";
        emojiList.appendChild(emojiFrag);

        document.getElementById(R.id.settings.display.displayAvatar).checked = CONFIG.isDisplayAvatars();
        document.getElementById(R.id.settings.display.colorfulNames).checked = CONFIG.isColorfulNames();
        document.getElementById(R.id.settings.display.scrollAvatars).checked = CONFIG.isScrollAvatars();

        displayed = true;
    },

    setVisiblePage = function(page) {
        if (currentPage) {
            document.getElementById(R.id.settings.wrapper).classList.remove("display-" +currentPage);
            document.getElementById("setting-menu-" +currentPage).classList.remove(R.klass.selected);

            document.getElementById(R.id.settings.services.addSection).classList.add(R.klass.hidden);
        }
        document.getElementById(R.id.settings.wrapper).classList.add("display-" +page);
        document.getElementById("setting-menu-" +page).classList.add(R.klass.selected);
        currentPage = page;
    },

    close = function() {
        document.getElementById(R.id.settings.wrapper).classList.add(R.klass.hidden);
        displayed = false;
    };

    document.getElementById(R.id.settings.menu.list).addEventListener("click", function(e) {
        for (var target = e.target; e.currentTarget !== target && target; target = target.parentNode) {
            if (target.dataset && target.dataset["target"]) {
                for (var i in pages) {
                    if (pages[i] === target.dataset["target"]) {
                        setVisiblePage(pages[i]);
                        return;
                    }
                }
            }
        }
    });

    document.getElementById(R.id.settings.closeButton).addEventListener("click", close);

    document.getElementById(R.id.settings.services.addButton).addEventListener("click", function(e) {
        e.preventDefault();
        document.getElementById(R.id.settings.services.addSection).classList.remove(R.klass.hidden);
        return false;
    });

    document.getElementById(R.id.settings.services.serviceAddConfirm).addEventListener("click", function(e) {
        e.preventDefault();
        document.location.href = document.getElementById(R.id.settings.services.serviceProviderList).value;
        return false;
    });

    document.getElementById(R.id.settings.commitBt).addEventListener("click", function() {
        var newSettings = {},
            emojiProvider = document.getElementById(R.id.settings.display.emojiProvider).value;

        if (emojiProvider !== CONFIG.getEmojiProvider()) {
            newSettings["emojiProvider"] = document.getElementById(R.id.settings.display.emojiProvider).value;
        }
        var displayAvatar = !!document.getElementById(R.id.settings.display.displayAvatar).checked;
        if (displayAvatar !== CONFIG.isDisplayAvatars()) {
            newSettings["displayAvatar"] = displayAvatar;
        }
        var isColorfulNames = !!document.getElementById(R.id.settings.display.colorfulNames).checked;
        if (isColorfulNames !== CONFIG.isColorfulNames()) {
            newSettings["colorfulNames"] = isColorfulNames;
        }
        var isScrollAvatars = !!document.getElementById(R.id.settings.display.scrollAvatars).checked;
        if (isScrollAvatars !== CONFIG.isScrollAvatars()) {
            newSettings["scrollAvatars"] = isScrollAvatars;
        }
        CONFIG.commitNewSettings(newSettings);
        close();
    });

    return {
        /** @type {function(string=)} */
        display: function(page) {
            if (!displayed)
                spawn();
            setVisiblePage(page || pages.services);
            return this;
        },

        /** @type {function(boolean)} */
        setClosable: function(closable) {
            return this;
        },

        pages: pages
    };
})();