function toggleWidget(id) {
	var element = document.getElementById(id);
	if (element.style.visibility=="hidden" || element.style.visibility=="")
		element.style.visibility="visible";
	else
	{	
		if (element.style.visibility=="visible")
			element.style.visibility="hidden";
	}
	return true;
}

function overlayFeed() {
	// given the location of the bannerimage,
	// put the feed overlay graphic on the bottom of the banner?
	
	// let's make a feed overlay
	var feedDiv = document.createElement('div');
	
	// for placement, I want to know where the banner image is?
	var bannerDiv = document.getElementById('banner');
	var posx = findPosX(bannerDiv);
	var posy = findPosY(bannerDiv)+bannerDiv.offsetHeight-21;
	
	// sometimes the posY doesn't get set properly (ti ends up at the top of the banner
	// how do i fix this?
	// for now, if it wants to appear at the top, don't display!
	if (posy < 300 || bannerDiv.clientHeight==0 || bannerDiv.offsetHeight ==0)
		posy = findPosY(bannerDiv) + 236 - 21;
		//return false;
		
	// assign some attributes / style to this overlay (we'll push this to CSS later)
	feedDiv.id = 'feedOverlay';
	feedDiv.className = 'bannerOverlay';
	feedDiv.style.zIndex = 1;
	feedDiv.style.backgroundColor='black';
	feedDiv.style.border='1px solid white';
	feedDiv.style.opacity=0.8;
	feedDiv.style.filter='alpha(opacity=80)';	
	feedDiv.style.position='absolute';
	feedDiv.style.left=posx+'px';
	feedDiv.style.top=posy+'px';
	feedDiv.style.width='100px';
	feedDiv.style.padding='1px';
	feedDiv.style.height='18px';
	feedDiv.style.color='white';
	feedDiv.style.fontWeight='bold';
	feedDiv.style.textTransform='uppercase';
	feedDiv.style.textAlign='center';
	
	var myP = document.createElement('p');
	var myAnchor = document.createElement('a');
	myAnchor.id='feed-fire';
	myAnchor.onclick=open_feed;
	myAnchor.color='white';
	var arrowImg = document.createElement('img');
	arrowImg.src = '/images/feed-arrow.gif';
	arrowImg.alt = '';
	arrowImg.style.verticalAlign='middle';
	arrowImg.style.paddingRight='5px';
	var someText = document.createTextNode('data feed');
	myP.style.color='white';
	myP.style.fontWeight='bold';
	myP.style.fontSize='0.8em';
	myP.style.textTransform='uppercase';	
	myP.style.opacity=1;	
	myP.style.textAlign='center';
	myP.style.zIndex = 2;
	myP.style.paddingTop='2px';
	
	myAnchor.appendChild(arrowImg);
	myAnchor.appendChild(someText);
	myP.appendChild(myAnchor);
	feedDiv.appendChild(myP);
	// place the feed!
	bannerDiv.appendChild(feedDiv);
}

function open_feed()
{
	// todo - how do we do this? ajax rss parse? can i return that as json or xml?
	
	var content = '';
	var folder = '';
	// for now, let's just make a popupDiv
	// let's make a div
	var bannerDiv = document.getElementById('banner');
	var posx = findPosX(bannerDiv);	
	var posy = findPosY(bannerDiv)+bannerDiv.clientHeight;	
	// sometimes the posY doesn't get set properly (ti ends up at the top of the banner
	// how do i fix this?
	// for now, if it wants to appear at the top, don't display!
	if (posy < 300 || bannerDiv.clientHeight==0 || bannerDiv.offsetHeight ==0)
		posy = findPosY(bannerDiv) + 236 - 21;
		//return false;
	var popupDiv = document.createElement('div');
	popupDiv.id = 'popupDiv';
	popupDiv.style.backgroundColor='black';
	popupDiv.style.opacity='0.8';
	popupDiv.style.filter='alpha(opacity=80)';	
	popupDiv.style.position='absolute';
	popupDiv.style.left=posx+'px';
	// this works in firefox
	popupDiv.style.top=(posy-125)+'px';
	// i think we need -100 in IE
	// != 'Netscape'
	// alert(navigator.appName);
	if (navigator.appName != 'Netscape')
	{
		popupDiv.style.top=(posy-104)+'px';		
	}
	popupDiv.style.width='400px';
	popupDiv.style.padding='2px';
	popupDiv.style.height='100px';
	popupDiv.style.zIndex=1;
	
	var myP = document.createElement('p');
	var myAnchor = document.createElement('a');
	myAnchor.style.color='white';	
	myAnchor.onclick=close_feed;
	var someText2 = document.createTextNode('[ X ] Close');
	myP.style.color='white';
	myP.style.fontWeight='bold';
	myP.style.fontSize='0.8em';
	myP.style.textTransform='uppercase';	
	myP.style.opacity=1;	
	myP.style.textAlign='right';
	myP.style.zIndex = 2;
	myP.style.paddingTop='2px';
	myP.style.paddingBottom=0;
	myP.style.marginBottom=0;
	
	myAnchor.appendChild(someText2)
	myP.appendChild(myAnchor);
	popupDiv.appendChild(myP);

	var feedfire = document.getElementById('feed-fire');
	feedfire.onclick = ''; // remove the event;
	// let's make an ajax call to grab-rss
	// this call will populate the popupDiv with rss data
	send_rss_request(content,folder);

	bannerDiv.appendChild(popupDiv);
	return true;
}

function close_feed()
{
	// flush all the items underneath id
	var node = document.getElementById('banner');
	for (var i = 3; i < node.childNodes.length; i++)
		node.removeChild(node.childNodes[i]);
	var feedfire = document.getElementById('feed-fire');
	feedfire.onclick = open_feed; // restore the event;		
	return true;
}

// from http://blog.firetree.net/2005/07/04/javascript-find-position/
  function findPosX(obj)
  {
 	if (!obj)
		return 0;
    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)
  {
  	if (!obj)
		return 0; 
    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;
  }

// we're passing the width / height to identify true aspect ratio
function setFeatured(imgId,width,height)
{
	var baseImg = document.getElementById(imgId);
	var newImg = document.createElement('img');
	newImg.src = baseImg.src;
	newImg.alt ="";
	// resize the image
	newImg.style.padding=0;
	newImg.width=300;
	newImg.height=parseInt(newImg.width*height/width);
	if (newImg.height >= 200) // still too big?
	{
		newImg.height=200;
		newImg.width=parseInt(newImg.height*width/height);
	}
	// newImg.height=200;
	// newImg.width=parseInt(newImg.height*width / height);
	// if (newImg.width >= 300) // still too big?
	// {
		// newImg.width=300;
		// newImg.height=parseInt(newImg.width*height/width);
	// }
	// let's flush the featured image div
	// and stick our new image instead
	flush('project-image');
	var featureDiv = document.getElementById('project-image');
	featureDiv.style.textAlign='center';
	featureDiv.appendChild(newImg);
}

function collapseTeamBox() {
	var obj = document.getElementById('team-scroll-box');
	obj.style.display = 'none';
	var img = document.getElementById('team-toggle-image');
	img.src='/images/plus.gif';
	img.title='click to expand';
	img.onclick=expandTeamBox;
	return false;
}

function expandTeamBox() {
	var obj = document.getElementById('team-scroll-box');
	obj.style.display = 'block';
	var img = document.getElementById('team-toggle-image');
	img.src='/images/minus.gif';
	img.title='click to expand';
	img.onclick=collapseTeamBox;
	return false;
}

function collapseSponsorBox() {
	var obj = document.getElementById('sponsor-scroll-box');
	obj.style.display = 'none';
	var img = document.getElementById('sponsor-toggle-image');
	img.src='/images/plus.gif';
	img.title='click to expand';
	img.onclick=expandSponsorBox;
	return false;
}

function expandSponsorBox() {
	var obj = document.getElementById('sponsor-scroll-box');
	obj.style.display = 'block';
	var img = document.getElementById('sponsor-toggle-image');
	img.src='/images/minus.gif';
	img.title='click to expand';
	img.onclick=collapseSponsorBox;
	return false;
}

function collapseGroupBox() {
	var obj = document.getElementById('group-scroll-box');
	obj.style.display = 'none';
	var img = document.getElementById('group-toggle-image');
	img.src='/images/plus.gif';
	img.title='click to expand';
	img.onclick=expandGroupBox;
	return false;
}

function expandGroupBox() {
	var obj = document.getElementById('group-scroll-box');
	obj.style.display = 'block';
	var img = document.getElementById('group-toggle-image');
	img.src='/images/minus.gif';
	img.title='click to expand';
	img.onclick=collapseGroupBox;
	return false;
}

function collapsePartnerBox() {
	var obj = document.getElementById('partner-scroll-box');
	obj.style.display = 'none';
	var img = document.getElementById('partner-toggle-image');
	img.src='/images/plus.gif';
	img.title='click to expand';
	img.onclick=expandPartnerBox;
	return false;
}

function expandPartnerBox() {
	var obj = document.getElementById('partner-scroll-box');
	obj.style.display = 'block';
	var img = document.getElementById('partner-toggle-image');
	img.src='/images/minus.gif';
	img.title='click to expand';
	img.onclick=collapsePartnerBox;
	return false;
}

function toggleBox(id, imgButton) {
	// if we do this based on state, it works much better
	var obj = document.getElementById(id);
	var img = document.getElementById(imgButton);
	if (obj.style.display == 'block' || obj.style.display == '')
	{
		obj.style.display = 'none';
		img.src='/images/plus.gif';
		img.alt='click to expand';
		img.title='click to expand';
	}	
	else
	{
		obj.style.display = 'block';
		img.src='/images/minus.gif';
		img.alt='click to collapse';
		img.title='click to collapse';
	}
}