Moved option-related JS classes behind options namespace

BUG=none
TEST=make sure options still work

Review URL: http://codereview.chromium.org/3027003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@54350 0039d316-1c4b-4281-b951-d872f2087c98

20 files changed, 1799 insertions, 1551 deletions

diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index fb2e0bc..2214089 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -29,6 +29,13 @@
   <script src="options/chromeos_accounts_options.js"></script>
   <script src="options/chromeos_accounts_user_list.js"></script>
   <script src="options/chromeos_accounts_user_name_edit.js"></script>
+  <script>
+    var AccountsOptions = options.AccountsOptions;
+    var InternetOptions = options.InternetOptions;
+    var LanguageHangulOptions = options.LanguageHangulOptions;
+    var LanguageOptions = options.LanguageOptions;
+    var SystemOptions = options.SystemOptions;
+  </script>
 </if>
 <script src="options/add_startup_page_overlay.js"></script>
 <script src="options/advanced_options.js"></script>
@@ -44,8 +51,19 @@
 <script src="options/stop_syncing_overlay.js"></script>
 <script>
 
-///////////////////////////////////////////////////////////////////////////////
-// Document Functions:
+var AddStartupPageOverlay = options.AddStartupPageOverlay;
+var AdvancedOptions = options.AdvancedOptions;
+var BrowserOptions = options.BrowserOptions;
+var ClearBrowserDataOverlay = options.ClearBrowserDataOverlay;
+var ContentSettings = options.ContentSettings;
+var FontSettingsOverlay = options.FontSettingsOverlay;
+var ImportDataOverlay = options.ImportDataOverlay;
+var OptionsPage = options.OptionsPage;
+var PersonalOptions = options.PersonalOptions;
+var Preferences = options.Preferences;
+var SearchEngineManager = options.SearchEngineManager;
+var StopSyncingOverlay = options.StopSyncingOverlay;
+
 /**
  * Window onload handler, sets up the page.
  */
@@ -113,9 +131,8 @@ function load() {
 document.addEventListener('DOMContentLoaded', load);
 
 window.onpopstate = function(e) {
-  OptionsPage.setState(e.state);
+  options.OptionsPage.setState(e.state);
 };
-
 </script>
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="dom_ui.css">
@@ -178,14 +195,14 @@ window.onpopstate = function(e) {
 
 <script>
 // Decorate the existing elements in the document.
-cr.ui.decorate('input[pref][type=checkbox]', PrefCheckbox);
-cr.ui.decorate('input[pref][type=number]', PrefNumber);
-cr.ui.decorate('input[pref][type=radio]', PrefRadio);
-cr.ui.decorate('input[pref][type=range]', PrefRange);
-cr.ui.decorate('select[pref]', PrefSelect);
-cr.ui.decorate('input[pref][type=url]', PrefTextField);
-cr.ui.decorate('#contentSettingsPage input[type=radio]', ContentSettingsRadio);
-// TODO(zelidrag) add other elements here when we implement them
+cr.ui.decorate('input[pref][type=checkbox]', options.PrefCheckbox);
+cr.ui.decorate('input[pref][type=number]', options.PrefNumber);
+cr.ui.decorate('input[pref][type=radio]', options.PrefRadio);
+cr.ui.decorate('input[pref][type=range]', options.PrefRange);
+cr.ui.decorate('select[pref]', options.PrefSelect);
+cr.ui.decorate('input[pref][type=url]', options.PrefTextField);
+cr.ui.decorate('#contentSettingsPage input[type=radio]',
+    options.ContentSettingsRadio);
 </script>
 </body>
 </html>
diff --git a/chrome/browser/resources/options/add_startup_page_overlay.js b/chrome/browser/resources/options/add_startup_page_overlay.js
index 24f00c3..ba777cb 100644
--- a/chrome/browser/resources/options/add_startup_page_overlay.js
+++ b/chrome/browser/resources/options/add_startup_page_overlay.js
@@ -2,30 +2,42 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * AddStartupPageOverlay class
- * Encapsulated handling of the 'Add Page' overlay page.
- * @class
- */
-function AddStartupPageOverlay() {
-  OptionsPage.call(this, 'addStartupPageOverlay',
-                   templateData.addStartupPageTitle,
-                   'addStartupPageOverlay');
-}
-
-cr.addSingletonGetter(AddStartupPageOverlay);
-
-AddStartupPageOverlay.prototype = {
-  __proto__: OptionsPage.prototype,
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
 
   /**
-   * Initializes the page.
+   * AddStartupPageOverlay class
+   * Encapsulated handling of the 'Add Page' overlay page.
+   * @class
    */
-  initializePage: function() {
-    OptionsPage.prototype.initializePage.call(this);
-
-    $('addStartupPageCancelButton').onclick = function(e) {
-      OptionsPage.clearOverlays();
-    };
+  function AddStartupPageOverlay() {
+    OptionsPage.call(this, 'addStartupPageOverlay',
+                     templateData.addStartupPageTitle,
+                     'addStartupPageOverlay');
   }
-};
+
+  cr.addSingletonGetter(AddStartupPageOverlay);
+
+  AddStartupPageOverlay.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initializes the page.
+     */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      $('addStartupPageCancelButton').onclick = function(e) {
+        OptionsPage.clearOverlays();
+      };
+    }
+  };
+
+  // Export
+  return {
+    AddStartupPageOverlay: AddStartupPageOverlay
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/advanced_options.js b/chrome/browser/resources/options/advanced_options.js
index 1713ddf..3dfc37a 100644
--- a/chrome/browser/resources/options/advanced_options.js
+++ b/chrome/browser/resources/options/advanced_options.js
@@ -2,91 +2,104 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-//
-// AdvancedOptions class
-// Encapsulated handling of advanced options page.
-//
-function AdvancedOptions() {
-  OptionsPage.call(this, 'advanced', templateData.advancedPage, 'advancedPage');
-}
-
-cr.addSingletonGetter(AdvancedOptions);
-
-AdvancedOptions.prototype = {
-  // Inherit AdvancedOptions from OptionsPage.
-  __proto__: OptionsPage.prototype,
-
-  // Initialize AdvancedOptions page.
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
-
-    // Setup click handlers for buttons.
-    $('privacyContentSettingsButton').onclick = function(event) {
-      OptionsPage.showPageByName('content');
-    };
-    $('privacyClearDataButton').onclick = function(event) {
-      OptionsPage.showOverlay('clearBrowserDataOverlay');
-    };
-    $('downloadLocationBrowseButton').onclick = function(event) {
-      chrome.send('selectDownloadLocation');
-    };
-    $('autoOpenFileTypesResetToDefault').onclick = function(event) {
-      chrome.send('autoOpenFileTypesAction');
-    };
-    $('fontSettingsConfigureFontsOnlyButton').onclick = function(event) {
-      OptionsPage.showOverlay('fontSettingsOverlay');
-    };
-
-    if (!cr.isChromeOS) {
-      $('proxiesConfigureButton').onclick = function(event) {
-        chrome.send('showNetworkProxySettings');
+cr.define('options', function() {
+
+var OptionsPage = options.OptionsPage;
+
+  //
+  // AdvancedOptions class
+  // Encapsulated handling of advanced options page.
+  //
+  function AdvancedOptions() {
+    OptionsPage.call(this, 'advanced', templateData.advancedPage,
+                     'advancedPage');
+  }
+
+  cr.addSingletonGetter(AdvancedOptions);
+
+  AdvancedOptions.prototype = {
+    // Inherit AdvancedOptions from OptionsPage.
+    __proto__: options.OptionsPage.prototype,
+
+    // Initialize AdvancedOptions page.
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
+
+      // Setup click handlers for buttons.
+      $('privacyContentSettingsButton').onclick = function(event) {
+        OptionsPage.showPageByName('content');
       };
-      $('certificatesManageButton').onclick = function(event) {
-        chrome.send('showManageSSLCertificates');
+      $('privacyClearDataButton').onclick = function(event) {
+        OptionsPage.showOverlay('clearBrowserDataOverlay');
       };
-    }
-
-    if (cr.isWindows) {
-      $('sslCheckRevocation').onclick = function(event) {
-        chrome.send('checkRevocationCheckboxAction',
-            [String($('sslCheckRevocation').checked)]);
+      $('downloadLocationBrowseButton').onclick = function(event) {
+        chrome.send('selectDownloadLocation');
       };
-      $('sslUseSSL2').onclick = function(event) {
-        chrome.send('useSSL2CheckboxAction',
-            [String($('sslUseSSL2').checked)]);
+      $('autoOpenFileTypesResetToDefault').onclick = function(event) {
+        chrome.send('autoOpenFileTypesAction');
       };
+      $('fontSettingsConfigureFontsOnlyButton').onclick = function(event) {
+        OptionsPage.showOverlay('fontSettingsOverlay');
+      };
+
+      if (!cr.isChromeOS) {
+        $('proxiesConfigureButton').onclick = function(event) {
+          chrome.send('showNetworkProxySettings');
+        };
+        $('certificatesManageButton').onclick = function(event) {
+          chrome.send('showManageSSLCertificates');
+        };
+      }
+
+      if (cr.isWindows) {
+        $('sslCheckRevocation').onclick = function(event) {
+          chrome.send('checkRevocationCheckboxAction',
+              [String($('sslCheckRevocation').checked)]);
+        };
+        $('sslUseSSL2').onclick = function(event) {
+          chrome.send('useSSL2CheckboxAction',
+              [String($('sslUseSSL2').checked)]);
+        };
+      }
+
+      // Remove Windows-style accelerators from the Browse button label.
+      // TODO(csilv): Remove this after the accelerator has been removed from
+      // the localized strings file, pending removal of old options window.
+      $('downloadLocationBrowseButton').textContent =
+          localStrings.getStringWithoutAccelerator(
+              'downloadLocationBrowseButton');
     }
+  };
+
+  //
+  // Chrome callbacks
+  //
+
+  // Set the download path.
+  AdvancedOptions.SetDownloadLocationPath = function (path) {
+    $('downloadLocationPath').value = path;
+  };
+
+  // Set the enabled state for the autoOpenFileTypesResetToDefault button.
+  AdvancedOptions.SetAutoOpenFileTypesDisabledAttribute = function (disabled) {
+    $('autoOpenFileTypesResetToDefault').disabled = disabled;
+  };
+
+  // Set the checked state for the sslCheckRevocation checkbox.
+  AdvancedOptions.SetCheckRevocationCheckboxState = function(checked) {
+    $('sslCheckRevocation').checked = checked;
+  };
+
+  // Set the checked state for the sslUseSSL2 checkbox.
+  AdvancedOptions.SetUseSSL2CheckboxState = function(checked) {
+    $('sslUseSSL2').checked = checked;
+  };
+
+  // Export
+  return {
+    AdvancedOptions: AdvancedOptions
+  };
+
+});
 
-    // Remove Windows-style accelerators from the Browse button label.
-    // TODO(csilv): Remove this after the accelerator has been removed from
-    // the localized strings file, pending removal of old options window.
-    $('downloadLocationBrowseButton').textContent =
-        localStrings.getStringWithoutAccelerator(
-            'downloadLocationBrowseButton');
-  }
-};
-
-//
-// Chrome callbacks
-//
-
-// Set the download path.
-function advancedOptionsSetDownloadLocationPath(path) {
-  $('downloadLocationPath').value = path;
-}
-
-// Set the enabled state for the autoOpenFileTypesResetToDefault button.
-function advancedOptionsSetAutoOpenFileTypesDisabledAttribute(disabled) {
-  $('autoOpenFileTypesResetToDefault').disabled = disabled;
-}
-
-// Set the checked state for the sslCheckRevocation checkbox.
-function advancedOptionsSetCheckRevocationCheckboxState(checked) {
-  $('sslCheckRevocation').checked = checked;
-}
-
-// Set the checked state for the sslUseSSL2 checkbox.
-function advancedOptionsSetUseSSL2CheckboxState(checked) {
-  $('sslUseSSL2').checked = checked;
-}
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index 53e0656..9b429da 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -2,173 +2,187 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-//
-// BrowserOptions class
-// Encapsulated handling of browser options page.
-//
-function BrowserOptions() {
-  OptionsPage.call(this, 'browser', templateData.browserPage, 'browserPage');
-}
-
-cr.addSingletonGetter(BrowserOptions);
-
-BrowserOptions.prototype = {
-  // Inherit BrowserOptions from OptionsPage.
-  __proto__: OptionsPage.prototype,
-
-  /**
-   * Initialize BrowserOptions page.
-   */
-  initializePage: function() {
-    // Call base class implementation to start preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
-
-    // Wire up controls.
-    var self = this;
-    $('startupPages').onchange = function(event) {
-      self.updateRemoveButtonState_();
-    };
-    $('startupAddButton').onclick = function(event) {
-      OptionsPage.showOverlay('addStartupPageOverlay');
-    };
-    $('startupRemoveButton').onclick = function(event) {
-      self.removeSelectedStartupPages_();
-    };
-    $('startupUseCurrentButton').onclick = function(event) {
-      chrome.send('setStartupPagesToCurrentPages');
-    };
-    $('defaultSearchManageEnginesButton').onclick = function(event) {
-      OptionsPage.showPageByName('searchEngines');
-    };
-    $('defaultBrowserUseAsDefaultButton').onclick = function(event) {
-      chrome.send('becomeDefaultBrowser');
-    };
-
-    // Remove Windows-style accelerators from button labels.
-    // TODO(stuartmorgan): Remove this once the strings are updated.
-    $('startupAddButton').textContent =
-        localStrings.getStringWithoutAccelerator('startupAddButton');
-    $('startupRemoveButton').textContent =
-        localStrings.getStringWithoutAccelerator('startupRemoveButton');
-  },
-
-  /**
-   * Update the Default Browsers section based on the current state.
-   * @param {String} statusString Description of the current default state.
-   * @param {Boolean} isDefault Whether or not the browser is currently default.
-   */
-  updateDefaultBrowserState_: function(statusString, isDefault) {
-    var label = $('defaultBrowserState');
-    label.textContent = statusString;
-    if (isDefault) {
-      label.classList.add('current');
-    } else {
-      label.classList.remove('current');
-    }
-
-    $('defaultBrowserUseAsDefaultButton').disabled = isDefault;
-  },
-
-  /**
-   * Clears the search engine popup.
-   * @private
-   */
-  clearSearchEngines_: function() {
-    $('defaultSearchEngine').textContent = '';
-  },
-
-  /**
-   * Updates the search engine popup with the given entries.
-   * @param {Array} engines List of available search engines.
-   * @param {Integer} defaultValue The value of the current default engine.
-   */
-  updateSearchEngines_: function(engines, defaultValue) {
-    this.clearSearchEngines_();
-    engineSelect = $('defaultSearchEngine');
-    engineCount = engines.length;
-    var defaultIndex = -1;
-    for (var i = 0; i < engineCount; i++) {
-      var engine = engines[i];
-      var option = new Option(engine['name'], engine['index']);
-      if (defaultValue == option.value)
-        defaultIndex = i;
-      engineSelect.appendChild(option);
-    }
-    if (defaultIndex >= 0)
-      engineSelect.selectedIndex = defaultIndex;
-  },
-
-  /**
-   * Clears the startup page list.
-   * @private
-   */
-  clearStartupPages_: function() {
-    $('startupPages').textContent = '';
-  },
-
-  /**
-   * Updates the startup pages list with the given entries.
-   * @param {Array} pages List of startup pages.
-   */
-  updateStartupPages_: function(pages) {
-    // TODO(stuartmorgan): Replace <select> with a DOMUI List.
-    this.clearStartupPages_();
-    pageList = $('startupPages');
-    pageCount = pages.length;
-    for (var i = 0; i < pageCount; i++) {
-      var page = pages[i];
-      var option = new Option(page['title']);
-      option.title = page['tooltip'];
-      pageList.appendChild(option);
-    }
-
-    this.updateRemoveButtonState_();
-  },
-
-  /**
-   * Sets the enabled state of the startup page Remove button based on
-   * the current selection in the startup pages list.
-   */
-  updateRemoveButtonState_: function() {
-    $('startupRemoveButton').disabled = ($('startupPages').selectedIndex == -1);
-  },
-
-  /**
-   * Removes the selected startup pages.
-   */
-  removeSelectedStartupPages_: function() {
-    var pageSelect = $('startupPages');
-    var optionCount = pageSelect.options.length;
-    var selections = [];
-    for (var i = 0; i < optionCount; i++) {
-      if (pageSelect.options[i].selected)
-        selections.push(String(i));
-    }
-    chrome.send('removeStartupPages', selections);
-  },
-
-  /**
-   * Set the default search engine based on the popup selection.
-   */
-  setDefaultBrowser: function() {
-    var engineSelect = $('defaultSearchEngine');
-    var selectedIndex = engineSelect.selectedIndex;
-    if (selectedIndex >= 0) {
-      var selection = engineSelect.options[selectedIndex];
-      chrome.send('setDefaultSearchEngine', [String(selection.value)]);
-    }
-  },
-};
-
-BrowserOptions.updateDefaultBrowserState = function(statusString, isDefault) {
-  BrowserOptions.getInstance().updateDefaultBrowserState_(statusString,
-                                                          isDefault);
-};
-
-BrowserOptions.updateSearchEngines = function(engines, defaultValue) {
-  BrowserOptions.getInstance().updateSearchEngines_(engines, defaultValue);
-};
-
-BrowserOptions.updateStartupPages = function(pages) {
-  BrowserOptions.getInstance().updateStartupPages_(pages);
-};
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
+
+  //
+  // BrowserOptions class
+  // Encapsulated handling of browser options page.
+  //
+  function BrowserOptions() {
+    OptionsPage.call(this, 'browser', templateData.browserPage, 'browserPage');
+  }
+
+  cr.addSingletonGetter(BrowserOptions);
+
+  BrowserOptions.prototype = {
+    // Inherit BrowserOptions from OptionsPage.
+    __proto__: options.OptionsPage.prototype,
+
+    /**
+     * Initialize BrowserOptions page.
+     */
+    initializePage: function() {
+      // Call base class implementation to start preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
+
+      // Wire up controls.
+      var self = this;
+      $('startupPages').onchange = function(event) {
+        self.updateRemoveButtonState_();
+      };
+      $('startupAddButton').onclick = function(event) {
+        OptionsPage.showOverlay('addStartupPageOverlay');
+      };
+      $('startupRemoveButton').onclick = function(event) {
+        self.removeSelectedStartupPages_();
+      };
+      $('startupUseCurrentButton').onclick = function(event) {
+        chrome.send('setStartupPagesToCurrentPages');
+      };
+      $('defaultSearchManageEnginesButton').onclick = function(event) {
+        OptionsPage.showPageByName('searchEngines');
+      };
+      $('defaultBrowserUseAsDefaultButton').onclick = function(event) {
+        chrome.send('becomeDefaultBrowser');
+      };
+
+      // Remove Windows-style accelerators from button labels.
+      // TODO(stuartmorgan): Remove this once the strings are updated.
+      $('startupAddButton').textContent =
+          localStrings.getStringWithoutAccelerator('startupAddButton');
+      $('startupRemoveButton').textContent =
+          localStrings.getStringWithoutAccelerator('startupRemoveButton');
+    },
+
+    /**
+     * Update the Default Browsers section based on the current state.
+     * @param {String} statusString Description of the current default state.
+     * @param {Boolean} isDefault Whether or not the browser is currently
+     *     default.
+     */
+    updateDefaultBrowserState_: function(statusString, isDefault) {
+      var label = $('defaultBrowserState');
+      label.textContent = statusString;
+      if (isDefault) {
+        label.classList.add('current');
+      } else {
+        label.classList.remove('current');
+      }
+
+      $('defaultBrowserUseAsDefaultButton').disabled = isDefault;
+    },
+
+    /**
+     * Clears the search engine popup.
+     * @private
+     */
+    clearSearchEngines_: function() {
+      $('defaultSearchEngine').textContent = '';
+    },
+
+    /**
+     * Updates the search engine popup with the given entries.
+     * @param {Array} engines List of available search engines.
+     * @param {Integer} defaultValue The value of the current default engine.
+     */
+    updateSearchEngines_: function(engines, defaultValue) {
+      this.clearSearchEngines_();
+      engineSelect = $('defaultSearchEngine');
+      engineCount = engines.length;
+      var defaultIndex = -1;
+      for (var i = 0; i < engineCount; i++) {
+        var engine = engines[i];
+        var option = new Option(engine['name'], engine['index']);
+        if (defaultValue == option.value)
+          defaultIndex = i;
+        engineSelect.appendChild(option);
+      }
+      if (defaultIndex >= 0)
+        engineSelect.selectedIndex = defaultIndex;
+    },
+
+    /**
+     * Clears the startup page list.
+     * @private
+     */
+    clearStartupPages_: function() {
+      $('startupPages').textContent = '';
+    },
+
+    /**
+     * Updates the startup pages list with the given entries.
+     * @param {Array} pages List of startup pages.
+     */
+    updateStartupPages_: function(pages) {
+      // TODO(stuartmorgan): Replace <select> with a DOMUI List.
+      this.clearStartupPages_();
+      pageList = $('startupPages');
+      pageCount = pages.length;
+      for (var i = 0; i < pageCount; i++) {
+        var page = pages[i];
+        var option = new Option(page['title']);
+        option.title = page['tooltip'];
+        pageList.appendChild(option);
+      }
+
+      this.updateRemoveButtonState_();
+    },
+
+    /**
+     * Sets the enabled state of the startup page Remove button based on
+     * the current selection in the startup pages list.
+     */
+    updateRemoveButtonState_: function() {
+      $('startupRemoveButton').disabled =
+          ($('startupPages').selectedIndex == -1);
+    },
+
+    /**
+     * Removes the selected startup pages.
+     */
+    removeSelectedStartupPages_: function() {
+      var pageSelect = $('startupPages');
+      var optionCount = pageSelect.options.length;
+      var selections = [];
+      for (var i = 0; i < optionCount; i++) {
+        if (pageSelect.options[i].selected)
+          selections.push(String(i));
+      }
+      chrome.send('removeStartupPages', selections);
+    },
+
+    /**
+     * Set the default search engine based on the popup selection.
+     */
+    setDefaultBrowser: function() {
+      var engineSelect = $('defaultSearchEngine');
+      var selectedIndex = engineSelect.selectedIndex;
+      if (selectedIndex >= 0) {
+        var selection = engineSelect.options[selectedIndex];
+        chrome.send('setDefaultSearchEngine', [String(selection.value)]);
+      }
+    },
+  };
+
+  BrowserOptions.updateDefaultBrowserState = function(statusString, isDefault) {
+    BrowserOptions.getInstance().updateDefaultBrowserState_(statusString,
+                                                            isDefault);
+  };
+
+  BrowserOptions.updateSearchEngines = function(engines, defaultValue) {
+    BrowserOptions.getInstance().updateSearchEngines_(engines, defaultValue);
+  };
+
+  BrowserOptions.updateStartupPages = function(pages) {
+    BrowserOptions.getInstance().updateStartupPages_(pages);
+  };
+
+  // Export
+  return {
+    BrowserOptions: BrowserOptions
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/chromeos_accounts_options.js b/chrome/browser/resources/options/chromeos_accounts_options.js
index 8339669..9830bfa 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options.js
+++ b/chrome/browser/resources/options/chromeos_accounts_options.js
@@ -2,63 +2,72 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// AccountsOptions class:
+cr.define('options', function() {
 
-/**
- * Encapsulated handling of ChromeOS accounts options page.
- * @constructor
- */
-function AccountsOptions(model) {
-  OptionsPage.call(this, 'accounts', localStrings.getString('accountsPage'),
-                   'accountsPage');
-}
+  var OptionsPage = options.OptionsPage;
 
-AccountsOptions.getInstance = function() {
-  if (!AccountsOptions.instance_) {
-    AccountsOptions.instance_ = new AccountsOptions(null);
-  }
-  return AccountsOptions.instance_;
-};
-
-AccountsOptions.prototype = {
-  // Inherit AccountsOptions from OptionsPage.
-  __proto__: OptionsPage.prototype,
+  /////////////////////////////////////////////////////////////////////////////
+  // AccountsOptions class:
 
   /**
-   * Initializes AccountsOptions page.
+   * Encapsulated handling of ChromeOS accounts options page.
+   * @constructor
    */
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
+  function AccountsOptions(model) {
+    OptionsPage.call(this, 'accounts', localStrings.getString('accountsPage'),
+                     'accountsPage');
+  }
 
-    // Set up accounts page.
-    $('addUserButton').onclick = function(e) {
-      OptionsPage.showOverlay('addUserOverlay');
-    };
-    $('removeUserButton').onclick = function(e) {
-      $('userList').removeSelectedUser();
-    };
+  AccountsOptions.getInstance = function() {
+    if (!AccountsOptions.instance_) {
+      AccountsOptions.instance_ = new AccountsOptions(null);
+    }
+    return AccountsOptions.instance_;
+  };
 
-    options.accounts.UserList.decorate($('userList'));
+  AccountsOptions.prototype = {
+    // Inherit AccountsOptions from OptionsPage.
+    __proto__: OptionsPage.prototype,
 
-    this.addEventListener('visibleChange',
-                          cr.bind(this.handleVisibleChange_, this));
+    /**
+     * Initializes AccountsOptions page.
+     */
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
 
-    // Setup add user overlay page.
-    OptionsPage.registerOverlay(AddUserOverlay.getInstance());
-  },
+      // Set up accounts page.
+      $('addUserButton').onclick = function(e) {
+        OptionsPage.showOverlay('addUserOverlay');
+      };
+      $('removeUserButton').onclick = function(e) {
+        $('userList').removeSelectedUser();
+      };
 
-  userListInitalized_: false,
+      options.accounts.UserList.decorate($('userList'));
 
-  /**
-   * Handler for OptionsPage's visible property change event.
-   * @param {Event} e Property change event.
-   */
-  handleVisibleChange_ : function(e) {
-    if (!this.userListInitalized_ && this.visible) {
-      this.userListInitalized_ = true;
-      userList.redraw();
+      this.addEventListener('visibleChange',
+                            cr.bind(this.handleVisibleChange_, this));
+    },
+
+    userListInitalized_: false,
+
+    /**
+     * Handler for OptionsPage's visible property change event.
+     * @param {Event} e Property change event.
+     */
+    handleVisibleChange_ : function(e) {
+      if (!this.userListInitalized_ && this.visible) {
+        this.userListInitalized_ = true;
+        userList.redraw();
+      }
     }
-  }
-};
+  };
+
+  // Export
+  return {
+    AccountsOptions: AccountsOptions
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/chromeos_internet_options.js b/chrome/browser/resources/options/chromeos_internet_options.js
index 60eca9a..18c064b 100644
--- a/chrome/browser/resources/options/chromeos_internet_options.js
+++ b/chrome/browser/resources/options/chromeos_internet_options.js
@@ -2,63 +2,75 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// InternetOptions class:
+cr.define('options', function() {
 
-/**
- * Encapsulated handling of ChromeOS internet options page.
- * @constructor
- */
-function InternetOptions() {
-  OptionsPage.call(this, 'internet', localStrings.getString('internetPage'),
-      'internetPage');
-}
+  var OptionsPage = options.OptionsPage;
 
-cr.addSingletonGetter(InternetOptions);
-
-// Inherit InternetOptions from OptionsPage.
-InternetOptions.prototype = {
-  __proto__: OptionsPage.prototype,
+  /////////////////////////////////////////////////////////////////////////////
+  // InternetOptions class:
 
   /**
-   * Initializes InternetOptions page.
-   * Calls base class implementation to starts preference initialization.
+   * Encapsulated handling of ChromeOS internet options page.
+   * @constructor
    */
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
+  function InternetOptions() {
+    OptionsPage.call(this, 'internet', localStrings.getString('internetPage'),
+        'internetPage');
+  }
 
-    options.internet.NetworkList.decorate($('wiredList'));
-    $('wiredList').load(templateData.wiredList);
-    options.internet.NetworkList.decorate($('wirelessList'));
-    $('wirelessList').load(templateData.wirelessList);
-    options.internet.NetworkList.decorate($('rememberedList'));
-    $('rememberedList').load(templateData.rememberedList);
+  cr.addSingletonGetter(InternetOptions);
 
-    this.addEventListener('visibleChange', this.handleVisibleChange_);
-  },
+  // Inherit InternetOptions from OptionsPage.
+  InternetOptions.prototype = {
+    __proto__: OptionsPage.prototype,
 
-  networkListInitalized_: false,
+    /**
+     * Initializes InternetOptions page.
+     * Calls base class implementation to starts preference initialization.
+     */
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
 
-  /**
-   * Handler for OptionsPage's visible property change event.
-   * @param {Event} e Property change event.
-   */
-  handleVisibleChange_ : function(e) {
-    if (!this.networkListInitalized_ && this.visible) {
-      this.networkListInitalized_ = true;
-      $('wiredList').redraw();
-      $('wirelessList').redraw();
-      $('rememberedList').redraw();
+      options.internet.NetworkList.decorate($('wiredList'));
+      $('wiredList').load(templateData.wiredList);
+      options.internet.NetworkList.decorate($('wirelessList'));
+      $('wirelessList').load(templateData.wirelessList);
+      options.internet.NetworkList.decorate($('rememberedList'));
+      $('rememberedList').load(templateData.rememberedList);
+
+      this.addEventListener('visibleChange', this.handleVisibleChange_);
+    },
+
+    networkListInitalized_: false,
+
+    /**
+     * Handler for OptionsPage's visible property change event.
+     * @param {Event} e Property change event.
+     */
+    handleVisibleChange_ : function(e) {
+      if (!this.networkListInitalized_ && this.visible) {
+        this.networkListInitalized_ = true;
+        $('wiredList').redraw();
+        $('wirelessList').redraw();
+        $('rememberedList').redraw();
+      }
     }
-  }
-};
+  };
+
+  //
+  //Chrome callbacks
+  //
+  InternetOptions.refreshNetworkData = function (data) {
+    $('wiredList').load(data.wiredList);
+    $('wirelessList').load(data.wirelessList);
+    $('rememberedList').load(data.rememberedList);
+  };
+
+  // Export
+  return {
+    InternetOptions: InternetOptions
+  };
+
+});
 
-//
-//Chrome callbacks
-//
-function refreshNetworkData(data) {
-  $('wiredList').load(data.wiredList);
-  $('wirelessList').load(data.wirelessList);
-  $('rememberedList').load(data.rememberedList);
-}
diff --git a/chrome/browser/resources/options/chromeos_language_options.js b/chrome/browser/resources/options/chromeos_language_options.js
index 372a546..59d4a75 100644
--- a/chrome/browser/resources/options/chromeos_language_options.js
+++ b/chrome/browser/resources/options/chromeos_language_options.js
@@ -2,204 +2,216 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// LanguageOptions class:
+cr.define('options', function() {
 
-/**
- * Encapsulated handling of ChromeOS language options page.
- * @constructor
- */
-function LanguageOptions(model) {
-  OptionsPage.call(this, 'language', localStrings.getString('languagePage'),
-                   'languagePage');
-}
+  var OptionsPage = options.OptionsPage;
 
-cr.addSingletonGetter(LanguageOptions);
-
-// Inherit LanguageOptions from OptionsPage.
-LanguageOptions.prototype = {
-  __proto__: OptionsPage.prototype,
-
-  /**
-   * Initializes LanguageOptions page.
-   * Calls base class implementation to starts preference initialization.
-   */
-  initializePage: function() {
-    OptionsPage.prototype.initializePage.call(this);
-
-    var languageOptionsList = $('language-options-list');
-    options.language.LanguageList.decorate(languageOptionsList);
-
-    languageOptionsList.addEventListener('change',
-        cr.bind(this.handleLanguageOptionsListChange_, this));
-
-    this.addEventListener('visibleChange',
-                          cr.bind(this.handleVisibleChange_, this));
-
-    this.initializeInputMethodList_();
-  },
-
-  languageListInitalized_: false,
-  // The preference is a CSV string that describes preload engines
-  // (i.e. active input methods).
-  preloadEnginesPref: 'settings.language.preload_engines',
-  preloadEngines_: [],
-
-  /**
-   * Initializes the input method list.
-   */
-  initializeInputMethodList_: function() {
-    var inputMethodList = $('language-options-input-method-list');
-    var inputMethodListData = templateData.inputMethodList;
-
-    // Add all input methods, but make all of them invisible here. We'll
-    // change the visibility in handleLanguageOptionsListChange_() based
-    // on the selected language. Note that we only have less than 100
-    // input methods, so creating DOM nodes at once here should be ok.
-    for (var i = 0; i < inputMethodListData.length; i++) {
-      var inputMethod = inputMethodListData[i];
-      var input = document.createElement('input');
-      input.type = 'checkbox';
-      input.inputMethodId = inputMethod.id;
-      // Listen to user clicks.
-      input.addEventListener('click',
-                             cr.bind(this.handleCheckboxClick_, this));
-      var label = document.createElement('label');
-      label.appendChild(input);
-      label.appendChild(document.createTextNode(inputMethod.displayName));
-      label.style.display = 'none';
-      label.languageCode = inputMethod.languageCode;
-
-      inputMethodList.appendChild(label);
-    }
-    // Listen to pref change once the input method list is initialized.
-    Preferences.getInstance().addEventListener(this.preloadEnginesPref,
-        cr.bind(this.handlePreloadEnginesPrefChange_, this));
-  },
+  /////////////////////////////////////////////////////////////////////////////
+  // LanguageOptions class:
 
   /**
-   * Handler for OptionsPage's visible property change event.
-   * @param {Event} e Property change event.
-   * @private
+   * Encapsulated handling of ChromeOS language options page.
+   * @constructor
    */
-  handleVisibleChange_ : function(e) {
-    if (!this.languageListInitalized_ && this.visible) {
-      this.languageListInitalized_ = true;
-      $('language-options-list').redraw();
-    }
-  },
+  function LanguageOptions(model) {
+    OptionsPage.call(this, 'language', localStrings.getString('languagePage'),
+                     'languagePage');
+  }
 
-  /**
-   * Handler for languageOptionsList's change event.
-   * @param {Event} e Change event.
-   * @private
-   */
-  handleLanguageOptionsListChange_: function(e) {
-    var languageOptionsList = $('language-options-list');
-    var index = languageOptionsList.selectionModel.selectedIndex;
-    if (index == -1)
-      return;
-
-    var languageCode = languageOptionsList.dataModel.item(index);
-    var languageDisplayName = localStrings.getString(languageCode);
-
-    $('language-options-language-name').textContent = languageDisplayName;
-    // TODO(satorux): The button text should be changed to
-    // 'is_displayed_in_this_language', depending on the current UI
-    // language.
-    $('language-options-ui-language-button').textContent = (
-        localStrings.getString('display_in_this_language'));
-
-    // Change the visibility of the input method list. Input methods that
-    // matches |languageCode| will become visible.
-    var inputMethodList = $('language-options-input-method-list');
-    var labels = inputMethodList.querySelectorAll('label');
-    for (var i = 0; i < labels.length; i++) {
-      if (labels[i].languageCode == languageCode) {
-        labels[i].style.display = 'block';
-      } else {
-        labels[i].style.display = 'none';
+  cr.addSingletonGetter(LanguageOptions);
+
+  // Inherit LanguageOptions from OptionsPage.
+  LanguageOptions.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initializes LanguageOptions page.
+     * Calls base class implementation to starts preference initialization.
+     */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      var languageOptionsList = $('language-options-list');
+      options.language.LanguageList.decorate(languageOptionsList);
+
+      languageOptionsList.addEventListener('change',
+          cr.bind(this.handleLanguageOptionsListChange_, this));
+
+       this.addEventListener('visibleChange',
+                            cr.bind(this.handleVisibleChange_, this));
+
+      this.initializeInputMethodList_();
+    },
+
+    languageListInitalized_: false,
+    // The preference is a CSV string that describes preload engines
+    // (i.e. active input methods).
+    preloadEnginesPref: 'settings.language.preload_engines',
+    preloadEngines_: [],
+
+    /**
+     * Initializes the input method list.
+     */
+    initializeInputMethodList_: function() {
+      var inputMethodList = $('language-options-input-method-list');
+      var inputMethodListData = templateData.inputMethodList;
+
+      // Add all input methods, but make all of them invisible here. We'll
+      // change the visibility in handleLanguageOptionsListChange_() based
+      // on the selected language. Note that we only have less than 100
+      // input methods, so creating DOM nodes at once here should be ok.
+      for (var i = 0; i < inputMethodListData.length; i++) {
+        var inputMethod = inputMethodListData[i];
+        var input = document.createElement('input');
+        input.type = 'checkbox';
+        input.inputMethodId = inputMethod.id;
+        // Listen to user clicks.
+        input.addEventListener('click',
+                               cr.bind(this.handleCheckboxClick_, this));
+        var label = document.createElement('label');
+        label.appendChild(input);
+        label.appendChild(document.createTextNode(inputMethod.displayName));
+        label.style.display = 'none';
+        label.languageCode = inputMethod.languageCode;
+
+        inputMethodList.appendChild(label);
+      }
+      // Listen to pref change once the input method list is initialized.
+      Preferences.getInstance().addEventListener(this.preloadEnginesPref,
+          cr.bind(this.handlePreloadEnginesPrefChange_, this));
+    },
+
+    /**
+     * Handler for OptionsPage's visible property change event.
+     * @param {Event} e Property change event.
+     * @private
+     */
+    handleVisibleChange_ : function(e) {
+      if (!this.languageListInitalized_ && this.visible) {
+        this.languageListInitalized_ = true;
+        $('language-options-list').redraw();
+      }
+    },
+
+    /**
+     * Handler for languageOptionsList's change event.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handleLanguageOptionsListChange_: function(e) {
+      var languageOptionsList = $('language-options-list');
+      var index = languageOptionsList.selectionModel.selectedIndex;
+      if (index == -1)
+        return;
+
+      var languageCode = languageOptionsList.dataModel.item(index);
+      var languageDisplayName = localStrings.getString(languageCode);
+
+      $('language-options-language-name').textContent = languageDisplayName;
+      // TODO(satorux): The button text should be changed to
+      // 'is_displayed_in_this_language', depending on the current UI
+      // language.
+      $('language-options-ui-language-button').textContent = (
+          localStrings.getString('display_in_this_language'));
+
+      // Change the visibility of the input method list. Input methods that
+      // matches |languageCode| will become visible.
+      var inputMethodList = $('language-options-input-method-list');
+      var labels = inputMethodList.querySelectorAll('label');
+      for (var i = 0; i < labels.length; i++) {
+        if (labels[i].languageCode == languageCode) {
+          labels[i].style.display = 'block';
+        } else {
+          labels[i].style.display = 'none';
+        }
+      }
+    },
+
+    /**
+     * Handles preloadEnginesPref change.
+     * @param {Event} e Change event.
+     * @private
+     */
+    handlePreloadEnginesPrefChange_: function(e) {
+      this.preloadEngines_ = this.filterBadPreloadEngines_(e.value.split(','));
+      this.updateCheckboxesFromPreloadEngines_();
+    },
+
+    /**
+     * Handles input method checkbox's click event.
+     * @param {Event} e Click event.
+     * @private
+     */
+    handleCheckboxClick_ : function(e) {
+      this.updatePreloadEnginesFromCheckboxes_();
+      Preferences.setStringPref(this.preloadEnginesPref,
+                                this.preloadEngines_.join(','));
+    },
+
+    /**
+     * Updates the checkboxes in the input method list from the preload
+     * engines preference.
+     * @private
+     */
+    updateCheckboxesFromPreloadEngines_: function() {
+      // Convert the list into a dictonary for simpler lookup.
+      var dictionary = {};
+      for (var i = 0; i < this.preloadEngines_.length; i++) {
+        dictionary[this.preloadEngines_[i]] = true;
       }
-    }
-  },
-
-  /**
-   * Handles preloadEnginesPref change.
-   * @param {Event} e Change event.
-   * @private
-   */
-  handlePreloadEnginesPrefChange_: function(e) {
-    this.preloadEngines_ = this.filterBadPreloadEngines_(e.value.split(','));
-    this.updateCheckboxesFromPreloadEngines_();
-  },
-
-  /**
-   * Handles input method checkbox's click event.
-   * @param {Event} e Click event.
-   * @private
-   */
-  handleCheckboxClick_ : function(e) {
-    this.updatePreloadEnginesFromCheckboxes_();
-    Preferences.setStringPref(this.preloadEnginesPref,
-                              this.preloadEngines_.join(','));
-  },
-
-  /**
-   * Updates the checkboxes in the input method list from the preload
-   * engines preference.
-   * @private
-   */
-  updateCheckboxesFromPreloadEngines_: function() {
-    // Convert the list into a dictonary for simpler lookup.
-    var dictionary = {};
-    for (var i = 0; i < this.preloadEngines_.length; i++) {
-      dictionary[this.preloadEngines_[i]] = true;
-    }
 
-    var inputMethodList = $('language-options-input-method-list');
-    var checkboxes = inputMethodList.querySelectorAll('input');
-    for (var i = 0; i < checkboxes.length; i++) {
-      checkboxes[i].checked = (checkboxes[i].inputMethodId in dictionary);
-    }
-  },
+      var inputMethodList = $('language-options-input-method-list');
+      var checkboxes = inputMethodList.querySelectorAll('input');
+      for (var i = 0; i < checkboxes.length; i++) {
+        checkboxes[i].checked = (checkboxes[i].inputMethodId in dictionary);
+      }
+    },
+
+    /**
+     * Updates the preload engines preference from the checkboxes in the
+     * input method list.
+     * @private
+     */
+    updatePreloadEnginesFromCheckboxes_: function() {
+      this.preloadEngines_ = [];
+      var inputMethodList = $('language-options-input-method-list');
+      var checkboxes = inputMethodList.querySelectorAll('input');
+      for (var i = 0; i < checkboxes.length; i++) {
+        if (checkboxes[i].checked) {
+          this.preloadEngines_.push(checkboxes[i].inputMethodId);
+        }
+      }
+    },
+
+    /**
+     * Filters bad preload engines in case bad preload engines are
+     * stored in the preference.
+     * @param {Array} preloadEngines List of preload engines.
+     * @private
+     */
+    filterBadPreloadEngines_: function(preloadEngines) {
+      // Convert the list into a dictonary for simpler lookup.
+      var dictionary = {};
+      for (var i = 0; i < templateData.inputMethodList.length; i++) {
+        dictionary[templateData.inputMethodList[i].id] = true;
+      }
 
-  /**
-   * Updates the preload engines preference from the checkboxes in the
-   * input method list.
-   * @private
-   */
-  updatePreloadEnginesFromCheckboxes_: function() {
-    this.preloadEngines_ = [];
-    var inputMethodList = $('language-options-input-method-list');
-    var checkboxes = inputMethodList.querySelectorAll('input');
-    for (var i = 0; i < checkboxes.length; i++) {
-      if (checkboxes[i].checked) {
-        this.preloadEngines_.push(checkboxes[i].inputMethodId);
+      var filteredPreloadEngines = [];
+      for (var i = 0; i < preloadEngines.length; i++) {
+        // Check if the preload engine is present in the
+        // dictionary. Otherwise, skip it.
+        if (preloadEngines[i] in dictionary) {
+            filteredPreloadEngines.push(preloadEngines[i]);
+        }
       }
+      return filteredPreloadEngines;
     }
-  },
+  };
 
-  /**
-   * Filters bad preload engines in case bad preload engines are
-   * stored in the preference.
-   * @param {Array} preloadEngines List of preload engines.
-   * @private
-   */
-  filterBadPreloadEngines_: function(preloadEngines) {
-    // Convert the list into a dictonary for simpler lookup.
-    var dictionary = {};
-    for (var i = 0; i < templateData.inputMethodList.length; i++) {
-      dictionary[templateData.inputMethodList[i].id] = true;
-    }
+  // Export
+  return {
+    LanguageOptions: LanguageOptions
+  };
+
+});
 
-    var filteredPreloadEngines = [];
-    for (var i = 0; i < preloadEngines.length; i++) {
-      // Check if the preload engine is present in the
-      // dictionary. Otherwise, skip it.
-      if (preloadEngines[i] in dictionary) {
-          filteredPreloadEngines.push(preloadEngines[i]);
-      }
-    }
-    return filteredPreloadEngines;
-  }
-};
diff --git a/chrome/browser/resources/options/chromeos_system_options.html b/chrome/browser/resources/options/chromeos_system_options.html
index 88b3956..0fd7df7 100644
--- a/chrome/browser/resources/options/chromeos_system_options.html
+++ b/chrome/browser/resources/options/chromeos_system_options.html
@@ -1,5 +1,19 @@
 <div class="page hidden" id="systemPage">
   <h1 i18n-content="systemPage"></h1>
+<!-- removed until we expose it properly from ChromeOS side
+  <section>
+    <h3 i18n-content="datetime_title"></h3>
+    <table class="option-control-table">
+      <tr>
+        <td class="option-name" i18n-content="timezone"></td>
+        <td class="option-value">
+        <select id="timezone-select" class="control"
+             pref="settings.datetime.timezone"></select>
+        </td>
+      </tr>
+    </table>
+  </section>
+-->
   <section>
     <h3 i18n-content="touchpad"></h3>
     <table class="option-control-table">
diff --git a/chrome/browser/resources/options/chromeos_system_options.js b/chrome/browser/resources/options/chromeos_system_options.js
index cfabc86..e758648 100644
--- a/chrome/browser/resources/options/chromeos_system_options.js
+++ b/chrome/browser/resources/options/chromeos_system_options.js
@@ -2,36 +2,48 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// SystemOptions class:
+cr.define('options', function() {
 
-/**
- * Encapsulated handling of ChromeOS system options page.
- * @constructor
- */
-function SystemOptions() {
-  OptionsPage.call(this, 'system', templateData.systemPage, 'systemPage');
-}
-
-cr.addSingletonGetter(SystemOptions);
-
-// Inherit SystemOptions from OptionsPage.
-SystemOptions.prototype = {
-  __proto__: OptionsPage.prototype,
+  var OptionsPage = options.OptionsPage;
+  /////////////////////////////////////////////////////////////////////////////
+  // SystemOptions class:
 
   /**
-   * Initializes SystemOptions page.
-   * Calls base class implementation to starts preference initialization.
+   * Encapsulated handling of ChromeOS system options page.
+   * @constructor
    */
-  initializePage: function() {
-    OptionsPage.prototype.initializePage.call(this);
-    var timezone = $('timezone-select');
-    if (timezone) {
-      timezone.initializeValues(templateData.timezoneList);
-    }
 
-    $('language-button').onclick = function(event) {
-      OptionsPage.showPageByName('language');
-    };
+  function SystemOptions() {
+    OptionsPage.call(this, 'system', templateData.systemPage, 'systemPage');
   }
-};
+
+  cr.addSingletonGetter(SystemOptions);
+
+  // Inherit SystemOptions from OptionsPage.
+  SystemOptions.prototype = {
+    __proto__: options.OptionsPage.prototype,
+
+    /**
+     * Initializes SystemOptions page.
+     * Calls base class implementation to starts preference initialization.
+     */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+      var timezone = $('timezone-select');
+      if (timezone) {
+        timezone.initializeValues(templateData.timezoneList);
+      }
+
+      $('language-button').onclick = function(event) {
+        OptionsPage.showPageByName('language');
+      };
+    }
+  };
+
+  // Export
+  return {
+    SystemOptions: SystemOptions
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/clear_browser_data_overlay.js b/chrome/browser/resources/options/clear_browser_data_overlay.js
index 5532614..beb0c14 100644
--- a/chrome/browser/resources/options/clear_browser_data_overlay.js
+++ b/chrome/browser/resources/options/clear_browser_data_overlay.js
@@ -2,73 +2,86 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * ClearBrowserData class
- * Encapsulated handling of the 'Clear Browser Data' overlay page.
- * @class
- */
-function ClearBrowserDataOverlay() {
-  OptionsPage.call(this, 'clearBrowserDataOverlay',
-                   templateData.clearBrowserDataTitle,
-                   'clearBrowserDataOverlay');
-}
+cr.define('options', function() {
 
-ClearBrowserDataOverlay.throbIntervalId = 0;
-
-cr.addSingletonGetter(ClearBrowserDataOverlay);
-
-ClearBrowserDataOverlay.prototype = {
-  // Inherit ClearBrowserDataOverlay from OptionsPage.
-  __proto__: OptionsPage.prototype,
+  var OptionsPage = options.OptionsPage;
 
   /**
-   * Initialize the page.
+   * ClearBrowserData class
+   * Encapsulated handling of the 'Clear Browser Data' overlay page.
+   * @class
    */
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
+  function ClearBrowserDataOverlay() {
+    OptionsPage.call(this, 'clearBrowserDataOverlay',
+                     templateData.clearBrowserDataTitle,
+                     'clearBrowserDataOverlay');
+  }
 
-    // Setup option values for the time period select control.
-    $('clearBrowsingDataTimePeriod').initializeValues(
-        templateData.clearBrowsingDataTimeList)
+  ClearBrowserDataOverlay.throbIntervalId = 0;
 
-    // Setup click handler for the clear(Ok) button.
-    $('clearBrowsingDataCommit').onclick = function(event) {
-      chrome.send('performClearBrowserData');
-    };
-  }
-};
+  cr.addSingletonGetter(ClearBrowserDataOverlay);
+
+  ClearBrowserDataOverlay.prototype = {
+    // Inherit ClearBrowserDataOverlay from OptionsPage.
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initialize the page.
+     */
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
 
-//
-// Chrome callbacks
-//
-function clearBrowserDataSetClearingState(state) {
-  $('deleteBrowsingHistoryCheckbox').disabled = state;
-  $('deleteDownloadHistoryCheckbox').disabled = state;
-  $('deleteCacheCheckbox').disabled = state;
-  $('deleteCookiesCheckbox').disabled = state;
-  $('deletePasswordsCheckbox').disabled = state;
-  $('deleteFormDataCheckbox').disabled = state;
-  $('clearBrowsingDataTimePeriod').disabled = state;
-  $('clearBrowsingDataCommit').disabled = state;
-  $('clearBrowsingDataDismiss').disabled = state;
-  $('cbdThrobber').style.visibility = state ? 'visible' : 'hidden';
+      // Setup option values for the time period select control.
+      $('clearBrowsingDataTimePeriod').initializeValues(
+          templateData.clearBrowsingDataTimeList)
 
-  function advanceThrobber() {
-    var throbber = $('cbdThrobber');
-    // TODO(csilv): make this smoother using time-based animation?
-    throbber.style.backgroundPositionX =
-        ((parseInt(getComputedStyle(throbber).backgroundPositionX, 10) - 16) %
-        576) + 'px';
+      // Setup click handler for the clear(Ok) button.
+      $('clearBrowsingDataCommit').onclick = function(event) {
+        chrome.send('performClearBrowserData');
+      };
+    }
+  };
+
+  //
+  // Chrome callbacks
+  //
+  function clearBrowserDataSetClearingState(state) {
+    $('deleteBrowsingHistoryCheckbox').disabled = state;
+    $('deleteDownloadHistoryCheckbox').disabled = state;
+    $('deleteCacheCheckbox').disabled = state;
+    $('deleteCookiesCheckbox').disabled = state;
+    $('deletePasswordsCheckbox').disabled = state;
+    $('deleteFormDataCheckbox').disabled = state;
+    $('clearBrowsingDataTimePeriod').disabled = state;
+    $('clearBrowsingDataCommit').disabled = state;
+    $('clearBrowsingDataDismiss').disabled = state;
+    $('cbdThrobber').style.visibility = state ? 'visible' : 'hidden';
+
+    function advanceThrobber() {
+      var throbber = $('cbdThrobber');
+      // TODO(csilv): make this smoother using time-based animation?
+      throbber.style.backgroundPositionX =
+          ((parseInt(getComputedStyle(throbber).backgroundPositionX, 10) - 16) %
+          576) + 'px';
+    }
+    if (state) {
+      ClearBrowserDataOverlay.throbIntervalId =
+          setInterval(advanceThrobber, 30);
+    } else {
+      clearInterval(ClearBrowserDataOverlay.throbIntervalId);
+    }
   }
-  if (state) {
-    ClearBrowserDataOverlay.throbIntervalId = setInterval(advanceThrobber, 30);
-  } else {
-    clearInterval(ClearBrowserDataOverlay.throbIntervalId);
+
+  function clearBrowserDataDismiss() {
+    OptionsPage.clearOverlays();
+    clearBrowserDataSetClearingState(false);
   }
-}
 
-function clearBrowserDataDismiss() {
-  OptionsPage.clearOverlays();
-  clearBrowserDataSetClearingState(false);
-}
+  // Export
+  return {
+    ClearBrowserDataOverlay: ClearBrowserDataOverlay
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/content_settings.js b/chrome/browser/resources/options/content_settings.js
index 08f4f33..079a9a7 100644
--- a/chrome/browser/resources/options/content_settings.js
+++ b/chrome/browser/resources/options/content_settings.js
@@ -2,107 +2,120 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// ContentSettings class:
-
-/**
- * Encapsulated handling of content settings page.
- * @constructor
- */
-function ContentSettings() {
-  this.activeNavTab = null;
-  OptionsPage.call(this, 'content', templateData.contentSettingsPage,
-                   'contentSettingsPage');
-}
-
-cr.addSingletonGetter(ContentSettings);
-
-ContentSettings.prototype = {
-  __proto__: OptionsPage.prototype,
-
-  initializePage: function() {
-    OptionsPage.prototype.initializePage.call(this);
-
-    chrome.send('getContentFilterSettings');
-    this.showTab($('cookies-nav-tab'));
-
-    var self = this;
-    $('content-settings-nav-tabs').onclick = function(event) {
-      self.showTab(event.srcElement);
-    };
-
-    // Cookies filter page -----------------------------------------------------
-    $('cookies-exceptions-button').onclick = function(event) {
-      // TODO(estade): show exceptions page.
-    };
-
-    $('block-third-party-cookies').onclick = function(event) {
-      chrome.send('setAllowThirdPartyCookies',
-                  [String($('block-third-party-cookies').checked)]);
-    };
-
-    $('show-cookies-button').onclick = function(event) {
-      // TODO(estade): show cookies and other site data page.
-    };
-
-    // Images filter page ------------------------------------------------------
-    $('images-exceptions-button').onclick = function(event) {
-      // TODO(estade): show a dialog.
-      // TODO(estade): remove this hack.
-      imagesExceptionsList.redraw();
-    };
-
-    options.contentSettings.ExceptionsArea.decorate($('imagesExceptionsArea'));
-  },
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
+
+  //////////////////////////////////////////////////////////////////////////////
+  // ContentSettings class:
 
   /**
-   * Shows the tab contents for the given navigation tab.
-   * @param {!Element} tab The tab that the user clicked.
+   * Encapsulated handling of content settings page.
+   * @constructor
    */
-  showTab: function(tab) {
-    if (!tab.classList.contains('inactive-tab'))
-      return;
-
-    if (this.activeNavTab != null) {
-      this.activeNavTab.classList.remove('active-tab');
-      $(this.activeNavTab.getAttribute('tab-contents')).classList.
-          remove('active-tab-contents');
+  function ContentSettings() {
+    this.activeNavTab = null;
+    OptionsPage.call(this, 'content', templateData.contentSettingsPage,
+                     'contentSettingsPage');
+  }
+
+  cr.addSingletonGetter(ContentSettings);
+
+  ContentSettings.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      chrome.send('getContentFilterSettings');
+      this.showTab($('cookies-nav-tab'));
+
+      var self = this;
+      $('content-settings-nav-tabs').onclick = function(event) {
+        self.showTab(event.srcElement);
+      };
+
+      // Cookies filter page ---------------------------------------------------
+      $('cookies-exceptions-button').onclick = function(event) {
+        // TODO(estade): show exceptions page.
+      };
+
+      $('block-third-party-cookies').onclick = function(event) {
+        chrome.send('setAllowThirdPartyCookies',
+                    [String($('block-third-party-cookies').checked)]);
+      };
+
+      $('show-cookies-button').onclick = function(event) {
+        // TODO(estade): show cookies and other site data page.
+      };
+
+      // Images filter page ----------------------------------------------------
+      $('images-exceptions-button').onclick = function(event) {
+        // TODO(estade): show a dialog.
+        // TODO(estade): remove this hack.
+        imagesExceptionsList.redraw();
+      };
+
+      options.contentSettings.ExceptionsArea.decorate(
+          $('imagesExceptionsArea'));
+    },
+
+    /**
+     * Shows the tab contents for the given navigation tab.
+     * @param {!Element} tab The tab that the user clicked.
+     */
+    showTab: function(tab) {
+      if (!tab.classList.contains('inactive-tab'))
+        return;
+
+      if (this.activeNavTab != null) {
+        this.activeNavTab.classList.remove('active-tab');
+        $(this.activeNavTab.getAttribute('tab-contents')).classList.
+            remove('active-tab-contents');
+      }
+
+      tab.classList.add('active-tab');
+      $(tab.getAttribute('tab-contents')).classList.add('active-tab-contents');
+      this.activeNavTab = tab;
     }
+  };
+
+  /**
+   * Sets the initial values for all the content settings radios.
+   * @param {Object} dict A mapping from radio groups to the checked value for
+   *     that group.
+   */
+  ContentSettings.setInitialContentFilterSettingsValue = function(dict) {
+    for (var group in dict) {
+      document.querySelector('input[type=radio][name=' + group +
+                             '][value=' + dict[group] + ']').checked = true;
+    }
+  };
+
+  /**
+   * Initializes the image exceptions list.
+   * @param {Array} list An array of pairs, where the first element of each pair
+   *     is the filter string, and the second is the setting (allow/block).
+   */
+  ContentSettings.setImagesExceptions = function(list) {
+    imagesExceptionsList.clear();
+    for (var i = 0; i < list.length; ++i) {
+      imagesExceptionsList.addException(list[i]);
+    }
+  };
+
+  /**
+   * Sets the initial value for the Third Party Cookies checkbox.
+   * @param {boolean=} block True if we are blocking third party cookies.
+   */
+  ContentSettings.setBlockThirdPartyCookies = function(block) {
+    $('block-third-party-cookies').checked = block;
+  };
+
+  // Export
+  return {
+    ContentSettings: ContentSettings
+  };
+
+});
 
-    tab.classList.add('active-tab');
-    $(tab.getAttribute('tab-contents')).classList.add('active-tab-contents');
-    this.activeNavTab = tab;
-  }
-};
-
-/**
- * Sets the initial values for all the content settings radios.
- * @param {Object} dict A mapping from radio groups to the checked value for
- *     that group.
- */
-ContentSettings.setInitialContentFilterSettingsValue = function(dict) {
-  for (var group in dict) {
-    document.querySelector('input[type=radio][name=' + group +
-                           '][value=' + dict[group] + ']').checked = true;
-  }
-};
-
-/**
- * Initializes the image exceptions list.
- * @param {Array} list An array of pairs, where the first element of each pair
- *     is the filter string, and the second is the setting (allow/block).
- */
-ContentSettings.setImagesExceptions = function(list) {
-  imagesExceptionsList.clear();
-  for (var i = 0; i < list.length; ++i) {
-    imagesExceptionsList.addException(list[i]);
-  }
-};
-
-/**
- * Sets the initial value for the Third Party Cookies checkbox.
- * @param {boolean=} block True if we are blocking third party cookies.
- */
-ContentSettings.setBlockThirdPartyCookies = function(block) {
-  $('block-third-party-cookies').checked = block;
-};
diff --git a/chrome/browser/resources/options/content_settings_ui.js b/chrome/browser/resources/options/content_settings_ui.js
index 7dda236..45ba788 100644
--- a/chrome/browser/resources/options/content_settings_ui.js
+++ b/chrome/browser/resources/options/content_settings_ui.js
@@ -2,25 +2,35 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-////////////////////////////////////////////////////////////////////////////////
-// ContentSettingsRadio class:
-
-// Define a constructor that uses an input element as its underlying element.
-var ContentSettingsRadio = cr.ui.define('input');
-
-ContentSettingsRadio.prototype = {
-  __proto__: HTMLInputElement.prototype,
-
-  /**
-   * Initialization function for the cr.ui framework.
-   */
-  decorate: function() {
-    this.type = 'radio';
-    var self = this;
-
-    this.addEventListener('change',
-        function(e) {
-          chrome.send('setContentFilter', [this.name, this.value]);
-        });
-  },
-};
+cr.define('options', function() {
+
+  //////////////////////////////////////////////////////////////////////////////
+  // ContentSettingsRadio class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var ContentSettingsRadio = cr.ui.define('input');
+
+  ContentSettingsRadio.prototype = {
+    __proto__: HTMLInputElement.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      this.type = 'radio';
+      var self = this;
+
+      this.addEventListener('change',
+          function(e) {
+            chrome.send('setContentFilter', [this.name, this.value]);
+          });
+    },
+  };
+
+  // Export
+  return {
+    ContentSettingsRadio: ContentSettingsRadio
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/font_settings_overlay.js b/chrome/browser/resources/options/font_settings_overlay.js
index 14e2c6b..4ffadfa 100644
--- a/chrome/browser/resources/options/font_settings_overlay.js
+++ b/chrome/browser/resources/options/font_settings_overlay.js
@@ -2,30 +2,42 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * FontSettingsOverlay class
- * Encapsulated handling of the 'Font Settings' overlay page.
- * @class
- */
-function FontSettingsOverlay() {
-  OptionsPage.call(this, 'fontSettingsOverlay',
-                   templateData.fontSettingsOverlayTitle,
-                   'fontSettingsOverlay');
-}
-
-cr.addSingletonGetter(FontSettingsOverlay);
-
-FontSettingsOverlay.prototype = {
-  // Inherit FontSettingsOverlay from OptionsPage.
-  __proto__: OptionsPage.prototype,
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
 
   /**
-   * Initialize the page.
+   * FontSettingsOverlay class
+   * Encapsulated handling of the 'Font Settings' overlay page.
+   * @class
    */
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
-
-    // TODO(csilv): add any initialization here or delete method and/or class.
+  function FontSettingsOverlay() {
+    OptionsPage.call(this, 'fontSettingsOverlay',
+                     templateData.fontSettingsOverlayTitle,
+                     'fontSettingsOverlay');
   }
-};
+
+  cr.addSingletonGetter(FontSettingsOverlay);
+
+  FontSettingsOverlay.prototype = {
+    // Inherit FontSettingsOverlay from OptionsPage.
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initialize the page.
+     */
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
+
+      // TODO(csilv): add any initialization here or delete method and/or class.
+    }
+  };
+
+  // Export
+  return {
+    FontSettingsOverlay: FontSettingsOverlay
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/import_data_overlay.js b/chrome/browser/resources/options/import_data_overlay.js
index 2d8c945..744dbef 100644
--- a/chrome/browser/resources/options/import_data_overlay.js
+++ b/chrome/browser/resources/options/import_data_overlay.js
@@ -2,63 +2,75 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * ImportDataOverlay class
- * Encapsulated handling of the 'Import Data' overlay page.
- * @class
- */
-function ImportDataOverlay() {
-  OptionsPage.call(this, 'importDataOverlay',
-                   templateData.import_data_title,
-                   'importDataOverlay');
-}
+cr.define('options', function() {
 
-cr.addSingletonGetter(ImportDataOverlay);
-
-ImportDataOverlay.prototype = {
-  // Inherit ImportDataOverlay from OptionsPage.
-  __proto__: OptionsPage.prototype,
+  var OptionsPage = options.OptionsPage;
 
   /**
-   * Initialize the page.
+   * ImportDataOverlay class
+   * Encapsulated handling of the 'Import Data' overlay page.
+   * @class
    */
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
+  function ImportDataOverlay() {
+    OptionsPage.call(this, 'importDataOverlay',
+                     templateData.import_data_title,
+                     'importDataOverlay');
+  }
 
-    $('import-data-cancel').onclick = function(e) {
-      OptionsPage.clearOverlays();
-    }
+  cr.addSingletonGetter(ImportDataOverlay);
 
-    $('import-data-commit').onclick = function(e) {
-      var paramList = new Array();
-    }
-  },
+  ImportDataOverlay.prototype = {
+    // Inherit ImportDataOverlay from OptionsPage.
+    __proto__: OptionsPage.prototype,
 
-  /**
-   * Clear the supported browsers popup
-   * @private
-   */
-  clearSupportedBrowsers_: function() {
-    $('supported-browsers').textContent = '';
-  },
+    /**
+     * Initialize the page.
+     */
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
 
-  /**
-   * Update the supported browsers popup with given entries.
-   * @param {Array} list of supported browsers name.
-   */
-  updateSupportedBrowsers_: function(browsers) {
-    this.clearSupportedBrowsers_();
-    browserSelect = $('supported-browsers');
-    browserCount = browsers.length
-    for (var i = 0; i < browserCount; i++) {
-      var browser = browsers[i]
-      var option = new Option(browser['name'], browser['index']);
-      browserSelect.appendChild(option);
-    }
-  },
-};
+      $('import-data-cancel').onclick = function(e) {
+        OptionsPage.clearOverlays();
+      }
+
+      $('import-data-commit').onclick = function(e) {
+        var paramList = new Array();
+      }
+    },
+
+    /**
+     * Clear the supported browsers popup
+     * @private
+     */
+    clearSupportedBrowsers_: function() {
+      $('supported-browsers').textContent = '';
+    },
+
+    /**
+     * Update the supported browsers popup with given entries.
+     * @param {Array} list of supported browsers name.
+     */
+    updateSupportedBrowsers_: function(browsers) {
+      this.clearSupportedBrowsers_();
+      browserSelect = $('supported-browsers');
+      browserCount = browsers.length
+      for (var i = 0; i < browserCount; i++) {
+        var browser = browsers[i]
+        var option = new Option(browser['name'], browser['index']);
+        browserSelect.appendChild(option);
+      }
+    },
+  };
+
+  ImportDataOverlay.updateSupportedBrowsers = function(browsers) {
+    ImportDataOverlay.getInstance().updateSupportedBrowsers_(browsers);
+  }
+
+  // Export
+  return {
+    ImportDataOverlay: ImportDataOverlay
+  };
+
+});
 
-ImportDataOverlay.updateSupportedBrowsers = function(browsers) {
-  ImportDataOverlay.getInstance().updateSupportedBrowsers_(browsers);
-}
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index c1b2597..d816839 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -2,187 +2,196 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// OptionsPage class:
-
-/**
- * Base class for options page.
- * @constructor
- * @param {string} name Options page name, also defines id of the div element
- *     containing the options view and the name of options page navigation bar
- *     item as name+'PageNav'.
- * @param {string} title Options page title, used for navigation bar
- * @extends {EventTarget}
- */
-function OptionsPage(name, title, pageDivName) {
-  this.name = name;
-  this.title = title;
-  this.pageDivName = pageDivName;
-  this.pageDiv = $(this.pageDivName);
-  this.tab = null;
-}
-
-OptionsPage.registeredPages_ = {};
-
-/**
- * Pages which are meant to have an entry in the nav, but
- * not have a permanent entry.
- */
-OptionsPage.registeredSubPages_ = {};
-
-/**
- * Pages which are meant to behave like model dialogs.
- */
-OptionsPage.registeredOverlayPages_ = {};
-
-/**
- * Shows a registered page.
- * @param {string} pageName Page name.
- */
-OptionsPage.showPageByName = function(pageName) {
-  for (var name in OptionsPage.registeredPages_) {
-    var page = OptionsPage.registeredPages_[name];
-    page.visible = name == pageName;
-  }
-};
-
-/**
- * Shows a registered Overlay page.
- * @param {string} overlayName Page name.
- */
-OptionsPage.showOverlay = function(overlayName) {
-  if (OptionsPage.registeredOverlayPages_[overlayName]) {
-    OptionsPage.registeredOverlayPages_[overlayName].visible = true;
+cr.define('options', function() {
+  /////////////////////////////////////////////////////////////////////////////
+  // OptionsPage class:
+
+  /**
+   * Base class for options page.
+   * @constructor
+   * @param {string} name Options page name, also defines id of the div element
+   *     containing the options view and the name of options page navigation bar
+   *     item as name+'PageNav'.
+   * @param {string} title Options page title, used for navigation bar
+   * @extends {EventTarget}
+   */
+  function OptionsPage(name, title, pageDivName) {
+    this.name = name;
+    this.title = title;
+    this.pageDivName = pageDivName;
+    this.pageDiv = $(this.pageDivName);
+    this.tab = null;
   }
-};
-
-OptionsPage.clearOverlays = function() {
-   for (var name in OptionsPage.registeredOverlayPages_) {
-     var page = OptionsPage.registeredOverlayPages_[name];
-     page.visible = false;
-   }
-};
-
-/**
- * Registers new options page.
- * @param {OptionsPage} page Page to register.
- */
-OptionsPage.register = function(page) {
-  OptionsPage.registeredPages_[page.name] = page;
-  // Create and add new page <li> element to navbar.
-  var pageNav = document.createElement('li');
-  pageNav.id = page.name + 'PageNav';
-  pageNav.className = 'navbar-item';
-  pageNav.setAttribute('pageName', page.name);
-  pageNav.textContent = page.title;
-  pageNav.onclick = function(event) {
-    OptionsPage.showPageByName(this.getAttribute('pageName'));
+
+  OptionsPage.registeredPages_ = {};
+
+  /**
+   * Pages which are meant to have an entry in the nav, but
+   * not have a permanent entry.
+   */
+  OptionsPage.registeredSubPages_ = {};
+
+  /**
+   * Pages which are meant to behave like model dialogs.
+   */
+  OptionsPage.registeredOverlayPages_ = {};
+
+  /**
+   * Shows a registered page.
+   * @param {string} pageName Page name.
+   */
+  OptionsPage.showPageByName = function(pageName) {
+    for (var name in OptionsPage.registeredPages_) {
+      var page = OptionsPage.registeredPages_[name];
+      page.visible = name == pageName;
+    }
   };
-  var navbar = $('navbar');
-  navbar.appendChild(pageNav);
-  page.tab = pageNav;
-  page.initializePage();
-};
-
-/**
- * Registers a new Sub tab page.
- * @param {OptionsPage} page Page to register.
- */
-OptionsPage.registerSubPage = function(page) {
-  OptionsPage.registeredPages_[page.name] = page;
-  var pageNav = document.createElement('li');
-  pageNav.id = page.name + 'PageNav';
-  pageNav.className = 'navbar-item hidden';
-  pageNav.setAttribute('pageName', page.name);
-  pageNav.textContent = page.title;
-  var subpagesnav = $('subpagesnav');
-  subpagesnav.appendChild(pageNav);
-  page.tab = pageNav;
-  page.initializePage();
-};
-
-/**
- * Registers a new Overlay page.
- * @param {OptionsPage} page Page to register, must be a class derviced from
- * OptionsPage.
- */
-OptionsPage.registerOverlay = function(page) {
-  OptionsPage.registeredOverlayPages_[page.name] = page;
-  page.tab = undefined;
-  page.isOverlay = true;
-  page.initializePage();
-};
-
-/**
- * Callback for window.onpopstate.
- * @param {Object} data State data pushed into history.
- */
-OptionsPage.setState = function(data) {
-  if (data && data.pageName) {
-    OptionsPage.showPageByName(data.pageName);
-  }
-};
 
-/**
- * Initializes the complete options page.  This will cause
- * all C++ handlers to be invoked to do final setup.
- */
-OptionsPage.initialize = function() {
-  chrome.send('coreOptionsInitialize');
-};
+  /**
+   * Shows a registered Overlay page.
+   * @param {string} overlayName Page name.
+   */
+  OptionsPage.showOverlay = function(overlayName) {
+    if (OptionsPage.registeredOverlayPages_[overlayName]) {
+      OptionsPage.registeredOverlayPages_[overlayName].visible = true;
+    }
+  };
 
-OptionsPage.prototype = {
-  __proto__: cr.EventTarget.prototype,
+  OptionsPage.clearOverlays = function() {
+     for (var name in OptionsPage.registeredOverlayPages_) {
+       var page = OptionsPage.registeredOverlayPages_[name];
+       page.visible = false;
+     }
+  };
+
+  /**
+   * Registers new options page.
+   * @param {OptionsPage} page Page to register.
+   */
+  OptionsPage.register = function(page) {
+    OptionsPage.registeredPages_[page.name] = page;
+    // Create and add new page <li> element to navbar.
+    var pageNav = document.createElement('li');
+    pageNav.id = page.name + 'PageNav';
+    pageNav.className = 'navbar-item';
+    pageNav.setAttribute('pageName', page.name);
+    pageNav.textContent = page.title;
+    pageNav.onclick = function(event) {
+      OptionsPage.showPageByName(this.getAttribute('pageName'));
+    };
+    var navbar = $('navbar');
+    navbar.appendChild(pageNav);
+    page.tab = pageNav;
+    page.initializePage();
+  };
 
   /**
-   * Initializes page content.
+   * Registers a new Sub tab page.
+   * @param {OptionsPage} page Page to register.
    */
-  initializePage: function() {},
+  OptionsPage.registerSubPage = function(page) {
+    OptionsPage.registeredPages_[page.name] = page;
+    var pageNav = document.createElement('li');
+    pageNav.id = page.name + 'PageNav';
+    pageNav.className = 'navbar-item hidden';
+    pageNav.setAttribute('pageName', page.name);
+    pageNav.textContent = page.title;
+    var subpagesnav = $('subpagesnav');
+    subpagesnav.appendChild(pageNav);
+    page.tab = pageNav;
+    page.initializePage();
+  };
 
   /**
-   * Gets page visibility state.
+   * Registers a new Overlay page.
+   * @param {OptionsPage} page Page to register, must be a class derviced from
+   * OptionsPage.
    */
-  get visible() {
-    var page = $(this.pageDivName);
-    return page.ownerDocument.defaultView.getComputedStyle(
-        page).display == 'block';
-  },
+  OptionsPage.registerOverlay = function(page) {
+    OptionsPage.registeredOverlayPages_[page.name] = page;
+    page.tab = undefined;
+    page.isOverlay = true;
+    page.initializePage();
+  };
 
   /**
-   * Sets page visibility.
+   * Callback for window.onpopstate.
+   * @param {Object} data State data pushed into history.
    */
-  set visible(visible) {
-    if ((this.visible && visible) || (!this.visible && !visible))
-      return;
-
-    if (visible) {
-      this.pageDiv.style.display = 'block';
-      if (this.isOverlay) {
-        var overlay = $('overlay');
-        overlay.classList.remove('hidden');
+  OptionsPage.setState = function(data) {
+    if (data && data.pageName) {
+      OptionsPage.showPageByName(data.pageName);
+    }
+  };
+
+  /**
+   * Initializes the complete options page.  This will cause
+   * all C++ handlers to be invoked to do final setup.
+   */
+  OptionsPage.initialize = function() {
+    chrome.send('coreOptionsInitialize');
+  };
+
+  OptionsPage.prototype = {
+    __proto__: cr.EventTarget.prototype,
+
+    /**
+     * Initializes page content.
+     */
+    initializePage: function() {},
+
+    /**
+     * Gets page visibility state.
+     */
+    get visible() {
+      var page = $(this.pageDivName);
+      return page && page.ownerDocument.defaultView.getComputedStyle(
+          page).display == 'block';
+    },
+
+    /**
+     * Sets page visibility.
+     */
+    set visible(visible) {
+      if ((this.visible && visible) || (!this.visible && !visible))
+        return;
+
+      if (visible) {
+        this.pageDiv.style.display = 'block';
+        if (this.isOverlay) {
+          var overlay = $('overlay');
+          overlay.classList.remove('hidden');
+        } else {
+          // Recent webkit change no longer allows url change from "chrome://".
+          window.history.pushState({pageName: this.name},
+                                   this.title);
+        }
+        if (this.tab) {
+          this.tab.classList.add('navbar-item-selected');
+          if (this.tab.parentNode && this.tab.parentNode.id == 'subpagesnav')
+            this.tab.classList.remove('hidden');
+        }
       } else {
-        // Recent webkit change no longer allows url change from "chrome://".
-        window.history.pushState({pageName: this.name},
-                                 this.title);
-      }
-      if (this.tab) {
-        this.tab.classList.add('navbar-item-selected');
-        if (this.tab.parentNode && this.tab.parentNode.id == 'subpagesnav')
-          this.tab.classList.remove('hidden');
-      }
-    } else {
-      if (this.isOverlay) {
-        var overlay = $('overlay');
-        overlay.classList.add('hidden');
-      }
-      this.pageDiv.style.display = 'none';
-      if (this.tab) {
-        this.tab.classList.remove('navbar-item-selected');
-        if (this.tab.parentNode && this.tab.parentNode.id == 'subpagesnav')
-          this.tab.classList.add('hidden');
-      }
+        if (this.isOverlay) {
+          var overlay = $('overlay');
+          overlay.classList.add('hidden');
+        }
+        this.pageDiv.style.display = 'none';
+        if (this.tab) {
+          this.tab.classList.remove('navbar-item-selected');
+          if (this.tab.parentNode && this.tab.parentNode.id == 'subpagesnav')
+            this.tab.classList.add('hidden');
+        }
+     }
+
+      cr.dispatchPropertyChange(this, 'visible', visible, !visible);
     }
+  };
+
+  // Export
+  return {
+    OptionsPage: OptionsPage
+  };
+
+});
 
-    cr.dispatchPropertyChange(this, 'visible', visible, !visible);
-  }
-};
diff --git a/chrome/browser/resources/options/personal_options.js b/chrome/browser/resources/options/personal_options.js
index b5d2d28..7f1e1e0 100644
--- a/chrome/browser/resources/options/personal_options.js
+++ b/chrome/browser/resources/options/personal_options.js
@@ -2,90 +2,102 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-//
-// PersonalOptions class
-// Encapsulated handling of personal options page.
-//
-function PersonalOptions() {
-  OptionsPage.call(this, 'personal', templateData.personalPage, 'personalPage');
-}
-
-cr.addSingletonGetter(PersonalOptions);
-
-PersonalOptions.prototype = {
-  // Inherit PersonalOptions from OptionsPage.
-  __proto__: OptionsPage.prototype,
-
-  // Initialize PersonalOptions page.
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
-
-    // Listen to pref changes.
-    Preferences.getInstance().addEventListener('sync.has_setup_completed',
-        function(event) {
-          if(event.value) {
-            chrome.send('getSyncStatus');
-            $('text-when-synced').style.display = 'block';
-            $('button-when-synced').style.display = 'block';
-            $('stop-sync').onclick = function(event) {
-              OptionsPage.showOverlay('stopSyncingOverlay');
-            };
-
-            $('sync-customize').onclick = function(event) {
-              OptionsPage.showPageByName('sync');
-            };
-
-            $('text-when-not-synced').style.display = 'none';
-            $('button-when-not-synced').style.display = 'none';
-          }
-          else {
-            $('text-when-not-synced').style.display = 'block';
-            $('button-when-not-synced').style.display = 'block';
-            $('start-sync').onclick = function(event) {
-              //TODO(sargrass): Show start-sync subpage, after dhg done.
-            };
-
-            $('text-when-synced').style.display = 'none';
-            $('button-when-synced').style.display = 'none';
-          }
-        });
-
-
-    $('showpasswords').onclick = function(event) {
-      //TODO(sargrass): Show passwords dialog here.
-    };
-
-    $('autofill_options').onclick = function(event) {
-      //TODO(sargrass): Show autofill dialog here.
-    };
-
-    $('import_data').onclick = function(event) {
-        OptionsPage.showOverlay('importDataOverlay');
-    };
-
-    if(!cr.isChromeOS && navigator.platform.match(/linux|BSD/i)) {
-      $('themes_GTK_button').onclick = function(event) {
-        //TODO(sargrass): Show themes GTK dialog here.
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
+
+  //
+  // PersonalOptions class
+  // Encapsulated handling of personal options page.
+  //
+  function PersonalOptions() {
+    OptionsPage.call(this, 'personal', templateData.personalPage,
+                     'personalPage');
+  }
+
+  cr.addSingletonGetter(PersonalOptions);
+
+  PersonalOptions.prototype = {
+    // Inherit PersonalOptions from OptionsPage.
+    __proto__: options.OptionsPage.prototype,
+
+    // Initialize PersonalOptions page.
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
+
+      // Listen to pref changes.
+      Preferences.getInstance().addEventListener('sync.has_setup_completed',
+          function(event) {
+            if(event.value) {
+              chrome.send('getSyncStatus');
+              $('text-when-synced').style.display = 'block';
+              $('button-when-synced').style.display = 'block';
+              $('stop-sync').onclick = function(event) {
+                OptionsPage.showOverlay('stopSyncingOverlay');
+              };
+
+              $('sync-customize').onclick = function(event) {
+                OptionsPage.showPageByName('sync');
+              };
+
+              $('text-when-not-synced').style.display = 'none';
+              $('button-when-not-synced').style.display = 'none';
+            } else {
+              $('text-when-not-synced').style.display = 'block';
+              $('button-when-not-synced').style.display = 'block';
+              $('start-sync').onclick = function(event) {
+                //TODO(sargrass): Show start-sync subpage, after dhg done.
+              };
+
+              $('text-when-synced').style.display = 'none';
+              $('button-when-synced').style.display = 'none';
+            }
+          });
+
+
+      $('showpasswords').onclick = function(event) {
+        //TODO(sargrass): Show passwords dialog here.
       };
 
-      $('themes_set_classic').onclick = function(event) {
-        //TODO(sargrass): Show themes set classic dialog here.
+      $('autofill_options').onclick = function(event) {
+        //TODO(sargrass): Show autofill dialog here.
       };
-    }
 
-    if(cr.isMac || cr.isWindows || cr.isChromeOS) {
-      $('themes_reset').onclick = function(event) {
-        //TODO(sargrass): Show themes reset dialog here.
+      $('import_data').onclick = function(event) {
+          OptionsPage.showOverlay('importDataOverlay');
       };
-    }
-  },
 
-  syncStatusCallback_: function(statusString) {
-    $('synced_to_user_with_time').textContent = statusString;
-  },
-};
+      if(!cr.isChromeOS && navigator.platform.match(/linux|BSD/i)) {
+        $('themes_GTK_button').onclick = function(event) {
+          //TODO(sargrass): Show themes GTK dialog here.
+        };
+
+        $('themes_set_classic').onclick = function(event) {
+          //TODO(sargrass): Show themes set classic dialog here.
+        };
+      }
+
+      if(cr.isMac || cr.isWindows || cr.isChromeOS) {
+        $('themes_reset').onclick = function(event) {
+          //TODO(sargrass): Show themes reset dialog here.
+        };
+      }
+    },
+
+    syncStatusCallback_: function(statusString) {
+      $('synced_to_user_with_time').textContent = statusString;
+    },
+  };
+
+  PersonalOptions.syncStatusCallback = function(statusString){
+    PersonalOptions.getInstance().syncStatusCallback_(statusString);
+  };
+
+  // Export
+  return {
+    PersonalOptions: PersonalOptions
+  };
+
+});
 
-PersonalOptions.syncStatusCallback = function(statusString){
-  PersonalOptions.getInstance().syncStatusCallback_(statusString);
-};
diff --git a/chrome/browser/resources/options/pref_ui.js b/chrome/browser/resources/options/pref_ui.js
index 5ce2e8f..b815523 100644
--- a/chrome/browser/resources/options/pref_ui.js
+++ b/chrome/browser/resources/options/pref_ui.js
@@ -2,285 +2,302 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// PrefCheckbox class:
-
-// Define a constructor that uses an input element as its underlying element.
-var PrefCheckbox = cr.ui.define('input');
-
-PrefCheckbox.prototype = {
-  // Set up the prototype chain
-  __proto__: HTMLInputElement.prototype,
-
-  /**
-   * Initialization function for the cr.ui framework.
-   */
-  decorate: function() {
-    this.type = 'checkbox';
-    var self = this;
-
-    // Listen to pref changes.
-    Preferences.getInstance().addEventListener(this.pref,
-        function(event) {
-          self.checked = event.value;
-        });
-
-    // Listen to user events.
-    this.addEventListener('click',
-        function(e) {
-          Preferences.setBooleanPref(self.pref, self.checked);
-        });
-  }
-};
-
-/**
- * The preference name.
- * @type {string}
- */
-cr.defineProperty(PrefCheckbox, 'pref', cr.PropertyKind.ATTR);
-
-///////////////////////////////////////////////////////////////////////////////
-// PrefRadio class:
-
-//Define a constructor that uses an input element as its underlying element.
-var PrefRadio = cr.ui.define('input');
-
-PrefRadio.prototype = {
-  // Set up the prototype chain
-  __proto__: HTMLInputElement.prototype,
-
-  /**
-   * Initialization function for the cr.ui framework.
-   */
-  decorate: function() {
-    this.type = 'radio';
-    var self = this;
-
-    // Listen to pref changes.
-    Preferences.getInstance().addEventListener(this.pref,
-        function(event) {
-          self.checked = String(event.value) == self.value;
-        });
-
-    // Listen to user events.
-    this.addEventListener('change',
-        function(e) {
-          if(self.value == 'true' || self.value == 'false') {
-            Preferences.setBooleanPref(self.pref,
-                self.value == 'true');
-          }else {
-            Preferences.setIntegerPref(self.pref,
-                parseInt(self.value, 10));
-          }
-        });
-  },
+cr.define('options', function() {
+
+  var Preferences = options.Preferences;
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefCheckbox class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var PrefCheckbox = cr.ui.define('input');
+
+  PrefCheckbox.prototype = {
+    // Set up the prototype chain
+    __proto__: HTMLInputElement.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      this.type = 'checkbox';
+      var self = this;
+
+      // Listen to pref changes.
+      Preferences.getInstance().addEventListener(this.pref,
+          function(event) {
+            self.checked = event.value;
+          });
+
+      // Listen to user events.
+      this.addEventListener('click',
+          function(e) {
+            Preferences.setBooleanPref(self.pref, self.checked);
+          });
+    }
+  };
 
   /**
-   * Getter for preference name attribute.
+   * The preference name.
+   * @type {string}
    */
-  get pref() {
-    return this.getAttribute('pref');
-  },
-
-  /**
-   * Setter for preference name attribute.
-   */
-  set pref(name) {
-    this.setAttribute('pref', name);
-  }
-};
-
-
-///////////////////////////////////////////////////////////////////////////////
-// PrefNumeric class:
-
-// Define a constructor that uses an input element as its underlying element.
-var PrefNumeric = function() {};
-PrefNumeric.prototype = {
-  // Set up the prototype chain
-  __proto__: HTMLInputElement.prototype,
+  cr.defineProperty(PrefCheckbox, 'pref', cr.PropertyKind.ATTR);
+
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefRadio class:
+
+  //Define a constructor that uses an input element as its underlying element.
+  var PrefRadio = cr.ui.define('input');
+
+  PrefRadio.prototype = {
+    // Set up the prototype chain
+    __proto__: HTMLInputElement.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      this.type = 'radio';
+      var self = this;
+
+      // Listen to pref changes.
+      Preferences.getInstance().addEventListener(this.pref,
+          function(event) {
+            self.checked = String(event.value) == self.value;
+          });
+
+      // Listen to user events.
+      this.addEventListener('change',
+          function(e) {
+            if(self.value == 'true' || self.value == 'false') {
+              Preferences.setBooleanPref(self.pref,
+                  self.value == 'true');
+            } else {
+              Preferences.setIntegerPref(self.pref,
+                  parseInt(self.value, 10));
+            }
+          });
+    },
+
+    /**
+     * Getter for preference name attribute.
+     */
+    get pref() {
+      return this.getAttribute('pref');
+    },
+
+    /**
+     * Setter for preference name attribute.
+     */
+    set pref(name) {
+      this.setAttribute('pref', name);
+    }
+  };
+
+
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefNumeric class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var PrefNumeric = function() {};
+  PrefNumeric.prototype = {
+    // Set up the prototype chain
+    __proto__: HTMLInputElement.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      var self = this;
+
+      // Listen to pref changes.
+      Preferences.getInstance().addEventListener(this.pref,
+          function(event) {
+            self.value = event.value;
+          });
+
+      // Listen to user events.
+      this.addEventListener('change',
+          function(e) {
+            Preferences.setIntegerPref(self.pref, self.value);
+          });
+    }
+  };
 
   /**
-   * Initialization function for the cr.ui framework.
+   * The preference name.
+   * @type {string}
    */
-  decorate: function() {
-    var self = this;
-
-    // Listen to pref changes.
-    Preferences.getInstance().addEventListener(this.pref,
-        function(event) {
-          self.value = event.value;
-        });
-
-    // Listen to user events.
-    this.addEventListener('change',
-        function(e) {
-          Preferences.setIntegerPref(self.pref, self.value);
-        });
-  }
-};
-
-/**
- * The preference name.
- * @type {string}
- */
-cr.defineProperty(PrefNumeric, 'pref', cr.PropertyKind.ATTR);
-
-///////////////////////////////////////////////////////////////////////////////
-// PrefNumber class:
-
-// Define a constructor that uses an input element as its underlying element.
-var PrefNumber = cr.ui.define('input');
-
-PrefNumber.prototype = {
-  // Set up the prototype chain
-  __proto__: PrefNumeric.prototype,
+  cr.defineProperty(PrefNumeric, 'pref', cr.PropertyKind.ATTR);
+
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefNumber class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var PrefNumber = cr.ui.define('input');
+
+  PrefNumber.prototype = {
+    // Set up the prototype chain
+    __proto__: PrefNumeric.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      this.type = 'number';
+      PrefNumeric.prototype.decorate.call(this);
+    }
+  };
+
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefRange class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var PrefRange = cr.ui.define('input');
+
+  PrefRange.prototype = {
+    // Set up the prototype chain
+    __proto__: PrefNumeric.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      this.type = 'range';
+      PrefNumeric.prototype.decorate.call(this);
+    }
+  };
+
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefSelect class:
+
+  // Define a constructor that uses an select element as its underlying element.
+  var PrefSelect = cr.ui.define('select');
+
+  PrefSelect.prototype = {
+    // Set up the prototype chain
+    __proto__: HTMLSelectElement.prototype,
+
+    /**
+    * Initialization function for the cr.ui framework.
+    */
+    decorate: function() {
+      var self = this;
+      // Listen to pref changes.
+      Preferences.getInstance().addEventListener(this.pref,
+          function(event) {
+            for (var i = 0; i < self.options.length; i++) {
+              if (self.options[i].value == event.value) {
+                self.selectedIndex = i;
+                return;
+              }
+            }
+            self.selectedIndex = -1;
+          });
+
+      // Listen to user events.
+      this.addEventListener('change',
+          function(e) {
+            switch(self.dataType) {
+              case 'number':
+                Preferences.setIntegerPref(self.pref,
+                    self.options[self.selectedIndex].value);
+                break;
+              case 'boolean':
+                Preferences.setBooleanValue(self.pref,
+                    self.options[self.selectedIndex].value);
+                break;
+              case 'string':
+                Preferences.setStringPref(self.pref,
+                    self.options[self.selectedIndex].value);
+                break;
+            }
+          });
+
+      // Initialize options.
+      this.ownerDocument.addEventListener('DOMContentLoaded',
+          function() {
+            var values = self.getAttribute('data-values');
+            if (values) {
+              self.initializeValues(templateData[values]);
+            }
+          });
+    },
+
+    /**
+     * Sets up options in select element.
+     * @param {Array} options List of option and their display text.
+     * Each element in the array is an array of length 2 which contains options
+     * value in the first element and display text in the second element.
+     *
+     * TODO(zelidrag): move this to that i18n template classes.
+     */
+    initializeValues: function(options) {
+      options.forEach(function (values) {
+        if (this.dataType == undefined)
+          this.dataType = typeof values[0];
+        this.appendChild(new Option(values[1], values[0]));
+      }, this);
+    }
+  };
 
   /**
-   * Initialization function for the cr.ui framework.
+   * The preference name.
+   * @type {string}
    */
-  decorate: function() {
-    this.type = 'number';
-    PrefNumeric.prototype.decorate.call(this);
-  }
-};
-
-///////////////////////////////////////////////////////////////////////////////
-// PrefRange class:
-
-// Define a constructor that uses an input element as its underlying element.
-var PrefRange = cr.ui.define('input');
-
-PrefRange.prototype = {
-  // Set up the prototype chain
-  __proto__: PrefNumeric.prototype,
+  cr.defineProperty(PrefSelect, 'pref', cr.PropertyKind.ATTR);
+
+  /////////////////////////////////////////////////////////////////////////////
+  // PrefTextField class:
+
+  // Define a constructor that uses an input element as its underlying element.
+  var PrefTextField = cr.ui.define('input');
+
+  PrefTextField.prototype = {
+    // Set up the prototype chain
+    __proto__: HTMLInputElement.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      var self = this;
+
+      // Listen to pref changes.
+      Preferences.getInstance().addEventListener(this.pref,
+          function(event) {
+            self.value = event.value;
+          });
+
+      // Listen to user events.
+      this.addEventListener('change',
+          function(e) {
+            Preferences.setStringPref(self.pref, self.value);
+          });
+
+      window.addEventListener('unload',
+          function() {
+            if (document.activeElement == self)
+              self.blur();
+          });
+    }
+  };
 
   /**
-   * Initialization function for the cr.ui framework.
+   * The preference name.
+   * @type {string}
    */
-  decorate: function() {
-    this.type = 'range';
-    PrefNumeric.prototype.decorate.call(this);
-  }
-};
-
-///////////////////////////////////////////////////////////////////////////////
-// PrefSelect class:
-
-// Define a constructor that uses an select element as its underlying element.
-var PrefSelect = cr.ui.define('select');
+  cr.defineProperty(PrefTextField, 'pref', cr.PropertyKind.ATTR);
 
-PrefSelect.prototype = {
-  // Set up the prototype chain
-  __proto__: HTMLSelectElement.prototype,
+  // Export
+  return {
+    PrefCheckbox: PrefCheckbox,
+    PrefNumber: PrefNumber,
+    PrefNumeric: PrefNumeric,
+    PrefRadio: PrefRadio,
+    PrefRange: PrefRange,
+    PrefSelect: PrefSelect,
+    PrefTextField: PrefTextField
+  };
 
-  /**
-  * Initialization function for the cr.ui framework.
-  */
-  decorate: function() {
-    var self = this;
-    // Listen to pref changes.
-    Preferences.getInstance().addEventListener(this.pref,
-        function(event) {
-          for (var i = 0; i < self.options.length; i++) {
-            if (self.options[i].value == event.value) {
-              self.selectedIndex = i;
-              return;
-            }
-          }
-          self.selectedIndex = -1;
-        });
-
-    // Listen to user events.
-    this.addEventListener('change',
-        function(e) {
-          switch(self.dataType) {
-            case 'number':
-              Preferences.setIntegerPref(self.pref,
-                  self.options[self.selectedIndex].value);
-              break;
-            case 'boolean':
-              Preferences.setBooleanValue(self.pref,
-                  self.options[self.selectedIndex].value);
-              break;
-            case 'string':
-              Preferences.setStringPref(self.pref,
-                  self.options[self.selectedIndex].value);
-              break;
-          }
-        });
-
-    // Initialize options.
-    this.ownerDocument.addEventListener('DOMContentLoaded',
-        function() {
-          var values = self.getAttribute('data-values');
-          if (values) {
-            self.initializeValues(templateData[values]);
-          }
-        });
-  },
-
-  /**
-   * Sets up options in select element.
-   * @param {Array} options List of option and their display text.
-   * Each element in the array is an array of length 2 which contains options
-   * value in the first element and display text in the second element.
-   *
-   * TODO(zelidrag): move this to that i18n template classes.
-   */
-  initializeValues: function(options) {
-    options.forEach(function (values) {
-      if (this.dataType == undefined)
-        this.dataType = typeof values[0];
-      this.appendChild(new Option(values[1], values[0]));
-    }, this);
-  }
-};
-
-/**
- * The preference name.
- * @type {string}
- */
-cr.defineProperty(PrefSelect, 'pref', cr.PropertyKind.ATTR);
-
-///////////////////////////////////////////////////////////////////////////////
-// PrefTextField class:
-
-// Define a constructor that uses an input element as its underlying element.
-var PrefTextField = cr.ui.define('input');
-
-PrefTextField.prototype = {
-  // Set up the prototype chain
-  __proto__: HTMLInputElement.prototype,
+});
 
-  /**
-   * Initialization function for the cr.ui framework.
-   */
-  decorate: function() {
-    var self = this;
-
-    // Listen to pref changes.
-    Preferences.getInstance().addEventListener(this.pref,
-        function(event) {
-          self.value = event.value;
-        });
-
-    // Listen to user events.
-    this.addEventListener('change',
-        function(e) {
-          Preferences.setStringPref(self.pref, self.value);
-        });
-
-    window.addEventListener('unload',
-        function() {
-          if (document.activeElement == self)
-            self.blur();
-        });
-  }
-};
-
-/**
- * The preference name.
- * @type {string}
- */
-cr.defineProperty(PrefTextField, 'pref', cr.PropertyKind.ATTR);
diff --git a/chrome/browser/resources/options/preferences.js b/chrome/browser/resources/options/preferences.js
index cb226bcb..72d1a09 100644
--- a/chrome/browser/resources/options/preferences.js
+++ b/chrome/browser/resources/options/preferences.js
@@ -2,145 +2,156 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// Preferences class:
-
-/**
- * Preferences class manages access to Chrome profile preferences.
- * @constructor
- */
-function Preferences() {
-}
-
-cr.addSingletonGetter(Preferences);
-
-/**
- * Extracts preference value.
- * @param {Object} dict Map of preference values passed to fetchPrefs callback.
- * @param {string} name Preference name.
- * @return preference value.
- */
-Preferences.getPref = function (dict, name) {
-  var parts = name.split('.');
-  var cur = dict;
-  for (var part; part = parts.shift(); ) {
-    if (cur[part]) {
-      cur = cur[part];
-    } else {
-      return null;
-    }
-  }
-  return cur;
-};
-
-/**
- * Sets value of a boolean preference.
- * and signals its changed value.
- * @param {string} name Preference name.
- * @param {boolean} value New preference value.
- */
-Preferences.setBooleanPref = function (name, value) {
-  chrome.send('setBooleanPref', [name, value ? 'true' : 'false']);
-};
-
-/**
- * Sets value of an integer preference.
- * and signals its changed value.
- * @param {string} name Preference name.
- * @param {number} value New preference value.
- */
-Preferences.setIntegerPref = function(name, value) {
-  chrome.send('setIntegerPref', [name, String(value)]);
-};
-
-/**
- * Sets value of a string preference.
- * and signals its changed value.
- * @param {string} name Preference name.
- * @param {string} value New preference value.
- */
-Preferences.setStringPref = function(name, value) {
-  chrome.send('setStringPref', [name, value]);
-};
-
-/**
- * Sets value of a JSON preference.
- * and signals its changed value.
- * @param {string} name Preference name.
- * @param {string} value New preference value.
- */
-Preferences.setObjectPref = function(name, value) {
-  chrome.send('setObjectPref', [name, JSON.stringify(value)]);
-};
-
-Preferences.prototype = {
-  __proto__: cr.EventTarget.prototype,
-
-  // Map of registered preferences.
-  registeredPreferences_: {},
+cr.define('options', function() {
+
+  /////////////////////////////////////////////////////////////////////////////
+  // Preferences class:
 
   /**
-   * Adds an event listener to the target.
-   * @param {string} type The name of the event.
-   * @param {!Function|{handleEvent:Function}} handler The handler for the
-   *     event. This is called when the event is dispatched.
+   * Preferences class manages access to Chrome profile preferences.
+   * @constructor
    */
-  addEventListener: function(type, handler) {
-    cr.EventTarget.prototype.addEventListener.call(this, type, handler);
-    this.registeredPreferences_[type] = true;
-  },
+  function Preferences() {
+  }
+
+  cr.addSingletonGetter(Preferences);
 
   /**
-   * Initializes preference reading and change notifications.
+   * Extracts preference value.
+   * @param {Object} dict Map of preference values passed to fetchPrefs
+   *     callback.
+   * @param {string} name Preference name.
+   * @return preference value.
    */
-  initialize: function() {
-    var params1 = ['Preferences.prefsFetchedCallback'];
-    var params2 = ['Preferences.prefsChangedCallback'];
-    for (var prefName in this.registeredPreferences_) {
-      params1.push(prefName);
-      params2.push(prefName);
+  Preferences.getPref = function (dict, name) {
+    var parts = name.split('.');
+    var cur = dict;
+    for (var part; part = parts.shift(); ) {
+      if (cur[part]) {
+        cur = cur[part];
+      } else {
+        return null;
+      }
     }
-    chrome.send('fetchPrefs', params1);
-    chrome.send('observePrefs', params2);
-  },
+    return cur;
+  };
 
   /**
-   * Helper function for flattening of dictionary passed via fetchPrefs
-   * callback.
-   * @param {string} prefix Preference name prefix.
-   * @param {object} dict Map with preference values.
+   * Sets value of a boolean preference.
+   * and signals its changed value.
+   * @param {string} name Preference name.
+   * @param {boolean} value New preference value.
    */
-  flattenMapAndDispatchEvent_: function(prefix, dict) {
-    for (var prefName in dict) {
-      if (typeof dict[prefName] == 'object' &&
-          !this.registeredPreferences_[prefix + prefName]) {
-        this.flattenMapAndDispatchEvent_(prefix + prefName + '.',
-            dict[prefName]);
-      } else {
-        var event = new cr.Event(prefix + prefName);
-        event.value = dict[prefName];
-        this.dispatchEvent(event);
+  Preferences.setBooleanPref = function (name, value) {
+    chrome.send('setBooleanPref', [name, value ? 'true' : 'false']);
+  };
+
+  /**
+   * Sets value of an integer preference.
+   * and signals its changed value.
+   * @param {string} name Preference name.
+   * @param {number} value New preference value.
+   */
+  Preferences.setIntegerPref = function(name, value) {
+    chrome.send('setIntegerPref', [name, String(value)]);
+  };
+
+  /**
+   * Sets value of a string preference.
+   * and signals its changed value.
+   * @param {string} name Preference name.
+   * @param {string} value New preference value.
+   */
+  Preferences.setStringPref = function(name, value) {
+    chrome.send('setStringPref', [name, value]);
+  };
+
+  /**
+   * Sets value of a JSON preference.
+   * and signals its changed value.
+   * @param {string} name Preference name.
+   * @param {string} value New preference value.
+   */
+  Preferences.setObjectPref = function(name, value) {
+    chrome.send('setObjectPref', [name, JSON.stringify(value)]);
+  };
+
+  Preferences.prototype = {
+    __proto__: cr.EventTarget.prototype,
+
+    // Map of registered preferences.
+    registeredPreferences_: {},
+
+    /**
+     * Adds an event listener to the target.
+     * @param {string} type The name of the event.
+     * @param {!Function|{handleEvent:Function}} handler The handler for the
+     *     event. This is called when the event is dispatched.
+     */
+    addEventListener: function(type, handler) {
+      cr.EventTarget.prototype.addEventListener.call(this, type, handler);
+      this.registeredPreferences_[type] = true;
+    },
+
+    /**
+     * Initializes preference reading and change notifications.
+     */
+    initialize: function() {
+      var params1 = ['Preferences.prefsFetchedCallback'];
+      var params2 = ['Preferences.prefsChangedCallback'];
+      for (var prefName in this.registeredPreferences_) {
+        params1.push(prefName);
+        params2.push(prefName);
+      }
+      chrome.send('fetchPrefs', params1);
+      chrome.send('observePrefs', params2);
+    },
+
+    /**
+     * Helper function for flattening of dictionary passed via fetchPrefs
+     * callback.
+     * @param {string} prefix Preference name prefix.
+     * @param {object} dict Map with preference values.
+     */
+    flattenMapAndDispatchEvent_: function(prefix, dict) {
+      for (var prefName in dict) {
+        if (typeof dict[prefName] == 'object' &&
+            !this.registeredPreferences_[prefix + prefName]) {
+          this.flattenMapAndDispatchEvent_(prefix + prefName + '.',
+              dict[prefName]);
+        } else {
+          var event = new cr.Event(prefix + prefName);
+          event.value = dict[prefName];
+          this.dispatchEvent(event);
+        }
       }
     }
-  }
-};
-
-/**
- * Callback for fetchPrefs method.
- * @param {object} dict Map of fetched property values.
- */
-Preferences.prefsFetchedCallback = function(dict) {
-  Preferences.getInstance().flattenMapAndDispatchEvent_('', dict);
-};
-
-/**
- * Callback for observePrefs method.
- * @param {array} notification An array defining changed preference values.
- * notification[0] contains name of the change preference while its new value
- * is stored in notification[1].
- */
-Preferences.prefsChangedCallback = function(notification) {
-  var event = new cr.Event(notification[0]);
-  event.value = notification[1];
-  Preferences.getInstance().dispatchEvent(event);
-};
+  };
+
+  /**
+   * Callback for fetchPrefs method.
+   * @param {object} dict Map of fetched property values.
+   */
+  Preferences.prefsFetchedCallback = function(dict) {
+    Preferences.getInstance().flattenMapAndDispatchEvent_('', dict);
+  };
+
+  /**
+   * Callback for observePrefs method.
+   * @param {array} notification An array defining changed preference values.
+   * notification[0] contains name of the change preference while its new value
+   * is stored in notification[1].
+   */
+  Preferences.prefsChangedCallback = function(notification) {
+    var event = new cr.Event(notification[0]);
+    event.value = notification[1];
+    Preferences.getInstance().dispatchEvent(event);
+  };
+
+  // Export
+  return {
+    Preferences: Preferences
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/search_engine_manager.js b/chrome/browser/resources/options/search_engine_manager.js
index c1bdd76..f24859b 100644
--- a/chrome/browser/resources/options/search_engine_manager.js
+++ b/chrome/browser/resources/options/search_engine_manager.js
@@ -2,28 +2,40 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-///////////////////////////////////////////////////////////////////////////////
-// SearchEngineManager class:
-
-/**
- * Encapsulated handling of search engine management page.
- * @constructor
- */
-function SearchEngineManager() {
-  this.activeNavTab = null;
-  OptionsPage.call(this, 'searchEngines',
-                   templateData.searchEngineManagerPage,
-                   'searchEngineManagerPage');
-}
-
-cr.addSingletonGetter(SearchEngineManager);
-
-SearchEngineManager.prototype = {
-  __proto__: OptionsPage.prototype,
-
-  initializePage: function() {
-    OptionsPage.prototype.initializePage.call(this);
-
-    // TODO(stuartmorgan): Add initialization here.
-  },
-};
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
+
+  /////////////////////////////////////////////////////////////////////////////
+  // SearchEngineManager class:
+
+  /**
+   * Encapsulated handling of search engine management page.
+   * @constructor
+   */
+  function SearchEngineManager() {
+    this.activeNavTab = null;
+    OptionsPage.call(this, 'searchEngines',
+                     templateData.searchEngineManagerPage,
+                     'searchEngineManagerPage');
+  }
+
+  cr.addSingletonGetter(SearchEngineManager);
+
+  SearchEngineManager.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      // TODO(stuartmorgan): Add initialization here.
+    }
+  };
+
+  // Export
+  return {
+    SearchEngineManager: SearchEngineManager
+  };
+
+});
+
diff --git a/chrome/browser/resources/options/stop_syncing_overlay.js b/chrome/browser/resources/options/stop_syncing_overlay.js
index 07dbca0..b010be9 100644
--- a/chrome/browser/resources/options/stop_syncing_overlay.js
+++ b/chrome/browser/resources/options/stop_syncing_overlay.js
@@ -2,37 +2,49 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * StopSyncingOverlay class
- * Encapsulated handling of the 'Stop Syncing This Account' overlay page.
- * @class
- */
-function StopSyncingOverlay() {
-  OptionsPage.call(this, 'stopSyncingOverlay',
-                   templateData.stop_syncing_title,
-                   'stopSyncingOverlay');
-}
-
-cr.addSingletonGetter(StopSyncingOverlay);
-
-StopSyncingOverlay.prototype = {
-  // Inherit StopSyncingOverlay from OptionsPage.
-  __proto__: OptionsPage.prototype,
+cr.define('options', function() {
+
+  var OptionsPage = options.OptionsPage;
 
   /**
-   * Initialize the page.
+   * StopSyncingOverlay class
+   * Encapsulated handling of the 'Stop Syncing This Account' overlay page.
+   * @class
    */
-  initializePage: function() {
-    // Call base class implementation to starts preference initialization.
-    OptionsPage.prototype.initializePage.call(this);
+  function StopSyncingOverlay() {
+    OptionsPage.call(this, 'stopSyncingOverlay',
+                     templateData.stop_syncing_title,
+                     'stopSyncingOverlay');
+  }
 
-    $('stop-syncing-cancel').onclick = function(e) {
-      OptionsPage.clearOverlays();
-    }
+  cr.addSingletonGetter(StopSyncingOverlay);
+
+  StopSyncingOverlay.prototype = {
+    // Inherit StopSyncingOverlay from OptionsPage.
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initialize the page.
+     */
+    initializePage: function() {
+      // Call base class implementation to starts preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
 
-    $('stop-syncing-confirm').onclick = function(e) {
-      chrome.send('stopSyncing');
-      OptionsPage.clearOverlays();
+      $('stop-syncing-cancel').onclick = function(e) {
+        OptionsPage.clearOverlays();
+      }
+
+      $('stop-syncing-confirm').onclick = function(e) {
+        chrome.send('stopSyncing');
+        OptionsPage.clearOverlays();
+      }
     }
-  }
-};
+  };
+
+  // Export
+  return {
+    StopSyncingOverlay: StopSyncingOverlay
+  };
+
+});
+