function showScreencast() { 
	$(current_device+'movie').pause();
	$('screencast').style.display='block';
	$('cover').addClass('visible');
	$('movie').play();
}

function hideScreencast() {
	$('screencast').style.display='none';
	$('cover').removeClass('visible');
	$('movie').pause();
	$('movie').currentTime=0;
	$(current_device+'movie').play();
}


function swapphones() {
	anim.animateToggleClasses([
		{'element':$('ipad'),'className':'front'},
		{'element':$('iphone'),'className':'front'},
		{'element':$('ipad'),'className':'back'},
		{'element':$('iphone'),'className':'back'}
	]);
}

var current_device;
function iphoneended() {
	swapphones();
	current_device = 'ipad';
	$('ipadmovie').play();
}
function ipadended() {
	swapphones();
	current_device = 'iphone';
	$('iphonemovie').play();
}

function clickdevice() {
	if (current_device=='iphone') {
		$('iphonemovie').pause();
		$('iphonemovie').currentTime = 0;
		iphoneended();
	} else {	
		$('ipadmovie').pause();	
		$('ipadmovie').currentTime = 0;
		ipadended();
	}
}

var anim;
window.addEvent('domready',function() {
	$('videoSection').addEvent('click',clickdevice);
	$('iphonemovie').addEventListener('ended',iphoneended,false);
	$('ipadmovie').addEventListener('ended',ipadended,false);
	current_device = 'iphone';
	$('iphonemovie').play();

	//this awesome class (written by YOURS TRULY) makes animations run using CSS in webkit and javascript everywhere else
	anim = new CSSAnimation(document.styleSheets[0]);
	
	var leftbouncein = new CSSAnimKeyframes('leftbouncein', {
		  0: 'transform: translate(0,0) scale(0.75); z-index: 100;',
		 50: 'transform: translate(-50px,0) scale(0.875); z-index: 150;',
		100: 'transform: translate(0,0) scale(1); z-index: 200;'
		});
	anim.registerKeyframes(leftbouncein);
	
	var leftbounceout = new CSSAnimKeyframes('leftbounceout', {
		  0: 'transform: translate(0,0) scale(1); z-index: 200;',
		 50: 'transform: translate(-50px,0) scale(0.875); z-index: 150;',
		100: 'transform: translate(0,0) scale(0.75); z-index: 100;'
		});
	anim.registerKeyframes(leftbounceout);
	
	var rightbouncein = new CSSAnimKeyframes('rightbouncein', {
		  0: 'transform: translate(0,0) scale(0.75); z-index: 100;',
		 50: 'transform: translate(50px,0) scale(0.875); z-index: 150;',
		100: 'transform: translate(0,0) scale(1); z-index: 200;'
		});
	anim.registerKeyframes(rightbouncein);
	
	var rightbounceout = new CSSAnimKeyframes('rightbounceout', {
		  0: 'transform: translate(0,0) scale(1); z-index: 200;',
		 50: 'transform: translate(50px,0) scale(0.875); z-index: 150;',
		100: 'transform: translate(0,0) scale(0.75); z-index: 100;'
		});
	anim.registerKeyframes(rightbounceout);
		
	var opacityout = new CSSAnimKeyframes('opacityout', {
		  0: 'opacity: 1;',
		100: 'opacity: 0;'
		});
	anim.registerKeyframes(opacityout);
		
	var opacityin = new CSSAnimKeyframes('opacityin', {
		  0: 'opacity: 0;',
		100: 'opacity: 1;'
		});
	anim.registerKeyframes(opacityin);
	  
	var duration = 400;//ms
	anim.registerSelector(new CSSAnimSelector('.videoSection .ipad.front', leftbouncein, duration, 'ease-in'));
	anim.registerSelector(new CSSAnimSelector('.videoSection .ipad.back', leftbounceout, duration, 'ease-in'));
	anim.registerSelector(new CSSAnimSelector('.videoSection .iphone.front', rightbouncein, duration, 'ease-in'));
	anim.registerSelector(new CSSAnimSelector('.videoSection .iphone.back', rightbounceout, duration, 'ease-in'));
	anim.registerSelector(new CSSAnimSelector('.videoSection .ipad.front .cover', opacityout, duration, 'ease-in'));
	anim.registerSelector(new CSSAnimSelector('.videoSection .ipad.back .cover', opacityin, duration, 'ease-in'));
	anim.registerSelector(new CSSAnimSelector('.videoSection .iphone.front .cover', opacityout, duration, 'ease-in'));
	anim.registerSelector(new CSSAnimSelector('.videoSection .iphone.back .cover', opacityin, duration, 'ease-in'));
});