
<link rel="stylesheet" href="{img_dir}/featuredcontentglider.css" type="text/css" />
<link rel="stylesheet" href="{img_dir}/cssbuttonstoggler.css" type="text/css"/>
<script type="text/javascript" src="{script_url}/scripts/featuredcontentglider.js"></script>
<script type="text/javascript" src="{script_url}/scripts/jquery-1.2.2.pack.js"></script>
<script type="text/javascript">
    featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	    autorotateconfig: [3000, 10] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
	})
</script>           
<div id="canadaprovinces" class="glidecontentwrapper">
