Changed the zoom input to utilize a pre-populated combo box.

multi-page-viewer.css

@@ -113,6 +113,66 @@ span {
     background: url('images/buttons.png') no-repeat -28px 0px;
 }
 
+#scaleComboBoxInput {
+    background: url('images/combobox.png') no-repeat 0px -23px;
+    display: inline-block;
+    float: left;
+    margin: 0px;
+    width: 35px;
+    height: 23px;
+}
+
+#scaleComboBoxInput input {
+    background: none;
+    border: 0px;
+    margin: 3px 2px 0px;
+    width: 31px;
+}
+
+#scaleComboBoxButton {
+    background: url('images/combobox.png') no-repeat -41px -23px;
+    cursor: pointer;
+    display: inline-block;
+    float: left;
+    margin: 0px;
+    width: 21px;
+    height: 23px;
+}
+
+#scaleComboBoxButton.down {
+    background: url('images/combobox.png') no-repeat -41px -46px;
+}
+
+#scaleComboBoxButton.disabled {
+    background: url('images/combobox.png') no-repeat -41px 0px;
+}
+
+#scaleComboBoxList {
+    background-color: #fff;
+    border: 1px solid #666;
+    clear: both;
+    position: relative;
+    display: none;
+    top: -20px;
+    width: 48px;
+}
+
+#scaleComboBoxList > ul {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+}
+
+#scaleComboBoxList > ul > li {
+    display: inline-block;
+    cursor: pointer;
+    width: 100%;
+}
+
+#scaleComboBoxList > ul > li:hover {
+    background-color: #09f;
+}
+
 #pageNumber, #scale {
     text-align: right;
 }

multi-page-viewer.html

@@ -21,9 +21,18 @@
             <span class="label">Page Number</span>
         </span>
         <span class="control">
-            <input type="text" id="scale" value="100" size="2"/>
+            <span id="scaleComboBoxInput"><input type="text" id="scale" value="100%" size="2"/></span><span id="scaleComboBoxButton"></span>
-            <span>%</span>
             <span class="label">Zoom</span>
+            <div id="scaleComboBoxList">
+                <ul>
+                    <li>50%</li>
+                    <li>75%</li>
+                    <li>100%</li>
+                    <li>125%</li>
+                    <li>150%</li>
+                    <li>200%</li>
+                </ul>
+            </div>
         </span>
     </div>
     <div id="viewer"></div>

multi-page-viewer.js

@@ -8,9 +8,10 @@ var PDFViewer = {
 
     element: null,
 
-    pageNumberInput: null,
     previousPageButton: null,
     nextPageButton: null,
+    pageNumberInput: null,
+    scaleInput: null,
     
     willJumpToPage: false,
 
@@ -158,6 +159,8 @@ var PDFViewer = {
                 PDFViewer.drawPage(1);
             }
         }
+
+        PDFViewer.scaleInput.value = Math.floor(PDFViewer.scale * 100) + '%';
     },
 
     goToPage: function(num) {
@@ -317,13 +320,40 @@ window.onload = function() {
         this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
     };
 
-    var scaleInput = document.getElementById('scale');
+    PDFViewer.scaleInput = document.getElementById('scale');
-    scaleInput.onchange = function(evt) {
+    PDFViewer.scaleInput.buttonElement = document.getElementById('scaleComboBoxButton');
-        PDFViewer.changeScale(this.value);
+    PDFViewer.scaleInput.buttonElement.listElement = document.getElementById('scaleComboBoxList');
+    PDFViewer.scaleInput.onchange = function(evt) {
+        PDFViewer.changeScale(parseInt(this.value));
     };
 
+    PDFViewer.scaleInput.buttonElement.onclick = function(evt) {
+        this.listElement.style.display = (this.listElement.style.display === 'block') ? 'none' : 'block';
+    };
+    PDFViewer.scaleInput.buttonElement.onmousedown = function(evt) {
+        if (this.className.indexOf('disabled') === -1) {
+            this.className = 'down';
+        }
+    };
+    PDFViewer.scaleInput.buttonElement.onmouseup = function(evt) {
+        this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
+    };
+    PDFViewer.scaleInput.buttonElement.onmouseout = function(evt) {
+        this.className = (this.className.indexOf('disabled') !== -1) ? 'disabled' : '';
+    };
+    
+    var listItems = PDFViewer.scaleInput.buttonElement.listElement.getElementsByTagName('LI');
+
+    for (var i = 0; i < listItems.length; i++) {
+        var listItem = listItems[i];
+        listItem.onclick = function(evt) {
+            PDFViewer.changeScale(parseInt(this.innerHTML));
+            PDFViewer.scaleInput.buttonElement.listElement.style.display = 'none';
+        };
+    }
+
     PDFViewer.pageNumber = parseInt(PDFViewer.queryParams.page) || PDFViewer.pageNumber;
-    PDFViewer.scale = parseInt(scaleInput.value) / 100 || 1.0;
+    PDFViewer.scale = parseInt(PDFViewer.scaleInput.value) / 100 || 1.0;
     PDFViewer.open(PDFViewer.queryParams.file || PDFViewer.url);
 
     window.onscroll = function(evt) {