/**
 * function text_edit()
 *
 * get area data from server. create and append text editor and fill
 * it with received data
 *
 * @param event "evt" (event which called this function)
 */
function text_edit(evt) {
	evt = evt || window.event;
	var element = evt.srcElement ? evt.srcElement : evt.target;
	selected_text = element.id;

	/**
	 * create new instance of XML parse, get response and parse
	 */
	var request = "<?xml version=\"1.0\" encoding=\"" + encoding + "\"?>\n";
	request += "<request_data>\n";
	request += "	<command>get_area</command>\n";
	request += "	<pt_area_ID>" + selected_text.split("_")[1] + "</pt_area_ID>\n";
	request += "	<index>" + current_page_index + "</index>\n";
	request += "</request_data>";

    var xml = new JKL.ParseXML(ifc_url, "input=" + request);
    var data = xml.parse();
	err(data.response_data, "text_edit()", request);
	var area = data.response_data.area;

		/**
		 * get document height including scrolls, because we want the overlay to
		 * blank everything even on places hidden by scroll		 
		 */
		if (window.innerHeight && window.scrollMaxY) {
			document_height = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){
			document_height = document.body.scrollHeight;
		} else {
			document_height = document.body.offsetHeight;
	  	}

	/**
	 * create editor overlay and append styles
	 */
	text_overlay = document.createElement("div");
	document.body.appendChild(text_overlay);
	text_overlay.id = "text_overlay";
	text_overlay.style.opacity = "0.7";
	text_overlay.style.filter = "alpha(opacity=70)";
	text_overlay.style.width = "100%";
	text_overlay.style.height = document_height + "px";

	/**
	 * create editor content div
	 */
	text_editor = document.createElement("div");
	document.body.appendChild(text_editor);
	text_editor.id = "text_editor";
	text_editor.style.left = ((window.innerWidth ? window.innerWidth : document.documentElement.clientWidth) - 400) / 2 + "px";
	text_editor.style.top = ((window.innerHeight ? window.innerHeight : document.documentElement.clientHeight) - 250) / 2 + "px";
	document.body.appendChild(text_editor);

	/**
	 * append editor heading
	 */
	var editor_heading = document.createElement("h3");
	editor_heading.innerHTML = "Vložit / upravit text";
	text_editor.appendChild(editor_heading);

	/**
	 * font family. it can be defined in XML, or we will get it from config
	 */
	var font_family = document.createElement("div");
	font_family.id = "font_family";
	font_family.innerHTML = "Písmo:<br />";

	var font_selector = document.createElement("select");
	font_selector.id = "font";

	if (debug == true && !area.def_font_family) alert("Area #" + selected_text.split("_")[1] + ", index #" + current_page_index + ":\n\nElement <def_font_family> not set.");

	if (!area.def_font_family[0]) {
		tmp = [];
		tmp[0] = area.def_font_family;
		font_families = tmp;
		tmp = null;
	} else {
		font_families = area.def_font_family;
	}

	for (var i in font_families) {
		var option = document.createElement("option");
		option.innerHTML = base64_decode(font_families[i].caption);
		option.value = font_families[i].value;
		option.style.fontFamily = base64_decode(font_families[i].caption);
		option.selected = (typeof(area.font) != "undefined" && area.font == font_families[i]) ? true : false;
		font_selector.appendChild(option);
	}

	font_family.appendChild(font_selector);
	text_editor.appendChild(font_family);
	addEvent(font_selector, "change", text_setfont);

	/**
	 * font size. it can be defined in XML, or we will get it from config
	 */
	var font_size = document.createElement("div");
	font_size.id = "font_size";
	font_size.innerHTML = "Velikost:<br />";

	var size_selector = document.createElement("select");
	size_selector.id = "fontsize";

	if (debug == true && !area.def_font_size) alert("Area #" + selected_text.split("_")[1] + ", index #" + current_page_index + ":\n\nElement <def_font_size> not set.");

	if (!area.def_font_size[0]) {
		tmp = [];
		tmp[0] = area.def_font_size;
		font_sizes = tmp;
		tmp = null;
	} else {
		font_sizes = area.def_font_size;
	}

	for (var i in font_sizes) {
		var option = document.createElement("option");
		option.innerHTML = base64_decode(font_sizes[i].caption);
		option.value = font_sizes[i].value;
		option.style.fontSize = base64_decode(font_sizes[i].caption);
		option.selected = (typeof(area.font_size) != "undefined" && area.font_size == font_sizes[i].value) ? true : false;
		size_selector.appendChild(option);
	}

	font_size.appendChild(size_selector);
	text_editor.appendChild(font_size);
	addEvent(size_selector, "change", text_setsize);

	/**
	 * align
	 */
/*
	var align = document.createElement("div");
	align.id = "text_align";
	align.innerHTML = "Zarovnání:<br />";

	var align_selector = document.createElement("select");
	align_selector.id = "align";

	for (var i in aligns) {
		var option = document.createElement("option");
		option.innerHTML = aligns[i][1];
		option.value = aligns[i][0];
		option.selected = (typeof(area.align) != "undefined" && area.align == aligns[i][0]) ? true : false;
		align_selector.appendChild(option);
	}

	align.appendChild(align_selector);
	text_editor.appendChild(align);
	addEvent(align_selector, "change", text_setalign);
*/
	/**
	 * color. if available color(s) defined in XML, display drop-down selection
	 * list. else display button which will open color picker
	 */
	var color = document.createElement("div");
	color.id = "text_color";
	color.innerHTML = "Barva:<br />";

	var color_r = document.createElement("input");
	color_r.type = "hidden";
	color_r.id = "color_r";
	color_r.value = typeof(area.color.r) != "undefined" ? area.color.r : "0";
	color.appendChild(color_r);

	var color_g = document.createElement("input");
	color_g.type = "hidden";
	color_g.id = "color_g";
	color_g.value = typeof(area.color.g) != "undefined" ? area.color.g : "0";
	color.appendChild(color_g);

	var color_b = document.createElement("input");
	color_b.type = "hidden";
	color_b.id = "color_b";
	color_b.value = typeof(area.color.b) != "undefined" ? area.color.b : "0";
	color.appendChild(color_b);

	if (typeof(area.def_font_color) == "undefined") {
		var color_selector = document.createElement("input");
		color_selector.type = "button";
		color_selector.id = "color_button";
		color_selector.value = "vybrat";
		color.appendChild(color_selector);
		addEvent(color_selector, "click", open_picker);
	} else {
		var color_selector = document.createElement("select");
		color_selector.id = "fontcolor";

		if (!area.def_font_color[0]) {
			tmp = [];
			tmp[0] = area.def_font_color;
			font_colors = tmp;
			tmp = null;
		} else {
			font_colors = area.def_font_color;
		}

		for (var i in font_colors) {
			var option = document.createElement("option");
			option.innerHTML = base64_decode(font_colors[i].caption);
			option.value = font_colors[i].rgb;
//			option.style.background = "#" + font_colors[i].hex;
			option.style.color = "#" + font_colors[i].hex;
			option.selected = (typeof(area.color.r) != "undefined" && (area.color.r + "," + area.color.g + "," + area.color.b) == font_colors[i].rgb) ? true : false;
			color_selector.appendChild(option);
		}

		addEvent(color_selector, "change", text_setcolor);
	}
	color.appendChild(color_selector);
	text_editor.appendChild(color);

	/**
	 * text content
	 */
	var text_wrap = document.createElement("div");
	text_wrap.id = "text_wrap";

	var text_content = document.createElement("textarea");
	text_content.id = "text";
	text_content.innerHTML = typeof(area.text) == "undefined" ? "" : base64_decode(area.text);
	text_content.style.fontFamily = font_selector.value;
	text_content.style.fontSize = size_selector.value;
//	text_content.style.textAlign = align_selector.value;
	text_content.style.color = "rgb(" + color_r.value + ", " + color_g.value + ", " + color_b.value + ")";

	text_wrap.appendChild(text_content);
	text_editor.appendChild(text_wrap);
//	addEvent(text_content, "keyup", function() { text_content.value = rewrite_string(text_content.value); } );

	/**
	 * save button
	 */
	var save = document.createElement("input");
	save.type = "button";
	save.id = "save";
	save.value = "uložit";
	text_editor.appendChild(save);
	addEvent(save, "click", text_save);
	
	/**
	 * close button
	 */
	var close = document.createElement("input");
	close.type = "button";
	close.id = "close";
	close.value = "zrušit";
	text_editor.appendChild(close);
	addEvent(close, "click", text_close);

	/**
	 * set text color, in case that user must choose one
	 */
	text_setcolor();
	text_content.focus();
}


/**
 * function text_setfont(), text_setsize(), text_setalign()
 *
 * theese functions take selected property value and apply
 * it's style to text field
 */
function text_setfont() { document.getElementById("text").style.fontFamily = document.getElementById("font").value; }
function text_setsize() { document.getElementById("text").style.fontSize = document.getElementById("fontsize").value; }
function text_setalign() { document.getElementById("text").style.textAlign = document.getElementById("align").value; }


/**
 * function text_setcolor()
 *
 * set text color from string in option value
 *
 * no params needed ;-)
 */
function text_setcolor() {
	if (document.getElementById("fontcolor")) {
		var rgb_array = document.getElementById("fontcolor").value.split(",");
		document.getElementById("color_r").value = rgb_array[0];
		document.getElementById("color_g").value = rgb_array[1];
		document.getElementById("color_b").value = rgb_array[2];
//		document.getElementById("text").style.color = "rgb(" + rgb_array[0] + ", " + rgb_array[1] + ", " + rgb_array[2] + ")";
	}
}


/**
 * function open_picker()
 *
 * create iframe displaying color picker and overlay
 *
 * no params needed ;-)
 */
function open_picker() {

	/**
	 * create overlay above text editor and append
	 */
	picker_overlay = document.createElement("div");

	picker_overlay.id = "picker_overlay";
	picker_overlay.style.opacity = "0.5";
	picker_overlay.style.filter = "alpha(opacity=50)";
	picker_overlay.style.left = ((window.innerWidth ? window.innerWidth : document.documentElement.clientWidth) - 640) / 2 + "px";
	picker_overlay.style.top = ((window.innerHeight ? window.innerHeight : document.documentElement.clientHeight) - 400) / 2 + "px";

	document.body.appendChild(picker_overlay);

	/**
	 * create color picker iframe and append
	 */
	picker_iframe = document.createElement("iframe");

	picker_iframe.id = "picker_iframe";
	picker_iframe.name = "picker_iframe";
	picker_iframe.style.left = ((window.innerWidth ? window.innerWidth : document.documentElement.clientWidth) - 410) / 2 + "px";
	picker_iframe.style.top = ((window.innerHeight ? window.innerHeight : document.documentElement.clientHeight) - 310) / 2 + "px";
	picker_iframe.src = url + "color_picker.html";
	picker_iframe.scrolling = "no";

	document.body.appendChild(picker_iframe);
}


/**
 * function close_picker()
 *
 * remove color picker iframe and overlay
 *
 * no params needed ;-)
 */
function close_picker() {
	if (document.getElementById("picker_iframe")) {

		/**
		 * remove iframe from document
		 */
		document.body.removeChild(document.getElementById("picker_iframe"));
		document.body.removeChild(document.getElementById("picker_overlay"));
	}
}


/**
 * function rewrite_string()
 *
 * search for specified characters or character groups in string
 * and replace them with others
 *
 * @param string "string" (strign to rewrite)
 */
function rewrite_string(string){

	/**
	 * define what to search for and by what to replace
	 */
	var replace_what = new Array("<",">");
	var replace_with = new Array("","");

	/**
	 * get source string and it's character count, then transform to lowercase
	 */
	var length = replace_what.length;
	string = string.toLowerCase();

	/**
	 * replace each found defined character with it's replacement from array
	 */
	for (i = 0; i < length; i++) {
		while (string.indexOf(replace_what[i]) > -1) {
			position = string.indexOf(replace_what[i]);
			string = (string.substring(0, position) + replace_with[i] + string.substring((position + replace_what[i].length), string.length));
		}
	}

	/**
	 * return string
	 */
	return string;
}


/**
 * function text_save()
 *
 * get values and send them to server, so they will be stored
 * immediately and not only when page chenges
 *
 * no params needed ;-)
 */
function text_save() {

	/**
	 * now the funny stuff. when we are changing page, we must save all that was
	 * done on this page... so we will begin creating request
	 */
	var request = "<?xml version=\"1.0\" encoding=\"" + encoding + "\"?>\n";
	request += "<request_data>\n";
	request += "	<command>set</command>\n";
	request += "	<index>" + current_page_index + "</index>\n";
	request += "	<area>\n";
	request += "		<pt_area_ID>" + selected_text.split("_")[1] + "</pt_area_ID>\n";
//	request += "		<align>" + document.getElementById("align").value + "</align>\n";
	request += "		<font>" + document.getElementById("font").value + "</font>\n";
	request += "		<font_size>" + document.getElementById("fontsize").value + "</font_size>\n";
	request += "		<text>" + base64_encode(document.getElementById("text").value) + "</text>\n";
	request += "		<color>\n";
	request += "			<r>" + document.getElementById("color_r").value + "</r>\n";
	request += "			<g>" + document.getElementById("color_g").value + "</g>\n";
	request += "			<b>" + document.getElementById("color_b").value + "</b>\n";
	request += "		</color>\n"
	request += "	</area>\n";
	request += "</request_data>";

	/**
	 * send request
	 */
	var xml = new JKL.ParseXML(ifc_url, "input=" + request);
	var data = xml.parse();
	err(data.response_data, "text_save()", request);

	/**
	 * append text into parent area
	 */
	document.getElementById("area_" + selected_text.split("_")[1]).innerHTML = document.getElementById("text").value;

	/**
	 * close text editor and unselect area
	 */
	text_close();
}


/**
 * function text_close()
 *
 * if text editor is opened, hide it
 *
 * no params needed ;-)
 */
function text_close() {
	var text_overlay = document.getElementById("text_overlay");
	var text_editor = document.getElementById("text_editor");

	if (text_editor.hasChildNodes()) {
    	while (text_editor.childNodes.length >= 1) text_editor.removeChild(text_editor.firstChild);       
    }

	document.body.removeChild(text_editor);
	document.body.removeChild(text_overlay);
	selected_text = null;
}