var tmpCarouselID = 0;
var absLast = 0;
var absFirst = 0;


$(document).ready( function () {
	$("#carousel-prev").click( function() {
		//Take the very last item in the list and swap it's placeholder image before it's swapped to the beginning.
		$("#carousel li:last").find("img").attr('src', 'images/products/placeholder-left.png');
	});
	
	$("#carousel-next").click( function() {
		$("#carousel li:first").find("img").attr('src', 'images/products/placeholder-right.png');
	});
});

function createProductListing( xmlFile ) {
	
	//var xmlFile = "products.xml";
	var xmlDoc;
	var products;
	var xhttp;
	
	var preloads = new Array();
	var imgPre = new Image(250, 300);
	imgPre.src = "images/products/placeholder-left.png";
	preloads.push(imgPre);
	imgPre = new Image(250,300);
	imgPre.src = "images/products/placeholder-right.png";
	preloads.push(imgPre);	

	
	/*if (window.ActiveXObject)
	{
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = false;
		xmlDoc.load("xml/" + xmlFile);
	}
	else
	{*/
		if (window.XMLHttpRequest)
		{
			xhttp=new XMLHttpRequest();
		}
		else // Internet Explorer 5/6
		{
			xhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	
		xhttp.open("GET", xmlFile,false);
		xhttp.send("");
		xmlDoc=xhttp.responseXML; 
	//}

	
	products = xmlDoc.getElementsByTagName('item');
	//$("#carousel").append("<li></li>");
	for(var i=0; i < products.length; i++)
	{
		var li = document.createElement('li');
		var img = document.createElement('img');
		var content = document.createElement('div');
		
		var sFullImg = '/wp-content/uploads/hm-products/images/' + products[i].getElementsByTagName('image')[0].childNodes[0].nodeValue;
		var sLogo = '/wp-content/uploads/hm-products/logos/' + products[i].getElementsByTagName('logo')[0].childNodes[0].nodeValue;
		var sTable = '/wp-content/uploads/hm-products/tables/' + products[i].getElementsByTagName('table')[0].childNodes[0].nodeValue;
		var sTitle = products[i].getElementsByTagName('title')[0].childNodes[0].nodeValue;
		var sText = products[i].getElementsByTagName('text')[0].childNodes[0].nodeValue;

		$(img).attr('src', 'images/products/placeholder-right.png').data('target', '#product-' + i).data('original-img', sFullImg).data('title', sTitle);
		
		if( i == 0 )
		{
			$(img).attr('src', sFullImg);
		}
		else if( i == (products.length - 1) )
		{
			$(img).attr('src', 'images/products/placeholder-left.png');
		}
		
		$(li).append(img);
		
		if( i == (products.length - 1) )
		{
			$("#carousel").prepend(li);
		}
		else
		{
			$("#carousel").append(li);
		}
		
		$(content).attr('id', "product-" + i).addClass('product-content').html('<img src="' + sLogo + '" alt="Logo" />' + sText);
		$(content).find('img.product-table').attr('src', sTable);
		
		if( i == 0 )
		{
			$(content).css('display', 'block');
			$("#product-title").html(sTitle);
		}
		
		$("#content").append(content);
	}
	//$("#carousel").append("<li></li>");
	
	absFirst = 1;
	absLast = products.length;

	
	$("#carousel-div").jCarouselLite( {
		btnNext: '#carousel-next',
		btnPrev: '#carousel-prev',
		circular: true,
		beforeStart: updateImages,
		afterEnd: function(items) {
			updateImages(items);
			$(items[0]).find("img").attr( 'src', 'images/products/placeholder-left.png' );
			$(items[1]).find("img").attr( 'src', $(items[1]).find("img").data('original-img') );
			$(items[2]).find("img").attr( 'src', 'images/products/placeholder-right.png' );
			
			hideItemContent(items[0]);
			hideItemContent(items[2]);
			showItemContent(items[1]);	
		}
	} );
	
	/*$('#carousel').jcarousel({
		scroll: 1,
		visible: 3,
		wrap: 'circular',
		itemFirstInCallback: {
			onBeforeAnimation: function (carousel, item, idx, state) {
				//if( idx > 1 && idx < (carousel.size()) )
				//{
					if( state == "next" )
					{
						if($(item).find('img').attr('src') != 'images/products/placeholder-left.png' || $(item).find('img').attr('src') != 'images/products/placeholder-right.png')
						{
							if(navigator.appName == 'Microsoft Internet Explorer')
							{
								$(item).find('img').attr('src', 'images/products/placeholder-left.png');
							}
							else
							{
								$(item).find('img').animate({opacity: 0}, {duration: 150, complete: function() {
									$(this).attr('src', 'images/products/placeholder-left.png');
								}, queue: true}).animate({opacity: 1}, {duration: 150, queue: true});
							}

							hideItemContent(item);						
						}
					} 
				//}
			}
		},
		itemLastInCallback: {
			onBeforeAnimation: function (carousel, item, idx, state) {
				//if( idx > 1 && idx < (carousel.size()) )
				//{
					if( state == "prev" )
					{
						if($(item).find('img').attr('src') != 'images/products/placeholder-left.png' || $(item).find('img').attr('src') != 'images/products/placeholder-right.png')
						{
							if(navigator.appName == 'Microsoft Internet Explorer')
							{
								$(item).find('img').attr('src', 'images/products/placeholder-right.png');
							}
							else
							{
								$(item).find('img').animate({opacity: 0}, {duration: 150, complete: function() {
									$(this).attr('src', 'images/products/placeholder-right.png');
								}, queue: true}).animate({opacity: 1}, {duration: 150, queue: true});
							}
							
							hideItemContent(item);
						}
					}
				//}
			}
		},
		itemLastOutCallback: {
			onBeforeAnimation: function (carousel, item, idx, state) {
				//if( idx > 1 && idx < (carousel.size()) )
				//{
					if(state == 'next')
					{
						if($(item).find('img').attr('src') == 'images/products/placeholder-left.png' || $(item).find('img').attr('src') == 'images/products/placeholder-right.png')
						{
							if(navigator.appName == 'Microsoft Internet Explorer')
							{
								$(item).find('img').attr('src', $(item).find('img').data('original-img'));
							}
							else
							{
								$(item).find('img').animate({opacity: 0}, {duration: 150, complete: function() {
									$(this).attr('src', $(item).find('img').data('original-img'));
								}, queue: true}).animate({opacity: 1}, {duration: 150, queue: true});
							}
							showItemContent(item);
						}
					}
				//}
			}
		},
		itemFirstOutCallback: {
			onBeforeAnimation: function (carousel, item, idx, state) {
				//if( idx > 1 && idx < (carousel.size()) )
				//{
					if(state == 'prev')
					{
						if($(item).find('img').attr('src') == 'images/products/placeholder-left.png' || $(item).find('img').attr('src') == 'images/products/placeholder-right.png')
						{
							if(navigator.appName == 'Microsoft Internet Explorer')
							{
								$(item).find('img').attr('src', $(item).find('img').data('original-img'));
							}
							else
							{
						
								$(item).find('img').animate({opacity: 0}, {duration: 150, complete: function() {
									$(this).attr('src', $(item).find('img').data('original-img'));
								}, queue: true}).animate({opacity: 1}, {duration: 150, queue: true});
							}
							showItemContent(item);
						}
					}
				//}
			}
		},
		itemVisibleInCallback: {
			onBeforeAnimation: function ( carousel, item, idx, state ) {
				if( idx == carousel.first )
				{
					//Is the first image visible. Swap with left placeholder unless it's the blank first item.
					//if( idx > 1 )
					//{
						//Do swap to left placeholder.
						if(navigator.appName == 'Microsoft Internet Explorer')
						{
							$(item).find('img').attr('src', 'images/products/placeholder-left.png');
						}
						else
						{
							$(item).find('img').animate({opacity: 0}, {duration: 150, complete: function() {
								//$(this).data('original-img', $(this).attr('src'));
								$(this).attr('src', 'images/products/placeholder-left.png');
							}, queue: true}).animate({opacity: 1}, {duration: 150, queue: true});
						}

						hideItemContent(item);		
					//}
				}
				else if( idx == carousel.last )
				{
					//Is last item. Swap with right placeholder unless it's the last blank item.
					//if( idx < carousel.size() )
					//{
						if(navigator.appName == 'Microsoft Internet Explorer')
						{
							$(item).find('img').attr('src', 'images/products/placeholder-right.png');
						}
						else
						{
							$(item).find('img').animate({opacity: 0}, {duration: 150, complete: function() {
								//$(this).data('original-img', $(this).attr('src'));
								$(this).attr('src', 'images/products/placeholder-right.png');
							}, queue: true}).animate({opacity: 1}, {duration: 150, queue: true});
						}
						
						hideItemContent(item);
					//}
				}
				else
				{
					//Is the center image that will show the content.
					if(navigator.appName == 'Microsoft Internet Explorer')
					{
						$(item).find('img').attr('src', $(item).find('img').data('original-img'));
					}
					else
					{
					
						$(item).find('img').animate({opacity: 0}, {duration: 150, complete: function() {
							$(this).attr('src', $(item).find('img').data('original-img'));
						}, queue: true}).animate({opacity: 1}, {duration: 150, queue: true});
					}
					
					showItemContent(item);
				}
			}
		},
		itemVisibleOutCallback: {
			onBeforeAnimation: function( carousel, item, idx, state ) {
				hideItemContent( item );
			}
		}
	}); */
}

function updateImages( items )
{
	//alert( items[1] );
	
	$(items[2]).next().find('img').attr( 'src', 'images/products/placeholder-right.png' );
	$(items[2]).next().nextAll().each( function() {
		$(this).find("img").attr( 'src', 'images/products/placeholder-left.png' );
	}); 
	
	$(items[0]).prev().find('img').attr( 'src', 'images/products/placeholder-left.png' );
	$(items[0]).prev().prevAll().each( function() {
		$(this).find("img").attr( 'src', 'images/products/placeholder-right.png' );
	}); 

}

function hideItemContent(item)
{
	if(item)
	{
		$($(item).find('img').data('target')).css('display', '');
	}
	else
	{
		alert(item);
		$("div.product-content").css('display', '');	
	}
	//alert("Hiding: " + $(item).data('target'));
}

function showItemContent(item)
{
	var id = $(item).find('img').data('target');
	$(id).css('display', 'block');
	
	$("#product-title").html($(item).find('img').data('title'));
}

function var_dump(obj) {
	var out = '';
	for (var i in obj) {
		out += i + ": " + obj[i] + "\n";
	}
	
	return out;
}//end function var_dump