/* script.js for cygenv2.1 control */
/*--------------------------
	"showMap()" function
----------------------------*/
	function showMap(obj){
		/*
			Show Map
		*/
		//Where do we want to display the map?
		var imageLocation = document.getElementById("currentMap");
		//retrive src to assing to our innerHTML
		var src = obj.childNodes[0].getAttribute("src");
		//imageLocation.innerHTML = "<img src=" + src + " />"
		imageLocation.innerHTML = "";
		var mapImage = document.createElement("img");
			mapImage.setAttribute("src", src);
			imageLocation.appendChild(mapImage);
		
		/*
			Show name
		*/
		//Where do we want to show the map name?
		var nameLocation = document.getElementById("currentName");
		//Whats the map name?
		var mapName = obj.getAttribute("map_name").toUpperCase();
		// Now let's place it.
		nameLocation.innerHTML = "<p>" +mapName+ "</p>";
		//Modify text color.
		nameLocation.style.color = "white";
		}

/*-------------------------------
	"showMapIncycle()" function
---------------------------------*/
	function showMapIncycle(obj, mapObj){
		/*
			Show Map
		*/
		//Where do we want to display the map?
		var imageLocation = document.getElementById("currentMap");
		//retrive src to assing to our innerHTML
		var src = obj.childNodes[0].getAttribute("src");
		imageLocation.innerHTML = "";
		var mapImage = document.createElement("img");
			mapImage.setAttribute("src", src);
			imageLocation.appendChild(mapImage);
		
		/*
			Show name
		*/
		//Where do we want to show the map name?
		var nameLocation = document.getElementById("currentName");
		//Whats the map name?
		var mapName = obj.getAttribute("map_name").toUpperCase();
		// Now let's place it.
		nameLocation.innerHTML = "<p>" +mapName+ "</p>";
		//Modify text color.
		nameLocation.style.color = "#00FF00";
		
		//Hover effects for name list.
		liHover(mapObj);
		
		showControl(mapObj);
		
		}

/*---------------------------
	Add map
----------------------------*/
	function addMap(obj){
		//Add a map to our cycle.
		cycle_addMap(obj);
		
		/*
			Hide selected map to avoid duplicates in cycle.
		*/
		obj.style.display = "none";
		
		/*
			Add name to ordered list.
		*/
		//Where is our ordered list?
		var orderedList = document.getElementById("theList").firstChild;
		//Create the new <li> element.
		var newLi = document.createElement("li");
		//what's the new name which goes inside our li textNode?
		newName = obj.getAttribute("map_name");
		//Assing the new name to our new <li> innerHTML
		newLi.innerHTML = newName;
		//Get map id.		
		var map_id = obj.getAttribute("id");
		//Retrieve selection map id number
		var number = map_id.substr(3);
		//Set up the list_item attribute.
		var list_item = "list_item" + number;
		//set an id to match list_item attribute to refer back to this li.
		newLi.setAttribute("id", list_item);
		//Now add the <li> to our list
		orderedList.appendChild(newLi);
		
		/*Clear code*/
		clearCode();
		}

/*----------------------------------------------------------
	"cycle_addMap()" is used to create a map element and place it into our incycle div.
	It is used in conjuction with "addMap()"
-----------------------------------------------------------*/

function cycle_addMap(obj){
		
		//Where will we add our new map? (parent)
		var mapcycle = document.getElementById("incycle");
		//Create a new span element to house the background image of the selected map.
		var newSpan = document.createElement("div");
		//Retrieve the selection object id and assing it to "map_id" attribute for reference.
		var map_id = obj.getAttribute("id");
		//Set the map_id attribute, referece back to the original img and attributes.
		newSpan.setAttribute("map_id", map_id);
		//Retrieve selection map id number
		var number = map_id.substr(3);
		//Set up the list_item attribute.
		var list_item = "list_item" + number;
		//Set our list_item attribute.
		newSpan.setAttribute("list_item", list_item);
		//Get the map name
		var mapName = obj.getAttribute("map_name");
		//Set our map_name attribute.
		newSpan.setAttribute("map_name", mapName);
		 //build our id attribute
		//Get our mapcode attribute
		var mapCode = obj.getAttribute("map_code");
		//set our mapcode attribute
		newSpan.setAttribute("map_code", mapCode);
		
		/*
			Set up the background image on the div.
		*/
		//Retrive the attribute map_code
		var theCode = obj.getAttribute("map_code");
		//And parse it to retrive file name.
		var fileName = theCode.substr(3);
		//Build our background path.
		var thumbnail = "images/thumbnails/" + fileName + ".jpg";
		//Assign the bgImage to our div.
		newSpan.style.backgroundImage = "url(" + thumbnail + ")";
		//Set class
		newSpan.className = "incycleMap";
	
		/*
			Retrive info to add events.
		*/
		//add Event onclick
		//newSpan.onclick = function(){putback(newSpan)};
		//add Even onmouseover
		newSpan.onmouseover = function(){showMapIncycle(obj, newSpan)};
		//add Event onmouseout
		newSpan.onmouseout = function (){outEvent(newSpan)};
		//Now append the child.
		mapcycle.appendChild(newSpan);
		
		//Add control.
		addControl(newSpan);
		
}

/*------------------------------------
	Get code - generates map cycle
-------------------------------------*/
	function getCode(){
		var i = 0;
		var counter = document.getElementById("incycle").childNodes.length;
		//Declare array to populate
		var theCycle = new Array();
		//Use this loop to populate it.
		for(var i = 0; i < counter; i++){
		var thisMap = document.getElementById("incycle").childNodes[i].getAttribute("mapcode");
			theCycle[i] = thisMap;
		}
		//Once the array has all the elements in the map cycle, let's parse it's output.
		var j = 0;
		//set a string variable to populate.
		var cycleString = "seta si_mapcycle " + "\"";
		var lastElement = (counter - 1);
		for(j = 0; j < counter; j++){
			var thisMapCode = document.getElementById("incycle").childNodes[j].getAttribute("map_code");
			if(j == lastElement){
				//If this is the last element of the array..
				cycleString = cycleString + thisMapCode + "\""; 
			} else {
				//if this is NOT the last element of the array
				cycleString = cycleString + thisMapCode + "; ";
			}
		}
		
		var para = document.createElement("p");
			para.innerHTML = cycleString;
			document.getElementById("theCode").appendChild(para);
	}

/*-------------------------------------------------------------------------
	Function testCode - Tests weather we want to run the getCode function.
-------------------------------------------------------------------------*/
	function testCode(){
			/*
				Check if the code has been previously generated.
				If it has, delete it. and get updated code.
			*/
			var mapsInCycle = document.getElementById("incycle").childNodes.length;
			//if there's maps in the cycle.
			if(mapsInCycle > 0){
				//Check if a child exists inside the "theCode" id and delete it.
				var isChild = document.getElementById("theCode").childNodes.length;
				if(isChild > 0){
					var theParent = document.getElementById("theCode");
					var theChild = document.getElementById("theCode").childNodes[0];
					theParent.removeChild(theChild);
					getCode();
				} else {
						getCode();
				}
				
			} else {
					//Do nothing;
					null;
			}
	}

/*-----------------------------------------------------------------
	put back function, unhides selection and generates names list.
-----------------------------------------------------------------*/
function putback(obj){
	//Retrieve the hidden map's id.
	var id = obj.getAttribute("map_id");
	//set a reference to the hidden map.
	var theHidden = document.getElementById(id);
	//display the map again.
	theHidden.style.display = "";
	
	/*
		Clean up, remove image and name.
	*/
	//Removing image.
	obj.parentNode.removeChild(obj);
	
	/*Regenerate our <ol> children*/
	updateList(obj);
	
	/*Clear the code*/
	clearCode();
}


/*----------------------------------------------------------
	"updateList()" rebuilds our names list for incycle maps
-----------------------------------------------------------*/
function updateList(obj){
	//Get a reference to our list object.
	var theList = document.getElementById("theList").firstChild;
	//Get a reference to our "maps in cycle" list.
	var incycle = document.getElementById("incycle");
	
	/*
		Now dynamically populate our names list based on our maps in incycle.
	*/
	
	//First delete all children in our list.
	theList.innerHTML = "";
	
	//Get the length of nodes inside our cycle.
	var length = incycle.childNodes.length;
		//Populate our list.
		//First we need a reference to all the maps in cycle.
		for( var i = 0; i < length; i++){
			//Refer to its children
			var thisMap = incycle.childNodes[i];
			var itemNo = thisMap.getAttribute("list_item");
			
			//So now let's build a new li.
			var listItem = document.createElement("li");
			var listItemName = incycle.childNodes[i].getAttribute("map_name");
			//add the list_item attribute from our maps.
			listItem.setAttribute("id", itemNo )
			listItem.innerHTML = listItemName;
			
			//Now let's append it.
			theList.appendChild(listItem);
		}
}

/*------------------------------------------------------------
	"liHover()" hover effects for names in names list
------------------------------------------------------------*/
function liHover(mapObj){
	var id = mapObj.getAttribute("list_item");
	var listItem = document.getElementById(id);
	listItem.style.color = "#00FF00";
	listItem.style.fontSize = "14px";
	listItem.style.textTransform = "uppercase";
}

/*--------------------------------------------------------------
	"liOut()" onmouseout effects for names in names list
--------------------------------------------------------------*/
function liOut(mapObj){
	var id = mapObj.getAttribute("list_item");
	var listItem = document.getElementById(id);
	listItem.style.color = "white";
	listItem.style.fontSize = "12px";
	listItem.style.textTransform = "";
}

/*----------------------------------------------------------
	"clearCode()" deletes inner html inside our "theCode" div.
-----------------------------------------------------------*/
function clearCode(){
		var thecode = document.getElementById("theCode");
		thecode.innerHTML = "";
}

/*----------------------------------------------------------
	"clearCycle()" Restores the page to default settings.
-----------------------------------------------------------*/
function clearCycle(){
	
	//Set reference to our "incycle"
	var cycle = document.getElementById("incycle");
	//Clear it.
	cycle.innerHTML = "";
	
	//Set reference to "theList"
	var list = document.getElementById("theList").firstChild;
	// Clear it
	list.innerHTML = "";
	
	// Reference to current name.
	var name = document.getElementById("currentName");
	//Clear it.
	name.innerHTML = "";
	
	//Clear the "get code" div.
	clearCode();
	
	//Restore default images
	document.getElementById("currentMap").firstChild.src = "images/cygenv2.gif";
	var title = document.getElementById("currentName");
	var image = document.createElement("img");
	image.setAttribute("src", "images/title.jpg");
	title.appendChild(image);
	
	
	/*
		Restore viewable state on all items in our "selection"
	*/
	//Get a reference to our selection <ul>.
	var selection = document.getElementById("selection").firstChild;
	//Get number of items in selection.
	var counter = selection.childNodes.length;
	//let's loop and restore display status to viewable on all items.
	for(var i = 0; i < counter; i++){
		//Reference to current map.
		var thisMap = selection.childNodes[i];
		//View it!!
		thisMap.style.display = "";
	}
	
}


/*--------------------------------------------------------------
	Roll over effects on "CLEAR CYCLE" and "GET CODE" buttons.
---------------------------------------------------------------*/
function rollOver(obj){
	var image = obj.getAttribute("img_name");
	var src = "images/" + image + "_hover.jpg"
	obj.firstChild.setAttribute("src", src);
}

function rollOut(obj){
		var image = obj.getAttribute("img_name");
		var src = "images/" + image + ".jpg"
		obj.firstChild.setAttribute("src", src);

}

/*---------------------------------------------
	"addControl()" Adds control to incycle map
-----------------------------------------------*/

function addControl(obj){
	/*
		Define control's top
	*/
	var controlTop = document.createElement("div");
		controlTop.className = "control_top";
	
	var makeFirst = document.createElement("img");
	//Set image parameters
	makeFirst.setAttribute("src", "control/images/make_first.gif");
	makeFirst.setAttribute("alt", "make first");
	makeFirst.setAttribute("title", "make first");
	makeFirst.setAttribute("img_name", "make_first.gif");
	//Set image events.
	makeFirst.onmouseover = function(){hover(this)};
	makeFirst.onmouseout = function (){out(this)};
	makeFirst.onclick = function(){_makeFirst(obj)};
	
	//Default to hidden display
	controlTop.style.display = "none";
	controlTop.appendChild(makeFirst);
	obj.appendChild(controlTop);
	
	
	/*
		Define control's center
	*/
	
	var controlCenter = document.createElement("div");
		controlCenter.className = "control_center";
		
	//Create images.
	var moveLeft = document.createElement("img");
	var remove = document.createElement("img");
	var moveRight = document.createElement("img");
	//Set images attributes.
	moveLeft.setAttribute("src", "control/images/move_left.gif");
	moveLeft.setAttribute("alt", "move left");
	moveLeft.setAttribute("title", "move left");
	moveLeft.setAttribute("img_name", "move_left.gif");
	remove.setAttribute("src", "control/images/delete.gif");
	remove.setAttribute("alt", "delete");
	remove.setAttribute("title", "delete");
	remove.setAttribute("img_name", "delete.gif");
	moveRight.setAttribute("src", "control/images/move_right.gif");
	moveRight.setAttribute("alt", "move right");
	moveRight.setAttribute("title", "move right");
	moveRight.setAttribute("img_name", "move_right.gif");
	//Set images events.
	moveLeft.onmouseover = function(){hover(this)};
	moveLeft.onmouseout = function(){out(this)};
	moveLeft.onclick = function(){_moveLeft(obj)};
	remove.onmouseover = function(){hover(this)};
	remove.onmouseout = function(){out(this)};
	remove.onclick = function(){putback(obj)};
	moveRight.onmouseover = function(){hover(this)};
	moveRight.onmouseout = function(){out(this)};
	moveRight.onclick = function(){_moveRight(obj)};
	
	//Default to hidden.
	controlCenter.style.display = "none";
	
	controlCenter.appendChild(moveLeft);
	controlCenter.appendChild(remove);
	controlCenter.appendChild(moveRight);
	obj.appendChild(controlCenter);
	
	
	/*
		Define control's bottom
	*/
	
	var controlBottom = document.createElement("div");
		controlBottom.className = "control_bottom";
	
	var makeLast = document.createElement("img");
	//Set img attributes.
	makeLast.setAttribute("src", "control/images/make_last.gif");
	makeLast.setAttribute("alt", "make last");
	makeLast.setAttribute("title", "make last");
	makeLast.setAttribute("img_name", "make_last.gif");
	//Set events
	makeLast.onmouseover = function(){hover(this)};
	makeLast.onmouseout = function(){out(this)};
	makeLast.onclick = function(){_makeLast(obj)};
	
	//Default to hidden
	controlBottom.style.display = "none";
	
	controlBottom.appendChild(makeLast);
	obj.appendChild(controlBottom);
}


/*----------------------------------------------------------
	hideControl() - hide control in incycle map.
	showControl() - show control in incycle map.
-----------------------------------------------------------*/

function hideControl(obj){
	var length = obj.childNodes.length;
		for(var i = 0; i < length; i++){
		obj.childNodes[i].style.display = "none";
		}

	}
	
	
function showControl(obj){
	var length = obj.childNodes.length;
		for(var i = 0; i < length; i++){
		obj.childNodes[i].style.display = "";
	}
}

/*----------------------------------------------------------
	Control's images hover and mouseout effects.
	"hover()"
	"out()"
	"outEvent()"
-----------------------------------------------------------*/

	function hover(obj){
		var name = obj.getAttribute("img_name");
		obj.src = "control/images/hover/" + name;
		obj.style.cursor = "pointer";
	}
	
	function out(obj){
		var name = obj.getAttribute("img_name");
		obj.src = "control/images/" + name;
		obj.style.cursor = "default";
	}

function outEvent(mapObj){
	//HOver effects on names list.
	liOut(mapObj);
	
	//hide control
	hideControl(mapObj);
}

/*----------------------------------------- 
	Control functionality - "_makeFirst()"
------------------------------------------*/

function _makeFirst(obj){
	
		//GEt a reference to the object that created this object.
		var mapId = obj.getAttribute("map_id");
		var ancestor = document.getElementById(mapId);
		
		//make a copy of clicked map.
		var clickedMap = obj;
		
		//Reaasign obj, to match the ancestor for the code to build
		// the map to work.
		obj = ancestor;
		
		
		//Where will we add our new map? (parent)
		var mapcycle = document.getElementById("incycle");
		//Create a new span element to house the background image of the selected map.
		var newSpan = document.createElement("div");
		//Retrieve the selection object id and assing it to "map_id" attribute for reference.
		var map_id = obj.getAttribute("id");
		//Set the map_id attribute, referece back to the original img and attributes.
		newSpan.setAttribute("map_id", map_id);
		//Retrieve selection map id number
		var number = map_id.substr(3);
		//Set up the list_item attribute.
		var list_item = "list_item" + number;
		//Set our list_item attribute.
		newSpan.setAttribute("list_item", list_item);
		//Get the map name
		var mapName = obj.getAttribute("map_name");
		//Set our map_name attribute.
		newSpan.setAttribute("map_name", mapName);
		 //build our id attribute
		//Get our mapcode attribute
		var mapCode = obj.getAttribute("map_code");
		//set our mapcode attribute
		newSpan.setAttribute("map_code", mapCode);
		
		/*
			Set up the background image on the div.
		*/
		//Retrive the attribute map_code
		var theCode = obj.getAttribute("map_code");
		//And parse it to retrive file name.
		var fileName = theCode.substr(3);
		//Build our background path.
		var thumbnail = "images/thumbnails/" + fileName + ".jpg";
		//Assign the bgImage to our div.
		newSpan.style.backgroundImage = "url(" + thumbnail + ")";
		//Set class
		newSpan.className = "incycleMap";
	
		/*
			Retrive info to add events.
		*/
		//add Event onclick
		//newSpan.onclick = function(){putback(newSpan)};
		//add Even onmouseover
		newSpan.onmouseover = function(){showMapIncycle(obj, newSpan)};
		//add Event onmouseout
		newSpan.onmouseout = function (){outEvent(newSpan)};
		
		//Add control.
		addControl(newSpan);
		
				
		/*
			This line makes it go first.
		*/
		var firstItem = mapcycle.firstChild;
		mapcycle.insertBefore(newSpan, firstItem);
		
		//Delete the item clicked.
		clickedMap.parentNode.removeChild(clickedMap);
		
		
		//Clear code
		clearCode();
		
		//Rebuild the names list.
		updateList();
}

/*----------------------------------------- 
	Control functionality - "_makeLast()"
------------------------------------------*/

function _makeLast(obj){
	
		//GEt a reference to the object that created this object.
		var mapId = obj.getAttribute("map_id");
		var ancestor = document.getElementById(mapId);
		
		//make a copy of clicked map.
		var clickedMap = obj;
		
		//Reaasign obj, to match the ancestor for the code to build
		// the map to work.
		obj = ancestor;
		
		
		//Where will we add our new map? (parent)
		var mapcycle = document.getElementById("incycle");
		//Create a new span element to house the background image of the selected map.
		var newSpan = document.createElement("div");
		//Retrieve the selection object id and assing it to "map_id" attribute for reference.
		var map_id = obj.getAttribute("id");
		//Set the map_id attribute, referece back to the original img and attributes.
		newSpan.setAttribute("map_id", map_id);
		//Retrieve selection map id number
		var number = map_id.substr(3);
		//Set up the list_item attribute.
		var list_item = "list_item" + number;
		//Set our list_item attribute.
		newSpan.setAttribute("list_item", list_item);
		//Get the map name
		var mapName = obj.getAttribute("map_name");
		//Set our map_name attribute.
		newSpan.setAttribute("map_name", mapName);
		 //build our id attribute
		//Get our mapcode attribute
		var mapCode = obj.getAttribute("map_code");
		//set our mapcode attribute
		newSpan.setAttribute("map_code", mapCode);
		
		/*
			Set up the background image on the div.
		*/
		//Retrive the attribute map_code
		var theCode = obj.getAttribute("map_code");
		//And parse it to retrive file name.
		var fileName = theCode.substr(3);
		//Build our background path.
		var thumbnail = "images/thumbnails/" + fileName + ".jpg";
		//Assign the bgImage to our div.
		newSpan.style.backgroundImage = "url(" + thumbnail + ")";
		//Set class
		newSpan.className = "incycleMap";
	
		/*
			Retrive info to add events.
		*/
		//add Event onclick
		//newSpan.onclick = function(){putback(newSpan)};
		//add Even onmouseover
		newSpan.onmouseover = function(){showMapIncycle(obj, newSpan)};
		//add Event onmouseout
		newSpan.onmouseout = function (){outEvent(newSpan)};
		
		//Add control.
		addControl(newSpan);
		
				
		/*
			This line makes it go last
		*/
		mapcycle.appendChild(newSpan);
		
		//Delete the item clicked.
		clickedMap.parentNode.removeChild(clickedMap);
		
		
		//Clear code.
		clearCode();
		
		//Rebuild the list.
		updateList();
}


/*----------------------------------------- 
	Control functionality - "_moveLeft()"
------------------------------------------*/

function _moveLeft(obj){
		//If the obj is not it's parent's first child do everything.
		if(obj != obj.parentNode.firstChild){
		//GEt a reference to the object that created this object.
		var mapId = obj.getAttribute("map_id");
		var ancestor = document.getElementById(mapId);
		
		//make a copy of clicked map.
		var clickedMap = obj;
		
		//Reaasign obj, to match the ancestor for the code to build
		// the map to work.
		obj = ancestor;
		
		
		//Where will we add our new map? (parent)
		var mapcycle = document.getElementById("incycle");
		//Create a new span element to house the background image of the selected map.
		var newSpan = document.createElement("div");
		//Retrieve the selection object id and assing it to "map_id" attribute for reference.
		var map_id = obj.getAttribute("id");
		//Set the map_id attribute, referece back to the original img and attributes.
		newSpan.setAttribute("map_id", map_id);
		//Retrieve selection map id number
		var number = map_id.substr(3);
		//Set up the list_item attribute.
		var list_item = "list_item" + number;
		//Set our list_item attribute.
		newSpan.setAttribute("list_item", list_item);
		//Get the map name
		var mapName = obj.getAttribute("map_name");
		//Set our map_name attribute.
		newSpan.setAttribute("map_name", mapName);
		 //build our id attribute
		//Get our mapcode attribute
		var mapCode = obj.getAttribute("map_code");
		//set our mapcode attribute
		newSpan.setAttribute("map_code", mapCode);
		
		/*
			Set up the background image on the div.
		*/
		//Retrive the attribute map_code
		var theCode = obj.getAttribute("map_code");
		//And parse it to retrive file name.
		var fileName = theCode.substr(3);
		//Build our background path.
		var thumbnail = "images/thumbnails/" + fileName + ".jpg";
		//Assign the bgImage to our div.
		newSpan.style.backgroundImage = "url(" + thumbnail + ")";
		//Set class
		newSpan.className = "incycleMap";
	
		/*
			Retrive info to add events.
		*/
		//add Event onclick
		//newSpan.onclick = function(){putback(newSpan)};
		//add Even onmouseover
		newSpan.onmouseover = function(){showMapIncycle(obj, newSpan)};
		//add Event onmouseout
		newSpan.onmouseout = function (){outEvent(newSpan)};
		
		//Add control.
		addControl(newSpan);
		
				
		/*
			This line makes it move left
		*/
		
		var toLeft = clickedMap.previousSibling;
		mapcycle.insertBefore(newSpan, toLeft);
		
		//Delete the item clicked.
		clickedMap.parentNode.removeChild(clickedMap);
		
		
		//Clear code
		clearCode();
		
		//Rebuild the list.
		updateList();
		
		//If the object is the first child!!!
		} else {
			//do nothing
			null;
		}
}

/*----------------------------------------- 
	Control functionality - "_moveRight()"
------------------------------------------*/

function _moveRight(obj){
		
		//If there's a nextSibling.
		if(obj.nextSibling){
		//GEt a reference to the object that created this map's next sibling.
		var mapId = obj.nextSibling.getAttribute("map_id");
		var ancestor = document.getElementById(mapId);
		
		//make a copy of clicked map.
		var clickedMap = obj;
		
		//Reaasign obj, to match the ancestor for the code to build
		// the map to work.
		obj = ancestor;
		
		
		//Where will we add our new map? (parent)
		var mapcycle = document.getElementById("incycle");
		//Create a new span element to house the background image of the selected map.
		var newSpan = document.createElement("div");
		//Retrieve the selection object id and assing it to "map_id" attribute for reference.
		var map_id = obj.getAttribute("id");
		//Set the map_id attribute, referece back to the original img and attributes.
		newSpan.setAttribute("map_id", map_id);
		//Retrieve selection map id number
		var number = map_id.substr(3);
		//Set up the list_item attribute.
		var list_item = "list_item" + number;
		//Set our list_item attribute.
		newSpan.setAttribute("list_item", list_item);
		//Get the map name
		var mapName = obj.getAttribute("map_name");
		//Set our map_name attribute.
		newSpan.setAttribute("map_name", mapName);
		 //build our id attribute
		//Get our mapcode attribute
		var mapCode = obj.getAttribute("map_code");
		//set our mapcode attribute
		newSpan.setAttribute("map_code", mapCode);
		
		/*
			Set up the background image on the div.
		*/
		//Retrive the attribute map_code
		var theCode = obj.getAttribute("map_code");
		//And parse it to retrive file name.
		var fileName = theCode.substr(3);
		//Build our background path.
		var thumbnail = "images/thumbnails/" + fileName + ".jpg";
		//Assign the bgImage to our div.
		newSpan.style.backgroundImage = "url(" + thumbnail + ")";
		//Set class
		newSpan.className = "incycleMap";
	
		/*
			Retrive info to add events.
		*/
		//add Event onclick
		//newSpan.onclick = function(){putback(newSpan)};
		//add Even onmouseover
		newSpan.onmouseover = function(){showMapIncycle(obj, newSpan)};
		//add Event onmouseout
		newSpan.onmouseout = function (){outEvent(newSpan)};
		
		//Add control.
		addControl(newSpan);
		
				
		/*
			This line makes it move right
		*/
		mapcycle.insertBefore(newSpan, clickedMap);
		
		//Delete the clicked map's next sibling. (which is the one that actually moves.)
		clickedMap.parentNode.removeChild(clickedMap.nextSibling);
		
		
		//Clear code
		clearCode();
		
		//Rebuild the list.
		updateList();
		
		//If there is no next sibling. meaning map is last map.
		} else {
			//Do nothing
			null;
		}
}