/*************************************************************************[info]
  OBJECT:               xPhoto
  REQUIRED:             Framework eXtend (v2) (eXtend)
  DATA:                 06/07/2009
  COMPANY:              Onlime S.n.c.
 
  VERS:                 1
  LAST EDIT:            06/07/2009
  
  TODO:                 
    - 
    
  USO:  
  
  La struttura HTML di partenza deve essere
  
  <a href="">
    < img src="">
  </a>
  
  Anche il CSS deve essere opportunamente costruito per poter posizionare l'effetto
  all'hover. Per maggiori dettagli si rimanda all'esempio
  
  Il parametro obj iniziale deve essere una classe o un oggetto composito $$
  
   
  // Ovviamente anche la parte CSS deve essere portata all'interno. O forse no.
  // In effetti è meglio lasciarla modificabile
  
  // Dopodichè dobbiamo eliminare il parametro dell'oggetto lightwindow. Dobbiamo eliminare da webpage
  // il metodo per la creazione di lightwindow, da index il contenuto di lightwindow e dai CSS tutti i
  // riferimenti a lightwindow e al suo contenuto ( sia default.css che index.php )
  
  // in questo modo abbiamo tutti i riferimenti per apertura e chiusura dell'oggetto
  
  Per la Gestione del click del pulsante per la chiusura -> devo controllare che l'evento non sia già impostato
  Come si faceva? E' automatico? 
  
  Possiamo staccare la funzione di creazione degli elementi HTML e fare in modo 
  che venga restituito un vettore con gli elementi che mi interessano ( contenitore e immagine )
  che posso riusare dopo.
  
  L'id diventa un ID riservato ( quello dell'oggetto lightwindow )
    
*******************************************************************************/
(function() {

XPhoto = function ( obj, parameters )
{
  this.obj          = null;
    
  // init
  XPhoto.prototype.init.apply ( this, [obj, parameters] );
};


XPhoto.prototype.init = function ( obj, parameters )
{ 
  // Preparo le proprietà
  this.obj                = $$(obj);
  
  // Analizzo i parametri se presenti
  parameters = parameters || {};

  // Creo la finestra
  var viewer = this.createViewer();

  // Istanzio l'oggetto LightWindow
  var objLightWindow = new LightWindow ( viewer["container"], { "bgColor": "#202020" } );
  
  // Controllo l'effetto sul click esterno
  $E.add( objLightWindow, "exit", objLightWindow.hideWithFade, false );
  
  // Gestisco il click del pulsante per la chiusura
  $E.add( viewer["link"], "click", this.closeWin, false, { "lwin" : objLightWindow } );

  
  for ( var i=0; i < this.obj.length; i++)
  {
    // Applico il sistema di masking
    this.createMaskEffect( this.obj[i] );
    
    // Gestisco il click
    $E.add( this.obj[i], "click", this.openWin, false, { "lwin" : objLightWindow, "container" : viewer["container"], "image" : viewer["image"] } );
    
  }
                          
  return true;
};

XPhoto.prototype.createViewer = function ( )
{
  // Devo controllare che non sia già instanziato ( nel caso in cui istanziassimo più gallery ).
  if ( !$("xphotoViewer") )
  {
    // Instanzio l'oggetto contenitore
    var divContainer        = createElement ("div", "xphotoViewer");
    divContainer.id         = "xphotoViewer";
    divContainer.className  = "lightWin";   // Visto che l'id è riservato non mi interessa avere una classe collegata
  
    // Instanzio l'oggetto immagine
    var imgContainer        =  createElement ("img", "xphotoImage");
    imgContainer.id         = "xphotoImage";
    
    // Instanzio l'oggetto p 
    var p_obj               =  createElement ("p");
    
    // Instanzio l'oggetto link
    var a_obj               =  createElement ("a");
    a_obj.href              = "javascript:;";
    
    // Instanzio il nodo testuale per il link
    var a_text              = document.createTextNode("Chiudi");
  
    // Creo il dom tree
    a_obj.appendChild(a_text);
    p_obj.appendChild(a_obj);
    divContainer.appendChild(imgContainer);
    divContainer.appendChild(p_obj); 
    document.body.appendChild(divContainer);
    
  }
  
  return { "container" : divContainer , "image" : imgContainer, "link" : a_obj };
}

XPhoto.prototype.openWin = function ( e, idx, opt )
{
  $E.preventDefault(e);
  
  var link = this.parentNode.href;
  
  var new_img = new Image();

  var openShow = function ()
  {
    // Non abbiamo più gallery e viewImage
    opt["container"].style.width  = (new_img.width) + "px";
    opt["container"].style.height = (new_img.height) + "px";
    
    opt["image"].src = link;
      
    opt["lwin"].showWithFade();
    opt["lwin"].reposition();
    
  }
  
  $E.add( new_img, "load", openShow, false );
  
  new_img.src = link;

};

XPhoto.prototype.closeWin = function ( e, idx, opt )
{
  opt["lwin"].hideWithFade();
}

XPhoto.prototype.createMaskEffect = function ( img )
{
  var obj = $(img);
    
  var obj_span = createElement ("span", "");                                    // Creo l'elemento di span
  
  obj.parentNode.appendChild(obj_span);                                         // Inserisco lo span come figlio del link
  
  var viewMask =  function ()
                  {
                    obj_span.style.display = "inline";
                  };
  
  var hideMask =  function (e, idx)
                  {
                    obj_span.style.display = "none";
                  };
  
  // Controllo gli eventi mouse in e out  
  $E.add( obj.parentNode, "mouseover", viewMask, false );
  
  $E.add( obj.parentNode, "mouseout", hideMask, false );
};

})();