function showPic(pathToNewPic, callingObject){

		theCurrentID = callingObject.parentNode.parentNode.getAttribute('id');		

		displayer = document.createElement('div');
		displayer.setAttribute('id', 'displayer');

		displayerElm = document.createElement('p');
		displayerEmph = document.createElement('strong');
		displayerText = document.createTextNode('Template '+theCurrentID+' by Basementia Design');
		
		displayerEmph.appendChild(displayerText);
		displayerElm.appendChild(displayerEmph);
		
		displayer.appendChild(displayerElm);
		
		
		theDisplay = document.createElement('img');
		theDisplay.setAttribute('src', pathToNewPic);
		
		pictureObject = new Image();//because reading the height of the picture as an html element does not seem to be working
		pictureObject.src = pathToNewPic;
		pictureHeight = pictureObject.height;

		theDisplay.setAttribute('title', 'Template #'+theCurrentID+' by Basementia Design');
		
		displayer.appendChild(theDisplay);
		document.getElementsByTagName('body')[0].appendChild(displayer);
		
		
			//pictureHeight = theDisplay.height;
			
			if(pictureHeight == 0){
				pictureHeight = 400;
			}
			
		
			var leftSideMargin = findPosX(callingObject);
			
			objW = callingObject.offsetWidth;
			newPosSide = leftSideMargin + objW;
			//alert('left: '+newPosSide);
			var w;
			if(window.innerWidth){
			w = window.innerWidth;//for most browsers
			//note that firefox counts scroll bar as part of the width
			}else{
			w = document.body.clientWidth;//for internet explorer
			//note that ie does not
			}
			//alert('browser width shows as '+w);
			if(w - newPosSide < 500){
				newPosSide = leftSideMargin - 550;//because the pics are 450px w + padding
				if(newPosSide < 0){
					newPosSide = 0;
				}
			}
			//alert('now newPosSide is '+newPosSide);
			
	
			var topMargin = findPosY(callingObject);
			if(topMargin < 0){newPosTop = 0;}else{
			
			newPosTop = topMargin - 15;
			}
			var h;
			if(window.innerHeight){//most browsers
				h = window.innerHeight;
				/*
				if(pictureHeight == 0){
				alert('changing height');
					theImage = new Image();
					theImage.src = pathToNewPic;
					pictureHeight = theImage.height;
				alert(pictureHeight);	
				}
				*/
				
				displayerSize = pictureHeight + 65 + 15;//incl padding of 30px ea top/btm and the line of text with its padding
				
				totalOffset = newPosTop + displayerSize;
				if( totalOffset > h	){
					displayDifference = h - displayerSize;					
					newPosTop = displayDifference/2;//because i don't want it all the way @ the bottom of the screen

					//halfTheDisplayer = displayerSize/2;
					
					if(newPosTop < 0){newPosTop = 0;}//alert(newPosTop);}// = 0;}
				}
				
					
			
			
			}else{//ie
			h = callingObject.top;
			//h = document.body.clientHeight;
			}
			
			//doH = displayer.offsetHeight;
			
			//
			//alert('now newPosTop is '+newPosTop);



		//this really is necessary.  
		if(navigator.appName == "Microsoft Internet Explorer"){
			var browserPosition = 'absolute';
		}else{//other browsers		
			var browserPosition = 'fixed';
		}
		
			var positioningCSS = new Array('position: '+browserPosition+';','margin-top:'+newPosTop+'px;', 'margin-left:'+newPosSide+'px;');
			changeRule('#displayer', positioningCSS);
	

		
	}
		
		/*if(pictureHeight == 0){
		
		}*/
		
		
/*
		theDisplay = new Image();
		theDisplay.src = pathToNewPic;



		
		var thePicture = getImage(theDisplay);
		pictureHeight = thePicture.height;

*/		
		//
		
		/*
		if(getElementHeight()){
		pictureHeight = getElementHeight(theDisplay);
		}else{
		var thePicture = getImage();
		pictureHeight = 
		}
		*/
		
		//alert(pictureHeight);
		
		
		
			


function removePic(){
	demolition = document.getElementById('displayer');
	if(demolition){
		demolition.parentNode.removeChild(demolition);
	}
}

function readyTemplates(data){
	var preloaders = new Array();
	var pln = 0;//preLoadNumber
	var templates = document.getElementById('templates');
	var temPics = templates.getElementsByTagName('img');
	for(i=0; i<temPics.length; i++){
		theCurrentOne = temPics[i];
		theCurrentID = theCurrentOne.parentNode.parentNode.getAttribute('id');
		allTheNodes = data.getElementsByTagName('item');
		
		for(j=0;j<allTheNodes.length; j++){
			checking = allTheNodes[j].getAttribute('id');
			if(checking == theCurrentID){
				theCorrespondingNode = allTheNodes[j];
				relevantRolloverPicture = theCorrespondingNode.getElementsByTagName('fullsize')[0].firstChild.nodeValue;
				setupRollOver(theCurrentOne, relevantRolloverPicture);
				preloaders[pln]=relevantRolloverPicture;
				pln++;
			}
		}
	}
	/*  this bit is the PRE-loader  */





	var allTheImages = new Array();
	for(k=0;k<preloaders.length;k++){
		allTheImages[k] = new Image();
		allTheImages[k].src = preloaders[k];
	}
}


function setupRollOver(currentObject, pathToNewPic){
	currentObject.onmouseover = function(){
		showPic(pathToNewPic, currentObject);
	}
	currentObject.onmouseout = function(){
		removePic();
	}

}

myXhr={
doIt:function(container,url){
var container = "templates";
var url = "includes/templates.xml";
  	if(!document.getElementById || !document.createTextNode){return;}
    myXhr.outputContainer=document.getElementById(container);
    if(!myXhr.outputContainer){return;}
    var request;
    try{
      request = new XMLHttpRequest();
    }catch(error){
      try{
        request = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(error){
        return true;
      }
    }
	var thereIsATextNode = false;
    request.open('get',url,true);
    request.onreadystatechange=function(){
      if(request.readyState == 1){
        newP = document.createElement('p');
		newP.appendChild(document.createTextNode('Loading...'));
		myXhr.outputContainer.appendChild(newP);
		thereIsATextNode = true;
      }
      if(request.readyState == 4){
        if(request.status && /200|304/.test(request.status)){
        
   
    //		alert('retrieved!');
	if(thereIsATextNode){
	 myXhr.outputContainer.removeChild(newP);//that was our loading message, above
	}	 
	 myXhr.data = request.responseXML;//data returns the entire XML page

    // 	alert(data);

		
		readyTemplates(myXhr.data);
     
	          
	     
        }else{
        myXhr.failed(request);
        }
      }//end readyState==4
    }//end onreadystatechange
    request.setRequestHeader('If-Modified-Since','Wed, 05 Apr 2006 00:00:00 GMT');
    request.send(null);
    return false;
  },//end doIt



failed:function(request){
alert("The XMLHttpRequest failed.  Status: "+requester.status);
return true;//because it failed
},


cancelClick:function(e){//so we use ajax instead of re-loading the page
if(!e){var e = window.event;}//some browers have a predefined e for event
	//first the IE version
	e.cancelBubble = true;
	e.returnValue = false;

	//other browsers
	if (e.stopPropagation) {
		e.stopPropagation();
		if(e.preventDefault){
			e.preventDefault();
		}
	}

//alert('cancelicious');
return false;
} 



}//end myXhr

addEvent(window, 'load', myXhr.doIt, false);

/* 
find position by Peter-Paul Koch & Alex Tingle.
http://blog.firetree.net/2005/07/04/javascript-find-position/
*/

function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }
  
 //based on changeRule courtesy of guvenck on codingforums.com 
	function changeRule(selector, ruleArray) {
		var countSheets = document.styleSheets.length;
		var newSheetNumber = countSheets - 1;//because countSheets starts at 1 whereas document.styleSheets[] starts at 0-- and we're not creating a new sheet we're appending to the last one
		var sheet = document.styleSheets[newSheetNumber];
		if (sheet.insertRule) { // firefox
			var rule = '';
			for(i=0; i<ruleArray.length; i++) {
				rule += ruleArray[i];
				rule += ' ';
			}
			//alert(rule);// + ' ' + sheet.cssRules.length
			sheet.insertRule(""+selector+" { "+rule+" }", sheet.cssRules.length);//
		}
		else if(sheet.addRule) { // ie
			//alert('microsoft will find you');
			var rule = '';
			for(i=0; i<ruleArray.length; i++) {
				sheet.addRule(selector, ruleArray[i]);
			}
		}
	}