text: document.title = l('settingsPreferencesHeading') + ' | Min'
  
  var container = document.getElementById('privacy-settings-container')
  var trackerCheckbox = document.getElementById('checkbox-block-trackers')
  var banner = document.getElementById('restart-required-banner')
  var darkModeCheckbox = document.getElementById('checkbox-dark-mode')
  var historyButtonCheckbox = document.getElementById('checkbox-history-button')
  var swipeNavigationCheckbox = document.getElementById('checkbox-swipe-navigation')
  
  function showRestartRequiredBanner () {
    banner.hidden = false
  }
  
  var contentTypes = {
      // humanReadableName: contentType
    'scripts': 'script',
    'images': 'image'
  }
  
  // used for showing localized strings
  var contentTypeSettingNames = {
    'scripts': 'settingsBlockScriptsToggle',
    'images': 'settingsBlockImagesToggle'
  }
  
  settings.get('keyMap', function (keyMapSettings) {
    var keyMap = userKeyMap(keyMapSettings)
  
    var keyMapList = document.getElementById('key-map-list')
  
    Object.keys(keyMap).forEach(function (action) {
      var li = createKeyMapListItem(action, keyMap)
      keyMapList.appendChild(li)
    })
  })
  
  function createKeyMapListItem (action, keyMap) {
    var li = document.createElement('li')
    var label = document.createElement('label')
    var input = document.createElement('input')
    label.innerText = formatCamelCase(action)
    label.htmlFor = action
  
    input.type = 'text'
    input.id = input.name = action
    input.value = keyMap[action]
    input.addEventListener('change', onKeyMapChange)
  
    li.appendChild(label)
    li.appendChild(input)
  
    return li
  }
  
  function formatCamelCase (text) {
    var result = text.replace(/([A-Z])/g, ' $1')
    return result.charAt(0).toUpperCase() + result.slice(1)
  }
  
  function onKeyMapChange (e) {
    var action = this.name
    var newValue = this.value
  
    settings.get('keyMap', function (keyMapSettings) {
      if (!keyMapSettings) {
        keyMapSettings = {}
      }
  
      keyMapSettings[action] = parseKeyInput(newValue)
      settings.set('keyMap', keyMapSettings, function () {
        showRestartRequiredBanner()
      })
    })
  }
  
  function parseKeyInput (input) {
      // input may be a single mapping or multiple mappings comma separated.
    var parsed = input.split(',')
    parsed = parsed.map(function (e) { return e.trim() })
      // Remove empty
    parsed = parsed.filter(Boolean)
    return parsed.length > 1 ? parsed : parsed[0]
  }
  
  for (var contentType in contentTypes) {
  
    (function (contentType) {
  
      settings.get('filtering', function (value) {
  
              // create the settings section for blocking each content type
  
        var section = document.createElement('div')
        section.classList.add('setting-section')
  
        var id = 'checkbox-block-' + contentTypes[contentType]
  
        var checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        checkbox.id = id
  
        if (value && value.contentTypes) {
          checkbox.checked = value.contentTypes.indexOf(contentTypes[contentType]) != -1
        }
  
        var label = document.createElement('label')
        label.setAttribute('for', id)
        label.textContent = l(contentTypeSettingNames[contentType])
  
        section.appendChild(checkbox)
        section.appendChild(label)
  
        container.appendChild(section)
  
        checkbox.addEventListener('change', function (e) {
          settings.get('filtering', function (value) {
            if (!value) {
              value = {}
            }
            if (!value.contentTypes) {
              value.contentTypes = []
            }
  
            if (e.target.checked) { // add the item to the array
              value.contentTypes.push(contentTypes[contentType])
            } else { // remove the item from the array
              var idx = value.contentTypes.indexOf(contentTypes[contentType])
              value.contentTypes.splice(idx, 1)
            }
  
            settings.set('filtering', value)
            banner.hidden = false
          })
        })
  
      })
  
    })(contentType)
  
  }
  
  settings.get('filtering', function (value) {
    if (value) {
      trackerCheckbox.checked = value.trackers
    }
  })
  
  trackerCheckbox.addEventListener('change', function (e) {
    settings.get('filtering', function (value) {
      if (!value) {
        value = {}
      }
      value.trackers = e.target.checked
      settings.set('filtering', value)
      banner.hidden = false
    })
  })
  
  // Dark Mode Settings
  settings.get('darkMode', function (value) {
    darkModeCheckbox.checked = value
  })
  
  darkModeCheckbox.addEventListener('change', function (e) {
    settings.set('darkMode', this.checked)
    showRestartRequiredBanner()
  })
  
  // History buttons settings
  
  settings.get('historyButton', function (value) {
    if (value === true || value === undefined) {
      historyButtonCheckbox.checked = true
    } else {
      historyButtonCheckbox.checked = false
    }
  })
  
  historyButtonCheckbox.addEventListener('change', function (e) {
    settings.set('historyButton', this.checked)
    showRestartRequiredBanner()
  })
  
  // Swipe navigation settings
  
  settings.get('swipeNavigationEnabled', function (value) {
    if (value === true || value === undefined) {
      swipeNavigationCheckbox.checked = true
    } else {
      swipeNavigationCheckbox.checked = false
    }
  })
  
  swipeNavigationCheckbox.addEventListener('change', function (e) {
    settings.set('swipeNavigationEnabled', this.checked)
    showRestartRequiredBanner()
  })
  
  /* default search engine setting */
  
  var searchEngineDropdown = document.getElementById('default-search-engine')
  
  settings.onLoad(function () {
  
    for (var searchEngine in searchEngines) {
  
      var item = document.createElement('option')
      item.textContent = searchEngines[searchEngine].name
  
      if (searchEngines[searchEngine].name == currentSearchEngine.name) {
        item.setAttribute('selected', 'true')
      }
  
      searchEngineDropdown.appendChild(item)
    }
  
  })
  
  searchEngineDropdown.addEventListener('change', function (e) {
    settings.set('searchEngine', this.value)
    showRestartRequiredBanner()
  })
  