function changeTexttoHTML (obj1, obj2) {
	if(!obj1 || !obj2) {
		return;
	}
	if (obj1.innerText) {
		if (1 == 0) {
		var htmlSrc = document.body.createTextRange();
		htmlSrc.moveToElementText(obj1);
		var x  = htmlSrc.text.replace(/\t      /g, "\t");
		obj2.innerHTML = x;
		return;
		}
		var x  = obj1.innerText.replace(/\t      /g, "\t");
		//alert(x);
//		x  = x.replace(/<BR>/g, "\n");
		x  = x.replace(/\r\n/g, "\n");
		x  = x.replace(/\n/g, "\r\n\r\n");
//		alert(x);
		obj2.innerHTML = x;

	} else {
		//	return obj2.selectNodeContents(obj1);
//		alert(obj1.ownerDocument);	
		var htmlSrc = document.createRange();
	//	alert(htmlSrc.toString());
			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 && 1==1) {
		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.innerHTML = obj2.innerHTML.replace(/\n/g, "<br />\n");
//	
//		obj2.innerHTML = obj2.innerHTML.replace(/ \s/g, " &nbsp;");
	}	
	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;
		if (1 == 1) {
			obj.innerHTML = obj.oldHTML;
			obj.style.whiteSpace = obj.whiteSpace;
			obj.style.textAlign = obj.textAlign;
		} else {
			changeTexttoHTML(obj, obj);
		}
	}

}
function fal() {

}

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) ;	
	}
//	alert(addRule);	

}

function createRule2(form) {
	createRule(form.style.value, form.def.value);
	return false;
}
	
// setTimeout("createRule('div', 'border: 1px solid blue')", 1000) ;

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];
				//	alert(test.style.cssText);
					document.styleSheets[j].removeRule(i);
					return;		
				}
			}
		} 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];
				//	alert(test.style.cssText);
					document.styleSheets[j].deleteRule(i);
					return;	
				}
			}
		}
	}
}

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";
			}
		} 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";
			}
		}
	}
	
	output += "<br /><br /><a href='javascript:editStyles()'>Refresh Styles</a><br /><br /></div>";
	getByID('newbodyleft').innerHTML=output;
if (document.styleSheets[0].rules) {

} else {
	getByID('newbodyleft').style.height="100%";
}
	getByID('newbodyleft').style.width="20%";
//	alert(1);
//	getByID('newbodyleft').style.borderRight="1px;";
//	alert(2);
	getByID('newbodyright').style.width="79%";
//	alert(3);
	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;
	}
	
}

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;
}