// JScript File by KappaDue Informatica 2009(www.k2net.it)
// Indice delle funzioni -------------------------------------------------------------
// 1) setRGB                  Variazione animata del valore RGB di un attributo
// 2) setHeight               Variazione animata dell'attributo height
// 3) pulseOn                 Attiva pulsazione
// 4) pulseOff                Disattiva pulsazione
// 5) barOn                   Attiva variazione ciclica larghezza
// 6) barOff                  Disattiva variazione ciclica larghezza
// 7) ricerca                 Ricerca testo in elemento lista
// 8) selectCursor            Selezione elemento lista con tasti cursore da eventi 
//                            generati da altri elementi
// 9) selectObject            Seleziona il contenuto testuale dell'elemtento 
//                            selezionato
// 10)colorObject             Cambia il colore di sfondo (backgroundColor) di un 
//                            elemento
// 11)d2h                     Conversione valore decimale in esadecimale
// 12)h2d                     Conversione valore esadecimale in decimale
// 13)html2rgb                Conversione stringa di tipo color in array RGB
// 14)rgb2html                Conversione array RGB in stringa di tipo color
// 15)setOpacity              Setta l'opacità dell'elemento
// -----------------------------------------------------------------------------------

// 3) pulseOn(id, msec, step, min)----------------------------------------------------
// 4) pulseOff(id)
// 
// Effetto grafico per fare pulsare un oggetto html;
// Viene fatta variare l'opacità dell'oggetto dal 100% al minimo parametrizzato.
// Parametri: id, msec, step, min
// id   Identificatore univoco dell'oggetto
// msec Millesimi di secodo che trascorrono tra una modifica e l'altra dell'opacità
// step punti di decremento dell'opacità (0 trasparente 100 opaco)
// min  valore minimo dell'opacità dell'oggetto (0 trasparente 100 opaco)
// Utilizzare la pulseOn per avviare l'effetto, e pulseOFF per interromperlo
// durante l'esecuzione dell'effetto vengono creati 2 attributi (opacity e tmropacity)

// 5) barOn(id, msec, step)-----------------------------------------------------------
// 6) barOff(id)
//
// Effetto grafico per fare variare la larghezza di un oggetto html;
// Viene fatta variare la larghezza dell'oggetto da 1 a 100%.
// Parametri: id, msec, step
// id   Identificatore univoco dell'oggetto
// msec Millesimi di secodo che trascorrono tra una modifica e l'altra della larghezza
// step punti di incremento della larghezza (da 1 a 100%)
// Utilizzare la barOn per avviare l'effetto, e barOFF per interromperlo
// durante l'esecuzione dell'effetto vengono creati 2 attributi (barvalue e tmrbar)

// 7) ricerca(e,t,id,gpb)-------------------------------------------------------------
// Permette di eseguire la ricerca del testo editato all'interno dell'elemento lista 
// indicato parametri:
// e    Se il metodo viene chiamato dall'evento KeyUp è possibile indicare il 
//      parametro event con il tasto premuto, parametro opzionale
// t    Indica il testo da ricercare
// id   Elemeto su cui effettuare la ricerca (elemento html select)
// gpb  Indica lo script da eseguire quando un'elemento è selezionato alla pressione
//      del tasto "invio" o dopo 2sec

// 8) selectCursor(e,page,id,gpb)-----------------------------------------------------
// Permette di cambiare l'elemento selezionato di una lista alla pressione dei tasti 
// KeyUp, KeyDown, PageUp, PageDown; quando l'elemento attivo non è la lista.
// Questa funzione deve essere inserita nell'evento KeyDown dell'elemento attivo che 
// deve controllare la lista (es. input); I parametri sono:
// e    Indicare il parametro event
// page Indicare il numero di elementi per pagina
// id   id dell'elemento lista da controllare
// gpb  Script da eseguire quando un elemento è selezionato dopo 2sec

// 9) selectObject(id) ---------------------------------------------------------------
// Seleziona il contenuto testuale dell'elemtento selezionato

// 10)colorObject(id, color) ---------------------------------------------------------
// Cambia il colore di sfondo dell'elemtento selezionato

// 1) setRGB(id, strAttribute, rgbStart, rgbEnd, durata) -----------------------------
// Variazione animata del valore RGB dell'attributo indicato, dal valore indicato nel 
// parametro rgbStart, al valore indicato nel parametro rgbEnd per la durata indicata
// nel parametro durata.
// Parametri:
// id           id dell'elemento lista da animare
// strAttribute nome attributo da modificare (es. backgroundColor)
// rgbStart     Colore iniziale dell'attributo (utilizzare la forma #XXXXXX)
// rgbEnd       Colore finale dell'attributo (utilizzare la forma #XXXXXX)
// durata       Indica la durata in millesimi di secondo dell'animazione
//              Nota: questo valore viene successivamente modificato in fotogrammi al
//              secondo (valore di default 25fps) è possibile modificare la variabile
//              ambiente "fpsAnimation" per rendere più fluida o meno fluida
//              l'animazione.

// 11)d2h(d) -------------------------------------------------------------------------
// Converte il valore decimale indicato nel parametro "d" in una stringa esadecimale

// 12)h2d(h) -------------------------------------------------------------------------
// Converte la stringa esadecimale indicata nel parametro "h" in un valore decimale

// 13)html2rgb(color) ----------------------------------------------------------------
// Converte il parametro "color" indicato nella forma #XXXXXX o rgb(xx, xx, xx)
// in un'array con 3 elementi RGB

// 14)rgb2html(rgb) ------------------------------------------------------------------
// Converte l'array a 3 elementi indicato nel parametro "rgb" in una stringa color
// nella forma #XXXXXX

// 2) setHeight(id, fromH, toH, durata) ----------------------------------------------
// Variazione animata dell'attributo "height" dell'elemento indicato dal valore
// indicato nel parametro "fromH" al valore indicato nel parametro "toH" per la durata
// indicata nel parametro "durata"
// Parametri:
// id           id dell'elemento lista da animare
// fromH        Altezza iniziale dell'elemento (utilizzare solo valore decimale)
// rgbEnd       Altezza finale dell'elemento (utilizzare solo valore decimale)
// durata       Indica la durata in millesimi di secondo dell'animazione
//              Nota: questo valore viene successivamente modificato in fotogrammi al
//              secondo (valore di default 25fps) è possibile modificare la variabile
//              ambiente "fpsAnimation" per rendere più fluida o meno fluida
//              l'animazione.

// setOpacity(id, fromO, toO, durata) -------------------------------------------------
// Variazione animata dell'opacità dell'elemento indicato dal valore indicato nel 
// parametro "fromO" al valore indicato nel parametro "toO" per la durata indicata nel 
// parametro "durata"
// Parametri:
// id           id dell'elemento lista da animare
// fromO        Opacità iniziale dell'elemento (utilizzare solo valore decimale da 0 a 100)
// toO          Opacità finale dell'elemento (utilizzare solo valore decimale da 0 a 100)
// durata       Indica la durata in millesimi di secondo dell'animazione
//              Nota: questo valore viene successivamente modificato in fotogrammi al
//              secondo (valore di default 25fps) è possibile modificare la variabile
//              ambiente "fpsAnimation" per rendere più fluida o meno fluida
//              l'animazione.

// -----------------------------------------------------------------------------------
// DEFINIZIONE VARIABILE GLOBALE PER LA GESTIONE DEI TIMER
var K2Interval = new Array();
var K2IntervalCount = 0;
// -----------------------------------------------------------------------------------

function newTimer() {
  for ( var cnt = 1; cnt <= K2IntervalCount; ++cnt) {
    if (K2Interval[cnt]==-1) {break}
  }
  if (cnt > K2IntervalCount) {
    K2IntervalCount = cnt;
  }
  return cnt;
}

function clearTimer(id) {
  window.clearInterval(K2Interval[id]);
  K2Interval[id] = -1;
}

function findTimer(id) {
  for (var cnt = 0; cnt < K2IntervalCount; ++cnt) {
    if (K2Interval[cnt] == id) {return cnt}
  }
  return -1
}

function pulseOn(id, msec, step, min){
  var o = document.getElementById(id);
  if (o!=null){
    if (o.attributes.getNamedItem('opacity')==null){
      var attr = document.createAttribute('opacity')
      attr.value = 100;
      o.attributes.setNamedItem(attr);
    }
    if (o.attributes.getNamedItem('tmropacity')==null){
      var attr = document.createAttribute('tmropacity');
      var idInterval = newTimer();
      attr.value = window.setInterval('setTmrOpacity(\'' + id + '\',' + step + ',' + min + ',' + idInterval + ')', msec);
      K2Interval[idInterval] = attr.value;
      o.attributes.setNamedItem(attr);
    }
  }
}

function pulseOff(id){
  var o = document.getElementById(id);
  if (o!=null){
    var attr = o.attributes.getNamedItem('tmropacity');
    if (attr != null) {
      var idTimer = findTimer(attr.value);
      if (idTimer != -1) { clearTimer(idTimer) } else { window.clearInterval(attr.value); }
      o.attributes.removeNamedItem('tmropacity');
      o.attributes.removeNamedItem('opacity');
      setIdOpacity(o, 0)
    }
  }
}

function setTmrOpacity(id,step,min,Timer){
  var o = document.getElementById(id);
  if (o != null) {
    var attr = o.attributes.getNamedItem('opacity');
    if (attr != null) {
      if (attr.value > min) attr.value -= step; else attr.value = 100;
      setIdOpacity(o, attr.value);
    } else {
      var attr = o.attributes.getNamedItem('tmropacity');
      if (attr != null) { pulseOff(id) } else { clearTimer(Timer) }
    }
  } else {
    clearTimer(Timer)
  }
}

function setIdOpacity(o, value){
  if (o.style.opacity!=null) o.style.opacity = value / 100;
  else o.style.setAttribute('filter','alpha(opacity='+value+')');
}

// Effetto grafico per fare variare la larghezza di un oggetto html;
// Viene fatta variare la larghezza dell'oggetto da 1 a 100%.
// Parametri: id, msec, step
// id   Identificatore univoco dell'oggetto
// msec Millesimi di secodo che trascorrono tra una modifica e l'altra della larghezza
// step punti di incremento della larghezza (da 1 a 100%)
// Utilizzare la BarOn per avviare l'effetto, e BarOFF per interromperlo
// durante l'esecuzione dell'effetto vengono creati 2 attributi (barvalue e tmrbar)
function barOn(id, msec, step){
  var o = document.getElementById(id);
  if (o!=null){
    if (o.attributes.getNamedItem('barvalue')==null){
      var attr = document.createAttribute('barvalue')
      attr.value = 1;
      o.attributes.setNamedItem(attr);
      o.style.backgroundColor = 'blue';
    }
    if (o.attributes.getNamedItem('tmrbar')==null){
      var attr = document.createAttribute('tmrbar');
      var idInterval = newTimer();
      attr.value = window.setInterval('setBar(\'' + id + '\',' + step + ',' + idInterval + ')', msec);
      K2Interval[idInterval] = attr.value;
      o.attributes.setNamedItem(attr);
    }
  }
}

function barOff(id){
  var o = document.getElementById(id);
  if (o!=null){
    var attr = o.attributes.getNamedItem('tmrbar');
    if (attr!=null) {
      var idTimer = findTimer(attr.value);
      if (idTimer != -1) { clearTimer(idTimer) } else { window.clearInterval(attr.value); }
      o.attributes.removeNamedItem('tmrbar');
      o.attributes.removeNamedItem('barvalue');
    }
  }
}
function setBar(id,step,Timer){
  var o = document.getElementById(id);
  if (o != null) {
    var attr = o.attributes.getNamedItem('barvalue');
    if (attr != null) {
      if (attr.value < 100) attr.value = parseInt(attr.value) + step; else attr.value = 1;
      o.style.width = attr.value + '%';
    } else {
      var attr = o.attributes.getNamedItem('tmrbar');
      if (attr != null) { barOff(id) } else { clearTimer(Timer) }
    }
  } else {
    clearTimer(Timer)
  }
}

// Permette di eseguire la ricerca del testo editato all'interno dell'elemento lista indicato
// Parametri
// e    Se il metodo viene chiamato dall'evento KeyUp è possibile indicare il parametro event con il tasto premuto
//      Parametro opzionale
// t    Indica il testo da ricercare
// id   Elemeto su cui effettuare la ricerca (elemento html select)
// gpb  Indica lo script da eseguire quando un'elemento è selezionato alla pressione del tasto "invio" o dopo 2sec
var tmrID;
function ricerca(e,t,id,gpb) {
  if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 33 || e.keyCode == 34) return;
  if (tmrID!=0) {window.clearTimeout(tmrID); tmrID = 0}
  var lp = document.getElementById(id);
  switch (e.keyCode) {
    case 13:
      if (lp.selectedIndex!=1 && gpb!=null) evalScript(gpb);  // window.execScript(gpb);
      break
    default:
      if (t!='') {
        var cnt = 0;
        var start = 0;
        if (lp.selectedIndex>0) cnt = start = lp.selectedIndex;
        do {
          if (lp[cnt].text.toLowerCase().search(t.toLowerCase())==0) {
            lp.selectedIndex = cnt;
            if (gpb!=null) tmrID=window.setTimeout(gpb,2000);
            return
          };
          ++cnt;
          if (cnt==lp.length) cnt = 0;
        } while (cnt!=start);
        lp.selectedIndex = -1;
      } else lp.selectedIndex = -1;
  }
}

// Permette di cambiare l'elemento selezionato di una lista alla pressione dei tasti KeyUp, KeyDown, PageUp, PageDown
// quando l'elemento attivo non è la lista.
// Questa funzione deve essere inserita nell'evento KeyDown dell'elemento attivo che deve controllare la lista (es. input)
// I parametri sono:
// e    Indicare il parametro event
// page Indicare il numero di elementi per pagina
// id   id dell'elemento lista da controllare
// gpb  Script da eseguire quando un elemento è selezionato dopo 2sec
function selectCursor(e,page,id,gpb) {
  if (tmrID!=0) {window.clearTimeout(tmrID); tmrID = 0;}
  var lp = document.getElementById(id);
  switch (e.keyCode) {
    case 38:  //KeyUp
      if (lp.selectedIndex<1) lp.selectedIndex = lp.length -1; else lp.selectedIndex -= 1;
      break
    case 40:  //KeyDown
      if (lp.selectedIndex==lp.length || lp.selectedIndex==-1) lp.selectedIndex = 0; else lp.selectedIndex += 1;
      break
    case 33:  //PageUp
      if ((lp.selectedIndex-page)<0) lp.selectedIndex = lp.length -1; else lp.selectedIndex -= page;
      break
    case 34:  //PageDown
      if ((lp.selectedIndex+page)>(lp.length-1)) lp.selectedIndex = 0; else lp.selectedIndex += page;
      break
    default:
      return
  }
  tmrID = window.setTimeout(gpb,2000);
}

// Seleziona il contenuto testuale dell'elemtento selezionato
  function selectObject(id){
    var o = document.getElementById(id);
    if (o!=null) o.select()
  }
  
// Cambia il colore di sfondo dell'elemtento selezionato
  function colorObject(id, color){
    var o = document.getElementById(id);
    if (o!=null) o.style.backgroundColor = color;
  }

// Esecuzione di codice generico runtime, necessario per standardizzare l'uso di execScript e eval.call
  function evalScript(strCode){
    window.setTimeout(strCode, 10);
//    try{window.execScript(strCode)}
//    catch(e){eval.call(window, strCode)}
  }

//------------------------------------------------------------------------------------
// Funzioni per la variazione animata del valore RGB dell'attributo indicato

  var fpsAnimation = 40; //INDICA 40ms PARI A 25FOTOGRAMMI AL SECONDO

// SetRGB(id, strAttribute, rgbStart, rgbEnd, durata) --------------------------------
// Variazione animata del valore RGB dell'attributo indicato, dal valore indicato nel 
// parametro rgbStart, al valore indicato nel parametro rgbEnd per la durata indicata
// nel parametro durata.
// Parametri:
// id           id dell'elemento lista da animare
// strAttribute nome attributo da modificare (es. backgroundColor)
// rgbStart     Colore iniziale dell'attributo (utilizzare la forma #XXXXXX)
// rgbEnd       Colore finale dell'attributo (utilizzare la forma #XXXXXX)
// durata       Indica la durata in millesimi di secondo dell'animazione
//              Nota: questo valore viene successivamente modificato in fotogrammi al
//              secondo (valore di default 25fps) è possibile modificare la variabile
//              ambiente "fpsAnimation" per rendere più fluida o meno fluida
//              l'animazione.
  function setRGB(id,strAttribute, rgbStart,rgbEnd,durata){
    var o = document.getElementById(id);
    if (o != null){
      if (o.attributes.getNamedItem('rgbtmr')!=null){
        var attrTmr = o.attributes.getNamedItem('rgbtmr');
        var idTimer = findTimer(attrTmr.value);
        if (idTimer == -1) { window.clearInterval(attrTmr.value) } else { clearTimer(idTimer) }
      }else{
        var attrTmr = document.createAttribute('rgbtmr');
        attrTmr.value = "-1";
        o.attributes.setNamedItem(attrTmr);
      }
      if (o.attributes.getNamedItem('rgbAttribute')==null){
        var attrType = document.createAttribute('rgbAttribute');
        attrType.value = strAttribute;
        o.attributes.setNamedItem(attrType);
      }else{
        var attrType = o.attributes.getNamedItem('rgbAttribute');
        attrType.value = strAttribute;
      }
      var rgbS = html2rgb(rgbStart);
      var rgbE = html2rgb(rgbEnd);
      var step = Math.round(durata / fpsAnimation);
      var rgbI = [((rgbE[0]-rgbS[0])/step), ((rgbE[1]-rgbS[1])/step), ((rgbE[2]-rgbS[2])/step), step];
      if (o.attributes.getNamedItem('rgbvalue')==null){
        var attrRGB = document.createAttribute('rgbvalue');
        attrRGB.value = "0";
        o.attributes.setNamedItem(attrRGB);
      }else{
        var attrRGB = o.attributes.getNamedItem('rgbvalue');
      }
      document.getElementById(id).style.setAttribute(attrType.value, rgbStart);
      attrRGB.value = rgbI;
      var idInterval = newTimer();
      attrTmr.value = window.setInterval('rgbTimer(\'' + id + '\',\'' + rgbEnd + '\','+idInterval+')', fpsAnimation);
      K2Interval[idInterval] = attrTmr.value;
    }
  }

  function rgbTimer(id,rgbEnd,Timer){
    var o = document.getElementById(id);
    if ( o != null){
      var attrRGB = o.attributes.getNamedItem('rgbvalue');
      var attrType = o.attributes.getNamedItem('rgbAttribute');
      var rgbI = attrRGB.value.split(',');
      if (rgbI == null | rgbI[3]==1){
        document.getElementById(id).style.setAttribute(attrType.value, rgbEnd);
        var attrTmr = o.attributes.getNamedItem('rgbtmr');
        window.clearInterval(attrTmr.value);
        K2Interval[Timer] = -1;
        o.attributes.removeNamedItem('rgbAttribute');
        o.attributes.removeNamedItem('rgbvalue');
        o.attributes.removeNamedItem('rgbtmr');
      } else{
        rgbI[3] -= 1;
        var rgb = html2rgb(document.getElementById(id).style.getAttribute(attrType.value));
        rgb[0] += parseFloat(rgbI[0]);
        rgb[1] += parseFloat(rgbI[1]);
        rgb[2] += parseFloat(rgbI[2]);
        document.getElementById(id).style.setAttribute(attrType.value, rgb2html(rgb));
        attrRGB.value = rgbI;
      }
    } else {
      clearTimer(Timer)
    }
  }
  
// d2h(d) ----------------------------------------------------------------------------
// Converte il valore decimale indicato nel parametro "d" in una stringa esadecimale
  function d2h(d) {
    var strD = d.toString(16);
    if (strD.length != 2) {
      strD = '00' + strD;
      strD = strD.substr(strD.length-2,2);
    }
    return strD;
  }
  
// h2d(h) ----------------------------------------------------------------------------
// Converte la stringa esadecimale indicata nel parametro "h" in un valore decimale
  function h2d(h) {return parseInt(h,16);} 
  
// HTML2RGB(color) -------------------------------------------------------------------
// Converte il parametro "color" indicato nella forma #XXXXXX o rgb(xx, xx, xx)
// in un'array con 3 elementi RGB
  function html2rgb(color){
    var res = '';
    if (color.indexOf('#')==0) {
      res = [h2d(color.substr(1,2)), h2d(color.substr(3,2)), h2d(color.substr(5,2))];
    } else if (color.indexOf('rgb')==0){
        var rgb = color.slice(4,-1).split(',');
        rgb[0] = parseFloat(rgb[0]);
        rgb[1] = parseFloat(rgb[1]);
        rgb[2] = parseFloat(rgb[2]);
        res = rgb;
    };
    return res;
  }

// RGB2HTML(rgb) ---------------------------------------------------------------------
// Converte l'array a 3 elementi indicato nel parametro "rgb" in una stringa color
// nella forma #XXXXXX
  function rgb2html(rgb){return '#'+d2h(parseInt(rgb[0]))+d2h(parseInt(rgb[1]))+d2h(parseInt(rgb[2]));}

// setHeight(id, fromH, toH, durata) -------------------------------------------------
// Variazione animata dell'attributo "height" dell'elemento indicato dal valore
// indicato nel parametro "fromH" al valore indicato nel parametro "toH" per la durata
// indicata nel parametro "durata"
// Parametri:
// id           id dell'elemento lista da animare
// fromH        Altezza iniziale dell'elemento (utilizzare solo valore decimale)
// rgbEnd       Altezza finale dell'elemento (utilizzare solo valore decimale)
// durata       Indica la durata in millesimi di secondo dell'animazione
//              Nota: questo valore viene successivamente modificato in fotogrammi al
//              secondo (valore di default 25fps) è possibile modificare la variabile
//              ambiente "fpsAnimation" per rendere più fluida o meno fluida
//              l'animazione.

  function setHeight(id, fromH, toH, durata){
    var o = document.getElementById(id);
    if (o != null){
      if (o.attributes.getNamedItem('htmr')!=null){
        var attrTmr = o.attributes.getNamedItem('htmr');
        var idTimer = findTimer(attrTmr.value);
        if (idTimer == -1) { window.clearInterval(attrTmr.value) } else { clearTimer(idTimer) }
      }else{
        var attrTmr = document.createAttribute('htmr');
        attrTmr.value = "-1";
        o.attributes.setNamedItem(attrTmr);
      }
      var step = Math.round(durata / fpsAnimation); 
      var hINT = [fromH, step];
      if (o.attributes.getNamedItem('hvalue')==null){
        var attrH = document.createAttribute('hvalue');
        attrH.value = hINT;
        o.attributes.setNamedItem(attrH);
      }else{
        var attrH = o.attributes.getNamedItem('hvalue');
        attrH.value = hINT;
      }
      o.style.height = fromH + 'px';
      var idInterval = newTimer();
      attrTmr.value = window.setInterval('hTimer(\'' + id + '\',' + toH + ',' + ((toH - fromH) / step) + ',' + idInterval + ')', fpsAnimation);
      K2Interval[idInterval] = attrTmr.value;
    }
  }
  
  function hTimer(id, toH, hStep, Timer){
    var o = document.getElementById(id);
    if (o != null) {
      var attrH = o.attributes.getNamedItem('hvalue');
      var hINT = attrH.value.split(',');
      if (hINT[1] == 1) {
        o.style.height = toH + 'px';
        var attrTmr = o.attributes.getNamedItem('htmr');
        var idTimer = findTimer(attrTmr.value);
        if (idTimer == -1) { window.clearInterval(attrTmr.value) } else { clearTimer(idTimer) }
        o.attributes.removeNamedItem('hvalue');
        o.attributes.removeNamedItem('htmr');
      } else {
        hINT[1] -= 1;
        hINT[0] = parseInt(hINT[0]) + hStep;
        o.style.height = hINT[0] + 'px';
        attrH.value = hINT;
      }
    } else {
      clearTimer(Timer);
    }
  }

// setOpacity(id, fromO, toO, durata) -------------------------------------------------
// Variazione animata dell'opacità dell'elemento indicato dal valore indicato nel 
// parametro "fromO" al valore indicato nel parametro "toO" per la durata indicata nel 
// parametro "durata"
// Parametri:
// id           id dell'elemento lista da animare
// fromO        Opacità iniziale dell'elemento (utilizzare solo valore decimale da 0 a 100)
// toO          Opacità finale dell'elemento (utilizzare solo valore decimale da 0 a 100)
// durata       Indica la durata in millesimi di secondo dell'animazione
//              Nota: questo valore viene successivamente modificato in fotogrammi al
//              secondo (valore di default 25fps) è possibile modificare la variabile
//              ambiente "fpsAnimation" per rendere più fluida o meno fluida
//              l'animazione.

  function setOpacity(id, fromO, toO, durata){
    var o = document.getElementById(id);
    if (o != null){
      if (o.attributes.getNamedItem('optTmr')!=null){
        var attrTmr = o.attributes.getNamedItem('optTmr');
        var idTimer = findTimer(attrTmr.value);
        if (idTimer == -1) { window.clearInterval(attrTmr.value) } else { clearTimer(idTimer) }
      }else{
        var attrTmr = document.createAttribute('optTmr');
        attrTmr.value = "-1";
        o.attributes.setNamedItem(attrTmr);
      }
      var step = Math.round(durata / fpsAnimation); 
      var hINT = [fromO, step];
      if (o.attributes.getNamedItem('optValue')==null){
        var optAttr = document.createAttribute('optValue');
        optAttr.value = hINT;
        o.attributes.setNamedItem(optAttr);
      }else{
        var optAttr = o.attributes.getNamedItem('optValue');
        optAttr.value = hINT;
      }
      setIdOpacity(o, fromO);
      var idInterval = newTimer();
      attrTmr.value = window.setInterval('optTimer(\'' + id + '\',' + toO + ',' + ((toO - fromO) / step) + ',' + idInterval + ')', fpsAnimation);
      K2Interval[idInterval] = attrTmr.value;
    }
  }
  
  function optTimer(id, toO, oStep, Timer){
    var o = document.getElementById(id);
    if ( o != null){
      var optAttr = o.attributes.getNamedItem('optValue');
      var hINT = optAttr.value.split(',');
      if (hINT[1]==1){
        setIdOpacity(o, toO);
        var attrTmr = o.attributes.getNamedItem('optTmr');
        var idTimer = findTimer(attrTmr.value);
        if (idTimer == -1) { window.clearInterval(attrTmr.value) } else { clearTimer(idTimer) }
        o.attributes.removeNamedItem('optValue');
        o.attributes.removeNamedItem('optTmr');
      } else{
        hINT[1] -= 1;
        hINT[0] = parseFloat(hINT[0]) + oStep;
        setIdOpacity(o, hINT[0]);
        optAttr.value = hINT;
      }
    } else {
      clearTimer(Timer);
    }
  }