/*
*	Used for home page animation, creates a copy of fade-feature and absolutely positions it over the top of the original
*/

$(document).ready(function(){
	//enable the fade container and turn off the 3 boxes we're replacing
	$("#feature-fade-container").css("display", "block");
	$(".topfeature").css("display", "none");
	
	/*
	*	Populate a fade container with data from a feature box
	*/
	function load_feature(container, feature){
		var title = $(feature).find("h3").html();
		var event_date = $(feature).find("p.subheader").html();
		var image_url = $(feature).find("a img").attr("src");
		image_url = image_url.replace(/width=160/, "width=323");
		image_url = image_url.replace(/height=80/, "height=161");
		image_url = image_url.replace(/.160.80.jpg/, ".323.161.jpg");
		
		var link = $(feature).find("a:first").attr("href");
		
		container.find("h2").html(title);
		container.find("p").html(event_date);	
		container.find("img").attr("src", image_url);
		
		//also set the image size attributes
		container.find("img").attr("width", 323);
		container.find("img").attr("height", 161);
		
		container.find("a").attr("href", link);
	}
		
	var idx = 0;
	var num_features = $(".topfeature").length;	//number of top line features we're replace
	var fadeLength = 2000;	//time in milliseconds a fade will last
	
	//clone the fade container in html and stick it at the bottom of body

	$("#feature-fade-container").clone().appendTo("body").attr("id", "feature-fade-container2");
	$("#feature-fade-container2").css("position", "absolute");
	
	//position the new one directly over the top of the old one
	var offset = $("#feature-fade-container").offset();
	$("#feature-fade-container2").css("top", offset.top - 7);	
	$("#feature-fade-container2").css("left", offset.left);	

	//load our two initial features
	load_feature($("#feature-fade-container"), $(".topfeature")[0]);
	load_feature($("#feature-fade-container2"), $(".topfeature")[1]);	

	var containerIdx = 0;
	
	/*
	*	Function picks a container using containerIdx, loads a new feature, begins fading it in and fading the other one out
	*/
	setInterval(function(){
		if(containerIdx == 0){
			load_feature($("#feature-fade-container"), $(".topfeature")[idx]);
			$("#feature-fade-container").fadeIn(fadeLength);
			$("#feature-fade-container2").fadeOut(fadeLength);			
		}else{
			load_feature($("#feature-fade-container2"), $(".topfeature")[idx]);
			$("#feature-fade-container").fadeOut(fadeLength, function(){
				$(this).css("display", "block");
			});
			$("#feature-fade-container2").fadeIn(fadeLength);
		}
		containerIdx = 1 - containerIdx;
		idx++;
		idx = idx % num_features;
	}, "5000");
	
	
	/*
	*	Calendar Picker functions
	*/
	function updateDayList(){
		var date = new Date();
		var month = $("#month_picker").val();
		var year = $("#year_picker").val();
		month++;
		if(month == 13){
			month = 1;
			year++;
		}
		
		date.setDate(1);
		date.setMonth(month - 1);
		date.setYear(year);
		var utc = date.getTime();
		utc-= 60000 * 60 * 24;
		date = new Date();
		date.setTime(utc);
		var daysThisMonth = date.getDate();
		$("#day_picker option").each(function(){
			console.log($(this).val());
			$(this).css("display", $(this).val() <= daysThisMonth ? "" : "none");
		});
	}
	
	$("#month_picker").change(function(){
		updateDayList();
	});
	
	$("#year_picker").change(function(){
		updateDayList();
	});
});