/**
 * function draw_page()
 *
 * get page indentified by pt_page_ID and draw it according
 * to returned XML data. optionally also display background
 * and foreground image and store all dropadble areas on this
 * page in array
 *
 * @param int "pt_page_ID" (page ID)
 */
function draw_page() {

	/**
	 * 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_page</command>\n";
	request += "	<index>" + current_page_index + "</index>\n";
	request += "</request_data>\n";

	var xml = new JKL.ParseXML(ifc_url, "input=" + request);
	var data = xml.parse();
	err(data.response_data, "draw_page()", request);
	var area = data.response_data.page.area;
	var template_wrap = document.getElementById("template_wrap");
	var dest_pt_template_ID = data.response_data.page.dest_pt_template_ID;
	var page_index = data.response_data.page.page_index;

	/**
	 * select template, accordin to it's ID in response
	 */
	select_template(data.response_data.page.pt_page_ID);

	/**
	 * clear thumbnails content, but do not remove childNodes
	 */
	if (template_wrap.hasChildNodes()) {
		while (template_wrap.childNodes.length >= 1) template_wrap.removeChild(template_wrap.firstChild);
	}

	/**
	 * in some cases, we do not want to display background even if it is defined...
	 */
	var display_bg = (template_group != "cup" && template_group != "cup_color" && template_group != "cup_simple" && template_group != "pillow" && template_group != "key" && template_group != "w_underwear" && template_group != "m_underwear") ? true : false;

	/**
	 * if there is some image in first laye of this page, we will display
	 * it as background. but because we will need to resize it optionally
	 * we won't display it now, just append the element
	 */
	if (data.response_data.page.layer_first.bitmap && display_bg == true) {
		var t_bg = document.createElement("img");
		t_bg.id = "template_bg";
		t_bg.className = "template_bg";
		template_wrap.appendChild(t_bg);
	}

	/**
	 * create new element within template wrapper and give him dimensions defined
	 * by this page
	 */
	var wrap = document.createElement("div");
	wrap.id = "template";
	template_wrap.appendChild(wrap);
	var t = document.getElementById("template");

	/**
	 * now depending on template type get maximum template dimensions.
	 */
	switch (template_group) {
		case "poster":
			t_max_width = template_dimensions[0][0];
			t_max_height = template_dimensions[0][1];
			break;
		case "callendar":
			t_max_width = template_dimensions[1][0];
			t_max_height = template_dimensions[1][1];
			break;
		case "photobook":
			t_max_width = template_dimensions[2][0];
			t_max_height = template_dimensions[2][1];
			break;
		case "puzzle":
			t_max_width = template_dimensions[3][0];
			t_max_height = template_dimensions[3][1];
			break;
		case "cup_simple" :
		case "cup_color" :
		case "cup":
			t_max_width = template_dimensions[4][0];
			t_max_height = template_dimensions[4][1];
			break;
		case "mousepad":
			t_max_width = template_dimensions[5][0];
			t_max_height = template_dimensions[5][1];
			break;
		case "pillow":
			t_max_width = template_dimensions[6][0];
			t_max_height = template_dimensions[6][1];
			break;
		case "key":
			t_max_width = template_dimensions[7][0];
			t_max_height = template_dimensions[7][1];
			break;
		case "w_underwear":
			t_max_width = template_dimensions[8][0];
			t_max_height = template_dimensions[8][1];
			break;
		case "m_underwear":
			t_max_width = template_dimensions[9][0];
			t_max_height = template_dimensions[9][1];
			break;
		default:
			t_max_width = template_dimensions[10][0];
			t_max_height = template_dimensions[10][1];
			break;
	}

	var c_width = t_max_width / data.response_data.page.width;
	var c_height = t_max_height / data.response_data.page.height;
	var coefficient = c_width < c_height ? c_width : c_height;

	/**
	 * define width, height, margin and position of wrapper
	 */
	var template_width = data.response_data.page.width * coefficient;
	var template_height = data.response_data.page.height * coefficient;

	/**
	 * continue with template styling
	 */
	var margin_top_bottom = (template_wrap.clientHeight - template_height) / 2;
	var margin_left_right = (template_wrap.clientWidth - template_width) / 2;

	t.style.width = template_width + "px";
	t.style.height = template_height + "px";
	t.style.margin = margin_top_bottom + "px " + margin_left_right + "px";
	t.style.position = "absolute";

	/**
	 * now that we know template width and height, we can display resized
	 * template background
	 */
	if (data.response_data.page.layer_first.bitmap && display_bg == true) {
		var bg_xml = new JKL.ParseXML(ip_url + "?action=resize_bg&pt_template_ID=" + dest_pt_template_ID + "&image_path=" + data.response_data.page.layer_first.bitmap + "&width=" + template_width + "&height=" + template_height);
		var bg_data = bg_xml.parse();
		t_bg.src = bg_data.response_data.template.bg_path;
		t_bg.style.margin = margin_top_bottom + "px " + margin_left_right + "px";
	}

	/**
	 * and finally, create shadown, borders etc. depending on template type
	 */
	switch (template_group) {
		case "poster":

			/**
			 * top image
			 */
			var t_top = document.createElement("img");
			t_top.id = "t_top";
			if (template_width > template_height) {
				t_top.src = url + "images/collage_top.gif";
				t_top.style.top = "12px";
				t_top.style.left = "20px";
			} else {
				t_top.src = url + "images/collage_top_short.gif";
				t_top.style.top = "12px";
				t_top.style.left = "128px";
			}
			t_top.style.position = "absolute";
			template_wrap.appendChild(t_top);
			t_top = null;

			/**
			 * right image
			 */
			var t_right = document.createElement("img");
			t_right.id = "t_right";
			t_right.src = url + "images/collage_right.gif";
			t_right.style.position = "absolute";
			t_right.style.top = "12px";
			t_right.style.left = (template_width > template_height) ? "520px" : "411px";
			template_wrap.appendChild(t_right);
			t_right = null;

			/**
			 * bottom image
			 */
			var t_bottom = document.createElement("img");
			t_bottom.id = "t_bottom";
			t_bottom.style.position = "absolute";
			if (template_width > template_height) {
				t_bottom.src = url + "images/collage_bottom.gif";
				t_bottom.style.top = "404px";
				t_bottom.style.left = "20px";
			} else {
				t_bottom.src = url + "images/collage_bottom_short.gif";
				t_bottom.style.top = "404px";
				t_bottom.style.left = "128px";
			}
			template_wrap.appendChild(t_bottom);
			t_bottom = null;

			/**
			 * left image
			 */
			var t_left = document.createElement("img");
			t_left.id = "t_left";
			t_left.src = url + "images/collage_left.gif";
			t_left.style.position = "absolute";
			t_left.style.top = "11px";
			t_left.style.left = (template_width > template_height) ? "6px" : "114px";
			template_wrap.appendChild(t_left);
			t_left = null;

			/**
			 * big preview link
			 */
			var big_preview = document.getElementById("big_preview");
			if (big_preview != null) big_preview.parentNode.removeChild(big_preview);
			
			big_preview = document.createElement("a");
			big_preview.href = "#preview";
			big_preview.id = "big_preview";
			big_preview.style.cursor = "pointer";
			document.getElementById("wrap").appendChild(big_preview);
			addEvent(big_preview, "mouseup", function() { preview_show(current_page_index); return false;});

			var big_preview_text = document.getElementById("big_preview_text");
			if (big_preview_text != null) big_preview_text.style.display = "block";
			break;

		case "callendar":

			/**
			 * top image
			 */
			var t_top = document.createElement("img");
			t_top.id = "t_top";
			t_top.src = url + "images/callendar_top.gif";
			t_top.style.position = "absolute";
			t_top.style.top = "14px";
			t_top.style.left = "136px";
			template_wrap.appendChild(t_top);
			t_top = null;

			/**
			 * right image
			 */
			var t_right = document.createElement("img");
			t_right.id = "t_right";
			t_right.src = url + "images/callendar_right.gif";
			t_right.style.position = "absolute";
			t_right.style.top = "14px";
			t_right.style.left = "403px";
			template_wrap.appendChild(t_right);
			t_right = null;

			/**
			 * bottom image
			 */
			var t_bottom = document.createElement("img");
			t_bottom.id = "t_bottom";
			t_bottom.src = url + "images/callendar_bottom.gif";
			t_bottom.style.position = "absolute";
			t_bottom.style.top = "401px";
			t_bottom.style.left = "136px";
			template_wrap.appendChild(t_bottom);
			t_bottom = null;

			/**
			 * left image
			 */
			var t_left = document.createElement("img");
			t_left.id = "t_left";
			t_left.src = url + "images/callendar_left.gif";
			t_left.style.position = "absolute";
			t_left.style.top = "14px";
			t_left.style.left = "122px";
			template_wrap.appendChild(t_left);
			t_left = null;

			/**
			 * big preview link
			 */
			var big_preview = document.getElementById("big_preview");
			if (big_preview != null) big_preview.parentNode.removeChild(big_preview);
			
			big_preview = document.createElement("a");
			big_preview.href = "#preview";
			big_preview.id = "big_preview";
			big_preview.style.cursor = "pointer";
			document.getElementById("wrap").appendChild(big_preview);
			addEvent(big_preview, "mouseup", function() { preview_show(current_page_index); return false;});

			var big_preview_text = document.getElementById("big_preview_text");
			if (big_preview_text != null) big_preview_text.style.display = "block";
			
			break;

		case "photobook":

			/**
			 * top image
			 */
			var t_top = document.createElement("img");
			t_top.id = "t_top";
			t_top.src = url + "images/photobook_top.gif";
			t_top.style.position = "absolute";
			t_top.style.top = "16px";
			t_top.style.left = "135px";
			template_wrap.appendChild(t_top);
			t_top = null;

			/**
			 * bottom image
			 */
			var t_bottom = document.createElement("img");
			t_bottom.id = "t_bottom";
			t_bottom.src = url + "images/photobook_bottom.gif";
			t_bottom.style.position = "absolute";
			t_bottom.style.top = "401px";
			t_bottom.style.left = "135px";
			template_wrap.appendChild(t_bottom);
			t_bottom = null;

			/**
			 * left image, depending on page index
			 */
			var t_left = document.createElement("img");
			t_left.id = "t_left";
			t_left.style.position = "absolute";
			t_left.style.top = "16px";
			switch (page_index % 2) {
				case 1:
					t_left.src = url + "images/photobook_left_shadow.gif";
					t_left.style.left = "121px";
					break;
				case 0:
					t_left.src = url + "images/photobook_left_texture.gif";
					t_left.style.left = "83px";
					break;
			}
			template_wrap.appendChild(t_left);
			t_left = null;

			/**
			 * right image, depending on page index
			 */
			var t_right = document.createElement("img");
			t_right.id = "t_right";
			t_right.style.position = "absolute";
			t_right.style.top = "16px";
			switch (page_index % 2) {
				case 1:
					t_right.src = url + "images/photobook_right_texture.gif";
					t_right.style.left = "393px";
					break;
				case 0:
					t_right.src = url + "images/photobook_right_shadow.gif";
					t_right.style.left = "403px";
					break;
			}
			template_wrap.appendChild(t_right);
			t_right = null;

			/**
			 * big preview link
			 */
			var big_preview = document.getElementById("big_preview");
			if (big_preview != null) big_preview.parentNode.removeChild(big_preview);
			
			big_preview = document.createElement("a");
			big_preview.href = "#preview";
			big_preview.id = "big_preview";
			big_preview.style.cursor = "pointer";
			document.getElementById("wrap").appendChild(big_preview);
			addEvent(big_preview, "mouseup", function() { preview_show(current_page_index); return false;});
			
			var big_preview_text = document.getElementById("big_preview_text");
			if (big_preview_text != null) big_preview_text.style.display = "block";
			
			break;

		default:
		case "puzzle":

			/**
			 * top image
			 */
			var t_top = document.createElement("img");
			t_top.id = "t_top";
			t_top.src = url + "images/puzzle_top.gif";
			t_top.style.position = "absolute";
			t_top.style.top = "31px";
			t_top.style.left = "30px";
			template_wrap.appendChild(t_top);
			t_top = null;

			/**
			 * right image
			 */
			var t_right = document.createElement("img");
			t_right.id = "t_right";
			t_right.src = url + "images/puzzle_right.gif";
			t_right.style.position = "absolute";
			t_right.style.top = "31px";
			t_right.style.left = "510px";
			template_wrap.appendChild(t_right);
			t_right = null;

			/**
			 * bottom image
			 */
			var t_bottom = document.createElement("img");
			t_bottom.id = "t_bottom";
			t_bottom.src = url + "images/puzzle_bottom.gif";
			t_bottom.style.position = "absolute";
			t_bottom.style.top = "385px";
			t_bottom.style.left = "30px";
			template_wrap.appendChild(t_bottom);
			t_bottom = null;

			/**
			 * left image
			 */
			var t_left = document.createElement("img");
			t_left.id = "t_left";
			t_left.src = url + "images/puzzle_left.gif";
			t_left.style.position = "absolute";
			t_left.style.top = "30px";
			t_left.style.left = "16px";
			template_wrap.appendChild(t_left);
			t_left = null;

			break;

		case "cup":
		case "cup_simple" :
		case "cup_color" :

			/**
			 * background image
			 */
			var cup = document.createElement("img");
			cup.id = "t_top";
			cup.src = url + "images/cup.jpg";
			cup.style.position = "absolute";
			cup.style.top = "29px";
			cup.style.left = "1px";
			cup.style.zIndex = "-10";
			template_wrap.appendChild(cup);
			cup = null;

			/**
			 * because of the cup's ear, we cannot use centered position here
			 * and whole tempalte must be moved left
			 */
			t.style.marginLeft = "20px";

			break;

		case "mousepad":

			/**
			 * top image
			 */
			var t_top = document.createElement("img");
			t_top.id = "t_top";
			t_top.src = url + "images/mousepad_top.gif";
			t_top.style.position = "absolute";
			t_top.style.top = "12px";
			t_top.style.left = "43px";
			template_wrap.appendChild(t_top);
			t_top = null;

			/**
			 * right image
			 */
			var t_right = document.createElement("img");
			t_right.id = "t_right";
			t_right.src = url + "images/mousepad_right.gif";
			t_right.style.position = "absolute";
			t_right.style.top = "12px";
			t_right.style.left = "497px";
			template_wrap.appendChild(t_right);
			t_right = null;

			/**
			 * bottom image
			 */
			var t_bottom = document.createElement("img");
			t_bottom.id = "t_bottom";
			t_bottom.src = url + "images/mousepad_bottom.gif";
			t_bottom.style.position = "absolute";
			t_bottom.style.top = "404px";
			t_bottom.style.left = "43px";
			template_wrap.appendChild(t_bottom);
			t_bottom = null;

			/**
			 * left image
			 */
			var t_left = document.createElement("img");
			t_left.id = "t_left";
			t_left.src = url + "images/mousepad_left.gif";
			t_left.style.position = "absolute";
			t_left.style.top = "11px";
			t_left.style.left = "29px";
			template_wrap.appendChild(t_left);
			t_left = null;

			break;

		case "pillow":

			/**
			 * background image
			 */
			var pillow = document.createElement("img");
			pillow.id = "t_top";
			pillow.src = url + "images/pillow.jpg";
			pillow.style.position = "absolute";
			pillow.style.top = "32px";
			pillow.style.left = "83px";
			pillow.style.zIndex = "-10";
			template_wrap.appendChild(pillow);
			pillow = null;

			break;

		case "key":

			/**
			 * background image
			 */
			var key = document.createElement("img");
			key.id = "t_top";
			key.style.position = "absolute";

			/**
			 * switch image depending on current page index
			 */
			switch (parseInt(current_page_index)) {
				case 0:
					key.src = url + "images/key_0.jpg";
					key.style.top = "15px";
					key.style.left = "165px";
					break;
					
				case 1:
					key.src = url + "images/key_1.jpg";
					key.style.top = "15px";
					key.style.left = "131px";
					break;
			}

			key.style.zIndex = "-10";
			template_wrap.appendChild(key);
			key = null;

			/**
			 * because of the keyholder's ring, we cannot use centered position here
			 * and whole tempalte must be moved bottom
			 */
			t.style.marginTop = "159px";

			break;

		case "w_underwear":

			/**
			 * background image
			 */
			var w_underwear = document.createElement("img");
			w_underwear.id = "t_top";
			w_underwear.style.position = "absolute";

			/**
			 * switch image depending on current page index
			 */
			switch (parseInt(current_page_index)) {
				case 0:
					w_underwear.src = url + "images/w_underwear_0.jpg";
					w_underwear.style.top = "10px";
					w_underwear.style.left = "10px";
					t.style.marginTop = "74px";
					t.style.marginLeft = "174px";
					break;
					
				case 1:
					w_underwear.src = url + "images/w_underwear_1.jpg";
					w_underwear.style.top = "10px";
					w_underwear.style.left = "10px";
					t.style.marginTop = "46px";
					t.style.marginLeft = "258px";
					break;
			}

			w_underwear.style.zIndex = "-10";
			template_wrap.appendChild(w_underwear);
			w_underwear = null;

			break;

		case "m_underwear":

			/**
			 * background image
			 */
			var m_underwear = document.createElement("img");
			m_underwear.id = "t_top";
			m_underwear.style.position = "absolute";

			/**
			 * switch image depending on current page index
			 */
			switch (parseInt(current_page_index)) {
				case 0:
					m_underwear.src = url + "images/m_underwear_0.jpg";
					m_underwear.style.top = "10px";
					m_underwear.style.left = "10px";
					t.style.marginTop = "228px";
					t.style.marginLeft = "75px";
					break;
					
				case 1:
					m_underwear.src = url + "images/m_underwear_1.jpg";
					m_underwear.style.top = "10px";
					m_underwear.style.left = "10px";
					t.style.marginTop = "240px";
					t.style.marginLeft = "318px";
					break;
			}

			m_underwear.style.zIndex = "-10";
			template_wrap.appendChild(m_underwear);
			m_underwear = null;

			break;
	}

	/**
	 * store selected page ID
	 */
	page_selected = data.response_data.page.pt_page_ID;

	/**
	 * clear drop areas list
	 */
	drop_areas = new Array();

	/**
	 * if area is not array, we need to transform it into array
	 */
	if (typeof(area) != "undefined") {
		if (!area[0]) {
			tmp = [];
			tmp[0] = area;
			area = tmp;
		}
	}

	/**
	 * now go through areas...
	 */
	for (var i in area) {

		/**
		 * create new element within template, set Id and append to template
		 */
		var ae = area[i].flag_type == "image" ? document.createElement("div") : document.createElement("p");
		ae.id = "area_" + area[i].pt_area_ID;
		t.appendChild(ae);

		/**
		 * compute element's dimensions and position and apply. dimensions
		 * must be in pixel to get this application work in (fucking) MSIE6
		 */
		ae.className = area[i].flag_type == "text" ? "area_text" : "area_image";
		ae.style.width = template_width * area[i].position.width + "px";
		ae.style.height = template_height * area[i].position.height + "px";
		ae.style.top = template_height * area[i].position.top + "px";
		ae.style.left = template_width * area[i].position.left + "px";

		/**
		 * if this element is image, add it's absolute position to array
		 */
		if (area[i].flag_type == "image") {
			var posx = ae.offsetLeft;
			var posy = ae.offsetTop;
			var parent = ae;
			ae.title = "Sem přetáhněte fotku z horní lišty.";

			/**
			 * go throught all parent elements and add their offsets to current
			 * position. when <body> element reached, break
			 */
			while (parent.offsetParent) {
				posx += parent.offsetParent.offsetLeft;
				posy += parent.offsetParent.offsetTop;

				if(parent == document.getElementsByTagName("body")[0]) {
					break;
				} else {
					parent = parent.offsetParent;
				}
			}

			/**
			 * add position array to drop_areas. also add dimensions,
			 * relative position and dimensions percentage representation
			 * of one pixel in area's width and height. this will be useful
			 * when moving content inside area, we will avoid counting that
			 * can be done here ;-)
			 */
			var tmp = new Array();
			tmp["id"] = ae.id;
			tmp["top"] = posy;
			tmp["left"] = posx;
			tmp["width"] = ae.clientWidth;
			tmp["height"] = ae.clientHeight;
			tmp["rel_top"] = area[i].position.top;
			tmp["rel_left"] = area[i].position.left;
			tmp["rel_width"] = area[i].position.width;
			tmp["rel_height"] = area[i].position.height;
			tmp["px_x"] = 1 / ae.clientWidth;
			tmp["px_y"] = 1 / ae.clientHeight;
			drop_areas[i] = tmp;
			tmp = null;

			/**
			 * and now the funny thing... if this area's <src> and <pt_image_ID> are not
			 * empty, it means that some image is assigned to area
			 */
			if (typeof(area[i].src) != "undefined" && typeof(area[i].pt_image_ID) != "undefined") {

				/**
				 * we need above_area to be set...
				 */
				above_area = ae;

				/**
				 * first assign image
				 */
				assign_image(false, area[i].src, false);

				/**
				 * get image container and image itself
				 */
				var img_wrap = ae.firstChild;
				var img_img = ae.firstChild.firstChild;

				/**
				 * if image rotation is not zero, request rotated image URL. we
				 * will not position or resize image here, but we must swap image
				 * original width and height
				 */
				if (area[i].rotation > 0) {
				    var rxml = new JKL.ParseXML(ip_url + "?action=rotate&image_path=" + area[i].src + "&rotation=" + area[i].rotation);
					var rdata = rxml.parse();
					img_img.src = url + rdata.response_data.image.cache_url;

					/**
					 * if rotation is not 180, we must swap image dimensions
					 */
					if (area[i].rotation != 180) {
						var rel_width_original = assigned_images[area[i].pt_area_ID]["rel_width_original"];
						var rel_height_original = assigned_images[area[i].pt_area_ID]["rel_height_original"];
						assigned_images[area[i].pt_area_ID]["rel_width_original"] = rel_height_original;
						assigned_images[area[i].pt_area_ID]["rel_height_original"] = rel_width_original;
					}

					/**
					 * update rotation info in assigned images array
					 */
					assigned_images[area[i].pt_area_ID]["rotation"] = area[i].rotation;
				}

				/**
				 * if area crop positions and dimensions are not defined, it means
				 * we have swapped templates for current page. in that case we must
				 * size and position image again, basically do the same thing as we
				 * do when assigning new image
				 */
				if (!area[i].crop.width) {
					var area_width = drop_areas[i].width;
					var area_height = drop_areas[i].height;

					var i_width = assigned_images[area[i].pt_area_ID]["width"];
					var i_height = assigned_images[area[i].pt_area_ID]["height"];
					var c_img = i_width / i_height;
					var c_area = area_width / area_height;

					/**
					 * do we want to stretch image to area width, or height?
					 */
					if (c_area >= 1) {
						if (c_img >= c_area) var stretch_to = "height";
						if (c_img < c_area) var stretch_to = "width";
					} else {
						if (c_img >= c_area) var stretch_to = "height";
						if (c_img < c_area) var stretch_to = "width";
					}

					/**
					 * and stretch image...
					 */
					if (stretch_to == "width") {
						var abs_width = area_width;
						var abs_height = (area_width / i_width) * i_height;
						var rel_width = 1;
						var rel_height = (area_width / area_height) / c_img;
					} else {
						var abs_width = (area_height / i_height) * i_width;
						var abs_height = area_height;
						var rel_width = (area_height / area_width) * c_img;
						var rel_height = 1;
					}

					area[i].crop.width = rel_width;
					area[i].crop.height = rel_height;
					area[i].crop.left = 0;
					area[i].crop.top = 0;
				}

				/**
				 * get ammount of zoom steps from image and area dimensions
				 */
				assigned_images[area[i].pt_area_ID]["rel_width"] = area[i].crop.width;
				assigned_images[area[i].pt_area_ID]["rel_height"] = area[i].crop.height;

				img_wrap.style.width = area[i].crop.width * ae.clientWidth + "px";
				img_wrap.style.height = area[i].crop.height * ae.clientHeight + "px";
				img_img.style.width = area[i].crop.width * ae.clientWidth + "px";
				img_img.style.height = area[i].crop.height * ae.clientHeight + "px";

				/**
				 * get zoom level
				 */
				assigned_images[area[i].pt_area_ID]["zoom_level"] = Math.round(area[i].crop.width / assigned_images[area[i].pt_area_ID]["rel_width_original"] * 100) / 10 - 10;

				/**
				 * update image position
				 */
				assigned_images[area[i].pt_area_ID]["top"] = area[i].crop.top;
				assigned_images[area[i].pt_area_ID]["left"] = area[i].crop.left;

				img_wrap.style.top = area[i].crop.top * ae.clientHeight + "px";
				img_wrap.style.left = area[i].crop.left * ae.clientWidth + "px";
				img_img.style.top = area[i].crop.top * ae.clientHeight + "px";
				img_img.style.left = area[i].crop.left * ae.clientWidth + "px";
			}
		}

		/**
		 * if this element is text, assign mouseover, mouseout and
		 * mouseclick actions
		 */
		if (area[i].flag_type == "text") {
			ae.title = "Kliknutím můžete vložit nebo upravit již vložený text.";
			ae.innerHTML = typeof(area[i].text) == "undefined" ? "" : base64_decode(area[i].text);
			addEvent(ae, "mouseover", text_over, true);
			addEvent(ae, "mouseout", text_out, true);
			addEvent(ae, "click", text_edit, true);
		}

		ae = null;
	}
}