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

var startItem = 0;
var listSize = 6;

var arrowPositions = [132,355,588,412,640,860];
var carouselPositions = [0,0,0,-450,-450,-450];

var activeBtnNumber = startItem;

function initCarousel() {
    // jcarousel has a 'flashing' problem in webkit browsers. My ultra hacky fix is to hide the details here, then
    // show in in the jcarousel code once it finishes loading. Nothing else worked...
    $('.details').hide();
    
	$.cacheImage([
		'/images/sprites/app_nav.png?v=3',
		'/images/global/selectArrow.png',
		// carousel screenshots
        '/images/apps/flightboard/screenshot.png',
		'/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({
        start: startItem + 1,
        size: listSize,
        animation: animationLength,
		auto: animationTiming,
		easing: 'easeInOutCubic',
		initCallback: jc_initCallback,
		scroll: 1,
		wrap: 'last',
        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));
    
        //windowsphoneHack(activeBtn);
    
		$("#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('+startItem+')');
	var curA = item.find('div');
    curA.addClass(item.attr('title') + '_nav_over');
    
    var pos = arrowPositions[startItem] + 'px';
	$('#selectArrow').css('left',pos);
}

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

function removeAppScreenShot(carousel, item, idx, state) {
	var currClass = 1;

	if (carouselClicked == false) {
		if (currClass == carousel.size()) {
			currClass = 1;
		}
		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;
	}

	if (carouselClicked == false) {
		if (activeBtnNumber == carousel.size()) {
			activeBtnNumber = 0;
		}
		activeBtnNumber++;
        
        windowsphoneHack(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('div');
		var rel = parseInt($(this).find('a').attr('rel'));
		if (item_id == "appNav_" + currItem) {
            curA.removeClass($(this).attr('title') + '_nav_up').addClass($(this).attr('title') + '_nav_over');
			var selectArrow = $('#selectArrow');
			var carousel = $('.appNavCarousel').find('ul').first();
            var arrowAnimationPos = {left:arrowPositions[rel-1]};
            var carouselAnimationPos = {left:carouselPositions[rel-1]};
            var duration = {'duration':300};
            
            selectArrow.animate(arrowAnimationPos, duration);
            //$('.appNavCarousel').move(carouselAnimationPos);
            carousel.animate(carouselAnimationPos, duration);
            //carousel.animate(0, duration);
		} else {
			curA.removeClass($(this).attr('title') + '_nav_over').addClass($(this).attr('title') + '_nav_up');
		}
	});
};

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

function windowsphoneHack(id) {
    // Hack to show windowsphone for FT as promotion
    if (id == 2) {
        $('#device').removeClass('device_iphone').addClass('device_windowsphone');
        $('#screenshot').removeClass('screenshot_iphone').addClass('screenshot_windowsphone');
    }
    else {
        $('#device').removeClass('device_windowsphone').addClass('device_iphone');
        $('#screenshot').removeClass('screenshot_windowsphone').addClass('screenshot_iphone');
    }
}