//vars
var timer;
var imagePath = new Array();
var imageBuild = new Array();
var blurb = new Array();
var linkPath = new Array();

var imageLoader = new Image();

var xmlLength;
var buttonHTML;
var imageWidth;
var imageHeight;
var animation;
var animationDelay;
var restartAnimation;

var waitTimer;
var slideTimer;
var currentSlide = 0;

// JavaScript Document
function startCarousel(options) {
	
	imageWidth = options.imageWidth;
	imageHeight = options.imageHeight;
	showBlurbs = options.showBlurbs;
	defaultButtonLayout = options.defaultButtonLayout;
	animation = options.animation;
	animationDelay = options.animationDelay;
	restartAnimation = options.restartAnimation;
	
	
	loadXML(options.xmlPath);

	//xml
	function loadXML(xmlPath) {
	
		if (window.XMLHttpRequest) {
			
			//IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {
			
			//IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		//simple cashe buster
		xmlPath += "?" + Math.floor(Math.random()*10001);
		
		xmlhttp.open("GET",xmlPath,false);
		xmlhttp.send();
		xmlDoc = xmlhttp.responseXML;
		
		
		//loop to get all the elements in the xml
		xmlLength = xmlDoc.getElementsByTagName("image").length;
		document.getElementById('carousel_image_container').innerHTML = "";
		buttonHTML = "";
		
		for (var i = 0; i < xmlLength; i++) {
			imagePath[i] = xmlDoc.getElementsByTagName("image")[i].attributes.getNamedItem('path').value;
			blurb[i] = xmlDoc.getElementsByTagName("image")[i].attributes.getNamedItem('blurb').value;
			linkPath[i] = xmlDoc.getElementsByTagName("image")[i].attributes.getNamedItem('link').value;
			
			//build out our html for the images
			document.getElementById('carousel_image_container').innerHTML += '<div id="carousel_image"><a href="'+linkPath[i]+'"><img src="'+imagePath[i]+'" border="0" /></a></div>';
			
			if (i == 0) {
				buttonHTML += '<a href="javascript:numberClicked('+(i+1)+')"><div id="carousel_button_'+(i)+'" class="carousel_button_active"></div></a>';
			} else {
				buttonHTML += '<a href="javascript:numberClicked('+(i+1)+')"><div id="carousel_button_'+(i)+'" class="carousel_button_inactive"></div></a>';
			}
			
			//lets preload the images so we have have no weird moments
			//there should be enough time inbetween imageSwitcher to load the image, so no need for onLoad();
			imageLoader.src = imagePath[i];
		}
	}
	
	//once the last image loaded, set the divs and start the carousel
	imageLoader.onload = function() {
	
		//adjust our divs
		document.getElementById('carousel_image_container').style.marginLeft = '0px';
		document.getElementById('carousel_container').style.width = imageWidth+'px';
		document.getElementById('carousel_container').style.height = imageHeight+'px';
		document.getElementById('carousel_image_mask').style.width = imageWidth+'px';
		document.getElementById('carousel_image_mask').style.height = imageHeight+'px';
		document.getElementById('carousel_image_container').style.width = imageWidth * xmlLength+'px';
		document.getElementById('carousel_image_container').style.height = imageHeight+'px';
		
		//place the blurb overlay
		if (showBlurbs == true) {
			document.getElementById('carousel_container').innerHTML += '<div id="carousel_blurb_overlay"></div>';
			document.getElementById('carousel_blurb_overlay').style.width = imageWidth+'px';
			document.getElementById('carousel_blurb_overlay').style.marginTop = '-'+document.getElementById('carousel_blurb_overlay').offsetHeight+'px';
			document.getElementById('carousel_blurb_overlay').innerHTML = '<div id="carousel_blurb_text">'+blurb[0]+'</div>';
		}
		
		//place the buttons
		document.getElementById('carousel_container').innerHTML += '<div id="carousel_button_container"></div>';
		document.getElementById('carousel_button_container').innerHTML = buttonHTML;
		
		if (defaultButtonLayout == true) {
			document.getElementById('carousel_button_container').style.marginLeft = (imageWidth / 2) - (xmlLength*20 / 2)+'px';
			document.getElementById('carousel_button_container').style.top = imageHeight+'px';
			document.getElementById('carousel_button_container').style.marginTop = '5px';
		}
		
		//now that everything is set lets start a timer if there is animation
		if (animation == true) {
			waitTimer = setTimeout(startAnimation, animationDelay);
		}
	}
}


function startAnimation() {
	
	var i=0;
	var currentMargin = parseInt(document.getElementById('carousel_image_container').style.marginLeft);
	var maxMargin = parseInt(document.getElementById('carousel_image_container').style.width);
	
	if (currentMargin + maxMargin <= imageWidth) {
		//rewind
		var points = { 'from': currentMargin, 'to': 0 }
	} else {
		var points = { 'from': currentMargin, 'to': currentMargin - imageWidth }
	}
	
	var animDelta = (points.to - points.from);
	var tweenAmount = [1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1,1];
	var frameCount = tweenAmount.length;
	var newFrame = points.from;
	slideTimer = setTimeout(slide, 50);
	
	function slide() {
		i++;
		if (i >= frameCount) {
			waitTimer = setTimeout(startAnimation, animationDelay);
			clearTimeout(slideTimer);
		} else {
			newFrame += (animDelta*tweenAmount[i]/100);
		  	frames[i] = newFrame;
		  	document.getElementById('carousel_image_container').style.marginLeft = Math.round(frames[i])+'px';
			slideTimer = setTimeout(slide, 50);
		}
	}
	
	//set the correct button and info
	currentSlide++;
	if (currentSlide >= xmlLength) {
		currentSlide = 0;
	}
	
	setData(currentSlide+1);
	
}


function numberClicked(number) {
	
	clearTimeout(waitTimer);
	clearTimeout(slideTimer);
	document.getElementById('carousel_image_container').style.marginLeft = '-'+(imageWidth*(number-1))+'px';
	setData(number);
	
	if (restartAnimation == true) {
		currentSlide = (number-1);
		waitTimer = setTimeout(startAnimation, animationDelay);
	}
}

function setData(number) {
	
	for (var i = 0; i<xmlLength; i++) {
		document.getElementById('carousel_button_'+i).className = 'carousel_button_inactive';
	}
	
	document.getElementById('carousel_button_'+(number-1)).className = 'carousel_button_active';
	if (showBlurbs == true) {
		document.getElementById('carousel_blurb_overlay').innerHTML = '<div id="carousel_blurb_text">'+blurb[number-1]+'</div>';
	}
}