/**************************************
** simple slideshow
** 
** parameters: 
** id: the container element
** url: url to the xml configutation
**************************************/
function slideShow(id, url) {
	var transition;
	var pause;
	var container;
	var slides = [];
	var images = [];
	var curr_slide = 0;
	var curr_image = 0;

	function init(xml) {

		// parse settings out of xml file
		trans_time = Number(xml.find('transition').text());
		pause_time = Number(xml.find('pause').text());
		
		// for each <slide> in xml
		xml.find('slide').each( 
			function() {
				
				// create an object
				var o = {};
				
				// add src attr into object
				o.src = $(this).attr('src');
				
				// if an href was specified
				if ($(this).attr('href')) {
					// we need to set slideshow up to handle links
					
					// add href attr into object
					o.href = $(this).attr('href');
					
					// if container is not already a link
					if (!container.is('a')) {
						
						// check if link inside the page
						var lnk = container.children('a').first();
						
						// if link not found
						if (lnk.length == 0) {
							// wrap container contents with an <a> tag
							container.wrapInner('<a>');
							lnk = container.children('a').first();
						// link was found
						} else {
							// assume <a> already wraps elements
						}
						
						// style it to fill container
						lnk.css({
							'display': 'block',
							'width': '100%',
							'height': '100%'
						});
						
						// then use it as container instead
						container = lnk;
					}
				}
				
				// append object to slides array
				slides[slides.length] = o;
			} 
		); //close each()
		
		
	
		// add first image
		if (slides.length > 0) {
			var img = container.children('img');
			
			// if images found, use first
			if (img.length > 0) {
				images[0] = img.first();
				
				
			// otherwise create new image
			} else {
				images[0] = $('<img>');
				images[0].appendTo(container);
			}
			
			// style the image
			images[0]
				.attr('src', slides[0].src) // set src
				.css({ // position top left and above second img
					 'position': 'absolute',
					 'top': 0,
					 'left': 0,
					 'zIndex': 1,
					 'border': 0
				});
				
			// if first slide has an href
			if (slides[0].href) {
				// and container is a link
				if (container.is('a')) {
					// set href
					container.attr('href', slides[0].href);
				}
			}
		}
		
		// if there is more than a single slide
		if (slides.length > 1) {
			
			// add and style a second image
			images[1] = $('<img>')
				.attr('src', slides[1].src) // set src
				.css({ // position top left and beneath first img
					 'position': 'absolute',
					 'top': 0,
					 'left': 0,
					 'zIndex': 0,
					 'border': 0
				})
				.appendTo(container); // and insert into page
				
			// preload the rest of the images
			for (var i=2; i<slides.length; i++) {
				slides[i].img = $('<img>')
					.attr('src', slides[i].src);
			}
			
			// start anim by setting timer
			transition();
		}
	}

	function transition() {
		// determine if we are fading in or fading out
		// the topmost image this cycle
		var op = Math.abs(images[0].css('opacity') - 1);
		
		// with the topmost image
		images[0]
			// after our pause time
			.delay(pause_time)
			// we fade in/out for transition time
			.animate( {opacity:op}, trans_time, 
				// when fade is complete
				function() {
					// of our two images
					// the currently visible image
					// the next image to transition
					curr_image = curr_image == 0 ? 1 : 0;
					var next_image = curr_image == 0 ? 1 : 0;
					
					// and save 
					curr_slide = curr_slide < (slides.length-1) ? curr_slide+1 : 0;
					var next_slide = curr_slide < (slides.length-1) ? curr_slide+1 : 0;

					images[next_image].attr('src', slides[next_slide].src);

					if (container.is('a')) {
						if (slides[curr_slide].href) {
							container.attr('href', slides[curr_slide].href);
						} else {
							container.removeAttr('href');
						}
					}

					transition();
				}
			);
	}

	// if container not found, throw error
	if (!(container = $('#'+id))) {
		if (console && console.error) {
			console.error('Element #'+id+' not found.');
		}
		return false;
	}
	container.css('position', 'relative');
	
	// if url not specified, throw error
	if (!url) {
		if (console && console.error) {
			console.error('Configuration URL not specified.');
		}
		return false;
	}
	// if url invalid, throw error

	// load configuration
	$.ajax(
		{
			type: 'GET',
			url: url,
			dataType: 'xml',
			success: function(xml) {
				init($(xml));
			}
		}
	); //close $.ajax(
}