<script>
(function () {
// Contains all notifications received since the page was loaded as a
// map from each data type to the number of notifications received for
// it.
chrome.sync.notifications = {};

function updateNotificationsEnabledInfo(notificationsEnabled) {
  var notificationsEnabledInfo =
    document.getElementById('notificationsEnabledInfo');
  jstProcess(
      new JsEvalContext({ 'notificationsEnabled': notificationsEnabled }),
      notificationsEnabledInfo);
}

function updateNotificationInfo(notification) {
  var notificationInfo = document.getElementById('notificationInfo');
    jstProcess(
  new JsEvalContext({ 'notificationInfo':
      JSON.stringify(notification, null, 2)
  }),
  notificationInfo);
}

function onLoad() {
  chrome.sync.getNotificationState(updateNotificationsEnabledInfo);
  chrome.sync.getNotificationInfo(updateNotificationInfo);
  chrome.sync.onSyncNotificationStateChange.addListener(
      updateNotificationsEnabledInfo);

  chrome.sync.onSyncIncomingNotification.addListener(function(changedTypes) {
    for (var i = 0; i < changedTypes.length; ++i) {
      var changedType = changedTypes[i];
      chrome.sync.notifications[changedType] =
          chrome.sync.notifications[changedType] || 0;
      ++chrome.sync.notifications[changedType];
    }

    var infos = [];
    for (var k in chrome.sync.notifications) {
      var info = {
        'modelType': k,
        'notificationCount': chrome.sync.notifications[k]
      };
      infos.push(info);
    }

    var notificationsInfo =
        document.getElementById('notificationsInfo');
    jstProcess(new JsEvalContext({ 'notifications': infos }),
               notificationsInfo);
    chrome.sync.getNotificationInfo(updateNotificationInfo);
  });
}

document.addEventListener("DOMContentLoaded", onLoad, false);
})();
</script>

<style>
table#notificationsInfo tr:nth-child(odd) {
  background: #eff3ff;
}
</style>

<p id='notificationsEnabledInfo'>
  Enabled: <span jscontent='notificationsEnabled'></span>
</p>
<p id='notificationInfo'>
  <span jscontent='notificationInfo'></span>
</p>
<table id='notificationsInfo'>
  <tr jsselect='notifications'>
    <td jscontent='modelType'/>
    <td jscontent='notificationCount'/>
  </tr>
</table>