[Cluster-devel] conga/luci/storage cylinder_select.js form-mac ...

[rmccabe@sourceware.org <rmccabe@sourceware.org>]

CVSROOT:	/cvs/cluster
Module name:	conga
Changes by:	rmccabe at sourceware.org	2007-09-25 16:49:36

Modified files:
	luci/storage   : cylinder_select.js form-macros 
Added files:
	luci/storage   : popup_log.js storage_content.js 
	                 storage_probing.js storage_svs.js 
	                 storage_utils.js storage_validation.js 

Log message:
	Extract CSS and javascript from page templates

Patches:
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/popup_log.js.diff?cvsroot=cluster&r1=NONE&r2=1.1
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/storage_content.js.diff?cvsroot=cluster&r1=NONE&r2=1.1
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/storage_probing.js.diff?cvsroot=cluster&r1=NONE&r2=1.1
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/storage_svs.js.diff?cvsroot=cluster&r1=NONE&r2=1.1
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/storage_utils.js.diff?cvsroot=cluster&r1=NONE&r2=1.1
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/storage_validation.js.diff?cvsroot=cluster&r1=NONE&r2=1.1
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/cylinder_select.js.diff?cvsroot=cluster&r1=1.1&r2=1.2
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/form-macros.diff?cvsroot=cluster&r1=1.26&r2=1.27

/cvs/cluster/conga/luci/storage/popup_log.js,v  -->  standard output
revision 1.1
--- conga/luci/storage/popup_log.js
+++ -	2007-09-25 16:49:37.071853000 +0000
@@ -0,0 +1,15 @@
+function popup_log(mylink, windowname) {
+	//Thanks to htmlcodetutorial.com
+	if (!window.focus) {
+		return true;
+	}
+
+	var href;
+	if (typeof(mylink) == 'string') {
+		href = mylink;
+	} else {
+		href = mylink.href;
+	}
+	window.open(href, windowname, 'width=500,height=500,scrollbars=yes');
+	return false;
+}
/cvs/cluster/conga/luci/storage/storage_content.js,v  -->  standard output
revision 1.1
--- conga/luci/storage/storage_content.js
+++ -	2007-09-25 16:49:37.163554000 +0000
@@ -0,0 +1,30 @@
+/*
+** Copyright (C) 2006-2007 Red Hat, Inc.
+**
+** This program is free software; you can redistribute
+** it and/or modify it under the terms of version 2 of the
+** GNU General Public License as published by the
+** Free Software Foundation.
+*/
+
+var replace_properties_block__old_select_value = ''
+
+function replace_properties_block(parent_id, select_id) {
+	var selem = document.getElementById(select_id);
+	var child_id = selem.value;
+	selem.value = replace_properties_block__old_select_value;
+	singleVisibleSpan(parent_id, child_id);
+}
+
+function change_content(select_content_id, content_span_id) {
+	var content_id = document.getElementById(select_content_id).value;
+	singleVisibleSpan(content_span_id, content_id);
+}
+
+function reset_bd_form(form, select_content_id, content_span_id) {
+	if (reset_form(form)) {
+		change_content(select_content_id, content_span_id);
+		return true;
+	}
+	return false;
+}
/cvs/cluster/conga/luci/storage/storage_probing.js,v  -->  standard output
revision 1.1
--- conga/luci/storage/storage_probing.js
+++ -	2007-09-25 16:49:37.243145000 +0000
@@ -0,0 +1,47 @@
+/*
+** Copyright (C) 2006-2007 Red Hat, Inc.
+**
+** This program is free software; you can redistribute
+** it and/or modify it under the terms of version 2 of the
+** GNU General Public License as published by the
+** Free Software Foundation.
+*/
+
+function strip_left(txt) {
+	for (var i = 0 ; i < txt.length ; i++) {
+		if (txt[i] == " " || txt[i] == "\n") {
+			continue;
+		}
+		return txt.substr(i);
+	}
+	return txt;
+}
+
+function cache_report_callback() {
+	if (xmlHttp_object.readyState == 4) {
+		var i = (window.location + '').indexOf('?');
+		var list_URL = (window.location + '').substr(0, i);
+
+		if (xmlHttp_object.status == 200) {
+			res = xmlHttp_object.responseText;
+			res = strip_left(res);
+			if (res.substr(0, 2) == "OK") {
+				window.location.reload();
+			} else {
+				alert('An error has occured while probing storage:\n\n' + res);
+				window.location = list_URL;
+			}
+		} else {
+			alert("Error retrieving data from Luci server");
+			window.location = list_URL;
+		}
+	}
+}
+
+function cache_report() {
+	var i = (window.location + '').indexOf('?');
+	var URL = 'cache_report' + (window.location + '').substr(i);
+	initiate_async_get(URL, cache_report_callback);
+}
+
+setTimeout("cache_report()", 10);
/cvs/cluster/conga/luci/storage/storage_svs.js,v  -->  standard output
revision 1.1
--- conga/luci/storage/storage_svs.js
+++ -	2007-09-25 16:49:37.322933000 +0000
@@ -0,0 +1,23 @@
+/*
+** Copyright (C) 2006-2007 Red Hat, Inc.
+**
+** This program is free software; you can redistribute
+** it and/or modify it under the terms of version 2 of the
+** GNU General Public License as published by the
+** Free Software Foundation.
+*/
+
+function singleVisibleSpan(parent_id, child_id) {
+	parent = document.getElementById(parent_id);
+	for (var i = 0; i < parent.childNodes.length ; i++) {
+		var item = parent.childNodes[i];
+		var item_type = item.nodeName().lower();
+		if (item_type == 'span' || item_type == 'div') {
+			if (item.id == child_id) {
+				item.className = 'visible';
+			} else if (item.className == 'visible') {
+				item.className = 'invisible';
+			}
+		}
+	}
+}
/cvs/cluster/conga/luci/storage/storage_utils.js,v  -->  standard output
revision 1.1
--- conga/luci/storage/storage_utils.js
+++ -	2007-09-25 16:49:37.431385000 +0000
@@ -0,0 +1,72 @@
+/*
+** Copyright (C) 2006-2007 Red Hat, Inc.
+**
+** This program is free software; you can redistribute
+** it and/or modify it under the terms of version 2 of the
+** GNU General Public License as published by the
+** Free Software Foundation.
+*/
+
+function strip_left(txt) {
+	for (var i = 0 ; i < txt.length ; i++) {
+		if (txt[i] == " " || txt[i] == "\n") {
+			continue;
+		}
+		return txt.substr(i);
+	}
+	return txt;
+}
+
+function check_batch_callback() {
+	if (xmlHttp_object.readyState == 4) {
+		var err_url = (window.location + '').split("?")[1].split("&");
+		for (var i = 0 ; i < err_url.length ; i++) {
+			var t = err_url[i];
+			if (t.indexOf("storagename=") == 0) {
+				err_url = './?' + t + '&pagetype=44';
+				break;
+			}
+		}
+
+		if (xmlHttp_object.status == 200) {
+			var msg = xmlHttp_object.responseText;
+			msg = strip_left(msg);
+			var res = msg.split('\n');
+
+			if (res[0] == "DONE") {
+				window.location = res[1];
+			} else if (res[0] == "NOT_DONE") {
+				setTimeout("initiate_check_batch()", 3000);
+			} else {
+				var m = '';
+				if (res[0] == "FAILURE") {
+					err_url = res[1];
+					m = res[2];
+				} else {
+					m = msg;
+				}
+				alert('An error has occured while committing changes:\n\n' + m);
+				window.location = err_url;
+			}
+		} else {
+			alert("Error retrieving data from Luci server:\n\nTransfer error:\nStorage server might (not) have completed successfuly.\nVerify by yourself.");
+			window.location = err_url;
+		}
+	}
+}
+
+function initiate_check_batch() {
+	var form = document.getElementById("urls_form");
+	for (var i = 0 ; i < form.length ; i++) {
+		var elem = form.elements[i];
+		var name = elem.name;
+		var value = elem.value;
+
+		if (name == 'check_url') {
+			initiate_async_get(value, check_batch_callback);
+			return;
+		}
+	}
+}
+
+setTimeout("initiate_check_batch()", 1000);
/cvs/cluster/conga/luci/storage/storage_validation.js,v  -->  standard output
revision 1.1
--- conga/luci/storage/storage_validation.js
+++ -	2007-09-25 16:49:37.516263000 +0000
@@ -0,0 +1,398 @@
+/*
+** Copyright (C) 2006-2007 Red Hat, Inc.
+**
+** This program is free software; you can redistribute
+** it and/or modify it under the terms of version 2 of the
+** GNU General Public License as published by the
+** Free Software Foundation.
+*/
+
+function validate_text(	elem,
+						timeout,
+						illegal_chars,
+						reserved_words,
+						min_length,
+						max_length,
+						button_id)
+{
+	document.getElementById(button_id).disabled = true;
+
+	var value = elem.value;
+
+	for (var i = 0 ; i < value.length ; i++) {
+		if (illegal_chars.indexOf(value[i]) != -1) {
+			elem.className = 'validation_error';
+			display_warning(elem, timeout,
+				'Illegal characters are: \'' + illegal_chars + '\'');
+			return;
+		}
+	}
+
+	var res_list = reserved_words.split(';');
+	for (var i = 0 ; i < res_list.length ; i++) {
+		if (value == res_list[i] && value != '') {
+			elem.className = 'validation_error';
+			display_warning(elem, timeout, 'Reserved words are: ' + res_list);
+			return;
+		}
+	}
+
+	if (value.length < min_length) {
+		elem.className = 'validation_error';
+		display_warning(elem, timeout, 'Minimum length is ' + min_length);
+		return;
+	}
+
+	if (value.length > max_length) {
+		elem.className = 'validation_error';
+		display_warning(elem, timeout, 'Maximum length is ' + max_length);
+		return;
+	}
+
+	elem.className = '';
+	document.getElementById(button_id).disabled = false;
+}
+
+function validate_int(elem, timeout, min, max, step, units, button_id) {
+	document.getElementById(button_id).disabled = true;
+
+	var value = elem.value;
+	for (var i = 0 ; i < value.length ; i++) {
+		if ('0123456789'.indexOf(value[i]) == -1) {
+			elem.className = 'validation_error';
+			display_warning(elem, timeout, 'Only whole numbers are allowed');
+			return;
+		}
+	}
+
+	min = parseInt(min);
+	max = parseInt(max);
+	step = parseInt(step);
+
+	if (step == 0) {
+		step = 1;
+	}
+
+	value = parseInt(value);
+	value = (value / step) * step;
+
+	if (value < min) {
+		elem.className = 'validation_error';
+		display_warning(elem, timeout,
+			'Minimum allowed value is ' + min + ' ' + units);
+		return;
+	}
+
+	if (value > max) {
+		elem.className = 'validation_error';
+		display_warning(elem, timeout,
+			'Maximum allowed value is ' + max + ' ' + units);
+		return;
+	}
+
+	elem.className = '';
+	document.getElementById(button_id).disabled = false;
+}
+
+function validate_float(elem, timeout, min, max, step, units, button_id) {
+	document.getElementById(button_id).disabled = true;
+
+	var value = elem.value;
+	for (var i = 0 ; i < value.length ; i++) {
+		if ('0123456789.'.indexOf(value[i]) == -1) {
+			elem.className = 'validation_error';
+			display_warning(elem, timeout,
+				'Only digits and \'.\' are allowed');
+			return;
+		}
+	}
+
+	min = parseFloat(min);
+	max = parseFloat(max);
+	step = parseFloat(step);
+
+	if (step == 0.0) {
+		step = 0.00001;
+	}
+
+	value = parseFloat(value);
+	value = (value / step) * step;
+
+	if (value < min) {
+		elem.className = 'validation_error';
+		display_warning(elem, timeout,
+			'Minimum allowed value is ' + min + ' ' + units);
+		return;
+	}
+
+	if (value > max) {
+		elem.className = 'validation_error';
+		display_warning(elem, timeout,
+			'Maximum allowed value is ' + max + ' ' + units);
+		return;
+	}
+
+	elem.className = '';
+	document.getElementById(button_id).disabled = false;
+}
+
+function validate_text_keypress(elem, event, timeout, illegal_chars, max_length)
+{
+	var ev = event;
+	if (!ev) {
+		ev = window.event;
+	}
+
+	var key = get_keycode(ev);
+	if (key == 8 || key == 9) {
+		return true;
+	} else if (ev.which) {
+		;
+	} else if (document.selection) {
+		;
+	} else {
+		return true;
+	}
+
+	var ch = String.fromCharCode(key);
+	if (illegal_chars.indexOf(ch) != -1) {
+		return false;
+	}
+
+	if (elem.value.length >= max_length) {
+		return false;
+	}
+
+	return true;
+}
+
+function validate_int_keypress(elem, event, timeout) {
+	var ev = event;
+	if (!ev) {
+		ev = window.event;
+	}
+	var key = get_keycode(ev);
+
+	if (key == 8 || key == 9) {
+		return true;
+	} else if (ev.which) {
+		;
+	} else if (document.selection) {
+		;
+	} else {
+		return true;
+	}
+
+	var ch = String.fromCharCode(key);
+
+	if ('0123456789'.indexOf(ch) == -1) {
+		//display_warning(elem, timeout, 'Only whole numbers are allowed');
+		return false;
+	}
+
+	return true;
+}
+
+function validate_float_keypress(elem, event, timeout) {
+	var ev = event;
+	if (!ev) {
+		ev = window.event;
+	}
+	var key = get_keycode(ev);
+
+	if (key == 8 || key == 9) {
+		return true;
+	} else if (ev.which) {
+		;
+	} else if (document.selection) {
+		;
+	} else {
+		return true;
+	}
+
+	var ch = String.fromCharCode(key);
+
+	if ('0123456789.'.indexOf(ch) == -1) {
+		//display_warning(elem, timeout, 'Only digits and dot are allowed');
+		return false;
+	}
+
+	if (ch == '.') {
+		var txt = elem.value;
+		var c = 0;
+		for (var i = 0 ; i < txt.length ; i++) {
+			if (txt[i] == '.') {
+				c++;
+			}
+		}
+
+		if (c != 0) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+function get_keycode(ev) {
+	if (ev.keyCode) {
+		return ev.keyCode;
+	} else {
+		return ev.which;
+	}
+}
+
+var pending_warning = false;
+function display_warning(el, timeout, text) {
+	if (!pending_warning) {
+		pending_warning = true;
+		alert(text);
+		pending_warning = false;
+	}
+/*
+	var geom_obj = getGeom(el);
+
+	var warning_box = document.getElementById('warning_box');
+	if (!warning_box) {
+		alert(text);
+		return;
+	}
+
+	warning_box.innerHTML = text;
+	warning_box.style.position = 'absolute'
+	warning_box.style.left = geom_obj.x + '';
+	warning_box.style.top = (geom_obj.y - 65) + '';
+	warning_box.style.display = 'inline';
+	warning_box.style.visibility = 'visible';
+	setTimeout("remove_warning()", (1000 * timeout));
+*/
+}
+
+function remove_warning() {
+	var warning_box = document.getElementById('warning_box');
+	//warning_box.style.display = 'none';
+	warning_box.style.visibility = 'hidden';
+}
+
+function getGeom(el) {
+	var obj = new Object();
+
+	obj.x = el.offsetLeft;
+	obj.y = el.offsetTop;
+	var parent_el = el.offsetParent;
+	obj.width = el.offsetWidth;
+	obj.height = el.offsetHeight;
+
+	while (parent_el !== null) {
+		obj.x += parent_el.offsetLeft;
+		obj.y += parent_el.offsetTop;
+		parent_el = parent_el.offsetParent;
+	}
+	return obj;
+}
+
+function reset_form(form) {
+	if (confirm('Do you really want to reset the form?')) {
+		form.reset();
+		for (var i = 0 ; i < form.length ; i++) {
+			form.elements[i].className = '';
+			form.elements[i].disabled = false;
+		}
+		return true;
+	}
+	return false;
+}
+
+function strip_left(txt) {
+	for (var i = 0 ; i < txt.length ; i++) {
+		if (txt[i] == " " || txt[i] == "\n") {
+			continue;
+		}
+		return txt.substr(i);
+	}
+	return txt;
+}
+
+// Apply is a button, other ones are submits
+var tmp_submit_URL = "";
+var tmp_button_id = "";
+var tmp_prompt_msg = "";
+var tmp_form_id = "";
+
+function validate_and_submit_form_callback() {
+	if (xmlHttp_object.readyState == 4) {
+		if (xmlHttp_object.status == 200) {
+			var res = xmlHttp_object.responseText;
+			res = strip_left(res);
+			if (res.substr(0, 2) == "OK") {
+				if (confirm(tmp_prompt_msg)) {
+					var URL = tmp_submit_URL + 'action_type=Apply';
+					tmp_submit_URL = "";
+					window.location.assign(URL);
+					return;
+				}
+			} else {
+				// get elem_name & msg
+				var ind = res.indexOf(' ');
+				var elem_name = res.substr(0, ind);
+				var err_msg = strip_left(res.substr(ind));
+
+				var form = document.getElementById(tmp_form_id);
+				for (var i = 0 ; i < form.length ; i++) {
+					var elem = form.elements[i];
+					var name = elem.name;
+					if (name == elem_name) {
+						elem.className = 'validation_error';
+					}
+				}
+
+				alert(err_msg);
+			}
+		} else {
+			alert("Error retrieving data from server");
+		}
+
+		if (tmp_button_id != "") {
+			document.getElementById(tmp_button_id).disabled = false;
+		}
+		tmp_button_id = "";
+	}
+}
+
+function validate_and_submit_form(	validation_URL,
+									form_id,
+									button_id,
+									prompt_msg)
+{
+	var form = document.getElementById(form_id);
+	var URL = validation_URL + '?';
+
+	tmp_prompt_msg = prompt_msg;
+	tmp_form_id = form_id;
+	tmp_submit_URL = form.action + '?';
+
+	for (var i = 0 ; i < form.length ; i++) {
+		var elem = form.elements[i];
+		var name = elem.name;
+		var value = elem.value;
+
+		if (name != 'action_type' && name != '') {
+			if (elem.type == 'checkbox') {
+				if (elem.checked) {
+					value = 'on';
+				} else {
+					value = 'off';
+				}
+			}
+			URL += name + '=' + value + '&';
+			tmp_submit_URL += name + '=' + value + '&';
+		}
+	}
+
+	URL += 'action_type=Validate';
+	initiate_async_get(URL, validate_and_submit_form_callback);
+	tmp_button_id = button_id;
+	if (tmp_button_id != "") {
+		document.getElementById(tmp_button_id).disabled = true;
+	}
+}
--- conga/luci/storage/cylinder_select.js	2007/09/25 03:49:50	1.1
+++ conga/luci/storage/cylinder_select.js	2007/09/25 16:49:36	1.2
@@ -12,20 +12,23 @@
 var ellipse_dict = [ 2, 3, 4, 5, 5, 6, 6, 7, 7, 7, 8, 8, 8, 8 ];
 
 function ellipse(y) {
-	if (y > 26)
+	if (y > 26) {
 		return ellipse(40 - y);
-	if (y > 13)
+	}
+	if (y > 13) {
 		return 9;
+	}
 	return ellipse_dict[y];
 }
 
 function select_subcyl(id, h_data) {
 	var old_selection = current_selection;
 	unselect_cyl(old_selection, h_data);
-	if (id == old_selection)
+	if (id == old_selection) {
 		current_selection = h_data[0][0];
-	else
+	} else {
 		current_selection = id;
+	}
 	display_props(h_data);
 }
 
@@ -36,8 +39,7 @@
 			var list = h_data[i][1];
 			for (var j = 0 ; j < list.length ; j++) {
 				var el = document.getElementById(list[j]);
-				if (el)
-					el.className = 'invisible';
+				el.className = 'invisible';
 			}
 		}
 	}
--- conga/luci/storage/form-macros	2007/09/25 03:50:27	1.26
+++ conga/luci/storage/form-macros	2007/09/25 16:49:36	1.27
@@ -1,99 +1,16 @@
 <html>
-  <head>
-    <title tal:content="string:"></title>
-  </head>
-  <body>
+<head>
+	<title tal:content="string:" />
+</head>
+<body>
 
 
 <div metal:define-macro="forms-css">
-   <style>
-table.form td { padding: 0px;  }
-
-
-
-table {
-    border-spacing: 0px;
-}
-
-th {
-    font-weigt: bold;
-}
-
-th, td {
-    padding: 5px;
-}
-
-
-table.props-form-table {
-    width: 100%;
-    padding: 2px;
-}
-table.props-form-table tr,
-table.props-form-table td {
-    padding: 2px;
-}
-
-tr.props-form-header {
-    background-color: #fff;
-}
-tr.props-form-header th {
-    background-color: #dee7ec;
-    text-align: left;
-}
-tr.props-form-header th:first-child {
-}
-tr.props-form-header th:last-child {
-}
-
-tr.props-form-body {
-    height: 100%;
-}
-tr.props-form-body td {
-    width: 50%;
-}
-tr.props-form-body td:first-child {
-    border-left: 1px solid #dee7ec;
-}
-tr.props-form-body td:last-child {
-    border-right: 1px solid #dee7ec;
-}
-
-tr.props-form-footer {
-    background-color: #fff;
-}
-tr.props-form-footer td {
-    background-color: #dee7ec;
-    padding: 3px;
-}
-tr.props-form-footer td:first-child {
-}
-tr.props-form-footer td:last-child {
-}
-
-table.props-inner-table {
-    width: 100%;
-    height: 100%;
-}
-table.props-inner-table tr {
-
-}
-table.props-inner-table tr td:first-child {
-    border-left: 2px solid #fff;
-}
-table.props-inner-table tr td:last-child {
-    border-right: 2px solid #fff;
-}
-table.props-inner-table td {
-    width: auto;
-}
-
-
-   </style>
+	<style type="text/css">
+		<!-- @import url(conga_storage.css); -->
+	</style>
 </div>
 
-
-
-
 <div metal:define-macro="commit-changes">
    <span tal:omit-tag=""
         tal:define="batch_id     python:here.apply_storage_changes(ricci, storage_report, request);
@@ -108,66 +25,7 @@
   </span>
 
 
-<script language="javascript" type="text/javascript">
-
-function strip_left(txt) {
-   for (i=0; i<txt.length; i++) {
-      if (txt[i] == " " || txt[i] == "\n")
-         continue;
-      return txt.substr(i);
-   }
-   return txt;
-}
-function check_batch_callback() {
-  if (xmlHttp_object.readyState == 4) {
-    var err_url = (window.location + '').split("?")[1].split("&");
-    for (i=0; i<err_url.length; i++) {
-      var t = err_url[i];
-      if (t.indexOf("storagename=") == 0) {
-        err_url = './?' + t + '&pagetype=44';
-        break;
-      }
-    }
-    if (xmlHttp_object.status == 200) {
-      var msg = xmlHttp_object.responseText;
-      msg = strip_left(msg);
-      var res = msg.split('\n');
-      if (res[0] == "DONE") {
-         window.location = res[1];
-      } else if (res[0] == "NOT_DONE") {
-         setTimeout("initiate_check_batch()", 3000);
-      } else {
-         var m = '';
-         if (res[0] == "FAILURE") {
-           err_url = res[1];
-           m = res[2];
-         } else {
-           m = msg;
-         }
-         alert('An error has occured while committing changes:\n\n' + m);
-         window.location = err_url;
-      }
-    } else {
-      alert("Error retrieving data from Luci server:\n\nTransfer error:\nStorage server might (not) have completed successfuly.\nVerify by yourself.");
-      window.location = err_url;
-    }
-  }
-}
-function initiate_check_batch() {
-  form = document.getElementById("urls_form");
-  for (i=0; i<form.length; i++) {
-    elem = form.elements[i];
-    name = elem.name;
-    value = elem.value;
-    if (name == 'check_url') {
-      initiate_async_get(value, check_batch_callback);
-      return;
-    }
-  }
-}
-setTimeout("initiate_check_batch()", 1000);
-
-</script>
+<script type="text/javascript" src="storage_utils.js"></script>
 
 </div>
 
@@ -194,41 +52,7 @@
 
 
 <div metal:define-macro="wait-probing-storage">
-   <script>
-function strip_left(txt) {
-   for (i=0; i<txt.length; i++) {
-      if (txt[i] == " " || txt[i] == "\n")
-         continue;
-      return txt.substr(i);
-   }
-   return txt;
-}
-function cache_report_callback() {
-  if (xmlHttp_object.readyState == 4) {
-    var i = (window.location + '').indexOf('?');
-    var list_URL = (window.location + '').substr(0, i);
-    if (xmlHttp_object.status == 200) {
-        res = xmlHttp_object.responseText;
-        res = strip_left(res);
-        if (res.substr(0, 2) == "OK") {
-           window.location.reload();
-        } else {
-           alert('An error has occured while probing storage:\n\n' + res);
-           window.location = list_URL;
-        }
-    } else {
-        alert("Error retrieving data from Luci server");
-        window.location = list_URL;
-    }
-  }
-}
-function cache_report() {
-   var i = (window.location + '').indexOf('?');
-   var URL = 'cache_report' + (window.location + '').substr(i);
-   initiate_async_get(URL, cache_report_callback);
-}
-setTimeout("cache_report()", 10)
-   </script>
+	<script type="text/javascript" src="storage_probing.js"></script>
 
    <table style="width: 100%;">
     <tr>
@@ -351,24 +175,14 @@
 
 
 <div tal:omit-tag="" metal:define-macro="tree-css">
- <style type="text/css">
-  @media screen, print {
-   ul.tree              { margin-left : 0px; padding : 0px; }
-   ul.tree ul.tree, ul.tree ul , ul.tree li { margin-left : 10px; padding : 0px; }
-   ul.tree              { list-style: none; }
-   ul.tree li           { padding-left: 0px; }
-   ul.tree li.opened    { padding-left: 0px; background-image: url(tree_opened.gif); background-repeat: no-repeat; background-position: 0 0; }
-   ul.tree li.closed    { padding-left: 0px; background-image: url(tree_closed.gif); background-repeat: no-repeat; background-position: 0 0; }
-   ul.tree li.bullet    { padding-left: 0px; background-image: url(tree_bullet.gif); background-repeat: no-repeat; background-position: 0 0; }
-   ul.tree li.opened ul { display: block; }
-   ul.tree li.closed ul { display: none; }
-  }
- </style>
+	<style type="text/css">
+		<!-- @import url(storage_tree.css); -->
+	</style>
 </div>
+
 <div tal:omit-tag="" metal:define-macro="li-collapse-handler">
  <a onClick="this.parentNode.className = (this.parentNode.className == 'opened') ? 'closed' : 'opened';">
-  <img src="tree_transparent.gif"
-       style="cursor: pointer;"/>
+  <img src="tree_transparent.gif" style="cursor: pointer;"/>
  </a>
 </div>
 
@@ -415,25 +229,8 @@
   </div>
 
 
-  <div metal:define-macro="view-mappers-all-form">
-
-
-<script language="javascript" type="text/javascript">
-
-function popup_log(mylink, windowname)
-{
-   //Thanks to htmlcodetutorial.com
-   if (!window.focus) return true;
-     var href;
-   if (typeof(mylink) == 'string')
-     href=mylink;
-   else
-     href=mylink.href;
-   window.open(href, windowname, 'width=500,height=500,scrollbars=yes');
-   return false;
-}
-
-</script>
+<div metal:define-macro="view-mappers-all-form">
+	<script type="text/javascript" src="popup_log.js"></script>
 
 
    <div metal:use-macro="here/form-macros/macros/tree-css"/>
@@ -1160,452 +957,26 @@
 
 
 
-  <div tal:omit-tag="" metal:define-macro="content-scripts">
-   <script language="javascript" type="text/javascript">
-
-    var replace_properties_block__old_select_value = ''
-    function replace_properties_block(parent_id, select_id) {
-       selem = document.getElementById(select_id);
-       child_id = selem.value;
-       selem.value = replace_properties_block__old_select_value;
-       singleVisibleSpan(parent_id, child_id);
-    }
-
-    function change_content(select_content_id, content_span_id) {
-       content_id = document.getElementById(select_content_id).value;
-       singleVisibleSpan(content_span_id, content_id);
-    }
-
-    function reset_bd_form(form, select_content_id, content_span_id) {
-       if (reset_form(form)) {
-          change_content(select_content_id, content_span_id);
-          return true;
-       }
-       return false;
-    }
-
-   </script>
-  </div>
-
+<div tal:omit-tag="" metal:define-macro="content-scripts">
+   <script type="text/javascript" src="storage_content.js"></script>
+</div>
 
 
 <div tal:omit-tag="" metal:define-macro="form-scripts">
- <style>
-   input                  { background-image: none; }
-   input.validation_error { border: medium double red; background-color: orange; }
-   input.selected         { border: thin solid orange; }
-   input.form_button      { background-color: #fff; }
- </style>
-
- <script language="javascript" type="text/javascript">
-
-
-// validations
-
-function validate_text(elem, timeout, illegal_chars, reserved_words, min_length, max_length, button_id)
-{
-   document.getElementById(button_id).disabled = true;
-
-   var value = elem.value;
-
-   for (var i=0; i<value.length; i++) {
-      if (illegal_chars.indexOf(value[i]) != -1) {
-         //return;
-         elem.className = 'validation_error';
-         display_warning(elem, timeout, 'Illegal characters are: \'' + illegal_chars + '\'');
-         return;
-      }
-   }
-
-   var res_list = reserved_words.split(';');
-   for (var i=0; i<res_list.length; i++) {
-      if (value == res_list[i] && value != '') {
-         //return;
-         elem.className = 'validation_error';
-         display_warning(elem, timeout, 'Reserved words are: ' + res_list);
-         return;
-      }
-   }
-
-   if (value.length < min_length) {
-      //return;
-      elem.className = 'validation_error';
-      display_warning(elem, timeout, 'Minimum length is ' + min_length);
-      return;
-   }
-
-   if (value.length > max_length) {
-      //return;
-      elem.className = 'validation_error';
-      display_warning(elem, timeout, 'Maximum length is ' + max_length);
-      return;
-   }
-
-   elem.className = '';
-   document.getElementById(button_id).disabled = false;
-}
-
-
-function validate_int(elem, timeout, min, max, step, units, button_id)
-{
-   document.getElementById(button_id).disabled = true;
-
-   var value = elem.value;
-   for (var i=0; i<value.length; i++) {
-      if ('0123456789'.indexOf(value[i]) == -1) {
-         //return;
-         elem.className = 'validation_error';
-         display_warning(elem, timeout, 'Only whole numbers are allowed');
-         return;
-      }
-   }
-
-   min  = parseInt(min);
-   max  = parseInt(max);
-   step = parseInt(step);
-   if (step == 0)
-      step = 1;
-   value = parseInt(value);
-   value = (value / step) * step;
-
-   if (value < min) {
-      //return;
-      elem.className = 'validation_error';
-      display_warning(elem, timeout, 'Minimum allowed value is ' + min + ' ' + units);
-      return;
-   }
-
-   if (value > max) {
-      //return;
-      elem.className = 'validation_error';
-      display_warning(elem, timeout, 'Maximum allowed value is ' + max + ' ' + units);
-      return;
-   }
-
-   elem.className = '';
-   document.getElementById(button_id).disabled = false;
-}
-
-function validate_float(elem, timeout, min, max, step, units, button_id)
-{
-   document.getElementById(button_id).disabled = true;
-
-   var value = elem.value;
-   for (var i=0; i<value.length; i++) {
-      if ('0123456789.'.indexOf(value[i]) == -1) {
-         //return;
-         elem.className = 'validation_error';
-         display_warning(elem, timeout, 'Only whole digits and dot are allowed');
-         return;
-      }
-   }
-
-   min  = parseFloat(min);
-   max  = parseFloat(max);
-   step = parseFloat(step);
-   if (step == 0.0)
-      step = 0.00001;
-   value = parseFloat(value);
-   value = (value / step) * step;
-
-   if (value < min) {
-      //return;
-      elem.className = 'validation_error';
-      display_warning(elem, timeout, 'Minimum allowed value is ' + min + ' ' + units);
-      return;
-   }
-
-   if (value > max) {
-      //return;
-      elem.className = 'validation_error';
-      display_warning(elem, timeout, 'Maximum allowed value is ' + max + ' ' + units);
-      return;
-   }
-
-   elem.className = '';
-   document.getElementById(button_id).disabled = false;
-}
-
-
-function validate_text_keypress(elem, event, timeout, illegal_chars, max_length)
-{
-   var ev = event;
-   if (!ev) ev = window.event;
-   var key = get_keycode(ev);
-
-   if (key == 8 || key == 9) return true;
-   else if (ev.which) ;
-   else if (document.selection) ;
-   else return true;
-
-   var ch = String.fromCharCode(key);
-
-   if (illegal_chars.indexOf(ch) != -1) {
-//      display_warning(elem, timeout, 'Illegal characters are: \'' + illegal_chars + '\'');
-      return false;
-   }
-
-   if (elem.value.length + 1 > max_length) {
-//      display_warning(elem, timeout, 'Maximum allowed length is ' + max_length);
-      return false;
-   }
-
-   return true;
-}
-
-function validate_int_keypress(elem, event, timeout)
-{
-   var ev = event;
-   if (!ev) ev = window.event;
-   var key = get_keycode(ev);
-
-   if (key == 8 || key == 9) return true;
-   else if (ev.which) ;
-   else if (document.selection) ;
-   else return true;
-
-   var ch = String.fromCharCode(key);
-
-   if ('0123456789'.indexOf(ch) == -1) {
-//      display_warning(elem, timeout, 'Only whole numbers are allowed');
-      return false;
-   }
-
-   return true;
-}
-
-function validate_float_keypress(elem, event, timeout)
-{
-   var ev = event;
-   if (!ev) ev = window.event;
-   var key = get_keycode(ev);
-
-   if (key == 8 || key == 9) return true;
-   else if (ev.which) ;
-   else if (document.selection) ;
-   else return true;
-
-   var ch = String.fromCharCode(key);
-
-   if ('0123456789.'.indexOf(ch) == -1) {
-//      display_warning(elem, timeout, 'Only digits and dot are allowed');
-      return false;
-   }
-
-   if (ch == '.') {
-      txt = elem.value;
-      c = 0;
-      for (i=0; i<txt.length; i++) {
-         if (txt[i] == '.')
-            c++;
-      }
-      if (c != 0)
-         return false;
-   }
-
-   return true;
-}
-
-function get_keycode(ev)
-{
-    if (ev.keyCode)
-        return ev.keyCode;
-    else
-        return ev.which;
-}
-
-var pending_warning = false;
-
-function display_warning(el, timeout, text)
-{
-	if (!pending_warning) {
-		pending_warning = true;
-		alert(text);
-		pending_warning = false;
-	}
-    return;
-
-    var geom_obj = getGeom(el);
-
-    var warning_box = document.getElementById('warning_box');
-    if (!warning_box) {
-       alert(text);
-       return;
-    }
-
-    warning_box.innerHTML = text;
-    /*
-    warning_box.style.position = 'absolute'
-    warning_box.style.left = geom_obj.x + '';
-    warning_box.style.top  = (geom_obj.y - 65) + '';
-    warning_box.style.display = 'inline';
-    */
-    warning_box.style.visibility = 'visible';
-    setTimeout("remove_warning()", (1000 * timeout));
-}
-
-function remove_warning()
-{
-    var warning_box = document.getElementById('warning_box');
-//    warning_box.style.display = 'none';
-    warning_box.style.visibility = 'hidden';
-}
-
-function getGeom(el)
-{
-   var object   = new Object();
-
-   object.x     = el.offsetLeft;
-   object.y     = el.offsetTop;
-   var parent    = el.offsetParent;
-   object.width  = el.offsetWidth;
-   object.height = el.offsetHeight;
-   while(parent != null) {
-      object.x += parent.offsetLeft;
-      object.y += parent.offsetTop;
-      parent   = parent.offsetParent;
-   }
-   return object;
-}
-
-function reset_form(form) {
-   if (confirm('Do you really want to reset the form?')) {
-      form.reset();
-      for (i=0; i<form.length; i++) {
-         form.elements[i].className = '';
-         form.elements[i].disabled  = false;
-      }
-      return true;
-   }
-   return false;
-}
-
-
-
-
-
-
-function strip_left(txt) {
-   for (i=0; i<txt.length; i++) {
-      if (txt[i] == " " || txt[i] == "\n")
-         continue;
-      return txt.substr(i);
-   }
-   return txt;
-}
-
-
-// Apply is button, other ones are submits
-
-var tmp_submit_URL = "";
-var tmp_button_id = "";
-var tmp_prompt_msg = "";
-var tmp_form_id = "";
-
-function validate_and_submit_form_callback() {
-  if (xmlHttp_object.readyState == 4) {
-    if (xmlHttp_object.status == 200) {
-        res = xmlHttp_object.responseText;
-        res = strip_left(res);
-        if (res.substr(0, 2) == "OK") {
-           if (confirm(tmp_prompt_msg)) {
-              URL = tmp_submit_URL + 'action_type=Apply';
-              tmp_submit_URL = "";
-              window.location.assign(URL);
-              return;
-           }
-        } else {
-
-           // get elem_name & msg
-           var ind = res.indexOf(' ');
-           var elem_name = res.substr(0, ind);
-           var err_msg = strip_left(res.substr(ind));
-
-           form = document.getElementById(tmp_form_id);
-           for (i=0; i<form.length; i++) {
-              elem = form.elements[i];
-              name = elem.name;
-              if (name == elem_name)
-                 elem.className = 'validation_error';
-           }
-
-           alert(err_msg);
-        }
-    } else {
-        alert("Error retrieving data from server");
-    }
-    if (tmp_button_id != "")
-       document.getElementById(tmp_button_id).disabled = false;
-    tmp_button_id = "";
-  }
-}
-function validate_and_submit_form(validation_URL, form_id, button_id, prompt_msg) {
-   form = document.getElementById(form_id);
-   tmp_prompt_msg = prompt_msg;
-   tmp_form_id = form_id;
-   tmp_submit_URL = form.action + '?';
-   URL = validation_URL + '?';
-   for (i=0; i<form.length; i++) {
-      elem = form.elements[i];
-      name = elem.name;
-      value = elem.value;
-      if (name != 'action_type' && name != '') {
-         if (elem.type == 'checkbox') {
-            if (elem.checked)
-               value = 'on';
-            else
-               value = 'off';
-         }
-         URL += name + '=' + value + '&';
-         tmp_submit_URL += name + '=' + value + '&';
-      }
-   }
-   URL += 'action_type=Validate';
-   initiate_async_get(URL, validate_and_submit_form_callback);
-   tmp_button_id = button_id;
-   if (tmp_button_id != "")
-      document.getElementById(tmp_button_id).disabled = true;
-}
-
-
- </script>
+	<style type="text/css">
+		<!-- @import url(storage_validation.css); -->
+	</style>
+	<script type="text/javascript" src="storage_validation.js"></script>
 </div>
 
-
 <div tal:omit-tag="" metal:define-macro="single-visible-span">
-<!--
-   @media screen, print {
-    span.visible     { visibility: visible; }
-    span.invisible   { visibility: hidden; }
-    div.visible      { display: block; }
-    div.invisible    { height: 0px; width: 0px; overflow: hidden; }
-   }
--->
- <style type="text/css">
-   @media screen, print {
-    span.visible     { display: block; }
-    span.invisible   { display: none; }
-    div.visible      { display: block; }
-    div.invisible    { display: none; }
-   }
- </style>
- <script language="javascript" type="text/javascript">
-  function singleVisibleSpan(parent_id, child_id) {
-    parent = document.getElementById(parent_id);
-    for (var i=0; i < parent.childNodes.length; i++) {
-      var item = parent.childNodes[i];
-      if (item.nodeName == 'SPAN' || item.nodeName == 'span' || item.nodeName == 'DIV' || item.nodeName == 'div') {
-        if (item.id == child_id)
-          item.className = 'visible';
-        else if (item.className == 'visible')
-          item.className = 'invisible';
-      }
-    }
-  }
- </script>
+	<style type="text/css">
+		<!-- @import url(storage_svs.css); -->
+	</style>
+	<script type="text/javascript" src="storage_svs.js"></script>
 </div>
 
-  <div metal:define-macro="display-BD">
+<div metal:define-macro="display-BD">
    <div metal:use-macro="here/form-macros/macros/forms-css"/>
    <span tal:omit-tag=""
          tal:define="predefines_test python:'display-BD: ' + str(bd_data) + storagename + properties_span_id"/>