// onload event of the page
$(document).ready(function(){

    /*
	$('body').click(function(e) {
			interval.clear();
 		}
 	);
    */

	// add click event to main area menu
 	$("#highlight-menu li a").click(
 		function(e) {
 			// if it is a user click, stop animation (interval to change main area content)
 			// if(e.pageX || e.screenX) interval.clear();
 			// show content
 			var id = this.id;
 			$("div.highlight").hide();
 			$("#"+id+"-content").show();
 			e.preventDefault();
 			// activate menu button
 			$("#highlight-menu li").removeClass();
 			$(this).parent().addClass('on');
 		}
 	);
 	
 	// add click event to tabs in the main are (success stories)
 	$("div.highlight div.tabs li a").click(
 		function(e) {
 			// stop animation of the main are (interval to change main area content)
 			// interval.clear();
 			// get image to load (image is stored in the href: #tab-to-show|image-src )
 			var data = (' ' + this.href).split('#')[1];
 			data = data.split('|');
 			var id = data[0];
 			var image = data[1];
 			// change left image
 			$("#success-stories-image").attr({src:image});
 			e.preventDefault();
 			// show tab content and activate tab
 			$("div.highlight div.tabs div.tabs-content").removeClass('on');
 			$('#'+id).addClass('on');
 			$("div.highlight div.tabs li").removeClass();
 			$(this).parent().addClass('on');
 		}
 	); 	
 	
 	// add click event to faq links
 	$('div.faq li a').click(
 		function(e) {
 			e.preventDefault();
 			// show faq content and change link arrow
 			$('div.faq li a').removeClass('on');
 			$(this).addClass('on');
 			$('div.faq li p').hide();
			$(this).siblings("p").show();
 		}
 	);
 	
 	// add click event to carousel menu (breakfast, lunch, dinner, dessert)
 	$('#carousel div.navigation a').click(
 		function(e) {
 			var href = (' ' + this.href).split('#')[1];
 			e.preventDefault();
 			// setup new carousel with array of selected type of food
 			food_carousel.setup(foods[href]);
 			// activate menu item
 			$('#carousel div.navigation a').removeClass();
 			$(this).addClass('on');
 		}
 	);
 	
 	// load first faq
 	// $('div.faq li a:first').click();
 	// load first carousel type of food (breakfast)
 	$('#carousel div.navigation a:first').click();
 	
 	// init interval of main area animation
 	// interval.init();
 	
 	// grid align for box-border
 	var height = 0;
 	$('#plan-chooser > div.unit',this).each(function(){ height = Math.max(height, this.offsetHeight); });
	$('#plan-chooser > div.unit',this).each(function(){
		var h = this.offsetHeight;
		var diff = height - h;
		if(diff > 0) {
			// set height of last box in each unit
			var obj = $("div.content:first",this);
			// if ie6, set height, else, set min-height
			obj.css(($.browser.msie && $.browser.version < 7 ? '' : 'min-') + 'height', diff + obj.height() + 'px');
		}
	});
 	
});

// interval object (used in mai area animation)
var interval = {
	count:0,
	time:0,
	// move to next content
	move:function() {
		// call menu link click event to change content
		$('#highlight-menu li a:eq(' +interval.count+ ')').click();
		// loop
		interval.count++;
		if(interval.count > 3) interval.count = 0;
	},
	// set interval
	set:function() {
		interval.time = setInterval(interval.move,4000);
	},
	// init object
	init:function() {
		interval.move();
		interval.set();
	},	
	// clear interval
	clear:function() {
		clearInterval(interval.time);
	}
}

// food_carousel object
var food_carousel = {
	// number of pages
	pages: 0,
	// size of the carousel
	size: 6,
	// array of itens
	list: null,
	// jcarousel object
	carousel: null,
	// jcarousel onBeforeAnimation callback
	callback: function(carousel, state) {
		var foods = food_carousel.list;
		// add new carousel elements
		for (var i = carousel.first; i <= carousel.last; i++) {
			if (carousel.has(i)) {
				continue;
			}
			if (i > foods.length) {
				break;
			}
			carousel.add(i, food_carousel.rhtml(foods[i-1]));
		}
		// set page (x of x)
		var page = Math.ceil((carousel.last/food_carousel.size));
		food_carousel.pagination.html('<strong>' + page + '</strong> of <strong>' + food_carousel.pages + '</strong>');
		// disable or enable prev/next buttons
		food_carousel.button_prev.removeClass('previous_off');
		food_carousel.button_next.removeClass('next_off');
		if(carousel.first == 1) food_carousel.button_prev.addClass('previous_off');
		if(carousel.last == food_carousel.list.length) food_carousel.button_next.addClass('next_off');
	},
	// return html of each item
	rhtml: function(item) {
		return '<img src="' + item.url + '" alt="' + item.title + '" width="131" height="98" /><span>' + item.title + '</span>';
	},
	// jcarousel init callback function, used to set custom actions and containers
	init: function(c) {
		// get pagination container
		food_carousel.pagination = $('#carousel div.pagination span');
		// get carousel object
		food_carousel.carousel = c;
		// get number of pages
		food_carousel.pages = Math.ceil(food_carousel.list.length/food_carousel.size);
		// get buttons prev/next
		food_carousel.button_prev = $('#carousel a.previous');
		food_carousel.button_next = $('#carousel a.next');
		food_carousel.button_prev.unbind('click');
		food_carousel.button_next.unbind('click');
		// add click events to buttons prev/next
		food_carousel.button_prev.click(
			function(e) {
				e.preventDefault();
				// if the user is on the last page and clicks previous page, the tail will scroll to the last_scroll variable
				if(food_carousel.carousel.last == food_carousel.list.length) {
					if (food_carousel.list.length%food_carousel.size == 0) {
						food_carousel.carousel.prev();
					} else {
						food_carousel.carousel.scroll(food_carousel.last_scroll);
					}
				// else default prev action
				} else food_carousel.carousel.prev();
			}
		);
		food_carousel.button_next.click(
			function(e) {
				e.preventDefault();
				food_carousel.carousel.next();
			}
		);
		// start carousel, scroll to first element (fix for safari)
		food_carousel.carousel.scroll(1);							
	},
	// setup selected carousel
	setup: function(l) {
		// get the array of foods ( { url:"", title:"" } )
		food_carousel.list = l;
		// get module of food lenght and carousel size
		var mod = food_carousel.list.length%food_carousel.size;
		// last_scroll is used to determine the scroll position when the user is on the last page and click previous page
		food_carousel.last_scroll = food_carousel.list.length - mod - food_carousel.size + 1;
		// empty carousel
		$('#carousel-clip').html('<ul id="carousel-list"></ul>');
		// set loading legend
		$('#carousel div.pagination span').html('Loading...');
		// start carousel
		$('#carousel-list').jcarousel({
			scroll: food_carousel.size,
			size: food_carousel.list.length,
			initCallback: food_carousel.init,
			itemLoadCallback: {onBeforeAnimation: food_carousel.callback },
			buttonNextHTML: null,
			buttonPrevHTML: null
		});
	}
}