var lessonList = new Array();
function addBox(id, title, content, left, top, width, height,showInBar)
{
	var main = x_getObj("main-div");
	var main2 = x_getObj("epicBar");
	var div = document.createElement( 'div' );
	var Close = makeCloseButton(id,showInBar);

	var div2 = document.createElement( 'div' );
	var button = "<a href='#' class='max' onclick = \"x_getObj('"+id+"').style.display = 'block';x_getObj('nullHidden').appendChild(x_getObj('"+id+"mini'));\">";
	
	div.id = id;
	div.style.width = width;
	div.style.height = height;
	div.style.left = left;
	div.style.top = top;
	div.innerHTML = Close + content;
	div.className = 'window';
	main.appendChild(div);
	
	div2.id = id+"mini";
	div2.className = 'miniepic';
	div2.innerHTML = "<span>" +  button + title +"</span>";
	x_getObj("nullHidden").appendChild(div2);
}
function addLesson(id,Name, link1, link2,description,lessontext)
{
	lessonList[lessonList.length] = id;
	//<a onmousedown="changeDescription('insideLessonDiv','<a href=document/z_level1_Olympic_park>-->Proceed to lesson</a>',0,'',0)" target="map_box" href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=102534202685428968394.000475871f08fed0498f3&amp;ll=39.996849,116.393623&amp;spn=0.037808,0.094414&amp;z=14&amp;output=embed">Olympic Park</a>
	theString = "";
	theString = "<li><a id="+id+" onclick=\"";
	theString += "changeDescription('insideLessonDiv','"+description+"',0,0,0);clearLessons();";
	theString += "changeDescription('"+id+"under','<a href="+link2+">"+lessontext+"</a>',0,0,0)\"";
	theString += "target = 'map_box' href='"+link1+"'>"+Name+"</a><div id='"+id+"under'></div></li>";
return  theString;
}
function changeDescription(id,content,doFade,fadeID,addX)
{
	var box = x_getObj(id);
	var Close = makeCloseButton(id,1);
	if(addX !=1)
	{
		Close="";
	}
	box.innerHTML = Close + content;
	if(doFade)
	{
		startFade(fadeID +"mini","#FFFFFF","#33AAFF");
	}
	
}
function startFade(id,startColor,endColor)
{
	var steps = 60;
	startColor = startColor.substring(1);
	redStart = parseInt(startColor.substring(0,2),16);   //convert from hex to decimal
	greenStart = parseInt(startColor.substring(2,4),16);
	blueStart = parseInt(startColor.substring(4,6),16);
	
	endColor = endColor.substring(1);
	redEnd = parseInt(endColor.substring(0,2),16);
	greenEnd = parseInt(endColor.substring(2,4),16);
	blueEnd = parseInt(endColor.substring(4,6),16);
	dirR = redStart<redEnd;
	dirG = greenStart<greenEnd;
	dirB = blueStart<blueEnd;
	redStep = (redEnd-redStart)/steps;
	greenStep = (greenEnd - greenStart)/steps;
	blueStep = (blueEnd - blueStart)/steps;
	//theID = x_getObj(id);
	
	fadeColor(id,startColor,endColor,redStep,greenStep,blueStep,0,0,0,dirR,dirG,dirB,100);
	
}
function clearLessons()
{
	for(i=0;i<lessonList.length;i++)
	{
		changeDescription(lessonList[i]+'under','',0,0,0);
	}
}
function fadeColor(id,color,endcolor,incrementR,incrementG,incrementB,errorR,errorB,errorG,dirR,dirG,dirB,timeout)
{
	theId = x_getObj(id);
	red= parseInt(color.substring(0,2),16);   //convert from hex to decimal
	green = parseInt(color.substring(2,4),16);
	blue= parseInt(color.substring(4,6),16);

	redEnd= parseInt(endcolor.substring(0,2),16);  
	greenEnd = parseInt(endcolor.substring(2,4),16);
	blueEnd= parseInt(endcolor.substring(4,6),16);

	if(red != redEnd)
	{
		red += Math.floor(incrementR);                 //change the red and calculate error
		errorR += incrementR - Math.floor(incrementR);
		if (Math.floor(errorR) != 0)
		{
			red += Math.floor(errorR);
			errorR -= Math.floor(errorR);
		}
		if(dirR)
		{
			if(red>redEnd)   //We Overshot
			{
				red = redEnd;
			}
		}
		else
		{
			if(red<redEnd)   //We Overshot
			{
				red = redEnd;
			}	
		}
	}
	if(green != greenEnd)
	{
		green += Math.floor(incrementG);
		errorG += incrementG - Math.floor(incrementG);    //and green
		if (Math.floor(errorG) != 0)
		{
			green += Math.floor(errorG);
			errorG -= Math.floor(errorG);
		}
		if(dirG)
		{
			if(green>greenEnd)   //We Overshot
			{
				green = greenEnd;
			}
		}
		else
		{
			if(green<greenEnd)   //We Overshot
			{
				green = greenEnd;
			}	
		}
	}

	if(blue != blueEnd)
	{
		blue += Math.floor(incrementB);
		errorB += incrementB - Math.floor(incrementB);  //now blue
		if (Math.floor(errorB) != 0)
		{
			blue += Math.floor(errorB);
			errorB -= Math.floor(errorB);
		}
		if(dirB)
		{
			if(blue>blueEnd)   //We Overshot
			{
				blue = blueEnd;
			}
		}
		else
		{
			if(blue<greenEnd)   //We Overshot
			{
				blue = blueEnd;
			}	
		}
	}
	alert
	newColor = red.toString(16) + green.toString(16) + blue.toString(16);
	theId.style.backgroundColor = "#" + newColor;
	timeout-=1;
	if(newColor.toLowerCase() != endcolor.toLowerCase())
	{
		if(timeout == 0)
		{
			alert("ERROR: COLOR FADE TIMED OUT");
			theId.style.removeProperty("background-color");
		}	
		else
		{	
			setTimeout("fadeColor('"+id+"','"+newColor+"','"+endcolor+"',"+incrementR+","+incrementG+","+incrementB+","+errorR+","+errorB+","+errorG+","+dirR+","+dirG+","+dirB+","+timeout+")",10);
			
		}
	}
	else
	{
			theId.style.removeProperty("background-color");
	}

}

function makeCloseButton(id,showInBar)
{
	code = "<a href=\"#\" onmousedown=\"x_getObj('"+id+"').style.display = 'none';";
	if(showInBar)
	{
		code += "x_getObj('epicBar').appendChild(x_getObj('"+id+"mini'));";
	}
	code +="\" ><img id='closeButton"+id+"' class=\"close_div\" src=\"/images/local/close_div.png\"  onmouseover=\"x_getObj('closeButton"+id+"').src='/images/local/close_div_mouseover.png';\" onmouseout=\"x_getObj('closeButton"+id+"').src='/images/local/close_div.png';\"/></a>";
	return code; 
}