/* Popup Windows Support */
var agt = navigator.userAgent.toLowerCase();
var popupWindowFirstChild;

// ein paar globale Variablen zur Anzeige von Details
var IdArray = new Array();
var ContentArray = new Array();
var httpRequest;
var imgRequest;
var detailID;

function showMenu( id, scripturl, divID )
{
	
	// gecachter Content
	var cachedXML;
	
	// Array aller IDs durchlaufen und prüfen ob wir für diesen Termin
	// schonmal Daten geladen haben
	for ( var i = 0; i < IdArray.length; ++i) {
		if( IdArray[i] == id ) {
			var cachedXML = ContentArray[i];
			var detailID = cachedXML.getElementsByTagName("DetailID")[0].childNodes[0].nodeValue;
			if( detailID == id )
				break;
		}
	}

  // wenn die Id der gecachten Daten mit der anzuzeigenden übereinstimmt
  if( detailID == id ) { 
	  // Datensatz anzeigen
		updateHTML( cachedXML, divID );
	}
	else {
		// dann den Request erzeugen
		if (window.ActiveXObject)
	  {
	      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  else if (window.XMLHttpRequest)
	  {
	      httpRequest = new XMLHttpRequest();
	  }
	  
  	// Datensatz laden   
    httpRequest.open("GET", scripturl, true);
	  httpRequest.onreadystatechange = function() {processRequest( id, divID ); } ;
  	httpRequest.send(null);
	}
	
	// merken, dass wir dieses Detail gerade anzeigen
	detailID = id;
	
}

function showColorSelection() {
	
	hideAllMenus();
	
	// hier wird ein wenig html Gerüst um den text gebaut
	var inlineDisplay = '<div class="inlineContentColor"><table width="100%" cellspacing="0" cellpadding="0" border="0">' +
			' <tr>' +
			'  <td class="red">' + 
			'   <a href="index.php?color=red" class="menu" onClick="hideMenu(\'colorSelection\')">red</a>' +
			'  </td>' +
			' </tr>' +
			' <tr>' +
			'  <td class="pink">' + 
			'   <a href="index.php?color=pink" class="menu" onClick="hideMenu(\'colorSelection\')">pink</a>' +
			'  </td>' +
			' </tr>' +			
			' <tr>' +
			'  <td class="orange">' + 
			'   <a href="index.php?color=orange" class="menu" onClick="hideMenu(\'colorSelection\')">orange</a>' +
			'  </td>' +
			' </tr>' +	
			' <tr>' +
			'  <td class="blue">' + 
			'   <a href="index.php?color=blue" class="menu" onClick="hideMenu(\'colorSelection\')">blue</a>' +
			'  </td>' +
			' </tr>' +
			' <tr>' +
			'  <td class="green">' + 
			'   <a href="index.php?color=green" class="menu" onClick="hideMenu(\'colorSelection\')">green</a>' +
			'  </td>' +
			' </tr>' +								
			' <tr>' +
			'  <td class="petrol">' + 
			'   <a href="index.php?color=petrol" class="menu" onClick="hideMenu(\'colorSelection\')">petrol</a>' +
			'  </td>' +
			' </tr>' +			
			'</table>' +
			'</div>';

	
	// jetzt können wir das Menu anzeigen
	window.document.getElementById("colorSelection").innerHTML = inlineDisplay;

}

function hideMenu( divName ) {
	// Anzeige leeren
	window.document.getElementById(divName).innerHTML = "";
	
	// wir zeigen kein Detail mehr an
	detailID = 0;
	
}

/**
* This is the call back method
* If the call is completed when the readyState is 4
* and if the HTTP is successfull when the status is 200
* update the details DIV
*/
function processRequest( id, divID )
{
  if (httpRequest.readyState == 4)
  {
    if(httpRequest.status == 200)
    {
      // get the XML send by the servlet
      var responseXML = httpRequest.responseXML;
      
			// Id und Content cachen
			IdArray.push( id );
			ContentArray.push( responseXML );
			
      // Update the HTML
      updateHTML(responseXML, divID );
    }
  }
}  

/**
* This function parses the XML and updates the 
* HTML DOM by creating a new text node is not present
* or replacing the existing text node.
*/
function updateHTML(responseXML, divID)
{
	// XML auslesen
	var detailID = responseXML.getElementsByTagName("DetailID")[0].childNodes[0].nodeValue;
	var detailText = responseXML.getElementsByTagName("Detail")[0].childNodes[0].nodeValue;

  showInlineDisplay( divID , detailText, detailID );
	
	// und jetzt den Cursor wieder zurücksetzen
	document.body.style.cursor = "auto";
}

function showInlineDisplay( divName, detailText, detailID) {
	
	hideAllMenus();
	
	// hier wird ein wenig html Gerüst um den text gebaut
	var inlineDisplay = '<div class="inlineContent"><table width="100%" cellspacing="0" cellpadding="0" border="0">' +
			' <tr>' +
			'  <td>' + detailText + '</td>' +
			' </tr>' +
			'</table>' +
			'</div>';

	
	// jetzt können wir das Menu anzeigen
	window.document.getElementById(divName).innerHTML = inlineDisplay;

}

function hideAllMenus() {
	// Array aller IDs und erst mal alle Menus ausblenden
	for ( var i = 0; i < IdArray.length; ++i) {
		hideMenu("subMenu" + IdArray[i])
	}
	hideMenu("colorSelection")
}


function loadImg( imgID, type )
{
 	if (window.ActiveXObject)
	{
	  imgRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest)
	{
	  imgRequest = new XMLHttpRequest();
	}
	
  // Datensatz laden   
  imgRequest.open("GET", "rnd_img.php?type=" + type , true);
	imgRequest.onreadystatechange = function() {updateIMG( imgID ); } ;
  imgRequest.send(null) 
}

/**
* This function parses the XML and updates the 
* HTML DOM by creating a new text node is not present
* or replacing the existing text node.
*/
function updateIMG(imgID)
{

	if (imgRequest.readyState == 4)
  {
    
    if(imgRequest.status == 200)
    {
      // get the XML send by the servlet
      var responseXML = imgRequest.responseXML;
			// XML auslesen
	    var img = responseXML.getElementsByTagName("DetailID")[0].childNodes[0].nodeValue;
      
      window.document.getElementById(imgID).innerHTML = img;
      
      if(imgID == "featured") { loadImg("random", 0); }
    }
  }
	
}