/**
 * config section
 */
var url_prefix = "http://www.ecards.cz/";

                             // URL where interface is located
var url = url_prefix + "gift_print/"

                             // URL where image processor is located
var ip_url = url_prefix + "gift_print/image_processor.php";

                             // URL where XML parser is located
var ifc_url = url_prefix + "interface_print.php";

                             // URL where album's parser is located
var ifc2_url = url_prefix + "interface.php?session=1&debug=1";

                             // URL where template thumbnails are located
var tt_url = url_prefix;

                             // preview renderer URL
var render_url = url_prefix + "interface_print_render.php";

                             // XML documents encoding
var encoding = "windows-1250";
var debug = true;            // display errors?
var album_page_images = 9;   // number of images to display per one page of album

var resize_max_width = 640;  // when image is dragged to area, it must be resized
                             // to avoid working with few-megabytes image. this is
                             // maximum width...
var resize_max_height = 480; // ...and height image can be resized to

var zoom_step = 0.1;         // zoom step, in percents / 100
var rotation_step = 90;      // rotation step, in degrees (currently only multiples
                             // of 90 are supported)

                             // available font aligns with their names
var aligns = [["left", "vlevo"], ["center", "na střed"], ["right", "vpravo"]];

                             // this defines maximum width and height of area where template
                             // can be drawn. theese dimensions do not includes additionl space
                             // for side images!!!

var template_dimensions = [
							[513, 378], // poster
							[295, 371], // callendar
							[295, 371], // photobook
							[480, 340], // puzzle
							[310, 291], // cup
							[513, 378], // mousepad
							[291, 291], // pillow
							[134, 188], // key
							[144, 93], // w_underwear
							[104, 94], // m_underwear
							[480, 340] // default
						  ];

var key_move = 2;            // how many move pixels within selected area every key press contains?


/**
 * create some stuff which needs to be accessible through all functions
 */
var tn;
var loader = null;
var loader_text = null;
var drag_object = null;
var drag_area_content = null;
var drop_areas = [];
var above_area = null;
var assigned_images = [];
var page_selected = false;
var selected_area = null;
var selected_text = null;
var mouse_startx, mouse_starty, diffx = 0, diffy = 0;
var current_drag_area = [];
var pt_template_ID = null;
var template_titles = [];
var template_groups = [];
var current_template = 0;
var scroll_top = 0;
var scroll_left = 0;
var album_key = 0;
var album_images = [];
var album_images_medium = [];
var album_images_resX = [];
var album_images_resY = [];
var album_images_ratio = [];
var mouse_button = "up";
var available_pages = 0;
var current_page_index = -1;
var current_pt_page_ID = 0;
var preview_page_index = 0;
var template_group = null;
var form = null;
var last_hash = null;
var preview_image = null;
var preview = null;

var uBar = null;
var uBar_container = null;
var uBar_frame = null;
var uBar_ident = null;


/**
 * function err()
 *
 * alert error if set in response data
 *
 * @param obj "rd" (response data object from Javascript XML parser)
 * @param string "where" (code location description)
 * @param string "request" (XML request given to PHP XML parser)
 */
function err(rd, where, request) {
	if (debug == true && typeof(rd) != "undefined" && rd.error) {
		alert("Error: " + rd.error + "\nLocation: " + where + "\n\nRequest:\n" + request);
	}
}


/**
 * function update_scroll_position()
 *
 * because we are working with absolute position when dragging images
 * over areas, we need to know if user scrolled page and store scroll
 * positions for later use in object movement
 */
function update_scroll_position() {
	scroll_top = (document.all) ? document.body.parentElement.scrollTop : window.pageYOffset;
	scroll_left = (document.all) ? document.body.parentElement.scrollLeft : window.pageXOffset;
}
addEvent(window, "scroll", update_scroll_position);


/**
 * function image_over()
 *
 * change element's class name, if image is not currently dragged
 *
 * @param event "evt" (event which called this function)
 */
function image_over(evt) {
	if (!drag_object) {
		evt = evt || window.event;
		var element = evt.srcElement ? evt.srcElement : evt.target;
		element.className = "image_hover";
	} 
}


/**
 * function image_out()
 *
 * clear element's class name
 *
 * @param event "evt" (event which called this function)
 */
function image_out(evt) {
	evt = evt || window.event;
	var element = evt.srcElement ? evt.srcElement : evt.target;
	element.className = "";
}


/**
 * function image_over()
 *
 * change element's class name, if image is not currently dragged
 *
 * @param event "evt" (event which called this function)
 */
function text_over(evt) {
	evt = evt || window.event;
	var element = evt.srcElement ? evt.srcElement : evt.target;
	element.className = "area_text_hover";
}


/**
 * function image_out()
 *
 * clear element's class name
 *
 * @param event "evt" (event which called this function)
 */
function text_out(evt) {
	evt = evt || window.event;
	var element = evt.srcElement ? evt.srcElement : evt.target;
	element.className = "area_text";
}


/**
 * function tpl_over(), tpl_out()
 *
 * change element's className depending on it's current className
 * and performed action
 *
 * no params needed :-)
 */
function tpl_over() { this.className = this.className == "template_selected" ? "template_selected" : "template_hover"; }
function tpl_out() { this.className = this.className == "template_selected" ? "template_selected" : ""; }


/**
 * function pagelist_over(), pagelist_out()
 *
 * same as tpl_over(), tpl_out()
 */
function page_over() { this.className = this.className == "page_selected" ? "page_selected" : "page_hover"; }
function page_out() { this.className = this.className == "page_selected" ? "page_selected" : "page"; }


/**
 * function set_template()
 *
 * drop everything in session and set selected template into session
 *
 * no params needed ;-)
 */
function set_template() {

	/**
	 * drop session and set new template
	 */
    var request = "<?xml version=\"1.0\" encoding=\"" + encoding + "\"?>\n";
	request += "<request_data>\n";

	if (drop == true) {
		request += "	<pack>\n";
		request += "		<command>drop</command>\n";
		request += "	</pack>\n";
		request += "	<pack>\n";
		request += "		<command>set</command>\n";
		request += "		<pt_template_ID>" + pt_template_ID + "</pt_template_ID>\n";
		request += "	</pack>\n";
	} else {
		request += "	<command>set</command>\n";
		request += "	<pt_template_ID>" + pt_template_ID + "</pt_template_ID>\n";
	}

	request += "</request_data>\n";

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

	/**
	 * set template group. tamplate area backgrounds will be later drawn
	 * depending on this variable
	 */
	template_group = data.response_data.template_group;

	/**
	 * in return, we will get total number of pages available
	 * for this template. this must be stored
	 */
	available_pages = data.response_data.pages_count;

	/**
	 * now call function which will generate page list
	 */
	 
	pagelist_create();
	
	
	var u_form = document.getElementById("pt_upload_form");
	var u_href = document.getElementById("pt_upload_href");
	var u_frame = document.getElementById("pt_upload_frame_object");
	
	uBar = new uploadBar();
	uBar_container = document.createElement("DIV");
	uBar.initialize(uBar_container, 100);
	
	u_href.onclick = function() {
		uBar.initialize(null, 100);
		
		uBar_frame = document.getElementById("upload_frame_progress");
		uBar_frame.src = "/upload_progress.php?uid=" + uBar_ident + "&ref=uBar";
		
		uBar_process();
		
		loader_show(uBar_container);
		u_form.submit();
	}
	
	document.getElementById("as_upload_link").style.display = "block";
	document.getElementById("as_upload_file").style.display = "block";
	
	hash_change();
	
	//process();
}

function uBar_process() {
	if (uBar.doProcess(50, 2000))
		setTimeout("uBar_process()", 50);
}

addEvent(window, "load", set_template);

function hash_change_event(current, before) { 
	if (before == "#preview" && current == "") {
		preview_hide();
	}
}

function hash_redirect(ref, anchor) {
	ref.id = anchor;
	ref.name = anchor;
	document.location = "#" + anchor;
}

function hash_change() {
	var change_flag = null;
	if (last_hash !== null && last_hash != document.location.hash) change_flag = last_hash;
	
	last_hash = document.location.hash;
	if (change_flag !== null) hash_change_event(document.location.hash, change_flag);
	
	setTimeout("hash_change()", 250);
}

function picture_uploaded() {
	uBar.finish();
	uBar_frame.src = "";
	setTimeout("picture_uploaded_finalize()", 1500);
}

function picture_uploaded_finalize() {
	var album_select = document.getElementById("album");
	
	var founded = false;
	var pos = 0;
	
	while (!founded && pos < album_select.options.length)
		if (album_select.options[pos].value == "#anonymous") founded = true;
		else pos++;
		
	if (founded) {
		album_select.selectedIndex = pos;
		read_album("#anonymous");
		loader_hide();
	}
}

/**
 * function link_continue()
 *
 * save all assigned images and redirect user to another page
 *
 * no paramas needed :-)
 */
function link_continue() {

	/**
	 * if there are some assigned images, we must store them before leaving page
	 */
	if (assigned_images.length > 0) {

		/**
		 * 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";

		/**
		 * go through assigned images
		 */
		for (var i in assigned_images) {
			if (assigned_images[i]) {

				/**
				 * expand request
				 */
				request += "	<area>\n";
				request += "		<pt_area_ID>" + i + "</pt_area_ID>\n";
				request += "		<src>" + assigned_images[i]["src"] + "</src>\n";
				request += "		<pt_image_ID>" + assigned_images[i]["pt_image_ID"] + "</pt_image_ID>\n";
				request += "		<rotation>" + assigned_images[i]["rotation"] + "</rotation>\n";
				request += "		<crop>\n";
				request += "			<left>" + assigned_images[i]["left"] + "</left>\n";
				request += "			<top>" + assigned_images[i]["top"] + "</top>\n";
				request += "			<width>" + assigned_images[i]["rel_width"] + "</width>\n";
				request += "			<height>" + assigned_images[i]["rel_height"] + "</height>\n";
				request += "		</crop>\n"

				/**
				 * count final cropping values and expand request
				 */
				var final_width = 1 / assigned_images[i]["rel_width"];
				var final_height = 1 / assigned_images[i]["rel_height"];
				var final_left = -1 * (1 / assigned_images[i]["rel_width"] * assigned_images[i]["left"]);
				var final_top = -1 * (1 / assigned_images[i]["rel_height"] * assigned_images[i]["top"]);

				request += "		<crop_final>\n";
				request += "			<left>" + final_left + "</left>\n";
				request += "			<top>" + final_top + "</top>\n";
				request += "			<width>" + final_width + "</width>\n";
				request += "			<height>" + final_height + "</height>\n";
				request += "		</crop_final>\n"
				request += "	</area>\n";
			}
		}

		/**
		 * end request and send it
		 */
		request += "</request_data>";
		var xml = new JKL.ParseXML(ifc_url, "input=" + request);
		var data = xml.parse();
		err(data.response_data, "link_continue()", request);

		/**
		 * reset field with assigned images
		 */
		assigned_images = [];
		drop_areas = [];
	}

	/**
	 * redirect
	 */
	window.parent.window.location.href = "/tisky-a-darky/upresneni";
}


/**
 * function session_save()
 *
 * save current state into session
 *
 * no params needed ;-)
 */
function session_save() {

	/**
	 * if there are some assigned images, we must store them before leaving page
	 */
	if (assigned_images.length > 0) {

		/**
		 * 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";

		/**
		 * go through assigned images
		 */
		for (var i in assigned_images) {
			if (assigned_images[i]) {

				/**
				 * expand request
				 */
				request += "	<area>\n";
				request += "		<pt_area_ID>" + i + "</pt_area_ID>\n";
				request += "		<src>" + assigned_images[i]["src"] + "</src>\n";
				request += "		<pt_image_ID>" + assigned_images[i]["pt_image_ID"] + "</pt_image_ID>\n";
				request += "		<rotation>" + assigned_images[i]["rotation"] + "</rotation>\n";
				request += "		<crop>\n";
				request += "			<left>" + assigned_images[i]["left"] + "</left>\n";
				request += "			<top>" + assigned_images[i]["top"] + "</top>\n";
				request += "			<width>" + assigned_images[i]["rel_width"] + "</width>\n";
				request += "			<height>" + assigned_images[i]["rel_height"] + "</height>\n";
				request += "		</crop>\n"

				/**
				 * count final cropping values and expand request
				 */
				var final_width = 1 / assigned_images[i]["rel_width"];
				var final_height = 1 / assigned_images[i]["rel_height"];
				var final_left = -1 * (1 / assigned_images[i]["rel_width"] * assigned_images[i]["left"]);
				var final_top = -1 * (1 / assigned_images[i]["rel_height"] * assigned_images[i]["top"]);

				request += "		<crop_final>\n";
				request += "			<left>" + final_left + "</left>\n";
				request += "			<top>" + final_top + "</top>\n";
				request += "			<width>" + final_width + "</width>\n";
				request += "			<height>" + final_height + "</height>\n";
				request += "		</crop_final>\n"
				request += "	</area>\n";
			}
		}

		/**
		 * end request and send it
		 */
		request += "</request_data>";
		var xml = new JKL.ParseXML(ifc_url, "input=" + request);
		var data = xml.parse();
		err(data.response_data, "link_continue()", request);
	}
}


/**
 * function preview_show()
 *
 * show bigger preview given page index
 * 
 * @param int "index" (current page index, or any other given)
 */
function preview_show(index) {

	/**
	 * save current state into session
	 */
	session_save();

	/**
	 * set current preview index to given index
	 */
	preview_page_index = index;

	/**
	 * 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;
  	}
	
	/**
	 * because of MSIE6, we must hide album selector...
	 */
	document.getElementById("album").style.visibility = "hidden";

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

	/**
	 * create preview with image
	 */
	preview = document.createElement("div");
	preview.id = "preview";
	preview.style.left = ((window.innerWidth ? window.innerWidth : document.documentElement.clientWidth) - 780) / 2 + "px";
	preview.style.top = "0px";

	/**
	 * preview toolbar
	 */
	var preview_toolbar = document.createElement("div");
	preview_toolbar.id = "preview_toolbar";

	/**
	 * assign toolbar icons
	 */
	var preview_prev = document.createElement("img");
	preview_prev.id = "preview_prev";
	preview_prev.src = url + "images/icons/preview_prev.png";
	preview_prev.title = "Předchozí strana";
	preview_prev.style.visibility = index == 0 ? "hidden" : "visible";
	preview_toolbar.appendChild(preview_prev);
	addEvent(preview_prev, "click", function() { preview_reload(parseInt(preview_page_index) - 1); });

	var preview_close = document.createElement("img");
	preview_close.id = "preview_close";
	preview_close.src = url + "images/icons/preview_close.png";
	preview_close.title = "Zavřít náhled";
	preview_toolbar.appendChild(preview_close);
	addEvent(preview_close, "click", preview_hide);

	var preview_next = document.createElement("img");
	preview_next.id = "preview_next";
	preview_next.src = url + "images/icons/preview_next.png";
	preview_next.title = "Další strana";
	preview_next.style.visibility = index < (available_pages -1) ? "visible" : "hidden";
	preview_toolbar.appendChild(preview_next);
	addEvent(preview_next, "click", function() { preview_reload(parseInt(preview_page_index) + 1); });

	/**
	 * 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) {
		preview_prev.src = url + "images/icons/preview_empty.gif";
		preview_prev.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/preview_prev.png', sizingMethod='scale')";
		preview_close.src = url + "images/icons/preview_empty.gif";
		preview_close.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/preview_close.png', sizingMethod='scale')";
		preview_next.src = url + "images/icons/preview_empty.gif";
		preview_next.style.filter = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "images/icons/preview_next.png', sizingMethod='scale')";
	}

	/**
	 * append preview image
	 */
	loader_show();
	preview_image = document.createElement("img");
	var current_date = new Date();
	var random_string = current_date.getTime();
	preview_image.id = "preview_image";
	preview_image.style.margin = "20px 0";
	preview_image.title = "Zavřít náhled";
	preview_image.style.cursor = "pointer";
	preview.appendChild(preview_image);
	addEvent(preview_image, "load", loader_hide);
	addEvent(preview_image, "click", preview_hide);

	/**
	 * now first append toolbar, then start loading preview image
	 */
	preview.appendChild(preview_toolbar);
	preview_image.src = render_url + "?index=" + index + "&size=750&" + random_string;

	/**
	 * append preview into document
	 */
	document.body.appendChild(preview);
}


/**
 * function preview_reload()
 *
 * reload preview image, optionally show / hiden prev / next links
 *
 * @param int "index" (page index)
 */
function preview_reload(index) {

	/**
	 * continue only if index is higher or equal to zero (start) and lower than available
	 * pages count	 
	 */
	if (index >= 0 && index < available_pages) {

		/**
		 * set current preview page index
		 */
		preview_page_index = index;

		/**
		 * if current index is zero, hide prev link. else make sure it it displayed
		 */
		document.getElementById("preview_prev").style.visibility = index == 0 ? "hidden" : "visible";

		/**
		 * if current index is by one lower than available pages count, hide next link
		 */
		document.getElementById("preview_next").style.visibility = index < (available_pages - 1) ? "visible" : "hidden";

		/**
		 * display loader and reload image
		 */
		loader_show();
		var current_date = new Date();
		var random_string = current_date.getTime();
		document.getElementById("preview_image").src = render_url + "?index=" + index + "&size=750&" + random_string;
	}
}


/**
 * function preview_resize()
 *
 * resize preview container and move it to center of screen
 *
 * @param int "image_height" (preview image height)
 */
function preview_resize(image_height) {
	var preview_height = document.getElementById("preview").clientHeight + document.getElementById("preview_toolbar").clientHeight - 300 + 20 + image_height;
	var preview_top = ((window.innerHeight ? window.innerHeight : document.documentElement.clientHeight) - preview_height) / 2;
	document.getElementById("preview").style.height = preview_height + "px";
	document.getElementById("preview").style.top = (preview_top >= 0) ? (preview_top + "px") : "0px";
}


/**
 * function preview_hide()
 *
 * remove preview and all of it's content, remove preview overlay
 *
 * no params needed ;-)
 */
function preview_hide() {

	preview_image.parentNode.removeChild(preview_image);
	preview_image.onload = null;
	preview_image.src = "";
	preview_image = null;

	loader_hide();
	/**
	 * remove preview and it's content
	 */
	if (preview.hasChildNodes()) {
		while (preview.childNodes.length > 0) preview.removeChild(preview.firstChild);
	}
	
	/**
	 * remove preview itself and preview overlay
	 */
	document.body.removeChild(document.getElementById("preview_overlay"));
	document.body.removeChild(preview);
	preview = null;

	/**
	 * because of MSIE6, we must show album selector...
	 */
	document.getElementById("album").style.visibility = "visible";
}