Added support for image displays on receipt download

css/style.css

@@ -194,3 +194,42 @@ div.fields {
 #content .requestInfo {
     padding-bottom:10px;
 }
+
+.overlay{
+    background-color:#000;
+    position:fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    opacity: 0.5;
+    z-index:100;
+}
+
+.box {
+    position:fixed;
+    top:-200px;
+    left:10%;
+    right:10%;
+    background-color:#fff;
+    color:#7F7F7F;
+    padding:20px;
+    border:1px solid #ccc;
+    -webkit-border-radius:20px;
+    z-index:101;
+}
+
+a.boxclose{
+    float:right;
+    width:26px;
+    height:26px;
+    background:transparent url(/media/cancel.png) repeat top left;
+    margin-top:-30px;
+    margin-right:-30px;
+    cursor:pointer;
+}
+
+#receipt {
+    margin: 0 auto;
+    display:block;
+}

interact.html

@@ -92,9 +92,25 @@
 				$('#connect').click(function() {
 					getOAuthRequestToken();
 				});
+
+				$('#boxclose').click(function(){
+					hideBox();
+				});
+
+				$(document).bind('keydown', 'return', makeServerRequest);
+				$(document).bind('keydown', 'esc', hideBox);
+				// document.getElementById('fileupload').addEventListener('change', upload, false);
+
 			});
 
-			function downloadFile(url, xml, authorization, contentType) {
+			function hideBox() {
+				$('#box').animate({'top':'-100px'},500,function(){
+					$('#overlay').fadeOut('fast');
+				});
+				$('#box').hide();
+			}
+
+			function downloadFile(url, xml, authorization, contentType, fileType) {
 				var xhr = new XMLHttpRequest();
 				xhr.open('POST', url, true);
 				xhr.setRequestHeader('Authorization', authorization);
@@ -112,6 +128,16 @@
 						chrome.tabs.create({
 								url:blobURL
 						});
+						if (contentType == 'application/pdf') {
+							window.open(blobURL);
+						} else {
+							$('#receipt').attr("src", blobURL);
+							$('#overlay').fadeIn('fast',function(){
+								$('#box').show();
+								$('#box').animate({'top':'160px'},500);
+							});
+						}
+
 					}
 					$('#loader').hide();
 					displayCode('response', "Download complete!");
@@ -799,5 +825,10 @@ <h2>Response</h2>
 				<pre id="response" class="brush: xml; toolbar: false; auto-links:false;"></pre>
 			</div>
 		</div>
+		<div id="overlay" class="overlay" style="display:none"></div>
+		<div id="box" class="box">
+			<a class="boxclose" id="boxclose"></a>
+			<img id="receipt" src="/media/leaf.png"/>
+		</div>
 	</body>
 </html>