diff --git a/web/viewer.css b/web/viewer.css
index e8071a5ce..f0f2fca69 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -82,6 +82,7 @@ span#info {
   width: 350px;
   top: 62px;
   bottom: 18px;
+  z-index: 1;
 }
 
 #sidebar.released {
@@ -90,7 +91,6 @@ span#info {
   -o-transition: left 0.25s ease-in-out 1s;
   -moz-transition: left 0.25s ease-in-out 1s;
   -webkit-transition: left 0.25s ease-in-out 1s;
-  z-index: 1;
 }
 
 #sidebar.pinned,
@@ -105,9 +105,14 @@ span#info {
 #pinIcon {
 	position: absolute;
 	top: 4px;
-	right: 56px;
-	width: 11px;
-	height: 12px;
+	right: 55px;
+	width: 15px;
+	height: 15px;
+	background: center no-repeat;
+}
+
+#pinIcon:hover {
+	background-color: rgba(255,255,255,0.35);
 }
 
 #pinIcon.released {
diff --git a/web/viewer.html b/web/viewer.html
index 4fb7531f2..21b45aa9c 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -34,45 +34,6 @@
 
     </head>
 	
-	
-	<script type="text/javascript">
-	
-	function pinCleanup(sidebar, pinIcon) {
-		sidebar.className = sidebar.className.replace( /(?:^|\s)released(?!\S)/ , '' );
-		sidebar.className = sidebar.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );		
-		pinIcon.className = pinIcon.className.replace( /(?:^|\s)released(?!\S)/ , '' );
-		pinIcon.className = pinIcon.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );
-	}
-	
-	function pinActivate(sidebar, pinIcon) {		
-		sidebar.className += " pinned";
-		pinIcon.className += " pinned";
-	}
-
-	function pinDeactivate(sidebar, pinIcon) {		
-		sidebar.className += " released";
-		pinIcon.className += " released";	
-	}
-	
-	function pinToggle() {
-		var sidebar = document.getElementById("sidebar");
-		var pinIcon = document.getElementById("pinIcon");
-		
-		var pinState = pinIcon.className;
-		
-		pinCleanup(sidebar, pinIcon);
-		
-		if (pinState == "pinned")
-			pinDeactivate(sidebar, pinIcon);
-		else
-			pinActivate(sidebar, pinIcon);
-
-		sidebar.className = sidebar.className.trim();
-		pinIcon.className = pinIcon.className.trim();
-	}
-
-	</script>
-
   <body>
     <div id="controls">
       <button id="previous" onclick="PDFView.page--;" oncontextmenu="return false;">
@@ -161,7 +122,7 @@
 
     <div id="sidebar" class="released">
       <div id="sidebarBox">
-	    <div id="pinIcon" class="released" onClick="javascript:pinToggle()"></div>
+	    <div id="pinIcon" class="released" onClick="PDFView.pinSidebar()"></div>
 	    <div id="sidebarScrollView">
           <div id="sidebarView"></div>
         </div>
diff --git a/web/viewer.js b/web/viewer.js
index 3aca926e9..bda09ed05 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -170,6 +170,7 @@ var PDFView = {
   currentScale: kUnknownScale,
   currentScaleValue: null,
   initialBookmark: document.location.hash.substring(1),
+  pinState: false,
 
   setScale: function pdfViewSetScale(val, resetAutoSettings) {
     if (val == this.currentScale)
@@ -572,6 +573,24 @@ var PDFView = {
         break;
     }
   },
+  
+  pinSidebar: function pdfViewPinSidebar() {
+  
+    var sidebar = document.getElementById("sidebar");
+    var pinIcon = document.getElementById("pinIcon");
+
+    sidebar.className = sidebar.className.replace( /(?:^|\s)released(?!\S)/ , '' );
+    sidebar.className = sidebar.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );
+    pinIcon.className = pinIcon.className.replace( /(?:^|\s)released(?!\S)/ , '' );
+    pinIcon.className = pinIcon.className.replace( /(?:^|\s)pinned(?!\S)/ , '' );
+    
+    var newClass = this.pinState ? " pinned" : " released";
+    
+    sidebar.className += newClass;
+    pinIcon.className += newClass;
+    
+    this.pinState = !this.pinState;
+  },
 
   getVisiblePages: function pdfViewGetVisiblePages() {
     var pages = this.pages;
