var gallery = null;

function Gallery(parent){
  this.loading_img = new Image();
  this.loading_img.src = 'img/loading.gif';
  
  this.img = document.createElement('img');  
  this.img.id = 'gallery_preview';
  this.img.src = this.loading_img.src;
  this.img.title = 'Click to close';
  this.img.alt = 'Click to close';
  
  this.div_img = document.createElement('div');
  this.div_img.appendChild(this.img);
  
  this.img_close = document.createElement('img');  
  this.img_close.id = 'gallery_preview';
  this.img_close.src = 'img/close.gif';
  this.img_close.title = 'Click to close';
  this.img_close.alt = 'Click to close';
  addEvent(this.img_close, 'click', hide_preview);
  
  this.div_close = document.createElement('div');
  this.div_close.id = 'gallery_btn_close';
  this.div_close.appendChild(this.img_close);
  
  
  this.container = document.createElement('div');
  this.container.id = 'gallery_container';
  
  this.container.appendChild(this.div_img);
  this.container.appendChild(this.div_close);
  
  this.overlay = document.createElement('div');
  this.overlay.id = 'gallery_overlay';
  this.overlay.FadeState = -2;
  addEvent(this.overlay, 'click', hide_preview);
  this.overlay.appendChild(this.container);
  
    
  $(parent).appendChild(this.overlay);                        
  //$(parent).appendChild(this.container);
  setup_gallery();
  
  function setup_gallery(){
    var nodes = $('gallery').getElementsByTagName('*');
    for(var i = 0; i < nodes.length; ++i){
      var f = nodes[i];
      if(f.href && hasClass(f, 'thumb')){
        //addEvent(f, 'click', show_preview);    
        f.onclick = show_preview;
      }  
    }
  }
  
  function hide_preview(){
    //gallery.overlay.FadeState = -1;
    fade(gallery.overlay.id);
    //gallery.overlay.style.display = 'none';
    return false;
  }
  
  function show_preview(){
    var ele = this;
    if(gallery.overlay.style.display != 'block'){
      var preloader = new Image();
      
      addEvent(preloader, 'load', 
      function(){
            gallery.img.src = ele.href;
            gallery.container.style.left = getPosLeft() + ((getPageWidth() / 2) - (preloader.width /2)) + 'px';
            gallery.container.style.top = getPosTop() + (getPageHeight() / 10) + 'px';
        });
        
      preloader.src = ele.href;
      gallery.img.src = gallery.loading_img.src;
      
      gallery.container.style.left = getPosLeft() + ((getPageWidth() / 2) - (gallery.img.width /2)) + 'px';
      gallery.container.style.top = getPosTop() + (getPageHeight() / 10) + 'px';
        
      var size = getPageSize();    
        
      gallery.overlay.style.width = size[0] + 'px';
      gallery.overlay.style.height = size[1] + 'px';
      gallery.overlay.style.display = 'block';
      fade(gallery.overlay.id);
    }
    
    return false;          
}
  
}

var TimeToFade = 500.0;

function fade(eid){  
  var element = $(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null){
    if(element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1'){
      element.FadeState = 2;
    }else{
      element.FadeState = -2;
    }
  }
    
  if(element.FadeState == 1 || element.FadeState == -1){
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }else{
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'"+ eid +"')", 33);
    //setTimeout( function(){animateFade(new Date().getTime(), element)}, 33);
  }  
}

function animateFade(lastTick, eid){  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = $(eid);
  
  if(element.FadeTimeLeft <= elapsedTicks){
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = ' 
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    if(element.FadeState == -2){
      element.style.display = 'none';
    }
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
  //setTimeout( function(){animateFade(curTick, element)}, 33);
}

function _init(){
  gallery = new Gallery('gallery_preview');
}

addEvent(window, 'load', _init);