{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"}
	<link rel="stylesheet" href="{site_url}slideshow/css/supersized.css" type="text/css" media="screen">
	<link rel="stylesheet" href="{site_url}slideshow/theme/supersized.shutter.css" type="text/css" media="screen">	
	{embed="{myembedded}/01-js" page_layout="home"}
	<script type="text/javascript">
		jQuery(function($){
			$.supersized({

				// Functionality
				slide_interval          :   3000,		// Length between transitions
				transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
				transition_speed		:	700,		// Speed of transition
				fit_portrait			: 0,
				keyboard_nav			: 0,
				new_window				: 0,

				// Components							
				slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
				slides 					:  	[			// Slideshow Images
														{exp:channel:entries channel="{mychannel}" limit="1" backspace="1"}{home_background}
														{
														image : '{image}',
														url : '{link}'
													},{/home_background}{/exp:channel:entries}
											]

			});
	    });

	</script>
</head>
<body id="home">
	{embed="{myembedded}/02-topnav"}
	<div id="content">
		<a class="prev browse left"></a>
		<div class="scrollable">
			<div class="items">
				{exp:channel:entries channel="{mychannel}" limit="1"}
				{featured_content_slider}
				<div class="item">
					<div class="carousel-bullet"></div>
					<a href="{home_featured_link}">
						{exp:ce_img:single src="{home_featured_thumb}" width="276" height="156" crop="yes|center"}
					</a>
					<div class="clear"></div>
					<div class="text-wrap">
						<h3><a href="{home_featured_link}">{home_featured_title}</a></h3>
						<h6>{home_featured_desc}</h6>
					</div>
				</div>
				{/featured_content_slider}
				{/exp:channel:entries}
			</div>
		</div>
		<a class="next browse right"></a>
	</div>
{embed="{myembedded}/04-footer"}
<script type ="text/javascript">
$(function() {
	//wrap divs 
	var divs = $("div.item");
	for (var i = 0; i < divs.length; i+=3) {
	  divs.slice(i, i+3).wrapAll('<div class="item-wrap"></div>');
	}
	// initialize scrollable
	$(".scrollable").scrollable({
		circular: true
		});

});
</script>
</body>
</html>