Add page indicator and progress bar polymer elements

elements/viewer-page-indicator/viewer-page-indicator.html

+<polymer-element name="viewer-page-indicator" attributes="text">
+<template>
+  <link rel="stylesheet" href="viewer-page-indicator.css">
+  <div id="text">{{text}}</div>
+  <div id="triangle-right"></div>
+</template>
+<script>
+  Polymer('viewer-page-indicator', {
+    text: '1',
+    timerId: undefined,
+    ready: function() {
+      var scrollCallback = function() {
+        this.style.visibility = document.documentElement.clientWidth ==
+            window.innerWidth ? 'hidden' : 'visible';
+        var percent = window.scrollY /
+            (document.body.scrollHeight -
+             document.documentElement.clientHeight);
+        this.style.top = percent *
+            (document.documentElement.clientHeight - this.offsetHeight) + 'px';
+        this.style.opacity = 1;
+        clearTimeout(this.timerId);
+
+        this.timerId = setTimeout(function() {
+          this.style.opacity = 0;
+          this.timerId = undefined;

[ganetsky1, 2014/02/05 16:55:20]

Just fyi, clearTimeout(undefined) or clearTimeout(timeoutId) called multiple
times on a given timeoutIt are both harmless.

Can you ever get into a situation here where you have multiple outstanding
timeouts concurrently? I think your intention is to prevent that from happening?

[raymes, 2014/02/07 00:33:41]

Cool, thanks!

Yep my intention is to prevent that. Because the timeout is either cleared if it
hasn't been run yet, or run, there should never be multiple timeouts
concurrently.

+        }.bind(this), 2000);
+      }.bind(this);
+      window.addEventListener('scroll', function() {
+        requestAnimationFrame(scrollCallback);
+      });
+
+      scrollCallback();
+    },
+  });
+</script>
+</polymer-element>