{preload_replace:mychannel="home"}
{preload_replace:myembedded="embeds"}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>{exp:channel:entries channel="{mychannel}" limit="1"}{title}{/exp:channel:entries}</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Usha">
	<!-- Date: 2011-05-25 -->
	{embed="{myembedded}/01-css"}	
</head>
<body id="home">
<div id="main-container">	
	{embed="{myembedded}/02-topnav"}
	{exp:channel:entries channel="{mychannel}" limit="1"}
	<div id="content" class="container_16">
		<div id="slideshowListWrapper">
			<div id="tagline">
				Be <span class="green">One</span> with the World<br />
				in search of innovative architectural ideas that best serve communities. <a href="">learn more</a>
			</div>	
			<ul id="home-slideshow">
				{home_slide_show}
				<li>{exp:ce_img:single src="{home_slide_img}" width="960" height="438" crop="yes|center"}</li>
				{/home_slide_show}
			</ul>
		</div>
		<!-- root element for the items -->
		<div class="slider" id="slider1" >
			<ul>
			{featured_content_slider}
				<li>
					<div class="home-featured-page">
						<div class="carousel-bullet"></div>
						{exp:ce_img:single src="{home_featured_thumb}" width="277" height="157" crop="yes|center"}
						<h3>{home_featured_title}</h3>
						<h6>{home_featured_desc}</h6>
					</div>
				</li>
				{/featured_content_slider}
			</ul>
		</div>
		{/exp:channel:entries}
		<div class="controls">
		    <a href="#" class="prev-page">Prev Page</a><!--
		    <a href="#" class="prev-slide">Prev Slide</a> 
		    <a href="#" class="next-slide">Next Slide</a> -->
		    <a href="#" class="next-page">Prev Page</a>
		</div>
	</div>
</div>
{embed="{myembedded}/04-footer" page_layout="home"}
{embed="{myembedded}/01-js"}
<script type="text/javascript">
// Running jQuery in noConflict mode
jQuery(document).ready(function($) {
    $('#home-slideshow').advListRotator({
        rotationInterval: 3000,
        effect: 'fade',
        effectTimer: 2000,
        activeItemClass: 'slideshowItemActive',
    });
});
</script>
<script src="{site_url}js/lemmon-slider.js"></script>
<script>
window.onload = function(){

	// slider 1
	$( '#slider1' ).lemmonSlider({
		infinite: true
	});
}
</script>
</body>
</html>