var layer=new Object();
var cur_mode="view";
layer.id=1001;
layer.tex_str = escape("$ \\frac{1}{4}+\\frac{1}{2}=\\frac{3}{4} \\quad \\left(\\begin{array}{cc}\\alpha & \\beta \\\\ \\psi & \\theta \\end{array}\\right)$");	
layer.html = "<div id=\"img_" + layer.id + "\" > </div>";
layer.img_src= "./my.png";

function on_load(){
	document.getElementById("img_layer").innerHTML = layer.html;
	document.getElementById("img_"+layer.id).innerHTML = "<img id=\"img_each_" + layer.id + "\" src=\""+ layer.img_src +"\" onclick=\"img_click("+layer.id+")\" >";
	var id=layer.id;
	document.getElementById("img_" + id ).innerHTML += "<br><div id=\"edit_panel_"+id+"\"></div>";
}

function edit_panel_close(id){
	document.getElementById("edit_panel_" + id).innerHTML = "";
	document.getElementById("img_each_" + id).style.border= "0px dashed";
	cur_mode="view";
}
function img_update(id){
    layer.tex_str = document.getElementById("input_"+id).value;
    if( layer.tex_str.length >0 ){
    	
        var encoded = escape( layer.tex_str).replace("+","%2B","g") ;
        //encoded = encoded.replace("&","%26","g");

        layer.tex_str = escape(layer.tex_str);

        layer.img_src= "http://tex-engine.appspot.com/?t=file&q="+encoded;
		document.getElementById("img_each_" + id).src = layer.img_src;
        document.getElementById("img_each_" + id).style.border= "0px dashed";
        document.getElementById("img_each_" + id).style.borderColor= "#F00FFF";
		document.getElementById("edit_panel_" + id).innerHTML = "";
        cur_mode="view";
	}
}

function img_click(id,mode){

	if(cur_mode=="view" ){

		document.getElementById("edit_panel_"+id).innerHTML += "<input id=\"input_"+ id +"\" type=\"text\" value=\"\" size=20> <input type=\"button\" style=\"width:25px;height:26px;margin:0px;padding:0px;\" name=\"edit_ok\" value=\"O\" onclick=\"img_update("+ id + ");\"> <input type=\"button\" style=\"width:25px;height:26px;margin:0px;padding:0px;\" name=\"edit_close\" value=\"X\" onclick=\"edit_panel_close("+ id + ");\"> ";
		document.getElementById("input_" + id).value = unescape(layer.tex_str);
		document.getElementById("img_each_" + id).style.border = "2px dashed";
		document.getElementById("img_each_" + id).style.borderColor = "#F00FFF";
		cur_mode="edit";

	}

}