var photos = [
	'ph_01.jpg',
	'ph_02.jpg',
	'ph_03.jpg'
];

$(function() {
	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	
	var navigate = function() {
		if(animating) return;
		currentImg++;
		if(currentImg == photos.length + 1) currentImg = 1;
		var currentContainer = activeContainer;
		activeContainer = (activeContainer == 1) ? 2 : 1;
		
		// showImage
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
	};
	
	var currentZindex = -1;
	
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(img/photo/" + photoObject + ")",
			"display" :"block",
			"z-index" :currentZindex + 100
		});
		
		// Fade out the current container
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				animating = false;
			}, 5000);
		});
	};
	
	// We should statically set the first image
	navigate();
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate();
	}, 9000);
	
	
	// Datepicker
	var dt = new Date();
	var y = dt.getFullYear();
	var m = dt.getMonth()+1;
	m = (m<10)?'0'+m:m;
	var d = dt.getDate();
	d = (d<10)?'0'+d:d;
	$('#datepicker').val(y+'年'+m+'月'+d+'日');
	$('#dt_yyyymm').val(y+'/'+m+'/'+d);
	$('#dt_dd').val(d);
	
	$('#datepicker').datepicker({
		dateFormat: 'yy年mm月dd日',
		maxDate: '+6m',
		minDate: '0',
		onSelect: function(dateText, inst) {
			$('#dt_yyyymm').val(dateText.substr(0,4)+'/'+dateText.substr(5,2)+'/01');
			$('#dt_dd').val(dateText.substr(-3,2));
		}
	});
	
});