
// Adam Petrie
// Created: 09/27/2005
// Revised: 02/15/2006  (to make it more user/browser friendly). 
// Revised: 10/05/2006 (slightly faster, more user/browser friendly, supports
//                      innerHTML and outerHTML values now, and a few comments added).
// Functionality:
// Show current values held by a particular object given through the user.
// Also, user can dynamically change attributes (like the background color).
// Tested the following browsers (on XP OS): IE 6.0, NS 8.1.2, Opera 9.2, Firefox 1.5.0.7
// Sample usage: onload="alp_CreateDisplay();"  - from the body HTML tag.

function alp_BtnGet_click(e) {
// Event to start the processing...
   alp_ResetDiv();
   window.status = "Working...";
   alp_ShowValues(document.getElementById("alp_txt1").value);
   window.status = "Results should be displayed."; 
   return true;
}
function alp_CreateDisplay() {
// Creates a debugging display on the bottom of the page.
  var bodyContainer = document.getElementsByTagName("Body").item(0);
  var alp_div_obj_txt, alp_new_obj;
  
  // create page separator
  alp_new_obj = document.createElement("hr");
  bodyContainer.appendChild(alp_new_obj);

  // create the directions
  alp_new_obj = document.createElement("div");
  alp_new_obj.setAttribute("id","alp_JS_info_2");
  alp_div_obj_txt = document.createTextNode("Type in Object: ");
  alp_new_obj.appendChild(alp_div_obj_txt);
  bodyContainer.appendChild(alp_new_obj);

  // create the text input field
  alp_new_obj = document.createElement("input");
  alp_new_obj.setAttribute("id","alp_txt1");
  alp_new_obj.setAttribute("type","text");
  alp_new_obj.setAttribute("size","40");
  alp_new_obj.setAttribute("value","document.body");
  bodyContainer.appendChild(alp_new_obj);

  //create 'Get Values' Button
  alp_new_obj = document.createElement("input");
  alp_new_obj.setAttribute("id","alp_btn1");
  alp_new_obj.setAttribute("type","button");
  alp_new_obj.setAttribute("value","Get Values");
  alp_new_obj.onclick=alp_BtnGet_click;
  bodyContainer.appendChild(alp_new_obj);

  //create 'Clear Results' Button
  alp_new_obj = document.createElement("input");
  alp_new_obj.setAttribute("id","alp_btn2");
  alp_new_obj.setAttribute("type","button");
  alp_new_obj.setAttribute("value","Clear Results");
  alp_new_obj.onclick=alp_ResetDiv;
  bodyContainer.appendChild(alp_new_obj);   
}
function alp_ResetDiv() {
// Clears the contents of the DIV displaying all the results.
   window.status = "";
   var alp_div_obj = document.getElementById("alp_JS_info_1");
   if (alp_div_obj != null) {
      alp_div_obj.innerHTML = "";
   }
}
function alp_ShowValues(inVal) {
// Will show all the attributes/objects for a object passed in by the user.
   var alp_doc_obj, bodyContainer, alp_div_obj_txt;
   var alp_div_obj = document.getElementById("alp_JS_info_1");
   var alp_txt_obj = document.getElementById("alp_txt1");
   var alp_pos = 0, alp_inner_pos = -1, alp_outer_pos = -1;
   var alp_obj_value_array=new Array();
  
   //Make sure the display DIV hasn't been created yet as this function can be called multiple times.
   if (alp_div_obj == null) { 
      //create the div to show the results
      alp_div_obj = document.createElement("div");
      alp_div_obj.setAttribute("id","alp_JS_info_1"); 
      alp_div_obj_txt = document.createTextNode("");
      alp_div_obj.appendChild(alp_div_obj_txt);
      bodyContainer = document.getElementsByTagName("Body").item(0);
      bodyContainer.appendChild(alp_div_obj);      
   }
   //Reference the 'object' (or change the attribute) the user typed in.
   try {
      alp_doc_obj = eval(inVal);
   } 
   catch(e){  
      alert("Try using a different object reference instead.");
      alp_txt_obj.focus();
      alp_txt_obj.select();
      return false;  //don't continue the rest of the statements...   
   }
   
   //Get all the attributes from the browser and then sort them
   for (alp_obj_value in alp_doc_obj) {
     alp_obj_value_array[alp_pos] = alp_obj_value;
     alp_pos++;
   }
   alp_obj_value_array.sort();
   
   //Display attributes and their values
   alp_div_obj.innerHTML = "Object passed in: " + alp_txt_obj.value + "<\/b>

";
   for (alp_pos=0; alp_pos < alp_obj_value_array.length; alp_pos++) {
   //Not showing innerHTML or outerHTML attributes yet as the actual controls will be created 
   // on the page and it could make for some interesting problems.
        if (alp_obj_value_array[alp_pos] == "outerHTML" ) {
        	alp_outer_pos = alp_pos;           
        }
        else if (alp_obj_value_array[alp_pos] == "innerHTML") {
        	alp_inner_pos = alp_pos;
        }
   //Show what the attribute/object is currently referencing.
        else {
           try {
              alp_div_obj.innerHTML += "" + alp_obj_value_array[alp_pos] + "<\/b> has stored: " + 
alp_doc_obj[alp_obj_value_array[alp_pos]] + "
";
           } catch(e){ alp_div_obj.innerHTML += "" + alp_obj_value_array[alp_pos] + "<\/b> gives an error!
";}
        }
   }
   /// Need to create BOTH textarea controls first (otherwise error). ////
   if (alp_inner_pos != -1) { 
     alp_div_obj.innerHTML += "innerHTML<\/b> has stored:
<\/textarea><br \/>";
   }
   if (alp_outer_pos != -1) { 
   	 alp_div_obj.innerHTML += "<b>outerHTML<\/b> has stored:<br \/><textarea rows=10 cols=90 id=alp_JS_info_4><\/textarea>";
   }
   alp_div_obj.innerHTML += "<br \/>Total Shown: " + alp_obj_value_array.length;
///////////////////////////////////////////////////////////////////////
/// Now Populate the controls appropriately.///////////////////////////
   if (alp_inner_pos != -1) {    	 	
     alp_div_obj = document.getElementById("alp_JS_info_3");
   	 alp_div_obj.value = alp_doc_obj[alp_obj_value_array[alp_inner_pos]];   	
   }
   if (alp_outer_pos != -1) {   	
   	 alp_div_obj = document.getElementById("alp_JS_info_4");
   	 alp_div_obj.value = alp_doc_obj[alp_obj_value_array[alp_outer_pos]];   	
   }
///////////////////////////////////////////////////////////////////////    	
}
</code>
Sample way of using the Script:
<code lang="HTML">
<html><head><script type="text/javascript" src="alp_debug_obj.js"></script></head>
<body onload="alp_CreateDisplay();"></body></html>
</code>
Another example:
<code lang="HTML">
<html><head><script type="text/javascript" src="alp_debug_obj.js"></script>
<script type="text/javascript">
function change_default() {
	var newValue= "document.body.bgColor = ";
  newValue += "\"" + "#CCCCCC" + "\"";
  document.getElementById("alp_txt1").value=newValue;
}
</script>
</head>
<body onload="alp_CreateDisplay();change_default();">
<p>1) Type the following to change the background color (will be done on page load): <br />
document.body.bgColor = "#CCCCCC"</p>
<p>2) Type the following to see what the bgColor value is set at: <br />
document.body</p>
</body></html>
</code>