// Switching between text and HTML

function changeTexttoHTML (obj1, obj2) {
  if(!obj1 || !obj2) {
    return;
  }
  if (obj1.innerText) {
    var x  = obj1.innerText.replace(/\t      /g, "\t");
    x  = x.replace(/\r\n/g, "\n");
    x  = x.replace(/\n/g, "\r\n\r\n");
    obj2.innerHTML = x;

  } else {
    var htmlSrc = document.createRange();
    htmlSrc.selectNodeContents(obj1);
    obj2.innerHTML = htmlSrc.toString();
  }
  obj2.style.whiteSpace = obj2.whiteSpace;
  obj2.style.textAlign = obj2.textAlign;
}

function changeHTMLtoText (obj1, obj2) {
  if(!obj1 || !obj2) {
    return;
  }
  if (obj1.innerText) {
    var x = obj1.innerHTML;
    obj2.innerText = x.replace(/\t/g, "\t      ");
    obj2.innerHTML = obj2.innerHTML.replace(/\n/g, "<br />\n");
  } else {
    var htmlSrc = document.createTextNode(obj1.innerHTML);
		
    obj2.innerHTML = "";
    obj2.appendChild(htmlSrc);
  }	
  obj2.whiteSpace = obj2.style.whiteSpace;
  obj2.style.whiteSpace = 'pre';
  obj2.textAlign = obj2.style.textAlign;
  obj2.style.textAlign = 'left';
}

var source_is_html = 1;
function toggle_source() {
  toggle_source_2(document.body);
}

function toggle_source_2(obj) {
  if (source_is_html == 1) {
    obj.oldHTML = obj.innerHTML;
    source_is_html = 0;
    changeHTMLtoText(obj, obj);
  } else {
    source_is_html = 1;
    obj.innerHTML = obj.oldHTML;
    obj.style.whiteSpace = obj.whiteSpace;
    obj.style.textAlign = obj.textAlign;
  }

}

// Stylesheet utilities

function createRule(style, def) {
  var x = document.styleSheets.length - 1;
  if (document.styleSheets[x].addRule) {
    document.styleSheets[x].addRule(style, def) ;	
  } else {
    var z = document.styleSheets[x].cssRules.length;
    document.styleSheets[x].insertRule(style + "{" + def + "}", z) ;	
  }
}

function createRule2(form) {
  createRule(form.style.value, form.def.value);
  return false;
}
	
function destroyRule(style) {
	
  var x = document.styleSheets.length - 1;
  for (j = x; j >= 0; j--) {
    if (document.styleSheets[j].rules) {
      var len = document.styleSheets[j].rules.length;
      for (var i = len - 1; i >= 0 ; i--) {
	if ((document.styleSheets[j].rules[i].selectorText.toLowerCase()) == style.toLowerCase()) {
	  var test = document.styleSheets[j].rules[i];
	  document.styleSheets[j].removeRule(i);
	  return;		
	}
      } // for i
    } else {
      var len = document.styleSheets[j].cssRules.length;
      for (var i = len - 1; i >= 0 ; i--) {
	if ((document.styleSheets[j].cssRules[i].selectorText.toLowerCase()) == style.toLowerCase()) {
	  var test = document.styleSheets[j].cssRules[i];
	  document.styleSheets[j].deleteRule(i);
	  return;	
	}
      } // for i
    }
  } // for j
}

function destroyRule2(form) {
  destroyRule(form.style.value);
  return false;
}

function editStyles() {
  var output = "<div style='min-width: 150px'><a href='javascript:editStyles()'>Refresh Styles</a><br /><br />";
  for (var j = 0; j < document.styleSheets.length; j++) {
    var href1 =  document.styleSheets[j].href ;
    href1 = href1.replace(/http:\/\/[^\/]*/, "");
    output += "<h1>" + href1 + "</h1><br /><br />";
    if (document.styleSheets[j].rules) {
      var len = document.styleSheets[j].rules.length;
      for (var i = 0; i < len; i++) {
	var style = document.styleSheets[j].rules[i].selectorText;
	var text = document.styleSheets[j].rules[i].style.cssText;
	text = text.replace(/\; /g, ";\n");
	output +=  style + "<br /><textarea id='" + j + "_" + i + "' style='150px' rows=10 onchange='updateStyle(this)'>" + text + "</textarea> <br /><br />\n";
      } // for i
    } else {
      var len = document.styleSheets[j].cssRules.length;
      for (var i = 0; i < len; i++) {
	var style = document.styleSheets[j].cssRules[i].selectorText;
	var text = document.styleSheets[j].cssRules[i].style.cssText;
	text = text.replace(/\; /g, ";\n");
	output +=  style + "<br /><textarea id='" + j + "_" + i + "' style='150px' rows=10 onchange='updateStyle(this)'>" + text + "</textarea> <br /><br />\n";
      } // for i
    }
  } // for j
	
  output += "<br /><br /><a href='javascript:editStyles()'>Refresh Styles</a><br /><br /></div>";
  getByID('newbodyleft').innerHTML=output;
  if (!document.styleSheets[0].rules) {
    getByID('newbodyleft').style.height="100%";
  }
  getByID('newbodyleft').style.width="20%";
  getByID('newbodyright').style.width="79%";
  getByID('EditStyles').innerHTML="<a href='javascript:hideStyles()'>Hide Styles</a>";
}

function hideStyles() {
  getByID('newbodyleft').innerHTML="";
  getByID('newbodyleft').style.width="0%";
  getByID('newbodyright').style.width="100%";
  getByID('EditStyles').innerHTML="<a href='javascript:editStyles()'>Edit Styles</a>";
}

function updateStyle(textarea) {
  var theid = textarea.id;
  var j = theid.replace(/_.*/, "");
  var i = theid.replace(/.*_/, "");
  var thetext = textarea.value;
  thetext.replace(/\n/g, " ");
  if (document.styleSheets[j].rules) {
    document.styleSheets[j].rules[i].style.cssText=thetext;
  } else {
    document.styleSheets[j].cssRules[i].style.cssText=thetext;
  }
	
}

// Using the stylesheet manipulation utilities to identify elements on the page

function outlineCurrentElement(type, color) {
  var x=document.body.getElementsByTagName(type);
  for (var i=0; i < x.length; i++) {
    obj = x[i];
    obj.onmouseover=function() {outline(this, color)};
    obj.onmouseout=function() {unoutline(this)};
  }
}

function outline(obj, color) {
  obj.cssText = obj.style.cssText;
  document.body.title += "\n    Tag: " + obj.tagName + ", ID: " + obj.id + ", Class: " + obj.className;
  obj.style.border="1px solid " + color;
}

function unoutline(obj) {
  document.body.title = "";
  obj.style.cssText = obj.cssText;
}

function outlineCurrentElement_2(form) {
  outlineCurrentElement(form.type.value, form.color.value);
  return false;
}

function debug() {
  var x = document.body.innerHTML;
  var y = "<div id='newbodyleft' style='float: left; width=0%; overflow: auto; height: 800; '></div><div id='newbodyright' style='float: right; width: 100%'><div id='newbodyfooter'><a href='javascript:toggle_source_2(getByID(\"newbodywrapper\"))'>Toggle</a>";
  y += "\n &nbsp; <span id='EditStyles'><a href='javascript:editStyles()'>Edit Styles</a></span>";
  y += "\n &nbsp; <a href='javascript:hide_debug()'>Hide Debuging tools</a></span>";
  y += "<form method=post onsubmit='return outlineCurrentElement_2(this)'>";
  y += "When mouse over element <input type=text name=type size=10> Outline it in <input type=text name=color size=10>";

  y += "<input type=submit value='Outline'></form>";
  y += "<form method=post onsubmit='return createRule2(this)'>";
  y += "Create style <input type=text name=style> with definition <input type=text name=def>";
  y += "<input type=submit value='Create'></form>";
  y += "<form method=post onsubmit='return destroyRule2(this)'>";
  y += "Destroy style <input type=text name=style>";
  y += "<input type=submit value='Destroy'></form>";
  y += "</div>";
  x = y + "<div id='newbodywrapper' style='height: 100%; " + document.body.style.cssText + "'>" + x + "</div></div>";
  document.body.style.cssText = '';
  document.body.innerHTML = x;
}


function hide_debug() {
  var x = getByID('newbodywrapper').innerHTML;
  document.body.style.cssText = getByID('newbodywrapper').style.cssText;
  document.body.innerHTML = x;
}