contrib/php-collection/browser.js

   1 /*
   2  * Copyright (C) 2009  Bruno Prémont <bonbons AT linux-vserver.org>
   3  *
   4  * This program is free software; you can redistribute it and/or modify it under
   5  * the terms of the GNU General Public License as published by the Free Software
   6  * Foundation; only version 2 of the License is applicable.
   7  *
   8  * This program is distributed in the hope that it will be useful, but WITHOUT
   9  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  10  * FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
  11  * details.
  12  *
  13  * You should have received a copy of the GNU General Public License along with
  14  * this program; if not, write to the Free Software Foundation, Inc.,
  15  * 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  16  */
  17
  18 // Toggle visibility of a div
  19 function toggleDiv(divID) {
  20         var div   = document.getElementById(divID);
  21         var label = document.getElementById(divID+'_sw');
  22         var label_txt = null;
  23         if (div) {
  24                 if (div.style.display == 'none') {
  25                         div.style.display = 'block';
  26                         label_txt = 'Hide';
  27                 } else {
  28                         div.style.display = 'none';
  29                         label_txt = 'Show';
  30                 }
  31         }
  32         if (label_txt && label) {
  33                 var childCnt = label.childNodes.length;
  34                 while (childCnt > 0)
  35                         label.removeChild(label.childNodes[--childCnt]);
  36                 label.appendChild(document.createTextNode(label_txt));
  37         }
  38         GraphPositionToolbox(null);
  39 }
  40
  41 var req = null;
  42
  43 // DHTML helper code to asynchronous loading of content
  44 function loadXMLDoc(url, query) {
  45         if (window.XMLHttpRequest) {
  46                 req = new XMLHttpRequest();
  47                 req.onreadystatechange = processReqChange;
  48                 req.open('POST', url, true);
  49                 req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  50                 req.send(query);
  51         } else if (window.ActiveXObject) {
  52                 req = new ActiveXObject("Microsoft.XMLHTTP");
  53                 if (req) {
  54                         req.onreadystatechange = processReqChange;
  55                         req.open('POST', url, true);
  56                         req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  57                         req.send(query);
  58                 }
  59         }
  60 }
  61
  62 // DHTML new-content dispatcher
  63 function processReqChange(evt) {
  64         if (req.readyState == 4) {
  65                 if (req.status == 200) {
  66                         var response = req.responseXML.documentElement;
  67                         var method = response.getElementsByTagName('method')[0].firstChild.data;
  68                         var result = response.getElementsByTagName('result')[0];
  69                         req = null;
  70                         eval(method + '(result)');
  71                 }
  72         }
  73 }
  74
  75 // Update contents of a <select> drop-down list
  76 function refillSelect(options, select) {
  77         if (!select)
  78                 return -1;
  79
  80         var childCnt = select.childNodes.length;
  81         var oldValue = select.selectedIndex > 0 ? select.options[select.selectedIndex].value : '/';
  82         while (childCnt > 0)
  83                 select.removeChild(select.childNodes[--childCnt]);
  84
  85         var optCnt = options ? options.length : 0;
  86         if (optCnt == 0) {
  87                 select.setAttribute('disabled', 'disabled');
  88                 return -1;
  89         } else {
  90                 select.removeAttribute('disabled');
  91                 var keepSelection = false;
  92                 if (optCnt == 1) {
  93                         keepSelection = true;
  94                         oldValue = options[0].firstChild ? options[0].firstChild.data : '';
  95                 } else if (oldValue != '/') {
  96                         for (i = 0; i < optCnt && !keepSelection; i++)
  97                                 if (oldValue == (options[i].firstChild ? options[i].firstChild.data : ''))
  98                                         keepSelection = true;
  99                 }
 100                 newOption = document.createElement("option");
 101                 newOption.value = '/';
 102                 if (keepSelection)
 103                         newOption.setAttribute('disabled', 'disabled');
 104                 else
 105                         newOption.setAttribute('selected', 'selected');
 106                 newOption.setAttribute('style', 'font-style: italic');
 107                 newOption.appendChild(document.createTextNode('- please select -'));
 108                 select.appendChild(newOption);
 109                 for (i = 0; i < optCnt; i++) {
 110                         newOption = document.createElement("option");
 111                         newOption.value = options[i].firstChild ? options[i].firstChild.data : '';
 112                         if (keepSelection && newOption.value == oldValue)
 113                                 newOption.setAttribute('selected', 'selected');
 114                         if (newOption.value[0] == '@') {
 115                                 newOption.setAttribute('style', 'font-style: italic');
 116                                 if (newOption.value == '@' || newOption.value == '@merge')
 117                                         newOption.appendChild(document.createTextNode('Meta graph'));
 118                                 else if (newOption.value == '@all')
 119                                         newOption.appendChild(document.createTextNode('All entries'));
 120                                 else if (newOption.value == '@merge_sum')
 121                                         newOption.appendChild(document.createTextNode('Meta summed graph'));
 122                                 else if (newOption.value == '@merge_avg')
 123                                         newOption.appendChild(document.createTextNode('Meta averaged graph'));
 124                                 else if (newOption.value == '@merge_stack')
 125                                         newOption.appendChild(document.createTextNode('Meta stacked graph'));
 126                                 else if (newOption.value == '@merge_line')
 127                                         newOption.appendChild(document.createTextNode('Meta lines graph'));
 128                                 else
 129                                         newOption.appendChild(document.createTextNode(newOption.value));
 130                         } else
 131                                 newOption.appendChild(document.createTextNode(newOption.value));
 132                         select.appendChild(newOption);
 133                 }
 134                 return keepSelection ? select.selectedIndex : -1;
 135         }
 136 }
 137
 138 // Request refresh of host list
 139 function ListRefreshHost() {
 140         var query = 'action=list_hosts';
 141         loadXMLDoc(dhtml_url, query);
 142 }
 143
 144 // Handle update to host list
 145 function ListOfHost(response) {
 146         var select = document.getElementById('host_list');
 147         var idx = refillSelect(response ? response.getElementsByTagName('option') : null, select);
 148         if (idx > 0) {
 149                 ListRefreshPlugin();
 150         } else
 151                 ListOfPlugin(null);
 152 }
 153
 154 // Request refresh of plugin list
 155 function ListRefreshPlugin() {
 156         var host_list = document.getElementById('host_list');
 157         var host      = host_list.selectedIndex >= 0 ? host_list.options[host_list.selectedIndex].value : '/';
 158         if (host != '/') {
 159                 var query = 'action=list_plugins&host='+encodeURIComponent(host);
 160                 loadXMLDoc(dhtml_url, query);
 161         } else {
 162                 ListOfPlugin(null);
 163         }
 164 }
 165
 166 // Handle update to plugin list
 167 function ListOfPlugin(response) {
 168         var select = document.getElementById('plugin_list');
 169         var idx = refillSelect(response ? response.getElementsByTagName('option') : null, select);
 170         if (idx > 0) {
 171                 ListRefreshPluginInstance();
 172         } else
 173                 ListOfPluginInstance(null);
 174 }
 175
 176 // Request refresh of plugin instance list
 177 function ListRefreshPluginInstance() {
 178         var host_list   = document.getElementById('host_list');
 179         var host        = host_list.selectedIndex >= 0 ? host_list.options[host_list.selectedIndex].value : '/';
 180         var plugin_list = document.getElementById('plugin_list');
 181         var plugin      = plugin_list.selectedIndex >= 0 ? plugin_list.options[plugin_list.selectedIndex].value : '/';
 182         if (host != '/' && plugin != '/') {
 183                 var query = 'action=list_pinsts&host='+encodeURIComponent(host)+'&plugin='+encodeURIComponent(plugin);
 184                 loadXMLDoc(dhtml_url, query);
 185         } else {
 186                 ListOfPluginInstance(null);
 187         }
 188 }
 189
 190 // Handle update of plugin instance list
 191 function ListOfPluginInstance(response) {
 192         var select = document.getElementById('pinst_list');
 193         var idx = refillSelect(response ? response.getElementsByTagName('option') : null, select);
 194         if (idx > 0) {
 195                 ListRefreshType();
 196         } else
 197                 ListOfType(null);
 198 }
 199
 200 // Request refresh of type list
 201 function ListRefreshType() {
 202         var host_list   = document.getElementById('host_list');
 203         var host        = host_list.selectedIndex >= 0 ? host_list.options[host_list.selectedIndex].value : '/';
 204         var plugin_list = document.getElementById('plugin_list');
 205         var plugin      = plugin_list.selectedIndex >= 0 ? plugin_list.options[plugin_list.selectedIndex].value : '/';
 206         var pinst_list  = document.getElementById('pinst_list');
 207         var pinst       = pinst_list.selectedIndex >= 0 ? pinst_list.options[pinst_list.selectedIndex].value : '/';
 208         if (host != '/' && plugin != '/' && pinst != '/') {
 209                 var query = 'action=list_types&host='+encodeURIComponent(host)+'&plugin='+encodeURIComponent(plugin)+'&plugin_instance='+encodeURIComponent(pinst);
 210                 loadXMLDoc(dhtml_url, query);
 211         } else {
 212                 ListOfType(null);
 213         }
 214 }
 215
 216 // Handle update of type list
 217 function ListOfType(response) {
 218         var select = document.getElementById('type_list');
 219         var idx = refillSelect(response ? response.getElementsByTagName('option') : null, select);
 220         if (idx > 0) {
 221                 ListRefreshTypeInstance();
 222         } else
 223                 ListOfTypeInstance(null);
 224 }
 225
 226 // Request refresh of type instance list
 227 function ListRefreshTypeInstance() {
 228         var host_list   = document.getElementById('host_list');
 229         var host        = host_list.selectedIndex >= 0 ? host_list.options[host_list.selectedIndex].value : '/';
 230         var plugin_list = document.getElementById('plugin_list');
 231         var plugin      = plugin_list.selectedIndex >= 0 ? plugin_list.options[plugin_list.selectedIndex].value : '/';
 232         var pinst_list  = document.getElementById('pinst_list');
 233         var pinst       = pinst_list.selectedIndex >= 0 ? pinst_list.options[pinst_list.selectedIndex].value : '/';
 234         var type_list   = document.getElementById('type_list');
 235         var type        = type_list.selectedIndex >= 0 ? type_list.options[type_list.selectedIndex].value : '/';
 236         if (host != '/' && plugin != '/' && pinst != '/' && type != '/') {
 237                 var query = 'action=list_tinsts&host='+encodeURIComponent(host)+'&plugin='+encodeURIComponent(plugin)+'&plugin_instance='+encodeURIComponent(pinst)+'&type='+encodeURIComponent(type);
 238                 loadXMLDoc(dhtml_url, query);
 239         } else {
 240                 ListOfTypeInstance(null);
 241         }
 242 }
 243
 244 // Handle update of type instance list
 245 function ListOfTypeInstance(response) {
 246         var select = document.getElementById('tinst_list');
 247         var idx = refillSelect(response ? response.getElementsByTagName('option') : null, select);
 248         if (idx > 0) {
 249                 // Enable add button
 250                 RefreshButtons();
 251         } else {
 252                 // Disable add button
 253                 RefreshButtons();
 254         }
 255 }
 256
 257 function RefreshButtons() {
 258         var host_list   = document.getElementById('host_list');
 259         var host        = host_list.selectedIndex >= 0 ? host_list.options[host_list.selectedIndex].value : '/';
 260         var plugin_list = document.getElementById('plugin_list');
 261         var plugin      = plugin_list.selectedIndex >= 0 ? plugin_list.options[plugin_list.selectedIndex].value : '/';
 262         var pinst_list  = document.getElementById('pinst_list');
 263         var pinst       = pinst_list.selectedIndex >= 0 ? pinst_list.options[pinst_list.selectedIndex].value : '/';
 264         var type_list   = document.getElementById('type_list');
 265         var type        = type_list.selectedIndex >= 0 ? type_list.options[type_list.selectedIndex].value : '/';
 266         var tinst_list  = document.getElementById('tinst_list');
 267         var tinst       = tinst_list.selectedIndex >= 0 ? tinst_list.options[tinst_list.selectedIndex].value : '/';
 268         if (host != '/' && plugin != '/' && pinst != '/' && type != '/' && tinst != '/') {
 269                 document.getElementById('btnAdd').removeAttribute('disabled');
 270         } else {
 271                 document.getElementById('btnAdd').setAttribute('disabled', 'disabled');
 272         }
 273
 274         var graphs = document.getElementById('graphs');
 275         if (graphs.getElementsByTagName('div').length > 1) {
 276                 document.getElementById('btnClear').removeAttribute('disabled');
 277                 document.getElementById('btnRefresh').removeAttribute('disabled');
 278         } else {
 279                 document.getElementById('btnClear').setAttribute('disabled', 'disabled');
 280                 document.getElementById('btnRefresh').setAttribute('disabled', 'disabled');
 281         }
 282 }
 283
 284 var nextGraphId = 1;
 285 var graphList = new Array();
 286
 287 function GraphAppend() {
 288         var host_list   = document.getElementById('host_list');
 289         var host        = host_list.selectedIndex >= 0 ? host_list.options[host_list.selectedIndex].value : '/';
 290         var plugin_list = document.getElementById('plugin_list');
 291         var plugin      = plugin_list.selectedIndex >= 0 ? plugin_list.options[plugin_list.selectedIndex].value : '/';
 292         var pinst_list  = document.getElementById('pinst_list');
 293         var pinst       = pinst_list.selectedIndex >= 0 ? pinst_list.options[pinst_list.selectedIndex].value : '/';
 294         var type_list   = document.getElementById('type_list');
 295         var type        = type_list.selectedIndex >= 0 ? type_list.options[type_list.selectedIndex].value : '/';
 296         var tinst_list  = document.getElementById('tinst_list');
 297         var tinst       = tinst_list.selectedIndex >= 0 ? tinst_list.options[tinst_list.selectedIndex].value : '/';
 298         var time_list   = document.getElementById('timespan');
 299         var timespan    = time_list.selectedIndex >= 0 ? time_list.options[time_list.selectedIndex].value : '';
 300         var tinyLegend  = document.getElementById('tinylegend').checked;
 301         var logarithmic = document.getElementById('logarithmic').checked;
 302         if (host[0] == '@' || plugin[0] == '@' || pinst[0] == '@' || type[0] == '@' || (tinst[0] == '@' && tinst.substr(0, 5) != '@merge')) {
 303                 var query = 'action=list_graphs&host='+encodeURIComponent(host)+'&plugin='+encodeURIComponent(plugin)+'&plugin_instance='+encodeURIComponent(pinst);
 304                 query = query+'&type='+encodeURIComponent(type)+'&type_instance='+encodeURIComponent(tinst)+'&timespan='+encodeURIComponent(timespan);
 305                 query = query+(logarithmic ? '&logarithmic=1' : '')+(tinyLegend ? '&tinylegend=1' : '');
 306                 loadXMLDoc(dhtml_url, query);
 307         } else
 308                 GraphDoAppend(host, plugin, pinst, type, tinst, timespan, tinyLegend, logarithmic);
 309 }
 310
 311 function ListOfGraph(response) {
 312         var graphs = response ? response.getElementsByTagName('graph') : null;
 313         if (graphs && graphs.length > 0) {
 314                 for (i = 0; i < graphs.length; i++)
 315                         GraphDoAppend(graphs[i].getAttribute('host'), graphs[i].getAttribute('plugin'), graphs[i].getAttribute('plugin_instance'),
 316                                       graphs[i].getAttribute('type'), graphs[i].getAttribute('type_instance'), graphs[i].getAttribute('timespan'),
 317                                       graphs[i].getAttribute('tinyLegend') == '1', graphs[i].getAttribute('logarithmic') == '1');
 318         } else
 319                 alert('No graph found for adding');
 320 }
 321
 322 function GraphDoAppend(host, plugin, pinst, type, tinst, timespan, tinyLegend, logarithmic) {
 323         var graphs      = document.getElementById('graphs');
 324
 325         if (host != '/' && plugin != '/' && pinst != '/' && type != '/') {
 326                 var graph_id   = 'graph_'+nextGraphId++;
 327                 var graph_src  = graph_url+'?host='+encodeURIComponent(host)+'&plugin='+encodeURIComponent(plugin)+'&plugin_instance='+encodeURIComponent(pinst)+'&type='+encodeURIComponent(type);
 328                 var graph_alt  = '';
 329                 var grap_title = '';
 330                 if (tinst == '@') {
 331                         graph_alt   = host+'/'+plugin+(pinst.length > 0 ? '-'+pinst : '')+'/'+type;
 332                         graph_title = type+' of '+plugin+(pinst.length > 0 ? '-'+pinst : '')+' plugin for '+host;
 333                 } else {
 334                         graph_alt   = host+'/'+plugin+(pinst.length > 0 ? '-'+pinst : '')+'/'+type+(tinst.length > 0 ? '-'+tinst : '');
 335                         graph_title = type+(tinst.length > 0 ? '-'+tinst : '')+' of '+plugin+(pinst.length > 0 ? '-'+pinst : '')+' plugin for '+host;
 336                         graph_src  += '&type_instance='+encodeURIComponent(tinst);
 337                 }
 338                 if (logarithmic)
 339                         graph_src += '&logarithmic=1';
 340                 if (tinyLegend)
 341                         graph_src += '&tinylegend=1';
 342                 if (timespan)
 343                         graph_src += '&timespan='+encodeURIComponent(timespan);
 344                 var now    = new Date();
 345                 graph_src += '&ts='+now.getTime();
 346                 graphList.push(graph_id+' '+encodeURIComponent(graph_alt)+(logarithmic ? '&logarithmic=1' : '')+(tinyLegend ? '&tinylegend=1' : '')+'&timespan='+encodeURIComponent(timespan));
 347
 348                 // Graph container
 349                 newGraph = document.createElement('div');
 350                 newGraph.setAttribute('class', 'graph');
 351                 newGraph.setAttribute('id', graph_id);
 352                 // Graph cell + graph
 353                 newImg = document.createElement('img');
 354                 newImg.setAttribute('src', graph_src);
 355                 newImg.setAttribute('alt', graph_alt);
 356                 newImg.setAttribute('title', graph_title);
 357                 newImg.setAttribute('onclick', 'GraphToggleTools("'+graph_id+'")');
 358                 newGraph.appendChild(newImg);
 359                 graphs.appendChild(newGraph);
 360         }
 361         document.getElementById('nograph').style.display = 'none';
 362         RefreshButtons();
 363 }
 364
 365 function GraphDropAll() {
 366         var graphs = document.getElementById('graphs');
 367         var childCnt = graphs.childNodes.length;
 368         while (childCnt > 0)
 369                 if (graphs.childNodes[--childCnt].id != 'nograph' && (graphs.childNodes[childCnt].nodeName == 'div' || graphs.childNodes[childCnt].nodeName == 'DIV'))
 370                         graphs.removeChild(graphs.childNodes[childCnt]);
 371                 else if (graphs.childNodes[childCnt].id == 'nograph')
 372                         graphs.childNodes[childCnt].style.display = 'block';
 373         graphList = new Array();
 374         RefreshButtons();
 375 }
 376
 377 function GraphToggleTools(graph) {
 378         var graphId = document.getElementById('ge_graphid').value;
 379         var ref_img = null;
 380         if (graphId == graph || graph == '') {
 381                 ref_img = null;
 382         } else {
 383                 var graphDiv = document.getElementById(graph);
 384                 var imgs     = graphDiv ? graphDiv.getElementsByTagName('img') : null;
 385                 var imgCnt   = imgs ? imgs.length : 0;
 386                 while (imgCnt > 0)
 387                         if (imgs[--imgCnt].parentNode.getAttribute('class') == 'graph')
 388                                 ref_img = imgs[imgCnt];
 389         }
 390         if (ref_img) {
 391                 var ts_sel  =  document.getElementById('ge_timespan');
 392                 var src_url = ref_img.src;
 393                 var ge      = document.getElementById('ge');
 394                 // Fix field values
 395                 var ts = src_url.match(/&timespan=[^&]*/);
 396                 ts = ts ? ts[0].substr(10) : '';
 397                 document.getElementById('ge_graphid').value = graph;
 398                 document.getElementById('ge_tinylegend').checked = src_url.match(/&tinylegend=1/);
 399                 document.getElementById('ge_logarithmic').checked = src_url.match(/&logarithmic=1/);
 400                 for (i = 0; i < ts_sel.options.length; i++)
 401                         if (ts_sel.options[i].value == ts) {
 402                                 ts_sel.selectedIndex = i;
 403                                 break;
 404                         }
 405                 // show tools box and position it properly
 406                 ge.style.display = 'table';
 407                 GraphPositionToolbox(ref_img);
 408         } else {
 409                 // hide tools box
 410                 document.getElementById('ge').style.display = 'none';
 411                 document.getElementById('ge_graphid').value = '';
 412         }
 413 }
 414
 415 function GraphPositionToolbox(ref_img) {
 416         var ge      = document.getElementById('ge');
 417         if (ge.style.display != 'none') {
 418                 var wl = 0; var wt = 0;
 419                 var x = ref_img;
 420                 if (ref_img == null) {
 421                         var graphDiv = document.getElementById(document.getElementById('ge_graphid').value);
 422                         var imgs     = graphDiv ? graphDiv.getElementsByTagName('img') : null;
 423                         var imgCnt   = imgs ? imgs.length : 0;
 424                         while (imgCnt > 0)
 425                                 if (imgs[--imgCnt].parentNode.getAttribute('class') == 'graph')
 426                                         ref_img = imgs[imgCnt];
 427
 428                         if (ref_img == null) {
 429                                 document.getElementById('ge_graphid').value = '';
 430                                 ge.style.display = 'none';
 431                                 return;
 432                         } else
 433                                 x = ref_img;
 434                 }
 435                 while (x != null) {
 436                         wl += x.offsetLeft;
 437                         wt += x.offsetTop;
 438                         x = x.offsetParent;
 439                 }
 440                 ge.style.left    = (wl + (ref_img.offsetWidth - ge.offsetWidth) / 2)+'px';
 441                 ge.style.top     = (wt + (ref_img.offsetHeight - ge.offsetHeight) / 2)+'px';
 442         }
 443 }
 444
 445 function GraphRefreshAll() {
 446         var imgs   = document.getElementById('graphs').getElementsByTagName('img');
 447         var imgCnt = imgs.length;
 448         var now    = new Date();
 449         var newTS  = '&ts='+now.getTime();
 450         while (imgCnt > 0)
 451                 if (imgs[--imgCnt].parentNode.getAttribute('class') == 'graph') {
 452                         var oldSrc = imgs[imgCnt].src;
 453                         var newSrc = oldSrc.replace(/&ts=[0-9]+/, newTS);
 454                         if (newSrc == oldSrc)
 455                                 newSrc = newSrc + newTS;
 456                         imgs[imgCnt].setAttribute('src', newSrc);
 457                 }
 458 }
 459
 460 function GraphRefresh(graph) {
 461         var graphElement = null;
 462         if (graph == null) {
 463                 var graphId = document.getElementById('ge_graphid').value;
 464                 if (graphId != '')
 465                         graphElement = document.getElementById(graphId);
 466         } else
 467                 graphElement = document.getElementById(graph);
 468         if (graphElement != null) {
 469                 var imgs = graphElement.getElementsByTagName('img');
 470                 var imgCnt = imgs.length;
 471                 while (imgCnt > 0)
 472                         if (imgs[--imgCnt].parentNode.getAttribute('class') == 'graph') {
 473                                 var now    = new Date();
 474                                 var newTS  = '&ts='+now.getTime();
 475                                 var oldSrc = imgs[imgCnt].src;
 476                                 var newSrc = oldSrc.replace(/&ts=[0-9]+/, newTS);
 477                                 if (newSrc == oldSrc)
 478                                         newSrc = newSrc+newTS;
 479                                 imgs[imgCnt].setAttribute('src', newSrc);
 480                                 break;
 481                         }
 482         }
 483 }
 484
 485 function GraphAdjust(graph) {
 486         var graphId = graph == null ? document.getElementById('ge_graphid').value : graph;
 487         var graphElement = document.getElementById(graphId);
 488         if (graphElement != null) {
 489                 var time_list   = document.getElementById('ge_timespan');
 490                 var timespan    = time_list.selectedIndex >= 0 ? time_list.options[time_list.selectedIndex].value : '';
 491                 var tinyLegend  = document.getElementById('ge_tinylegend').checked;
 492                 var logarithmic = document.getElementById('ge_logarithmic').checked
 493                 var imgs = graphElement.getElementsByTagName('img');
 494                 var imgCnt = imgs.length;
 495                 var ref_img     = null;
 496                 while (imgCnt > 0)
 497                         if (imgs[--imgCnt].parentNode.getAttribute('class') == 'graph') {
 498                                 var now    = new Date();
 499                                 var newTS  = '&ts='+now.getTime();
 500                                 var oldSrc = imgs[imgCnt].src;
 501                                 var newSrc = oldSrc.replace(/&ts=[^&]*/, newTS);
 502                                 if (newSrc == oldSrc)
 503                                         newSrc = newSrc+newTS;
 504                                 newSrc     = newSrc.replace(/&logarithmic=[^&]*/, '');
 505                                 if (logarithmic)
 506                                         newSrc += '&logarithmic=1';
 507                                 newSrc     = newSrc.replace(/&tinylegend=[^&]*/, '');
 508                                 if (tinyLegend)
 509                                         newSrc += '&tinylegend=1';
 510                                 newSrc     = newSrc.replace(/&timespan=[^&]*/, '');
 511                                 if (timespan)
 512                                         newSrc += '&timespan='+encodeURIComponent(timespan);
 513                                 imgs[imgCnt].setAttribute('src', newSrc);
 514
 515                                 var myList = Array();
 516                                 for (i = 0; i < graphList.length; i++)
 517                                         if (graphList[i].substring(0, graphId.length) == graphId && graphList[i].charAt(graphId.length) == ' ') {
 518                                                 newSrc = graphList[i];
 519                                                 newSrc = newSrc.replace(/&logarithmic=[^&]*/, '');
 520                                                 newSrc = newSrc.replace(/&tinylegend=[^&]*/, '');
 521                                                 newSrc = newSrc.replace(/&timespan=[^&]*/, '');
 522                                                 newSrc = newSrc+(logarithmic ? '&logarithmic=1' : '')+(tinyLegend ? '&tinylegend=1' : '')+'&timespan='+encodeURIComponent(timespan);
 523                                                 myList.push(newSrc);
 524                                                 continue;
 525                                         } else
 526                                                 myList.push(graphList[i]);
 527                                 graphList = myList;
 528                                 window.setTimeout("GraphPositionToolbox(null)", 10);
 529                                 // GraphPositionToolbox(imgs[imgCnt]);
 530                                 break;
 531                         }
 532         }
 533 }
 534
 535 function GraphRemove(graph) {
 536         var graphs = document.getElementById('graphs');
 537         var graphId = graph == null ? document.getElementById('ge_graphid').value : graph;
 538         var graphElement = document.getElementById(graphId);
 539         if (graphElement) {
 540                 GraphToggleTools('');
 541                 graphs.removeChild(graphElement);
 542                 RefreshButtons();
 543                 if (graphs.getElementsByTagName('div').length == 1)
 544                         document.getElementById('nograph').style.display = 'block';
 545
 546                 var myList = Array();
 547                 for (i = 0; i < graphList.length; i++)
 548                         if (graphList[i].substring(0, graphId.length) == graphId && graphList[i].charAt(graphId.length) == ' ')
 549                                 continue;
 550                         else
 551                                 myList.push(graphList[i]);
 552                 graphList = myList;
 553         }
 554 }
 555
 556 function GraphMoveUp(graph) {
 557         var graphs    = document.getElementById('graphs');
 558         var graphId   = graph == null ? document.getElementById('ge_graphid').value : graph;
 559         var childCnt  = graphs.childNodes.length;
 560         var prevGraph = null;
 561         for (i = 0; i < childCnt; i++)
 562                 if (graphs.childNodes[i].nodeName == 'div' || graphs.childNodes[i].nodeName == 'DIV') {
 563                         if (graphs.childNodes[i].id == 'nograph') {
 564                                 // Skip
 565                         } else if (graphs.childNodes[i].id == graphId) {
 566                                 var myGraph = graphs.childNodes[i];
 567                                 if (prevGraph) {
 568                                         graphs.removeChild(myGraph);
 569                                         graphs.insertBefore(myGraph, prevGraph);
 570                                 }
 571                                 break;
 572                         } else
 573                                 prevGraph = graphs.childNodes[i];
 574                 }
 575         for (i = 0; i < graphList.length; i++)
 576                 if (graphList[i].substring(0, graphId.length) == graphId && graphList[i].charAt(graphId.length) == ' ') {
 577                         if (i > 0) {
 578                                 var tmp = graphList[i-1];
 579                                 graphList[i-1] = graphList[i];
 580                                 graphList[i]   = tmp;
 581                         }
 582                         break;
 583                 }
 584         GraphPositionToolbox(null);
 585 }
 586
 587 function GraphMoveDown(graph) {
 588         var graphs    = document.getElementById('graphs');
 589         var graphId   = graph == null ? document.getElementById('ge_graphid').value : graph;
 590         var childCnt  = graphs.childNodes.length;
 591         var nextGraph = null;
 592         var myGraph   = null;
 593         for (i = 0; i < childCnt; i++)
 594                 if (graphs.childNodes[i].nodeName == 'div' || graphs.childNodes[i].nodeName == 'DIV') {
 595                         if (graphs.childNodes[i].id == 'nograph') {
 596                                 // Skip
 597                         } else if (graphs.childNodes[i].id == graphId) {
 598                                 myGraph = graphs.childNodes[i];
 599                         } else if (myGraph) {
 600                                 nextGraph = graphs.childNodes[i];
 601                                 graphs.removeChild(nextGraph);
 602                                 graphs.insertBefore(nextGraph, myGraph);
 603                                 break;
 604                         }
 605                 }
 606         for (i = 0; i < graphList.length; i++)
 607                 if (graphList[i].substring(0, graphId.length) == graphId && graphList[i].charAt(graphId.length) == ' ') {
 608                         if (i+1 < graphList.length) {
 609                                 var tmp = graphList[i+1];
 610                                 graphList[i+1] = graphList[i];
 611                                 graphList[i]   = tmp;
 612                         }
 613                         break;
 614                 }
 615         GraphPositionToolbox(null);
 616 }
 617
 618 function GraphListFromCookie(lname) {
 619         if (document.cookie.length > 0) {
 620                 var cname= 'graphLst'+lname+'=';
 621                 var cookies = document.cookie.split('; ');
 622                 for (i = 0; i < cookies.length; i++)
 623                         if (cookies[i].substring(0, cname.length) == cname)
 624                                 return cookies[i].substring(cname.length).split('/');
 625         }
 626         return new Array();
 627 }
 628
 629 function GraphListNameSort(a, b) {
 630         if (a[0] > b[0])
 631                 return 1
 632         else if (a[0] < b[0])
 633                 return -1;
 634         else
 635                 return 0;
 636 }
 637
 638 function GraphListRefresh() {
 639         var select   = document.getElementById('GraphList');
 640         var childCnt = select.childNodes.length;
 641         var oldValue = select.selectedIndex > 0 ? select.options[select.selectedIndex].value : '/';
 642         while (childCnt > 0)
 643                 select.removeChild(select.childNodes[--childCnt]);
 644
 645         // Determine available names
 646         var options = new Array();
 647         if (document.cookie.length > 0) {
 648                 var cookies = document.cookie.split('; ');
 649                 for (i = 0; i < cookies.length; i++)
 650                         if (cookies[i].substring(0, 8) == 'graphLst') {
 651                                 var p = cookies[i].indexOf('=');
 652                                 if (p < 0)
 653                                         continue;
 654                                 options.push(new Array(cookies[i].substring(8, p), cookies[i].substring(p+1).split('/').length));
 655                         }
 656         }
 657         options.sort(GraphListNameSort);
 658
 659         var optCnt  = options ? options.length : 0;
 660         if (optCnt == 0) {
 661                 select.setAttribute('disabled', 'disabled');
 662                 return -1;
 663         } else {
 664                 select.removeAttribute('disabled');
 665                 for (i = 0; i < optCnt; i++) {
 666                         newOption = document.createElement("option");
 667                         newOption.value = options[i][0];
 668                         if (newOption.value == oldValue)
 669                                 newOption.setAttribute('selected', 'selected');
 670                         if (options[i][1] == 1)
 671                                 newOption.appendChild(document.createTextNode(newOption.value+' (1 graph)'));
 672                         else
 673                                 newOption.appendChild(document.createTextNode(newOption.value+' ('+options[i][1]+' graphs)'));
 674                         select.appendChild(newOption);
 675                 }
 676                 return select.selectedIndex;
 677         }
 678 }
 679
 680 function GraphListCheckName(doalert) {
 681         var lname = document.getElementById('GraphListName');
 682         if (lname) {
 683                 if (lname.value.match(/^[a-zA-Z0-9_-]+$/)) {
 684                         lname.style.backgroundColor = '';
 685                         return lname.value;
 686                 } else {
 687                         lname.style.backgroundColor = '#ffdddd';
 688                         if (doalert && lname.value.length == 0)
 689                                 alert('Graph list name is empty.\n\n'+
 690                                       'Please fill in a name and try again.');
 691                         else if (doalert)
 692                                 alert('Graph list name contains non-permitted character.\n\n'+
 693                                       'Only anlphanumerical characters (a-z, A-Z, 0-9), hyphen (-) and underscore (_) are permitted.\n'+
 694                                       'Please correct and try again.');
 695                         lname.focus();
 696                 }
 697         }
 698         return '';
 699 }
 700
 701 function GraphSave() {
 702         var lstName = GraphListCheckName(true);
 703         if (lstName.length == 0)
 704                 return;
 705         if (graphList.length > 0) {
 706                 // Save graph list to cookie
 707                 var str = '';
 708                 for (i = 0; i < graphList.length; i++) {
 709                         var g = graphList[i].indexOf(' ');
 710                         if (i > 0)
 711                                 str += '/';
 712                         str += graphList[i].substring(g+1);
 713                 }
 714
 715                 document.cookie = 'graphLst'+lstName+'='+str;
 716                 if (GraphListFromCookie(lstName).length == 0)
 717                         alert("Failed to save graph list '"+lstName+"' to cookie.");
 718                 else
 719                         alert("Successfully saved current graph list.");
 720         } else {
 721                 document.cookie = 'graphLst'+lstName+'=; expires='+new Date().toGMTString();
 722                 alert("Cleared saved graph list.");
 723         }
 724         GraphListRefresh();
 725 }
 726
 727 function GraphDrop() {
 728         var cname = document.getElementById('GraphList');
 729         if (cname && cname.selectedIndex >= 0) {
 730                 cname = cname.options[cname.selectedIndex].value;
 731                 document.cookie = 'graphLst'+cname+'=; expires='+new Date().toGMTString();
 732                 GraphListRefresh();
 733         } else
 734                 return;
 735 }
 736
 737 function GraphLoad() {
 738         var cname = document.getElementById('GraphList');
 739         if (cname && cname.selectedIndex >= 0)
 740                 cname = cname.options[cname.selectedIndex].value;
 741         else
 742                 return;
 743         // Load graph list from cookie
 744         var grLst = GraphListFromCookie(cname);
 745         var oldLength = graphList.length;
 746         for (i = 0; i < grLst.length; i++) {
 747                 var host        = '';
 748                 var plugin      = '';
 749                 var pinst       = '';
 750                 var type        = '';
 751                 var tinst       = '';
 752                 var timespan    = '';
 753                 var logarithmic = false;
 754                 var tinyLegend  = false;
 755                 var graph = grLst[i].split('&');
 756                 for (j = 0; j < graph.length; j++)
 757                         if (graph[j] == 'logarithmic=1')
 758                                 logarithmic = true;
 759                         else if (graph[j] == 'tinylegend=1')
 760                                 tinyLegend = true;
 761                         else if (graph[j].substring(0, 9) == 'timespan=')
 762                                 timespan = decodeURIComponent(graph[j].substring(9));
 763                 graph = decodeURIComponent(graph[0]).split('/');
 764                 host = graph[0];
 765                 if (graph.length > 1) {
 766                         var g = graph[1].indexOf('-');
 767                         if (g >= 0) {
 768                                 plugin = graph[1].substring(0, g);
 769                                 pinst  = graph[1].substring(g+1);
 770                         } else
 771                                 plugin = graph[1];
 772                 }
 773                 if (graph.length > 2) {
 774                         var g = graph[2].indexOf('-');
 775                         if (g >= 0) {
 776                                 type  = graph[2].substring(0, g);
 777                                 tinst = graph[2].substring(g+1);
 778                         } else
 779                                 type  = graph[2];
 780                 }
 781
 782                 if (host && plugin && type)
 783                         GraphDoAppend(host, plugin, pinst, type, tinst, timespan, tinyLegend, logarithmic);
 784         }
 785         if (grLst.length == 0)
 786                 alert("No list '"+cname+"' found for loading.");
 787         else if (grLst.length + oldLength != graphList.length)
 788                 alert("Could not load all graphs, probably damaged cookie.");
 789 }
 790