aboutsummaryrefslogtreecommitdiff
path: root/subsonic-site/src/main/webapp/inc/js/FancyZoomHTML.js
diff options
context:
space:
mode:
Diffstat (limited to 'subsonic-site/src/main/webapp/inc/js/FancyZoomHTML.js')
-rw-r--r--subsonic-site/src/main/webapp/inc/js/FancyZoomHTML.js318
1 files changed, 318 insertions, 0 deletions
diff --git a/subsonic-site/src/main/webapp/inc/js/FancyZoomHTML.js b/subsonic-site/src/main/webapp/inc/js/FancyZoomHTML.js
new file mode 100644
index 00000000..7644a9a8
--- /dev/null
+++ b/subsonic-site/src/main/webapp/inc/js/FancyZoomHTML.js
@@ -0,0 +1,318 @@
+// FancyZoomHTML.js - v1.0
+// Used to draw necessary HTML elements for FancyZoom
+//
+// Copyright (c) 2008 Cabel Sasser / Panic Inc
+// All rights reserved.
+
+function insertZoomHTML() {
+
+ // All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.
+
+ var inBody = document.getElementsByTagName("body").item(0);
+
+ // WAIT SPINNER
+
+ var inSpinbox = document.createElement("div");
+ inSpinbox.setAttribute('id', 'ZoomSpin');
+ inSpinbox.style.position = 'absolute';
+ inSpinbox.style.left = '10px';
+ inSpinbox.style.top = '10px';
+ inSpinbox.style.visibility = 'hidden';
+ inSpinbox.style.zIndex = '525';
+ inBody.insertBefore(inSpinbox, inBody.firstChild);
+
+ var inSpinImage = document.createElement("img");
+ inSpinImage.setAttribute('id', 'SpinImage');
+ inSpinImage.setAttribute('src', zoomImagesURI+'zoom-spin-1.png');
+ inSpinbox.appendChild(inSpinImage);
+
+ // ZOOM IMAGE
+ //
+ // <div id="ZoomBox">
+ // <a href="javascript:zoomOut();"><img src="/images/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE -->
+ // <div id="ZoomClose">
+ // <a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
+ // </div>
+ // </div>
+
+ var inZoombox = document.createElement("div");
+ inZoombox.setAttribute('id', 'ZoomBox');
+
+ inZoombox.style.position = 'absolute';
+ inZoombox.style.left = '10px';
+ inZoombox.style.top = '10px';
+ inZoombox.style.visibility = 'hidden';
+ inZoombox.style.zIndex = '499';
+
+ inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
+
+ var inImage1 = document.createElement("img");
+ inImage1.onclick = function (event) { zoomOut(this, event); return false; };
+ inImage1.setAttribute('src',zoomImagesURI+'spacer.gif');
+ inImage1.setAttribute('id','ZoomImage');
+ inImage1.setAttribute('border', '0');
+ // inImage1.setAttribute('onMouseOver', 'zoomMouseOver();')
+ // inImage1.setAttribute('onMouseOut', 'zoomMouseOut();')
+
+ // This must be set first, so we can later test it using webkitBoxShadow.
+ inImage1.setAttribute('style', '-webkit-box-shadow: '+shadowSettings+'0.0)');
+ inImage1.style.display = 'block';
+ inImage1.style.width = '10px';
+ inImage1.style.height = '10px';
+ inImage1.style.cursor = 'pointer'; // -webkit-zoom-out?
+ inZoombox.appendChild(inImage1);
+
+ var inClosebox = document.createElement("div");
+ inClosebox.setAttribute('id', 'ZoomClose');
+ inClosebox.style.position = 'absolute';
+
+ // In MSIE, we need to put the close box inside the image.
+ // It's 2008 and I'm having to do a browser detect? Sigh.
+ if (browserIsIE) {
+ inClosebox.style.left = '-1px';
+ inClosebox.style.top = '0px';
+ } else {
+ inClosebox.style.left = '-15px';
+ inClosebox.style.top = '-15px';
+ }
+
+ inClosebox.style.visibility = 'hidden';
+ inZoombox.appendChild(inClosebox);
+
+ var inImage2 = document.createElement("img");
+ inImage2.onclick = function (event) { zoomOut(this, event); return false; };
+ inImage2.setAttribute('src',zoomImagesURI+'closebox.png');
+ inImage2.setAttribute('width','30');
+ inImage2.setAttribute('height','30');
+ inImage2.setAttribute('border','0');
+ inImage2.style.cursor = 'pointer';
+ inClosebox.appendChild(inImage2);
+
+ // SHADOW
+ // Only draw the table-based shadow if the programatic webkitBoxShadow fails!
+ // Also, don't draw it if we're IE -- it wouldn't look quite right anyway.
+
+ if (! document.getElementById('ZoomImage').style.webkitBoxShadow && ! browserIsIE) {
+
+ // SHADOW BASE
+
+ var inFixedBox = document.createElement("div");
+ inFixedBox.setAttribute('id', 'ShadowBox');
+ inFixedBox.style.position = 'absolute';
+ inFixedBox.style.left = '50px';
+ inFixedBox.style.top = '50px';
+ inFixedBox.style.width = '100px';
+ inFixedBox.style.height = '100px';
+ inFixedBox.style.visibility = 'hidden';
+ inFixedBox.style.zIndex = '498';
+ inBody.insertBefore(inFixedBox, inZoombox.nextSibling);
+
+ // SHADOW
+ // Now, the shadow table. Skip if not compatible, or irrevelant with -box-shadow.
+
+ // <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
+ // <tr height="25">
+ // <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
+ // <td background="/images/zoom-shadow2.png">&nbsp;</td>
+ // <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
+ // </tr>
+
+ var inShadowTable = document.createElement("table");
+ inShadowTable.setAttribute('border', '0');
+ inShadowTable.setAttribute('width', '100%');
+ inShadowTable.setAttribute('height', '100%');
+ inShadowTable.setAttribute('cellpadding', '0');
+ inShadowTable.setAttribute('cellspacing', '0');
+ inFixedBox.appendChild(inShadowTable);
+
+ var inShadowTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
+ inShadowTable.appendChild(inShadowTbody);
+
+ var inRow1 = document.createElement("tr");
+ inRow1.style.height = '25px';
+ inShadowTbody.appendChild(inRow1);
+
+ var inCol1 = document.createElement("td");
+ inCol1.style.width = '27px';
+ inRow1.appendChild(inCol1);
+ var inShadowImg1 = document.createElement("img");
+ inShadowImg1.setAttribute('src', zoomImagesURI+'zoom-shadow1.png');
+ inShadowImg1.setAttribute('width', '27');
+ inShadowImg1.setAttribute('height', '25');
+ inShadowImg1.style.display = 'block';
+ inCol1.appendChild(inShadowImg1);
+
+ var inCol2 = document.createElement("td");
+ inCol2.setAttribute('background', zoomImagesURI+'zoom-shadow2.png');
+ inRow1.appendChild(inCol2);
+ // inCol2.innerHTML = '<img src=';
+ var inSpacer1 = document.createElement("img");
+ inSpacer1.setAttribute('src',zoomImagesURI+'spacer.gif');
+ inSpacer1.setAttribute('height', '1');
+ inSpacer1.setAttribute('width', '1');
+ inSpacer1.style.display = 'block';
+ inCol2.appendChild(inSpacer1);
+
+ var inCol3 = document.createElement("td");
+ inCol3.style.width = '27px';
+ inRow1.appendChild(inCol3);
+ var inShadowImg3 = document.createElement("img");
+ inShadowImg3.setAttribute('src', zoomImagesURI+'zoom-shadow3.png');
+ inShadowImg3.setAttribute('width', '27');
+ inShadowImg3.setAttribute('height', '25');
+ inShadowImg3.style.display = 'block';
+ inCol3.appendChild(inShadowImg3);
+
+ // <tr>
+ // <td background="/images/zoom-shadow4.png">&nbsp;</td>
+ // <td bgcolor="#ffffff">&nbsp;</td>
+ // <td background="/images/zoom-shadow5.png">&nbsp;</td>
+ // </tr>
+
+ inRow2 = document.createElement("tr");
+ inShadowTbody.appendChild(inRow2);
+
+ var inCol4 = document.createElement("td");
+ inCol4.setAttribute('background', zoomImagesURI+'zoom-shadow4.png');
+ inRow2.appendChild(inCol4);
+ // inCol4.innerHTML = '&nbsp;';
+ var inSpacer2 = document.createElement("img");
+ inSpacer2.setAttribute('src',zoomImagesURI+'spacer.gif');
+ inSpacer2.setAttribute('height', '1');
+ inSpacer2.setAttribute('width', '1');
+ inSpacer2.style.display = 'block';
+ inCol4.appendChild(inSpacer2);
+
+ var inCol5 = document.createElement("td");
+ inCol5.setAttribute('bgcolor', '#ffffff');
+ inRow2.appendChild(inCol5);
+ // inCol5.innerHTML = '&nbsp;';
+ var inSpacer3 = document.createElement("img");
+ inSpacer3.setAttribute('src',zoomImagesURI+'spacer.gif');
+ inSpacer3.setAttribute('height', '1');
+ inSpacer3.setAttribute('width', '1');
+ inSpacer3.style.display = 'block';
+ inCol5.appendChild(inSpacer3);
+
+ var inCol6 = document.createElement("td");
+ inCol6.setAttribute('background', zoomImagesURI+'zoom-shadow5.png');
+ inRow2.appendChild(inCol6);
+ // inCol6.innerHTML = '&nbsp;';
+ var inSpacer4 = document.createElement("img");
+ inSpacer4.setAttribute('src',zoomImagesURI+'spacer.gif');
+ inSpacer4.setAttribute('height', '1');
+ inSpacer4.setAttribute('width', '1');
+ inSpacer4.style.display = 'block';
+ inCol6.appendChild(inSpacer4);
+
+ // <tr height="26">
+ // <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td>
+ // <td background="/images/zoom-shadow7.png">&nbsp;</td>
+ // <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td>
+ // </tr>
+ // </table>
+
+ var inRow3 = document.createElement("tr");
+ inRow3.style.height = '26px';
+ inShadowTbody.appendChild(inRow3);
+
+ var inCol7 = document.createElement("td");
+ inCol7.style.width = '27px';
+ inRow3.appendChild(inCol7);
+ var inShadowImg7 = document.createElement("img");
+ inShadowImg7.setAttribute('src', zoomImagesURI+'zoom-shadow6.png');
+ inShadowImg7.setAttribute('width', '27');
+ inShadowImg7.setAttribute('height', '26');
+ inShadowImg7.style.display = 'block';
+ inCol7.appendChild(inShadowImg7);
+
+ var inCol8 = document.createElement("td");
+ inCol8.setAttribute('background', zoomImagesURI+'zoom-shadow7.png');
+ inRow3.appendChild(inCol8);
+ // inCol8.innerHTML = '&nbsp;';
+ var inSpacer5 = document.createElement("img");
+ inSpacer5.setAttribute('src',zoomImagesURI+'spacer.gif');
+ inSpacer5.setAttribute('height', '1');
+ inSpacer5.setAttribute('width', '1');
+ inSpacer5.style.display = 'block';
+ inCol8.appendChild(inSpacer5);
+
+ var inCol9 = document.createElement("td");
+ inCol9.style.width = '27px';
+ inRow3.appendChild(inCol9);
+ var inShadowImg9 = document.createElement("img");
+ inShadowImg9.setAttribute('src', zoomImagesURI+'zoom-shadow8.png');
+ inShadowImg9.setAttribute('width', '27');
+ inShadowImg9.setAttribute('height', '26');
+ inShadowImg9.style.display = 'block';
+ inCol9.appendChild(inShadowImg9);
+ }
+
+ if (includeCaption) {
+
+ // CAPTION
+ //
+ // <div id="ZoomCapDiv" style="margin-left: 13px; margin-right: 13px;">
+ // <table border="1" cellpadding="0" cellspacing="0">
+ // <tr height="26">
+ // <td><img src="zoom-caption-l.png" width="13" height="26"></td>
+ // <td rowspan="3" background="zoom-caption-fill.png"><div id="ZoomCaption"></div></td>
+ // <td><img src="zoom-caption-r.png" width="13" height="26"></td>
+ // </tr>
+ // </table>
+ // </div>
+
+ var inCapDiv = document.createElement("div");
+ inCapDiv.setAttribute('id', 'ZoomCapDiv');
+ inCapDiv.style.position = 'absolute';
+ inCapDiv.style.visibility = 'hidden';
+ inCapDiv.style.marginLeft = 'auto';
+ inCapDiv.style.marginRight = 'auto';
+ inCapDiv.style.zIndex = '501';
+
+ inBody.insertBefore(inCapDiv, inZoombox.nextSibling);
+
+ var inCapTable = document.createElement("table");
+ inCapTable.setAttribute('border', '0');
+ inCapTable.setAttribute('cellPadding', '0'); // Wow. These honestly need to
+ inCapTable.setAttribute('cellSpacing', '0'); // be intercapped to work in IE. WTF?
+ inCapDiv.appendChild(inCapTable);
+
+ var inTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
+ inCapTable.appendChild(inTbody);
+
+ var inCapRow1 = document.createElement("tr");
+ inTbody.appendChild(inCapRow1);
+
+ var inCapCol1 = document.createElement("td");
+ inCapCol1.setAttribute('align', 'right');
+ inCapRow1.appendChild(inCapCol1);
+ var inCapImg1 = document.createElement("img");
+ inCapImg1.setAttribute('src', zoomImagesURI+'zoom-caption-l.png');
+ inCapImg1.setAttribute('width', '13');
+ inCapImg1.setAttribute('height', '26');
+ inCapImg1.style.display = 'block';
+ inCapCol1.appendChild(inCapImg1);
+
+ var inCapCol2 = document.createElement("td");
+ inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png');
+ inCapCol2.setAttribute('id', 'ZoomCaption');
+ inCapCol2.setAttribute('valign', 'middle');
+ inCapCol2.style.fontSize = '14px';
+ inCapCol2.style.fontFamily = 'Helvetica';
+ inCapCol2.style.fontWeight = 'bold';
+ inCapCol2.style.color = '#ffffff';
+ inCapCol2.style.textShadow = '0px 2px 4px #000000';
+ inCapCol2.style.whiteSpace = 'nowrap';
+ inCapRow1.appendChild(inCapCol2);
+
+ var inCapCol3 = document.createElement("td");
+ inCapRow1.appendChild(inCapCol3);
+ var inCapImg2 = document.createElement("img");
+ inCapImg2.setAttribute('src', zoomImagesURI+'zoom-caption-r.png');
+ inCapImg2.setAttribute('width', '13');
+ inCapImg2.setAttribute('height', '26');
+ inCapImg2.style.display = 'block';
+ inCapCol3.appendChild(inCapImg2);
+ }
+} \ No newline at end of file