var xmlhttp;
var siteTitle;
/*alert('hello to you!');*/

function startup(){
	setSiteTitle();
	loadContent('home.html', 'content', 'content');
}

function loadContent(url, srcID, destID){
	/*
	loads x(ht)ml from the element <sometag id=srcID> of the file specified in url, into the <sometag id=destID> of caller document
	url must be a valid XML file see http://www.w3.org/QA/2002/04/valid-dtd-list.html for valid header
	it only works with id (not with tags)
	*/
	xmlhttp=null;
	if (window.XMLHttpRequest)
		{// code for all new browsers
		xmlhttp=new XMLHttpRequest();
		xmlhttp.overrideMimeType('text/xml');
	}	else if (window.ActiveXObject)
		{// code for IE5 and IE6
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	};
	
	if (xmlhttp!=null){
		xmlhttp.onreadystatechange=function(){
			if (xmlhttp.readyState==4){// 4 = "loaded"
				if (xmlhttp.status==200){// 200 = OK
					// ...our code here...
					var newContent=xmlhttp.responseXML.getElementById(srcID).innerHTML;
					document.getElementById(destID).innerHTML = newContent;
					document.title=siteTitle + " - " + xmlhttp.responseXML.title;
				}
				else { alert("Problem retrieving XML data " + " " + xmlhttp.status + " " + url);}
			}
		}

		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);
	} else {
		alert("Your browser does not support XMLHTTP.");
	};
}

function setSiteTitle(){
	siteTitle = document.title;
}

function box(url){
	loadContent(url, 'content', 'boxContent');
	showBox();
}

/*code from http://www.pjhyett.com/posts/190-the-lightbox-effect-without-lightbox
with a little editing*/
/*functions to manage the "popup" box

requires the following html in your page

<div id="box" style="display:none">
    <img id="close" src="/img/close.gif" onclick="hideBox()" alt="Close" 
         title="Close this window" />
    <div id="boxContent">
	</div>
</div>

and the following CSS

#box{
    width: 600px;
    background: white;
    padding: 10px;
    border: 2px solid black;
}

#close{
    position:absolute;
    top:0px;
    right:0px;
    cursor:pointer;
}

it requires prototype javascript library

the three functions are showBox(), hideBox()
trey are the only ones you will use, 
while center() is called from showBox
to actually do the work of setting up and unhiding the box

*/
function showBox(){
	//for the box to show bottom right if it doesn't work put the style thigs in your CSS
	//$('box').style.bottom=0px;
    //$('box').style.right=0px;
	//$('box').show();
	
	
	center('box'); //for the box to show centered
    return false;
}

function hideBox(){
    $('box').hide();
    return false;
}

function center(element){
    try{
        element = $(element);
    }catch(e){
        return;
    }

    var my_width  = 0;
    var my_height = 0;

    if ( typeof( window.innerWidth ) == 'number' ){
        my_width  = window.innerWidth;
        my_height = window.innerHeight;
    } else if ( document.documentElement && 
             ( document.documentElement.clientWidth ||
               document.documentElement.clientHeight ) ){
        my_width  = document.documentElement.clientWidth;
        my_height = document.documentElement.clientHeight;
    }
    else if ( document.body && 
            ( document.body.clientWidth || document.body.clientHeight ) ){
        my_width  = document.body.clientWidth;
        my_height = document.body.clientHeight;
    }

    element.style.position = 'absolute';
    element.style.zIndex   = 99;

    var scrollY = 0;

    if ( document.documentElement && document.documentElement.scrollTop ){
        scrollY = document.documentElement.scrollTop;
    }else if ( document.body && document.body.scrollTop ){
        scrollY = document.body.scrollTop;
    }else if ( window.pageYOffset ){
        scrollY = window.pageYOffset;
    }else if ( window.scrollY ){
        scrollY = window.scrollY;
    }

    var elementDimensions = Element.getDimensions(element);

    var setX = ( my_width  - elementDimensions.width  ) / 2;
    var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;

    setX = ( setX < 0 ) ? 0 : setX;
    setY = ( setY < 0 ) ? 0 : setY;

    element.style.left = setX + "px";
    element.style.top  = setY + "px";

    element.style.display  = 'block';
}

/*function to get mouse coordinates */
document.onmousemove=getMouseCoordinates;
var mouseX, mouseY;

function getMouseCoordinates(event){
	ev = event || window.event;
	mouseX = ev.pageX;
	mouseY = ev.pageY;
}

//returns a string with x,y format describing a point clicked on an image, not sure it works with other objects
function imgClickedAt(event){
	var point = '';
	eventObj = (e) ? e : event;
	point = eventObj.offsetX;
	point = point + "," + eventObj.offsetY;
	return point;
}

/*tries to show the "element"  with top left cornet at mousepinter
A lot of debugging to do!!*/
function mousePop(element, top, left){
	try{
        element = $(element);
    }catch(e){
        return;
    }
	
	var my_width  = 0;
    var my_height = 0;
	
	if ( typeof( window.innerWidth ) == 'number' ){
        my_width  = window.innerWidth;
        my_height = window.innerHeight;
    } else if ( document.documentElement && 
             ( document.documentElement.clientWidth ||
               document.documentElement.clientHeight ) ){
        my_width  = document.documentElement.clientWidth;
        my_height = document.documentElement.clientHeight;
    }
    else if ( document.body && 
            ( document.body.clientWidth || document.body.clientHeight ) ){
        my_width  = document.body.clientWidth;
        my_height = document.body.clientHeight;
    }
	
	element.style.position = 'absolute';
    element.style.zIndex   = 99;
	
	var elementDimensions = Element.getDimensions(element);
	
	if (my_width  > left + elementDimensions.width){
		element.style.left = left;
	}else{
		alert("oversize X");
		element.style.right = 0 + "px";
		
	}
	
	if (my_height  > top + elementDimensions.height){
		element.style.top  = top;
	}else{
		alert("oversize Y");
		element.style.bottom  = 0 + "px";
		
	}
	
    element.style.display  = 'block';
}