$(window).load(function(){
	// timing parameters
	var period = 9000;
	var interval = 4500;
	var speed = 200;
	var slidespeed = 500;

	//init
	fixSafari();
	pageInit(interval, speed);
	videoInit(speed, slidespeed);

	// auto flip to next page
	var autoflip = window.setInterval(function(){
		flipToNext(interval, speed);
	},period);

	// manu flip to any page
	$('#homepage .pager .page').click(function(){
		//stop auto flip
		window.clearInterval(autoflip);

		$('#homepage *').stop(true,true);

		var dest = $('#homepage .right .active').flipTo($(this).index(), speed);
	  
		//restart auto flip to 'next' page. 'next' is relative to active page.
		/*autoflip = window.setInterval(function(){
			flipToNext(interval, speed);
		},period);
		*/

		$('#homepage .left').leftFadeTo(dest, interval, speed);

		$('#homepage').setActive(dest);
	});
	
	//stops autoflip on video click
	$('#homepage .right .video, #homepage .left .viewstory').click(function(){
		window.clearInterval(autoflip);
	});
});

/* page init */
function pageInit(interval, speed){
	$('#homepage').setActive(0);
	$('#homepage .left').leftFadeTo(0, interval, speed);
	$('#homepage .right .page').eq(0).addClass('active');
	$('#homepage .pager .page').eq(0).addClass('active');
	$('#homepage .right img').rightImageReset();
}

/* left effects */
$.fn.leftFadeTo = function(page, interval, speed){
	speed *= 2;

	var allpages = $(this).find('.page');
	allpages.find('*').stop(true,true);
	allpages.find('.title').fadeOut(speed);
	allpages.find('.desc').fadeOut(speed);
	allpages.find('.quote').fadeOut(speed);

	var active = $(this).find('.page').eq(page);
	active.addClass('active');
	active.find('.title').fadeIn(speed);
	active.find('.desc').fadeIn(speed);
	
	if (page != 0) {
		active.find('.desc').delay(interval).fadeOut(speed);
		active.find('.quote').delay(interval + speed).fadeIn(speed);
		$('img.viewstory').show();
	} else 
		$('img.viewstory').hide();
};

/* set active */
$.fn.setActive = function(page){
	$(this).find('.left .page').removeClass('active');
	$(this).find('.left .page').eq(page).addClass('active');
	$(this).find('.right .page').removeClass('active');
	$(this).find('.right .page').eq(page).addClass('active');
	$(this).find('.pager .page').removeClass('active');
	$(this).find('.pager .page').eq(page).addClass('active');
}

/* right side square images reset */
$.fn.rightImageReset = function(){
	$(this).css({
		'left': 0,
		'top': 0,
		'width': 111,
		'height': 111,
		'z-index': 1
	});

	return $(this);
};

/* flip to next page */
function flipToNext(interval, speed){
    $('#homepage *').stop(true,true);

	var active = $('#homepage .right .active');
	var next = active.findNext('.page');
	
	active.flipTo(next.index(), speed);
	$('#homepage').setActive(next.index());

	$('#homepage .left').leftFadeTo(next.index(), interval, speed);
};

/* flip this to specified page number */
$.fn.flipTo = function(page, speed){
	var orig = $(this);
	var dest = $('#homepage .right .page').eq(page);

	orig.css({'z-index':1});
	dest.css({'z-index':2});

	var origNum = $(this).index();
	var destNum = page;

	if (origNum == destNum) 
		return destNum;

	// prepare randomized arrays for the flips
	var numbers = [0,1,2,3,4,5,6,7,8,9,10,11];

	var randomOrder = numbers.sort(function(){ 
		return 0.5 - Math.random();
	});
	var randomDelay = $.map(numbers, function(a){
		return Math.floor(Math.random() * speed);
	});

	var axis = ['horizontal', 'vertical'];
	var randomAxis = $.map(numbers, function(a){
		return axis[Math.floor(Math.random() * 2)];
	});

	// flip it. 
	$('#homepage .right img').rightImageReset().hide();

	for (var i=0; i<12; i++) {
		orig.find('.thumb-' + randomOrder[i] + ' img')
			.delay(randomDelay[i])
			.flipOff(randomAxis[i], speed);
		orig.removeClass('active');

		dest.find('.thumb-' + randomOrder[i] + ' img')
			.delay(randomDelay[i] + speed)
			.flipOn(randomAxis[i], speed);
		dest.addClass('active');
	}

	return destNum;
};

/* flip to turn this image off */
$.fn.flipOff = function(axis,speed){
	var img = $(this);

	var cssh = {
		left: 55,
		width: 0
	};

	var cssv = {
		height: 0,
		top: 55
	};

	if ( axis == 'horizontal' ) {
		img.show().animate(cssh, speed);
	}
	else if ( axis == 'vertical' ) {
		img.show().animate(cssv, speed);
	}
	else {
		alert('fliping orientation problem!');
	}
		
	img.rightImageReset();
	$('#homepage .right .video-thumb').hide();

	return img;
};

/* flip to turn on this one image */
$.fn.flipOn = function(axis, speed){
	var img = $(this);

	var cssh0 = {
		width: 0,
		height: 111,
		left: 55
	};
	var cssh = {
		width: 111,
		left: 0
	};

	var cssv0 = {
		height: 0,
		width: 111,
		top: 55
	};
	var cssv = {
		height: 111,
		top: 0
	};


	if ( axis == 'horizontal' ) {
		img.show().css(cssh0).animate(cssh,speed);
	}
	else if ( axis == 'vertical' ) {
		img.show().css(cssv0).animate(cssv,speed);
	}

	setTimeout(function(){$('#homepage .right .video-thumb').show()}, speed*3);

	return img;
};

/*find prev() in a loop*/
$.fn.findPrev = function(className){
	if (! className) return false;

	var length = $(this).parent().find(className).length;

	if ($(this).index() == 0)
		return $(this).parent().find(className).eq(length -1);
	else 
		return $(this).prev();
}

/*find next() in a loop*/	
$.fn.findNext = function(className){
	if (! className) return false;

	var length = $(this).parent().find(className).length;

	if ($(this).index() == length - 1)
		return $(this).parent().find(className).eq(0);
	else 
		return $(this).next();
}

/* add video thumb mouseover effect */
function videoInit(speed, slidespeed){
	//add video class to corresponding thumb images
	$('#homepage .right .page-0 .thumb-2').addClass('video video-0');
	$('#homepage .right .page-0 .thumb-9').addClass('video video-1');
	$('#homepage .right .page-0 .thumb-7').addClass('video video-2');
	$('#homepage .right .page-3 .thumb-4').addClass('video video-3');
	$('#homepage .right .page-2 .thumb-6').addClass('video video-4');
	$('#homepage .right .page-1 .thumb-2').addClass('video video-5');
	$('#homepage .right .page-4 .thumb-2').addClass('video video-6');

	//add video classes to corresponding "view customer story" links
	$('#homepage .left .page-0 .viewstory').addClass('video video-2');
	$('#homepage .left .page-3 .viewstory').addClass('video video-3');
	$('#homepage .left .page-2 .viewstory').addClass('video video-4');
	$('#homepage .left .page-1 .viewstory').addClass('video video-5');
	$('#homepage .left .page-4 .viewstory').addClass('video video-6');

	//thumbnail overlay layer
	$('<img src="images/video-thumb.png" class="video-thumb">').appendTo('#homepage .right .video');

	//hover effect for thumnail
	$('#homepage .video').hover(
		function(){
			$(this).find('.video-thumb').hide();
		},
		function(){
			$(this).find('.video-thumb').show();
		}
	);

	//make the video images slide
	$('#homepage .jcarousel').jcarousel({
		scroll: 1,
		start: 1,
		wrap: 'circular',
		visible: 3,
		animation: slidespeed,
		initCallback: carousel_callback
	});

	$('#homepage .carousel-wrapper').hide();
}

/* jquery controls for carousel */
function carousel_callback(carousel){
	//carousel sliding speed
	var slidespeed = carousel.options.animation;
    //curtain fading speed
	var fadespeed = slidespeed * 1.5 
	//jquery 1.4.4 fix (bug?)
	jQuery.noData= {};

	//the video start images were hidden in css to avoid loading problem in IE
	$('#homepage .video-container img').show();

	//pop up lightbox, mark the active video
	$('#homepage .right .video, #homepage .left .viewstory').bind('click', function(){
		$('#homepage .shadow, #homepage .carousel-wrapper').show();
		$('#homepage .stage-curtain').fadeOut(slidespeed * 2);

		var videoClass = $(this).attr('class').match(/(video-(\d))/);

		videoName = videoClass[1];
		videoIndex = videoClass[2];

		carousel.scroll($.jcarousel.intval(videoIndex));

		$('#homepage .carousel-wrapper .jcarousel-item').removeClass('active')
			.filter(function(){
				if ($(this).find('img').attr('src')) {
					imageName = $(this).find('img').attr('src').match(/imagesf\/(video-\d).jpg/);
				}
				if (videoName == imageName[1]) {
					return $(this);
				}
			}).addClass('active');
	});


	//add stage curtain and left, right curtain so we can't click the side images
	$('<div/>').addClass('prev-curtain').appendTo('.jcarousel-container');
	$('<div/>').addClass('stage-curtain').appendTo('.jcarousel-container');
	$('<div/>').addClass('next-curtain').appendTo('.jcarousel-container');

	//bind next/prev click to change the video on stage
	$('#homepage .jcarousel-next').bind('click', function(){
		$('#homepage *').stop(true,true);
		$('#homepage .stage-curtain').show();
		$('#homepage .stage').html('').fadeOut(fadespeed);
		setTimeout(function(){
			var oldVideo = $('#homepage ul.jcarousel li.active').removeClass('active');
			var newVideo = oldVideo.findNext('.jcarousel-item').addClass('active');
			$('#homepage .stage-curtain').fadeOut(fadespeed);
		},slidespeed);
	});

	$('#homepage .jcarousel-prev').bind('click', function(){
		$('#homepage *').stop(true,true);
		$('#homepage .stage-curtain').show();
		$('#homepage .stage').html('').fadeOut(fadespeed);
		setTimeout(function(){
			var oldVideo = $('#homepage ul.jcarousel li.active').removeClass('active');
			var newVideo = oldVideo.findPrev('.jcarousel-item').addClass('active');
			$('#homepage .stage-curtain').fadeOut(fadespeed);
		},slidespeed);
	});

	//click image to load video in the jcarousel
	$('.jcarousel-item').bind('click', function(){
		if ($(this).hasClass('active')) {
			var videoClass = $(this).find('img').attr('src').match(/imagesf\/(video-\d).jpg/);
			var videoName = videoClass[1];
			
			$.fn.showVideo(videoName);
		}
	});

	$('#homepage .close, #homepage .shadow').click(function(){
		$('#homepage .shadow, #homepage .carousel-wrapper').hide();
		$('#homepage .stage').html('').hide();
	});
};

/* build the image html from the video name in format as video-0 */
$.fn.showVideo = function(videoName){
	var base_url = $('#base-url').html();
	var mp4_url = base_url + '/media/' + videoName + '.mp4';
	var rand = Math.floor(Math.random()*197441);
	
	var video = '<video id="avideo" width="440" height="248" poster="images/' + videoName + '.jpg" controls autoplay>';
	video += '<source src="media/homepage/' + videoName + '.mp4" type="video/mp4" />'; 
	video += '<source src="media/homepage/' + videoName + '.ogv" type="video/ogg" />';
	video += '<object width="440" height="248" data="' + base_url + 'media/player_flv_maxi.swf?' + rand 
		+ '" type="application/x-shockwave-flash">';
	video += '<param name="movie" value="' + base_url + 'media/player_flv_maxi.swf?' + rand + '" />';
	video += '<param name="FlashVars" value="flv=' + base_url + 'media/homepage/' + videoName + '.flv&amp;startimage=/images/' 
		+ videoName + '.jpg&amp;margin=0&amp;autoplay=1&amp;showvolume=1" />';
	//video += '<img src="img/homepage/' + videoName + '.jpg" />';
	video += 'Your browser does not support html5 video or flash, please upgrade and come back again. Thanks.';
	video += '</object>';
	video += '</video>';

	if ($.browser.isphone()) {
		//play full screen mode for iphone/droid
		window.location = mp4_url;
	} 
	else 
	{
		$('#homepage .stage').html(video).show();

		// html5 video tag autoplay doesn't work on ipad
		if ($.browser.safari) {
			var thevideo = document.getElementById('avideo');
			thevideo.load();
			thevideo.play();
		}
	}		
	return video;
}

/*load js after css for safari*/
function fixSafari(){
	if ($.browser.safari) {
		setTimeout( arguments.callee, 100 );
		return;
	}
}

/* detect iphone and android phones */
$.browser.isphone = function() {
	var deviceAgent = navigator.userAgent.toLowerCase();
	var agentID = deviceAgent.match(/iphone|droid/);
	return (agentID);// ? true : false;
}