/* -- 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 lenght 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]));
};

// 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="343" height="330" alt="' + item.title + '" /></a>';
};

// 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});
 	}

// 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');   
			}
	);
	
// 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}
	});

});