// JavaScript Document
$(document).ready(function() {
	var slideNum = 0;
	var totSlides = 0;
	$("#next").click(function(){
		slideNum += 1;
		if(slideNum == totSlides) slideNum=0;
		slide(slideNum);
		slideShow.reset(12000);
		return false;
	});
	$("#prev").click(function(){
		slideNum-=1;
		if(slideNum == -1) slideNum = totSlides-1;
		slide(slideNum);
		slideShow.reset(12000);
		return false;
	});
	
	function slide(slide){
			$("#featureWrap")
				.animate({ opacity:"hide" }, 750)
				.animate({ marginTop: -327*slide }, 1)
				.animate({ opacity:"show" }, 250);
		
		$("#current").text((slide+1) + "/" + totSlides);
	}
	
	
	var slideShow = $.timer(12000, function (timer) {
		slideNum += 1;
		if(slideNum == totSlides) slideNum=0;
		slide(slideNum);
		timer.reset(12000);
	});
	
	$.ajax({
        type: "GET",
		url: "/features111809.xml",
		dataType: "xml",
		success: function(xml){
			var htmlOutput = '';
			$('feature', xml).each(function(i){
				//handle image
				imgURL = $(this).find("picture").attr("url");
				imgWidth = $(this).find("picture").attr("width");
				imgHeight = $(this).find("picture").attr("height");
				imgAlt = $(this).find("picture").text();
				//handle titles
				subtitle = $(this).find("subtitle").text();
				titleWhite = $(this).find("white").text();
				titleYellow = $(this).find("yellow").text();
				//get link
				learnMoreLink = $(this).find("linkTo").text();
				//get body
				featureBody = $(this).find("featureBody").text()//.html();
				//alert(featureBody);
				data = buildFeature(imgURL, imgWidth, imgHeight, imgAlt, subtitle, titleWhite, titleYellow, featureBody);
				htmlOutput = htmlOutput + data;
				totSlides++;
				});
			$("#featureWrap").append(htmlOutput);
			$("#current").text("1/" + totSlides);
		}
	
	});
	
	function buildFeature(imgSRC, imgWidth, imgHeight, imgAlt, subtitle, titleWhite, titleYellow, featureBody){
		var output = '';
		output += "<div class='feature'>";
		output += "<img class='featureImg' src='/"+imgSRC+"' width='"+imgWidth+"' height='"+imgHeight+"' alt='"+imgAlt+"' />";
		output += "<div class='featureBody'>";
		output += "<h2>"+subtitle+"</h2>";
		output += "<h1 class='white'>"+titleWhite+"</h1>";
		output += "<h1 class='yellow'>"+titleYellow+"</h1>";
		output += "<div class='featureBodyCopy'>"+featureBody+"</div>";
		output += "<div class='featureLearnMore'><a href='"+learnMoreLink+"'><img src='/images/learnMore.jpg' alt='Learn More' border='0' /></a></div>";
		output += "</div>";
		output += "</div>";
		return output;
	}
});