<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ascensor - example - Simple</title>
		<meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1,maximum-scale=1">
		<style>
		*{margin: 0;padding: 0;}
		body{font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;}
		.floor .text {color: white;font-size: 40px;font-weight: 500;text-align: center;position: absolute;top: 50%;left: 50%;-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
		.floor-1{background: #F9B233;}.floor-2{background: #71B5E5;}.floor-3{background: #B3CE4A;}
		.floor-4{background: #EB5D45;}
		.floor-5{background: #4AAEB6;}
		.floor-6{background: #E7DFBF;}
		.floor-7{background: #CA9E67;}
		.floor-8{background: #4fade3;}
		ul {list-style: none;}
		li a {padding: 3px 6px; display: inline-block;background: #eee;border-radius:3px;margin-bottom:2px;color: #777;}
		li a:hover{cursor:pointer; background:#fefefe;}
		.links-to-floor{position: absolute;top: 20px;left: 20px;}
		.prev-next-links{position: absolute;top: 20px;right: 20px;}
		.direction-links li a{border-radius: 0;}
		.up {position: absolute;bottom: 75px;right: 50px;}
		.down {position: absolute;bottom: 25px;right: 50px;}
		.left {position: absolute;bottom: 50px;right: 60px;}
		.right {position: absolute;bottom: 50px;right: 32px;}
		.selected a{color: white;background:#4fade3;}
		.selected a:hover{color: white;background:#4fade3;}
		</style>
	</head>
	<body>

		<div id="ascensorBuilding">
			<div class="floor floor-1"><span class="text">Floor 1</span></div>
			<div class="floor floor-2"><span class="text">Floor 2</span></div>
			<div class="floor floor-3"><span class="text">Floor 3</span></div>
			<div class="floor floor-4"><span class="text">Floor 4</span></div>
			<div class="floor floor-5"><span class="text">Floor 5</span></div>
			<div class="floor floor-6"><span class="text">Floor 6</span></div>
			<div class="floor floor-7"><span class="text">Floor 7</span></div>
		</div>

		<nav>
			<ul class="links-to-floor">
				<li><a>Floor 1</a></li>
				<li><a>Floor 2</a></li>
				<li><a>Floor 3</a></li>
				<li><a>Floor 4</a></li>
				<li><a>Floor 5</a></li>
				<li><a>Floor 6</a></li>
				<li><a>Floor 7</a></li>
				<li><a class="add-floor">+ add floor 8</a></li>
			</ul>
			<ul class="prev-next-links">
				<li class="prev" ><a>Previous floor</a></li>
				<li class="next" ><a>Next floor</a></li>
			</ul>
			<ul class="direction-links">
				<li class="direction up" data-direction="up"><a>↑</a></li>
				<li class="direction down" data-direction="down"><a>↓</a></li>
				<li class="direction left" data-direction="left"><a>←</a></li>
				<li class="direction right" data-direction="right"><a>→</a></li>
			</ul>
		</nav>
		<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<script src="../dist/jquery.ascensor.js"></script>
		<script>
			var ascensor = $('#ascensorBuilding').ascensor();
			var ascensorInstance = $('#ascensorBuilding').data('ascensor');
			var floorAdded = false;
			$(".add-floor").click(function(){
				if(!floorAdded){
				$('#ascensorBuilding').append('<div class="floor floor-8"><span class="text">This floor has been dynamically appended!</span></div>');
				ascensorInstance.refresh();
				$(this).text("Floor Added!");
				floorAdded = true;
				}
			});
				
			$(".links-to-floor li").click(function(event, index) {
				ascensorInstance.scrollToFloor($(this).index());
			});

			$(".links-to-floor li:eq("+ ascensor.data("current-floor") +")").addClass("selected");

			ascensor.on("scrollStart", function(event, floor){
				$(".links-to-floor li").removeClass("selected");
				$(".links-to-floor li:eq("+floor.to+")").addClass("selected");
			});

			$(".prev").click(function() {
				ascensorInstance.prev();
			});
				
			$(".next").click(function() {
				ascensorInstance.next();
			});
				
			$(".direction").click(function() {
				ascensorInstance.scrollToDirection($(this).data("direction"));
			});	
		</script>

	</body>
</html>