// JavaScript Document

window.current = 1;

var sarah = {

	carousel: {
		init: function () {
			var carouselObj = new Object();
			var i = 0;
			carouselObj.carousel = $('#animationContent');
			carouselObj.currentPage = 1;
			carouselObj.totalPages = 0;
			
			// setup the carousel li objects
			$('li', carouselObj.carousel).each(function () {
				i++;
				carouselObj.totalPages = i;
				$(this).fadeTo(0, 0);
				$(this).css({ 'z-index': 1 });
				if (i == 1) {
					$(this).addClass("active");
					$(this).fadeTo(0, 1);
					$(this).css({ 'z-index': 2 });
				}	
				$(this).addClass("p" + i);
				//Add buttons
				//$("#carouselButton").append("<li>Feature " + i + "</li>");
			}); 
			
			// set the buttons z-index really high
			$("#animationButton").css({ 'z-index': 250 });
			// set javascript onclick calls to the buttons
			$('#animationButton li').click(function () {
				clearTimeout(window.carouselTimer);
				window.carouselObj.currentPage = $(this).index() + 1;
				sarah.carousel.changeSlide(window.carouselObj.currentPage);
			}); 
			
			// set the click function on the top side arrow
			//$('#csmainArrow').click(function () {
			//	$("li",carouselObj.carousel).stop(false, true);
			//	clearTimeout(window.carouselTimer);
			//	itro.carousel.autoSlide();
			//}); 
					
			// set the click function on the lower side arrow
			//$('#csFourArrow').click(function () {
			//	//alert($('#scrollcontainer').position().left);
			//	// stop / complete current animation
			//	$("#scrollcontainer").stop(false, true);
			//	itro.carousel.leftScroll();
			//}); 
					
					
			window.carouselObj = carouselObj;
			window.carouselTimer = setTimeout(function () { sarah.carousel.autoSlide(); }, 6000);
			
			//$('#scrollcontainer').css({'width':1165});
			//$('#scrollcontainer').css({'height':221});
		},
	
		autoSlide: function () {
			clearTimeout(window.carouselTimer);
			window.carouselObj.currentPage++;
			if (window.carouselObj.currentPage > window.carouselObj.totalPages) { window.carouselObj.currentPage = 1; }
			sarah.carousel.changeSlide(window.carouselObj.currentPage);
		},

		changeSlide: function ( next ) {
			clearTimeout(window.carouselTimer);
			$(".active",carouselObj.carousel).removeClass("active").css({'z-index':1}).animate({opacity:0},{duration: 500, easing: 'easeOutCubic', complete: function() {} });
			sarah.carousel.highlightButton(window.carouselObj.currentPage - 1);
			$(".p"+next,carouselObj.carousel).addClass("active").css({'z-index':2}).animate( {opacity:1},{ duration: 500,easing: 'easeOutCubic', complete: function() { window.carouselTimer = setTimeout(function () { sarah.carousel.autoSlide() }, 6000); }});
		},
		
		highlightButton: function (buttonNumber) {
			$("#animationButton li").each(function () {
				if ($(this).index() == buttonNumber) {
					$(this).addClass("activeSq");
				} else {
					$(this).removeClass("activeSq");
				}
			});
		},
		
		//leftScroll: function () {
		//	$("#scrollcontainer").animate({left: $('#scrollcontainer').position().left-233 },{duration: 500, easing: 'easeOutCubic', complete: function() { $('#scrollcontainer li:last').after($('#scrollcontainer li:first')); $("#scrollcontainer").css({left: 0}); } });
		//	//move the first item and put it as last item
		//}
	
	}

}

$(document).ready(function () {
	sarah.carousel.init();
});