Skip to topic | Skip to bottom
Home

Tesi
Tesi.WebInterfaceAPIr1.26 - 13 Feb 2007 - 12:54 - RiccardoSpisatopic end

Start of topic | Skip to actions

Web Interface API (TESI CONCLUSA - DISCUSSA IL 17/10/2006)

Una tesi per la generazione di widget in Javascript da usare in un modello Ajax per l'inserimento in form di valori numerici vincolati.

Descrizione

Realizzazione di un'API generica di widget per l'inserimento di valori numerici vincolati. Il tutto Ŕ basato sul pattern Model/View/Controller. Ogni widget ammette l'inserimento di valori numerici compresi tra x1 e x2 (inclusi), con granularitÓ Δx. In alternativa ammette una lista ordinata di stringhe il cui elenco Ŕ fornito in anticipo. Ogni widget ammette un'interfaccia unica di pochi membri. Ogni widget ha un men¨ associato attraverso il quale Ŕ possibile eseguire semplici operazioni e controlli. Alcuni widget ammettono un foglio di stile per personalizzare la presentazione. I widget vengono specificati attraverso un documento XML che riprende ed estende il controllo range di XForms per gestire i nuovi widget.

Dettaglio

Il widget ammette come valori leciti x1, x1+Δx, x1 +2Δx, ..., x1+nΔx, x2. Per semplicitÓ si assuma che x2 = x1+(n+1)Δx (cioŔ sia l'ultimo elemento della serie composta da multipli di Δx sommati a x1). Si ha anche che n = ((x2-x1)/Δx)+1.
Ogni widget ammette un numero ristretto di operazioni:
  • costruttore(x1, x2, Δx, enabled, altri): crea il widget avente come limiti x1, x2 e Δx. Facoltativamente possono essere specificati altri parametri (come l'URL di un'immagine, o valori di stile) per la personalizzazione del widget stesso.
  • set(x): setta il valore del widget a x (controllando che sia uno dei valori leciti)
  • get(): restituisce l'attuale valore del widget
  • show(): visualizza il widget sul form in cui compare
  • hide(): nasconde il widget
  • disable(): rende il widget non interattivo, ovvero solo leggibile e non modificabile
  • enable(): rende il widget interattivo, ovvero modificabile dall'utente.

Widget da realizzare

Box di testo


Radio button


Pop-up menu


Segmenti


Stepper


Slider


Level



Knob


Dial centrale



Dial laterale


Grafico

Touchpad

-- FabioVitali - 04 Mar 2006

  • Set 1 = 1
  • Set 2 = 2
  • Set Dx = Δx
  • Set inciso =
  • Set end =

PROGETTO

Il progetto consiste nella realizzazione e gestione di widget grafici estendendo il modello di XForms.

L'applicazione e' testabile a questo link (solo su Firefox 1.5+ e Internet Explorer 6+)

La dissertazione di tesi e' scaricabile a questo link

CODICE SORGENTE

L' utente A scrive un documento xml denominato XForms.xml e decide il nome del documento che dovra' scrivere l' utente B (ad es. data.xml).

L' utente B scrive un documento xml denominato, come deciso da A, data.xml.

L' utente C, che ha realizzato il progetto, ha creato un file widgets.xslt che formatta il documento dell'utente A e recupera informazioni dal documento scritto da B e restituisce in output un documento in formato XHTML 1.0.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="widgets.xslt"?>
<!-- 
TAG -> //range
   text():      "empty"      
   @class:      identifica il tipo di widget
   @id:         id univoco del widget, permette di avere piu' widget della stessa classe (utilizzare un id incrementale)
   @ref:         refirimento al modello
   @start:      valore minimo del widget
   @end:         valore massimo del widget
   @step:      step tra start e end   

TAG -> //range/option
   text():         descrizione della opzione che comparira' sulla pagina web 
   @id:         id dell' opzione

TAG -> //range/label
   text():         descrizione del widget che comparira' nel documento
 -->

<root>
   <!--Informazioni generali sull'autore-->
   <autoreXForms>
      <nome>Riccardo</nome>
      <cognome>Spisa</cognome>
   </autoreXForms>
   
   <info>
      <descrizione>Progetto di tesi per la realizzazione di librerie Javascript atte alla visualizzazione e gestione di widget grafici</descrizione>
      <release>1.0</release>
      <link>http://tesi.fabio.web.cs.unibo.it/Tesi/WebInterfaceAPI</link>
      <style>style/style.css</style>
      <!-- Titolo del form della pagina web da creare -->
      <titlePageWeb>SIMULAZIONE CABINA PILOTAGGIO AEREO</titlePageWeb>
   </info>

   <!-- da informazioni sui file xml da caricaricare, l'utente che crea questo documento puo' variare il file di riferimento alle immagini e stili-->
   <groups>
      <groupRef href="data.xml"/>
   </groups>
   
   <!-- 
   - Regole di struttura
      - gli id devono essere assegnati in ordine crescente sia in model che in XForms e devono combaciare.
      - gli elementi in model devono essere lo stesso numero di quelli in XForms
      - il valore corrente per ogni widget deve essere compreso tra //XForms/range/@start e //XForms/range/@end
      - se il valore corrente e' un'opzione (ad es. per un menu) deve essere un valore del tag //XForms/range/option per quell'id
      - il nome del tag per ogni widget deve combaciare nel tag range con stesso id e deve essere uguale a //XForms/range/@ref
   -->   
      
   <head>
      <model>
         <instance>
            <datarange>
               <null id="0"/>
               <nome id="1">Roger</nome>
               <msgalert id="2">Nessun allarme attivo</msgalert>
               <flapsx id="3">135</flapsx>
               <flapdx id="4">90</flapdx>
               <information id="5">Radio on</information>
               <fuel id="6">150</fuel>
               <language id="7">Spanish</language>
               <break id="8">100</break>
               <positionLight id="9">40</positionLight>
               <ligth id="10">75</ligth>
               <powermotors id="11">Livello 2/3</powermotors>
               <freeline id="12">5</freeline>
               <rotation id="13">135</rotation>
               <automatic id="14">Pilota automatico disattivo</automatic>
               <type id="15">Tipo 2</type>
            </datarange>
         </instance>
         <submission id="invioDati" method="post" action="sendData.cgi"/>
      </model>
   </head>
   <!--
   VINCOLI:
   Box:
      - valore minimo 0 e step a 1

   Radio:
      - solo 2 opzioni possibili con step a 1

   Level:
      - il valore corrente deve essere maggiore di quello minimo
      - il valore minimo deve essere minore di quello massimo
      - il valore massimo e minimo devono rispettare lo step
      - il valore finale(.vmax) non deve essere maggiore della differenza tra l'immagine barra e quella in movimento (le dimensioni sono in px)
      PS. con l'xml di default le misure sono <range class="clevel" id="..." ref="..." start="0" end="420" step="5"> che combaciano con le immagini perfettamente

Popupmenu
   - step a 1 con valore minimo minore di quello massimo
   - il valore massimo non deve superare il numero di opzioni

Segment
   - step a 1 con valore minimo minore di quello massimo
   - valore minimo 1
   - il valore massimo non deve superare il numero di opzioni

Stepper
   - step a 1 con valore minimo minore di quello massimo

Slider
   - il valore corrente deve essere maggiore di quello minimo
   - il valore minimo deve essere minore di quello massimo
   - il valore massimo e minimo devono rispettare lo step   
   PS. con l'xml di default le misure sono <range class="cslider" id="..." ref="..." start="0" end="300" step="5"> che combaciano con le imamgini perfettamente

Knob
   - il valore corrente deve essere maggiore di quello minimo
   - il valore minimo deve essere minore di quello massimo
   - il valore minimo e massimo devono essere compresi tra 0 e 270
   - nella gestione di differenti immagini bisogna calcolare il nuovo centro di rotazione

Dial
   - il valore corrente deve essere maggiore di quello minimo
   - il valore minimo deve essere minore di quello massimo
   - il valore minimo e massimo devono essere compresi tra 0 e 270
   - nella gestione di differenti immagini bisogna calcolare il nuovo centro di rotazione

NB
   - solo i widget popupmenu, radio e segment prevedono il tag option
   -->

   <!-- I widget verranno caricati sul documento in base all' id -->
   <XForms>
      <range class="null" id="0">
         <label>empty</label>
      </range>
      <range class="cbox" id="1" ref="nome" start="0" end="15" step="1">
         <label>Messaggio a torre di controllo</label>
      </range>
      <range class="cbox" id="2" ref="msgalert" start="0" end="30" step="1">
         <label>Messaggio di allarme</label>
      </range>
      <range class="cknob" id="3" ref="flapsx" start="0" end="270" step="1">
         <label>Flap sinistro</label>
      </range>
      <range class="cknob" id="4" ref="flapdx" start="30" end="230" step="5">
         <label>Flap destro</label>
      </range>
      <range class="cradio" id="5" ref="information" start="1" end="2" step="1">
         <label>Radio aereo acccesa/spenta</label>
         <option id="1">Radio off</option>
         <option id="2">Radio on</option>
      </range>
      <range class="cdial" id="6" ref="fuel" start="0" end="270" step="15">
         <label>Livello carburante</label>
      </range>
      <range class="cpopupmenu" id="7" ref="language" start="1" end="3" step="1">
         <label>Linguaggio plancia comandi</label>
         <option id="1">English</option>
         <option id="2">Italian</option>
         <option id="3">Spanish</option>
      </range>
      <range class="cslider" id="8" ref="break" start="60" end="250" step="5">
         <label>Freni aereo</label>
      </range>
      <range class="clevel" id="9" ref="positionLight" start="0" end="420" step="5">
         <label>Livello fari a terra</label>
      </range>
      <range class="clevel" id="10" ref="light" start="20" end="300" step="5">
         <label>Livello fari in volo</label>
      </range>
      <range class="csegment" id="11" ref="powermotors" start="0" end="80" step="5">
         <label>Livello potenza motori</label>
         <option id="1">Livello 1/3</option>
         <option id="2">Livello 2/3</option>
         <option id="3">Livello 3/3</option>
      </range>
      <range class="cstepper" id="12" ref="freeline" start="3" end="8" step="1">
         <label>Numero linee disponibili</label>
      </range>
      <range class="cdial" id="13" ref="rotation" start="45" end="225" step="5">
         <label>Rotazione laterale aereo</label>
      </range>
      <range class="cradio" id="14" ref="automatic" start="1" end="2" step="1">
         <label>Pilota automatico</label>
         <option id="1">Pilota automatico disattivo</option>
         <option id="2">Pilota automatico attivo</option>
      </range>
      <range class="cpopupmenu" id="15" ref="type" start="1" end="5" step="1">
         <label>Tipologia volo</label>
         <option id="1">Tipo 1</option>
         <option id="2">Tipo 2</option>
         <option id="3">Tipo 3</option>
         <option id="4">Tipo 4</option>
         <option id="5">Tipo 5</option>
      </range>
   </XForms>
</root>

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
Questo file viene creato dall'utente che si propone di decidere come definire i widget: immagini, dimensioni, stili, ecc....
Per i dettagli consultare i commenti per ogni widget.   
 -->

<doc>
   <autoreXML>
      <nome>Mauro</nome>
      <cognome>Rossi</cognome>
   </autoreXML>
   
   <!-- BOX 
      L'utente XML non puo' effettuare nessuna modifica.
   -->   
   <box class="cbox"/>
   
   <!-- RADIO
      L'utente XML non puo' effettuare nessuna modifica.
   -->
   <radio class="cradio">      
   </radio>
   
   <!-- LEVEL
      Personalizzazioni possibili:
         - link a immagini differenti con relativi attributi per le dimensioni
      Vincoli:   
         - le immagini devono essere 3
         - immagine 1 e 2 delle stesse dimensioni
      NOTE:
         - le dimensioni delle immagini devono essere corrette, in pixel e devono essere espresse con un intero pari   
   -->
   <level class="clevel">
      <image dimx="80" dimy="30">images/level/hard-set.gif</image>
      <!-- Cursore senza il mouse sopra-->
      <image dimx="80" dimy="30">images/level/horizontal-motion.gif</image>
      <!--Cursore con il mouse sopra -->
      <image dimx="500" dimy="30">images/level/horizontal-bar.gif</image>
      <!-- Barra di spostamento -->
   </level>
   
<!-- POPUPMENU
      Personalizzazioni possibili:
         - link a immagini differenti con relativi attributi per le dimensioni
      Vincoli:   
         - le immagini devono essere 5
         - immagine 1, 2, 3 e 4 delle stesse dimensioni
      NOTE:   
         - le dimensioni delle immagini devono essere corrette, in pixel e devono essere espresse con un intero pari   
-->
   <popupmenu class="cpopupmenu">
      <image dimx="16" dimy="16">images/popupmenu/arrow-up-normal.gif</image>
      <!-- Freccia spost. su onmouseout -->
      <image dimx="16" dimy="16">images/popupmenu/arrow-up-press.gif</image>
      <!-- Freccia spost. su onmouseover-->
      <image dimx="16" dimy="16">images/popupmenu/arrow-down-normal.gif</image>
      <!-- Freccia spost.giu' onmouseout -->
      <image dimx="16" dimy="16">images/popupmenu/arrow-down-press.gif</image>
      <!-- Freccia spost. giu' onmouseover -->
      <image dimx="150" dimy="30">images/popupmenu/oncontextmenu.gif</image>
      <!-- Oggetto su cui oncontextmenu apre il menu -->
   </popupmenu>
   
   <!-- SEGMENTI
      Personalizzazioni possibili:
         - attributi di stile
      Vincoli:   
         - per una corretta visualizzazione il testo nei tag option non deve superare i 12 caratteri
         - puo' essere presente un solo tag style      
   -->
   <segment class="csegment">
      <style backgroundTBL="url(../images/background.jpg) repeat" backgroundTD="#FFFFCC" borderColorTBL="#3300CC" borderStyleTBL="solid" borderWidthTBL="2px" colorTD="black" cursorTBL="pointer" fontFamilyTD="Arial" fontSizeTD="15px" textAlignTD="center"/>
   </segment>
   
   <!-- STEPPER
      Personalizzazioni possibili:
         - link a immagini differenti con relativi attributi per le dimensioni
         - attributi di stile
      Vincoli:   
         - le immagini devono essere 4 e tutte delle stesse dimensioni
      NOTE:
         - le dimensioni delle immagini devono essere corrette, in pixel e devono essere espresse con un intero pari   
         - gli attributi sono obbligatori, backgroundTBL deve essere null
   -->
   <stepper class="cstepper">
      <image dimx="30" dimy="30">images/stepper/arrow-up-normal.gif</image>
      <!-- Freccia spost. su onmouseout -->
      <image dimx="30" dimy="30">images/stepper/arrow-up-press.gif</image>
      <!-- Freccia spost. su onmouseover-->
      <image dimx="30" dimy="30">images/stepper/arrow-down-normal.gif</image>
      <!-- Freccia spost.giu' onmouseout -->
      <image dimx="30" dimy="30">images/stepper/arrow-down-press.gif</image>
      <!-- Freccia spost. giu' onmouseover -->
      <style backgroundTBL="null" backgroundTD="#FFCC00" borderColorTBL="#3300CC" borderStyleTBL="solid" borderWidthTBL="3px" colorTD="black" cursorTBL="pointer" fontFamilyTD="Arial" fontSizeTD="18px" textAlignTD="center"/>
   </stepper>
   
   <!-- SLIDER
      Personalizzazioni possibili:
         - link a immagini differenti con relativi attributi per le dimensioni   
      Vincoli:   
         - le immagini devono essere 4
         - immagine 3 e 4 delle stesse dimensioni
      NOTE:
         - le immagini si posizionano in base alla prima 
         - le dimensioni delle immagini devono essere corrette, in pixel e devono essere espresse con un intero pari   
   -->
   <slider class="cslider">
      <image dimx="40" dimy="40">images/slider/arrow.gif</image>
      <!-- Cursore in movimento -->
      <image dimx="11" dimy="300">images/slider/barra.gif</image>
      <!-- Barra su cui il cursore si sposta -->
      <image dimx="15" dimy="6">images/slider/stepUp.gif</image>
      <!-- Segue il cursore -->
      <image dimx="15" dimy="6">images/slider/stepDown.gif</image>
      <!-- Segue il cursore -->
   </slider>
   
   <!-- KNOB
      Personalizzazioni possibili:
         - link a immagini differenti con relativi attributi per le dimensioni
         - centro di rotazione e raggio
      Vincoli:   
         - le immagini devono essere 3
         - immagine 2 e 3 delle stesse dimensioni
      NOTE:
         - il centro di rotazione in y deve trovarsi a 140px dalla coordinata y del vertice in alto a sx dell'immagine
         - calcolare le dimensioni delle immagini riferendosi al centro di rotazione e al raggio
         - in base alla immagine immessa occorre fornire il raggio che stabilisce la distanza del cursore in movimento dal centro del knob
         - le immagini si posizionano in base alla prima 
         - le dimensioni delle immagini devono essere corrette, in pixel e devono essere espresse con un intero pari   
   -->
   <knob class="cknob">
      <image dimx="280" dimy="330">images/knob/knob.gif</image>
      <!-- Sfondo del knob -->
      <image dimx="18" dimy="18">images/knob/buttonUp.gif</image>
      <!-- Cursore in movimento onmouseout -->
      <image dimx="18" dimy="18">images/knob/buttonDown.gif</image>
      <!-- Cursore in movimento onmouseover -->
      <coord x0="280" y0="210" radius="60"/>
      <!-- centro di rotazione, raggio-->
   </knob>
   
   <!-- DIALCENTRALE
      Personalizzazioni possibili:
         - link a immagini differenti con relativi attributi per le dimensioni
         - centro di rotazione e raggio
      Vincoli:   
         - le immagini devono essere 8 (anche se alcune non vengono utilizzate)
         - immagine 2, 4 e 6 delle stesse dimensioni e le immagini devono essere quadrate
         - immagine 3, 5 e 7 delle stesse dimensioni e le immagini devono essere quadrate
      NOTE:
         - si consiglia di mantenere inalterate le dimensioni per le immagini dalla 2 alla 7
         - in base alla immagine immessa occorre fornire il raggio che stabilisce la lunghezza della lancetta e la distanza degli indicatori
         - le immagini si posizionano in base alla prima 
         - le dimensioni delle immagini devono essere corrette, in pixel e devono essere espresse con un intero pari   
   -->
   <dial class="cdial">      
      <image dimx="250" dimy="250">images/dial/background.gif</image>
      <image dimx="2" dimy="2">images/dial/pointBlue2x2.gif</image>
      <image dimx="4" dimy="4">images/dial/pointBlue4x4.gif</image>
      <image dimx="2" dimy="2">images/dial/pointRed2x2.gif</image>
      <image dimx="4" dimy="4">images/dial/pointRed4x4.gif</image>
      <image dimx="2" dimy="2">images/dial/pointBlack2x2.gif</image>
      <image dimx="4" dimy="4">images/dial/pointBlack4x4.gif</image>
      <image dimx="10" dimy="10">images/dial/centre.gif</image>
      <coord x0="280" y0="270" radius="90"/>
      <!-- Essendo XSLT dichiarativo non riesco a iterare su un counter, non potendo adottare un metodo procedurale ripeto tante volte coi tag l'immagine quante volte va utilizzata mettendo l'id dell'immegine nell'ordine in cui compare -->
      <count id="4">
         <num count="1"/>
         <num count="2"/>
         <num count="3"/>
         ...
         ...
         ...
         <num count="75"/>
         <num count="76"/>
         <num count="77"/>
      </count>
      <count id="6">
         <num count="1"/>
         <num count="2"/>
         <num count="3"/>
         ...
         ...
         ...
         <num count="325"/>
         <num count="326"/>
         <num count="327"/>
      </count>
   </dial>
</doc>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="xml" encoding="iso-8859-1" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>   
   <xsl:template match="XXX_TAG_FITTIZIO_XXX">
      <h1>Questo browser non supporta XSLT 1.0</h1>
      <p>Documento non valido</p>
   </xsl:template>   
   
   <!-- Template di avvio -->
   <xsl:template match="/">
       <xsl:apply-templates select="root"/>   
    </xsl:template>
   
   <!-- Creo la struttura della pagina -->
   <xsl:template match="root">
   
      <!-- Creo la variabile da passare a javascript nel corpo del body-->
      <xsl:variable name="virg">,</xsl:variable>
      <xsl:variable name="listID">
            <xsl:for-each select="XForms/range">
               <xsl:value-of select="@id"></xsl:value-of>
               <xsl:if test="position() != last()">&#044;</xsl:if>                              
            </xsl:for-each>
      </xsl:variable>
      
      <!-- Dimensione array di oggetti widget -->
      <xsl:variable name="numWid">
         <xsl:value-of select="count(XForms/range)"/>      
      </xsl:variable>      
   
      <html>
         <head>
            <title>Web Interface API</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
            <link rel="stylesheet" type="text/css" href="{info/style/text()}"/>
            <script type="text/javascript">
               
               <!-- Recupero i dati che mi serviranno nelle mie applicazioni javascript memorizzandoli in oggetti-->               
               <xsl:text>var arrayWid = new Array</xsl:text>(<xsl:value-of select="$numWid"/>)<xsl:text>;</xsl:text>
               <xsl:for-each select="XForms/range">
                  <xsl:if test="@id != '0' ">
                     arrayWid[<xsl:value-of select="@id"/>] = new Object();
                     arrayWid[<xsl:value-of select="@id"/>].vid = "<xsl:value-of select="@id"/>";
                     arrayWid[<xsl:value-of select="@id"/>].vstart = "<xsl:value-of select="@start"/>";
                     arrayWid[<xsl:value-of select="@id"/>].vend = "<xsl:value-of select="@end"/>";
                     arrayWid[<xsl:value-of select="@id"/>].vstep = "<xsl:value-of select="@step"/>";                  
                     arrayWid[<xsl:value-of select="@id"/>].vlabel = "<xsl:value-of select="label/text()"/>"; 
                     arrayWid[<xsl:value-of select="@id"/>].vclass = "<xsl:value-of select="@class"/>"; 
                     arrayWid[<xsl:value-of select="@id"/>].vopt = new Array();
                  </xsl:if>
               </xsl:for-each>
               
               <!-- Assegno i valori option, solo per radio, popupmenu, segment -->      
               <xsl:for-each select="XForms/range">
                  <xsl:if test="@class = 'cradio' ">
                     <xsl:for-each select="option">
                        arrayWid[<xsl:value-of select="../@id"/>].vopt[<xsl:value-of select="@id"/>] = "<xsl:value-of select="text()"/>";
                     </xsl:for-each>                     
                  </xsl:if>
                  <xsl:if test="@class = 'cpopupmenu' ">
                     <xsl:for-each select="option">
                        arrayWid[<xsl:value-of select="../@id"/>].vopt[<xsl:value-of select="@id"/>] = "<xsl:value-of select="text()"/>";
                     </xsl:for-each>                                          
                  </xsl:if>
                  <xsl:if test="@class = 'csegment' ">
                     <xsl:for-each select="option">
                        arrayWid[<xsl:value-of select="../@id"/>].vopt[<xsl:value-of select="@id"/>] = "<xsl:value-of select="text()"/>";
                     </xsl:for-each>                                          
                  </xsl:if>               
               </xsl:for-each>                                    
               
               <!-- Array dei valori correnti che assegnero' poi sucessivamente in javascript-->
               var arrayCurrent = new Array(<xsl:value-of select="$numWid"/>); 
               <xsl:for-each select="//model/instance/datarange/*">
                  <xsl:if test="@id != '0' ">
                     arrayCurrent[<xsl:value-of select="@id"/>] = new Object();
                     arrayCurrent[<xsl:value-of select="@id"/>].vcurrent = "<xsl:value-of select="text()"/>";                  
                  </xsl:if>
               </xsl:for-each>                  
               
               <!-- Array con tutte le caratteristiche dei widget che occorrono -->
               var arrayExtern= new Array(10);
               <xsl:apply-templates select="//groupRef"/>            
             </script>      

            <!-- Carico i documenti js esterni -->                     
            <script type="text/javascript" src="cgi-bin/generic-function.js"></script>
            <script type="text/javascript" src="cgi-bin/function.js"></script>            
            <script type="text/javascript" src="cgi-bin/level.js"></script>
            <script type="text/javascript" src="cgi-bin/popupmenu.js"></script>   
            <script type="text/javascript" src="cgi-bin/segment.js"></script>   
            <script type="text/javascript" src="cgi-bin/stepper.js"></script>   
            <script type="text/javascript" src="cgi-bin/slider.js"></script>   
            <script type="text/javascript" src="cgi-bin/knob.js"></script>   
            <script type="text/javascript" src="cgi-bin/dialcentrale.js"></script>   
            <script type="text/javascript" src="cgi-bin/dial.js"></script>   
         </head>                     
         
         <!-- Carico il body passando alla funzione init gli id dei widget -->
         <body onload="init({$listID});">                  
               <!-- Richiamo il template per disegnare i widget presenti su XForms -->
               <form action="app.cgi">
                  <span id="possubmit"><input type="submit" name="sendData" value="Send data"/></span>
                  <table class="widgetTBL" border="3" cellspacing="8" cellpadding="25" >
                     <tr>
                        <th class="titlePage"><xsl:value-of select="info/titlePageWeb/text()"/></th>
                        <th class="log">LOG</th>
                     </tr>   
                     <tr>                        
                        <td class="widgetTD"><xsl:call-template name="drawPage"/></td>
                        <td class="log" ><span id="information"></span></td>
                     </tr>
                  </table>
                  <span id="possubmit"><input type="submit" name="sendData" value="Send data"/></span>
               </form>
                                                   
         </body>
      </html>   
   </xsl:template>   
   
   <!-- Disegno i widget richiesti , il valore attuale lo setto sucessivamente in javascript-->
   <xsl:template name="drawPage">
      <xsl:for-each select="XForms/range">   
      
         <!-- Oggetto Box -->
         <xsl:if test="@class = 'cbox' ">
            <br/><hr/>
            <input  type="button" id="showbox{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hidebox{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enablebox{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disablebox{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="cbox{@id}" class="cbox">
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p class="bold">Valore corrente (lunghezza stringa): <span id="val_act{@id}" class="val_act"></span></p>
               <textarea id="wboxText{@id}" name="wboxText" rows="2" cols="35"></textarea>
               <br/><input id="wboxInput{@id}" value="{@end}" size="3" name="num" disabled="disabled"/>               
            </div>
         </xsl:if>
         
         <!-- Oggetto Radio -->
         <xsl:if test="@class = 'cradio' ">         
            <br/><hr/>
            <input  type="button" id="showradio{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hideradio{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enableradio{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disableradio{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="cradio{@id}" class="cradio">
            <p class="title"><xsl:value-of select="label/text()"/></p>
               <p class="bold">Valore corrente: <span id="val_act{@id}" class="val_act"></span></p>
               <xsl:for-each select="option">                        
                        <input type="radio" name="radioinp{../@id}" id="{../@id}radioid{@id}"  value="{text()}"/><span><xsl:value-of select="text()"/></span><br/>
               </xsl:for-each>      
            </div>
         </xsl:if>
         
         <!-- Oggetto Level -->
         <xsl:if test="@class = 'clevel' ">
            <br/><hr/>
            <input  type="button" id="showlevel{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hidelevel{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enablelevel{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disablelevel{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="clevel{@id}" class="clevel">
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p class="bold">Valore corrente:  <span id="val_act{@id}" class="val_act"></span></p>
               <img id="obj1wlevel{@id}" name="L1barra{@id}" border="0" src="{document(//groupRef/@href)//doc/level/image[3]/text()}" alt=""></img>
               <img id="obj2wlevel{@id}" name="L1buttonFix{@id}" border="0" src="{document(//groupRef/@href)//doc/level/image[1]/text()}"></img>
               <img id="obj3wlevel{@id}" name="L1buttonMove{@id}" border="0" src="{document(//groupRef/@href)//doc/level/image[2]/text()}" alt=""></img>                     
            </div><br/><br/><br/><br/><br/>
         </xsl:if>
         
         <!-- Oggetto Popupmenu -->
         <xsl:if test="@class = 'cpopupmenu' ">
            <br/><hr/>
            <input  type="button" id="showpopupmenu{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hidepopupmenu{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enablepopupmenu{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disablepopupmenu{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="cpopupmenu{@id}" class="cpopupmenu">
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p>Per attivare/disattivare il menu contestuale premere il tasto destro del mouse sull' immagine oncontextmenu.<br/>Utilizzando le freccie per modificare il valore corrente.<br/>Utilizzando il mouse per confermare la selezione clikkare col tasto sinistro sul menu nella voce selezionata.<br/>Le selezioni effettuate con le freccie rimangono di colore rosso a distinguere il diverso metodo di selezione.</p>
               <p class="bold">Valore corrente:  <span id="val_act{@id}" class="val_act"></span></p>
               <img id="obj1wpopupmenu{@id}" name="popupmenuUpNormal{@id}" border="0" src="{document(//groupRef/@href)//doc/popupmenu/image[1]/text()}" alt=""></img>
               <img id="obj2wpopupmenu{@id}" name="popupmenuUpPress{@id}" border="0" src="{document(//groupRef/@href)//doc/popupmenu/image[2]/text()}" alt=""></img>
               <img id="obj3wpopupmenu{@id}" name="popupmenuDownNormal{@id}" border="0" src="{document(//groupRef/@href)//doc/popupmenu/image[3]/text()}" alt=""></img>
               <img id="obj4wpopupmenu{@id}" name="popupmenuDownPress{@id}" border="0" src="{document(//groupRef/@href)//doc/popupmenu/image[4]/text()}" alt=""></img>
               <img id="obj5wpopupmenu{@id}" name="oncontextmenuButton{@id}" border="0" src="{document(//groupRef/@href)//doc/popupmenu/image[5]/text()}" alt=""></img>
               <div id="menudiv{@id}">
                  <table id="tblwpopupmenu{@id}" border="1" width="82" cellspacing="1" cellpadding="0" bgcolor="#FFCC00">
                     <tr><td>
                        <table width="80" cellspacing="3" cellpadding="3">
                           <xsl:for-each select="option">                        
                              <tr><td id= "{../@id}tdmenupopup{@id}" class="tdpopup"><xsl:value-of select="text()"/></td></tr>
                           </xsl:for-each>   
                        </table>
                     </td></tr>
                  </table>
               </div>
            </div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         </xsl:if>
         
         <!-- Oggetto Segment -->
         <xsl:if test="@class = 'csegment' ">
            <br/><hr/>
            <input  type="button" id="showsegment{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hidesegment{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enablesegment{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disablesegment{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="csegment{@id}" class="csegment">
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p class="bold">Valore corrente:  <span id="val_act{@id}" class="val_act"></span></p>
               <table id="tblsegmenti{@id}" cellspacing="10" cellpadding="10">
                  <tr>
                     <xsl:for-each select="option">   
                        <td id="{../@id}opt{@id}" name="tdsegmenti{../@id}"><xsl:value-of select="text()"/></td>
                     </xsl:for-each>            
                  </tr>
               </table>
            </div><br/><br/><br/><br/><br/><br/><br/>
         </xsl:if>
         
         <!-- Oggetto Stepper -->
         <xsl:if test="@class = 'cstepper' ">
            <br/><hr/>
            <input  type="button" id="showstepper{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hidestepper{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enablestepper{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disablestepper{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="cstepper{@id}" class="cstepper">            
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p>Quando si raggiunge il livello minimo o massimo di range e si prova ad andare oltre lo sfondo si colora di rosso.</p>
               <p class="bold">Valore corrente:  <span id="val_act{@id}" class="val_act"></span></p>
               <img id="objstepper1{@id}" name="stepperUpNormal{@id}" border="0" src="{document(//groupRef/@href)//doc/stepper/image[1]/text()}" alt=""></img>
               <img id="objstepper2{@id}" name="stepperUpPress{@id}" border="0" src="{document(//groupRef/@href)//doc/stepper/image[2]/text()}" alt=""></img>
               <img id="objstepper3{@id}" name="stepperDownNormal{@id}" border="0" src="{document(//groupRef/@href)//doc/stepper/image[3]/text()}" alt=""></img>
               <img id="objstepper4{@id}" name="stepperDownPress{@id}" border="0" src="{document(//groupRef/@href)//doc/stepper/image[4]/text()}" alt=""></img>
               <table id="tableStepper{@id}" width="65" cellspacing="1" cellpadding="1">
                  <tr><td id="idstepper{@id}" name="tdStepper{@id}"></td></tr>
               </table>
            </div><br/><br/><br/><br/><br/>
         </xsl:if>
         
         <!-- Oggetto Slider -->
         <xsl:if test="@class = 'cslider' ">
            <br/><hr/>
            <input  type="button" id="showslider{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hideslider{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enableslider{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disableslider{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="cslider{@id}" class="cslider">
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p class="bold">Valore corrente:  <span id="val_act{@id}" class="val_act"></span></p>
               <img id="obj1wslider{@id}" name="sliderarrow{@id}" border="0" src="{document(//groupRef/@href)//doc/slider/image[1]/text()}" alt=""></img>
               <img id="obj2wslider{@id}" name="sliderbarra{@id}" border="0" src="{document(//groupRef/@href)//doc/slider/image[2]/text()}" alt=""></img>
               <img id="obj3wslider{@id}" name="sliderstepup{@id}" border="0" src="{document(//groupRef/@href)//doc/slider/image[3]/text()}" alt=""></img>
               <img id="obj4wslider{@id}" name="sliderstepdown{@id}" border="0" src="{document(//groupRef/@href)//doc/slider/image[4]/text()}" alt=""></img>
            </div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         </xsl:if>
         
         <!-- Oggetto Knob -->
         <xsl:if test="@class = 'cknob' ">
            <br/><hr/>
            <input  type="button" id="showknob{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hideknob{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enableknob{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disableknob{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="cknob{@id}" class="cknob">
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p class="bold">Valore corrente: <span id="val_act{@id}" class="val_act"></span></p>
               <img id="obj1wknob{@id}" name="knob{@id}" border="0" src="{document(//groupRef/@href)//doc/knob/image[1]/text()}" alt=""></img>
               <img id="obj2wknob{@id}" name="buttonUp{@id}" border="0" src="{document(//groupRef/@href)//doc/knob/image[2]/text()}" alt=""></img>
               <img id="obj3wknob{@id}" name="buttonDown{@id}" border="0" src="{document(//groupRef/@href)//doc/knob/image[3]/text()}" alt=""></img>
            </div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         </xsl:if>   
         
         <!-- Oggetto Dial -->
         <xsl:if test="@class = 'cdial' ">
            <br/><hr/>
            <input  type="button" id="showdial{@id}" value="SHOW" class="cshow" name="show{@id}"></input>&#160;&#160;
            <input  type="button" id="hidedial{@id}" value="HIDE" class="chide"  name="hide{@id}"></input>&#160;&#160;
            <input  type="button" id="enabledial{@id}" value="ENABLE" class="cenable"  name="enable{@id}"></input>&#160;&#160;
            <input  type="button" id="disabledial{@id}" value="  DISABLE "  class="cdisable" name="disable{@id}"></input>            
            <div id="cdial{@id}" class="cdial">
               <p class="title"><xsl:value-of select="label/text()"/></p>
               <p>Inserendo nella casella il valore dell' angolo compreso tra 0 - 270 E' possibile vedere il dial variare.<br/>Il valore immesso verra' adattato allo step. Il valore che aggiorna il dial puo' arrivare da una qualsiasi applicazione.<br/>In rosso valori non leciti.</p>
               <p class="bold">Valore corrente: <span id="val_act{@id}" class="val_act"></span></p>
               <span id="posdialcentrale{@id}"><input id="wdialinp{@id}" value="" size="3" name="setwidget" ></input></span>
               <!-- sfondo-->
               <img id="img1wdialcentrale{@id}" name="sfondodialcentrale{@id}" border="0" src="{document(//groupRef/@href)//doc/dial/image[1]/text()}" alt=""></img>
               <!-- centro dial -->
               <img id="img8wdialcentrale{@id}" name="centrodialcentrale{@id}" border="0" src="{document(//groupRef/@href)//doc/dial/image[8]/text()}" alt=""></img>               
               <!-- Definisco una variabile per mantenere nel ciclo sucessivo il valore dell'id del widget -->
               <xsl:variable name="iddial"><xsl:value-of select="@id"/></xsl:variable>
               <!-- creo le immagini che mi serviranno per arco e tacche -->                              
               <xsl:for-each select="document(//groupRef/@href)//doc/dial/count[ @id = '6' ]/num">                  
                  <img name="imgDialpointBlack2x2" id="{$iddial}pointBlack2x2{@count}" src="{//doc/dial/image[6]/text()}" alt=""></img>                     
               </xsl:for-each>
               <!--  //Esempio del ciclo definito in maniera procedure che con XSLT viene gestito in maniera dichiarativa
               for (angle=1;angle<328;angle++){
                  <img class="imgKnob{@id}" name="pointBlack2x2-{@id}' + angle + '" src="{document(//groupRef/@href)//doc/dial/image[6]/text()}" alt=""></img>
               } -->
               <!-- creo le immagini che mi serviranno per la lancetta -->
               <xsl:for-each select="document(//groupRef/@href)//doc/dial/count[ @id = '4' ]/num">
                  <img name="imgDialpointRed2x2" id="{$iddial}pointRed2x2{@count}" src="{//doc/dial/image[4]/text()}" alt=""></img>
               </xsl:for-each>
               <!--  //Esempio del ciclo definito in maniera procedure che con XSLT viene gestito in maniera dichiarativa
               for (indicator=1;indicator<78   ;indicator++){
                  <img class="imgKnob{@id}" name="pointRed2x2-{@id}' + indicator + '" src="{document(//groupRef/@href)//doc/dial/image[4]/text()}" alt=""></img>
               }   -->
            </div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         </xsl:if>               
      </xsl:for-each>
   </xsl:template>
      
   <!-- Poplo gli indici dell'array che mi occorrono-->
   <xsl:template match="//groupRef">      
      <xsl:for-each select="//XForms/range">
      
         <!-- Oggetto Box -->
         <xsl:if test="@class = 'cbox' ">
            arrayExtern[1] = new Object();            
         </xsl:if>         
         
         <!-- Oggetto Radio -->
         <xsl:if test="@class = 'cradio' ">
            arrayExtern[2] = new Object();            
         </xsl:if>
         
         <!-- Oggetto Level -->
         <xsl:if test="@class = 'clevel' ">
            arrayExtern[3] = new Object();
            arrayExtern[3].linkImg1 = new Object();
            arrayExtern[3].linkImg2 = new Object();
            arrayExtern[3].linkImg3 = new Object();            
            arrayExtern[3].linkImg1.url = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[1]/text()"/>";
            arrayExtern[3].linkImg1.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[1]/@dimx"/>";
            arrayExtern[3].linkImg1.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[1]/@dimy"/>";            
            arrayExtern[3].linkImg2.url = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[2]/text()"/>";
            arrayExtern[3].linkImg2.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[2]/@dimx"/>";
            arrayExtern[3].linkImg2.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[2]/@dimy"/>";            
            arrayExtern[3].linkImg3.url = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[3]/text()"/>";
            arrayExtern[3].linkImg3.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[3]/@dimx"/>";
            arrayExtern[3].linkImg3.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/level/image[3]/@dimy"/>";            
         </xsl:if>
         
         <!-- Oggetto Popupmenu -->
         <xsl:if test="@class = 'cpopupmenu' ">
            arrayExtern[4] = new Object();            
            arrayExtern[4].linkImg1 = new Object();
            arrayExtern[4].linkImg2 = new Object();
            arrayExtern[4].linkImg3 = new Object();
            arrayExtern[4].linkImg4 = new Object();
            arrayExtern[4].linkImg5 = new Object();
            arrayExtern[4].linkImg1.url = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[1]/text()"/>";
            arrayExtern[4].linkImg1.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[1]/@dimx"/>";
            arrayExtern[4].linkImg1.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[1]/@dimy"/>";
            arrayExtern[4].linkImg2.url = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[2]/text()"/>";
            arrayExtern[4].linkImg2.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[2]/@dimx"/>";
            arrayExtern[4].linkImg2.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[2]/@dimy"/>";
            arrayExtern[4].linkImg3.url = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[3]/text()"/>";
            arrayExtern[4].linkImg3.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[3]/@dimx"/>";
            arrayExtern[4].linkImg3.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[3]/@dimy"/>";
            arrayExtern[4].linkImg4.url = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[4]/text()"/>";
            arrayExtern[4].linkImg4.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[4]/@dimx"/>";
            arrayExtern[4].linkImg4.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[4]/@dimy"/>";
            arrayExtern[4].linkImg5.url = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[5]/text()"/>";
            arrayExtern[4].linkImg5.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[5]/@dimx"/>";
            arrayExtern[4].linkImg5.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/popupmenu/image[5]/@dimy"/>";                     
         </xsl:if>
         
         <!-- Oggetto Segment -->
         <xsl:if test="@class = 'csegment' ">
            arrayExtern[5] = new Object();
            arrayExtern[5].styleWidget = new Object();            
            arrayExtern[5].styleWidget.backgroundTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@backgroundTBL"/>";
            arrayExtern[5].styleWidget.backgroundTD = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@backgroundTD"/>";
            arrayExtern[5].styleWidget.borderColorTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@borderColorTBL"/>";
            arrayExtern[5].styleWidget.borderStyleTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@borderStyleTBL"/>";
            arrayExtern[5].styleWidget.borderWidthTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@borderWidthTBL"/>";
            arrayExtern[5].styleWidget.colorTD = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@colorTD"/>";
            arrayExtern[5].styleWidget.cursorTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@cursorTBL"/>";
            arrayExtern[5].styleWidget.fontFamilyTD = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@fontFamilyTD"/>";
            arrayExtern[5].styleWidget.fontSizeTD = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@fontSizeTD"/>";
            arrayExtern[5].styleWidget.textAlignTD = "<xsl:value-of select="document(//groupRef/@href)//doc/segment/style/@textAlignTD"/>";            
         </xsl:if>
         
         <!-- Oggetto Stepper -->
         <xsl:if test="@class = 'cstepper' ">
            arrayExtern[6] = new Object();
            arrayExtern[6].styleWidget = new Object();
            arrayExtern[6].linkImg1 = new Object();
            arrayExtern[6].linkImg2 = new Object();
            arrayExtern[6].linkImg3 = new Object();
            arrayExtern[6].linkImg4 = new Object();
            arrayExtern[6].linkImg1.url = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[1]/text()"/>";
            arrayExtern[6].linkImg1.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[1]/@dimx"/>";
            arrayExtern[6].linkImg1.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[1]/@dimy"/>";
            arrayExtern[6].linkImg2.url = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[2]/text()"/>";
            arrayExtern[6].linkImg2.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[2]/@dimx"/>";
            arrayExtern[6].linkImg2.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[2]/@dimy"/>";
            arrayExtern[6].linkImg3.url = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[3]/text()"/>";
            arrayExtern[6].linkImg3.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[3]/@dimx"/>";
            arrayExtern[6].linkImg3.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[3]/@dimy"/>";
            arrayExtern[6].linkImg4.url = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[4]/text()"/>";
            arrayExtern[6].linkImg4.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[4]/@dimx"/>";
            arrayExtern[6].linkImg4.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/image[4]/@dimy"/>";
            arrayExtern[6].styleWidget.backgroundTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@backgroundTBL"/>";
            arrayExtern[6].styleWidget.backgroundTD = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@backgroundTD"/>";
            arrayExtern[6].styleWidget.borderColorTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@borderColorTBL"/>";
            arrayExtern[6].styleWidget.borderStyleTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@borderStyleTBL"/>";
            arrayExtern[6].styleWidget.borderWidthTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@borderWidthTBL"/>";
            arrayExtern[6].styleWidget.colorTD = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@colorTD"/>";
            arrayExtern[6].styleWidget.cursorTBL = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@cursorTBL"/>";
            arrayExtern[6].styleWidget.fontFamilyTD = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@fontFamilyTD"/>";
            arrayExtern[6].styleWidget.fontSizeTD = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@fontSizeTD"/>";
            arrayExtern[6].styleWidget.textAlignTD = "<xsl:value-of select="document(//groupRef/@href)//doc/stepper/style/@textAlignTD"/>";
         </xsl:if>
         
         <!-- Oggetto Slider -->
         <xsl:if test="@class = 'cslider' ">
            arrayExtern[7] = new Object();                        
            arrayExtern[7].linkImg1 = new Object();
            arrayExtern[7].linkImg2 = new Object();
            arrayExtern[7].linkImg3 = new Object();
            arrayExtern[7].linkImg4 = new Object();
            arrayExtern[7].linkImg1.url = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[1]/text()"/>";
            arrayExtern[7].linkImg1.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[1]/@dimx"/>";
            arrayExtern[7].linkImg1.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[1]/@dimy"/>";
            arrayExtern[7].linkImg2.url = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[2]/text()"/>";
            arrayExtern[7].linkImg2.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[2]/@dimx"/>";
            arrayExtern[7].linkImg2.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[2]/@dimy"/>";
            arrayExtern[7].linkImg3.url = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[3]/text()"/>";
            arrayExtern[7].linkImg3.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[3]/@dimx"/>";
            arrayExtern[7].linkImg3.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[3]/@dimy"/>";
            arrayExtern[7].linkImg4.url = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[4]/text()"/>";
            arrayExtern[7].linkImg4.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[4]/@dimx"/>";
            arrayExtern[7].linkImg4.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/slider/image[4]/@dimy"/>";
         </xsl:if>
         
         <!-- Oggetto Knob -->
         <xsl:if test="@class = 'cknob' ">
            arrayExtern[8] = new Object();
            arrayExtern[8].coordWidget = new Object();
            arrayExtern[8].linkImg1 = new Object();
            arrayExtern[8].linkImg2 = new Object();
            arrayExtern[8].linkImg3 = new Object();
            arrayExtern[8].linkImg1.url = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[1]/text()"/>";
            arrayExtern[8].linkImg1.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[1]/@dimx"/>";
            arrayExtern[8].linkImg1.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[1]/@dimy"/>";
            arrayExtern[8].linkImg2.url = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[2]/text()"/>";
            arrayExtern[8].linkImg2.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[2]/@dimx"/>";
            arrayExtern[8].linkImg2.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[2]/@dimy"/>";
            arrayExtern[8].linkImg3.url = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[3]/text()"/>";
            arrayExtern[8].linkImg3.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[3]/@dimx"/>";
            arrayExtern[8].linkImg3.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/knob/image[3]/@dimy"/>";
            arrayExtern[8].coordWidget.x0 =  "<xsl:value-of select="document(//groupRef/@href)//doc/knob/coord/@x0"/>";
            arrayExtern[8].coordWidget.y0 =  "<xsl:value-of select="document(//groupRef/@href)//doc/knob/coord/@y0"/>";
            arrayExtern[8].coordWidget.radius =  "<xsl:value-of select="document(//groupRef/@href)//doc/knob/coord/@radius"/>";
         </xsl:if>
         
         <!-- Oggetto Dial -->
         <xsl:if test="@class = 'cdial' ">
            arrayExtern[9] = new Object();   
            arrayExtern[9].coordWidget = new Object();         
            arrayExtern[9].linkImg1 = new Object();
            arrayExtern[9].linkImg2 = new Object();
            arrayExtern[9].linkImg3 = new Object();
            arrayExtern[9].linkImg4 = new Object();
            arrayExtern[9].linkImg5 = new Object();
            arrayExtern[9].linkImg6 = new Object();
            arrayExtern[9].linkImg7 = new Object();
            arrayExtern[9].linkImg8 = new Object();
            arrayExtern[9].linkImg1.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[1]/text()"/>";
            arrayExtern[9].linkImg1.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[1]/@dimx"/>";
            arrayExtern[9].linkImg1.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[1]/@dimy"/>";
            arrayExtern[9].linkImg2.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[2]/text()"/>";
            arrayExtern[9].linkImg2.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[2]/@dimx"/>";
            arrayExtern[9].linkImg2.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[2]/@dimy"/>";
            arrayExtern[9].linkImg3.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[3]/text()"/>";
            arrayExtern[9].linkImg3.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[3]/@dimx"/>";
            arrayExtern[9].linkImg3.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[3]/@dimy"/>";
            arrayExtern[9].linkImg4.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[4]/text()"/>";
            arrayExtern[9].linkImg4.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[4]/@dimx"/>";
            arrayExtern[9].linkImg4.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[4]/@dimy"/>";
            arrayExtern[9].linkImg5.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[5]/text()"/>";
            arrayExtern[9].linkImg5.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[5]/@dimx"/>";
            arrayExtern[9].linkImg5.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[5]/@dimy"/>";
            arrayExtern[9].linkImg6.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[6]/text()"/>";
            arrayExtern[9].linkImg6.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[6]/@dimx"/>";
            arrayExtern[9].linkImg6.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[6]/@dimy"/>";
            arrayExtern[9].linkImg7.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[7]/text()"/>";
            arrayExtern[9].linkImg7.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[7]/@dimx"/>";
            arrayExtern[9].linkImg7.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[7]/@dimy"/>";
            arrayExtern[9].linkImg8.url = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[8]/text()"/>";
            arrayExtern[9].linkImg8.dimx = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[8]/@dimx"/>";
            arrayExtern[9].linkImg8.dimy = "<xsl:value-of select="document(//groupRef/@href)//doc/dial/image[8]/@dimy"/>";
            arrayExtern[9].coordWidget.x0 =  "<xsl:value-of select="document(//groupRef/@href)//doc/dial/coord/@x0"/>";
            arrayExtern[9].coordWidget.y0 =  "<xsl:value-of select="document(//groupRef/@href)//doc/dial/coord/@y0"/>";
            arrayExtern[9].coordWidget.radius =  "<xsl:value-of select="document(//groupRef/@href)//doc/dial/coord/@radius"/>";            
         </xsl:if>               
      </xsl:for-each>
   </xsl:template>      
</xsl:stylesheet>

/*
   ===========================================================
   ||                                                       ||
   ||  INIZIALIZZAZIONE APPLICAZIONE E FUNZIONI GENERICHE   ||
   ||                                                       ||
   ===========================================================
*/

//Variabili globali dell'applicazione oltre a quelle dichiarate in XSLT
   
   //array che conterra' gli oggetti widget che al caricamento ci copio da XSLT
   var arrayObjWidget = new Array();   
   var info; //variabile globale per le informazioni a runtime
   //coordinate del mouse
   var mousex = 0;
   var mousey = 0;   
    //procedura utilizzata
   var algor = 0;
   //prendono il valore del widget caricato
   var stepWid = "Non pervenuto"; //step
   var maxWid = "Non pervenuto"; //end
   var minWid = "Non pervenuto"; //start
   var currentWid = "Non pervenuto"; //corrente
   var nameWid = "Widget non caricato";
   var dragobj;   
   var grabx = 0;
   var graby = 0;
   var orix = 0;
   var oriy = 0;
   var elex = 0;
   var eley = 0;
   
//Aggiorna i valori per la tabella e il widget in uso
function updateTableInfo(widget){
   stepWid = widget.vstep;
   maxWid = widget.vmax;
   minWid = widget.vmin;
   currentWid = widget.vcurrent;
   nameWid = widget.ident;
   dragobj = widget.dragobj;
   grabx = widget.grabx;
   graby = widget.graby;
   orix = widget.orix;
   oriy = widget.oriy;
   elex = widget.elex;
   eley = widget.eley;
   return;
}

//Prende in input l'id di un tag, i colori over e out
//Poi genera gli eventi al passaggio del mouse
function changeColorMenu(item, overColor, outColor){
   document.getElementById(item).onmouseover = function(){
      document.getElementById(item).style.backgroundColor=overColor;
      return;
   }
   document.getElementById(item).onmouseout = function(){      
      document.getElementById(item).style.backgroundColor=outColor;   
      return;
   }      
}

//Prende 2 immagini e ne rende una visibile e una invisibile
function changeImg(show, hide, widget){      
   widget.imgs[show].style.visibility = "visible";      
   widget.imgs[hide].style.visibility = "hidden";                  
   return;   
}

//Funzione per aggiornare la posizione del mouse (richiamata su onmousemove)
function mouselocation(eventmouse){
   getMouseXY(eventmouse); // NS passa (event), mentre IE passa (null)   
}

//Funzione per calcolare le coordinate del mouse
function getMouseXY(evento){ // funziona su IE6 e Moz 
   if (!evento) evento = window.event; // per IE
   if (evento){ 
      if (evento.pageX || evento.pageY){ //mozilla
          mousex = evento.pageX;
           mousey = evento.pageY;
         algor = '[evento.pageX]';
         if (evento.clientX || evento.clientY) 
               algor += ' [evento.clientX] '
      }
       else if (evento.clientX || evento.clientY){ //IE
          mousex = evento.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
           mousey = evento.clientY + document.body.scrollTop + document.documentElement.scrollTop;
           algor = '[evento.clientX]';
         if (evento.pageX || evento.pageY)
            algor += ' [evento.pageX] '
        }  
   }
}

//Usata per eliminare le funzioni associate agli eventi
function falsefunc(){
   return false;
}

//Funzione di avvio applicazione che viene richiamata da XSLT al caricamento del body
function init(){
   
   /****DESCRIZIONE ARRAY GLOBALI ****
   
      - arrayExtern: di dimensione 10 contiene tutte le caratteristiche dei widget caricati (immagini, opzioni, stile)
         
         arrayExtern[0]: (null)
         
         arrayExtern[1]: cbox.
            (null)
         
         arrayExtern[2].//cradio
            (null)
                     
         arrayExtern[3].//clevel
            linkImg1.url linkImg1.dimx   linkImg1.dimy
            linkImg2.url linkImg2.dimx   linkImg2.dimy
            linkImg3.url linkImg3.dimx   linkImg3.dimy
         
         arrayExtern[4].//cpopupmenu
            linkImg1.url linkImg1.dimx   linkImg1.dimy
            linkImg2.url linkImg2.dimx   linkImg2.dimy
            linkImg3.url linkImg3.dimx   linkImg3.dimy
            linkImg4.url linkImg4.dimx   linkImg4.dimy
            linkImg5.url linkImg5.dimx   linkImg5.dimy
                  
         arrayExtern[5].//csegment
            styleWidget.backgroundTBL
            styleWidget.backgroundTD
            styleWidget.borderColorTBL
            styleWidget.borderStyleTBL
            styleWidget.borderWidthTBL
            styleWidget.colorTD
            styleWidget.cursorTBL
            styleWidget.fontFamilyTD
            styleWidget.fontSizeTD
            styleWidget.textAlignTD
                     
         arrayExtern[6].//cstepper
            linkImg1.url linkImg1.dimx   linkImg1.dimy
            linkImg2.url linkImg2.dimx   linkImg2.dimy
            linkImg3.url linkImg3.dimx   linkImg3.dimy
            linkImg4.url linkImg4.dimx   linkImg4.dimy
            styleWidget.backgroundTBL
            styleWidget.backgroundTD
            styleWidget.borderColorTBL
            styleWidget.borderStyleTBL
            styleWidget.borderWidthTBL
            styleWidget.colorTD
            styleWidget.cursorTBL
            styleWidget.fontFamilyTD
            styleWidget.fontSizeTD
            styleWidget.textAlignTD
            
         arrayExtern[7].//cslider
            linkImg1.url linkImg1.dimx   linkImg1.dimy
            linkImg2.url linkImg2.dimx   linkImg2.dimy
            linkImg3.url linkImg3.dimx   linkImg3.dimy
            linkImg4.url linkImg4.dimx   linkImg4.dimy
         
         arrayExtern[8].//cknob
            linkImg1.url linkImg1.dimx   linkImg1.dimy
            linkImg2.url linkImg2.dimx   linkImg2.dimy
            linkImg3.url linkImg3.dimx   linkImg3.dimy
            coordWidget.x0
            coordWidget.y0
            coordWidget.radius            
         
         arrayExtern[9].//cdial
            linkImg1.url linkImg1.dimx   linkImg1.dimy
            linkImg2.url linkImg2.dimx   linkImg2.dimy
            linkImg3.url linkImg3.dimx   linkImg3.dimy
            linkImg4.url linkImg4.dimx   linkImg4.dimy
            linkImg5.url linkImg5.dimx   linkImg5.dimy
            linkImg6.url linkImg6.dimx   linkImg6.dimy
            linkImg7.url linkImg7.dimx   linkImg7.dimy
            linkImg8.url linkImg8.dimx   linkImg8.dimy
            coordWidget.x0
            coordWidget.y0
            coordWidget.radius         
      
      - arrayWid: di dimensione data dal numero di tag range in XForms contiene i valori del widget da XForms
         per ogni form valgono i seguenti oggetti:
         arrayWid[n=vid].vid = "valore id univoco widget"
         arrayWid[n].vstart = "valore minimo"
         arrayWid[n].vend = "valore massimo"
         arrayWid[n].vstep = "valore di step che indica lo spostamento minimo tra start e end"
         arrayWid[n].vlabel = "la descrizione del widget per XForms che viene messo come titolo sulla pagina web"
         arrayWid[n].vclass = "la classe del widget per la gestione dei CSS"
         arrayWid[n].vcurrent = "valore corrente widget" (caricato dall'array globale temporaneo arrayCurrent)
         arrayWid[n].option[] =  "array delle opzioni, valido solo per radio, popupmenu, segment" (si parte da 1 e non da 0)
   */   
      
   //attendo il caricamento del body
   window.loaded = false;   
   
   //assegno all'array dei widget i valori correnti, da qui in poi arrayCurrent con sara' piu' utilizzato
   var i = 1;
   for(i=1; i < arrayWid.length; i++){
      arrayWid[i].vcurrent = arrayCurrent[i].vcurrent;
   }
   
   //verifico il supporto al dom
   if ( findDOM()!= 0){
      info = "- Rilevamento DOM: done!";
      document.getElementById('information').innerHTML = info;
   }
   else{
      info = "- Rilevamento DOM: failed!";
      document.getElementById('information').innerHTML = info;
      return false;
   }
   
   //confermo l'avvenuta creazione grafica dei widget      
   info = info + "<br/>- Creazione grafica widget con XSLT: done!";
   document.getElementById('information').innerHTML = info;
   
   //attivo l'evento che mi fornisce le coordinate del mouse quando lo muovo
   document.onmousemove  = mouselocation;   
   
   //elimino il menu contestuale del tasto destro del mouse sul documento
   //da questo momento in poi avendo funzioni richiamate su evento oncontextmenu e' meglio disabilitarlo
   document.oncontextmenu  = falsefunc;
   
   //confermo l'avvenuto caricamento del body
   window.loaded = true;      
   
   //richiamo la funzione per la creazione degli oggetti widget caricati da XSLT
   doOgjWid();   
   
   return;
}

//Controlla che il numero di argomenti per una funzione sia corretto (utilizzato dai costruttori)
function checkargs(args){
   var actual = args.length; //numero di argomenti
   var expected = args.callee.length; //numero di argomenti atteso
   if (actual != expected){ //controllo che il numero di argomenti sia corretto
      throw new Error("ERRORE: costruttore richiamato con numero di argomenti errato");
      return null;
   }
}

//Definizione DOM e varibili
function findDOM (){
   if(document.implementation && document.implementation.createDocument){ //rilevato DOM Level 2                  
      return 1;   
   }
   else if (window.ActiveXObject){ //rilevato API Microsoft            
         if (!window.Node){ //definisco i nodi che per IE sono definiti solo da numeri interi
         var Node = {
            ELEMENT_NODE: 1,
            ATTRIBUTE_NODE: 2,
            TEXT_NODE: 3,
            COMMENT_NODE: 8,
            DOCUMENT_NODE: 9,
            DOCUMENT_FRAGMENT_NODE: 11
         }   
      } 
      return 2;
   }
   else{
      alert("Il browser non supporta il DOM");
      return 0;
   }            
}

// funzione per prendere un elemento con id univoco
function prendiElementoDaId(id_elemento) {
   var elemento;
   if(document.getElementById)
      elemento = document.getElementById(id_elemento);
   else
      elemento = document.all[id_elemento];
   return elemento;
}

//richiamata da init inizia l'applicazione richiamando i costruttori per la creazione dei widget
function doOgjWid(){
   //i mi identifica l'id del widget
   var i=1;
   for(i=1; i<arrayWid.length; i++){
      if (arrayWid[i].vclass == "cbox"){
         //function wbox(vmin, vmax, vstep, vcurrent, vid, vclass, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wbox(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, true, true);                  
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }
      else if (arrayWid[i].vclass == "cradio"){
         //function wradio(vmin, vmax, vstep, vcurrent, vid, vclass, opt, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wradio(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, arrayWid[i].vopt, true, true);   
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }
      else if (arrayWid[i].vclass == "clevel"){
         //function wlevel(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wlevel(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, arrayExtern[3].linkImg1, arrayExtern[3].linkImg2, arrayExtern[3].linkImg3, true, true);
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }
      else if (arrayWid[i].vclass == "cpopupmenu"){
         //function wpopupmenu(vmin, vmax, vstep, vcurrent, vid, vclass, opt, linkImg1, linkImg2, linkImg3, linkImg4, linkImg5, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wpopupmenu(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, arrayWid[i].vopt, arrayExtern[4].linkImg1, arrayExtern[4].linkImg2, arrayExtern[4].linkImg3,arrayExtern[4].linkImg4,arrayExtern[4].linkImg5, true, true);
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }
      else if (arrayWid[i].vclass == "csegment"){
         //function wsegment(vmin, vmax, vstep, vcurrent, vid, vclass, opt, styleWidget, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wsegment(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass,  arrayWid[i].vopt, arrayExtern[5].styleWidget, true, true); 
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }
      else if (arrayWid[i].vclass == "cstepper"){
         //function wstepper(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, linkImg4, styleWidget, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wstepper(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, arrayExtern[6].linkImg1, arrayExtern[6].linkImg2, arrayExtern[6].linkImg3, arrayExtern[6].linkImg4, arrayExtern[6].styleWidget, true, true); 
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }
      else if (arrayWid[i].vclass == "cslider"){
         //function wslider(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, linkImg4, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wslider(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, arrayExtern[7].linkImg1, arrayExtern[7].linkImg2, arrayExtern[7].linkImg3, arrayExtern[7].linkImg4, true, true); 
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }
      else if (arrayWid[i].vclass == "cknob"){
         //function wknob(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wknob(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, arrayExtern[8].linkImg1, arrayExtern[8].linkImg2, arrayExtern[8].linkImg3, true, true); 
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
         
      }
      else if (arrayWid[i].vclass == "cdial"){
         //function wdial(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, linkImg4, linkImg5, linkImg6, linkImg7, linkImg8, enabled, visible)
         arrayObjWidget[arrayWid[i].vid] = new wdial(arrayWid[i].vstart, arrayWid[i].vend, arrayWid[i].vstep, arrayWid[i].vcurrent, arrayWid[i].vid , arrayWid[i].vclass, arrayExtern[9].linkImg1, arrayExtern[9].linkImg2, arrayExtern[9].linkImg3, arrayExtern[9].linkImg4, arrayExtern[9].linkImg5, arrayExtern[9].linkImg6, arrayExtern[9].linkImg7, arrayExtern[9].linkImg8, true, true); 
         //posiziono gli elementi del widget e se occorre gestisco la grafica statica e dinamica
         arrayObjWidget[arrayWid[i].vid].lpos();
      }      
      else{
         //aggiorno il log su errore caricamento costruttori
         info = info + '<br/><span class="errorMSG">- Richiamo costruttori per widget: failed!</span>';
         document.getElementById('information').innerHTML = info;
         return false;
      }
   }   
   
   //aggiorno il log di avvenuto caricamento dei costruttori
   info = info + "<br/>- Richiamo costruttori per widget: done!";
   document.getElementById('information').innerHTML = info;
   return;   
}

/*
   ===========================================================
   ||                                                       ||
   ||            --- INIZIALIZZAZIONE WIDGET ---            ||
   ||                                                       ||
   ===========================================================
*/

/******************************************************
         INIZIALIZZAZIONE WIDGET BOX
******************************************************/
function graficPositionBox(){   
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showbox' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hidebox' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enablebox' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disablebox' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   //aggiorno il valore corrente a livello grafico e setto le variabili necessarie
   var boxTextArea = document.getElementById('wboxText' + (this.vid).toString(10));   
   
   boxTextArea.value = (this.vcurrent).toString(10);   
   var maxchars = widget.vmax;   
   var rest = 0;
   if (boxTextArea.value.length > maxchars){
      boxTextArea.value = boxTextArea.value.substring(0,maxchars);
      rest = 0;      
   }
   else{
      rest = maxchars - boxTextArea.value.length;      
   }
   document.getElementById('wboxInput' + (widget.vid).toString(10)).value = rest;   
   
   //visualizzo il valore su val_act
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent.length;   
   
   //gestisco l'evento su pressione tasti   
   boxTextArea.onkeyup = function onkeyupWbox(){      
      var maxchars = widget.vmax;   
      var rest = 0;
      if (boxTextArea.value.length > maxchars){
         boxTextArea.value = boxTextArea.value.substring(0,maxchars);
         rest = 0;      
      }
      else{
         rest = maxchars - boxTextArea.value.length;      
      }
      document.getElementById('wboxInput' + (widget.vid).toString(10)).value = rest;      
      
      //setto il nuovo valore corrente chiamando il metodo sul costruttore
      widget.lset(boxTextArea.value);   
      
      //visualizzo il valore su val_act
        document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent.length;
                    
      return;            
   }
   return;      
}

/******************************************************
         INIZIALIZZAZIONE WIDGET RADIO
******************************************************/
function graficPositionRadio(){
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showradio' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hideradio' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enableradio' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disableradio' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
      
   //aggiorno il valore corrente a livello grafico e setto le variabili necessarie
   
   var i = 0;   
   var inputTag = document.getElementsByTagName("input");
   var nameRadio = 'radioinp' + (this.vid).toString(10);      
   
   //mi baso sul fatto che i tag option sono esattamente 2
   for(i=0; i < inputTag.length; i++){         
      if(inputTag.item(i).getAttribute("name") == nameRadio){            
         
         //setto in partenza il valore corrente
         if(inputTag.item(i).value == widget.vcurrent)
            inputTag.item(i).checked = true;
         else
            inputTag.item(i+1).checked = true;;
            
         //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
         
         inputTag.item(i).onclick = function(){      
            widget.lset(this.value);
            //visualizzo il valore su val_act
              document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;            
            return;
         }
         inputTag.item(i+1).onclick = function(){      
            widget.lset(this.value);               
            //visualizzo il valore su val_act
              document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
            return;
         }
      }
   }   
}

/******************************************************
         INIZIALIZZAZIONE WIDGET LEVEL
******************************************************/
function graficPositionLevel(){      
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showlevel' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hidelevel' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enablelevel' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disablelevel' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   //posiziono gli oggetti
   document.getElementById("obj1wlevel" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj1wlevel" + (this.vid).toString(10)).style.left = "90px";
   document.getElementById("obj1wlevel" + (this.vid).toString(10)).style.top = "100px";
   document.getElementById("obj2wlevel" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj2wlevel" + (this.vid).toString(10)).style.left = "90px";
   document.getElementById("obj2wlevel" + (this.vid).toString(10)).style.top = "100px";
   document.getElementById("obj3wlevel" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj3wlevel" + (this.vid).toString(10)).style.left = "90px";
   document.getElementById("obj3wlevel" + (this.vid).toString(10)).style.top = "100px";   
   
   //setto le variabili necessarie   
   var img1 = 'L1barra' + (this.vid).toString(10);   
   var img2 = 'L1buttonFix' + (this.vid).toString(10);   
   var img3 = 'L1buttonMove' + (this.vid).toString(10);   
   var hide = 'L1buttonMove' + (this.vid).toString(10);   
   widget.imgs = document.getElementsByTagName("img");   
   widget.coordXinizLevel = parseInt(widget.imgs[img3].style.left);   
   widget.coordYinizLevel = parseInt(widget.imgs[img3].style.top);   
   widget.coordYfinaleLevel = widget.coordYinizLevel;
   
   //E' consigliato usare la differenza tra l'immagine barra e quella in movimento se il valore massimo e' esattamente dato dalla differenza tra la barra e l'immagine in movimento
   //widget.coordXfinaleLevel = widget.coordXinizLevel + parseInt(widget.linkImg3.dimx) - parseInt(widget.linkImg2.dimx); 
   widget.coordXfinaleLevel = parseInt(widget.vmax) + parseInt(widget.imgs[img1].style.left);     
   
   //adatto il valore corrente allo step e lo setto
   var tmpvcurrent = ((parseInt((widget.vcurrent)/widget.vstep))*widget.vstep);
   widget.lset(tmpvcurrent);
   
   //visualizzo il valore su val_act   
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = ((parseInt((widget.vcurrent)/widget.vstep))*widget.vstep);
   
   //posiziono gli oggetti in base al valore corrente
   widget.imgs[img2].style.left = (parseInt(widget.coordXinizLevel) + parseInt(this.vcurrent)).toString(10) + 'px';
   widget.imgs[img3].style.left = (parseInt(widget.coordXinizLevel) + parseInt(this.vcurrent)).toString(10) + 'px';
   widget.imgs[hide].style.visibility = "hidden";   
   
   //gestisco gli eventi sulle immagini
   widget.imgs[img2].onmouseover = function(){      
      var l = widget.imgs[img2].style.left;
      var t = widget.imgs[img2].style.top;
      changeImg(img3, img2, widget);      
      widget.imgs[img3].style.left = l;
      widget.imgs[img3].style.top = t;
      return;
   }   
   widget.imgs[img2].onmouseover = function(){      
      var l = widget.imgs[img2].style.left;
      var t = widget.imgs[img2].style.top;
      changeImg(img3, img2, widget);      
      widget.imgs[img3].style.left = l;
      widget.imgs[img3].style.top = t;
      return;
   }      
   widget.imgs[img3].onmousedown = function(){         
      grabLevel(this, widget);                  
      return;
   }   
   widget.imgs[img3].onmouseout = function(){      
      if (widget.dragobj == null){
         var l = widget.imgs[img3].style.left;
         var t = widget.imgs[img3].style.top;
         changeImg(img2, img3, widget);      
         widget.imgs[img2].style.left = l;
         widget.imgs[img2].style.top = t;
         return;
      }
   }            
   return;
}

/******************************************************
         INIZIALIZZAZIONE WIDGET POPUPMENU
******************************************************/
function graficPositionPopupmenu(){   
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showpopupmenu' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hidepopupmenu' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enablepopupmenu' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disablepopupmenu' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   //prima li rendo visibili
   document.getElementById("obj1wpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";   
   document.getElementById("obj2wpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";   
   document.getElementById("obj3wpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";   
   document.getElementById("obj4wpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";   
   document.getElementById("menudiv" + (this.vid).toString(10)).style.visibility = "visible";
   document.getElementById("menudiv" + (this.vid).toString(10)).style.position = "absolute";
   //posiziono gli oggetti   
   document.getElementById("obj5wpopupmenu" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj5wpopupmenu" + (this.vid).toString(10)).style.left = "90px";
   document.getElementById("obj5wpopupmenu" + (this.vid).toString(10)).style.top = "230px";   
   var xtbl = 90 + parseInt(widget.linkImg5.dimx) + parseInt(widget.linkImg1.dimx);
   var ytbl = parseInt(widget.linkImg1.dimy);   
   document.getElementById("tblwpopupmenu" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("tblwpopupmenu" + (this.vid).toString(10)).style.left = (xtbl).toString(10) + 'px';
   document.getElementById("tblwpopupmenu" + (this.vid).toString(10)).style.top = (ytbl).toString(10) + 'px';      
   var xarrow = 90 + parseInt(widget.linkImg5.dimx);   
   document.getElementById("obj1wpopupmenu" + (this.vid).toString(10)).style.position = "absolute";   
   document.getElementById("obj1wpopupmenu" + (this.vid).toString(10)).style.left = (xarrow).toString(10) + 'px';
   document.getElementById("obj1wpopupmenu" + (this.vid).toString(10)).style.top = "230px";   
   document.getElementById("obj2wpopupmenu" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj2wpopupmenu" + (this.vid).toString(10)).style.left = (xarrow).toString(10) + 'px';
   document.getElementById("obj2wpopupmenu" + (this.vid).toString(10)).style.top = "230px";   
   var xarrowdown = parseInt(widget.linkImg1.dimy);
   document.getElementById("obj3wpopupmenu" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj3wpopupmenu" + (this.vid).toString(10)).style.left = (xarrow).toString(10) + 'px';
   document.getElementById("obj3wpopupmenu" + (this.vid).toString(10)).style.top = (230 + xarrowdown).toString(10) + 'px';
   document.getElementById("obj4wpopupmenu" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj4wpopupmenu" + (this.vid).toString(10)).style.left = (xarrow).toString(10) + 'px';
   document.getElementById("obj4wpopupmenu" + (this.vid).toString(10)).style.top = (230 + xarrowdown).toString(10) + 'px';
   
   //nascondo il menu'   
   document.getElementById("menudiv" + (this.vid).toString(10)).style.visibility = "hidden";   
   
   //setto le variabili necessarie e nascondo gli oggetti che ora non mi servono
   widget.menuPopUp = false;         
   widget.lengthMenu = widget.vopt.length; //setto la lunghezza del menu'
   var img1 = 'popupmenuUpNormal' + (this.vid).toString(10);   
   var img2 = 'popupmenuUpPress' + (this.vid).toString(10);   
   var img3 = 'popupmenuDownNormal' + (this.vid).toString(10);   
   var img4 = 'popupmenuDownPress' + (this.vid).toString(10);   
   var img5 = 'oncontextmenuButton' + (this.vid).toString(10);   
   widget.imgs = document.getElementsByTagName("img");
   widget.imgs[img1].style.visibility = "hidden";      
   widget.imgs[img2].style.visibility = "hidden";      
   widget.imgs[img3].style.visibility = "hidden";      
   widget.imgs[img4].style.visibility = "hidden";   
   
   //visualizzo il valore su val_act
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;      
   
   widget.imgs[img1].onmouseover = function(){
      changeImg(img2, img1, widget);            
      return;
   }         
   widget.imgs[img3].onmouseover = function(){
      changeImg(img4, img3, widget);      
      return;
   }   
   widget.imgs[img2].onmouseout = function(){
      changeImg(img1, img2, widget);            
      return;
   }         
   widget.imgs[img4].onmouseout = function(){
      changeImg(img3, img4, widget);      
      return;
   }   
   widget.imgs[img2].onmousedown = function(){   
      moveOnMenuPopUp(widget, this);
      return;
   }
   widget.imgs[img4].onmousedown = function(){                  
      moveOnMenuPopUp(widget, this);
      return;
   }   
   widget.imgs[img5].oncontextmenu = function(){
      //se il menu e' chiuso lo apro
      if (widget.menuPopUp == false){
         widget.imgs[img1].style.visibility = "visible";
         widget.imgs[img2].style.visibility = "hidden";      
         widget.imgs[img3].style.visibility = "visible";   
         widget.imgs[img4].style.visibility = "hidden";   
         openMenuPopUp(widget, this);               
      }
      else{ //menu' gia aperto e lo chiudo
         widget.imgs[img1].style.visibility = "hidden";      
         widget.imgs[img2].style.visibility = "hidden";      
         widget.imgs[img3].style.visibility = "hidden";      
         widget.imgs[img4].style.visibility = "hidden";   
         openMenuPopUp(widget, this);               
      }      
   }   
   return;
}

/******************************************************
         INIZIALIZZAZIONE WIDGET SEGMENT
******************************************************/
function graficPositionSegment(){   
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showsegment' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hidesegment' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enablesegment' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disablesegment' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.left = "90px";
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.top = "90px";
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.width = "75%";
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.background = widget.styleWidget.backgroundTBL;
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.backgroundAttachment= "fixed";   
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.tableLayout= "fixed";
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.borderColor= widget.styleWidget.borderColorTBL;
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.borderWidth= widget.styleWidget.borderWidthTBL;
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.borderStyle= widget.styleWidget.borderStyleTBL;
   document.getElementById("tblsegmenti" + (this.vid).toString(10)).style.cursor= widget.styleWidget.cursorTBL;
      
   var lista = document.getElementsByTagName("td");
   var i = 0;   
   for(i=0; i < lista.length; i++){      
      if(lista.item(i).getAttribute("name") == ("tdsegmenti" + (this.vid).toString(10)) ){
         lista.item(i).style.textAlign = widget.styleWidget.textAlignTD;
         lista.item(i).style.verticalAlign = "middle";
         lista.item(i).style.border = "outset 7px #3300CC";   
         lista.item(i).style.background = widget.styleWidget.backgroundTD;
         lista.item(i).style.fontFamily = widget.styleWidget.fontFamilyTD;
         lista.item(i).style.fontSize = widget.styleWidget.fontSizeTD;
         lista.item(i).style.color = widget.styleWidget.colorTD;   
         lista.item(i).style.fontWeight = "bold";            
      }
   }
      
   //visualizzo il valore su val_act
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
   
   //coloro il td del valore corrente
   var actIndex =0; //indice attuale
   widget.lengthMenu = widget.vopt.length;
   //rilevo la posizione nel menu' in cui mi trovo
   for ( i=1 ; i<widget.lengthMenu; i++){   
      if (document.getElementById((widget.vid).toString(10) + 'opt' + (i).toString(10)).firstChild.data == widget.vcurrent){
         actIndex = i;   
      }
   }
   document.getElementById((widget.vid).toString(10) + 'opt' + (actIndex).toString(10)).style.color = "blue";         
   
   for(i=1; i < widget.vopt.length; i++){      
      changeStyleMenu(widget, (widget.vid).toString(10) + 'opt' + i, '#FFCC00', widget.styleWidget.backgroundTD, 'outset 7px #3300CC', 'inset 7px #3300CC');                  
   }
   return;
}

/******************************************************
         INIZIALIZZAZIONE WIDGET STEPPER
******************************************************/
function graficPositionStepper(){
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showstepper' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hidestepper' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enablestepper' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disablestepper' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   document.getElementById("objstepper1" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("objstepper2" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("objstepper3" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("objstepper4" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("objstepper1" + (this.vid).toString(10)).style.left = "100px";
   document.getElementById("objstepper2" + (this.vid).toString(10)).style.left = "100px";
   document.getElementById("objstepper3" + (this.vid).toString(10)).style.left = "100px";
   document.getElementById("objstepper4" + (this.vid).toString(10)).style.left = "100px";
   document.getElementById("objstepper1" + (this.vid).toString(10)).style.top = "130px";
   document.getElementById("objstepper2" + (this.vid).toString(10)).style.top = "130px";
   var ytbl = 130 + parseInt(widget.linkImg1.dimy);
   document.getElementById("objstepper3" + (this.vid).toString(10)).style.top = (ytbl).toString(10) + 'px';
   document.getElementById("objstepper4" + (this.vid).toString(10)).style.top = (ytbl).toString(10) + 'px';   
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.position = "absolute";   
   var xtbl = 100 + parseInt(widget.linkImg1.dimx);
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.left = (xtbl).toString(10) + 'px';
   var ytbl = 130 + ((parseInt(widget.linkImg1.dimy) + parseInt(widget.linkImg3.dimy))/4);
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.top = (ytbl).toString(10) + 'px';
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.tableLayout= "fixed";
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.borderColor= widget.styleWidget.borderColorTBL;
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.borderWidth= widget.styleWidget.borderWidthTBL;
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.borderStyle= widget.styleWidget.borderStyleTBL;
   document.getElementById("tableStepper" + (this.vid).toString(10)).style.cursor= widget.styleWidget.cursorTBL;      
   
   var lista = document.getElementsByTagName("td");
   var i = 0;      
   for(i=0; i < lista.length; i++){      
      if(lista.item(i).getAttribute("name") == ("tdStepper" + (this.vid).toString(10))){
         lista.item(i).style.textAlign = widget.styleWidget.textAlignTD;
         lista.item(i).style.verticalAlign = "middle";
         lista.item(i).style.background = widget.styleWidget.backgroundTD;
         lista.item(i).style.fontFamily = widget.styleWidget.fontFamilyTD;
         lista.item(i).style.fontSize = widget.styleWidget.fontSizeTD;
         lista.item(i).style.color = widget.styleWidget.colorTD;   
         lista.item(i).style.fontWeight = "bold";
      }
   }
   
   //setto le variabili necessarie   
   var img1 = 'stepperUpNormal' + (this.vid).toString(10);   
   var img2 = 'stepperUpPress' + (this.vid).toString(10);   
   var img3 = 'stepperDownNormal' + (this.vid).toString(10);   
   var img4 = 'stepperDownPress' + (this.vid).toString(10);   
   widget.imgs = document.getElementsByTagName("img");
   widget.imgs[img1].style.visibility = "visible";      
   widget.imgs[img2].style.visibility = "hidden";      
   widget.imgs[img3].style.visibility = "visible";      
   widget.imgs[img4].style.visibility = "hidden";   
   
   //visualizzo il valore su val_act
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
     
     //scrivo nel td il valore corrente
     document.getElementById("idstepper" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
     
   widget.imgs[img1].onmouseover = function(){
      changeImg(img2, img1, widget);            
      return;
   }         
   widget.imgs[img3].onmouseover = function(){
      changeImg(img4, img3, widget);      
      return;
   }   
   widget.imgs[img2].onmouseout = function(){
      changeImg(img1, img2, widget);            
      return;
   }         
   widget.imgs[img4].onmouseout = function(){
      changeImg(img3, img4, widget);      
      return;
   }   
   widget.imgs[img2].onmousedown = function(){      
      moveArrowStepperUpDown(widget, this);      
      return;
   }
   widget.imgs[img4].onmousedown = function(){                  
      moveArrowStepperUpDown(widget, this);
      return;
   }            
   return;
}

/******************************************************
         INIZIALIZZAZIONE WIDGET SLIDER
******************************************************/
function graficPositionSlider(){
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showslider' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hideslider' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enableslider' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disableslider' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   document.getElementById("obj1wslider" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj1wslider" + (this.vid).toString(10)).style.left = "90px";
   document.getElementById("obj1wslider" + (this.vid).toString(10)).style.top = "80px";
   document.getElementById("obj2wslider" + (this.vid).toString(10)).style.position = "absolute";
   var xtbl = 90 + parseInt(widget.linkImg1.dimx);
   document.getElementById("obj2wslider" + (this.vid).toString(10)).style.left = (xtbl).toString(10) + 'px';
   var ytbl = 80 + parseInt(widget.linkImg1.dimy)/2;   
   document.getElementById("obj2wslider" + (this.vid).toString(10)).style.top = (ytbl).toString(10) + 'px';   
   document.getElementById("obj3wslider" + (this.vid).toString(10)).style.position = "absolute";
   var xtbl = 90 + parseInt(widget.linkImg1.dimx) + parseInt(widget.linkImg2.dimx);
   document.getElementById("obj3wslider" + (this.vid).toString(10)).style.left = (xtbl).toString(10) + 'px';
   var ytbl = 80 + parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2;
   document.getElementById("obj3wslider" + (this.vid).toString(10)).style.top = (ytbl).toString(10) + 'px';   
   document.getElementById("obj4wslider" + (this.vid).toString(10)).style.position = "absolute";   
   document.getElementById("obj4wslider" + (this.vid).toString(10)).style.left = (xtbl).toString(10) + 'px';
   document.getElementById("obj4wslider" + (this.vid).toString(10)).style.top = (ytbl).toString(10) + 'px';   
   
   //setto le variabili necessarie   
   var img1 = 'sliderarrow' + (this.vid).toString(10);   
   var img2 = 'sliderbarra' + (this.vid).toString(10);   
   var img3 = 'sliderstepup' + (this.vid).toString(10);   
   var hide = 'sliderstepdown' + (this.vid).toString(10);   
   widget.imgs = document.getElementsByTagName("img");   
   widget.coordXinizSlider = parseInt(widget.imgs[img1].style.left);   
   widget.coordYinizSlider = parseInt(widget.imgs[img1].style.top);   
   widget.coordXfinaleSlider = widget.coordXinizSlider;
   
   //E' consigliato usare la differenza tra l'immagine barra e quella in movimento se il valore massimo e' esattamente dato dalla differenza tra la barra e l'immagine in movimento
   widget.coordXfinaleSlider = widget.coordXinizSlider + parseInt(widget.linkImg3.dimx) - parseInt(widget.linkImg2.dimx); 
   widget.coordYfinaleSlider = parseInt(widget.vmax) + parseInt(widget.imgs[img1].style.top);     
   
   //alert(widget.coordYfinaleSlider); //200 se .top = 80 quindi vmax=120
   //alert(widget.coordYinizSlider); //80
   
   //adatto il valore corrente allo step e lo setto
   var tmpvcurrent = ((parseInt((widget.vcurrent)/widget.vstep))*widget.vstep);
   widget.lset(tmpvcurrent);
   
   //visualizzo il valore su val_act   
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = ((parseInt((widget.vcurrent)/widget.vstep))*widget.vstep);
   
   //posiziono gli oggetti in base al valore corrente
   widget.imgs[img1].style.top = (parseInt(widget.coordYinizSlider) + parseInt(widget.vcurrent)).toString(10) + 'px';
   widget.imgs[img3].style.top = (parseInt(widget.imgs[img1].style.top) + parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2).toString(10) + 'px';
   widget.imgs[hide].style.visibility = "hidden";   
   
   widget.imgs[img1].onmouseover = function(){      
      var l = parseInt(widget.imgs[img1].style.left);
      var t = parseInt(widget.imgs[img1].style.top);
      changeImg(hide, img3, widget);      
      widget.imgs[img3].style.left = (l+parseInt(widget.linkImg1.dimx) + parseInt(widget.linkImg2.dimx)).toString(10) + 'px';
      widget.imgs[img3].style.top = (t+(parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2)).toString(10) + 'px';
      widget.imgs[hide].style.left = (l+parseInt(widget.linkImg1.dimx) + parseInt(widget.linkImg2.dimx)).toString(10) + 'px';
      widget.imgs[hide].style.top = (t+(parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2)).toString(10) + 'px';
      return;
   }      
   widget.imgs[img1].onmousedown = function(){         
      grabSlider(this, widget);                  
      return;
   }   
   widget.imgs[img1].onmouseout = function(){            
      if (widget.dragobj == null){
         if (widget.imgs[hide].style.visibility == "visible"){            
            var l = parseInt(widget.imgs[img1].style.left);
            var t = parseInt(widget.imgs[img1].style.top);
            changeImg('sliderstepup' + (widget.vid).toString(10), 'sliderstepdown' + (widget.vid).toString(10), widget);      
            widget.imgs[img3].style.left = (l+parseInt(widget.linkImg1.dimx) + parseInt(widget.linkImg2.dimx)).toString(10) + 'px';
            widget.imgs[img3].style.top = (t+(parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2)).toString(10) + 'px';
         }
         return;
      }
   }         
   return;
}

/******************************************************
         INIZIALIZZAZIONE WIDGET KNOB
******************************************************/
function graficPositionKnob(){
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showknob' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hideknob' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enableknob' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disableknob' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   //setto i valori di coordinate iniziali
   widget.x0 = parseInt(arrayExtern[8].coordWidget.x0);
   widget.y0 = parseInt(arrayExtern[8].coordWidget.y0);
   widget.radiusKnob = parseInt(arrayExtern[8].coordWidget.radius);
   
   var x1 = Math.round(widget.x0 + widget.radiusKnob*Math.cos(135*0.017453293));        
     var y1 = Math.round(widget.y0 + widget.radiusKnob*Math.sin(135*0.017453293));   
     //con x0=240 y0=140 obj1wknob.left=100 obj1wknob.top=0 //in base a queste coordinate si puo' spostare il centro
   document.getElementById("obj1wknob" + (this.vid).toString(10)).style.position = "absolute";
   //document.getElementById("obj1wknob" + (this.vid).toString(10)).style.left = "140px";
   //document.getElementById("obj1wknob" + (this.vid).toString(10)).style.top = "70px";   
   document.getElementById("obj1wknob" + (this.vid).toString(10)).style.left = (parseInt(widget.x0) - parseInt(widget.linkImg1.dimx)/2).toString(10) + 'px'; 
   //l'immagine deve avere il centro di rotazione a 140px sotto (in y) rispetto al vertice in alto a sx
   document.getElementById("obj1wknob" + (this.vid).toString(10)).style.top = "70px";
   document.getElementById("obj2wknob" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj2wknob" + (this.vid).toString(10)).style.left = (x1-parseInt(widget.linkImg2.dimy)/2).toString(10) + 'px';
   document.getElementById("obj2wknob" + (this.vid).toString(10)).style.top = (y1-parseInt(widget.linkImg2.dimy)/2).toString(10) + 'px';   
   document.getElementById("obj3wknob" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("obj3wknob" + (this.vid).toString(10)).style.left = (x1-parseInt(widget.linkImg3.dimy)/2).toString(10) + 'px';
   document.getElementById("obj3wknob" + (this.vid).toString(10)).style.top = (y1-parseInt(widget.linkImg3.dimy)/2).toString(10) + 'px';   

   //setto le variabili necessarie   
   var img1 = 'knob' + (widget.vid).toString(10);   
   var img2 = 'buttonUp' + (widget.vid).toString(10);   
   var img3 = 'buttonDown' + (widget.vid).toString(10);      
   widget.imgs = document.getElementsByTagName("img");      
   widget.imgs[img1].style.visibility = "visible";      
   widget.imgs[img2].style.visibility = "visible";      
   widget.imgs[img3].style.visibility = "hidden";   
   
   //adatto il valore corrente allo step e lo setto
   var tmpvcurrent = ((parseInt((widget.vcurrent)/widget.vstep))*widget.vstep);
   widget.lset(tmpvcurrent);
   
   //visualizzo il valore su val_act   
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = ((parseInt((widget.vcurrent)/widget.vstep))*widget.vstep);
   
   //trovo il valore corrente
   if ( (widget.vcurrent > -1) && (widget.vcurrent < 45)){
      widget.angle1 = parseInt(widget.vcurrent) + 135;
      widget.angle2 = 45 - parseInt(widget.vcurrent);                        
   }
   else if ( (widget.vcurrent > 44) && (widget.vcurrent < 90)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = +45 - parseInt(widget.vcurrent);
   }
   else if ( (widget.vcurrent > 89) && (widget.vcurrent < 135)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = 45 - parseInt(widget.vcurrent);
   }
   else if ( (widget.vcurrent > 134) && (widget.vcurrent < 180)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = -180 + parseInt(widget.vcurrent) - 45;
   }
   else if ( (widget.vcurrent > 179) && (widget.vcurrent < 225)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = -180 + parseInt(widget.vcurrent) - 45;
   }
   else if ( (widget.vcurrent > 224) && (widget.vcurrent < 271)){
      widget.angle1 = parseInt(widget.vcurrent) - 225;
      widget.angle2 = parseInt(widget.vcurrent) - 225;
   }
   else{
      info = info + '<br/><span class="errorMSG">- Gestione knob: failed!</span>';
      document.getElementById('information').innerHTML = info;
      return false;
   }
   widget.angle1 = Math.round(widget.angle1/widget.vstep)*widget.vstep;
     widget.angle2 = Math.round(widget.angle2/widget.vstep)*widget.vstep;
   
   //utilizzo 2 angoli per posizionare l'oggetto               
     x1 = Math.round(widget.x0 + widget.radiusKnob*Math.cos(widget.angle1*0.017453293));        
     y1 = Math.round(widget.y0 + widget.radiusKnob*Math.sin(widget.angle2*0.017453293));            
     document.getElementById("obj2wknob" + (this.vid).toString(10)).style.position = "absolute";
     document.getElementById("obj2wknob" + (this.vid).toString(10)).style.left = (x1-(parseInt(widget.linkImg2.dimy)/2)).toString(10) + 'px';
     document.getElementById("obj2wknob" + (this.vid).toString(10)).style.top = (y1-(parseInt(widget.linkImg2.dimy)/2)).toString(10) + 'px';
     document.getElementById("obj3wknob" + (this.vid).toString(10)).style.position = "absolute";
     document.getElementById("obj3wknob" + (this.vid).toString(10)).style.left = (x1-(parseInt(widget.linkImg2.dimy)/2)).toString(10) + 'px';
     document.getElementById("obj3wknob" + (this.vid).toString(10)).style.top = (y1-(parseInt(widget.linkImg2.dimy)/2)).toString(10) + 'px';
   
   //ricavo il valore degli angoli sia per il vmin che per il vmax in modo da stabilire il range
     if ( (widget.vmax > -1) && (widget.vmax < 45)){
      widget.tmpmax.angle1 = parseInt(widget.vmax) + 135;
      widget.tmpmax.angle2 = 45 - parseInt(widget.vmax);                        
   }
   else if ( (widget.vmax > 44) && (widget.vmax < 90)){
      widget.tmpmax.angle1 = -parseInt(widget.vmax) + 225;
      widget.tmpmax.angle2 = +45 - parseInt(widget.vmax);
   }
   else if ( (widget.vmax > 89) && (widget.vmax < 135)){
      widget.tmpmax.angle1 = -parseInt(widget.vmax) + 225;
      widget.tmpmax.angle2 = 45 - parseInt(widget.vmax);
   }
   else if ( (widget.vmax > 134) && (widget.vmax < 180)){
      widget.tmpmax.angle1 = -parseInt(widget.vmax) + 225;
      widget.tmpmax.angle2 = -180 + parseInt(widget.vmax) - 45;
   }
   else if ( (widget.vmax > 179) && (widget.vmax < 225)){
      widget.tmpmax.angle1 = -parseInt(widget.vmax) + 225;
      widget.tmpmax.angle2 = -180 + parseInt(widget.vmax) - 45;
   }
   else if ( (widget.vmax > 224) && (widget.vmax < 271)){
      widget.tmpmax.angle1 = parseInt(widget.vmax) - 225;
      widget.tmpmax.angle2 = parseInt(widget.vmax) - 225;
   }
   else{
      info = info + '<br/><span class="errorMSG">- Gestione knob: failed!</span>';
      document.getElementById('information').innerHTML = info;
      return false;
   }
   if ( (widget.vmin > -1) && (widget.vmin < 45)){
      widget.tmpmin.angle1 = parseInt(widget.vmin) + 135;
      widget.tmpmin.angle2 = 45 - parseInt(widget.vmin);                        
   }
   else if ( (widget.vmin > 44) && (widget.vmin < 90)){
      widget.tmpmin.angle1 = -parseInt(widget.vmin) + 225;
      widget.tmpmin.angle2 = +45 - parseInt(widget.vmin);
   }
   else if ( (widget.vmin > 89) && (widget.vmin < 135)){
      widget.tmpmin.angle1 = -parseInt(widget.vmin) + 225;
      widget.tmpmin.angle2 = 45 - parseInt(widget.vmin);
   }
   else if ( (widget.vmin > 134) && (widget.vmin < 180)){
      widget.tmpmin.angle1 = -parseInt(widget.vmin) + 225;
      widget.tmpmin.angle2 = -180 + parseInt(widget.vmin) - 45;
   }
   else if ( (widget.vmin > 179) && (widget.vmin < 225)){
      widget.tmpmin.angle1 = -parseInt(widget.vmin) + 225;
      widget.tmpmin.angle2 = -180 + parseInt(widget.v) - 45;
   }
   else if ( (widget.vmin > 224) && (widget.vmin < 271)){
      widget.tmpmin.angle1 = parseInt(widget.vmin) - 225;
      widget.tmpmin.angle2 = parseInt(widget.vmin) - 225;
   }
   else{
      info = info + '<br/><span class="errorMSG">- Gestione knob: failed!</span>';
      document.getElementById('information').innerHTML = info;
      return false;
   }                      
   
   
   widget.imgs[img2].onmouseover = function(){
      changeImg(img3, img2, widget);            
      return;
   }   
   widget.imgs[img3].onmouseout = function(){      
      if (widget.dragobj == null){
         if (widget.imgs['buttonDown' + (widget.vid).toString(10)].style.visibility == "visible"){                        
            var l = parseInt(widget.imgs['buttonDown' + (widget.vid).toString(10)].style.left);
            var t = parseInt(widget.imgs['buttonDown' + (widget.vid).toString(10)].style.top);
            changeImg('buttonUp' + (widget.vid).toString(10), 'buttonDown' + (widget.vid).toString(10), widget);      
            widget.imgs['buttonUp' + (widget.vid).toString(10)].style.left = (l).toString(10) + 'px';
            widget.imgs['buttonUp' + (widget.vid).toString(10)].style.top = (t).toString(10) + 'px';
         }
         return;
      }            
   }         
   widget.imgs[img3].onmousedown = function(){         
      grabKnob(this, widget);      
      return;
   }
   return;
}

/******************************************************
         INIZIALIZZAZIONE WIDGET DIAL
******************************************************/
function graficPositionDial(){   
   var widget = this;
   //gestisco i bottoni per visualizzare/nascondere e abilitare/disabilitare i widget
   document.getElementById('showdial' + (widget.vid).toString(10)).onclick = function(){
      widget.lshow();
   }
   document.getElementById('hidedial' + (widget.vid).toString(10)).onclick = function(){
      widget.lhide();
   }
   document.getElementById('enabledial' + (widget.vid).toString(10)).onclick = function(){
      widget.lenabled();
   }
   document.getElementById('disabledial' + (widget.vid).toString(10)).onclick = function(){
      widget.ldisable();
   }
   
   //setto i valori di coordinate iniziali
   widget.x0 = parseInt(arrayExtern[9].coordWidget.x0);
   widget.y0 = parseInt(arrayExtern[9].coordWidget.y0);
   widget.radiusDial = parseInt(arrayExtern[9].coordWidget.radius);   
   
   document.getElementById("posdialcentrale" + (this.vid).toString(10)).style.position = "absolute";
   document.getElementById("posdialcentrale" + (this.vid).toString(10)).style.left = (parseInt(widget.x0) - parseInt(widget.linkImg1.dimx)/2 + 25).toString(10) + 'px';
   document.getElementById("posdialcentrale" + (this.vid).toString(10)).style.top = (parseInt(widget.y0) + parseInt(widget.linkImg1.dimy)/2 - 45).toString(10) + 'px';      
   document.getElementById("posdialcentrale" + (this.vid).toString(10)).style.zIndex = 99;
   document.getElementById("img1wdialcentrale" + (this.vid).toString(10)).style.position = "absolute";
   //con x0=325 y0=130
   //document.getElementById("img1wdialcentrale" + (this.vid).toString(10)).style.left = "200px";
   //document.getElementById("img1wdialcentrale" + (this.vid).toString(10)).style.top = "0px";   
   document.getElementById("img1wdialcentrale" + (this.vid).toString(10)).style.left = (parseInt(widget.x0) - parseInt(widget.linkImg1.dimx)/2).toString(10) + 'px';
   document.getElementById("img1wdialcentrale" + (this.vid).toString(10)).style.top = (parseInt(widget.y0) - parseInt(widget.linkImg1.dimy)/2).toString(10) + 'px';      
   document.getElementById("img8wdialcentrale" + (this.vid).toString(10)).style.position = "absolute";      
   document.getElementById("img8wdialcentrale" + (this.vid).toString(10)).style.left = (parseInt(widget.x0) - parseInt(widget.linkImg8.dimx)/2).toString(10) + 'px';
   document.getElementById("img8wdialcentrale" + (this.vid).toString(10)).style.top = (parseInt(widget.y0) - parseInt(widget.linkImg8.dimy)/2).toString(10) + 'px';   

   widget.imgs = document.getElementsByTagName("img");   
   var x1, y1;      
   widget.angle1 = 135;
     widget.angle2 = 45;
     widget.angle = 1; //serve per il nome
     
     //costruisco l'arco di circonferenza     
     for (widget.angle1 = 135; widget.angle1 < 180; widget.angle1++){
        x1 = Math.round(widget.x0 + widget.radiusDial*Math.cos(widget.angle1*0.017453293));        
        y1 = Math.round(widget.y0 + widget.radiusDial*Math.sin(widget.angle2*0.017453293));   
        widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
      widget.angle++;            
        widget.angle2--;   
     }
     for (widget.angle1 = 180; widget.angle1 > 135; widget.angle1--){
        x1 = Math.round(widget.x0 + widget.radiusDial*Math.cos(widget.angle1*0.017453293));        
        y1 = Math.round(widget.y0 + widget.radiusDial*Math.sin(widget.angle2*0.017453293));   
        widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
      widget.angle++;            
        widget.angle2--;   
     }
     for (widget.angle1 = 135; widget.angle1 > 90; widget.angle1--){
        x1 = Math.round(widget.x0 + widget.radiusDial*Math.cos(widget.angle1*0.017453293));        
        y1 = Math.round(widget.y0 + widget.radiusDial*Math.sin(widget.angle2*0.017453293));   
        widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
      widget.angle++;            
        widget.angle2--;   
     }
     for (widget.angle1 = 90; widget.angle1 > 45; widget.angle1--){
        x1 = Math.round(widget.x0 + widget.radiusDial*Math.cos(widget.angle1*0.017453293));        
        y1 = Math.round(widget.y0 + widget.radiusDial*Math.sin(widget.angle2*0.017453293));   
        widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
      widget.angle++;            
        widget.angle2++;   
        
     }
     for (widget.angle1 = 45; widget.angle1 > 0 ; widget.angle1--){
        x1 = Math.round(widget.x0 + widget.radiusDial*Math.cos(widget.angle1*0.017453293));        
        y1 = Math.round(widget.y0 + widget.radiusDial*Math.sin(widget.angle2*0.017453293));   
        widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
      widget.angle++;            
        widget.angle2++;   
     }
     for (widget.angle1 = 0; widget.angle1 < 45; widget.angle1++){
        x1 = Math.round(widget.x0 + widget.radiusDial*Math.cos(widget.angle1*0.017453293));        
        y1 = Math.round(widget.y0 + widget.radiusDial*Math.sin(widget.angle2*0.017453293));   
        widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
      widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
      widget.angle++;            
        widget.angle2++;   
     }
     
   widget.angle1 = 135;
     widget.angle2 = 45;
     var tmpradius;
     var count;
     //angle deve rimanere come'e' per pescare nuove immagini
     
     //posiziono le tacche lungo l'arco ogni 10 gradi
     for (widget.angle1 = 135; widget.angle1 < 180; widget.angle1 = widget.angle1 + 15){
        for (count = 3; count < 10; count = count + 3){           
           tmpradius = parseInt(widget.radiusDial) - 6 + parseInt(count);           
           x1 = Math.round(widget.x0 + tmpradius*Math.cos(widget.angle1*0.017453293));        
           y1 = Math.round(widget.y0 + tmpradius*Math.sin(widget.angle2*0.017453293));   
           widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
         widget.angle++;                    
        }
        widget.angle2 = widget.angle2 - 15;   
     }
     for (widget.angle1 = 180; widget.angle1 > 135;  widget.angle1 = widget.angle1 - 15){
        for (count = 3; count < 10; count = count + 3){           
           tmpradius = parseInt(widget.radiusDial) - 6  + parseInt(count);           
           x1 = Math.round(widget.x0 + tmpradius*Math.cos(widget.angle1*0.017453293));        
           y1 = Math.round(widget.y0 + tmpradius*Math.sin(widget.angle2*0.017453293));   
           widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
         widget.angle++;                    
        }
        widget.angle2 = widget.angle2 - 15;
     }
     for (widget.angle1 = 135; widget.angle1 > 90;  widget.angle1 = widget.angle1 - 15){
        for (count = 3; count < 10; count = count + 3){           
           tmpradius = parseInt(widget.radiusDial) - 6  + parseInt(count);           
           x1 = Math.round(widget.x0 + tmpradius*Math.cos(widget.angle1*0.017453293));        
           y1 = Math.round(widget.y0 + tmpradius*Math.sin(widget.angle2*0.017453293));   
           widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
         widget.angle++;                    
        }
        widget.angle2 = widget.angle2 - 15;
     }
     for (widget.angle1 = 90; widget.angle1 > 45; widget.angle1 = widget.angle1 - 15){
        for (count = 3; count < 10; count = count + 3){           
           tmpradius = parseInt(widget.radiusDial) - 6  + parseInt(count);           
           x1 = Math.round(widget.x0 + tmpradius*Math.cos(widget.angle1*0.017453293));        
           y1 = Math.round(widget.y0 + tmpradius*Math.sin(widget.angle2*0.017453293));   
           widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
         widget.angle++;                    
        }
        widget.angle2 = widget.angle2 + 15;
     }
     for (widget.angle1 = 45; widget.angle1 > 0 ;  widget.angle1 = widget.angle1 - 15){
        for (count = 3; count < 10; count = count + 3){           
           tmpradius = parseInt(widget.radiusDial) - 6  + parseInt(count);           
           x1 = Math.round(widget.x0 + tmpradius*Math.cos(widget.angle1*0.017453293));        
           y1 = Math.round(widget.y0 + tmpradius*Math.sin(widget.angle2*0.017453293));   
           widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
         widget.angle++;                    
        }
        widget.angle2 = widget.angle2 + 15;
     }
     for (widget.angle1 = 0; widget.angle1 < 46;  widget.angle1 = widget.angle1 + 15){
        for (count = 3; count < 10; count = count + 3){           
           tmpradius = parseInt(widget.radiusDial) - 6  + parseInt(count);           
           x1 = Math.round(widget.x0 + tmpradius*Math.cos(widget.angle1*0.017453293));        
           y1 = Math.round(widget.y0 + tmpradius*Math.sin(widget.angle2*0.017453293));   
           widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.position = "absolute";
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.left = (x1 - parseInt(widget.linkImg6.dimx)/2).toString(10) + 'px'; //x1
         widget.imgs[(widget.vid).toString(10) + 'pointBlack2x2'+widget.angle].style.top =  (y1 - parseInt(widget.linkImg6.dimy)/2).toString(10) + 'px'; //y1   
         widget.angle++;                    
        }
        widget.angle2 = widget.angle2 + 15;   
     }     
   //292 immagini per arco e tacche
   
   //trovo il valore corrente
   if ( (widget.vcurrent > -1) && (widget.vcurrent < 45)){
      widget.angle1 = parseInt(widget.vcurrent) + 135;
      widget.angle2 = 45 - parseInt(widget.vcurrent);                        
   }
   else if ( (widget.vcurrent > 44) && (widget.vcurrent < 90)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = +45 - parseInt(widget.vcurrent);
   }
   else if ( (widget.vcurrent > 89) && (widget.vcurrent < 135)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = 45 - parseInt(widget.vcurrent);
   }
   else if ( (widget.vcurrent > 134) && (widget.vcurrent < 180)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = -180 + parseInt(widget.vcurrent) - 45;
   }
   else if ( (widget.vcurrent > 179) && (widget.vcurrent < 225)){
      widget.angle1 = -parseInt(widget.vcurrent) + 225;
      widget.angle2 = -180 + parseInt(widget.vcurrent) - 45;
   }
   else if ( (widget.vcurrent > 224) && (widget.vcurrent < 271)){
      widget.angle1 = parseInt(widget.vcurrent) - 225;
      widget.angle2 = parseInt(widget.vcurrent) - 225;
   }
   else{
      info = info + '<br/><span class="errorMSG">- Gestione dial: failed!</span>';
      document.getElementById('information').innerHTML = info;
      return false;
   }
   widget.angle1 = Math.round(widget.angle1/widget.vstep)*widget.vstep;
     widget.angle2 = Math.round(widget.angle2/widget.vstep)*widget.vstep;
   
   //creo la lancetta posizionata sul valore corrente
   widget.indicator = 1;
   tmpradius = parseInt(widget.radiusDial)   
   for (count = tmpradius-8; count>5;  count--){
        x1 = Math.round(widget.x0 + count*Math.cos(parseInt(widget.angle1)*0.017453293));        
        y1 = Math.round(widget.y0 + count*Math.sin(parseInt(widget.angle2)*0.017453293));   
        widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.position = "absolute";
      widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.left = (x1 - parseInt(widget.linkImg4.dimx)/2).toString(10) + 'px'; //x1
      widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.top =  (y1 - parseInt(widget.linkImg4.dimy)/2).toString(10) + 'px'; //y1   
      widget.indicator++;              
     }     
     //visualizzo il valore su val_act
     document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
     //78 immagini per lancetta
     
     //gestisco levento su change della input box
     var inputBox = document.getElementById('wdialinp' + (widget.vid).toString(10));
     inputBox.style.fontWeight= "bold";
     inputBox.value = widget.vcurrent;
     var textSetwidget = ""; //testo di input
   inputBox.onkeyup = function(){   
      setDialCentraleMarker(this, widget);            
      //widget.lset(this.value);
        //visualizzo il valore su val_act
        //document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;           
      return;
   }
    return;
}

/*
   ===========================================================
   ||                                                       ||
   ||      --- METODI PER SETTARE VALORE CORRENTE ---       ||
   ||                                                       ||
   ===========================================================
*/

function setWidBox(actVal){
   this.vcurrent = actVal;   
}
function setWidRadio(actVal){
   this.vcurrent = actVal;   
}
function setWidLevel(actVal){
   this.vcurrent = actVal;
}
function setWidPopupmenu(actVal){
   this.vcurrent = actVal;   
}
function setWidSegment(actVal){
   this.vcurrent = actVal;   
}
function setWidStepper(actVal){
   this.vcurrent = actVal;   
}
function setWidSlider(actVal){
   this.vcurrent = actVal;   
}
function setWidKnob(actVal){
   this.vcurrent = actVal;   
}
function setWidDial(actVal){
   this.vcurrent = actVal;   
}

/*
   ===========================================================
   ||                                                       ||
   ||   --- METODI PER RESTITUIRE IL VALORE CORRENTE ---    ||
   ||                                                       ||
   ===========================================================
*/

function getWidBox(){
   return this.vcurrent;   
}

function getWidRadio(){
   return this.vcurrent;   
}

function getWidLevel(){
   return this.vcurrent;   
}

function getWidPopupmenu(){
   return this.vcurrent;   
}

function getWidSegment(){
   return this.vcurrent;   
}

function getWidStepper(){
   return this.vcurrent;   
}

function getWidSlider(){
   return this.vcurrent;   
}

function getWidKnob(){
   return this.vcurrent;   
}

function getWidDial(){
   return this.vcurrent;   
}

/*
   ===========================================================
   ||                                                       ||
   ||        --- METODI PER VISUALIZZARE I WIDGET ---       ||
   ||                                                       ||
   ===========================================================
*/

function showWidBox(){
   if (this.visible == false){
      document.getElementById("cbox" + (this.vid).toString(10)).style.visibility = "visible";      
      this.visible = true;   
   }
   return;   
}

function showWidRadio(){      
   if (this.visible == false){
      document.getElementById("cradio" + (this.vid).toString(10)).style.visibility = "visible";      
      this.visible = true;   
   }
   return;   
}

function showWidLevel(){      
   if (this.visible == false){
      document.getElementById("clevel" + (this.vid).toString(10)).style.visibility = "visible";   
      document.getElementById("obj1wlevel" + (this.vid).toString(10)).style.visibility = "visible";
      document.getElementById("obj2wlevel" + (this.vid).toString(10)).style.visibility = "visible";
      this.visible = true;   
   }
   return;   
}

function showWidPopupmenu(){      
   if (this.visible == false){
      document.getElementById("cpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";      
      document.getElementById("obj5wpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";   
      if ( this.menuPopUp == true){
         document.getElementById("menudiv" + (this.vid).toString(10)).style.visibility = "visible";   
         document.getElementById("obj1wpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";
         document.getElementById("obj3wpopupmenu" + (this.vid).toString(10)).style.visibility = "visible";   
      }   
      this.visible = true;         
   }
   return;      
}

function showWidSegment(){      
   if (this.visible == false){
      document.getElementById("csegment" + (this.vid).toString(10)).style.visibility = "visible";      
      this.visible = true;   
   }
   return;   
}

function showWidStepper(){      
   if (this.visible == false){
      document.getElementById("cstepper" + (this.vid).toString(10)).style.visibility = "visible";   
      document.getElementById("objstepper1" + (this.vid).toString(10)).style.visibility = "visible";      
      document.getElementById("objstepper3" + (this.vid).toString(10)).style.visibility = "visible";      
      this.visible = true;   
   }
   return;   
}

function showWidSlider(){      
   if (this.visible == false){
      document.getElementById("cslider" + (this.vid).toString(10)).style.visibility = "visible";   
      document.getElementById("obj1wslider" + (this.vid).toString(10)).style.visibility = "visible";      
      document.getElementById("obj2wslider" + (this.vid).toString(10)).style.visibility = "visible";      
      document.getElementById("obj3wslider" + (this.vid).toString(10)).style.visibility = "visible";      
      this.visible = true;   
   }
   return;      
}

function showWidKnob(){      
   if (this.visible == false){
      document.getElementById("cknob" + (this.vid).toString(10)).style.visibility = "visible";   
      document.getElementById("obj1wknob" + (this.vid).toString(10)).style.visibility = "visible";      
      document.getElementById("obj2wknob" + (this.vid).toString(10)).style.visibility = "visible";      
      this.visible = true;   
   }
   return;   
}

function showWidDial(){      
   if (this.visible == false){
      document.getElementById("cdial" + (this.vid).toString(10)).style.visibility = "visible";      
      this.visible = true;   
   }
   return;      
}

/*
   ===========================================================
   ||                                                       ||
   ||         --- METODI PER NASCONDERE I WIDGET ---        ||
   ||                                                       ||
   ===========================================================
*/

function hideWidBox(){      
   if (this.visible == true){      
      document.getElementById("cbox" + (this.vid).toString(10)).style.visibility = "hidden";         
      this.visible = false;   
   }
   return;   
}

function hideWidRadio(){         
   if (this.visible == true){      
      document.getElementById("cradio" + (this.vid).toString(10)).style.visibility = "hidden";      
      this.visible = false;   
   }
   return;   
}

function hideWidLevel(){         
   if (this.visible == true){      
      document.getElementById("clevel" + (this.vid).toString(10)).style.visibility = "hidden";   
      document.getElementById("obj1wlevel" + (this.vid).toString(10)).style.visibility = "hidden";
      document.getElementById("obj2wlevel" + (this.vid).toString(10)).style.visibility = "hidden";
      document.getElementById("obj3wlevel" + (this.vid).toString(10)).style.visibility = "hidden";      
      this.visible = false;   
   }
   return;   
}

function hideWidPopupmenu(){         
   if (this.visible == true){      
      document.getElementById("cpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj1wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj2wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj3wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj4wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj5wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";            
      if ( this.menuPopUp == true){
         document.getElementById("menudiv" + (this.vid).toString(10)).style.visibility = "hidden";                  
      }   
      this.visible = false;
         
   }
   return;   
}

function hideWidSegment(){         
   if (this.visible == true){      
      document.getElementById("csegment" + (this.vid).toString(10)).style.visibility = "hidden";      
      this.visible = false;   
   }
   return;   
}

function hideWidStepper(){         
   if (this.visible == true){      
      document.getElementById("cstepper" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("objstepper1" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("objstepper2" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("objstepper3" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("objstepper4" + (this.vid).toString(10)).style.visibility = "hidden";      
      this.visible = false;   
   }
   return;   
}

function hideWidSlider(){         
   if (this.visible == true){      
      document.getElementById("cslider" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj1wslider" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj2wslider" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj3wslider" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj4wslider" + (this.vid).toString(10)).style.visibility = "hidden";      
      this.visible = false;   
   }
   return;   
}

function hideWidKnob(){         
   if (this.visible == true){      
      document.getElementById("cknob" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj1wknob" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj2wknob" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj3wknob" + (this.vid).toString(10)).style.visibility = "hidden";      
      this.visible = false;   
   }
   return;   
}

function hideWidDial(){         
   if (this.visible == true){      
      document.getElementById("cdial" + (this.vid).toString(10)).style.visibility = "hidden";      
      this.visible = false;   
   }
   return;   
}

/*
   ===========================================================
   ||                                                       ||
   ||       --- METODI PER DISABILITARE I WIDGET ---        ||
   ||                                                       ||
   ===========================================================
*/

function disableWidBox(){
   if(this.enabled == true){      
      document.getElementById('wboxText' + (this.vid).toString(10)).disabled = true;
      this.enabled = false;   
   }
   return;
}

function disableWidRadio(){
   if(this.enabled == true){      
      document.getElementById((this.vid).toString(10) + 'radioid1').disabled = true;   
      document.getElementById((this.vid).toString(10) + 'radioid2').disabled = true;   
      this.enabled = false;   
   }
   return;
}

function disableWidLevel(){
   if(this.enabled == true){      
      document.getElementById('obj3wlevel' + (this.vid).toString(10)).onmousedown = falsefunc;   
      this.enabled = false;   
   }
   return;
}

function disableWidPopupmenu(){
   if(this.enabled == true){         
      document.getElementById('obj5wpopupmenu' + (this.vid).toString(10)).oncontextmenu = falsefunc;
      document.getElementById("obj1wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj2wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj3wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";      
      document.getElementById("obj4wpopupmenu" + (this.vid).toString(10)).style.visibility = "hidden";            
      if ( this.menuPopUp == true){
         document.getElementById("menudiv" + (this.vid).toString(10)).style.visibility = "hidden";                  
      }   
      this.enabled = false;   
   }
   return;
}

function disableWidSegment(){
   var widget = this;
   if(this.enabled == true){
      var i = 0;
      for(i=1; i < widget.vopt.length; i++){      
         document.getElementById((widget.vid).toString(10) + 'opt' + i).onmouseover = falsefunc;         
         document.getElementById((widget.vid).toString(10) + 'opt' + i).onmouseout = falsefunc;   
         document.getElementById((widget.vid).toString(10) + 'opt' + i).onclick = falsefunc;         
      }      
      this.enabled = false;   
   }
   return;
}

function disableWidStepper(){
   if(this.enabled == true){   
      document.getElementById('objstepper1' + (this.vid).toString(10)).onmouseover = falsefunc;
      document.getElementById('objstepper3' + (this.vid).toString(10)).onmouseover = falsefunc;
      document.getElementById('objstepper2' + (this.vid).toString(10)).onmouseout = falsefunc;
      document.getElementById('objstepper4' + (this.vid).toString(10)).onmouseout = falsefunc;      
      document.getElementById('objstepper2' + (this.vid).toString(10)).onmousedown = falsefunc;      
      document.getElementById('objstepper4' + (this.vid).toString(10)).onmousedown = falsefunc;   
      this.enabled = false;   
   }
   return;
}

function disableWidSlider(){
   if(this.enabled == true){   
      document.getElementById('obj1wslider' + (this.vid).toString(10)).onmousedown = falsefunc;      
      this.enabled = false;   
   }
   return;
}

function disableWidKnob(){
   if(this.enabled == true){   
      document.getElementById('obj3wknob' + (this.vid).toString(10)).onmousedown = falsefunc;         
      this.enabled = false;   
   }
   return;
}

function disableWidDial(){
   if(this.enabled == true){   
      document.getElementById('wdialinp' + (this.vid).toString(10)).disabled = true;
      this.enabled = false;   
   }
   return;
}

/*
   ===========================================================
   ||                                                       ||
   ||         --- METODI PER ABILITARE I WIDGET ---         ||
   ||                                                       ||
   ===========================================================
*/

function enableWidBox(){
   if(this.enabled == false){
      document.getElementById('wboxText' + (this.vid).toString(10)).disabled = false;
      this.enabled = true;
   }
   return;
}

function enableWidRadio(){
   if(this.enabled == false){
      document.getElementById((this.vid).toString(10) + 'radioid1').disabled = false;   
      document.getElementById((this.vid).toString(10) + 'radioid2').disabled = false;   
      this.enabled = true;
   }
   return;
}

function enableWidLevel(){   
   if(this.enabled == false){
      var widget = this;
      document.getElementById('obj3wlevel' + (widget.vid).toString(10)).onmousedown  = function(){      
         grabLevel(this, widget);      
      }            
      this.enabled = true;
   }
   return;
}

function enableWidPopupmenu(){
   if(this.enabled == false){
      var widget = this;
      document.getElementById('obj5wpopupmenu' + (widget.vid).toString(10)).oncontextmenu = function(){
         //se il menu e' chiuso lo apro
         if (widget.menuPopUp == false){
            document.getElementById('obj1wpopupmenu' + (widget.vid).toString(10)).style.visibility = "visible";
            document.getElementById('obj2wpopupmenu' + (widget.vid).toString(10)).style.visibility = "hidden";      
            document.getElementById('obj3wpopupmenu' + (widget.vid).toString(10)).style.visibility = "visible";   
            document.getElementById('obj4wpopupmenu' + (widget.vid).toString(10)).style.visibility = "hidden";   
            openMenuPopUp(widget, this);               
         }
         else{ //menu' gia aperto e lo chiudo
            document.getElementById('obj1wpopupmenu' + (widget.vid).toString(10)).style.visibility = "hidden";      
            document.getElementById('obj2wpopupmenu' + (widget.vid).toString(10)).style.visibility = "hidden";      
            document.getElementById('obj3wpopupmenu' + (widget.vid).toString(10)).style.visibility = "hidden";      
            document.getElementById('obj4wpopupmenu' + (widget.vid).toString(10)).style.visibility = "hidden";   
            openMenuPopUp(widget, this);               
         }      
      }   
      this.enabled = true;
   }
   return;
}

function enableWidSegment(){
   var widget = this;
   if(this.enabled == false){
      var i = 0;
      for(i=1; i < widget.vopt.length; i++){      
         changeStyleMenu(widget, (widget.vid).toString(10) + 'opt' + i, '#FFCC00', widget.styleWidget.backgroundTD, 'outset 7px #3300CC', 'inset 7px #3300CC');                  
      }      
      this.enabled = true;
   }   
   return;
}

function enableWidStepper(){   
   var widget = this;
   if(this.enabled == false){      
      document.getElementById('objstepper1' + (widget.vid).toString(10)).onmouseover = function(){            
         changeImg('objstepper2' + (widget.vid).toString(10), 'objstepper1' + (widget.vid).toString(10), widget);      
         return;
      }         
      document.getElementById('objstepper3' + (widget.vid).toString(10)).onmouseover = function(){
         changeImg('objstepper4' + (widget.vid).toString(10), 'objstepper3' + (widget.vid).toString(10), widget);         
         return;
      }   
      document.getElementById('objstepper2' + (widget.vid).toString(10)).onmouseout = function(){
         changeImg('objstepper1' + (widget.vid).toString(10), 'objstepper2' + (widget.vid).toString(10), widget);         
         return;
      }         
      document.getElementById('objstepper4' + (widget.vid).toString(10)).onmouseout = function(){
         changeImg('objstepper3' + (widget.vid).toString(10), 'objstepper4' + (widget.vid).toString(10), widget);         
         return;
      }   
      document.getElementById('objstepper2' + (widget.vid).toString(10)).onmousedown = function(){      
         moveArrowStepperUpDown(widget, this);      
         return;
      }
      document.getElementById('objstepper4' + (widget.vid).toString(10)).onmousedown = function(){                  
         moveArrowStepperUpDown(widget, this);
         return;
      }      
      this.enabled = true;
   }
   return;
}

function enableWidSlider(){
   var widget = this;
   if(this.enabled == false){
      document.getElementById('obj1wslider' + (this.vid).toString(10)).onmousedown = function(){      
         grabSlider(this, widget);         
      }
      this.enabled = true;
   }
   return;
}

function enableWidKnob(){
   var widget = this;
   if(this.enabled == false){
      document.getElementById('obj3wknob' + (this.vid).toString(10)).onmousedown = function(){         
         grabKnob(this, widget);      
      }      
      this.enabled = true;
   }
   return;
}

function enableWidDial(){
   if(this.enabled == false){
      document.getElementById('wdialinp' + (this.vid).toString(10)).disabled = false;
      this.enabled = true;
   }
   return;
}

/*
   ===========================================================
   ||                                                       ||
   ||              --- COSTRUTTORI WIDGET ---               ||
   ||                                                       ||
   ===========================================================
*/

/******************************************************
         COSTRUTTORE WIDGET BOX
******************************************************/
function wbox(vmin, vmax, vstep, vcurrent, vid, vclass, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wbox"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   //Definizioni dei metodi
   this.lpos = graficPositionBox; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidBox; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidBox; //restituisce il valore attuale del widget
   this.lshow = showWidBox; //visualizza il widget sul form in cui compare
   this.lhide = hideWidBox; //nasconde il widget
   this.ldisable = disableWidBox; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidBox; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET RADIO
******************************************************/
function wradio(vmin, vmax, vstep, vcurrent, vid, vclass, opt, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wradio"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.vopt = opt;
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   //Definizioni dei metodi
   this.lpos = graficPositionRadio; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidRadio; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidRadio; //restituisce il valore attuale del widget
   this.lshow = showWidRadio; //visualizza il widget sul form in cui compare
   this.lhide = hideWidRadio; //nasconde il widget
   this.ldisable = disableWidRadio; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidRadio; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET LEVEL
******************************************************/
function wlevel(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wlevel"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.dragobj = null; // Oggetto da spostare
   this.imgs; // Array delle immagini sulla pagina riferite a questo widget
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   
   // Sono le coordinate dell'oggetto prima di iniziare a spostarlo
   this.coordXinizLevel = 0;
   this.coordYinizLevel = 0;
   this.coordXfinaleLevel = 0;
   this.coordYfinaleLevel = 0;
   
   // Cordinata x,y del mouse - rimane memorizzato fino a che dopo
   // aver rilasciato il mouse non riclikko sull'oggetto - utile perche' mantiene l'ultima posizione del mouse sull'oggetto
   this.grabx = 0;
   this.graby = 0;

   // Cordinata x,y del verdice in alto a sx dell'elemento che sto spostando - rimane memorizzato fino a che dopo
   // aver rilasciato il mouse non riclikko sull'oggetto - utile perche' mantiene l'ultima posizione 
   this.orix = 0;
   this.oriy = 0;

   // Cordinata x,y del verdice in alto a sx dell'elemento che sto spostando in tempo reale - se l'oggetto si blocca
   // la coordinata continua a fornire le coordinate - quando riclikko sull'oggetto le coordinate vengono aggiornate
   this.elex = 0;
   this.eley = 0;
   
   //Oggetti immagine
   this.linkImg1 = new Object();
   this.linkImg2 = new Object();
   this.linkImg3 = new Object();   
   this.linkImg1.url = linkImg1.url;   
   this.linkImg1.dimx = linkImg1.dimx;
   this.linkImg1.dimy = linkImg1.dimy;
   this.linkImg2.url = linkImg2.url;
   this.linkImg2.dimx = linkImg2.dimx;
   this.linkImg2.dimy = linkImg2.dimy;
   this.linkImg3.url = linkImg3.url;
   this.linkImg3.dimx = linkImg3.dimx;
   this.linkImg3.dimy = linkImg3.dimy;   
   
   //Definizioni dei metodi
   this.lpos = graficPositionLevel; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidLevel; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidLevel; //restituisce il valore attuale del widget
   this.lshow = showWidLevel; //visualizza il widget sul form in cui compare
   this.lhide = hideWidLevel; //nasconde il widget
   this.ldisable = disableWidLevel; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidLevel; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET POPUPMENU
******************************************************/
function wpopupmenu(vmin, vmax, vstep, vcurrent, vid, vclass, opt, linkImg1, linkImg2, linkImg3, linkImg4, linkImg5, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wpopupmenu"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.vopt = opt; //contiene le opzioni del menu
   this.menuPopUp = false; //indica se il menu sia aperto o meno..inizializzato a false(chiuso)
   this.lengthMenu = 0; //definisce la lunghezza del menu   
   this.imgs; // Array delle immagini sulla pagina riferite a questo widget
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   
   //Oggetti immagine
   this.linkImg1 = new Object();
   this.linkImg2 = new Object();
   this.linkImg3 = new Object();   
   this.linkImg4 = new Object();   
   this.linkImg5 = new Object();   
   this.linkImg1.url = linkImg1.url;   
   this.linkImg1.dimx = linkImg1.dimx;
   this.linkImg1.dimy = linkImg1.dimy;
   this.linkImg2.url = linkImg2.url;
   this.linkImg2.dimx = linkImg2.dimx;
   this.linkImg2.dimy = linkImg2.dimy;
   this.linkImg3.url = linkImg3.url;
   this.linkImg3.dimx = linkImg3.dimx;
   this.linkImg3.dimy = linkImg3.dimy;   
   this.linkImg4.url = linkImg4.url;
   this.linkImg4.dimx = linkImg4.dimx;
   this.linkImg4.dimy = linkImg4.dimy;   
   this.linkImg5.url = linkImg5.url;
   this.linkImg5.dimx = linkImg5.dimx;
   this.linkImg5.dimy = linkImg5.dimy;   
   
   //Definizioni dei metodi
   this.lpos = graficPositionPopupmenu; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidPopupmenu; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidPopupmenu; //restituisce il valore attuale del widget
   this.lshow = showWidPopupmenu; //visualizza il widget sul form in cui compare
   this.lhide = hideWidPopupmenu; //nasconde il widget
   this.ldisable = disableWidPopupmenu; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidPopupmenu; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET SEGMENT
******************************************************/
function wsegment(vmin, vmax, vstep, vcurrent, vid, vclass, opt, styleWidget, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wsegmenti"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.vopt = opt;
   this.lengthSegmenti = 0; //definisce la lunghezza di Segmenti   
   this.imgs; // Array delle immagini sulla pagina riferite a questo widget
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true   
   
   //Oggetto per lo stile
   this.styleWidget = new Object();   
   this.styleWidget.backgroundTBL = styleWidget.backgroundTBL;   
   this.styleWidget.borderColorTBL = styleWidget.borderColorTBL;   
   this.styleWidget.borderWidthTBL = styleWidget.borderWidthTBL;   
   this.styleWidget.borderStyleTBL = styleWidget.borderStyleTBL;   
   this.styleWidget.cursorTBL = styleWidget.cursorTBL;   
   this.styleWidget.textAlignTD = styleWidget.textAlignTD;   
   this.styleWidget.backgroundTD = styleWidget.backgroundTD;   
   this.styleWidget.fontFamilyTD = styleWidget.fontFamilyTD;   
   this.styleWidget.fontSizeTD = styleWidget.fontSizeTD;   
   this.styleWidget.colorTD = styleWidget.colorTD;         
   
   //Definizioni dei metodi
   this.lpos = graficPositionSegment; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidSegment; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidSegment; //restituisce il valore attuale del widget
   this.lshow = showWidSegment; //visualizza il widget sul form in cui compare
   this.lhide = hideWidSegment; //nasconde il widget
   this.ldisable = disableWidSegment; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidSegment; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET STEPPER
******************************************************/
function wstepper(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, linkImg4, styleWidget, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wstepper"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.linkImg1 = linkImg1; //string - link immagine 1
   this.linkImg2 = linkImg2; //string - link immagine 2   
   this.linkImg3 = linkImg3; //string - link immagine 3
   this.linkImg4 = linkImg4; //string - link immagine 4   
   this.imgs; // Array delle immagini sulla pagina riferite a questo widget
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   
   //Oggetto per lo stile
   this.styleWidget = new Object();   
   this.styleWidget.backgroundTBL = styleWidget.backgroundTBL;   
   this.styleWidget.borderColorTBL = styleWidget.borderColorTBL;   
   this.styleWidget.borderWidthTBL = styleWidget.borderWidthTBL;   
   this.styleWidget.borderStyleTBL = styleWidget.borderStyleTBL;   
   this.styleWidget.cursorTBL = styleWidget.cursorTBL;   
   this.styleWidget.textAlignTD = styleWidget.textAlignTD;   
   this.styleWidget.backgroundTD = styleWidget.backgroundTD;   
   this.styleWidget.fontFamilyTD = styleWidget.fontFamilyTD;   
   this.styleWidget.fontSizeTD = styleWidget.fontSizeTD;   
   this.styleWidget.colorTD = styleWidget.colorTD;         
   
   //Definizioni dei metodi
   this.lpos = graficPositionStepper; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidStepper; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidStepper; //restituisce il valore attuale del widget
   this.lshow = showWidStepper; //visualizza il widget sul form in cui compare
   this.lhide = hideWidStepper; //nasconde il widget
   this.ldisable = disableWidStepper; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidStepper; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET SLIDER
******************************************************/
function wslider(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, linkImg4, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wslider"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.dragobj = null; // Oggetto da spostare
   this.imgs; // Array delle immagini sulla pagina riferite a questo widget
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   
   // Sono le coordinate dell'oggetto prima di iniziare a spostarlo
   // Vengono settate con la funzione inizializza per ogni widget
   // Vengono cmq settate in parte con la funzione di inizializzazione (e.g. inizializzaL1)
   this.coordXinizSlider = 90;
   this.coordYinizSlider = 00;
   this.coordXfinaleSlider = 90;
   this.coordYfinaleSlider = 300;
         
   // Cordinata x,y del mouse - rimane memorizzato fino a che dopo
   // aver rilasciato il mouse non riclikko sull'oggetto - utile perche' mantiene l'ultima posizione del mouse sull'oggetto
   this.grabx = 0;
   this.graby = 0;

   // Cordinata x,y del verdice in alto a sx dell'elemento che sto spostando - rimane memorizzato fino a che dopo
   // aver rilasciato il mouse non riclikko sull'oggetto - utile perche' mantiene l'ultima posizione 
   this.orix = 0;
   this.oriy = 0;

   // Cordinata x,y del verdice in alto a sx dell'elemento che sto spostando in tempo reale - se l'oggetto si blocca
   // la coordinata continua a fornire le coordinate - quando riclikko sull'oggetto le coordinate vengono aggiornate
   this.elex = 0;
   this.eley = 0;
   
   //Oggetti per le immagini
   this.linkImg1 = new Object();
   this.linkImg2 = new Object();
   this.linkImg3 = new Object();   
   this.linkImg4 = new Object();   
   this.linkImg1.url = linkImg1.url;   
   this.linkImg1.dimx = linkImg1.dimx;
   this.linkImg1.dimy = linkImg1.dimy;
   this.linkImg2.url = linkImg2.url;
   this.linkImg2.dimx = linkImg2.dimx;
   this.linkImg2.dimy = linkImg2.dimy;
   this.linkImg3.url = linkImg3.url;
   this.linkImg3.dimx = linkImg3.dimx;
   this.linkImg3.dimy = linkImg3.dimy;   
   this.linkImg4.url = linkImg4.url;
   this.linkImg4.dimx = linkImg4.dimx;
   this.linkImg4.dimy = linkImg4.dimy;
      
   //Definizioni dei metodi
   this.lpos = graficPositionSlider; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidSlider; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidSlider; //restituisce il valore attuale del widget
   this.lshow = showWidSlider; //visualizza il widget sul form in cui compare
   this.lhide = hideWidSlider; //nasconde il widget
   this.ldisable = disableWidSlider; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidSlider; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET KNOB
******************************************************/
function wknob(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wknob"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.dragobj = null; // Oggetto da spostare
   this.imgs; // Array delle immagini sulla pagina riferite a questo widget
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   
   // Sono le coordinate dell'oggetto prima di iniziare a spostarlo
   // Vengono settate con la funzione inizializza per ogni widget
   // Vengono cmq settate in parte con la funzione di inizializzazione (e.g. inizializzaL1)
   this.coordXinizKnob = 0;
   this.coordYinizKnob = 0;
   
   //centro del knob e altre varibili
   this.x0 = 0;//240;
   this.y0 = 0;//140;
   this.radiusKnob = 0;//60;
   this.angle1 = 0; //angolo in gradi
   this.angle2 = 0; //angolo in gradi
   this.angleToDisplay = 0; //angolo in gradi da utilizzare come valore corrente
   this.radiusEleKnob; //distanza (su mousemove) del mouse dal centro del knob   
   this.tmpmax = new Object(); //contiene angle1 e angle2 ed esprime il valore massimo in base alle impostazioni da xform
   this.tmpmin = new Object(); //contiene angle1 e angle2 ed esprime il valore minimo in base alle impostazioni da xform
      
   // Cordinata x,y del mouse - rimane memorizzato fino a che dopo
   // aver rilasciato il mouse non riclikko sull'oggetto - utile perche' mantiene l'ultima posizione del mouse sull'oggetto
   this.grabx = 0;
   this.graby = 0;

   // Cordinata x,y del verdice in alto a sx dell'elemento che sto spostando - rimane memorizzato fino a che dopo
   // aver rilasciato il mouse non riclikko sull'oggetto - utile perche' mantiene l'ultima posizione 
   this.orix = 0;
   this.oriy = 0;

   // Cordinata x,y del verdice in alto a sx dell'elemento che sto spostando in tempo reale - se l'oggetto si blocca
   // la coordinata continua a fornire le coordinate - quando riclikko sull'oggetto le coordinate vengono aggiornate
   this.elex = 0;
   this.eley = 0;
   
   //Oggetti per le immagini
   this.linkImg1 = new Object();
   this.linkImg2 = new Object();
   this.linkImg3 = new Object();   
   this.linkImg1.url = linkImg1.url;   
   this.linkImg1.dimx = linkImg1.dimx;
   this.linkImg1.dimy = linkImg1.dimy;
   this.linkImg2.url = linkImg2.url;
   this.linkImg2.dimx = linkImg2.dimx;
   this.linkImg2.dimy = linkImg2.dimy;
   this.linkImg3.url = linkImg3.url;
   this.linkImg3.dimx = linkImg3.dimx;
   this.linkImg3.dimy = linkImg3.dimy;   
   
   //Definizioni dei metodi
   this.lpos = graficPositionKnob; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidKnob; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidKnob; //restituisce il valore attuale del widget
   this.lshow = showWidKnob; //visualizza il widget sul form in cui compare
   this.lhide = hideWidKnob; //nasconde il widget
   this.ldisable = disableWidKnob; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidKnob; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/******************************************************
         COSTRUTTORE WIDGET DIAL
******************************************************/
function wdial(vmin, vmax, vstep, vcurrent, vid, vclass, linkImg1, linkImg2, linkImg3, linkImg4, linkImg5, linkImg6, linkImg7, linkImg8, enabled, visible){
   checkargs(arguments); //controllo che il numero di argomenti sia corretto - la funzione e' presente in generic-funcrion.js
   this.ident = "wdialcentrale"; //identifica l'oggetto (!!! non ancora gestito !!!)
   this.vmin = vmin; //int - valore minimo di range
   this.vmax = vmax; //int - valore massimo di range
   this.vstep = vstep; //int - step tra il valore massimo e minimo
   this.vcurrent = vcurrent; //int - valore corrente (iniziale)
   this.vid = vid; //valore dell'id
   this.vclass = vclass; //valore della classe
   this.imgs; // Array delle immagini sulla pagina riferite a questo widget
   this.enabled = enabled; //boolean - abilita o disabilita il costruttore con true o false
   this.visible = visible; //fornisce informazioni sul fatto che il widget sia o meno visible, in fase di creazione e' settato a true
   
   // Sono le coordinate dell'oggetto prima di iniziare a spostarlo
   // Vengono settate con la funzione inizializza per ogni widget
   // Vengono cmq settate in parte con la funzione di inizializzazione
   // Le variabili non definite e messe come note sono gia state definite per altri widget e sono gia esistenti
   this.coordXinizDial = 0;
   this.coordYinizDial = 0;
   
   //centro del Dial e altre variabili
   this.x0 = 0;
   this.y0 = 0;
   this.radiusDial = 0;
   this.angle1 = 0; //angolo in gradi
   this.angle2 = 0; //angolo in gradi
   this.angleToDisplay = 0; //angolo in gradi da utilizzare come valore corrente
   this.radiusEleDialcentrale; //distanza degli indicatori dal centro   
   this.angle = 1; //serve per il nome
   this.indicator = 1;
   
   //Oggetti per le immagini
   this.linkImg1 = new Object();
   this.linkImg2 = new Object();
   this.linkImg3 = new Object();   
   this.linkImg4 = new Object();   
   this.linkImg5 = new Object();   
   this.linkImg6 = new Object();   
   this.linkImg7 = new Object();   
   this.linkImg8 = new Object();   
   this.linkImg1.url = linkImg1.url;   
   this.linkImg1.dimx = linkImg1.dimx;
   this.linkImg1.dimy = linkImg1.dimy;
   this.linkImg2.url = linkImg2.url;
   this.linkImg2.dimx = linkImg2.dimx;
   this.linkImg2.dimy = linkImg2.dimy;
   this.linkImg3.url = linkImg3.url;
   this.linkImg3.dimx = linkImg3.dimx;
   this.linkImg3.dimy = linkImg3.dimy;   
   this.linkImg4.url = linkImg4.url;
   this.linkImg4.dimx = linkImg4.dimx;
   this.linkImg4.dimy = linkImg4.dimy;   
   this.linkImg5.url = linkImg5.url;
   this.linkImg5.dimx = linkImg5.dimx;
   this.linkImg5.dimy = linkImg5.dimy;   
   this.linkImg6.url = linkImg6.url;
   this.linkImg6.dimx = linkImg6.dimx;
   this.linkImg6.dimy = linkImg6.dimy;   
   this.linkImg7.url = linkImg7.url;
   this.linkImg7.dimx = linkImg7.dimx;
   this.linkImg7.dimy = linkImg7.dimy;   
   this.linkImg8.url = linkImg8.url;
   this.linkImg8.dimx = linkImg8.dimx;
   this.linkImg8.dimy = linkImg8.dimy;   
      
   //Definizioni dei metodi
   this.lpos = graficPositionDial; //posiziona gli oggetti/vari dopo la creazione da XSLT
   this.lset = setWidDial; //setta il valore del widget a x (verificando sia lecito)
   this.lget = getWidDial; //restituisce il valore attuale del widget
   this.lshow = showWidDial; //visualizza il widget sul form in cui compare
   this.lhide = hideWidDial; //nasconde il widget
   this.ldisable = disableWidDial; //rende il widget non interattivo (R+!W) (!!! non ancora gestito !!!)
   this.lenabled = enableWidDial; //rende il widget interattivo (R+W) (!!! non ancora gestito !!!)
}

/*
   ===========================================================
   ||                                                       ||
   ||         --- GESTIONE GRAFICA WIDGET LEVEL ---         ||
   ||                                                       ||
   ===========================================================
*/

//Da richiamre onmousedown sull'oggetto da spostare
function grabLevel(context, widget){
   //controllo che lo step sia valido, in caso contrario termino
   if ((parseInt(widget.vmax / widget.vstep) != (widget.vmax / widget.vstep)) //widget.vmax multiplo stepWid
         ||((widget.vstep < 5) || (widget.vstep > (widget.vmax/2))) //compreso tra 5 e widget.vmax/2
         ||(parseInt(widget.vstep / 5) != (widget.vstep / 5))){ //multiplo di 5
      updateTableInfo(widget);
      
      //informo il log di un errore sullo step
      info = info + '<br/><span class="errorMSG">- Settaggio step level: failed!</span>';
      document.getElementById('information').innerHTML = info;
      
      mouselocation();
      return false;
   }
   document.onmousedown = falsefunc;
     widget.dragobj = context;
     widget.dragobj.style.zIndex = 10; // sposta l'oggetto in primo piano     
     document.onmousemove = function(eventmouse){
        if (widget.dragobj){      
            widget.elex = widget.orix + (mousex-widget.grabx);
          widget.eley = widget.oriy + (mousey-widget.graby);       
          widget.dragobj.style.position = "absolute";       
          //adatto la posizione dell'oggetto in movimento allo step
          //La funzione Javascript toString riceve un numero e lo converte nella stringa corrispondente in base 10 (in questo caso)  
          // trasforma d esempio 21.67 in 21 o AS32 in 32        
          if ((((parseInt((widget.elex-widget.coordXinizLevel)/widget.vstep))*widget.vstep)+widget.coordXinizLevel) <  (widget.coordXinizLevel + parseInt(widget.vmin))){
             widget.dragobj.style.left = (widget.coordXinizLevel + parseInt(widget.vmin)).toString(10) + 'px';          
          }
         else if ((((parseInt((widget.elex-widget.coordXinizLevel)/widget.vstep))*widget.vstep)+widget.coordXinizLevel) >  widget.coordXfinaleLevel){
              widget.dragobj.style.left = (widget.coordXfinaleLevel).toString(10) + 'px';           
           }
           else{
              widget.dragobj.style.left = (((parseInt((widget.elex-widget.coordXinizLevel)/widget.vstep))*widget.vstep)+widget.coordXinizLevel).toString(10) + 'px';           
           }
           
           widget.lset(parseInt(widget.dragobj.style.left) - widget.coordXinizLevel);            
           //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
            
           updateTableInfo(widget);   
         mouselocation(eventmouse);
           return false; // in IE previene "cascading of events"
      }
     }
     
     //Drop
     document.onmouseup = function(){
        if (widget.imgs['L1buttonMove' + (widget.vid).toString(10)].style.visibility == "visible"){      
         var l = widget.imgs['L1buttonMove' + (widget.vid).toString(10)].style.left;
         var t = widget.imgs['L1buttonMove' + (widget.vid).toString(10)].style.top;
         changeImg('L1buttonFix' + (widget.vid).toString(10), 'L1buttonMove' + (widget.vid).toString(10), widget);      
         widget.imgs['L1buttonFix' + (widget.vid).toString(10)].style.left = l;
         widget.imgs['L1buttonFix' + (widget.vid).toString(10)].style.top = t;
      }
      if (widget.dragobj){
         widget.dragobj.style.zIndex = 0;
          widget.dragobj = null;
        }
        document.onmousemove = mouselocation;          
        document.onmouseup = null;
        document.onmousedown = null; // riattiva la selezione di eventuali testi
     }
     widget.grabx = mousex;
     widget.graby = mousey;
     widget.elex = widget.orix = widget.dragobj.offsetLeft; //cordinata x del verdice in alto a sx dell'elemento che sto spostando 90,80 to 510,80
     widget.eley = widget.oriy = widget.dragobj.offsetTop; //cordinata y del verdice in alto a sx dell'elemento che sto spostando 90,80 to 510,80
     updateTableInfo(widget);
     mouselocation();
}

/*
   ===========================================================
   ||                                                       ||
   ||       --- GESTIONE GRAFICA WIDGET POPUPMENU ---       ||
   ||                                                       ||
   ===========================================================
*/

//Mi posiziono sul menu' a seconda della freccia selezionata
function moveOnMenuPopUp(widget, cmd){   
   var indSu, IndGiu;
   var actIndex =0; //indice attuale
   var i=0;
   //rilevo la posizione nel menu' in cui mi trovo
   for ( i=1 ; i<widget.lengthMenu; i++){   
      if (document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (i).toString(10)).firstChild.data == widget.vcurrent){
         actIndex = i;   
      }
   }   
   if (cmd.name == "popupmenuUpPress" + (widget.vid).toString(10)){//freccia su
      if ( actIndex == 1){ //mi trovo sulla prima voce e devo posizionarmi sull'ultima
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (actIndex).toString(10)).style.color = "black";      
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (parseInt(widget.lengthMenu)-1).toString(10)).style.color = "blue";      
         actIndex = parseInt(widget.lengthMenu)-1;
         //setto il valore corrente
         widget.lset(document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (parseInt(widget.lengthMenu)-1).toString(10)).firstChild.data);
         //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
      }
      else{ //devo salire e non mi trovo sulla prima voce   
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (actIndex).toString(10)).style.color = "black";            
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (parseInt(actIndex)-1).toString(10)).style.color = "blue";      
         actIndex = parseInt(actIndex)-1;
         //setto il valore corrente
         widget.lset(document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + ((actIndex).toString(10))).firstChild.data);
         //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
      }
      
   }
   else if(cmd.name == "popupmenuDownPress" + (widget.vid).toString(10)){//freccia giu
      if ( actIndex == (parseInt(widget.lengthMenu)-1)){ //mi trovo sull'ultima voce e devo posizionarmi sulla prima
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (actIndex).toString(10)).style.color = "black";      
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (1).toString(10)).style.color = "blue";      
         actIndex = 1;
         //setto il valore corrente
         widget.lset(document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (1).toString(10)).firstChild.data);
         //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
      }
      else{ //devo scendere e non mi trovo sull'ultima voce
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (actIndex).toString(10)).style.color = "black";            
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (parseInt(actIndex)+1).toString(10)).style.color = "blue";      
         actIndex = parseInt(actIndex)+1;
         //setto il valore corrente
         widget.lset(document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + ((actIndex).toString(10))).firstChild.data);
         //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
      }
   }
   else{
      //error
      info = info + '<br/><span class="errorMSG">- Gestione popupmenu: failed!</span>';
      document.getElementById('information').innerHTML = info;
      return false;      
   }   
   return;   
}

//Assegna il valore corrente all'elemento selezionato
function onClickMenu(widget, item){
   document.getElementById(item).onclick = function(){
      document.getElementById(item).style.backgroundColor='#FF3300';   
      
      //Setto il colore nero da tutte le voci poi assegno il blu alla voce selezionata
      var i = 0;   
      for ( i=1 ; i<widget.lengthMenu; i++){         
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (i).toString(10)).style.color = "black";      
      }
      document.getElementById(item).style.color = "blue";      
      
      //setto il valore corrente
      widget.lset(this.firstChild.data);
      //visualizzo il valore su val_act
        document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;           
        return;
   }
   return;
}

//apre/chiude il menu su oncontextmenu sulle immagini
function openMenuPopUp(widget, context){
   var i = 0;   
   //apro o chiudo il menu posizionandolo a dx delle freccie e lo visualizzo settando il valore corrente
   if(widget.menuPopUp == true){ //menu visibile - lo nascondo      
      document.getElementById('menudiv' + (widget.vid).toString(10)).style.visibility = "hidden";   
      widget.menuPopUp = false;         
   }
   else{ //menu nascosto - lo visualizzo
      document.getElementById('menudiv' + (widget.vid).toString(10)).style.visibility = "visible";
      document.getElementById('menudiv' + (widget.vid).toString(10)).style.left = (parseInt(context.style.left) - 90).toString(10) + 'px';   
      document.getElementById('menudiv' + (widget.vid).toString(10)).style.top = context.style.top;
      document.getElementById('menudiv' + (widget.vid).toString(10)).style.visibility = "visible";         
      //eventi al passaggio del mouse   
      var item = new Array(widget.lengthMenu);            
      for(i=1; i < widget.lengthMenu; i++){
         item[i] = (widget.vid).toString(10) + 'tdmenupopup' + (i).toString(10);
         changeColorMenu(item[i], '#CCCCFF', '#FFCC00');   //funzione per swappare il color al passaggio del mouse sul menu               
         onClickMenu(widget, item[i]); //assegna il valore corrente all'elemento selezionato                  
      }      
      
      var actIndex = 0; //indice attuale
      //cerco il valore corrente
      for ( i=1 ; i<widget.lengthMenu; i++){   
         if (document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (i).toString(10)).firstChild.data == widget.vcurrent){
            actIndex = i;   
         }
      }      
      //Setto il colore nero da tutte le voci poi assegno il blu alla voce corrente
      for ( i=1 ; i<widget.lengthMenu; i++){         
         document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (i).toString(10)).style.color = "black";      
      }
      document.getElementById((widget.vid).toString(10) + 'tdmenupopup' + (actIndex).toString(10)).style.color = "blue";      
      widget.menuPopUp = true;                  
   }      
   return;
}

/*
   ===========================================================
   ||                                                       ||
   ||        --- GESTIONE GRAFICA WIDGET SEGMENT ---        ||
   ||                                                       ||
   ===========================================================
*/

//Prende in input l'id di un tag, i colori over e out e lo stile per outset e inset
//Genera gli eventi al passaggio del mouse e al click
function changeStyleMenu(widget, item, overColor, outColor, outset, inset){
   document.getElementById(item).onmouseover = function(){
      document.getElementById(item).style.backgroundColor=overColor;
      return;
   }
   document.getElementById(item).onmouseout = function(){      
      document.getElementById(item).style.backgroundColor=outColor;   
      document.getElementById(item).style.border =outset;      
      return;
   }
   document.getElementById(item).onclick = function(){
      document.getElementById(item).style.border =inset;   
      //setto il valore corrente
      widget.lset(this.firstChild.data);
      //visualizzo il valore su val_act
        document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;   
        //Setto il colore nero da tutte le voci poi assegno il blu alla voce selezionata
      var i = 0;   
      for ( i=1 ; i<widget.lengthMenu; i++){         
         document.getElementById((widget.vid).toString(10) + 'opt' + (i).toString(10)).style.color = "black";      
      }
      document.getElementById(item).style.color = "blue";               
      return;
   }
}

/*
   ===========================================================
   ||                                                       ||
   ||        --- GESTIONE GRAFICA WIDGET STEPPER ---        ||
   ||                                                       ||
   ===========================================================
*/

//Gestione movimenti con le freccie su Stepper
function moveArrowStepperUpDown(widget, cmd){
   var valStepper;
   var tdTag = document.getElementById("idstepper" + (widget.vid).toString(10));         
   if (cmd.name == ("stepperUpPress" + (widget.vid).toString(10))){//freccia su         
      valStepper = parseInt(tdTag.firstChild.data);               
      if(valStepper > (parseInt(widget.vmax) -1)){
         tdTag.style.backgroundColor='#FF3300';      
         return;
      }
      else{
         tdTag.style.backgroundColor='#FFCC00';
         tdTag.firstChild.data = valStepper + 1;
      }               
      widget.lset(parseInt(tdTag.firstChild.data));         
      //visualizzo il valore su val_act
        document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
      i = tdTag.length; //forzo uscita               
   }   
   else if(cmd.name == ("stepperDownPress" + (widget.vid).toString(10))){//freccia giu
      valStepper = parseInt(tdTag.firstChild.data);
      if(valStepper < (parseInt(widget.vmin) + 1)){
         tdTag.style.backgroundColor='#FF3300';      
         return;
      }
      else{
         tdTag.style.backgroundColor='#FFCC00';
         tdTag.firstChild.data = valStepper - 1;
      }               
      widget.lset(parseInt(tdTag.firstChild.data));   
      //visualizzo il valore su val_act
        document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
      i = tdTag.length; //forzo uscita                                       
   }
   else{
      //error
      info = info + '<br/><span class="errorMSG">- Gestione stepper: failed!</span>';
      document.getElementById('information').innerHTML = info;
      return false;      
   }
   return;   
}

/*
   ===========================================================
   ||                                                       ||
   ||        --- GESTIONE GRAFICA WIDGET SLIDER ---         ||
   ||                                                       ||
   ===========================================================
*/

//Da richiamre onmousedown sull'oggetto da spostare
function grabSlider(context, widget){
   //controllo che lo step sia valido, in caso contrario termino
   if ((parseInt(widget.vmax / widget.vstep) != (widget.vmax / widget.vstep)) //wslider1.vmax multiplo stepWid
         ||((widget.vstep < 5) || (widget.vstep > (widget.vmax/2))) //compreso tra 5 e wslider1.vmax
         ||(parseInt(widget.vstep / 5) != (widget.vstep / 5))){ //multiplo di 5
      updateTableInfo(widget);
      
      //informo il log di un errore sullo step
      info = info + '<br/><span class="errorMSG">- Settaggio step slider: failed!</span>';
      document.getElementById('information').innerHTML = info;
      
      mouselocation();
      return false;
   }
   document.onmousedown = falsefunc; // in NS previene "cascading of events"
     widget.dragobj = context;
     widget.dragobj.style.zIndex = 10; // sposta l'oggetto in primo piano
     
     //Drag
     document.onmousemove = function(eventmouse){
        if (widget.dragobj){
            widget.elex = widget.orix + (mousex-widget.grabx);
          widget.eley = widget.oriy + (mousey-widget.graby);
          widget.dragobj.style.position = "absolute";       
          //adatto la posizione dell'oggetto in movimento allo step
          //La funzione Javascript toString riceve un numero e lo converte nella stringa corrispondente in base 10 (in questo caso)  
          // trasforma d esempio 21.67 in 21 o AS32 in 32        
          if ((((parseInt((widget.eley-widget.coordYinizSlider)/widget.vstep))*widget.vstep)+widget.coordYinizSlider) <  (widget.coordYinizSlider + parseInt(widget.vmin))){
             widget.dragobj.style.top = (widget.coordYinizSlider + parseInt(widget.vmin)).toString(10) + 'px';          
          }
         else if ((((parseInt((widget.eley-widget.coordYinizSlider)/widget.vstep))*widget.vstep)+widget.coordYinizSlider) >  widget.coordYfinaleSlider){
              widget.dragobj.style.top = (widget.coordYfinaleSlider).toString(10) + 'px';
           }
           else{
              widget.dragobj.style.top = (((parseInt((widget.eley-widget.coordYinizSlider)/widget.vstep))*widget.vstep)+widget.coordYinizSlider).toString(10) + 'px';
           }        
           var l = parseInt(widget.imgs['sliderarrow' + (widget.vid).toString(10)].style.left);
         var t = parseInt(widget.imgs['sliderarrow' + (widget.vid).toString(10)].style.top);   
           if (widget.imgs['sliderstepdown' + (widget.vid).toString(10)].style.visibility == "hidden"){                     
            changeImg('sliderstepdown' + (widget.vid).toString(10), 'sliderstepup' + (widget.vid).toString(10), widget);      
            widget.imgs['sliderstepdown' + (widget.vid).toString(10)].style.left = (l+parseInt(widget.linkImg1.dimx) + parseInt(widget.linkImg2.dimx)).toString(10) + 'px';
            widget.imgs['sliderstepdown' + (widget.vid).toString(10)].style.top = (t+(parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2)).toString(10) + 'px';
         }         
           widget.imgs['sliderstepdown' + (widget.vid).toString(10)].style.left = (l+parseInt(widget.linkImg1.dimx) + parseInt(widget.linkImg2.dimx)).toString(10) + 'px';
         widget.imgs['sliderstepdown' + (widget.vid).toString(10)].style.top = (t+(parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2)).toString(10) + 'px';            
           
           widget.lset(parseInt(widget.dragobj.style.top) - widget.coordYinizSlider);            
           //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;
           updateTableInfo(widget);        
         mouselocation(eventmouse);
           return false; // in IE previene "cascading of events"
      }     
     }
     
     //Drop
     document.onmouseup = function(){
        if (widget.imgs['sliderstepdown' + (widget.vid).toString(10)].style.visibility == "visible"){            
         var l = parseInt(widget.imgs['sliderarrow' + (widget.vid).toString(10)].style.left);
         var t = parseInt(widget.imgs['sliderarrow' + (widget.vid).toString(10)].style.top);
         changeImg('sliderstepup' + (widget.vid).toString(10), 'sliderstepdown' + (widget.vid).toString(10), widget);      
         widget.imgs['sliderstepup' + (widget.vid).toString(10)].style.left = (l+parseInt(widget.linkImg1.dimx) + parseInt(widget.linkImg2.dimx)).toString(10) + 'px';
         widget.imgs['sliderstepup' + (widget.vid).toString(10)].style.top = (t+(parseInt(widget.linkImg1.dimy)/2 - parseInt(widget.linkImg3.dimy)/2)).toString(10) + 'px';
      }      
      if (widget.dragobj){
         widget.dragobj.style.zIndex = 0;
          widget.dragobj = null;
        }
        document.onmousemove = mouselocation;          
        document.onmouseup = null;
        document.onmousedown = null; // riattiva la selezione di eventuali testi   
     }
     widget.grabx = mousex;
     widget.graby = mousey;
     widget.elex = widget.orix = widget.dragobj.offsetLeft; //cordinata x del verdice in alto a sx dell'elemento che sto spostando
     widget.eley = widget.oriy = widget.dragobj.offsetTop; //cordinata y del verdice in alto a sx dell'elemento che sto spostando
     updateTableInfo(widget);   
     mouselocation();
}

/*
   ===========================================================
   ||                                                       ||
   ||         --- GESTIONE GRAFICA WIDGET KNOB ---          ||
   ||                                                       ||
   ===========================================================
*/

//Da richiamre onmousedown sull'oggetto da spostare
function grabKnob(context, widget){
   //controllo che lo step sia valido, in caso contrario termino
   if ((parseInt(widget.vmax / widget.vstep) != (widget.vmax / widget.vstep)) //wknob1.vmax multiplo stepWid
         ||((widget.vstep < 1) || (widget.vstep > (widget.vmax/2))) //compreso tra 5 e wknob1.vmax/2
         ||(parseInt(widget.vstep / 1) != (widget.vstep / 1))){ //multiplo di 5
      
      updateTableInfo(widget);      
      //informo il log di un errore sullo step
      info = info + '<br/><span class="errorMSG">- Settaggio step knob: failed!</span>';
      document.getElementById('information').innerHTML = info;      
      mouselocation();
      return false;
   }   
   document.onmousedown = falsefunc;
     widget.dragobj = context;
     widget.dragobj.style.zIndex = 10; // sposta l'oggetto in primo piano
     
     //Drag
     document.onmousemove = function(eventmouse){
        if (widget.dragobj){
         //x0 e y0 sono le coordinate del centro del knob, radius il raggio
         //x1 e y1 sono le coordinate dell'oggetto da spostare
         var x1, y1;      
         widget.elex = widget.orix + (mousex-widget.grabx);
          widget.eley = widget.oriy + (mousey-widget.graby);       
          //centro l'oggetto in quanto viene individuato dal vertice in alto a sx
          //l'immagine e' un quadrato di 18 per lato      
           widget.elex = widget.elex + (parseInt(widget.linkImg2.dimy)/2);
           widget.eley = widget.eley + (parseInt(widget.linkImg2.dimy)/2);       
           //Ricavo l'angolo dalla posizione del mouse dato da elex e eley
           widget.radiusEleKnob = Math.sqrt(Math.pow((widget.elex - widget.x0) , 2) + Math.pow((widget.eley - widget.y0) , 2));        
           widget.angle1 = Math.round(Math.acos((widget.elex-widget.x0)/widget.radiusEleKnob)/0.017453293);
           widget.angle2 = Math.round(Math.asin((widget.eley-widget.y0)/widget.radiusEleKnob)/0.017453293);                
           //adatto la posizione dell'oggetto in movimento allo step agendo sull'angolo
           //un grado corrisponde a step 1... se ruoto di 45 a volta ho step a 45
           if ( (widget.angle1<135) && (widget.angle1>89) && (widget.angle2>45) && (widget.angle2<91) ){
              widget.angle1 = 135;
              widget.angle2 = 45;           
           }
           else if ( (widget.angle1<90) && (widget.angle1>45) && (widget.angle2<90) && (widget.angle2>45) ){
              widget.angle1 = 45;
              widget.angle2 = 45;           
           }
           else{           
              widget.angle1 = Math.round(widget.angle1/widget.vstep)*widget.vstep;
              widget.angle2 = Math.round(widget.angle2/widget.vstep)*widget.vstep;
           }              
           
           //ricavo il valore attuale - mi serve un solo angolo
           //lavoro sulle sezioni del knob
           if ( (widget.angle1>134) && (widget.angle1<180) && (widget.angle2<46) && (widget.angle2>0) ){
              widget.angleToDisplay = widget.angle1 - 135;
           }
           else if ( (widget.angle1<181) && (widget.angle1>135) && (widget.angle2<1) && (widget.angle2>-45) ){
              widget.angleToDisplay = -widget.angle1 + 225;
           }
           else if ( (widget.angle1<136) && (widget.angle1>90) && (widget.angle2<-44) && (widget.angle2>-90) ){
              widget.angleToDisplay = -widget.angle1 + 225;
           }
           else if ( (widget.angle1<91) && (widget.angle1>45) && (widget.angle2>-91) && (widget.angle2<-45) ){
              widget.angleToDisplay = -widget.angle1 + 225;
           }
           else if ( (widget.angle1<46) && (widget.angle1>0) && (widget.angle2>-46) && (widget.angle2<0) ){
              widget.angleToDisplay = -widget.angle1 + 225;
           }
           else if ( (widget.angle1>-1) && (widget.angle1<46) && (widget.angle2>-1) && (widget.angle2<46) ){
              widget.angleToDisplay = widget.angle1 + 225;
           }
         else{
            info = info + '<br/><span class="errorMSG">- Gestione knob: failed!</span>';
            document.getElementById('information').innerHTML = info;
            return false;
         }   
         
         //se l'angolo da visualizzare e' minore di vmin o maggiore di vmax posiziono correttamente il cursore
         if(widget.angleToDisplay<widget.vmin){
            widget.angleToDisplay = widget.vmin;
            widget.angle1 = widget.tmpmin.angle1;
            widget.angle2 = widget.tmpmin.angle2;
         }
         if(widget.angleToDisplay>widget.vmax){
            widget.angleToDisplay = widget.vmax;
            widget.angle1 = widget.tmpmax.angle1;
            widget.angle2 = widget.tmpmax.angle2;            
         }
         
         widget.angle1 = Math.round(widget.angle1/widget.vstep)*widget.vstep;
           widget.angle2 = Math.round(widget.angle2/widget.vstep)*widget.vstep;
         
         //utilizzo 2 angoli per posizionare l'oggetto               
           x1 = Math.round(widget.x0 + widget.radiusKnob*Math.cos(widget.angle1*0.017453293));        
           y1 = Math.round(widget.y0 + widget.radiusKnob*Math.sin(widget.angle2*0.017453293));            
           widget.dragobj.style.position = "absolute";
           widget.dragobj.style.left = (x1-(parseInt(widget.linkImg2.dimy)/2)).toString(10) + 'px';
           widget.dragobj.style.top = (y1-(parseInt(widget.linkImg2.dimy)/2)).toString(10) + 'px';
               
         widget.lset(widget.angleToDisplay);
           //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;            
           updateTableInfo(widget);   
         mouselocation(eventmouse);
           return false; // in IE previene "cascading of events"
      }
     }
     
     //Drop
     document.onmouseup = function(){
        if (widget.imgs['buttonDown' + (widget.vid).toString(10)].style.visibility == "visible"){      
         var l = parseInt(widget.imgs['buttonDown' + (widget.vid).toString(10)].style.left);
         var t = parseInt(widget.imgs['buttonDown' + (widget.vid).toString(10)].style.top);
         changeImg('buttonUp' + (widget.vid).toString(10), 'buttonDown' + (widget.vid).toString(10), widget);      
         widget.imgs['buttonUp' + (widget.vid).toString(10)].style.left = (l).toString(10) + 'px';
         widget.imgs['buttonUp' + (widget.vid).toString(10)].style.top = (t).toString(10) + 'px';
      }
      if (widget.dragobj){
         widget.dragobj.style.zIndex = 0;
          widget.dragobj = null;
        }
        document.onmousemove = mouselocation;          
        document.onmouseup = null;
        document.onmousedown = null; // riattiva la selezione di eventuali testi
     }
     widget.grabx = mousex;
     widget.graby = mousey;
     widget.elex = widget.orix = widget.dragobj.offsetLeft; //cordinata x del verdice in alto a sx dell'elemento che sto spostando
     widget.eley = widget.oriy = widget.dragobj.offsetTop; //cordinata y del verdice in alto a sx dell'elemento che sto spostando
     updateTableInfo(widget);
     mouselocation();
}

/*
   ===========================================================
   ||                                                       ||
   ||         --- GESTIONE GRAFICA WIDGET DIAL ---          ||
   ||                                                       ||
   ===========================================================
*/

//setta la lancetta dopo aver immesso il valore
function setDialCentraleMarker(cmd, widget){
   if (cmd.value.length > 3)
      cmd.value = cmd.value.substring(0,3);
      
   if (cmd.value <1)
      return false;
   
   if (isNaN(cmd.value.substring(cmd.value.length -1 ,cmd.value.length)) == false){      
      if ( (parseInt(cmd.value) < widget.vmin) || (parseInt(cmd.value) > widget.vmax)){   
         //posiziono la lancetta sullo 0      
         widget.indicator = 1;
         tmpradius = parseInt(widget.radiusDial)   
         for (count = tmpradius-8; count>5;  count--){
              x1 = Math.round(parseInt(widget.x0) + count*Math.cos(parseInt(widget.angle1)*0.017453293));        
              y1 = Math.round(parseInt(widget.y0) + count*Math.sin(parseInt(widget.angle2)*0.017453293));   
              widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.position = "absolute";
            widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.left = (parseInt(x1) - parseInt(widget.linkImg4.dimx)/2).toString(10) + 'px'; //x1
            widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.top =  (parseInt(y1) - parseInt(widget.linkImg4.dimy)/2).toString(10) + 'px'; //y1   
            widget.indicator++;              
           }         
         document.getElementById('wdialinp' + (widget.vid).toString(10)).style.color = "red";           
         return false;
      }
      else{//posso settare la lancetta
         //posiziono la lancetta sul cmd.value         
         widget.angleToDisplay = cmd.value;
         if ( (cmd.value > -1) && (cmd.value < 45)){
            widget.angle1 = parseInt(widget.angleToDisplay) + 135;
            widget.angle2 = 45 - parseInt(widget.angleToDisplay);                        
         }
         else if ( (cmd.value > 44) && (cmd.value < 90)){
            widget.angle1 = -parseInt(widget.angleToDisplay) + 225;
            widget.angle2 = +45 - parseInt(widget.angleToDisplay);
         }
         else if ( (cmd.value > 89) && (cmd.value < 135)){
            widget.angle1 = -parseInt(widget.angleToDisplay) + 225;
            widget.angle2 = 45 - parseInt(widget.angleToDisplay);
         }
         else if ( (cmd.value > 134) && (cmd.value < 180)){
            widget.angle1 = -parseInt(widget.angleToDisplay) + 225;
            widget.angle2 = -180 + parseInt(widget.angleToDisplay) - 45;
         }
         else if ( (cmd.value > 179) && (cmd.value < 225)){
            widget.angle1 = -parseInt(widget.angleToDisplay) + 225;
            widget.angle2 = -180 + parseInt(widget.angleToDisplay) - 45;
         }
         else if ( (cmd.value > 224) && (cmd.value < 271)){
            widget.angle1 = parseInt(widget.angleToDisplay) - 225;
            widget.angle2 = parseInt(widget.angleToDisplay) - 225;
         }
         else{
            info = info + '<br/><span class="errorMSG">- Gestione dial: failed!</span>';
      document.getElementById('information').innerHTML = info;
            return false;
         }
   
         widget.angle1 = Math.round(widget.angle1/widget.vstep)*widget.vstep;
           widget.angle2 = Math.round(widget.angle2/widget.vstep)*widget.vstep;
   
         widget.indicator = 1;
         tmpradius = parseInt(widget.radiusDial)   
         for (count = tmpradius-8; count>5;  count--){
              x1 = Math.round(parseInt(widget.x0) + count*Math.cos(parseInt(widget.angle1)*0.017453293));        
              y1 = Math.round(parseInt(widget.y0) + count*Math.sin(parseInt(widget.angle2)*0.017453293));   
              widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.position = "absolute";
            widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.left = (parseInt(x1) - parseInt(widget.linkImg4.dimx)/2).toString(10) + 'px'; //x1
            widget.imgs[(widget.vid).toString(10) + 'pointRed2x2'+widget.indicator].style.top =  (parseInt(y1) - parseInt(widget.linkImg4.dimy)/2).toString(10) + 'px'; //y1   
            widget.indicator++;              
           }
                  
         widget.lset(Math.round(widget.angleToDisplay/widget.vstep)*widget.vstep);  
         document.getElementById('wdialinp' + (widget.vid).toString(10)).style.color = "black";                  
           updateTableInfo(widget);         
           //visualizzo il valore su val_act
           document.getElementById("val_act" + (widget.vid).toString(10)).innerHTML = widget.vcurrent;                 
         return false;
      }
   }
   else{//non e' un numero
      cmd.value = cmd.value.substring(0,cmd.value.length-1);
      return false;
   }   
}

to top

End of topic
Skip to action links | Back to top

Edit | Attach image or document | Printable version | Raw text | More topic actions
Revisions: | r1.26 | > | r1.25 | > | r1.24 | Total page history | Backlinks
You are here: Tesi > TesiDaAssegnare > WebInterfaceAPI

to top

Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Fabio's Wiki? Send feedback