/** [info]
 * 
 *  OBJECT:               Gallery
 *  REQUIRED:             Framework eXtend (v2) ( eXtend,Xtoolbar )
 *  DATA:                 15/03/2009
 *  COMPANY:              Onlime S.n.c.
 *  VERS:                 1
 *  LAST EDIT:            16/04/2009
*/

(function() {
/** [Gallery OBJECT] */
Gallery = function( obj, parameters )
{
  this.divContenitore   = null;   // DOM div obj
  this.imgSlideshow     = null;   // DOM img obj
  this.imgSlideshowBack = null;   // DOM img obj
  this.divBar           = null;   // DOM div obj
  this.divComments      = null;   // DOM div obj
  this.spanLoader       = null;   // DOM span obj 
  this.arrJsonData      = null;
  this.currentImage     = "";
  this.positionArray    = -1;
  this.automatic        = false;  // OFF MODE
  this.automaticTime    = null;
  this.lock             = false;
  this.toolbarMode      = null;
  
  Gallery.prototype.init.apply( this, [obj,parameters] );  
};

/** init
@obj
@parameters arrJsonData
@parameters toolbarMode
@parameters automatic
@parameters automaticTime
@parameters AjaxCall
*/ 
Gallery.prototype.init = function ( obj, parameters )
{
  parameters = parameters || {};

  // Definizione elementi
  var divContenitore        = $(obj)
  var imgSlideshow          = createElement( "img" );
  var imgSlideshowBack      = createElement( "img" );
  
  // Setting proprietà
  divContenitore.style.position   = "relative";
  
  imgSlideshow.style.cssText = ("position:absolute;"
                               
                                + "top:0;"
                                + "left:0;"
                                + "height:100%;"
                                + "width:100%;");
                                
  imgSlideshowBack.style.cssText = ("position:absolute;"
                                    
                                    + "top:0;"
                                    + "left:0;"
                                    + "height:100%;"
                                    + "width:100%;"); 
  
  divContenitore.appendChild ( imgSlideshowBack );
  divContenitore.appendChild ( imgSlideshow );
  
  // valorizzazione variabile di classe
  this.divContenitore   = $(divContenitore);
  this.imgSlideshow     = $(imgSlideshow);
  this.imgSlideshowBack = $(imgSlideshowBack);
  
  this.imgSlideshow.fn.UI.setOpacity( 0 );
  this.imgSlideshowBack.fn.UI.setOpacity( 0 );
  
  //...
  this.arrJsonData      = parameters["arrJsonData"] || null;
  this.currentImage     = "";
  this.positionArray    = -1;
  this.toolbarMode      = parameters["toolbarMode"] || null;
  this.automatic        = parameters["automatic"] || false;
  this.lock             = false;
  this.automaticTime    = parseInt(parameters["automaticTime"]) || 4000;
  
  if ( parameters["AjaxCall"] )
  {
    this.extractingAjaxXmlData( parameters["AjaxCall"] );
  }
  else if ( parameters["arrJsonData"] )
  {
    this.initialized();
  }
  
  if ( parameters["loader"] === true )
  {
    var spanLoader = createElement( "span" );
    spanLoader.style.cssText = ("position:absolute;"
                                + "top:0;"
                                + "left:0;"
                                + "height:100%;"
                                + "font-size: 12px;" 
                                + "color: #666666;" 
                                + "font-family: Arial, Helvetica, sans-serif;"
                                + "width:100%;");
    
    spanLoader.innerHTML = "Caricamento...";
                                
    this.divContenitore.appendChild ( spanLoader )
    this.spanLoader = $( spanLoader );                         
    this.spanLoader.fn.UI.setOpacity( 0 );                            
  }
}

//Gallery.prototype.onLoad = new JCustomEvent( "Load" );

/* */
Gallery.prototype.initialized = function ()
{  
  if ( this.arrJsonData != null )
  {
    var preloadImage = new Array();
    
    // Preload in cache arr_image (! da verificare)
    for(i=0;i<(this.arrJsonData.length);i++)
    {
      preloadImage[i] = new Image();
      preloadImage[i].src = this.arrJsonData[i]["img"];
    }
    
    if ( this.toolbarMode ) this.addBar( this.toolbarMode );
    this.addComments();
    
    // Attivo l'avvio automatico o mi sposto subito sulla prima immagine.
    if ( this.automatic )
    {
      this.automatic = false;
      this.play();
    }
    else
    {
      this.setImage ( 0 );
    }
  }
};

// required response Xml
Gallery.prototype.extractingAjaxXmlData = function ( objAjax )
{ 
  if ( objAjax )
  {
    var objGallery = this;  // Closure
    
    if ( !objAjax.operation )
    {
      objAjax.responseType = "XML";
      objAjax.operation = function( responseXml )
        {
          var arrJsonData = retriveRcFromXml( "slideshow", responseXml );
          
          if ( arrJsonData )
          {
            objGallery.arrJsonData = arrJsonData;
            objGallery.initialized();
          }
        };
    }  
    // Chiamata Ajax  
    objAjax.sendData();  
  }
};

Gallery.prototype.extractingAjaxJSONData = function ( objAjax, callbackFn ){};
  
Gallery.prototype.swapImage = function ( newSrcImage, callbackFn )
{
  var objGallery  = this;
  var cbFn        = callbackFn || null;
  var newImage    = newSrcImage;
    
  if ( this.imgSlideshow.src )
  { 
    var functBack = function ( eBack, idxBack )
    { 
      $E.removeIdx( idxBack );
      objGallery.imgSlideshow.fn.UI.setOpacity( 0 );
      objGallery.imgSlideshow.src = newImage;
    };
    $E.add( this.imgSlideshowBack, "load", functBack, false );
    
    var funct = function ( e, idx )
    { 
      $E.removeIdx( idx );
      this.fn.UI.fadeIn( {"v":30,"a":5}, cbFn ); 
    };
    $E.add( this.imgSlideshow, "load", funct, false );
   
    this.imgSlideshowBack.fn.UI.setOpacity( 100 );
    this.imgSlideshowBack.src = this.imgSlideshow.src;
  }
  else
  { 
    var funct = function ( e, idx )
    { 
      $E.removeIdx( idx );
      this.fn.UI.fadeIn( null, cbFn ); 
    };
    $E.add( this.imgSlideshow, "load", funct, false );
   
    this.imgSlideshow.fn.UI.setOpacity( 0 );
    this.imgSlideshow.src = newImage;
  }  
};
    
/* */
Gallery.prototype.setImage = function ( index, cbFn )
{ 
  var fnCallbackUser = cbFn || null;
  
  if( (!this.lock) && (this.arrJsonData[index]) )
  {
    this.lock = true;
    
    this.positionArray = index;
    this.currentImage = this.arrJsonData[this.positionArray]["img"];
    
    // Avvio swopImage e rimozione lock
    var callbackFn = null;
    if ( fnCallbackUser )
    {
      callbackFn = function(){ this.lock = false; fnCallbackUser(); }.bind( this );
    }
    else
    {
      callbackFn = function(){ this.lock = false }.bind( this );
    }
    this.swapImage( this.currentImage, callbackFn );
  }  
};
  
Gallery.prototype.nextImage = function()
{ 
  if ( !this.lock )
  {
    this.lock = true;
    
    if( this.positionArray < this.arrJsonData.length - 1 )
    {
      this.positionArray++;
      this.currentImage = this.arrJsonData[this.positionArray]["img"];
    }
    else
    {
      this.positionArray = 0;
      this.currentImage = this.arrJsonData[this.positionArray]["img"];
    }
    
    // Avvio swopImage e rimozione lock
    var callbackFn = function(){ this.lock = false }.bind( this );
    this.swapImage( this.currentImage,callbackFn );
  }
};

Gallery.prototype.prevImage = function()
{ 
  if ( !this.lock )
  {
    this.lock = true;
    
    if( this.positionArray > 0 )
    {
      this.positionArray--;
      this.currentImage = this.arrJsonData[this.positionArray]["img"];
    }
    else
    {
      this.positionArray  = this.arrJsonData.length - 1;
      this.currentImage   = this.arrJsonData[this.positionArray]["img"];
    }
    
    // Avvio swopImage e rimozione lock
    var callbackFn = function(){ this.lock = false }.bind( this );
    this.swapImage( this.currentImage,callbackFn );
  }
};

Gallery.prototype.automaticSlide = function()
{
  if ( this.automatic )
  { 
    this.positionArray = ( this.positionArray >= this.arrJsonData.length-1 ) ? (0) : (this.positionArray+1);
    this.currentImage = this.arrJsonData[this.positionArray]["img"];
    
    objGallery = this;
    
    window.setTimeout ( function() {
      if (objGallery.automatic) {
        objGallery.swapImage ( objGallery.currentImage, objGallery.automaticSlide.bind(objGallery) );
        }
      },
      this.automaticTime
    );
  }
};
  
Gallery.prototype.play = function()
{
  if ( !this.automatic )
  {
    this.automatic = true;
    this.lock = true;
    this.automaticSlide();
  }
  else
  {
    this.automatic = false;
    this.lock = false;
  }
};

Gallery.prototype.addBar = function( mode )
{
  mode = mode || 0;
  var divBar  = createElement( "div" );  // Definizione elemento contenitore html
  
  var toolbarMode = [];
  toolbarMode[0]  = null;
  toolbarMode[1]  = ({
    "buttons"  : ["indietro","playStop","avanti"],
    "numbers"  : true 
  });
  toolbarMode[2]  = ({
    "buttons"     : ["indietro","playStop","avanti"] 
  });
  toolbarMode[3]  = ({
    "buttons"  : ["indietro","playStop","avanti","comments"],
    "numbers"  : true 
  });
    
  // Setting proprietà elemento contenitori html
  divBar.setAttribute( "id", this.divContenitore.id + "_bar" );
  
  divBar.style.cssText = ("position:absolute;"
                            + "top:100%;" 
                            + "left:0;"
                            + "z-index:3;"  
                            + "width:100%;" 
                            + "height:25px;" 
                            + "background: url('"+PATH_GALLERY+"img/divCommandBg.gif') top left repeat-x;"
                            + "margin-top:-25px;");
  
  this.divBar = this.divContenitore.appendChild ( divBar );
  
  var curMode = toolbarMode[mode];
  
  if ( curMode["buttons"] ) divBar.appendChild( this.addButtons( curMode["buttons"] ) );
  if ( curMode["numbers"] ) divBar.appendChild( this.addNumbers() );
  
  this.divBar = this.divContenitore.appendChild ( divBar );
  
  // correzione posizionamento
  //divCtrl.style.marginTop             = - parseInt(divCtrl.offsetHeight);
  //divCommand.style.height             = parseInt(divCommand.offsetHeight);
  //divCommandShowHide.style.height     = parseInt(divCommandShowHide.offsetHeight);
}

Gallery.prototype.addButtons = function( buttons )
{
  var objGallery  = this; // closure
  var objTool     = null; // Oggetto XToolbar  
  
  var mappingToolbar = null;
                             
  // Definizione mappingToolbar
  mappingToolbar = ({
    //"toolbarMode" : parameters["toolbarMode"] || 0,
    //"img"         : parameters["img"] || PATH_GALLERY + "img/toolbar.png",  // Featurs
    //"stepW"       : parseInt( parameters["stepW"] ) || 16, // Featurs
    //"stepH"       : parseInt( parameters["stepH"] ) || 25, // Featurs
    "img"         : PATH_GALLERY + "img/toolbar.png",
    "stepW"       : 16,
    "stepH"       : 25,
    "buttons"     : {

        "playStop" : {
          //"offsetW"     : parseInt( parameters["offsetPlay"] ) || 7, // Featurs
          //"offsetStop" : parseInt( parameters["offsetStop"] ) || 10, // Featurs
          "offsetW"     : 7,
          "offsetStop"  : 10,
          "action"      : [{
            "event" : "click" , 
            "fn"    : function () { objGallery.play(); }  
          }] 
        },
        "avanti" : {
          //"offsetW" : parseInt( parameters["offsetAvanti"] ) || 8, // Featurs 
          "offsetW" : 8,
          "action"  : [{
            "event" : "click", 
            "fn"    : function () { objGallery.nextImage(); }  
          }]  
        },
        "indietro" : {
          //"offsetW" : parseInt( parameters["offsetIndietro"] ) || 6, // Featurs
          "offsetW" : 6,
          "action"  : [{
            "event" : "click" , 
            "fn"    : function () { objGallery.prevImage(); }  
          }]  
        },
        "comments" : {
          //"offsetW" : parseInt( parameters["offsetIndietro"] ) || 6, // Featurs
          "offsetW" : 1,
          "action"  : [{
            "event" : "click" , 
            "fn"    : function () {
              if ( !objGallery.divComments ) return;
              if ( objGallery.divComments.fn.css("display")=="none" )
              { 
                //objGallery.divComments.fn.UI.openAndFadeIn();
                objGallery.divComments.fn.UI.open();
              }
              else 
              { 
                //objGallery.divComments.fn.UI.fadeOutAndClose();
                objGallery.divComments.fn.UI.close();
              }   
            }  
          }]  
        }
      }
  });
  
  // Inizializzazione oggetto XToolbar
  objTool = new XToolbar ({ 
    "id"     : "", 
    "stepW"  : mappingToolbar["stepW"],
    "stepH"  : mappingToolbar["stepH"], 
    "img"    : mappingToolbar["img"]
  });
  
  for ( i=0; i<buttons.length; i++ )
  {
    cur = buttons[i];
    
    if (  mappingToolbar["buttons"][ cur ] )
    {
      var el = objTool.createToolButton ({ 
        "offsetW" : mappingToolbar["buttons"][ cur ]["offsetW"],
        "id"      : this.divContenitore.id + "_bar_" + cur, 
        "title"   : cur,
        "action"  : mappingToolbar["buttons"][ cur ]["action"]
      });
      
      // Setting proprietà elemento bottone objTool 
      el.style.cssText = ("float:left;");
    }  
  }
  
  var tb = objTool.create();
  tb.style.cssText = ("float:left;");
  return tb;
};

Gallery.prototype.addNumbers = function()
{
  var objGallery  = this; // closure
  
  var timer = null;
  
  var divNumbers      = createElement( "div" );
  var divMoveLeft     = createElement( "div" );
  var divMoveRight    = createElement( "div" );
  var divSpaceNumbers = createElement( "div" );
  var spanNumbers     = createElement( "span" );
  var imgPrev         = createElement( "img" );
  
  var rapporto = 30;  // percentuale dimensioni preview
  
  ht = (parseInt(this.divContenitore.offsetHeight)/100)*rapporto;
  wt = (parseInt(this.divContenitore.offsetWidth)/100)*rapporto;
  
  imgPrev.style.cssText = ("position:absolute;"
                            //+ "top: 0;"
                            //+ "left:0;"
                            + "top: 100%;"
                            + "left:100%;"
                            + "margin-left:" + (-wt-1) + "px;"  // -w preview - 1 bordo
                            + "margin-top: " + (-25-ht) + "px;" // -h bar - h preview
                            + "height:" + ht + "px;"
                            + "width:" + wt + "px;"
                            + "border-left:1px solid #686868;"
                            + "border-top:1px solid #686868;"
                            + "z-index:3;"
                            + "display:none;");
  
  this.divContenitore.appendChild ( imgPrev );
  
  var fnLoad = function (){ $(this).fn.UI.open(); };
  $E.add( imgPrev, "load", fnLoad, false );
  
  
  divNumbers.style.cssText = (  "height:25px;"
                              + "float:right;"
                              + "line-height:25px;"
                              //+ "background:#000000;" 
                              + "width:103px;"  // to fix
                              + "position:relative;"
                              + "text-align:right;"
                              + "font-family:Arial;" 
                              + "color:#F9F8F8;"
                              + "font-size:11px;");
  
  divMoveLeft.style.cssText = ( "width:10px;"
                              + "height:100%;"
                              + "text-align:center;"
                              //+ "background:yellow;"
                              + "float:left;");  
  
  divMoveRight.style.cssText = ( "width:10px;"
                               + "height:100%;"
                               + "text-align:center;"
                               //+ "background:yellow;"
                               + "float:right;" );                            
  
  divSpaceNumbers.style.cssText = ( "width:83px;"  // to fix
                                  + "height:100%;"
                                  + "white-space:nowrap;"
                                  + "overflow:hidden;"
                                  //+ "background:yellow;"
                                  + "float:left;");                                                                                  
                                    
  spanNumbers.style.cssText = ( "line-height:25px;"
                              + "display:inline-block;"
                              + "position:relative;"
                              + "left:0;"
                              + "height:100%;" );
  
  var fnClickLink = function ( e, idx, param ){ objGallery.setImage( param["idxImg"] ); };
  var fnOverLink = function ( e, idx, param ){ imgPrev.src = objGallery.arrJsonData[param["idxImg"]]["img"]; };
  var fnOutLink = function (){ $(imgPrev).fn.UI.close(); };
  
  var maxElm = this.arrJsonData.length;
  
  for ( i=0; i<maxElm; i++ )
  {
    var link = createElement( "a" );
    link.setAttribute("href", "javascript:;");
    link.style.cssText = ("color:#F9F8F8;"
                          + "text-decoration:none;"
                          + "margin:0px 3px 0px 3px;");
    
    link.innerHTML = ""+(i+1)+"";
    
    spanNumbers.appendChild ( link );
    
    $E.add( link, "click", fnClickLink, false, {"idxImg":parseInt(i)} );
    $E.add( link, "mouseover", fnOverLink, false, {"idxImg":parseInt(i)} );
    $E.add( link, "mouseout", fnOutLink, false );
  } 

  var fnMoveNumbers = function ( direction ){ 
    
    var maxScorrimento = spanNumbers.offsetWidth - divSpaceNumbers.offsetWidth;
    var x              = parseInt(spanNumbers.style.left);
    
    if ( !spanNumbers.style.left )  spanNumbers.style.left = 0;
    
    if ( direction == "left" )
    {
      if ( x > -(maxScorrimento) )  spanNumbers.style.left = ((x - 1) + "px");
    }
    else if( direction == "right" )
    {
      if ( x<0 )  spanNumbers.style.left = ((x + 1) + "px");
    }
  };
  
  var fnOver = function ( e, idx, parameters ) {
    var fn = function(){ fnMoveNumbers( parameters["toDirection"] ); };
    timer = window.setInterval( fn, 10);
  };
  
  
  var fnMouseout = function ( ) {
    if ( !timer ) return;
    clearInterval( timer );
    timer = null;  
  };
  
  if( maxElm > 7 ) // da sistemare
  {
    divMoveLeft.innerHTML   = "<a style='color:#FFF;font-weight:bold;font-size:11px;' href='javascript:;'><</a>";
    divMoveRight.innerHTML  = "<a style='color:#FFF;font-weight:bold;font-size:11px;' href='javascript:;'>></a>";
    
    $E.add( divMoveLeft, "mouseover", fnOver, false, {"toDirection":"right"} );
    $E.add( divMoveRight, "mouseover", fnOver, false, {"toDirection":"left"} );
    $E.add( divMoveLeft, "mouseout", fnMouseout, false );
    $E.add( divMoveRight, "mouseout", fnMouseout, false );  
  }
  
  // Append elementi
  divSpaceNumbers.appendChild ( spanNumbers );
  
  divNumbers.appendChild ( divMoveLeft );
  divNumbers.appendChild ( divSpaceNumbers );
  divNumbers.appendChild ( divMoveRight );
  
  return divNumbers;
};

Gallery.prototype.addComments = function()
{
  var objGallery  = this; // closure
  
  var divComments     = createElement( "div" );
  var divBgComments   = createElement( "div" );
  var pTxtComments    = createElement( "p" );
  var divTxtComments  = createElement( "div" );
  
  //ht = (parseInt(this.divContenitore.offsetHeight)-25);
  var rapporto = 25;  // percentuale dimensioni
  ht = (parseInt(this.divContenitore.offsetHeight)/100)*rapporto;
  wt = parseInt(this.divContenitore.offsetWidth);
  
  divComments.style.cssText = ( "position:absolute;"
                              //+ "top: 0;"
                              + "left:0;"
                              + "top: 100%;"
                              + "margin-top: " + (-ht-25) + "px;" // -h divComments - h bar
                              + "height: " + ht + "px;"  
                              + "width:" + wt + "px;"
                              + "border-top:1px solid #686868;"
                              + "z-index:2;" 
                              + "display:none;" );
  
  
  divBgComments.style.cssText = ( "top: 0;"
                                + "left:0;"
                                + "height:100%;"
                                + "width:100%;"
                                //+ "-khtml-opacity:.80;-moz-opacity:.80;-ms-filter:\"alpha(opacity=80)\";filter:alpha(opacity=80);opacity:.80;"
                                + "background:#3C3C3C;" );
  
  $(divBgComments).fn.UI.setOpacity( 80 );
  
  divTxtComments.style.cssText = (  "position:absolute;"
                                  + "top: 0;"
                                  + "left:0;"
                                  + "height:100%;"
                                  + "width:100%;"
                                  + "overflow:auto;" );
                             
  pTxtComments.style.cssText = (  "font-family:Arial;" 
                                + "color:#F9F8F8;"
                                + "margin:5px;"
                                + "font-size:12px;");
                                

  var fnSetTxtComments = function()
  {
    var txt = null; 
    if (objGallery.arrJsonData[objGallery.positionArray]["descrizione"]) 
    { 
      txt = (objGallery.arrJsonData[objGallery.positionArray]["descrizione"]);
    }   
      
    if ( txt!=null )
    {
      pTxtComments.innerHTML = txt;
    }
    else
    {
      pTxtComments.innerHTML = "";
    }  
  }                            
  $E.add( this.imgSlideshow, "load", fnSetTxtComments, false );                                 
  
  divTxtComments.appendChild ( pTxtComments );
  divComments.appendChild ( divBgComments );
  divComments.appendChild ( divTxtComments );
  
  this.divComments = $( this.divContenitore.appendChild ( divComments ) );
};

/* [addThumbs]
@obj : obj contenitore
@parameters classAThumbs : classe tag a thumbs
*/ 
Gallery.prototype.addThumbs = function( obj, parameters )
{
  var obj         = $(obj);
  var parameters  = parameters || {};
  var objGallery  = this; // closure
  var timer       = null;
  
  var divThumbs      = createElement( "div" );
  var divMoveLeft    = createElement( "div" );
  var divMoveRight   = createElement( "div" );
  var divSpaceThumbs = createElement( "div" );
  var spanThumbs     = createElement( "span" );
  
  var wt = parseInt(obj.offsetWidth);
  var ht = parseInt(obj.offsetHeight);
  
  if (!obj.style.textAlign) obj.style.textAlign = "center";
  
  divThumbs.style.cssText = (  "height:" + ht + "px;"
                              + "line-height:" + ht + "px;"
                              //+ "background:#000000;" 
                              + "width:" + wt + "px;"
                              //+ "position:relative;"
                              + "font-family:Arial;" 
                              + "color:#F9F8F8;"
                              + "font-size:11px;");
  
  divMoveLeft.style.cssText = ( "width:10px;"
                              + "height:100%;"
                              + "line-height:" + ht + "px;"
                              + "text-align:center;"
                              + "display:none;"
                              //+ "background:yellow;"
                              + "float:left;");  
  
  divMoveRight.style.cssText = ( "width:10px;"
                               + "height:100%;"
                               + "line-height:" + ht + "px;"
                               + "text-align:center;"
                               + "display:none;"
                               //+ "background:yellow;"
                               + "float:right;" );                            
  
  divSpaceThumbs.style.cssText = ( "width:" + wt + "px;"
                                  + "height:100%;"
                                  + "white-space:nowrap;"
                                  + "overflow:hidden;"
                                  //+ "background:orange;"
                                  + "float:left;");                                                                                  
                                    
  spanThumbs.style.cssText = ( "line-height:" + ht + "px;"
                              + "display:inline-block;"
                              //+ "background:green;"
                              //+ "position:relative;"
                              + "left:0;"
                              + "height:100%;" );
  
  var fnClickLink = function ( e, idx, param )
  { 
    var fnAfter = null;
    if ( objGallery.spanLoader )
    {
      objGallery.spanLoader.fn.UI.setOpacity( 100 );
      fnAfter = function(){ objGallery.spanLoader.fn.UI.setOpacity( 0 ); };
    }
     
    objGallery.setImage( param["idxImg"], fnAfter ); 
  };
  
  var maxElm = this.arrJsonData.length;
  
  for ( i=0; i<maxElm; i++ )
  { 
    var link = createElement( "a" );
    link.setAttribute("href", "javascript:;");
    
    var img = createElement( "img" );
    img.src = this.arrJsonData[i]["thumb"];                   
    
    if ( parameters["classAThumbs"] )
    {
      link.className = parameters["classAThumbs"];
    }
    
    link.style.cssText = (  "font-size:0px;"
                          + "display:inline-block;"
                          + "height:" + ht + "px;" );
    
    img.style.cssText = ( "border:0;"
                        + "height:100%;"
                        + "width:auto;"
                        + "font-size:0px;");
                        
    link.appendChild ( img );
    spanThumbs.appendChild ( link );   
    
    $E.add( link, "click", fnClickLink, false, {"idxImg":parseInt(i)} );
  } 

  var fnMoveThumbs = function ( direction ){ 
    
    var maxScorrimento = spanThumbs.offsetWidth - divSpaceThumbs.offsetWidth;
    var x              = parseInt(spanThumbs.style.marginLeft);
    
    if ( !spanThumbs.style.marginLeft )  spanThumbs.style.marginLeft = 0;
    
    if ( direction == "left" )
    {
      if ( x > -(maxScorrimento) )  spanThumbs.style.marginLeft = ((x - 1) + "px");
    }
    else if( direction == "right" )
    {
      if ( x<0 )  spanThumbs.style.marginLeft = ((x + 1) + "px");
    }
  };
  
  // Append elementi
  divSpaceThumbs.appendChild( spanThumbs );
  divThumbs.appendChild( divMoveLeft );
  divThumbs.appendChild( divSpaceThumbs );
  divThumbs.appendChild( divMoveRight );
  obj.appendChild( divThumbs );
  
  //if( parseInt(spanThumbs.offsetWidth) > parseInt(divSpaceThumbs.offsetWidth) )
  if( true )
  {
    divMoveLeft.style.display   = "block";
    divMoveRight.style.display  = "block";
    divSpaceThumbs.style.width  = (wt-20) + "px";
    
    var fnOver = function ( e, idx, parameters ) {
      var fn = function(){ fnMoveThumbs( parameters["toDirection"] ); };
      timer = window.setInterval( fn, 10);
    }; 
    
    var fnMouseout = function ( ) {
      if ( !timer ) return;
      clearInterval( timer );
      timer = null;  
    };
  
    divMoveLeft.innerHTML   = "<a style='color:#505050;text-decoration:none;display:block;font-weight:bold;font-size:11px;' href='javascript:;'><</a>";
    divMoveRight.innerHTML  = "<a style='color:#505050;text-decoration:none;display:block;font-weight:bold;font-size:11px;' href='javascript:;'>></a>";
    
    $E.add( divMoveLeft, "mouseover", fnOver, false, {"toDirection":"right"} );
    $E.add( divMoveRight, "mouseover", fnOver, false, {"toDirection":"left"} );
    $E.add( divMoveLeft, "mouseout", fnMouseout, false );
    $E.add( divMoveRight, "mouseout", fnMouseout, false );  
  }
  
  return true;
};
/** [END Gallery OBJECT] */
})();