Replaced tabs with spaces.

11 年之前 · d4ebb5c3c4
--- a/configuration.htm
+++ b/configuration.htm
@@ -1,120 +1,120 @@
 <!DOCTYPE HTML>
 <html>
 	<head>
 		<title>Pannellum Embed Configuration</title>
 		<meta charset="utf-8">
 		<link type="text/css" rel="Stylesheet" href="css/pannellum.css" />
 		<script>
 			function processForm (form)
 			{
 				var id = 'pannellum_' + randomString();
 				var embed_code = document.getElementById('embed_code');
 				embed_code.innerHTML = '<iframe title="pannellum panorama viewer"' +
 					' width="' + escape(form.embed_width.value) +
 					'" height="' + escape(form.embed_height.value) +
 					'" webkitAllowFullScreen mozallowfullscreen allowFullScreen' +
 					' style="border-style:none;"' +
 					' id="' + escape(id) +
 					'" src="' + escape(form.pannellum_url.value) +
 					'?' +
 					'panorama=' + escape(form.pano_url.value);
 					if(form.use_logo.checked) {
 						embed_code.innerHTML += '&amp;amp;logo=yes';
 					}
 					if(form.pano_title.value != '') {
 						embed_code.innerHTML += '&amp;amp;title=' + escape(form.pano_title.value);
 					}
 					if(form.pano_author.value != '') {
 						embed_code.innerHTML += '&amp;amp;author=' + escape(form.pano_author.value);
 					}
 					if(form.autoload.checked) {
 						embed_code.innerHTML += '&amp;amp;autoload=yes';
 					}
 					if(form.autorotate.value != 'none') {
 						embed_code.innerHTML += '&amp;amp;autorotate=' + escape(form.autorotate.value);
 					}
 					if(form.license.value > -1) {
 						embed_code.innerHTML += '&amp;amp;license=' + escape(form.license.value);
 					}
 					if(form.fallback_url.value != '') {
 						embed_code.innerHTML += '&amp;amp;fallback=' + escape(form.fallback_url.value);
 					}
 					if(form.hfov.value != 0) {
 						embed_code.innerHTML += '&amp;amp;hfov=' + escape(form.hfov.value);
 					}
 					if(form.pitch.value != 0) {
 						embed_code.innerHTML += '&amp;amp;pitch=' + escape(form.pitch.value);
 					}
 					if(form.yaw.value != 0) {
 						embed_code.innerHTML += '&amp;amp;yaw=' + escape(form.yaw.value);
 					}
 					if(form.preview_url.value != '') {
 						embed_code.innerHTML += '&amp;amp;preview=' + escape(form.preview_url.value);
 					}
 					if(form.haov.value != 0) {
 						embed_code.innerHTML += '&amp;amp;haov=' + escape(form.haov.value);
 					}
 					if(form.vaov.value != 0) {
 						embed_code.innerHTML += '&amp;amp;vaov=' + escape(form.vaov.value);
 					}
 					if(form.voffset.value != 0) {
 						embed_code.innerHTML += '&amp;amp;voffset=' + escape(form.voffset.value);
 					}
 					embed_code.innerHTML += '"></iframe>';
 				return false;
 			}
 			function randomString()
 			{
 				var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
 				var randomstring = '';
 				for (var i=0;i<10;i++) {
 					var rnum = Math.floor(Math.random() * chars.length);
 					randomstring += chars.substring(rnum,rnum+1);
 				}
 				return randomstring;
 			}
 		</script>
 	</head>
 	
 	<body>
 		<form name="embed_gen_form" onsubmit="return processForm(embed_gen_form); return false;">
 			Pannellum Location:<br>
 			<input name="pannellum_url" placeholder="pannellum.htm Location" required><p>
 			Panorama URL:<br>
 			<input name="pano_url" placeholder="Image File" required><p>
 			Panorama Preview URL (optional):<br>
 			<input name="preview_url" placeholder="Image File"><p>
 			Basic Information:<br>
 			<input name="pano_title" placeholder="Title"> <input name="pano_author" placeholder="Author"><p>
 			Partial Panorama (degrees) (optional):<br>
 			<input name="haov" type="number" min="0" max="360" placeholder="Horizontal Angle of View"> <input name="vaov" type="number" min="0" max="180" placeholder="Vertical Angle of View"> <input name="voffset" type="number" min="-90" max="90" placeholder="Vertical Offset"><p>
 			Embed Size:<br>
 			<input name="embed_width" type="number" min="200" placeholder="Width" required> <input name="embed_height" type="number" min="150" placeholder="Height" required><p>
 			Initial Parameters (degrees) (optional):<br>
 			<input name="hfov" type="number" min="40" max="100" placeholder="Horizontal Field of View"> <input name="pitch" type="number" min="-85" max="85" placeholder="Pitch"> <input name="yaw" type="number" min="-180" max="180" placeholder="Yaw"><p>
 			Include Pannellum Logo: <input name="use_logo" type="checkbox"><p>
 			Auto Load: <input name="autoload" type="checkbox"><p>
 			Auto Rotate:
 			<select name="autorotate">
 				<option value="none">None</option>
 				<option value="cw">CW</option>
 				<option value="ccw">CCW</option>
 			</select><p>
 			Creative Commons License: 
 			<select name="license">
 				<option value="-1">None</option>
 				<option value="0">CC BY 3.0</option>
 				<option value="1">CC BY-SA 3.0</option>
 				<option value="2">CC BY-ND 3.0</option>
 				<option value="3">CC BY-NC 3.0</option>
 				<option value="4">CC BY-NC-SA 3.0</option>
 				<option value="5">CC BY-NC-ND 3.0</option>
 			</select><p>
 			URL to fall back to if WebGL is not supported:<br>
 			<input name="fallback_url" placeholder="Fallback URL"><p>
 			<input type="submit" value="Generate" onclick="document.getElementById('embed_code').innerHTML = ''"><p>
 		</form>
 		
 		<textarea id="embed_code" style="resize: none; height:200px;" onclick="this.select()" cols="100" readonly></textarea>
 	</body>
    <head>
        <title>Pannellum Embed Configuration</title>
        <meta charset="utf-8">
        <link type="text/css" rel="Stylesheet" href="css/pannellum.css" />
        <script>
            function processForm (form)
            {
                var id = 'pannellum_' + randomString();
                var embed_code = document.getElementById('embed_code');
                embed_code.innerHTML = '<iframe title="pannellum panorama viewer"' +
                    ' width="' + escape(form.embed_width.value) +
                    '" height="' + escape(form.embed_height.value) +
                    '" webkitAllowFullScreen mozallowfullscreen allowFullScreen' +
                    ' style="border-style:none;"' +
                    ' id="' + escape(id) +
                    '" src="' + escape(form.pannellum_url.value) +
                    '?' +
                    'panorama=' + escape(form.pano_url.value);
                    if(form.use_logo.checked) {
                        embed_code.innerHTML += '&amp;amp;logo=yes';
                    }
                    if(form.pano_title.value != '') {
                        embed_code.innerHTML += '&amp;amp;title=' + escape(form.pano_title.value);
                    }
                    if(form.pano_author.value != '') {
                        embed_code.innerHTML += '&amp;amp;author=' + escape(form.pano_author.value);
                    }
                    if(form.autoload.checked) {
                        embed_code.innerHTML += '&amp;amp;autoload=yes';
                    }
                    if(form.autorotate.value != 'none') {
                        embed_code.innerHTML += '&amp;amp;autorotate=' + escape(form.autorotate.value);
                    }
                    if(form.license.value > -1) {
                        embed_code.innerHTML += '&amp;amp;license=' + escape(form.license.value);
                    }
                    if(form.fallback_url.value != '') {
                        embed_code.innerHTML += '&amp;amp;fallback=' + escape(form.fallback_url.value);
                    }
                    if(form.hfov.value != 0) {
                        embed_code.innerHTML += '&amp;amp;hfov=' + escape(form.hfov.value);
                    }
                    if(form.pitch.value != 0) {
                        embed_code.innerHTML += '&amp;amp;pitch=' + escape(form.pitch.value);
                    }
                    if(form.yaw.value != 0) {
                        embed_code.innerHTML += '&amp;amp;yaw=' + escape(form.yaw.value);
                    }
                    if(form.preview_url.value != '') {
                        embed_code.innerHTML += '&amp;amp;preview=' + escape(form.preview_url.value);
                    }
                    if(form.haov.value != 0) {
                        embed_code.innerHTML += '&amp;amp;haov=' + escape(form.haov.value);
                    }
                    if(form.vaov.value != 0) {
                        embed_code.innerHTML += '&amp;amp;vaov=' + escape(form.vaov.value);
                    }
                    if(form.voffset.value != 0) {
                        embed_code.innerHTML += '&amp;amp;voffset=' + escape(form.voffset.value);
                    }
                    embed_code.innerHTML += '"></iframe>';
                return false;
            }
            function randomString()
            {
                var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
                var randomstring = '';
                for (var i=0;i<10;i++) {
                    var rnum = Math.floor(Math.random() * chars.length);
                    randomstring += chars.substring(rnum,rnum+1);
                }
                return randomstring;
            }
        </script>
    </head>
    
    <body>
        <form name="embed_gen_form" onsubmit="return processForm(embed_gen_form); return false;">
            Pannellum Location:<br>
            <input name="pannellum_url" placeholder="pannellum.htm Location" required><p>
            Panorama URL:<br>
            <input name="pano_url" placeholder="Image File" required><p>
            Panorama Preview URL (optional):<br>
            <input name="preview_url" placeholder="Image File"><p>
            Basic Information:<br>
            <input name="pano_title" placeholder="Title"> <input name="pano_author" placeholder="Author"><p>
            Partial Panorama (degrees) (optional):<br>
            <input name="haov" type="number" min="0" max="360" placeholder="Horizontal Angle of View"> <input name="vaov" type="number" min="0" max="180" placeholder="Vertical Angle of View"> <input name="voffset" type="number" min="-90" max="90" placeholder="Vertical Offset"><p>
            Embed Size:<br>
            <input name="embed_width" type="number" min="200" placeholder="Width" required> <input name="embed_height" type="number" min="150" placeholder="Height" required><p>
            Initial Parameters (degrees) (optional):<br>
            <input name="hfov" type="number" min="40" max="100" placeholder="Horizontal Field of View"> <input name="pitch" type="number" min="-85" max="85" placeholder="Pitch"> <input name="yaw" type="number" min="-180" max="180" placeholder="Yaw"><p>
            Include Pannellum Logo: <input name="use_logo" type="checkbox"><p>
            Auto Load: <input name="autoload" type="checkbox"><p>
            Auto Rotate:
            <select name="autorotate">
                <option value="none">None</option>
                <option value="cw">CW</option>
                <option value="ccw">CCW</option>
            </select><p>
            Creative Commons License: 
            <select name="license">
                <option value="-1">None</option>
                <option value="0">CC BY 3.0</option>
                <option value="1">CC BY-SA 3.0</option>
                <option value="2">CC BY-ND 3.0</option>
                <option value="3">CC BY-NC 3.0</option>
                <option value="4">CC BY-NC-SA 3.0</option>
                <option value="5">CC BY-NC-ND 3.0</option>
            </select><p>
            URL to fall back to if WebGL is not supported:<br>
            <input name="fallback_url" placeholder="Fallback URL"><p>
            <input type="submit" value="Generate" onclick="document.getElementById('embed_code').innerHTML = ''"><p>
        </form>
        
        <textarea id="embed_code" style="resize: none; height:200px;" onclick="this.select()" cols="100" readonly></textarea>
    </body>
 </html>
--- a/src/css/pannellum.css
+++ b/src/css/pannellum.css
@@ -1,314 +1,314 @@
 html {
 	height: 100%;
    height: 100%;
 }

 body {
 	margin: 0px;
 	padding: 0px;
 	overflow: hidden;
 	cursor:default;
 	width: 100%;
 	font-family:serif;
 	background-color: #666;
 	background-image: -webkit-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
 	background-image: -moz-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
 	background-image: -o-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
 	background-image: linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
 	background-size:20px 20px;
 	-webkit-user-select:none;
 	-khtml-user-select:none;
 	-moz-user-select:none;
 	-o-user-select:none;
 	-ms-user-select:none;
 	user-select:none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    cursor:default;
    width: 100%;
    font-family:serif;
    background-color: #666;
    background-image: -webkit-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
    background-image: -moz-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
    background-image: -o-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
    background-image: linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666);
    background-size:20px 20px;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    user-select:none;
 }

 .grab {
 	cursor:url('img/grab.svg') 12 8,default;
    cursor:url('img/grab.svg') 12 8,default;
 }

 .grabbing {
 	cursor:url('img/grabbing.svg') 12 8,default;
    cursor:url('img/grabbing.svg') 12 8,default;
 }

 .sprite {
 	background-image:url('img/sprites.svg');
    background-image:url('img/sprites.svg');
 }

 #container {
 	cursor:inherit;
    cursor:inherit;
 }

 #page {
 	width: 100%;
 	height: 100%;
    width: 100%;
    height: 100%;
 }

 #zoomcontrols {
 	position:absolute;
 	top:2px;
 	left:2px;
 	width:27px;
 	height:54px;
 	cursor:pointer;
    position:absolute;
    top:2px;
    left:2px;
    width:27px;
    height:54px;
    cursor:pointer;
 }

 #zoom_in {
 	width:100%;
 	height:50%;
 	position:absolute;
 	top:0px;
 	background-position:0px -27px;
    width:100%;
    height:50%;
    position:absolute;
    top:0px;
    background-position:0px -27px;
 }

 #zoom_in:hover {
 	background-position:0px -54px;
    background-position:0px -54px;
 }

 #zoom_out {
 	width:100%;
 	height:50%;
 	position:absolute;
 	bottom:0px;
 	background-position:-27px -27px;
    width:100%;
    height:50%;
    position:absolute;
    bottom:0px;
    background-position:-27px -27px;
 }

 #zoom_out:hover {
 	background-position:-27px -54px;
    background-position:-27px -54px;
 }

 #pannellum_logo {
 	background-position:0px 0px;
 	position:absolute;
 	top:2px;
 	right:2px;
 	width:81px;
 	height:27px;
 	display:none;
 	cursor:pointer;
    background-position:0px 0px;
    position:absolute;
    top:2px;
    right:2px;
    width:81px;
    height:27px;
    display:none;
    cursor:pointer;
 }

 #pannellum_logo a:link {
 	display:block;
 	width:81px;
 	height:27px;
    display:block;
    width:81px;
    height:27px;
 }

 #panorama_info {
 	position:absolute;
 	bottom:2px;
 	width:100%;
    position:absolute;
    bottom:2px;
    width:100%;
 }

 #title_box {
 	position:relative;
 	width:auto;
 	text-align:left;
 	font-family:serif;
 	font-size:20px;
 	background-color:rgba(0,0,0,0.7);
 	display:table;
 	padding-left:5px;
 	padding-right:15px;
 	color:#fff;
 	margin-bottom:3px;
    position:relative;
    width:auto;
    text-align:left;
    font-family:serif;
    font-size:20px;
    background-color:rgba(0,0,0,0.7);
    display:table;
    padding-left:5px;
    padding-right:15px;
    color:#fff;
    margin-bottom:3px;
 }

 #author_box {
 	position:relative;
 	width:auto;
 	text-align:left;
 	font-family:serif;
 	font-size:12px;
 	background-color:rgba(0,0,0,0.7);
 	display:table;
 	padding-left:5px;
 	padding-right:30px;
 	color:#fff;
    position:relative;
    width:auto;
    text-align:left;
    font-family:serif;
    font-size:12px;
    background-color:rgba(0,0,0,0.7);
    display:table;
    padding-left:5px;
    padding-right:30px;
    color:#fff;
 }

 #license {
 	float:right;
 	margin-left:8px;
 	height:15px;
    float:right;
    margin-left:8px;
    height:15px;
 }

 #load_box {
 	position:absolute;
 	top:50%;
 	left:50%;
 	width:194px;
 	height:144px;
 	margin:-75px 0px 0px -100px;
 	background-color:#eee;
 	background-color:rgba(255,255,255,.85);
 	border-radius: 10px;
 	border-style:solid;
 	border-width:3px;
 	border-color:#000;
 	text-align:center;
 	font-size:20px;
 	display:none;
    position:absolute;
    top:50%;
    left:50%;
    width:194px;
    height:144px;
    margin:-75px 0px 0px -100px;
    background-color:#eee;
    background-color:rgba(255,255,255,.85);
    border-radius: 10px;
    border-style:solid;
    border-width:3px;
    border-color:#000;
    text-align:center;
    font-size:20px;
    display:none;
 }

 #load_indicator {
 	position:absolute;
 	top:50%;
 	left:50%;
 	width:20px;
 	height:20px;
 	margin:-10px 0px 0px -10px;
 	background-image:url('img/loading.svg');
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    margin:-10px 0px 0px -10px;
    background-image:url('img/loading.svg');
 }

 #load_button {
 	position:absolute;
 	top:50%;
 	left:50%;
 	width:200px;
 	height:100px;
 	margin:-50px 0px 0px -100px;
 	background-color:#222;
 	background-color:rgba(0,0,0,.7);
 	border-radius: 10px;
 	text-align:center;
 	font-family:serif;
 	font-size:20px;
 	display:none;
 	color:#fff;
 	cursor:pointer;
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height:100px;
    margin:-50px 0px 0px -100px;
    background-color:#222;
    background-color:rgba(0,0,0,.7);
    border-radius: 10px;
    text-align:center;
    font-family:serif;
    font-size:20px;
    display:none;
    color:#fff;
    cursor:pointer;
 }

 #load_button:hover {
 	background-color:#eee;
 	background-color:rgba(255,255,255,.7);
 	color:#000;
    background-color:#eee;
    background-color:rgba(255,255,255,.7);
    color:#000;
 }

 #load_button p {
 	display:table-cell;
 	vertical-align:middle;
    display:table-cell;
    vertical-align:middle;
 }

 #nojavascript {
 	color:#000;
 	font-family:serif;
 	font-size:15px;
 	position:absolute;
 	top:50%;
 	left:50%;
 	width:194px;
 	height:144px;
 	margin:-75px 0px 0px -100px;
 	background-color:#eee;
 	background-color:rgba(255,255,255,.85);
 	border-radius: 10px;
 	border-style:solid;
 	border-width:3px;
 	border-color:#000;
 	display:table;
 	text-align:center;
    color:#000;
    font-family:serif;
    font-size:15px;
    position:absolute;
    top:50%;
    left:50%;
    width:194px;
    height:144px;
    margin:-75px 0px 0px -100px;
    background-color:#eee;
    background-color:rgba(255,255,255,.85);
    border-radius: 10px;
    border-style:solid;
    border-width:3px;
    border-color:#000;
    display:table;
    text-align:center;
 }

 #nojavascript p {
 	display:table-cell;
 	vertical-align:middle;
 	padding:0px 5px 0px 5px;
    display:table-cell;
    vertical-align:middle;
    padding:0px 5px 0px 5px;
 }

 #pannellum_logo_about {
 	position:relative;
 	background-position:0px 0px;
 	width:81px;
 	height:27px;
 	margin-left:auto;
 	margin-right:auto;
    position:relative;
    background-position:0px 0px;
    width:81px;
    height:27px;
    margin-left:auto;
    margin-right:auto;
 }

 #nocanvas {
 	color:#000;
 	font-family:serif;
 	font-size:15px;
 	position:absolute;
 	top:50%;
 	left:50%;
 	width:194px;
 	height:144px;
 	margin:-75px 0px 0px -100px;
 	background-color:#eee;
 	background-color:rgba(255,255,255,.85);
 	border-radius: 10px;
 	border-style:solid;
 	border-width:3px;
 	border-color:#000;
 	display:none;
 	text-align:center;
    color:#000;
    font-family:serif;
    font-size:15px;
    position:absolute;
    top:50%;
    left:50%;
    width:194px;
    height:144px;
    margin:-75px 0px 0px -100px;
    background-color:#eee;
    background-color:rgba(255,255,255,.85);
    border-radius: 10px;
    border-style:solid;
    border-width:3px;
    border-color:#000;
    display:none;
    text-align:center;
 }

 #nocanvas p {
 	display:table-cell;
 	vertical-align:middle;
 	padding:0px 5px 0px 5px;
    display:table-cell;
    vertical-align:middle;
    padding:0px 5px 0px 5px;
 }

 #fullwindowtoggle_button {
 	position:absolute;
 	bottom:2px;
 	right:2px;
 	width:27px;
 	height:27px;
 	cursor:pointer;
    position:absolute;
    bottom:2px;
    right:2px;
    width:27px;
    height:27px;
    cursor:pointer;
 }

 .fullwindowtoggle_button_inactive {
 	background-position:-27px -81px;
    background-position:-27px -81px;
 }

 .fullwindowtoggle_button_inactive:hover {
 	background-position:-27px -108px;
    background-position:-27px -108px;
 }

 .fullwindowtoggle_button_active {
 	background-position:0px -81px;
    background-position:0px -81px;
 }

 .fullwindowtoggle_button_active:hover {
 	background-position:0px -108px;
    background-position:0px -108px;
 }

 #about {
 	font-size:11px;
 	line-height:11px;
 	color:#fff;
 	padding: 5px 8px 5px 8px;
 	background:rgba(0,0,0,0.7);
 	border-radius:3px;
 	position:absolute;
 	top:50px;
 	left:50px;
 	display:none;
 	opacity:0;
 	-moz-transition: opacity .3s ease-in-out;
 	-webkit-transition: opacity .3s ease-in-out;
 	-o-transition: opacity .3s ease-in-out;
 	-ms-transition: opacity .3s ease-in-out;
 	transition: opacity .3s ease-in-out;
    font-size:11px;
    line-height:11px;
    color:#fff;
    padding: 5px 8px 5px 8px;
    background:rgba(0,0,0,0.7);
    border-radius:3px;
    position:absolute;
    top:50px;
    left:50px;
    display:none;
    opacity:0;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
 }

 #about a:link, #about a:visited {
 	color:#fff;
    color:#fff;
 }

 #about a:hover, #about a:active {
 	color:#eee;
    color:#eee;
 }

 .hotspot {
 	position:absolute;
 	height:27px;
 	width:27px;
 	visibility:hidden;
 	cursor:default;
    position:absolute;
    height:27px;
    width:27px;
    visibility:hidden;
    cursor:default;
 }
 .hotspot.info {
    background-position:-54px -81px;
--- a/src/js/RequestAnimationFrame.js
+++ b/src/js/RequestAnimationFrame.js
@@ -5,18 +5,18 @@

 if ( !window.requestAnimationFrame ) {

 	window.requestAnimationFrame = ( function() {
    window.requestAnimationFrame = ( function() {

 		return window.webkitRequestAnimationFrame ||
 		window.mozRequestAnimationFrame ||
 		window.oRequestAnimationFrame ||
 		window.msRequestAnimationFrame ||
 		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
        return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

 			window.setTimeout( callback, 1000 / 60 );
            window.setTimeout( callback, 1000 / 60 );

 		};
        };

 	} )();
    } )();

 }
--- a/src/js/libpannellum.js
+++ b/src/js/libpannellum.js
@@ -45,7 +45,7 @@ function Renderer(canvas, image, imageType) {
        var glBindType = gl.TEXTURE_2D;

        // Create viewport for entire canvas and clear canvas
        gl.viewport(0, 0, this.canvas.width, this.canvas.height);	
        gl.viewport(0, 0, this.canvas.width, this.canvas.height);   
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);

--- a/src/js/pannellum.js
+++ b/src/js/pannellum.js
--- a/src/pannellum.htm
+++ b/src/pannellum.htm
@@ -1,45 +1,45 @@
 <!DOCTYPE HTML>
 <html>
 	<head>
 		<title>pannellum</title>
 		<meta charset="utf-8">
 		<link type="text/css" rel="Stylesheet" href="css/pannellum.css" />
 	</head>
 	
 	<body>
 		<div id="page">
 		
 		<div id="container"><canvas id="canvas"></div>
 		
 		<noscript><div id="nojavascript"><p>Javascript is required to view this panorama.<br>(It could be worse; you could need a plugin.)</p></div></noscript>
 		
 		<div id="panorama_info">
 			<div id="title_box"></div>
 			<div id="author_box"></div>
 		</div>
 		
 		<div id="zoomcontrols">
 			<div id="zoom_in" onclick="zoomIn(5)" class="sprite"></div>
 			<div id="zoom_out" onclick="zoomOut(5)" class="sprite"></div>
 		</div>
 		
 		<div id="pannellum_logo" class="sprite"><a href="https://github.com/mpetroff/pannellum" target="_blank"></a></div>
 		
 		<div id="fullwindowtoggle_button" onclick="toggleFullWindow()" class="sprite fullwindowtoggle_button_inactive"></div>
 		
 		<div id="load_box"><p>Loading...<div id="load_indicator"></div></div>
 		
 		<div id="load_button" onclick="load()"><p>Click to<br>Load<br>Panorama<p></div>
 		
 		<div id="nocanvas"><p>Your browser does not have the necessary WebGL support to display this panorama.</p></div>
 		
 		<span id="about" style="display: none;"><a href="https://github.com/mpetroff/pannellum" target="_blank">Pannellum</a></span>
 		
 		<script type="text/javascript" src="js/libpannellum.js"></script>
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		
 		<script type="text/javascript" src="js/pannellum.js"></script>
 		
 		</div>
 	</body>
    <head>
        <title>pannellum</title>
        <meta charset="utf-8">
        <link type="text/css" rel="Stylesheet" href="css/pannellum.css" />
    </head>
    
    <body>
        <div id="page">
        
        <div id="container"><canvas id="canvas"></div>
        
        <noscript><div id="nojavascript"><p>Javascript is required to view this panorama.<br>(It could be worse; you could need a plugin.)</p></div></noscript>
        
        <div id="panorama_info">
            <div id="title_box"></div>
            <div id="author_box"></div>
        </div>
        
        <div id="zoomcontrols">
            <div id="zoom_in" onclick="zoomIn(5)" class="sprite"></div>
            <div id="zoom_out" onclick="zoomOut(5)" class="sprite"></div>
        </div>
        
        <div id="pannellum_logo" class="sprite"><a href="https://github.com/mpetroff/pannellum" target="_blank"></a></div>
        
        <div id="fullwindowtoggle_button" onclick="toggleFullWindow()" class="sprite fullwindowtoggle_button_inactive"></div>
        
        <div id="load_box"><p>Loading...<div id="load_indicator"></div></div>
        
        <div id="load_button" onclick="load()"><p>Click to<br>Load<br>Panorama<p></div>
        
        <div id="nocanvas"><p>Your browser does not have the necessary WebGL support to display this panorama.</p></div>
        
        <span id="about" style="display: none;"><a href="https://github.com/mpetroff/pannellum" target="_blank">Pannellum</a></span>
        
        <script type="text/javascript" src="js/libpannellum.js"></script>
        <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
        
        <script type="text/javascript" src="js/pannellum.js"></script>
        
        </div>
    </body>
 </html>