$(document).ready(function() {
	$('.features').cycle({
		fx:		'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		timeout: 24000,
		prev:	'.prev',
		next: '.next',
		pager:	'.feature_navigation',
		activePagerClass: 'current',
		pagerAnchorBuilder:	pagerFactory
	});

	function pagerFactory(idx, slide) {
		return "<li id='slide_" + (idx+1) + "'><a href='#slide_" + (idx+1) + "'>" + (idx+1) + "</a></li>";
	};

	// Use the each() method to gain access to each elements attributes
	$("ol.feature_navigation li").each(function() {
		var this_id = $(this).attr("id");
  		$(this).qtip({
			content: {
				text: "<img src='" + $("div.features div." + this_id + " img").attr("src") + "' width='400' />",
        		title: {
					text: $("div.features div." + this_id + " h2.hide").html() // Give the tooltip a title using each elements text
				}
			},
			style: {
				tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
				border: { width: 2, radius: 5, color: '#00B3D6' },
				title: { 'background-color': '#00B3D6', 'color': '#ffffff' },
				name: 'light', // Use the default light style
				margin: 5,
				width: 400 // Set the tooltip width
			}
		})
	});
});