onepageapp.html

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
	<link href="onepageapp.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Puritan:400,400italic,700,700italic:latin', 'Cabin+Condensed:400,500,600,700:latin' ]  }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
		var defaultTransIn = function($page){
			$page.fadeIn(1000);
			return 1000;
		}
		
		var defaultTransOut = function($page){
			$page.fadeOut(1000);
			return 1000;
		}
		
		var defaultInitFunction = function(){
			//Default Init does nothing, but here for structural symmetry
		}
		
		var defaultDestroyFunction = function(){
			for(var i=0; i<app.currentIntervals.length; i++){
				clearInterval(app.currentIntervals[i]);
			}
			app.currentIntervals = [];
		}
		
		var app = {
			//an Object containing any non-default functionality
			pages : {},
			//a map of page location strings to template ids to load
			pageLocations : {},
			currentIntervals : []
		};
		$(function(){
			var $templates = $("#templates").children();
			$templates.each(function(){
				$(this).hide();
			});
			$("#mainContentArea").append($templates);
			
			//set current template (page handler)
			if(document.URL.indexOf("#!") !== -1){
				showFromLocation(document.URL.split("#!")[1]);
			} else {
				showFromLocation("/");
			}
			
		});
		var showFromLocation = function(location){
			//Find page if it exists, else the 404 page
			if(typeof app.pageLocations[location] !== "undefined"){
				show($("#"+app.pageLocations[location]));
			} else {
				show($("#404"));
			}
			//Use pushstate to change URL
		}
		var show = function($nextPage){
			var id=$nextPage.attr("id");
			//Transition out current page, if it exists
			var delay = 0;
			if(typeof app.currentPage !== "undefined"){
				var transitionOutFunction;
				if(typeof app.pages[id] !== "undefined" && typeof app.pages[id]["transitionOut"] !== "undefined")
					transitionOutFunction = app.pages[id]["transitionOut"];
				if(typeof transitionOutFunction === "undefined")
					transitionOutFunction = defaultTransOut;
				delay = transitionOutFunction(app.currentPage);
			}
			
			var destroyFunction;
			if(typeof app.pages[id] !== "undefined" && typeof app.pages[id]["destroy"] !== "undefined")
				destroyFunction = app.pages[id]["destroy"];
			if(typeof destroyFunction === "undefined")
				destroyFunction = defaultDestroyFunction;
			destroyFunction();
			
			//Transition in next page
			setTimeout(function(){
				var transitionInFunction;
				if(typeof app.pages[id] !== "undefined" && typeof app.pages[id]["transitionIn"] !== "undefined")
					transitionInFunction = app.pages[id]["transitionIn"];
				if(typeof transitionInFunction === "undefined")
					transitionInFunction = defaultTransIn;
				var initDelay = transitionInFunction($nextPage);
				app.currentPage = $nextPage;
				
				var initFunction;
				if(typeof app.pages[id] !== "undefined" && typeof app.pages[id]["init"] !== "undefined")
					initFunction = app.pages[id]["init"];
				if(typeof initFunction === "undefined")
					initFunction = defaultInitFunction;
				initFunction();
			}, delay);
			
		};
		
		//TESTING SCRIPT
		var showRandomPage = function(){
			
			var index = Math.floor(Math.random() * 5);
			var i = 0;
			var location = "";
			for(l in app.pageLocations){
				if(i === index)
					location = l;
				i++;
			}
			showFromLocation(location);
		}
		
		setInterval(function(){
			showRandomPage();
		}, 5000);
	</script>
</head>


<body>
	<div id="content">
	<div id="header">
		<div class="head_top">
			<div class="logo">
				<a href="index.html"><img src="images/zoovy_logo.png"/></a>
			</div>
			<div class="logo_navi">
				<ul>
					<li><a href="contact.html">Contact</a></li>
					<li>|</li>
					<li>Customer Login</li>
					<li>|</li>
					<li style="color:#000;">1.877.966.8948</li>
				</ul>
			</div>
		</div>
		<div class="main_nav">
			<ul>
				<li><a href="we-re-different.html">WE'RE DIFFERENT</a></li>
				<li>
					<a href="services.html">SERVICES</a>
					<ul>
						<li><a href="building-apps.html">Building Apps</a>
							<ul>
								<li><a href="design.html">Design</a></li>
								<li><a href="development.html">Development</a></li>
								<li><a href="testing.html">Testing</a></li>
							</ul>
						</li>
						<li><a href="live-training-support.html">Live Training & Support</a></li>
						<li><a href="marketing-development.html">Marketing Development</a></li>
						<li><a href="marketplace-optimization.html">Marketplace Optimization</a></li>
					</ul>
				</li>
				<li><a href="features.html">FEATURES</a>
					<ul>
						<li><a href="amazon.html">Amazon</a></li>
						<li><a href="ebay.html">eBay</a></li>
						<li><a href="order-management.html">Order Management</a></li>
						<li><a href="marketplaces.html">Marketplaces</a></li>
						<li><a href="comparison-shopping.html">Comparison Shopping</a></li>
						<li><a href="multiple-stores.html">Multiple Stores</a></li>
						<li><a href="wholesalesupply-chain.html">Wholesale/Supply Chain</a></li>
					</ul>
				</li>
				<li><a href="clients.html">CLIENTS</a></li>
				<li>
					<a href="about-zoovy.html">ABOUT ZOOVY</a>
					<ul>
						<li><a href="management.html">Management</a></li>
						<li><a href="contact.html">Contact</a></li>
						<li><a href="employment.html">Employment</a></li>
						<li><a href="company.html">Company</a></li>
					</ul>
				</li>
				<li><a href="news-events.html">NEWS & EVENTS</a>
					<ul>
						<li><a href="news-events1.html">News & Events</a></li>
						<li><a href="press-releases.html">Press Releases</a></li>
						<li><a href="in-the-news.html">In The News</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	
	<div id="mainContentArea"></div>
	
	<div id="footer">
	
	</div>
	
	<div id="templates" style="display:none;">
		<div id="home">
			<script type="text/javascript">
				app.pageLocations["/"] = "home";
			</script>
			HOME
		</div>
		<div id="aboutus">
			<script type="text/javascript">
				app.pageLocations["/corporate/aboutus.html"] = "aboutus";
				app.pages.aboutus = {
					init : function(){
						app.currentIntervals.push(setInterval(function(){
							$("#blah").fadeIn(250);
							setTimeout(function(){
								$("#blah").fadeOut(250);
							}, 250);
						}, 500));
					}
				};
			</script>
			about us
			<div id="blah">
				animation
			</div>
		</div>
		<div id="zoovy">
			<script type="text/javascript">
				app.pageLocations["/corporate/zoovy.html"] = "zoovy";
			</script>
			zoovy
		</div>
			
		<div id="anycommerce">
			<script type="text/javascript">
				app.pageLocations["/corporate/anycommerce.html"] = "anycommerce";
			</script>
			anycommerce
		</div>
		<div id="someothertestpage">
			<script type="text/javascript">
				app.pageLocations["/someothertestpage.html"] = "someothertestpage";
			</script>
			someothertestpage
		</div>
		<div id="404">
			PAGE NOT FOUND
		</div>
	</div>
	</div>
</body>

</html>