var animationLength = 1000; // 1200
var animationTiming = 5;   // 5
var carouselClicked = false;
var activeBtnNumber = 0;

function initCarousel() {
	$.cacheImage([
		'/images/sprites/app_nav.png',
		'/images/global/selectArrow.png',
		// carousel screenshots
		'/images/apps/farecompare/screenshot.png',
		'/images/apps/flighttrack/screenshot.png',
		'/images/apps/flighttrackpro/screenshot.png',
		'/images/apps/hotelpal/screenshot.png',
		'/images/apps/stayhip/screenshot.png',
		'/images/apps/tripdeck/screenshot.png',
		'/images/apps/homeaway/screenshot.png'
	]);
	$('#homeCarousel').jcarousel({
        animation: animationLength,
		auto: animationTiming,
		easing: 'easeInOutCubic',
		initCallback: jc_initCallback,
		scroll: 1,
		wrap: 'circular',
        itemVisibleOutCallback: {
            onBeforeAnimation: removeAppScreenShot,
			onAfterAnimation : addAppScreenShot
        }
	});
}

function jc_initCallback(carousel, state) {
	$('#homeCarouselNav a').bind('click', function() {
		var targetPnl = $(this).attr('rel');
		var activeBtn = parseInt(targetPnl)-1;
		carouselClicked = true;
		carousel.startAuto(0); 
		activateNavBtn(carousel, activeBtn);
		carousel.scroll($.jcarousel.intval(targetPnl));
	
		$("#screenshot").fadeOut(0);
		$("#screenshot").load('device_screen.php?id=' + activeBtn, function() {
			$(this).fadeIn(600);
		});
		
	    return false;
	});
	carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
	initNavBtn();
	initAppScreenShot();
}

function initNavBtn() {
	var item = $('#homeCarouselNav').find('li:eq(0)');
	var curA = item.find('a');
	curA.attr('class',item.attr('title') + '_nav_over');
	$('#selectArrow').css('left','112px');
}

function initAppScreenShot() {
	$("#screenshot").load('device_screen.php?id=0', function() {
		$(this).fadeIn(0);
	});
}

function removeAppScreenShot(carousel, item, idx, state) {
	var currClass = 1;
	//if (currClass > carousel.size()) {
	//	currClass = 1;
	//} else {
	//	currClass = (idx+1);
	//}
	// updateDeviceBkg(currClass);
	// alert('idx: ' + idx + ' currClass: ' + currClass);
	if (carouselClicked == false) {
		if (currClass == carousel.size()) {
			currClass = 1;
		}
		currClass++;
		//updateDeviceBkg(currClass);
		$("#screenshot").fadeOut(600);
	}
};

function addAppScreenShot(carousel, item, idx, state) {
	var currItem = idx;
	var totalItems = carousel.size()-1;
	if (currItem > totalItems) {
		currItem = 0;
	} else {
		currItem = idx;
	}
	/*
	$("#screenshot").load('device_screen.php?id=' + currItem, function() {
		$(this).fadeIn(animationLength);
		var activeBtn = currItem;
	});
	*/
	if (carouselClicked == false) {
		if (activeBtnNumber == carousel.size()) {
			activeBtnNumber = 0;
		}
		activeBtnNumber++;
		$("#screenshot").load('device_screen.php?id=' + activeBtnNumber, function() {
			$(this).fadeIn(600);
			var activeBtn = currItem;
		});
		activateNavBtn(carousel, activeBtnNumber);
	}
};

function activateNavBtn(carousel, id) {
	var currItem = id;
	if (currItem == carousel.size()) {
		currItem = 0;
	} else {
		currItem = id;
	}
	$('#homeCarouselNav').children('li').each(function() {
		var item_id = $(this).attr('id');
		var curA = $(this).find('a');
		var rel = parseInt(curA.attr('rel'));
		if (item_id == "appNav_" + currItem) {
			curA.attr('class',$(this).attr('title') + '_nav_over');
			var selectArrow = $('#selectArrow');
			var carousel = $('.appNavCarousel').find('ul').first();
			switch(rel) {
				case 1:
					selectArrow.animate({left:112},{duration:300});
					carousel.animate({left:0},{duration:300});
					break;
				case 2:
					selectArrow.animate({left:320},{duration:300});
					carousel.animate({left:0},{duration:300});
					break;
				case 3:
					selectArrow.animate({left:545},{duration:300});
					carousel.animate({left:0},{duration:300});
					break;
				case 4:
					selectArrow.animate({left:735},{duration:300});
					carousel.animate({left:0},{duration:300});
					break;
				case 5:
					selectArrow.animate({left:545},{duration:300});
					carousel.animate({left:-411},{duration:300});
					break;
				case 6:
					selectArrow.animate({left:735},{duration:300});
					carousel.animate({left:-411},{duration:300});
					break;
				case 7:
					selectArrow.animate({left:920},{duration:300});
					carousel.animate({left:-411},{duration:300});
					break;
				default:
					break;
			}
		} else {
			curA.attr('class',$(this).attr('title') + '_nav_up');
		}
	});
};

function updateDeviceBkg(id) {
	$("#screenshotWrap").removeClass();
	$('#screenshotWrap').fadeIn(animationLength, function() {
		$(this).addClass('app_' + id);
	});
};