/**
 * to enable drag limit to area borders, uncomment theese lines:
 * 260, 263, 265, 268
 * 334, 337, 339, 342
 * 461, 512
 */


/**
 * function assign_image()
 *
 * get image by it's Id and assign it into area
 *
 * @param int album_image "index of element an array album_images, where full path is stored"
 * @param string src "URL of image which will be assigned"
 * @param boolean area_select "select area into which image is assigned?"
 */
 
function get_smaller_format(src) {
	var rest = src.substr(src.length - 6, 2);
	return rest != "_D" ? (src.substr(0, src.length - 4) + "_D" + src.substr(src.length - 4, 4)) : src;
}
 
function assign_image(album_image, src, area_select) {

	//var image_path = album_image === false ? src : album_images[album_image];
	
	/**
	 * ok, first of all, we need to make selected image smaller
	 * to handle it without problems. so we will call external
	 * library and give her pt_image_ID and maximum image width
	 * and height... image URL will be response
	 */
	if (album_image === false) {
		
	    var xml = new JKL.ParseXML(ip_url + "?action=resize&image_path=" + get_smaller_format(src) + "&max_width=" + resize_max_width + "&max_height=" + resize_max_height);
		var data = xml.parse();
		
	} else {
		var data = new Object();
		data.response_data = new Object();
		data.response_data.image = new Object();
		
		var ratio = parseFloat(album_images_ratio[album_image]);
		if (ratio > 1) {
			data.response_data.image.width = 500;
			data.response_data.image.height = Math.round(500.0 / ratio);
		} else {
			data.response_data.image.width = Math.round(500.0 * ratio);
			data.response_data.image.height = 500;
		}
			
		data.response_data.image.cache_url = "../isrc/" + album_images_medium[album_image];
	}
	
	/**
	 * now we need to know dimensions of area we are dropping image to
	 */
	for (var i in drop_areas) {
		if (drop_areas[i]["id"] == above_area.id) {
			var area_width = drop_areas[i]["width"];
			var area_height = drop_areas[i]["height"];
			break;
		}
	}

	/**
	 * now compute image relative and absolute width and height according to
	 * area dimensions. theese values will be given to XML parser. absolute
	 * values will be used to size and position the element within area, cause
	 * when width and height is defined relatively in percentes, we cannot
	 * properly adjust element's position
	 */
	var i_width = data.response_data.image.width;
	var i_height = data.response_data.image.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;
	}

	/**
	 * because of Opera, image must be contained in DIV. but
	 * because we will also need to resize this image, it cannot
	 * be DIVs background, but ordinary IMG tag...
	 */
	var img_wrap = document.createElement("div");

	img_wrap.id = "drop_wrap_" + above_area.id.split("_")[1];
	img_wrap.style.width = abs_width + "px";
	img_wrap.style.height = abs_height + "px";
	img_wrap.style.cursor = "pointer";
	addEvent(img_wrap, "mousedown", select_area, true);
	addEvent(img_wrap, "mousedown", drag_content, true);

	var img_img = document.createElement("img");
	img_img.id = "drop_image_" + above_area.id.split("_")[1];
	img_img.src = url + data.response_data.image.cache_url;
	
	img_img.style.width = abs_width + "px";
	img_img.style.height = abs_height + "px";
	img_wrap.appendChild(img_img);

	/**
	 * remove any content target area has and append new child
	 */
	if (above_area.hasChildNodes()) {
		while (above_area.childNodes.length >= 1) above_area.removeChild(above_area.firstChild);       
	}
	above_area.appendChild(img_wrap);

	/**
	 * insert into array of assigned images. array key will be area
	 * ID without any other text
	 */
	var tmp = new Array();
	tmp["album_image"] = album_image;
	tmp["src"] = src == false ? album_images[album_image] : src;
	tmp["area_id"] = above_area.id;
	tmp["width"] = data.response_data.image.width;
	tmp["height"] = data.response_data.image.height
	tmp["top"] = 0;
	tmp["left"] = 0;
	tmp["rel_width"] = rel_width;
	tmp["rel_height"] = rel_height;
	tmp["rotation"] = 0;
	tmp["rel_width_original"] = rel_width;
	tmp["rel_height_original"] = rel_height;
	tmp["zoom_level"] = 0;
	assigned_images[above_area.id.split("_")[1]] = tmp;
	tmp = null;

	/**
	 * change className of above_area to clear it's background and
	 * select are, if we want to
	 */
	above_area.className = "area_image_filled";
	if (area_select == true) select_area(above_area);
}


/**
 * function drag_content()
 *
 * if left mouse button is pressed, grab whatever is in drop area
 * and put it in drag_area_content variable to be accessible later.
 * also count get current position and store it in diff variables
 *
 * @param event "evt" (event which called this function)
 */
function drag_content(evt) {
	evt = evt || window.event;
	var element = evt.srcElement ? evt.srcElement.parentNode : evt.target.parentNode;

	/**
	 * left mouse button must be clicked
	 */
	if ((evt.button == 1 && window.event != null) || evt.button == 0) {

		/**
		 * set element as drag_area_content
		 */
		drag_area_content = element;

		/**
		 * now get all area properties and store them in separate array
		 */
		for (var i in drop_areas) {
			if (drop_areas[i]["id"] == drag_area_content.parentNode.id) {
				current_drop_area = drop_areas[i];
				break;
			}
		}

		/**
		 * set cursor above content to move
		 */
		drag_area_content.style.cursor = "move";

		/**
		 * set start position for mouse cursor and position difference
		 */
		mouse_startx = evt.clientX;
		mouse_starty = evt.clientY;
		diffx = assigned_images[drag_area_content.parentNode.id.split("_")[1]]["left"];
		diffy = assigned_images[drag_area_content.parentNode.id.split("_")[1]]["top"];

		/**
		 * start moving element with mouse
		 */
		addEvent(document, "mousemove", move_content, true);
		addEvent(document, "mouseup", drop_content);

		/**
		 * cancel any text selections and prevent anything to be selected
		 */
		document.body.focus();
		document.onselectstart = function () { return false; };
		element.ondragstart = function() { return false; };
	}

	/**
	 * always return false form this function
	 */
	return false;
}


/**
 * function move_content()
 *
 * move image according to current cursor position
 *
 * @param event "evt" (event which called this function)
 */
function move_content(evt) {
	if (drag_area_content) {
		evt = evt || window.event;
		var mousex = evt.clientX;
		var mousey = evt.clientY;
		var pt_area_ID = drag_area_content.id.split("_")[2];

		/**
		 * get new relative position within this document
		 */
		var relx = ((mousex - mouse_startx) * current_drop_area["px_x"]) + parseFloat(diffx);
		var rely = ((mousey - mouse_starty) * current_drop_area["px_y"]) + parseFloat(diffy);

		/**
		 * get top left corner position. also get bottom 
		 */
		var left = 100 * relx;
		var right = 100 * (relx + parseFloat(assigned_images[pt_area_ID]["rel_width"]));
		var top = 100 * rely;
		var bottom = 100 * (rely + parseFloat(assigned_images[pt_area_ID]["rel_height"]));

		/**
		 * no free space must be left on image sides
		 */

//		if (left <= 0 && right >= 100) {
			assigned_images[pt_area_ID]["left"] = relx;
			drag_area_content.style.left = 100 * relx + "%";
//		}

//		if (top <= 0 && bottom >= 100) {
			assigned_images[pt_area_ID]["top"] = rely;
			drag_area_content.style.top = 100 * rely + "%";
//		}
	}

	/**
	 * always return false from this function
	 */
	return false;
}


/**
 * function key_move_content()
 *
 * if area is selected, move content on key press
 *
 * @param event "evt" (event which called this function)
 */
function key_move_content(evt) {
	if (selected_area) {
		evt = evt || window.event;
		var pt_area_ID = selected_area.split("_")[1];
		var drag_area_content = document.getElementById(selected_area).firstChild;

		/**
		 * now get all area properties and store them in separate array
		 */
		for (var i in drop_areas) {
			if (drop_areas[i]["id"] == selected_area) {
				current_drop_area = drop_areas[i];
				break;
			}
		}

		/**
		 * set move pixels count depending on pressed key
		 */
		var m_top = 0;
		var m_left = 0;

		switch (evt.keyCode) {
			case 37: m_left = -1 * key_move; break;
			case 38: m_top = -1 * key_move; break;
			case 39: m_left = 1 * key_move; break;
			case 40: m_top = 1 * key_move; break;
		}

		/**
		 * get difference caused by this move
		 */
		var diff_top = current_drop_area["px_y"] * m_top;
		var diff_left = current_drop_area["px_x"] * m_left;

		var rely = parseFloat(assigned_images[pt_area_ID]["top"]) + diff_top;
		var relx = parseFloat(assigned_images[pt_area_ID]["left"]) + diff_left;

		/**
		 * get top left corner position. also get bottom 
		 */
		var left = 100 * relx;
		var right = 100 * (relx + parseFloat(assigned_images[pt_area_ID]["rel_width"]));
		var top = 100 * rely;
		var bottom = 100 * (rely + parseFloat(assigned_images[pt_area_ID]["rel_height"]));

		/**
		 * no free space must be left on image sides
		 */
//		if (left <= 0 && right >= 100) {
			assigned_images[pt_area_ID]["left"] = relx;
			drag_area_content.style.left = 100 * relx + "%";
//		}

//		if (top <= 0 && bottom >= 100) {
			assigned_images[pt_area_ID]["top"] = rely;
			drag_area_content.style.top = 100 * rely + "%";
//		}

		/**
		 * return false from this function
		 */
		return false;
	}
}
addEvent(document, "keydown", key_move_content);


/**
 * function drop_content()
 *
 * drop dragged content. because are just changing position and everything
 * was written when content was moved, we just set dragged_area_content to
 * null and return false
 *
 * no params needed ;-)
 */
function drop_content() {
	if (drag_area_content) {
		drag_area_content.style.cursor = "pointer";
		drag_area_content = null;
	}
	return false;
}


/**
 * function zoom_in()
 *
 * zoom image in by percentage in settings, update image relative
 * width and height in assigned images array
 *
 * @param int "steps" (number of zoom steps to perform)
 */
function zoom_in(steps) {

	/**
	 * get area element and parent area ID
	 */
	var element = document.getElementById(selected_area);
	var pt_area_ID = element.id.split("_")[1];

	/**
	 * get current drop area
	 */
	for (var i in drop_areas) {
		if (drop_areas[i]["id"] == element.id) {
			current_drop_area = drop_areas[i];
			break;
		}
	}

	/**
	 * compute new relative dimensions of image
	 */
	var zoom_level = assigned_images[pt_area_ID]["zoom_level"] + steps;
	var rel_width = assigned_images[pt_area_ID]["rel_width_original"] * (1 + (Math.round(zoom_step * zoom_level * 10) / 10));
	var rel_height = assigned_images[pt_area_ID]["rel_height_original"] * (1 + (Math.round(zoom_step * zoom_level * 10) / 10));

	/**
	 * set new relative dimensions and zoom level in array
	 * containing assigned images
	 */
	assigned_images[pt_area_ID]["rel_width"] = rel_width;
	assigned_images[pt_area_ID]["rel_height"] = rel_height;
	assigned_images[pt_area_ID]["zoom_level"] = zoom_level;

	/**
	 * set new width and height for image and it's container inside area
	 */
	var img_wrap = document.getElementById("drop_wrap_" + pt_area_ID);
	img_wrap.style.width = rel_width * current_drop_area["width"] + "px";
	img_wrap.style.height = rel_height * current_drop_area["height"] + "px";

	var img_img = document.getElementById("drop_image_" + pt_area_ID);
	img_img.style.width = rel_width * current_drop_area["width"] + "px";
	img_img.style.height = rel_height * current_drop_area["height"] + "px";
}


/**
 * function zoom_out()
 *
 * zoom image out by percentage in settings, update image relative
 * width and height in assigned images array
 *
 * no params needed ;-)
 */
function zoom_out() {

	/**
	 * get area element and parent area ID
	 */
	var element = document.getElementById(selected_area);
	var pt_area_ID = element.id.split("_")[1];

	/**
	 * get current drop area
	 */
	for (var i in drop_areas) {
		if (drop_areas[i]["id"] == element.id) {
			current_drop_area = drop_areas[i];
			break;
		}
	}

	/**
	 * compute new relative dimensions of image
	 */
	var zoom_level = assigned_images[pt_area_ID]["zoom_level"] - 1;
	var rel_width = assigned_images[pt_area_ID]["rel_width_original"] * (1 + (Math.round(zoom_step * zoom_level * 10) / 10));
	var rel_height = assigned_images[pt_area_ID]["rel_height_original"] * (1 + (Math.round(zoom_step * zoom_level * 10) / 10));

	/**
	 * zoom level must be 1 or higher to proceed
	 */
//	if (zoom_level >= 0) {

		/**
		 * set new relative dimensions and zoom level in array
		 * containing assigned images
		 */
		assigned_images[pt_area_ID]["rel_width"] = rel_width;
		assigned_images[pt_area_ID]["rel_height"] = rel_height;
		assigned_images[pt_area_ID]["zoom_level"] = zoom_level;

		/**
		 * set new width and height for image and it's container inside area
		 */
		var img_wrap = document.getElementById("drop_wrap_" + pt_area_ID);
		img_wrap.style.width = rel_width * current_drop_area["width"] + "px";
		img_wrap.style.height = rel_height * current_drop_area["height"] + "px";

		var img_img = document.getElementById("drop_image_" + pt_area_ID);
		img_img.style.width = rel_width * current_drop_area["width"] + "px";
		img_img.style.height = rel_height * current_drop_area["height"] + "px";

		/**
		 * get left, right, top and bottom position 
		 */
		var left = parseFloat(assigned_images[pt_area_ID]["left"]);
		var right = parseFloat(assigned_images[pt_area_ID]["left"]) + rel_width;
		var top = parseFloat(assigned_images[pt_area_ID]["top"]);
		var bottom = parseFloat(assigned_images[pt_area_ID]["top"]) + rel_height;

		/**
		 * if there is some empty space left, we must move the image.
		 * to avoid errors when image was positioned according to top
		 * and left side, we will perform other movements only if theese
		 * have not been used
		 */
		if (left > 0) {
			img_wrap.style.left = "0px";
			assigned_images[pt_area_ID]["left"] = 0;
		}
		if (right < 1) {
			img_wrap.style.left = current_drop_area["width"] * (parseFloat(assigned_images[pt_area_ID]["left"]) + (1 - right)) + "px";
			assigned_images[pt_area_ID]["left"] = parseFloat(assigned_images[pt_area_ID]["left"]) + (1 - right);
		}
		if (top > 0) {
			img_wrap.style.top = "0px";
			assigned_images[pt_area_ID]["top"] = 0;
		}
		if (bottom < 1) {
			img_wrap.style.top = current_drop_area["height"] * (parseFloat(assigned_images[pt_area_ID]["top"]) + (1 - bottom)) + "px";
			assigned_images[pt_area_ID]["top"] = parseFloat(assigned_images[pt_area_ID]["top"]) + (1 - bottom);
		}
//	}
}


/**
 * function rotate()
 *
 * zoom image in by percentage in settings, update image relative
 * width and height in assigned images array
 *
 * @param string "direction" ("left", "right")
 */
function rotate(direction) {

	/**
	 * get rotation in degrees from given direction
	 */
	switch (direction) {
		case "left":
			rotation = rotation_step;
			break;
		case "right":
			rotation = -1 * rotation_step;
			break;
	}

	/**
	 * get area element and parent area ID
	 */
	var element = document.getElementById(selected_area);
	var pt_area_ID = element.id.split("_")[1];

	/**
	 * get current drop area
	 */
	for (var i in drop_areas) {
		if (drop_areas[i]["id"] == element.id) {
			current_drop_area = drop_areas[i];
			break;
		}
	}

	/**
	 * now get new rotation from array of assigned images and
	 * given rotation. if rotation is higher than 360, decrease
	 * it by 360. if it is lower than 0, increase it by 360
	 */
	var new_rotation = parseInt(assigned_images[pt_area_ID]["rotation"]) + rotation;
	if (new_rotation >= 360) new_rotation -= 360;
	if (new_rotation < 0) new_rotation += 360;

	/**
	 * call image processor, which will rotate the image and will return
	 * URL of rotated image
	 */
    var xml = new JKL.ParseXML(ip_url + "?action=rotate&image_path=" + get_smaller_format(assigned_images[pt_area_ID]["src"]) + "&rotation=" + new_rotation);
	var data = xml.parse();

	/**
	 * first, we need to know image absolute dimensions after rotate. we
	 * will swap them immediatelly
	 */
	var abs_width = current_drop_area["height"] * assigned_images[pt_area_ID]["rel_height"];
	var abs_height = current_drop_area["width"] * assigned_images[pt_area_ID]["rel_width"];

	/**
	 * ok, if are width is higher than rotated image width, or area height is
	 * higher than rotated image height, wil need to zoom in...
	 */
	if (current_drop_area["width"] > abs_width || current_drop_area["height"] > abs_height) {

		/**
		 * how many zoom percents and thus zoom steps will be needed?
		 */
		var step_percent = zoom_step * 100;
		var zoom_percent = current_drop_area["width"] > abs_width ? (current_drop_area["width"] / abs_width - 1) * 100 : (current_drop_area["height"] / abs_height - 1) * 100;
		zoom_percent = Math.round(Math.ceil(Math.ceil(zoom_percent) / step_percent) * step_percent);
		var zoom_steps = Math.round(zoom_percent / 100 / zoom_step);

		/**
		 * zoom the image in
		 */
		zoom_in(zoom_steps);
	}

	/**
	 * ok, now that we have zoomed our image, we can rotate it...
	 */
	var width = assigned_images[pt_area_ID]["width"];
	var height = assigned_images[pt_area_ID]["height"];
	var rel_width = assigned_images[pt_area_ID]["rel_width"];
	var rel_height = assigned_images[pt_area_ID]["rel_height"];
	var rel_width_original = assigned_images[pt_area_ID]["rel_width_original"];
	var rel_height_original = assigned_images[pt_area_ID]["rel_height_original"];

	/**
	 * fixed dimensions can be simply swapped...
	 */
	var r_width = height;
	var r_height = width;

	/**
	 * but relative dimensions must be re-counted
	 */
	var c_area = current_drop_area["width"] / current_drop_area["height"];
	var r_rel_width = rel_height / c_area;
	var r_rel_height = rel_width * c_area;

	var r_rel_width_original = rel_height_original / c_area;
	var r_rel_height_original = rel_width_original * c_area;

	/**
	 * re-assign image dimensions
	 */
	assigned_images[pt_area_ID]["width"] = r_width;
	assigned_images[pt_area_ID]["height"] = r_height;
	assigned_images[pt_area_ID]["rel_width"] = r_rel_width;
	assigned_images[pt_area_ID]["rel_height"] = r_rel_height;
	assigned_images[pt_area_ID]["rel_width_original"] = r_rel_width_original;
	assigned_images[pt_area_ID]["rel_height_original"] = r_rel_height_original;
	assigned_images[pt_area_ID]["rotation"] = new_rotation;

	/**
	 * display new image and change it's size
	 */
	var img_wrap = document.getElementById("drop_wrap_" + pt_area_ID);
	img_wrap.style.width = current_drop_area["width"] * assigned_images[pt_area_ID]["rel_width"] + "px";
	img_wrap.style.height = current_drop_area["height"] * assigned_images[pt_area_ID]["rel_height"] + "px";

	var img_img = document.getElementById("drop_image_" + pt_area_ID);
	img_img.src = url + data.response_data.image.cache_url;
	img_img.style.width = current_drop_area["width"] * assigned_images[pt_area_ID]["rel_width"] + "px";
	img_img.style.height = current_drop_area["height"] * assigned_images[pt_area_ID]["rel_height"] + "px";

	/**
	 * get left, right, top and bottom position 
	 */
	var left = parseFloat(assigned_images[pt_area_ID]["left"]);
	var right = parseFloat(assigned_images[pt_area_ID]["left"]) + parseFloat(assigned_images[pt_area_ID]["rel_width"]);
	var top = parseFloat(assigned_images[pt_area_ID]["top"]);
	var bottom = parseFloat(assigned_images[pt_area_ID]["top"]) + parseFloat(assigned_images[pt_area_ID]["rel_height"]);

	/**
	 * if there is some empty space left, we must move the image
	 */
	if (left > 0) {
		img_wrap.style.left = "0px";
		assigned_images[pt_area_ID]["left"] = 0;
	}
	if (right < 1) {
		img_wrap.style.left = current_drop_area["width"] * (parseFloat(assigned_images[pt_area_ID]["left"]) + (1 - right)) + "px";
		assigned_images[pt_area_ID]["left"] = parseFloat(assigned_images[pt_area_ID]["left"]) + (1 - right);
	}
	if (top > 0) {
		img_wrap.style.top = "0px";
		assigned_images[pt_area_ID]["top"] = 0;
	}
	if (bottom < 1) {
		img_wrap.style.top = current_drop_area["height"] * (parseFloat(assigned_images[pt_area_ID]["top"]) + (1 - bottom)) + "px";
		assigned_images[pt_area_ID]["top"] = parseFloat(assigned_images[pt_area_ID]["top"]) + (1 - bottom);
	}
}


/**
 * function reset_image()
 *
 * re-assign image into area
 *
 * no params needed ;-)
 */
function reset_image() {
	var element = document.getElementById(selected_area);
	var pt_area_ID = element.id.split("_")[1];
	above_area = document.getElementById(selected_area);
	assign_image(false, assigned_images[pt_area_ID]["src"], false);
}


/**
 * function remove_image()
 *
 * remove any nodes within selected area, including displayed
 * image. remove image form array of assigned, reset area state
 * in session, set empty selected area variable and hide toolbar
 *
 * no params needed ;-)
 */
function remove_image() {
	var element = document.getElementById(selected_area);

	/**
	 * remove any content selected area has
	 */
	if (element.hasChildNodes()) {
		while (element.childNodes.length >= 1) element.removeChild(element.firstChild);       
	}

	/**
	 * remove image from assigned images array
	 */
	assigned_images[selected_area.split("_")[1]] = null;

	/**
	 * reset area in session
	 */
	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_area.split("_")[1] + "</pt_area_ID>\n";
	request += "	</area>\n";
	request += "</request_data>";

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

	/**
	 * clear transparency for all areas
	 */
	for (var i in drop_areas) {
		document.getElementById(drop_areas[i]["id"]).style.opacity = "1";
		document.getElementById(drop_areas[i]["id"]).style.filter = "aplha(opacity=100)";
	}

	/**
	 * unselect area
	 */
	selected_area = null;

	/**
	 * hide toolbar
	 */
	remove_toolbar();
}


/**
 * function select_area()
 *
 * store ID of area which was clicked in variable and call
 * function that will show / move toolbar
 *
 * @param event|obj "evt" (event that fired this function or
 *                         object indentification)
 */
function select_area(evt) {

	/**
	 * get image and area IDs
	 */
	if (typeof(evt) == "object" && evt.tagName) {
		var image_id = evt.id.split("_")[1];
	} else {
		evt = evt || window.event;
		var image_id = evt.srcElement ? evt.srcElement.parentNode.id.split("_")[2] : evt.target.parentNode.id.split("_")[2];
	}

	/**
	 * mark proper area as selected
	 */
	selected_area = "area_" + image_id;

	/**
	 * make all areas except selected semi-transparent
	 */
	for (var i in drop_areas) {
		if (drop_areas[i]["id"] != selected_area) {
			document.getElementById(drop_areas[i]["id"]).style.opacity = "0.7";
			document.getElementById(drop_areas[i]["id"]).style.filter = "alpha(opacity=70)";
		} else {
			document.getElementById(drop_areas[i]["id"]).style.opacity = "1";
			document.getElementById(drop_areas[i]["id"]).style.filter = "alpha(opacity=100)";
		}
	}

	/**
	 * show toolbar
	 */
	show_toolbar();

	/**
	 * add event which will optionally deselect area and will hide toolbar
	 * when something clicked
	 */
	addEvent(document, "mousedown", unselect_area);
}


/**
 * function unselect_area()
 *
 * check which element fired event calling this function and if it
 * wasn't drop element or toolbar, hide toolbar and unset area
 *
 * @param event "evt" (event calling this function)
 */
function unselect_area(evt) {
	evt = evt || window.event;

	/**
	 * get Id of element which fired this event
	 */
	var element = evt.srcElement ? evt.srcElement : evt.target;

	/**
	 * if it was any other element than drop elements, which fired this event,
	 * hide toolbar and unselect area
	 */
	if (element.parentNode.id != "toolbar" && element.id.split("_")[0] != "drop") {
		remove_toolbar();

		/**
		 * clear transparency for all areas
		 */
		for (var i in drop_areas) {
			document.getElementById(drop_areas[i]["id"]).style.opacity = "1";
			document.getElementById(drop_areas[i]["id"]).style.filter = "aplha(opacity=100)";
		}

		selected_area = null;
	}
}


/**
 * function show_toolbar()
 *
 * create toolbar and display, if not exists. if some toolbar
 * exists, just move it to new location above selected area
 *
 * no params needed ;-)
 */
function show_toolbar() {

	/**
	 * get area position
	 */
	for(i in drop_areas) {
		if (drop_areas[i]["id"] == selected_area) {
			var area_top = drop_areas[i]["top"];
			var area_left = drop_areas[i]["left"];
			var area_width = drop_areas[i]["width"];
			break;
		}
	}

	/**
	 * if toolbar exists, move it
	 */
	if (document.getElementById("toolbar")) {
		var toolbar = document.getElementById("toolbar");
		toolbar.style.top = area_top - 28 + "px";
		toolbar.style.left = area_left + (area_width / 2) - 74 + "px";

	/**
	 * no toolbar found, we will create one
	 */
	} else {

		/**
		 * create toolbar and set position
		 */
		var toolbar = document.createElement("div");
		toolbar.id = "toolbar";
		toolbar.className = "toolbar";
		toolbar.style.width = "144px";
		toolbar.style.height = "24px";
		toolbar.style.top = area_top - 28 + "px";
		toolbar.style.left = area_left + (area_width / 2) - 74 + "px";
		document.body.appendChild(toolbar);

		/**
		 * zoom in icon
		 */
		var zoomin = document.createElement("img");
		zoomin.src = url + "images/icons/zoomin.png";
		zoomin.title = "přiblížit fotografii";
		zoomin.alt = "přiblížit";
		toolbar.appendChild(zoomin);
		addEvent(zoomin, "click", function() { zoom_in(1); });

		/**
		 * zoom out icon
		 */
		var zoomout = document.createElement("img");
		zoomout.src = url + "images/icons/zoomout.png";
		zoomout.title = "oddálit fotografii";
		zoomout.alt = "oddálit";
		toolbar.appendChild(zoomout);
		addEvent(zoomout, "click", zoom_out);

		/**
		 * rotate left icon
		 */
		var rotateleft = document.createElement("img");
		rotateleft.src = url + "images/icons/rotate_left.png";
		rotateleft.title = "otočit fotografii o 90° doleva";
		rotateleft.alt = "otočit doleva";
		toolbar.appendChild(rotateleft);
		addEvent(rotateleft, "click", function() { rotate("left"); });

		/**
		 * rotate left icon
		 */
		var rotateright = document.createElement("img");
		rotateright.src = url + "images/icons/rotate_right.png";
		rotateright.title = "otočit fotografii o 90° doprava";
		rotateright.alt = "otočit doprava";
		toolbar.appendChild(rotateright);
		addEvent(rotateright, "click",  function() { rotate("right"); });

		/**
		 * reset icon
		 */
		var reset = document.createElement("img");
		reset.src = url + "images/icons/reset.png";
		reset.title = "zrušit všechny změny";
		reset.alt = "zrušit změny";
		toolbar.appendChild(reset);
		addEvent(reset, "click", reset_image);

		/**
		 * remove icon
		 */
		var remove = document.createElement("img");
		remove.src = url + "images/icons/remove.png";
		remove.title = "odebrat fotografii";
		remove.alt = "odebrat";
		toolbar.appendChild(remove);
		addEvent(remove, "click", remove_image);

		/**
		 * because we want to have toolbar icons transparent, we must detect
		 * MSIE6 and lower to apply transparency properly
		 */
		is_ie6 = navigator.userAgent.toLowerCase().indexOf("msie 6") != -1;

		/**
		 * if we are in MSIE6, we will apply filters on icons
		 * to force them display transparent...
		 */
		if (is_ie6 == true) {
			zoomin.src = url + "images/icons/empty.gif";
			zoomin.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/zoomin.png', sizingMethod='scale')";
			zoomout.src = url + "images/icons/empty.gif";
			zoomout.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/zoomout.png', sizingMethod='scale')";
			rotateleft.src = url + "images/icons/empty.gif";
			rotateleft.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/rotate_left.png', sizingMethod='scale')";
			rotateright.src = url + "images/icons/empty.gif";
			rotateright.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/rotate_right.png', sizingMethod='scale')";
			reset.src = url + "images/icons/empty.gif";
			reset.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/reset.png', sizingMethod='scale')";
			remove.src = url + "images/icons/empty.gif";
			remove.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/remove.png', sizingMethod='scale')";
		}

		/**
		 * now unset icon objects
		 */
		zoomin = null;
		zoomout = null;
		rotateleft = null;
		rotateright = null;
		reset = null;
		remove = null;
	}
}


/**
 * function remove_toolbar()
 *
 * if toolbar exists, remove it from document
 *
 * no params needed ;-)
 */
function remove_toolbar() {

	/**
	 * toolbar must exist
	 */
	if (document.getElementById("toolbar")) {
		var toolbar = document.getElementById("toolbar");

		/**
		 * remove any content toolbar has
		 */
		if (toolbar.hasChildNodes()) {
			while (toolbar.childNodes.length >= 1) toolbar.removeChild(toolbar.firstChild);       
		}

		/**
		 * remove the toolbar itself
		 */
		document.body.removeChild(toolbar);
	}
}