/* -- mainCarousel -- */
// Test
// index of the main carousel
var mainCarousel_index = 1;
// flag pause of the main carousel
var mainCarousel_paused = 0;
// list of images of the main carousel
var mainCarousel_list = [];

// init call back function of the main carousel
function mainCarousel_initCallback(carousel) {

	// bind click function for the pause button
	$j('div.navigation a.play_pause').click(
		function() {
			// if it is paused, unpause
			if(mainCarousel_paused) {
				mainCarousel_paused = 0;
				carousel.startAuto(4);
				$j(this).removeClass('play_pause_off');
			// if not, pause
			} else {
				mainCarousel_paused = 1;
				carousel.startAuto(0);
				$j(this).addClass('play_pause_off');
			}
			return false;
		}
	);

	// bind click function for the numbered navigation
	$j('div.navigation ul a').click(function() {
		// pause carousel
		mainCarousel_paused = 1;
		carousel.startAuto(0);
		$j('div.navigation a.play_pause').addClass("play_pause_off");
		// get navigation number
		var n = this.parentNode.className.split("_")[1];
		// get length of the carousel
		var len = mainCarousel_list.length;
		// move the carousel, if last position, and clicked number 1, next function
		if(n==1 && mainCarousel_index == len) carousel.next();
		// if first position, and clicked number 6, prev function
		else if(n==len && mainCarousel_index == 1) carousel.prev();
		// else, common move
		else carousel.scroll(jQuery.jcarousel.intval(n));
		return false;
	});

	// bind next click function
	carousel.buttonNext.click(function() {
		// pause carousel
		mainCarousel_paused = 1;
		carousel.startAuto(0);
		$j('div.navigation a.play_pause').addClass("play_pause_off");
	});

	// bind prev click function
	carousel.buttonPrev.click(function() {
		// pause carousel
		mainCarousel_paused = 1;
		carousel.startAuto(0);
		$j('div.navigation a.play_pause').addClass("play_pause_off");
	});
	// add images to the carousel.  the main carousel only gets more images is the user has javascript.  
	// without javascript, the user does not get navigation or images
	carousel.add(1, mainCarousel_getItemHTML(mainCarousel_list[0]));
	carousel.add(2, mainCarousel_getItemHTML(mainCarousel_list[1]));
	carousel.add(3, mainCarousel_getItemHTML(mainCarousel_list[2]));
	carousel.add(4, mainCarousel_getItemHTML(mainCarousel_list[3]));
	carousel.add(5, mainCarousel_getItemHTML(mainCarousel_list[4]));
	carousel.add(6, mainCarousel_getItemHTML(mainCarousel_list[5]));
};

// call back function that runs before carousel animation
function mainCarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
	// get the image number to where the animation should go
	var n = i;
	var len = mainCarousel_list.length;
	// set limits
	if(n<1) n = len;
	if(n>len) n = 1;
	// save index
	mainCarousel_index = n;
	// remove all visual indicators of clicked numbers
	$j('div.navigation li a').removeClass('on');
	// show which slide number were clicked
	$j('li.slide_'+n+' a').addClass('on');
	// trick for the circular carousel, add a copy of first and last item on each sides of the tail
	if( (state=="next" && i > len) || (state=="prev" && i < 1) ) {
		var idx = carousel.index(i, len);
		carousel.add(i, mainCarousel_getItemHTML(mainCarousel_list[idx - 1]));
	}
};

// call back function that runs after carousel animation
function mainCarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
	// get carousel length
	var len = mainCarousel_list.length;
	// if button next was clicked and was in the last item of the carousel
	if(state=="next" && i==len) {
		// scroll back to first item
		carousel.scroll(1,false);
		// remove the copy of the first item (trick for circular carousel)
		carousel.remove(len+1);
	}
	// if button prev was clicked and was in the first item of the carousel
	if(state=="prev" && i == 1) {
		// scroll back to last item
		carousel.scroll(len,false);
		// remove the copy of the last item (trick for circular carousel)
		carousel.remove(0);
	}
};

// returns the html of each item of the carousel
function mainCarousel_getItemHTML(item) {
	return '<a href="' + item.url + '"><img src="' + item.img + '" width="470" height="357" alt="' + item.title + '" /></a>';
};

/* -- whyLoveCarousel -- */

// list of sentences for the whyLoveCarousel
var whyLoveCarousel_list = [];

// call back function that runs before carousel animation
function whyLoveCarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
	// get the length of the carousel
	var len = whyLoveCarousel_list.length;
	// trick for the circular carousel, add a copy of first and last item on each sides of the tail
	if( (state=="next" && i > len) || (state=="prev" && i < 1) ) {
		var idx = carousel.index(i, len);
		carousel.add(i, whyLoveCarousel_list[idx - 1]);
	}
};

// call back function that runs after carousel animation
function whyLoveCarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
	// get carousel length
	var len = whyLoveCarousel_list.length;
	// if button next was clicked and was in the last item of the carousel
	if(state=="next" && i==len) {
		// scroll back to first item
		carousel.scroll(1,false);
		// remove the copy of the first item (trick for circular carousel)
		carousel.remove(len+1);
	}
	// if button prev was clicked and was in the first item of the carousel
	if(state=="prev" && i == 1) {
		// scroll back to last item
		carousel.scroll(len,false);
		// remove the copy of the last item (trick for circular carousel)
		carousel.remove(0);
	}
};

// jQuery Ready Event
// ------------------
$j(document).ready(function(){
								
 	if($j.browser.mozilla && parseFloat($j.browser.version) < 1.9) {
		$j('div.navigation li a').css({opacity: .9999});
 	}

	// add close button to the slides of the choose phone/plan buttons
	$j('div.slide').prepend('<a href="#" class="close" title="close">close</a>');
	// add next button to the whyLoveCarousel
	$j('#testimonials').append('<a class="jcarousel-next" href="">Next</a>');

	// remove all itens of the slide show (the first slide is preloaded, if the user does not have javascript, he will get the first image)
	$j('ul.slideshow_list li').remove();
	
	// add a click event to the navigation layer, this way, the user should click above the navigation to get the slide click
	$j('div.navigation').click(function(){ return false; });
	
	// add rollover/rollout effect to the navigation 
	$j('div.navigation').hover(
			function() {
				// if the slide of choose phone/plan is open, exit
				if($j('a.button_choose').hasClass('button_choose_on')) return;
				// remove interval
				if(typeof(sInt)!='undefined') clearInterval(sInt);
				// add fade class
				$j(this).addClass('fade');
				// fade in
				$j('div.navigation_clip',this).fadeIn(300);
			},
			function() {
				// set interval
				var sInt = setInterval(
					function() {
						// if is not fading in
						if(!$j('div.navigation').hasClass('fade')) {
							// remove class fade
							$j(this).addClass('fade');
							// fade out, and remove class fade after it
							$j('div.navigation_clip').fadeOut(300, function(){ $j(this).parent().removeClass('fade') });
							// clear interval
							clearInterval(sInt);
						}
					},300					
				);
				// remove class fade
				$j(this).removeClass('fade');   
			}
	);
	
	// save whyLoveCarousel content to a list 
	$j('div.list_clip li').each(function() {
		var obj = $j(this);
		whyLoveCarousel_list.push(obj.html())
	});
	
	// add rollover/rollout effect to the navigation buttons
	$j('div.navigation li a').hover(
		function() {
			// get obj
			var obj = $j(this);
			// get obj text
			var text = $j('span',this).text();
			// show tooltip
			obj.parent().prepend('<div class="tip">' + text + '</div>');
			$j('div.tip',obj.parent()).show();
		},
		function() {
			// get obj
			var obj = $j(this);
			// remove tooltip
			$j('div.tip',obj.parent()).remove();
		}
	);
	
	// save mainCarousel content to a list (the list of images of the mainCarousel is at the navigation list items)
	$j('div.navigation li a').each(function() {
		var obj = $j(this);
		var img = obj.attr('title');
		var url = obj.attr('href');
		var title = obj.text();
		mainCarousel_list.push({ img:img, url:url, title:title })
	});

	/* start carousels */

	$j('div.slideshow').jcarousel( { 
		auto: 4,
		wrap:'circular',
		initCallback: mainCarousel_initCallback,
		itemVisibleInCallback: {onBeforeAnimation: mainCarousel_itemVisibleInCallback},
		itemVisibleOutCallback: {onAfterAnimation: mainCarousel_itemVisibleOutCallback}
	});

	$j('#testimonials').jcarousel( { 
		vertical: true,
		wrap:'circular',
		itemVisibleInCallback: {onBeforeAnimation: whyLoveCarousel_itemVisibleInCallback},
		itemVisibleOutCallback: {onAfterAnimation: whyLoveCarousel_itemVisibleOutCallback}
	});

	/* set choose plan/phone slides */

	// hide choose plan/phone slides
	$j('div.slide').css({ left:-401 });

	// add click event to choose phone button
	$j('a.choose_phone').click(function() {
		// if it is open, close
		if($j(this).hasClass('button_choose_on')) {
			$j('div.slide_phone a.close').click();
		} else {
			// if carousel is not paused, pause it
			if(!mainCarousel_paused) {
				mainCarousel_paused = 0;
				$j('div.navigation a.play_pause').click();
			}
			// show slide clip
			$j('div.slide_clip').show();
			// fix png for the big buttons
			$j("div.slide span.image > img").pngfix();
			// close plan slide
			$j('div.slide_plan a.close').click();
			// change its button layout
			$j(this).addClass('button_choose_on');
			// open slide
			$j('div.slide_phone').animate({ left:0 },500);	
		}
		return false;
	});

	// add click event to close phone button
	$j('div.slide_phone a.close').click(function() {
		// change its button layout
		$j('a.choose_phone').removeClass('button_choose_on');
		// close the slide
		$j('div.slide_phone').animate({ left:-401 },500,function() {
			// if there is no slide opened, hide slide clip																
			if(!$j('a.button_choose').hasClass('button_choose_on')) $j('div.slide_clip').hide();								 
		});
		return false;
	});

	// add click event to choose plan button (look above for comments)
	$j('a.choose_plan').click(function() {
		if($j(this).hasClass('button_choose_on')) {
			$j('div.slide_plan a.close').click();
		} else {
			if(!mainCarousel_paused) {
				mainCarousel_paused = 0;
				$j('div.navigation a.play_pause').click();
			}
			$j('div.slide_clip').show();
			$j("div.slide span.image > img").pngfix();
			$j('div.slide_phone a.close').click();
			$j(this).addClass('button_choose_on');
			$j('div.slide_plan').animate({ left:0 },500);
		}
		return false;
	});

	// add click event to close plan button (look above for comments)
	$j('div.slide_plan a.close').click(function() {
		$j('a.choose_plan').removeClass('button_choose_on');
		$j('div.slide_plan').animate({ left:-401 },500,function() {
			if(!$j('a.button_choose').hasClass('button_choose_on')) $j('div.slide_clip').hide();
		});
		return false;
	});
});