/**
 * function drag_image()
 *
 * if left mouse button is pressed, clone element with image, set
 * style to this image and assign events for moving and dropping
 *
 * @param event "evt" (event which called this function)
 */
function drag_image(evt) {
	evt = evt || window.event;
	var element = evt.srcElement ? evt.srcElement : evt.target;
	var pt_image_ID = element.id.split("_")[1];

	/**
	 * left mouse button must be clicked and element must be object within
	 * thumbnails area	 
	 */
	if ((evt.button == 1 && window.event != null) || evt.button == 0) {

		/**
		 * set normal class for element which was clicked
		 */
		element.className = "";

		/**
		 * create new image	and copy clicked image properties to him
		 */
		drag_object = element.cloneNode(true);

		drag_object.id = "drag_" + pt_image_ID;
		drag_object.className = "drag_object";
		drag_object.src = element.src;
		drag_object.style.top = (evt.clientY - 35 + scroll_top) + "px";
		drag_object.style.left = (evt.clientX - 35 + scroll_left) + "px";
		drag_object.style.opacity = "0.65";
		drag_object.style.filter = "alpha(opacity=65)";

		document.body.appendChild(drag_object);

		/**
		 * start moving element with mouse
		 */
		addEvent(document, "mousemove", move_image, true);
		addEvent(document, "mouseup", drop_image);
		addEvent(drag_object, "click", drop_image);

		/**
		 * change mouse button state
		 */
		mouse_button = "down";
	}

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


/**
 * function move_image()
 *
 * move image according to current cursor position
 *
 * @param event "evt" (event which called this function)
 */
function move_image(evt) {
	if (drag_object) {

		/**
		 * set new image position
		 */
		evt = evt || window.event;
		var mousex = evt.clientX + scroll_left;
		var mousey = evt.clientY + scroll_top;
		drag_object.style.top = (mousey - 35) + "px";
		drag_object.style.left = (mousex - 35) + "px";

		/**
		 * if page is selected and we are above drop area, hilight this area
		 */
		if (page_selected != false) {
			for (var i in drop_areas) {
				if (drop_areas[i]["left"] <= mousex && (drop_areas[i]["left"] + drop_areas[i]["width"]) >= mousex && drop_areas[i]["top"] <= mousey && (drop_areas[i]["top"] + drop_areas[i]["height"]) >= mousey && mouse_button == "down") {
					above_area = document.getElementById(drop_areas[i]["id"]);
					above_area.className = "area_image_hover";
					above_area.id = drop_areas[i]["id"];
				} else {
					document.getElementById(drop_areas[i]["id"]).className = document.getElementById(drop_areas[i]["id"]).className == "area_image_filled" ? "area_image_filled" : "area_image";
				}
			} // ...for end
		} // ...page selected check end

		/**
		 * focus on document body, to avoid selecting anything
		 * when moving object
		 */
		document.body.focus();
	}

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


/**
 * function drop_image()
 *
 * if drag object exists, remove it from body and remove
 * document listeners for mouse move and mouse up
 *
 * no params needed ;-)
 */
function drop_image() {
	if (drag_object) {

		/**
		 * change mouse button state
		 */
		mouse_button = "up";

		/**
		 * remove dragged object from body, cancel body events
		 */
		document.body.removeChild(drag_object);
		cancelEvent(document, "mousemove", move_image, true);
		cancelEvent(document, "mouseup", drop_image);
		cancelEvent(drag_object, "click", drop_image);
		var pt_image_ID = drag_object.id.split("_")[1]

		/**
		 * if we are above area, write image ID into this area
		 */
		if (above_area) {
			assign_image(pt_image_ID, false, true);
			above_area = null;
		}

		/**
		 * cancel drag object
		 */
		drag_object = null;
	}

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