<!--
//script by yvoschaap.com
//freely useable
//optional link back would be very web 2.0 :)

function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
	try {
		// Mozilla / Safari
		this._xh = new XMLHttpRequest();
	} catch (e) {
		// Explorer
		var _ieModelos = new Array(
		'MSXML2.XMLHTTP.5.0',
		'MSXML2.XMLHTTP.4.0',
		'MSXML2.XMLHTTP.3.0',
		'MSXML2.XMLHTTP',
		'Microsoft.XMLHTTP'
		);
		var success = false;
		for (var i=0;i < _ieModelos.length && !success; i++) {
			try {
				this._xh = new ActiveXObject(_ieModelos[i]);
				success = true;
			} catch (e) {
				// Implementar manejo de excepciones
			}
		}
		if ( !success ) {
			// Implementar manejo de excepciones, mientras alerta.
			return false;
		}
		return true;
	}
}

datosServidor.prototype.ocupado = function() {
	estadoActual = this._xh.readyState;
	return (estadoActual && (estadoActual < 4));
}

datosServidor.prototype.procesa = function() {
	if (this._xh.readyState == 4 && this._xh.status == 200) {
		this.procesado = true;
	}
}

datosServidor.prototype.enviar = function(urlget,datos) {
	if (!this._xh) {
		this.iniciar();
	}
	if (!this.ocupado()) {
		this._xh.open("GET",urlget,false);
		this._xh.send(datos);
		// alert (this._xh.status);
		if (this._xh.readyState == 4 && this._xh.status == 200) {
			return this._xh.responseText;
		}
		
	}
	return false;
}


var urlBase = "update.php";
var formVars = "";
var changing = false;


function fieldEnter(campo,evt,idfld) {
		alert('field enter');
	evt = (evt) ? evt : window.event;
/*	if (evt.keyCode == 13 && campo.value!="") { */
		if (evt.keyCode == 13 ) {
		elem = document.getElementById( idfld );
		remotos = new datosServidor;
		nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+encodeURI(campo.value)+"&"+formVars,"");
		//remove glow
		noLight(elem);
    var elemName = elem.getAttributeNode('name').nodeValue    // added so the search matches the NEW value of an ajax-edited field
		// document.getElementsByName(elemName).item(0).id = campo.value; // added by me
		elem.innerHTML = nt;
		changing = false;
		return false;
	} else {
		return true;
	}
}


function fieldBlur(idfld) {
/*	if (campo.value!="") { */
	if (1) {
		elem = document.getElementById(idfld);
		remotos = new datosServidor;
		var textarea = elem.firstChild;
		nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+encodeURI(textarea.value)+"&"+formVars,"");
	 //alert (elem.getAttributeNode('name').nodeValue)
    //remove glow
		noLight(elem);
      //var elemName = elem.getAttributeNode('name').nodeValue  // added so the search matches the NEW value of an ajax-edited field
		// document.getElementsByName(elemName).item(0).id = campo.value; // added by me
		elem.innerHTML = nt;
		removeImageNodes(elem);
		changing = false;
		return false;
	}
}

function createImageNode(url,id,title,evt){
	var img = document.createElement('img');
	img.id = id;
	img.src = url;
	img.style.cursor = "pointer";
	img.title = title;
	addEvent(img,"click",evt);
	return img;
}

function appendSibling(sib1,sib2){
	var parent = sib1.parentNode;
	parent.appendChild(sib2);	
}

function removeImageNodes(elem){
	var up_img = document.getElementById("uimg_"+elem.id);
	var c_img = document.getElementById("cimg_"+elem.id);
	var parent = elem.parentNode;
	parent.removeChild(up_img);	
	parent.removeChild(c_img);	
}

function cancelChanges(elem,orig_text){
		noLight(elem); 
		elem.innerHTML = orig_text;
		removeImageNodes(elem);
		changing = false;
}

function saveChanges(spn){
	noLight(spn); 
	fieldBlur(spn.id); 
}

function alerta(){
	alert('hello world!');	
}

function getId(spn){
	var words = spn.id.split("-...-");
	return words[3];
}
	

function newParagraph(actual){
	id = getId(actual);
	id_heading = "tutorials-...-id-...-heading-...-"+id;
	id_text = "tutorials-...-id-...-text-...-"+id;
	id_graph = "tutorials-...-id-...-graph-...-"+id;	
	id_order = "tutorials-...-id-...-order-...-"+id;		
	var parent = actual.parentNode.parentNode;
	parent.innerHTML = "<tr><td>Record ID: "+id+"<br>Heading: <span id='"+id_heading+"' class=\"editText\"  title = \"Click to edit\" onclick=\"cambia(this)\" style=\"cursor = pointer; background-color: lightgrey\">Add Paragraph</span><br><br><span id='"+id_text+"'  title = \"Click to edit\"  onclick=\"cambia(this)\" style=\"cursor = pointer; background-color: lightgrey\">this<br>is<br>your<br>new<br>paragraph</span><br><br>Image: <span id='"+id_graph+"'  title = \"Click to edit\" onclick=\"cambia(this)\" style=\"cursor = pointer; background-color: lightgrey\">&nbsp;&nbsp;</span><br>Order: <span id='"+id_order+"' onclick=\"cambia(this)\" style=\"cursor = pointer; background-color: lightgrey\" >&nbsp;&nbsp;</span><br></td></tr>";
}


//edit field created
function cambia(actual) {
	if(!changing){
		width = widthEl(actual.id) + 20;
		height =heightEl(actual.id) + 6;
		actual.innerHTML = actual.innerHTML.replace(/<br>/g, "");
		if(width < 100)
			width = 100;
		if(height < 20)
			actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
		else
			{ width = 477;
				height = height + 10;
				orig_text = actual.innerHTML;
				actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\">" + actual.innerHTML + "</textarea>";

//onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\

			update = createImageNode("http://www.cosplaysupplies.com/intranet/images/update.png","uimg_"+actual.id,"Click to Save changes",function(){saveChanges(actual)});
			cancel = createImageNode("http://www.cosplaysupplies.com/intranet/images/cancel.png","cimg_"+actual.id,"Click to Cancel changes",function(){ cancelChanges(actual,orig_text) });
			space = document.createTextNode("\u00a0");
			appendSibling(actual,update);
			appendSibling(actual,space);
			appendSibling(actual,cancel);			
	    }
		changing = true;
	}
		//actual.firstChild.focus();
}


//find all span tags with class editText and id as fieldname parsed to update script. add onclick function
function editbox_init(){
	if (!document.getElementsByTagName){ return; }
	var spans = document.getElementsByTagName("span");

	// loop through all span tags
	for (var i=0; i<spans.length; i++){
		var spn = spans[i];

        	if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)){ 
				name = spn.getAttribute("name");
				if (name == "new"){
					spn.onclick = function () { newParagraph(this); }
					spn.style.cursor = "pointer";
					spn.title = "Click to add new paragraph";	
				}
				else{
					spn.onclick = function () { cambia(this); }
					spn.style.cursor = "pointer";
					spn.title = "Click to edit";	
				}       
			}
	}
}

//crossbrowser load function
function addEvent(elm, evType, fn, useCapture)
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Please upgrade your browser to use full functionality on this page");
  }
}

//get width of text element
function widthEl(span){

	if (document.layers){
	  w=document.layers[span].clip.width;
	} else if (document.all && !document.getElementById){
	  w=document.all[span].offsetWidth;
	} else if(document.getElementById){
	  w=document.getElementById(span).offsetWidth;
	}
return w;
}

//get height of text element
function heightEl(span){

	if (document.layers){
	  h=document.layers[span].clip.height;
	} else if (document.all && !document.getElementById){
	  h=document.all[span].offsetHeight;
	} else if(document.getElementById){
	  h=document.getElementById(span).offsetHeight;
	}
return h;
}

function highLight(span){
            span.parentNode.style.border = "2px solid #D1FDCD";
            span.parentNode.style.padding = "0";
            span.style.border = "1px solid #54CE43";          
}

function noLight(span){
        span.parentNode.style.border = "0px";
        span.parentNode.style.padding = "2px";
        span.style.border = "0px"; 
}

//sets post/get vars for update

function setVarsForm(vars){
	formVars  = vars;
}

addEvent(window, "load", editbox_init);
-->