var xml;
var x,nx;
var anim;

var loadImageFunction = function (idImage)
{
	console.error("algo"+idImage);
}

window.onload = function() {

	var a = new Ajax.Request("webData/content.xml", {
	  method: 'get',
	  onSuccess: function(transport) {
		xml 				= transport.responseXML.documentElement
		var imageGrops 		= xml.getElementsByTagName('imageGroups')[0];
		var clientList 		= xml.getElementsByTagName('clientList')[0];
		var nodes 			= [];
		var innerWrapper 	= "";
		var innerNav 		= "";
		var lastUsedID 		= undefined; 
		var insertGroupNameAtImage = 0;
		var groupName = "";
		
		//star the table that contain all images
		
		for (var i=0; i < imageGrops.getElementsByTagName('group').length; i++) {
			var aNewGroup = imageGrops.getElementsByTagName('group')[i];
			groupName = aNewGroup.getElementsByTagName('title')[0].firstChild.data;
			newScrollNavigationElement (groupName,(i*100));

			//Insert all the group's images 
			for (var j=0; j < aNewGroup.getElementsByTagName('image').length; j++) {
				var anImage = aNewGroup.getElementsByTagName('image')[j];
				if (j==0)
				{
					insertGroupNameAtImage = 1;	
				} else {
					insertGroupNameAtImage = 0;
				}
				
				newMainImage(anImage,(100*i)+j,insertGroupNameAtImage,groupName);
				
			}
		}
		
		//Insert All client List
		for (var i=0; i < clientList.getElementsByTagName('client').length; i++) {
			var aNewClient = clientList.getElementsByTagName('client')[i];
			var clientName = aNewClient.getElementsByTagName('title')[0].firstChild.data;
			newClientOnList (clientName);
		}
		scrollToEntry(0);
	  } 	
	});
}

function newClientOnList (ClientText)
{

	var newListElement = document.createElement('li');	
	newListElement.innerHTML = ClientText;
	
	var mainListElement = document.getElementById("clientList");
	var listContainerElement = mainListElement.getElementsByTagName('ul')
	listContainerElement[0].appendChild(newListElement);
	return true;
}

function newScrollNavigationElement (scrollNavElemetInfo, cntElement)
{

	var newElementText = document.createElement('A');
	
	newElementText.href = "#";
	newElementText.onclick = function() {scrollToEntry(cntElement);};
	newElementText.innerHTML = scrollNavElemetInfo;

	var oldElement = document.getElementById("firstFixNavElement");
	oldElement.parentNode.insertBefore(newElementText,oldElement);

	return true;
}

function newMainImage(nodeImageInfo, imageCnt, insertGroupName ,groupName)
{
	//var imageText = "<td>";
	var imageText = "";
	
	var newImageContainer = document.createElement('td');

	
	
	imageText += "<div class='entry' id='e"+imageCnt+"'>\n";
	var imgsrc = nodeImageInfo.getElementsByTagName('src')[0].firstChild.nodeValue;
	//imageText += '\t<div class="image"><img src="'+imgsrc + '" onLoad="loadImageFunction(img'+imageCnt+ ') /></div>\n';
	imageText += '\t<div class="image"><img src="images/'+imgsrc + '"/></div>\n';
	imageText += '<table class = "tableDesciption">';
	imageText += '<tr class = "groupOnDescriptionContainer">';
		
	if (insertGroupName)
	{
		imageText += '<td>';
		
		imageText += "<div class='groupOnDescription'>"+groupName+"</div>\n";
		imageText += '</td>';	
	}

	if (nodeImageInfo.getElementsByTagName('desc')[0].firstChild) {
		var imgdesc = nodeImageInfo.getElementsByTagName('desc')[0].firstChild.nodeValue;
		imageText += '<td>';

	
		imageText += "<div class='descriptionOnTable'>"+imgdesc+"</div>\n";
		imageText += '</td>';
	}
	imageText += "</tr>";
	imageText += "</table>\n";	
	imageText += "</div>\n";
	//imageText += "</td>";

	newImageContainer.innerHTML = imageText; 		
 	var oldElement = document.getElementById("eClientSection");
	oldElement.parentNode.insertBefore(newImageContainer,oldElement);

	return imageText;
} 

function scrollToEntry(entry) {
	new Effect.ScrollHorizontalTo("e"+entry,{offset:-2 });
	/*new Effect.ScrollTo("e"+entry,{offset:0});*/
	return false;	
}