<html i18n-values="dir:textdirection;">
<head>
<title></title>
<style type="text/css">
body {
   line-height: 1.5em;
   background: #FFFFFF;
   font-size: 11pt;
}
html[os='mac'] body {
  line-height: 1.5em;
  background: #FFFFFF;
}
form {
  -webkit-user-select: none;
}
.sync-header {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}
.sync-select-customization {
  margin-top: 10px;
}
#chooseDataTypesRadio {
  vertical-align: top;
}
#chooseDataTypes > div {
  display: inline-block;
}
#chooseDataTypesBody {
  width: 90%;
  -webkit-margin-start: 3ex;
}
#chooseDataTypesBody > div {
  margin-top: 0px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}

.sync-config-tab-contents-inactive {
  display: none;
}
.sync-config-tab-contents-active {
  display: block;
  margin: 10px 15px;
}
.sync-config-tabstrip {
  border-bottom: 1px solid gray;
  height: 25px;
  margin-bottom: 10px;
  padding-top: 10px;
  background-color: #DDD;
}
.sync-config-tab-active {
  background-color: white;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
}

.sync-config-tab-active,
.sync-config-tab-inactive {
  float: left;
  height: 22px;
  padding-top: 3px;
  margin-left: 15px;
  width: 100px;
  text-align: center;
}
.sync-config-tab-active A,
.sync-config-tab-inactive A,
.sync-config-tab-active A:visited,
.sync-config-tab-inactive A:visited,
.sync-config-tab-active A:hover,
.sync-config-tab-inactive A:hover {
  color: black;
  text-decoration: none;
}

#sync-encryption-instructions {
  margin-bottom: 10px;
  line-height: 1.8em;
}

#sync-passphrase-warning {
  font-style: italic;
  line-height: 1.8em;
}

#encryption-tab-contents > .sync_item_show {
  margin-bottom: 5px;
}

.sync-item-show {
  display: block;
  white-space: nowrap;
}

.sync-item-show > label {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 display: inline-block;
 width: 92%;
}

.sync-item-hide {
  display: none;
}
.sync-label-inactive {
  color: #9B9B9B;
}
.sync-label-active {
  color: #000000;
}
.sync-data-types {
  margin-left: 5px;
}
.sync-errors {
  margin-top: 5px;
}
.sync-error-show {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 1px 10px;
  background-color: #eeb939;
  -webkit-border-radius: 4px;
  font-weight: bold;
}
.sync-error-hide {
  display: none;
}
.sync-footer {
  position: fixed;
  right: 0px;
  bottom: 0px;
  margin-right: 10px;
  margin-bottom: 10px;
}
html[dir='rtl'] .sync-footer {
  text-align: left;
  left: 0px;
  bottom: 0px;
  margin-left: 20px;
}

input[type='button'],
input[type='submit'] {
  min-width: 87px;
  min-height: 26px;
}
html[os='mac'] input[type='button'],
html[os='mac'] input[type='submit'] {
  font-size: 12pt;
}

</style>
<script src="chrome://resources/js/cr.js"></script>
<script>
  var currentTab;

  // Called once, when this html/js is loaded.
  function initializeConfigureDialog(args) {
    // Allow platform specific rules
    if (cr.isMac) {
      document.documentElement.setAttribute('os', 'mac');
    } else if (!cr.isWindows) {
      document.documentElement.setAttribute('os', 'linux');
    }

    if (args) {
      currentTab = args['initialTab'];
      switchToTab(currentTab);
      setCheckboxesAndErrors(args);
    }
  }

  function setCheckboxesAndErrors(args) {
    setChooseDataTypesCheckboxes(args);
    setEncryptionCheckboxes(args);
    setErrorState(args);
  }

  function checkAllDataTypeCheckboxes() {
    var checkboxes = document.getElementsByName("dataTypeCheckbox");
    for (var i = 0; i < checkboxes.length; i++) {
      // Only check the visible ones (since there's no way to uncheck
      // the invisible ones).
      if (checkboxes[i].parentElement.className == "sync-item-show") {
        checkboxes[i].checked = true;
      }
    }
  }

  function setCheckboxesToKeepEverythingSynced(value) {
    setDataTypeCheckboxesEnabled(!value);
    if (value)
      checkAllDataTypeCheckboxes();
  }

  // Can be called multiple times.
  function setChooseDataTypesCheckboxes(args) {
    // If this frame is on top, the focus should be on it, so pressing enter
    // submits this form.
    if (args.iframeToShow == 'configure') {
      document.getElementById("okButton").focus();
    }

    document.getElementById("keepEverythingSyncedRadio").checked =
        args.keepEverythingSynced;
    document.getElementById("chooseDataTypesRadio").checked =
        !args.keepEverythingSynced;

    document.getElementById("bookmarksCheckbox").checked = args.syncBookmarks;
    document.getElementById("preferencesCheckbox").checked =
        args.syncPreferences;
    document.getElementById("themesCheckbox").checked = args.syncThemes;

    if (args.passwordsRegistered) {
      document.getElementById("passwordsCheckbox").checked = args.syncPasswords;
      document.getElementById("passwordsItem").className = "sync-item-show";
    } else {
      document.getElementById("passwordsItem").className = "sync-item-hide";
    }
    if (args.autofillRegistered) {
      document.getElementById("autofillCheckbox").checked = args.syncAutofill;
      document.getElementById("autofillItem").className = "sync-item-show";
    } else {
      document.getElementById("autofillItem").className = "sync-item-hide";
    }
    if (args.extensionsRegistered) {
      document.getElementById("extensionsCheckbox").checked =
          args.syncExtensions;
      document.getElementById("extensionsItem").className = "sync-item-show";
    } else {
      document.getElementById("extensionsItem").className = "sync-item-hide";
    }
    if (args.typedUrlsRegistered) {
      document.getElementById("typedUrlsCheckbox").checked = args.syncTypedUrls;
      document.getElementById("omniboxItem").className = "sync-item-show";
    } else {
      document.getElementById("omniboxItem").className = "sync-item-hide";
    }
    if (args.appsRegistered) {
      document.getElementById("appsCheckbox").checked =
          args.syncApps;
      document.getElementById("appsItem").className = "sync-item-show";
    } else {
      document.getElementById("appsItem").className = "sync-item-hide";
    }

    setCheckboxesToKeepEverythingSynced(args.keepEverythingSynced);
    if (args.sessionsRegistered) {
      document.getElementById("sessionsCheckbox").checked = args.syncSessions;
      document.getElementById("sessionsItem").className = "sync-item-show";
    } else {
      document.getElementById("sessionsItem").className = "sync-item-hide";
    }
  }

  function setEncryptionCheckboxes(args) {
    document.getElementById("usePassphraseCheckbox").checked =
        args["usePassphrase"];

    // The passphrase, once set, cannot be unset.
    if (args["usePassphrase"]) {
      document.getElementById("usePassphraseCheckbox").disabled = true;
    }
  }

  function setErrorState(args) {
    if (!args.was_aborted)
      return;
    document.getElementById("aborted_text").className = "sync-error-show";
    document.getElementById("okButton").disabled = true;
    document.getElementById("keepEverythingSyncedRadio").disabled = true;
    document.getElementById("chooseDataTypesRadio").disabled = true;
  }

  function setDataTypeCheckboxesEnabled(enabled) {
    var checkboxes = document.getElementsByName("dataTypeCheckbox");
    var labels = document.getElementsByName("dataTypeLabel");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].disabled = !enabled;
      if (checkboxes[i].disabled) {
        labels[i].className = "sync-label-inactive";
      } else {
        labels[i].className = "sync-label-active";
      }
    }
  }

  // Returns true if at least one data type is enabled and no data types are
  // checked.  (If all data type checkboxes are disabled, it's because "keep
  // everything synced" is checked.)
  function noDataTypesChecked() {
    var checkboxes = document.getElementsByName("dataTypeCheckbox");
    var atLeastOneChecked = false;
    var atLeastOneEnabled = false;
    for (var i = 0; i < checkboxes.length; i++) {
      if (!checkboxes[i].disabled &&
          checkboxes[i].parentElement.className == "sync-item-show") {
        atLeastOneEnabled = true;
        if (checkboxes[i].checked) {
          atLeastOneChecked = true;
        }
      }
    }
    return atLeastOneEnabled && !atLeastOneChecked;
  }

  function sendConfiguration() {
    // Trying to submit, so hide previous errors.
    document.getElementById("aborted_text").className = "sync-error-hide";
    document.getElementById("error_text").className = "sync-error-hide";

    if (noDataTypesChecked()) {
      document.getElementById("error_text").className = "sync-error-show";
      return;
    }

    var f = document.getElementById("chooseDataTypesForm");
    var syncAll = f.keepEverythingSyncedRadio.checked;
    // These values need to be kept in sync with where they are read in
    // SyncSetupFlow::GetDataTypeChoiceData().
    var result = JSON.stringify({
        "keepEverythingSynced": syncAll,
        "syncBookmarks": syncAll || f.bookmarksCheckbox.checked,
        "syncPreferences": syncAll || f.preferencesCheckbox.checked,
        "syncThemes": syncAll || f.themesCheckbox.checked,
        "syncPasswords": syncAll || f.passwordsCheckbox.checked,
        "syncAutofill": syncAll || f.autofillCheckbox.checked,
        "syncExtensions": syncAll || f.extensionsCheckbox.checked,
        "syncTypedUrls": syncAll || f.typedUrlsCheckbox.checked,
        "syncApps": syncAll || f.appsCheckbox.checked,
        "syncSessions": syncAll || f.sessionsCheckbox.checked,
        "usePassphrase": document.getElementById("usePassphraseCheckbox").checked
    });
    chrome.send("Configure", [result]);
  }

  function switchToTab(newTab) {
    if (currentTab) {
      document.getElementById(currentTab + "-tab").className =
          "sync-config-tab-inactive";
      document.getElementById(currentTab + "-tab-contents").className =
          "sync-config-tab-contents-inactive";
    }
    
    document.getElementById(newTab + "-tab").className =
        "sync-config-tab-active";
    document.getElementById(newTab + "-tab-contents").className =
        "sync-config-tab-contents-active";
    
    currentTab = newTab;
  }

</script>
</head>
<body i18n-values=".style.fontFamily:fontfamily"
      onload="initializeConfigureDialog(JSON.parse(chrome.dialogArguments));">
<form id="chooseDataTypesForm" onSubmit="sendConfiguration(); return false;">

  <div class="sync-config-tabstrip">
    <div id="data-type-tab" class="sync-config-tab-inactive">
      <a href="#" onclick="switchToTab('data-type'); return false;"
         i18n-content="dataTypes"></a>
    </div>
    <div id="encryption-tab" class="sync-config-tab-inactive">
      <a href="#" onclick="switchToTab('encryption'); return false;"
         i18n-content="encryption"></a>
    </div>
  </div>
  <div id="data-type-tab-contents" class="sync-config-tab-contents-inactive">

    <div class="sync-header" 
         i18n-content="choosedatatypesheader"></div>
    <div class="sync-choose_data_types_instructions" 
         i18n-content="choosedatatypesinstructions"></div>
    <div class="sync-select-customization">
      <div class="sync-choice_radio">
        <input id="keepEverythingSyncedRadio" type="radio"
               name="syncChooseDataTypes"
               onclick="setCheckboxesToKeepEverythingSynced(true);">
        <label for="keepEverythingSyncedRadio"
               i18n-content="keepeverythingsynced">
        </label>
      </div>
      <div id="chooseDataTypes" class="sync-choice_radio">
        <input id="chooseDataTypesRadio" type="radio" name="syncChooseDataTypes" 
               onclick="setCheckboxesToKeepEverythingSynced(false)">
        <label for="chooseDataTypesRadio" i18n-content="choosedatatypes" ></label>
        <div id="chooseDataTypesBody">
          <div>
            <!-- Apps -->
            <div class="sync-item-show" id="appsItem">
              <input id="appsCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="appsCheckboxLabel" name="dataTypeLabel" 
                     for="appsCheckbox" i18n-content="apps"
                     i18n-values="title:apps"></label>
            </div>
            <!-- Autofill -->
            <div class="sync-item-show" id="autofillItem">
              <input id="autofillCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="autofillCheckboxLabel" name="dataTypeLabel" 
                     for="autofillCheckbox" i18n-content="autofill"
                     i18n-values="title:autofill"></label>
            </div>
            <!-- Bookmarks -->
            <div class="sync-item-show" id="bookmarksItem">
              <input id="bookmarksCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="bookmarksCheckboxLabel" name="dataTypeLabel" 
                     for="bookmarksCheckbox" i18n-content="bookmarks"
                     i18n-values="title:bookmarks"></label>
            </div>
            <!-- Extensions -->
            <div class="sync-item-show" id="extensionsItem">
              <input id="extensionsCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="extensionsCheckboxLabel" name="dataTypeLabel" 
                     for="extensionsCheckbox" i18n-content="extensions"
                     i18n-values="title:extensions"></label>
            </div>
            <!-- Omnibox -->
            <div class="sync-item-show" id="omniboxItem">
              <input id="typedUrlsCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="typedUrlsCheckboxLabel" name="dataTypeLabel" 
                     for="typedUrlsCheckbox" i18n-content="typedurls"
                     i18n-values="title:typedurls"></label>
            </div>
            <!-- Passwords -->
            <div class="sync-item-show" id="passwordsItem">
              <input id="passwordsCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="passwordsCheckboxLabel" name="dataTypeLabel" 
                     for="passwordsCheckbox" i18n-content="passwords"
                     i18n-values="title:passwords"></label>
            </div>
            <!-- Preferences -->
            <div class="sync-item-show" id="preferencesItem">
              <input id="preferencesCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="preferencesCheckboxLabel" name="dataTypeLabel" 
                     for="preferencesCheckbox" i18n-content="preferences"
                     i18n-values="title:preferences"></label>
            </div>
            <!-- Themes -->
            <div class="sync-item-show" id="themesItem">
              <input id="themesCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="themesCheckboxLabel" name="dataTypeLabel" for="themesCheckbox"
                     i18n-content="themes" i18n-values="title:themes"></label>
            </div>
            <!-- Sessions -->
            <div class="sync-item-show" id="sessionsItem">
              <input id="sessionsCheckbox" name="dataTypeCheckbox" type="checkbox">
              <label id="sessionsCheckboxLabel" name="dataTypeLabel" 
                     for="sessionsCheckbox" i18n-content="foreignsessions"
                     il8n-values="title:sessions"></label>
            </div>
          </div>
        </div>
      </div>
      <div class="sync-errors">
        <span id="error_text" i18n-content="synczerodatatypeserror"
              class="sync-error-hide"></span>
        <span id="aborted_text" i18n-content="abortederror"
              class="sync-error-hide"></span>
      </div>
    </div>

  </div>
  <div id="encryption-tab-contents" class="sync-config-tab-contents-inactive">
    <div id="sync-encryption-instructions" 
         i18n-content="encryptionInstructions"></div>
    
    <div class="sync-item-show" id="usePassphrase">
      <input id="usePassphraseCheckbox" name="usePassphraseCheckbox"
             type="checkbox" />
      <label id="usePassphraseLabel" name="usePassphraseLabel"
             for="usePassphraseCheckbox" i18n-content="usePassphraseLabel">
      </label>
    </div>
    
    <div id="sync-passphrase-warning" i18n-content="passphraseWarning">
    </div>
  </div>
  
  <div class="sync-footer">
    <input id="okButton" type="submit" i18n-values="value:ok" />
    <input id="cancelButton" type="button" i18n-values="value:cancel"
           onclick='chrome.send("DialogClose", [""])' />
  </div>
</form>
</body>
</html>