// JavaScript Document
//$(document).ready(initCarousel());

function getCarousel(category,numDisplayed)
{
	$.ajax({
		type: "GET",
		url: "/wp-content/themes/lwlaw/carousel/carousel.xml",
		dataType: "xml",
		success: function(xml){
       				callback(xml, category, numDisplayed);
				}
	});
}

function callback(data, category, numDisplayed)
{
	var carousel=data.getElementsByTagName("carouselSettings")[0];
	var carouselSettings = new Object();
	carouselSettings = displayCarousel(carousel,numDisplayed);
	
	var thumbnails=data.getElementsByTagName("thumbnail");
	displayThumbnails(thumbnails,carouselSettings,category);
}

function displayThumbnails(thumbnails,carouselSettings,category)
{
	var thumb = 0;
	
	for(var k=0;k<thumbnails.length;k++)
	{
		x=thumbnails[k].childNodes;
		y=thumbnails[k].firstChild;
		isCategory = false;
		
		for(var i=0;i<x.length;i++)
		{
			if((y.nodeName=='category')&&(y.nodeType==1))
			{
				if(y.childNodes[0].nodeValue==category)
				{
					isCategory = true;
					//alert(y.nodeName+': '+y.childNodes[0].nodeValue);
				}
			}
			y=y.nextSibling;
		}
		
		//if catagory, display thumbnails of category, if category undefined, display all
		if((!category)||(isCategory))
		{
			thumb++;
			y=thumbnails[k].firstChild;
			//display thumbnail html
			$('#thumbnails').append('<li class="thumbnail'+(thumb)+' thumbnail"><a><img /><h3></h3></a></li>');			
			
			//insert data into thumbnail html
			for (var i=0;i<x.length;i++)
			{
				if(y.nodeType==1)
  				{//Process only element nodes (type 1)
					switch(y.nodeName)
					{
					case "text":
						$('.thumbnail'+(thumb)+' h3').append(y.childNodes[0].nodeValue);
					break;
					case "image":
						$('.thumbnail'+(thumb)+' img').attr("src", y.childNodes[0].nodeValue);
					break;
					case "url":
						$('.thumbnail'+(thumb)+' a').attr("href", y.childNodes[0].nodeValue);
					break;
					case "target":
						$('.thumbnail'+(thumb)+' a').attr("target", y.childNodes[0].nodeValue);
					break;
					}
  				}
				y=y.nextSibling;
			}
		}
	}
	
	//styling for #thumbnails li
	$("#thumbnails li").css("margin-left",carouselSettings.margin);
	$("#thumbnails li").css("margin-right",carouselSettings.margin);
	$("#thumbnails li").css("width",carouselSettings.thumbnailWidth);
	$("#thumbnails li").css("height",carouselSettings.thumbnailHeight);
	$("#thumbnails li").css("background", 'url('+carouselSettings.thumbnailSrc+') no-repeat center');
	
	
	
	$('#thumbnails li:first').before($('#thumbnails li:last'));
	
	//bind click to arrows & rotate carousel
	$("#leftArrow").bind('click', function(){rotate("left",carouselSettings)});
	$("#rightArrow").bind('click', function(){rotate("left",carouselSettings)});
}

function rotate(direction, carouselSettings)
{
	if(direction == "left")
	{
		    //calculate the new left indent of the unordered list  
            var left_indent = parseInt($('#thumbnails').css('left')) - (carouselSettings.thumbnailFullWidth);  
  			//make the sliding effect using jquery's anumate function '  
            $('#thumbnails').animate({'left' : left_indent},{duration: 200, complete: function(){  
 
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
                $('#thumbnails li:last').after($('#thumbnails li:first'));  
  				
				
                //and get the left indent to the default -210px  
                $("#thumbnails").css({'left' : '-'+parseInt(carouselSettings.margin*2+carouselSettings.thumbnailWidth)+'px'});
            }}); 
	}
	
	if(direction == "right")
	{
	}
}

//get carousel data, display carousel
function displayCarousel(carousel,numDisplayed)
{
	var margin = 0;
	var carouselSettings = new Object();
	var y=carousel.firstChild;
	
	
	for (var i=0;i<carousel.childNodes.length;i++)
	{
		if (y.nodeType==1)
  		{//Process only element nodes (type 1)
  			 			
			switch(y.nodeName)
			{
			case "title":
				carouselSettings.title = y.childNodes[0].nodeValue;
			break;

			case "thumbnailsDisplayed":	
				carouselSettings.thumbnailsDisplayed = numDisplayed;//parseInt(y.childNodes[0].nodeValue,0);
			break;
			case "thumbnailSrc":
				carouselSettings.thumbnailSrc = y.childNodes[0].nodeValue;
			break;
			case "thumbnailHeight":
				carouselSettings.thumbnailHeight = parseInt(y.childNodes[0].nodeValue,0);
			break
			case "thumbnailWidth":
				carouselSettings.thumbnailWidth = parseInt(y.childNodes[0].nodeValue,0);
			break
			case "leftArrowSrc":
				carouselSettings.leftArrowSrc = y.childNodes[0].nodeValue;
			break
			case "leftArrowWidth":
				carouselSettings.leftArrowWidth = parseInt(y.childNodes[0].nodeValue,0);
			break
			case "rightArrowSrc":
				carouselSettings.rightArrowSrc = y.childNodes[0].nodeValue;
			break
			case "rightArrowWidth":
				carouselSettings.rightArrowWidth = parseInt(y.childNodes[0].nodeValue,0);
			break
			}
		
		}
		y=y.nextSibling;
	}
	
	$('#carousel_head').append('<h2>'+carouselSettings.title+'</h2>');//('<h2>'+carouselSettings.title+'</h2>');
	$('#carousel_head').after('<div id="leftArrow" style="width:'+carouselSettings.leftArrowWidth+'px; height: '+carouselSettings.thumbnailHeight+'px; background: url('+carouselSettings.leftArrowSrc+') no-repeat center"></div>');
	$('#leftArrow').after('<div id="thumbnailWrap"></div>');
	$('#thumbnailWrap').after('<div id="rightArrow" style="width:'+carouselSettings.rightArrowWidth+'px; height: '+carouselSettings.thumbnailHeight+'px; background: url('+carouselSettings.rightArrowSrc+') no-repeat center"></div>');
	$('#thumbnailWrap').append('<ul id="thumbnails"></ul>');
	
	
	//calculate margin for thumbs
	/*calculate wrapper width*/
	carouselSettings.wrapperWidth=($("#carousel").innerWidth()-$("#leftArrow").outerWidth()-$("#rightArrow").outerWidth()-$("#leftArrow").css("margin-right").replace("px", "")-$("#rightArrow").css("margin-right").replace("px", "")-$("#leftArrow").css("margin-left").replace("px", "")-$("#rightArrow").css("margin-left").replace("px", ""));
	
	/*calculate margin*/
	carouselSettings.margin=Math.round(((carouselSettings.wrapperWidth-(carouselSettings.thumbnailWidth*carouselSettings.thumbnailsDisplayed))/carouselSettings.thumbnailsDisplayed)/2);																																																																																						 	
	//calculate full item width
	carouselSettings.thumbnailFullWidth=((carouselSettings.margin*2)+carouselSettings.thumbnailWidth);
	
	//thumbnail wrap Width
	$("#thumbnailWrap").css("width",carouselSettings.wrapperWidth);
	
	//shift thumbnails left
	$("#thumbnails").css({'left' : '-'+carouselSettings.thumbnailFullWidth+'px'});

	$("#carousel").append('<div class="clear"></div>');
	
	return(carouselSettings);
}

function carousel(category,numDisplayed)
{
	document.write('<div id="carousel"><div id="carousel_head"></div></div>'); //create initial html carousel div tag
	getCarousel(category,numDisplayed);
}