Array.prototype.find = function (element) 
{
  for (var keys in this) 
  {
    if (this[keys][0] == element) 
    {
      return keys;
      break;
    }  
  }
  return -1;
};

Array.prototype.in_array = function (obj) {
	var len = this.length;
	for ( var x = 0 ; x < len ; x++ ) {
		if ( this[x][0] == obj ) return true;
	}
	return false;
}

function getStyle(el, styleProp)
{
	// get value of style property of element, crossbrowser
	var y = '';
	var x = document.getElementById(el);
	x = el;
	if (x && x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (x && window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;
}

function collapseRow (key)
{
	theRow = expandedItems[key][1];
	//childCells = theRow.getElementsByTagName("td");
	
	theRow.innerHTML = expandedItems[key][2];
	childCells = theRow.getElementsByTagName("td");
	firstCell = childCells[0]; // contains row bullit bg img
	rowStyle = getStyle(theRow, 'display');

	firstCell.style.backgroundImage = 'url(images/rowpointer.gif)';
	
	for (var j = 0; j < childCells.length; j++)
	{
		if (cells[j].className == 'naam' || cells[j].className == 'contactpersoon')
		{
			//cells[j].addEvent('click', 'expandRow');
			cells[j].onclick = expandRow;
			link = cells[j].firstChild;
			link.removeAttribute('href');
			cells[j].style.cursor = 'pointer';
		}
	}
}

function expandRow (e)
{
	if (!e)
	{
		var e = window.event;
	}
	if (e.target) // moz
	{
		target = e.target;
	}
	else if (e.srcElement) // ie
	{
		target = e.srcElement;
	};
	
	if (target.nodeType == 3) // defeat Safari bug
	{
		target = target.parentNode;
	}

	if (target.nodeName == 'A') // if the A in TD clicked
		target = target.parentNode;
		
	if (target.nodeName == 'dd') // if the A in TD clicked
		target = target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;

	
	// initatie some references
	
	parentRow = target.parentNode;
	childCells = parentRow.getElementsByTagName("td");
	firstCell = childCells[0]; // contains row bullit bg img
	
	if (typeof activeRow == 'object')
		activeRow.className = activeRow.className.replace(/ ?rowSelected/g, '');
	
	parentRow.className += ' rowSelected';
	activeRow = parentRow;
	
	if (expandedItems.in_array(target))
	{
		// collapse or expand row if it's already created once
			
		key = expandedItems.find(target);
		theRow = expandedItems[key][1];

		if (theRow.style.display == 'none')
		{
			firstCell.style.backgroundImage = 'url(images/rowpointer_down.gif)';
			theRow.style.display = rowStyle;
		}
		else
		{
			rowStyle = getStyle(theRow, 'display');
			theRow.style.display = 'none';
			firstCell.style.backgroundImage = 'url(images/rowpointer.gif)';
		}
		
	}
	else
	{
		// expand new row
	
		parentRow = target.parentNode;
		intLidId = parentRow.id.substring(3, parentRow.id.length);
		xajax_getData(intLidId); // related function: processData()
	
	}
}


Object.prototype.addEvent = function (strAction, strFunction)
{
	// cross-browser eventlistening
	if (window.addEventListener)
	{
		this.addEventListener(strAction, eval(strFunction), false);
	}
	else if (window.attachEvent)
	{
		strAction = 'on' + strAction;
		this.attachEvent(strAction, eval(strFunction));
	}	
}

Object.prototype.removeEvent = function (strAction, strFunction)
{
	if (window.addEventListener)
	{
		this.removeEventListener(strAction, eval(strFunction), false);
	}
	else if (window.attachEvent)
	{
		strAction = 'on' + strAction;
		this.detachEvent(strAction, eval(strFunction));
	}	
}

function processData(arrMemberData)
{

		// xajax function, triggered from eventhandler (target known)
		// variables from outside function: parentRow, intLidId
		// leden array: 0: bedrijfsnaam, 1: contactpesrron. 
		
		firstCell.style.backgroundImage = 'url(images/rowpointer_down.gif)';
		
		parentTable = parentRow.parentNode;
		newRow = document.createElement("tr");
		
		newTd = document.createElement("td");
		newTd.colSpan = 3;
		newRow.appendChild(newTd);
		
		var bedrijfsnaam = arrMemberData[0];
		var omschrijving = arrMemberData[1];
		var contactpersoon = arrMemberData[2];
		var email = arrMemberData[3];
		var website = arrMemberData[4];
		
		
		
		
		
		var cells = parentRow.getElementsByTagName('td');
		for (var i2 = 0; i2 < cells.length; i2++)
		{
			if (cells[i2].className == 'naam' || cells[i2].className == 'contactpersoon')
			{
				cells[i2].removeEvent('click', 'expandRow');
			}
		}
		key = expandedItems.length;
		
		
	
		//strInnerHtml = '<div> <dl class="infosheet"> <dt>Bedrijf</dt> <dd> <dl class="bedrijf"> <dt class="naam">Naam</dt> <dd class="naam" onclick="collapseRow(' + key + ')"><span class="_hidden">' + bedrijfsnaam + '</span><img src="cms_files/Image/hoofd.jpg" width="44" height="56" alt="" /></dd> <dt>Beschrijving</dt> <dd>' + omschrijving + '</dd> </dl> </dd> <dt>Contactpersoon</dt> <dd> <dl class="conactpersoon"> <dt class="naam">naam</dt> <dd class="naam" onclick="collapseRow(' + key + ')"><span class="_hidden">' + contactpersoon + '</span><img src="cms_files/Image/hoofd.jpg" width="44" height="56" alt="" /></dd> <dt>Functie</dt> <dd class="functie">Financieel adviseur</dd> <dt>e-mail</dt><dd class="email">' + email + '</dd> <dt>website</dt> <dd class="website">' + website + '</dd> </dl> </dd> <dt class="adres">Adres</dt> <dd>blabla<br />bla<br />dwdw</dd> <dt>Van-voor leden</dt> <dd class="vanvoor"><span class="angebot">aanbieding:</span> 30% korting op ....</dd></dl></div>';
		
		strInnerHtml = '<div> <dl class="infosheet"> <dt>Bedrijf</dt> <dd> <dl class="bedrijf"> <dt class="naam">Naam</dt> <dd class="naam" id="head1"><span class="_hidden">' + bedrijfsnaam + '</span><img src="cms_files/Image/hoofd.jpg" width="44" height="56" alt="" /></dd> <dt>Beschrijving</dt> <dd>' + omschrijving + '</dd> </dl> </dd> <dt>Contactpersoon</dt> <dd> <dl class="conactpersoon"> <dt class="naam">naam</dt> <dd class="naam" id="head2"><span class="_hidden">' + contactpersoon + '</span><img src="cms_files/Image/hoofd.jpg" width="44" height="56" alt="" /></dd> <dt>Functie</dt> <dd class="functie">Financieel adviseur</dd> <dt>e-mail</dt><dd class="email">' + email + '</dd> <dt>website</dt> <dd class="website">' + website + '</dd> </dl> </dd> <dt class="adres">Adres</dt> <dd>blabla<br />bla<br />dwdw</dd> <dt>Van-voor leden</dt> <dd class="vanvoor"><span class="angebot">aanbieding:</span> 30% korting op ....</dd></dl></div>';
		
		newTd.innerHTML = strInnerHtml;
		//parentRow.innerHTML = '<td colspan="3">' + strInnerHtml + '</td>';
		//document.getElementById('head1').addEvent('click', 'expandRow');
		
		newRowHandle = parentTable.insertBefore(newRow, parentRow.nextSibling);
		//expandedItems[expandedItems.length] = Array(target, parentRow, parentRow.innerHTML);
		expandedItems[expandedItems.length] = Array(target, newRowHandle);
		
}

function highlightRow ()
{
	regexp = / ?rowHover/g;
	if (regexp.test(this.className))
		this.className = this.className.replace(regexp, '');
	else
		this.className += ' rowHover';
}

/*
 * 
 */

var activeRow = '';
var rowHtml = '';
var newRowHandle;
var expandedItems = new Array();
var table = document.getElementById('ledenlijstTable'); 
var rows = table.getElementsByTagName('tr');

for (var i = 0; i < rows.length; i++)
{
	//rows[i].addEvent('mouseover', highlightRow, false); 
	//rows[i].addEvent('mouseout', highlightRow, false); 
	rows[i].onmouseover = highlightRow;
	rows[i].onmouseout = highlightRow;
	
	var cells = rows[i].getElementsByTagName('td');
	for (var j = 0; j < cells.length; j++)
	{
		if (cells[j].className == 'naam' || cells[j].className == 'contactpersoon')
		{
			//cells[j].addEvent('click', 'expandRow');
			
			/* ajax disabled...
			cells[j].onclick = expandRow;
			link = cells[j].firstChild;
			link.removeAttribute('href');
			cells[j].style.cursor = 'pointer';
			*/
		}
	}
}