if (typeof design_js_loaded == 'undefined') {

var element_boxes = new Object();
var element_classes = new Object();
var preview_images = new Object();
var preview_image_overlays_added = false;
var update_in_progress = false;
var update_request;
var update_required;
// var element_location_boxes_json is expected to be set
// var form_submit_url is expected to be set

// set via ajax
var response_status = '';
var response_error = '';
var response_log = '';

// preview scaling
var preview_image_left;
var preview_image_top;
var preview_image_width;
var preview_image_height;
var preview_page_width;
var preview_page_height;
var preview_scale_v;
var preview_scale_h;

design_js_loaded = 1;

var show_bleeds = 1;

}

if (typeof bleed == 'undefined') {
	var bleed = 4; // mm
}

function update_preview() {
	if (update_in_progress) return;
	Element.show('preview_loading');
	disableControls();
	update_in_progress = true;

	response_status = '';
	response_error = '';
	response_log = '';

	var url = form_submit_url;
	var params = Form.serialize('field_values_form') + '&ajax_action=update';
	update_request = new Ajax.Request( url, {
		method: 'post'
		,parameters: params
		,onComplete: showResponse
		,onException: showException
	});
}

function get_proof() {
	var url = form_submit_url;
	finishUpdate();
	$('form_action').value = 'download_proof';
	var params = Form.serialize('field_values_form');
	url = url + "?" + params;
	window.open(url, "name","height=550,width=750,left=30,top=30,location=no,resizable=yes,scrollbars=yes,toolbar=no,status=no");
	$('form_action').value = '';
}

function reset_field_values() {
	var url = form_submit_url;
	finishUpdate();
	$('form_action').value = 'reset_field_values';
	$('field_values_form').submit();
}

function updateCallRunning() {
	if (update_request && update_request.transport
		&& (
			update_request.transport.readyState == 1
			|| update_request.transport.readyState == 2
			|| update_request.transport.readyState == 3
		)
	) {
		return true;
	} else {
		return false;
	}
}

function finishUpdate() {
	try {
		if (update_in_progress && updateCallRunning()) {
			update_request.transport.abort();
		}
		Element.hide('preview_loading');
		enableControls();
		update_in_progress = false;
	} catch (ex) {
		if (typeof log_error == 'function') log_error(ex);
	}
}

function enableControls() {
	if ($('button_update')) {
		$('button_update').enabled = true;
		// $('button_update_1').enabled = true;
	}
}

function disableControls() {
	if ($('button_update'))
		$('button_update').enabled = false;
		// $('button_update_1').enabled = false;
}

function showResponseStatus(is_fatal_error, response_error, response_log) {

}

function showResponse(originalRequest, json) {
	finishUpdate();

	try {
		var ct = originalRequest.getResponseHeader('Content-Type');
		var is_fatal_error = false;
		if (ct && ct.indexOf('javascript') == -1) {
			is_fatal_error = true;
			response_error = originalRequest.responseText;
		}
		if (!response_status) return;

		var success = response_status.success;
		var images = response_status.images;
		var elements = response_status.elements;
		showElementsStatus(elements);
		if (success) {
			setPreviewImageURL('preview_image_medium', images.design_preview_editor_medium);
			setPreviewImageURL('preview_image_big', images.design_preview_editor_big);
			setUrlBigPreview();
			loadPreviewImage('preview_image_medium');
			Event.observe('preview_image_medium', 'load', addPreviewImageOverlays, false);
			showConfirmationInfo();
			set_update_required(false);
		} else {
			set_update_required(true);
		}
		showResponseStatus(is_fatal_error, response_error, response_log);
	} catch(e) {
		showException(originalRequest, e);
	}

}

function setUrlBigPreview() {
	$('preview_image_magnifier_container').href = getPreviewImageURL('preview_image_big');
	$('preview_image_medium_container').href = getPreviewImageURL('preview_image_big');
}

function set_update_required(is_update_required) {

	if (typeof beforeUnload == 'function') {
		beforeUnload(is_update_required);
	}

	if (is_update_required) {
		//$('button_update').className = 'button_update_green';
		//$('continue').className = 'button_continue';
		update_required = true;
	} else {
		//$('button_update').className = 'button_update_green';
		//$('continue').className = 'button_continue';
		update_required = false;
	}
}

function showConfirmationInfo() {
	try { $('buttons_after_update').show(); } catch (e) {}
	try { $('info_after_update').show(); } catch (e) {}
	// try { $('designer_info').hide(); } catch (e) {}
}

function setPreviewImageURL(id, url) {
	preview_images[id] = url;
}

function getPreviewImageURL(id) {
	return preview_images[id];
}

function isImageLoaded(img) {
	if (!$(img).complete) {
		return false;
	}
	if (typeof $(img).naturalWidth != "undefined" && $(img).naturalWidth == 0) {
		return false;
	}
	return true;
}

function loadPreviewImage(id) {
	if ($(id).src.indexOf('http://c.optimalprint.com/t-v1301032870.gif') == -1) {
		try {
			var splitArray1 = $(id).src.split("?");
			var splitArray2 = preview_images[id].split("?");
			if(splitArray1[1] == splitArray2[1] && isImageLoaded(id)) {
				// don't reload image with the same url
				return false;
			}
		} catch(e) {
			log("loadPreviewImage("+id+") exception: " + e);
			return false;
		}
	}
	var currentTime = new Date();

	$(id).src = (preview_images[id].indexOf('?') == -1) ? preview_images[id] + '?dummy=' + currentTime.getTime() : preview_images[id] + '&dummy=' + currentTime.getTime();
	// $(id).alt = preview_images[id];
	// $(id).title = preview_images[id];
}

function toggleHide(divId) {
	if( $(divId).className == 'hideDiv' )
		$(divId).className = 'showDiv';
	else
		$(divId).className = 'hideDiv';
}

function showElementsStatus(elements) {
	// highlight elements
	for(var element_id in elements) {
		if (elements[element_id] == 'ok') {
			// clear error
			Element.removeClassName(element_id, 'text_onerror');
		} else {
			// set error
			Element.addClassName(element_id, 'text_onerror');
		}
	}
}

function showElementBox(element, class_name) {
	try {
		element.addClassName(class_name);
		element_classes[element.id] = class_name;
		for (var box_id in element_boxes[element.id]) {
			$(box_id).addClassName(class_name);
			$(box_id).show();
		}
	} catch (ex) {
		if (typeof log_error == 'function') log_error(ex);
	}
}

function hideElementBox(element, classname) {
	try {
		if (!element_classes[element.id]) return;
		class_name = element_classes[element.id];
		element.removeClassName(class_name);
		for (var box_id in element_boxes[element.id]) {
			$(box_id).hide();
			$(box_id).removeClassName(class_name);
		}
	} catch (ex) {
		if (typeof log_error == 'function') log_error(ex);
	}
}

function positionCenter(destination_el, source_el, source_width, source_height) {
	var pos = Element.cumulativeOffset($(destination_el));
	var left = pos[0];
	var top = pos[1];
	var destination_size = $(destination_el).getDimensions();
	if (source_width && source_height) {
		var source_size = {
			'width': source_width
			,'height': source_height
		}
	} else {
		var source_size = $(source_el).getDimensions();
	}
	left = left + (destination_size.width / 2) - (source_size.width / 2);
	top = top + (destination_size.height / 2) - (source_size.height / 2);
	$(source_el).style.left = left + "px";
	$(source_el).style.top = top + "px";
}

function calculatePreviewScaling(preview_image_el, page_width, page_height) {
	try {
		preview_page_width = page_width;
		preview_page_height = page_height;
		var pos = Element.cumulativeOffset($(preview_image_el));
		preview_image_top = pos[1];
		preview_image_left = pos[0];
		var size = $(preview_image_el).getDimensions();
		preview_image_width = size.width;
		preview_image_height = size.height;
		if (preview_image_width <= 1) return false;
		preview_scale_h = preview_image_width / preview_page_width;
		preview_scale_v = preview_image_height / preview_page_height;
	} catch(e) {
		log("calculatePreviewScaling exception: " + e);
		return false;
	}
	return true;
}

function windowOnResize(e) {
	removePreviewImageOverlays();
	addPreviewImageOverlays();
}

function addPreviewImageOverlays() {
	if (preview_image_overlays_added) return;
	try {
		// position loading animation
		positionCenter('preview_image_medium_container', 'preview_loading', 100, 16);

		// folding info
		var folding_info = folding_info_json;
		// element location boxes
		var json = element_location_boxes_json;
		var page = json['page'];
		var elements = json['elements'];

		var result = calculatePreviewScaling('preview_image_medium', page.width, page.height);
		if (!result) return;

		addElementBoxes(elements, preview_image_top, preview_image_left, preview_scale_h, preview_scale_v);
		addFoldingInfo(folding_info, preview_image_top, preview_image_left, preview_scale_h, preview_scale_v);
		if (show_bleeds) {
			addBleedBox(page, preview_image_top, preview_image_left, preview_scale_h, preview_scale_v);
		}

		Event.observe(window, 'resize', windowOnResize, false);
	} catch (e) {
		log("addPreviewImageOverlays exception: " + e);
		return;
	}
	preview_image_overlays_added = true;
}

function elementBoxOnMouseOver(e) {
	showElementBox(Event.element(e), 'text_onhover');
}

function elementBoxOnMouseOut(e) {
	hideElementBox(Event.element(e), 'text_onhover');
}

function addElementBoxes(elements, base_top, base_left, scale_h, scale_v) {
	var border_width = 2;
	for(var element_id in elements) {
		for (var box_idx in elements[element_id].boxes) {
			var box = elements[element_id].boxes[box_idx];
			var box_id = 'hb_' + element_id + '_' + box_idx;
			var box_html = '<div id="'+box_id+'" class="element_onhover" style="display:none;position:absolute;"></div>';
			new Insertion.After($('preview_image_medium_container'), box_html);
			$(box_id).style.top = base_top + box.top_px - border_width + "px";
			$(box_id).style.left = base_left + box.left_px - border_width + "px";
			$(box_id).style.width = box.width_px + "px";
			$(box_id).style.height = box.height_px + "px";
			if (!element_boxes[element_id]) element_boxes[element_id] = new Object()
			element_boxes[element_id][box_id] = 1;

			if (!$(element_id)) continue;

			Event.observe($(element_id), 'mouseover', elementBoxOnMouseOver, false);
			Event.observe($(element_id), 'mouseout', elementBoxOnMouseOut, false);
		}
	}
}

function pageBoxOnMouseOver(e) {
	Event.element(e).setStyle({
		'filter':'alpha(opacity=30)'
		,'-moz-opacity': '0.3'
		,'opacity': '0.3'
	});
}

function pageBoxOnMouseOut(e) {
	Event.element(e).setStyle({
		'filter':'alpha(opacity=0)'
		,'-moz-opacity': '0'
		,'opacity': '0'
	});
}

function pageBoxOnClick(e) {
	if (update_in_progress) return;
	loadPreviewImage('preview_image_big');
	$('preview_image_big_container').show();
}

function addFoldingInfo(folding_info, base_top, base_left, scale_h, scale_v) {
	if (!folding_info) return;
	var attributes = folding_info['attributes'];
	var foldlines = folding_info['foldlines'];
	var logicalpages = folding_info['logicalpages'];
	// add foldlines
	for(var foldline_id in foldlines) {
		var line = foldlines[foldline_id];
		var line_id = 'fl_' + foldline_id;
		var line_html = '<div id="'+line_id+'" class="foldline" style="display:block;position:absolute;"></div>';
		new Insertion.After($('preview_image_medium_container'), line_html);
		var scaled = scale_box(line, base_top, base_left, scale_h, scale_v);
		$(line_id).style.top = scaled.top + "px";
		$(line_id).style.left = scaled.left + "px";
		$(line_id).style.width = scaled.width + "px";
		$(line_id).style.height = scaled.height + "px";
	}

	return; // skip it

	// add logical pages
	for (var page_nr in logicalpages) {
		var box = logicalpages[page_nr];
		var box_id = 'lp_' + page_nr;
		var box_html = '<div id="'+box_id+'" class="logicalpage_onhover" style="display:block;position:absolute;">' + page_nr + '</div>';
		new Insertion.After($('preview_image_medium_container'), box_html);
		var scaled = scale_box(box, base_top, base_left, scale_h, scale_v);
		$(box_id).style.top = scaled.top + "px";
		$(box_id).style.left = scaled.left + "px";
		$(box_id).style.width = scaled.width + "px";
		$(box_id).style.height = scaled.height + "px";
		$(box_id).setStyle({
			'filter':'alpha(opacity=0)'
			,'-moz-opacity': '0'
			,'opacity': '0'
		});

		if (!$(box_id)) continue;
		try {
			Event.observe($(box_id), 'mouseover', pageBoxOnMouseOver, false);
			Event.observe($(box_id), 'mouseout', pageBoxOnMouseOut, false);
			Event.observe($(box_id), 'click', pageBoxOnMouseClick, false);
		} catch(e) {
			log("addFoldingInfo exception: " + e);
			return;
		}
	}
	// add folding animation
}

function addBleedBox(page, base_top, base_left, scale_h, scale_v) {
	// draw shaded area for the bleed box
	var box_id = 'bleedbox';
	var box = {
		'left': bleed
		,'top': bleed
		,'width': page.width - bleed*2
		,'height': page.height - bleed*2
	};
	var box_html = '<div id="'+box_id+'" class="bleedbox" style="display:block;position:absolute;"></div>';
	new Insertion.After($('preview_image_medium_container'), box_html);
	var scaled = scale_box(box, base_top, base_left, scale_h, scale_v);
	$(box_id).style.top = scaled.top + "px";
	$(box_id).style.left = scaled.left + "px";
	$(box_id).style.width = scaled.width + "px";
	$(box_id).style.height = scaled.height + "px";
}


function removePreviewImageOverlays() {
	if (!preview_image_overlays_added) return;
	try {
		Event.stopObserving(window, 'resize', windowOnResize, false);

		// folding info
		var folding_info = folding_info_json;
		// element location boxes
		var json = element_location_boxes_json;
		var page = json['page'];
		var elements = json['elements'];

		removeElementBoxes(elements);
		removeFoldingInfo(folding_info);
		removeBleedBox(page);

	} catch (e) {
		log("removePreviewImageOverlays exception: " + e);
		return;
	}
	preview_image_overlays_added = false;
}

function removeElementBoxes(elements) {
	for(var element_id in elements) {
		for (var box_idx in elements[element_id].boxes) {
			var box_id = 'hb_' + element_id + '_' + box_idx;
			Event.stopObserving($(element_id), 'mouseover', elementBoxOnMouseOver, false);
			Event.stopObserving($(element_id), 'mouseout', elementBoxOnMouseOut, false);
			$(box_id).remove();
		}
	}
	element_boxes = new Object();
	element_classes = new Object();
}

function removeFoldingInfo(folding_info) {
	if (!folding_info) return;
	var attributes = folding_info['attributes'];
	var foldlines = folding_info['foldlines'];
	var logicalpages = folding_info['logicalpages'];
	for(var foldline_id in foldlines) {
		var line_id = 'fl_' + foldline_id;
		$(line_id).remove();
	}

	return; // skip it

	for (var page_nr in logicalpages) {
		var box_id = 'lp_' + page_nr;
		Event.stopObserving($(box_id), 'mouseover', pageBoxOnMouseOver, false);
		Event.stopObserving($(box_id), 'mouseout', pageBoxOnMouseOut, false);
		Event.stopObserving($(box_id), 'click', pageBoxOnClick, false);
		$(box_id).remove();
	}
}

function removeBleedBox() {
	var box_id = 'bleedbox';
	$(box_id).remove();
}


function select_image(id) {
	finishUpdate();
	var select_image_id_html = '<input type="hidden" name="select_image_field_name" value="' + id + '" />';
	$('form_action').value = 'select_image';
	new Insertion.After($('form_action'), select_image_id_html);
	$('field_values_form').submit();
}

function remove_image(id) {
	try {
		$(id + '_selected').update($(id + "_none").innerHTML);
		new Insertion.After($(id + '_selected'), '<input type="hidden" id="' + id + '_remove" name="' + id + '_remove" value="1" />');
		$('image_file_' + id).remove();
		$('select_image2_' + id).addListener( "click", function() { select_image(id); });
		update_preview();
	} catch (e) {
		log("remove_image(id) exception: " + e);
	}
}

function select_page(page_nr) {
	if (update_required) {
		update_preview();
		return;
	}
	finishUpdate();
	var html = '<input type="hidden" name="page_nr" value="' + page_nr + '" />';
	$('form_action').value = 'select_page';
	new Insertion.After($('form_action'), html);
	$('field_values_form').submit();
}

function scale_box(box, base_top, base_left, scale_h, scale_v) {
	var scaled = {
		'top': Math.round(base_top + (box.top * scale_v) - 1)
		,'left': Math.round(base_left + (box.left * scale_h) - 1)
		,'width': Math.round(box.width * scale_h + 2)
		,'height': Math.round(box.height * scale_v + 2)
	}
	return scaled;
}