$(document).ready(function () {
							
	// set the automatic transtion
	var pause = 6000;
	var slideshow = setInterval(switchPhones,pause);
							
	var units = new Object();
	
	// vert screen and iPhone units
	units.v = new Object();
	units.v.sw		= 226;	// screen img units
	units.v.sh		= 338;
	units.v.sl		= 26;
	units.v.st		= 86;
	units.v.iw		= 276;	// iPhone img units
	units.v.ih		= 584;
	units.v.aol1	= 347;	// animate out units
	units.v.aot1	= 75;
	units.v.aol2	= 547;
	units.v.aot2	= 110;
	units.v.ail		= 722;	// animate in units
	units.v.ait		= 100;
	units.v.fl		= 509;	// front placement units
	units.v.ft		= 54;
	
	// hrzn screen and iPhone units
	units.h = new Object();
	units.h.sw		= 340;	// screen img units
	units.h.sh		= 228;
	units.h.sl		= 84;
	units.h.st		= 24;
	units.h.iw		= 508;	// iPhone img units
	units.h.ih		= 364;
	units.h.aol1	= 322;	// animate out units
	units.h.aot1	= 175;
	units.h.aol2	= 482;
	units.h.aot2	= 150;
	units.h.ail		= 672;	// animate in units
	units.h.ait		= 220;
	units.h.fl		= 429;	// front placement units
	units.h.ft		= 210;
	
	// back phone starting points
	// (1st letter is back phone orientation, 2nd is front phone)
	units.vh = new Object();
	units.vv = new Object();
	units.hh = new Object();
	units.hv = new Object();
	units.vh.l = 708;
	units.vh.t = 105;
	units.vv.l = 713;
	units.vv.t = 145;
	units.hh.l = 586;
	units.hh.t = 115;
	units.hv.l = 629;
	units.hv.t = 231;
	
	// faded back opacity
	units.op = 0.7;
	
	// amounts to shrink by and time
	units.pct1 = 0.56;
	units.pct2 = 0.75;
	units.time = 500;
	
	// set up all phones with orientation data, and hide them
	var phones = $(".home-iphone-hrzn, .home-iphone-vert");
	phones.each(function(i){
		$(this).hide();
		var orient = ($(this).hasClass('home-iphone-hrzn')) ? 'h' : 'v';
		$(this).data('orient',orient);
		$(this).data('id',i);
	});
	
	// set initial front and back phones, and their z-index
	var fPhone = phones.eq(0);
	var bPhone = phones.eq(1);
	fPhone.css('z-index',200);
	bPhone.css('z-index',100);
	
	// fade in front image after load
	fPhone.onImagesLoad({
		selectorCallback: fadeInFront
	});
	function fadeInFront(el) {
		el.fadeIn(units.time);
	}
	
	// set and slide in back image after load
	bPhone.onImagesLoad({
		selectorCallback: setBackPhone
	});
	
	
	function setBackPhone(newPhone) {
		
		// determine and set proper units
		var imgU = units[newPhone.data('orient')];
		var phoneU = units[newPhone.data('orient') + fPhone.data('orient')];
		
		// position and show the phone
		newPhone.css({ 
					 left: phoneU.l - 15,
					 top: phoneU.t,
					 opacity: 0
					});
		newPhone.find('.iphone')
				.css({ 
					 width: imgU.iw * units.pct1,
					 height: imgU.ih * units.pct1
					});
		newPhone.find('.screen')
				.css({ 
					 width: imgU.sw * units.pct1,
					 height: imgU.sh * units.pct1,
					 left: imgU.sl * units.pct1,
					 top: imgU.st * units.pct1
					});
		newPhone.delay(units.time)
				.show()
				.animate({
					left: [phoneU.l, 'easeOutCubic'],
					opacity: [units.op, 'linear']
				}, units.time*1.5);
		
		// set this as the new back phone, and attach click handler
		bPhone = newPhone;
		bPhone
			.unbind('click')
			.click(function(){
				$(this).unbind('click');
				clearInterval(slideshow);
				switchPhones();
				slideshow = setInterval(switchPhones,pause);
				return false;
			});
		
	}
	
	// switch the phones when called
	function switchPhones() {
		
		// reassign phones
		var outPhone = fPhone;
		fPhone = bPhone;
		
		// remove previous phone
		oUnits = units[outPhone.data('orient')];
		outPhone
			.animate({
				left: [oUnits.aol1,'easeOutCubic'],
				top: oUnits.aot1
			}, {
				duration: units.time,
				easing: 'linear',
				complete: function() { $(this).css('z-index',50) }
			})
			.animate({
				left: oUnits.aol2,
				top: [oUnits.aot2,'linear'],
				opacity: 0
			}, {
				duration: units.time,
				easing: 'easeInCubic',
				complete: function() { $(this).hide() }
			});
		outPhone.find('.iphone')
			.animate({
				width: oUnits.iw * units.pct2,
				height: oUnits.ih * units.pct2
			}, units.time, 'linear')
			.animate({
				width: oUnits.iw * units.pct1 / 1.5,
				height: oUnits.ih * units.pct1 / 1.5
			}, units.time, 'linear');
		outPhone.find('.screen')
			.animate({
				left: oUnits.sl * units.pct2,
				top: oUnits.st * units.pct2,
				width: oUnits.sw * units.pct2,
				height: oUnits.sh * units.pct2
			}, units.time, 'linear')
			.animate({
				left: oUnits.sl * units.pct1 / 1.5,
				top: oUnits.st * units.pct1 / 1.5,
				width: oUnits.sw * units.pct1 / 1.5,
				height: oUnits.sh * units.pct1 / 1.5
			}, units.time, 'linear');
		
		// animate in new front phone
		fUnits = units[fPhone.data('orient')];
		fPhone
			.animate({
				left: [fUnits.ail,'easeOutCubic'],
				top: fUnits.ait,
				opacity: 1
			}, {
				duration: units.time,
				easing: 'linear',
				complete: function() { $(this).css('z-index',200) }
			})
			.animate({
				left: [fUnits.fl,'easeInCubic'],
				top: fUnits.ft
			}, {
				duration: units.time,
				easing: 'linear',
				complete: function() {
					var nextID = fPhone.data('id') + 1;
					if (nextID == phones.length) nextID = 0;
					setBackPhone(phones.eq(nextID));
				}
			});
		fPhone.find('.iphone')
			.animate({
				width: fUnits.iw * units.pct2,
				height: fUnits.ih * units.pct2
			}, units.time, 'linear')
			.animate({
				width: fUnits.iw,
				height: fUnits.ih
			}, units.time, 'linear');
		fPhone.find('.screen')
			.animate({
				left: fUnits.sl * units.pct2,
				top: fUnits.st * units.pct2,
				width: fUnits.sw * units.pct2,
				height: fUnits.sh * units.pct2
			}, units.time, 'linear')
			.animate({
				left: fUnits.sl,
				top: fUnits.st,
				width: fUnits.sw,
				height: fUnits.sh
			}, units.time, 'linear');
		
	}
	
});