var intervalId = null;
var idleTime = 12000;
var mycarousel_itemList = [
	{
		id: 'study',
		title: '<em>K</em>AIS | <em>Knowledge</em>',
		html: '<h2>A KAIS Education is international, intensive, personalized, and creative.</h2>' +
				'<div class="list"><p>Modern and extensive Facilities including our comprehensive library, digital photography and music equipment, and our &ldquo;One MacBook per student&rdquo; policy.</p><p>A maximum class size of 10 students allows each individual to realize his true academic potential.</p></div>'
	},
	{
		id: 'math',
		title: 'K<em>A</em>IS | <em>Academia</em>',
		html: '<h2>Intensive and challenging classes help students gain admission to top international universities.</h2>' +
				'<div class="list"><p>KAIS follows an accredited, interdisciplinary, California curriculum, which prepares students for rigorous university life.</p><p>College admissions essay workshops and a wide range of honors and AP (Advanced Placement) classes give students a head start for the SAT, AP exams, and university applications.</p></div>'
	},
	{
		id: 'science',
		title: 'KA<em>I</em>S | <em>Inspiration</em>',
		html: '<h2>&ldquo;Imagination distinguishes between a leader and a follower.&rdquo;</h2>' +
				'<div class="list"><p>Through specialized seminars and electives, students learn to take responsibility for their education and discover their passion.</p><p>A mixture of group projects, traditional lectures, and personalized lab-time allow students to set their own goals and work at a pace which best suits them.</p></div>'
	},
	{
		id: 'yoga',
		title: 'KAI<em>S</em> | <em>Spirit</em>',
		html: '<h2>Creative classes bring out the imagination and innovation in our students.</h2>' +
				'<div class="list"><p>Students pursue diverse interactive projects ranging from film and performance poetry to theater, photography, painting, and music.</p><p>Healthy students have healthy minds: All KAIS students and teachers take yoga lessons every week.</p></div>'
	}
];

/**
 * This is the callback function which receives notification
 * right after initialisation of the carousel
 */
function mycarousel_initCallback(carousel) {
	intervalId = setInterval(function() {carousel.next()}, idleTime);
	$('.jcarousel-next').bind('click', function(e) {
		clearInterval(intervalId);
		window.intervalId = null;
	});
	$('.jcarousel-prev').bind('click', function(e) {
		clearInterval(intervalId);
		window.intervalId = null;
	});
}

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function mycarousel_itemFirstInCallback(carousel, item, i, state) {
	/*clearInterval(intervalId);
	intervalId = setInterval(function() {carousel.next()}, idleTime);*/
	var idx = carousel.index(i, mycarousel_itemList.length);
	$('#header .slide-title').html(mycarousel_itemList[idx - 1].title);
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered before animation.
 */
function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
	// The index() method calculates the index from a
	// given index who is out of the actual item range.
	var idx = carousel.index(i, mycarousel_itemList.length);
	carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered after animation.
 */
function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
	carousel.remove(i);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item) {
	return '<div class="slide ' + item.id + '">' + item.html + '</div>';
};

/**
 * This is the callback function which receives notification
 * about the state of the next button.
 */
function mycarousel_buttonNextCallback(carousel, button, enabled) {
	/*clearInterval(intervalId);
	intervalId = setInterval(function() {carousel.next()}, idleTime);*/
};

/**
 * This is the callback function which receives notification
 * about the state of the prev button.
 */
function mycarousel_buttonPrevCallback(carousel, button, enabled) {
	/*clearInterval(intervalId);
	intervalId = setInterval(function() {carousel.next()}, idleTime);*/
};

// Ride the carousel...
jQuery(document).ready(function() {
	jQuery("#carousel").jcarousel({
		animation: 1500,
		easing: 'easeInOutCubic',
		scroll: 1,
		wrap: 'circular',
		initCallback: mycarousel_initCallback,
		itemFirstInCallback:  {onBeforeAnimation: mycarousel_itemFirstInCallback},
		itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
		itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
		buttonNextEvent: 'click',
		buttonPrevEvent: 'click',
		buttonNextCallback: mycarousel_buttonNextCallback,
		buttonPrevCallback: mycarousel_buttonPrevCallback
	});
});