<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>vrmvViewer</title>

<!-- css -->
<style>

/***************************
 * body
 ***************************/

body {
	margin:0px;
	padding:0px;
}


/***************************
 * canvas
 ***************************/

.canvas_wrap {
	position:relative;
	width:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
	background-color:#000;
}

.canvas_box {
	position:fixed;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	top:0;
	left:0;
	overflow:hidden;
	background-color:#000;
}

#canvas_main {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}


/***************************
 * canvas_start
 ***************************/

.canvas_start {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	background-color:#0066cc;
	opacity:0.5;
	display:none;
}

.canvas_start .inner {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	display:table;
	width:100%;
	height:100vh;
}

.canvas_start .inner p {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	color:#ffffff;
}


/***************************
 * canvas_loader
 ***************************/

.canvas_loader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	background-color:#00cc66;
	display:none;
}

.canvas_loader .inner {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	display:table;
	width:100%;
	height:100vh;
}

.canvas_loader .inner p {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	color:#ffffff;
}

</style>

<!-- js -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/three/three.min.js"></script>
<script src="js/three/DeviceOrientationControls.js"></script>
<script src="js/three/OrbitControls.js"></script>
<script src="js/three/Detector.js"></script>

<script src="js/panoramaViewer.js"></script>
<script>
jQuery(function(){
	$(window).on("load",function(){
		$("#canvas_main").panoramaViewer({
			src			: "src/texture.jpg",
			rotationY	: 330
		});
	});
});
</script>

</head>
<body>
<div class="canvas_wrap">
  <div class="canvas_box">
    <canvas id="canvas_main"></canvas>

    <div class="canvas_start">
      <div class="inner"><p>TOUCH START!!</p></div>
    </div>

    <div class="canvas_loader">
      <div class="inner"><p>Loading ...</p></div>
    </div>

  </div>
  <div id="scroll_area" style="height:300%;"></div>
</div>
</body>
</html>