

function loadBannersIntoId(id, xml_url)
{
	$.ajax({
		type: "GET",
		url: xml_url,
		dataType: "xml",
		success: function(xml)
		{

			var host = $(id);
			if (!host) return; // Nowhere to load it into
			
			var host_style_class = "";
			var transition_type = "fade";
			var transition_time_ms = 500;
			var stay_time_ms = 4000;
			var layout = "overlay";
			var feature_width = "";
			var feature_height = "";
				
			$(xml).find("style_class").each(function()     { host_style_class = $(this).text(); });
			$(xml).find("transition_type").each(function() { transition_type = $(this).text(); });
			$(xml).find("transition_time").each(function() { transition_time_ms = parseInt($(this).text()); });
			$(xml).find("stay_time").each(function()       { stay_time_ms = parseInt($(this).text()); });
			$(xml).find("layout").each(function()          { layout = $(this).text(); });
			$(xml).find("width").each(function()           { feature_width = parseInt($(this).text()); });
			$(xml).find("height").each(function()          { feature_height = parseInt($(this).text()); });

			if (layout == "overlay")
			{
				host.append('<div class="features"></div><div class="tabs"></div>');
				if (feature_width) host.css("width",feature_width+"px");
				if (feature_height) host.css("height",feature_height+"px");
			}
			else if (layout == "left-button")
			{
				//host.append('<table cellpadding=0 cellspacing=0 border=0><tr><td valign=top><div class="tabs"></div></td><td valign=top><div class="features"></div></td></tr></table>');
				host.append('<span class="tabs"></span><span class="features"></span>');
			}
			else if (layout == "right-button")
			{
				host.append('<span class="features"></span><span class="tabs"></span>');
			}
			host.addClass(host_style_class);

			var tabHtml = "";
			var featureHtml = "";
			var banners = [];
			$(xml).find("banner").each(function()
			{
				var banner = {};
				banner.title       = $(this).find("title").text();
				banner.description = $(this).find("description").text();
				banner.tooltip     = $(this).find("tooltip").text();
				banner.type        = $(this).find("type").text();

				banner.index = banners.length;
				banners.push(banner);
				
				var tooltip = banner.tooltip?banner.tooltip : banner.title;

				tabHtml += "<div class='tab' title="+htmlEncodeAttr(tooltip)+"><div class='index'>"+(banner.index+1)+"</div><div class='title'>"+htmlEncodeOutput(banner.title)+"</div><div class='description'>"+htmlEncodeOutput(banner.description)+"</div></div>";


				if (banner.type == "image")
				{
					var image_url = $(this).find("image").text();
					var link      = $(this).find("link").text();
					featureHtml += "<div class='feature' title="+htmlEncodeAttr(tooltip)+"><a href="+htmlEncodeAttr(link)+"><img src="+htmlEncodeAttr(image_url)+" border=0 alt="+htmlEncodeAttr(tooltip)+"></a></div>";
				}
				else if (banner.type == "html")
				{
					var html_content = $(this).find("html").text();
					featureHtml += "<div class='feature' title="+htmlEncodeAttr(tooltip)+">"+html_content+"</div>";
				}
				else
				{
					featureHtml += "<div class='feature' title="+htmlEncodeAttr(tooltip)+">UNKNOWN BANNER TYPE</div>";
				}		
			});
			
			// Hidden feature to ease initial transition
			featureHtml += "<div class='selectedFeature'></div>";

			var tabs = $(host).find(".tabs");
			$(tabs).html(tabHtml);

			var features = $(host).find(".features");
			$(features).html(featureHtml);
			
			if (feature_width)
			{
				$(features).css("width",feature_width+"px");
			}
			if (feature_height)
			{
				$(features).css("height",feature_height+"px");
			}


			host.selectedTab = null;
			host.selectedFeature = $(features).children().last();
			host.selectedBanner = null;
			
			var transition;
			if (transition_type == "slide")
			{
				transition = function(newFeature,oldFeature)
				{
					$(newFeature).css("top","0px");
					$(newFeature).css("left",$(oldFeature).width());
					$(newFeature).show();
					$(newFeature).animate( { left: "0px" }, { duration: transition_time_ms } );

					$(oldFeature).css("top","0px");
					$(oldFeature).css("left","0px");
					$(oldFeature).animate(
							{
								left: "-"+$(oldFeature).width()+"px"
							},
							{
								duration: transition_time_ms,
								easing: "swing",
								complete: function() 
								{
									$(oldFeature).hide();
								}
							});
				};
			}
			else // "fade" and all others
			{
				transition = function(newFeature,oldFeature)
				{
					$(oldFeature).stop(true,false);
					$(oldFeature).animate(
							{
								opacity: 0
							},
							{
								duration: transition_time_ms,
								complete: function() { $(this).hide(); }
							});
					
					$(newFeature).stop(true,false);
					$(newFeature).css("opacity",0);
					$(newFeature).animate(
							{
								opacity: 1
							},
							{
								duration: transition_time_ms
							});
					$(newFeature).show();

					//$(oldFeature).fadeOut(transition_time_ms);
					//$(newFeature).fadeIn(transition_time_ms);
					
				};
			}
			
			var bindTab = function(tab,index)
			{
				$(tab).click(function() {
					selectFeature(index);
				});
			}
			var deselectSelected = function()
			{

			}
			var selectFeature = function(index)
			{
				if (host.selectedBanner && host.selectedBanner.index == index) return;

				var banner = banners[index];
				var tab = tabs.children()[index];
				var feature = features.children()[index];
				var oldTab = host.selectedTab;
				if (oldTab)
				{
					$(oldTab).removeClass("selectedTab");
					$(oldTab).addClass("tab");
				}
				host.selectedTab = tab;
				host.selectedBanner = banner;
				$(tab).removeClass("tab");
				$(tab).addClass("selectedTab");
				
				var oldFeature = host.selectedFeature;
				$(oldFeature).stop();
				$(feature).stop();
				transition(host.selectedFeature = feature,oldFeature);
			}
			var selectNextFeature = function()
			{
				if (host.selectedBanner)
				{
					var next = host.selectedBanner.index+1;
					if (next >= banners.length)
					{
						next = 0;
					}

					selectFeature(next);
				}
			}

			for (var i=0; i<banners.length; ++i)
			{
				var tab = tabs.children()[i];
				var feature = features.children()[i];
				var banner = banners[i];

				bindTab(tab,i);
			}

			selectFeature(0);
			host.selectionInterval = setInterval(selectNextFeature, stay_time_ms);
			host.mouseover(function()
			{
				clearInterval(host.selectionInterval);
			});
			host.mouseout(function() 
			{
				clearInterval(host.selectionInterval);
				host.selectionInterval = setInterval(selectNextFeature, stay_time_ms);
			});

		}
	});
}

function textContentOf(node,name)
{
	var found = $(node).find(name);
	if (found && found.length > 0) return $(found[0]).text();
		return "";
}




