function thumb_index(id,size,query,list_info,thumb_href){
  this.id = id;
  this.prev_button = g(id + '_idxprev');
  this.next_button = g(id + '_idxnext');
  this.label =g(id + '_idxlabel');
  this.size = size;
  this.container = g(id + '_framecontainer');
  this.frames = new Array();
  this.images = new Array();
  this.prev_button.root = this.next_button.root = this.container.root = this;
  this.list_info = list_info;
  this.page = 1;
  this.total_page = undefined;  
  this.thumb_href = thumb_href
  
  this.goto_page = function(page){
    if(page<1)page= 1;

    start = this.size * (page - 1);
    if((start+1)>this.list_info.length)return;
    this.label.innerHTML = (start +1) + (this.size>1?'-'+ (start + this.size) :'') + ' of ' + this.list_info.length; 
    n = 0;  

    for(i= start; i<start + this.size; i++){
      //alert(this.frames[n].o_title + ' = ' + this.list_info[i].title);
      if(typeof(this.list_info[i]) != 'undefined'){
        idx_src = 'http://farm'+ this.list_info[i].farm +'.static.flickr.com/'+ this.list_info[i].server +'/'+ this.list_info[i].id +'_'+ this.list_info[i].secret  +'_m.jpg';
        
        if(typeof(this.images[i]) == 'undefined'){
            this.images[i] = new Image();
            this.images[i].frame = this.frames[n];
            this.images[i].frame.root = this;
            this.images[i].onload = this.img_onload;
            

        }
        this.images[i].src = idx_src;
        this.frames[n].o_title.innerHTML = this.list_info[i].title;
        this.frames[n].o_link.href = this.thumb_href + '&pidx=' + i;
           
        //this.frames[n].o_img.src= idx_src;
        //this.frames[n].o_title.style.overflow= 'hidden';
        //this.frames[n].o_title.style.width= this.frames[n].o_img.width;
        
        this.frames[n].style.display= '';      
      }else{
        //this.frames[n].style.display= 'none';      
      }
      n++;

    }
    this.page = page;        
  } 
  
  this.go_prev = function(){
    this.root.goto_page(this.root.page-1);  
    return false;
  }
  this.go_next = function(){
    this.root.goto_page(this.root.page+1);  
    return false;
  }

  this.set_new_img = function(o_frame,img){
    //setTimeout(function(){o_frame.o_img.src = img.src;},200);
    o_frame.o_img.morph('width:' + img.width  +'px;' + 'height:'+ img.height +'px;' );
    o_frame.o_img.src = img.src;
    new Effect.Morph(this.frame.o_img,{
      style:'opacity:1',
      duration:0.3      });    
    //alert(obj);
  }
  this.img_onload = function(){
    
    new Effect.Morph(this.frame.o_img,{
      style:'width:'+ (this.width) +'px;' + 'height:'+ (this.height) +'px;opacity:0',
      duration:0.7,
      afterFinish:Delegate.create(this,this.frame.root.set_new_img,[this.frame,this]  )    
      });   

    new Effect.Morph(this.frame.o_title,{
      style:'width:'+ (this.width) +'px;',
      duration:0.7    
      });       

  }
  

  
  this.init = function(){
    for(i=0; i<this.container.childNodes.length; i++){
      if(this.container.childNodes[i].className =='index_frame'){
        this.frames.push(this.container.childNodes[i]);  
        this.frames[this.frames.length-1].o_link = g(this.id + '_index_' + i);        
        this.frames[this.frames.length-1].o_img = g(this.id + '_indeximg_' + i);        
        this.frames[this.frames.length-1].o_title = g(this.id + '_indextitle_' + i);
        this.frames[this.frames.length-1].o_img.frame = this.frames[this.frames.length-1].o_title.frame = this.container.childNodes[i];
        this.frames[this.frames.length-1].root = this;
        this.frames[this.frames.length-1].o_title.style.width = this.frames[this.frames.length-1].o_img.width +'px';
        // this.frames[this.frames.length-1].o_img.onload= this.img_onload;
        this.frames[this.frames.length-1].o_link.href = this.thumb_href +'&pidx=' + i ;
        
      }
    }
    this.label.innerHTML = '1' + (this.size>1?'-'+ this.size :'') + ' of ' + this.list_info.length; 
    this.label.style.width =   '160px';
    // hide controls if no paging
    if(this.list_info.length == this.size){
      this.prev_button.style.display = this.next_button.style.display = this.label.style.display = 'none';
    }
  }  
  
  this.prev_button.onclick = this.go_prev;
  this.next_button.onclick = this.go_next;
  
  this.init();
}



function thumb_slider(id,size,query,list_info,thumb_href){
  this.id = id;
  
  this.prev_button = g(id +'_prev');  
  this.next_button = g(id +'_next');  
  this.slider_container = g(id + '_container');
  this.slider_pan = g(id + '_pan');
  this.size = size;
  this.prev_button.root = this.next_button.root = this.slider_container.root = this.slider_pan.root = this;
  this.slider_pan.style.left = '0px'; // reset to zero
  this.max_offset = undefined;
  this.left = 0;
  this.offset = 0;
  this.query = query;
  this.list_info = list_info;
  
  this.thumb_href = thumb_href
  
  this.screen_img = g(id+'_screen_img');
  if(this.screen_img){
    if(this.screen_img!=null){
      this.screen_img.root = this;
    }    
  }
  
  if(list_info.length <= size){
    this.prev_button.style.display = 'none';
    this.next_button.style.display = 'none';
      
  }

  this.jump = function(_jump){
    if((this.offset + _jump)<0)return;
    if(this.max_offset!=undefined){
      if(this.offset + _jump > this.max_offset)return;
    }

    if(this.ajax == undefined)this.ajax = new ajax();
    
    this.offset += _jump;
    if(_jump>0){
      request_idx = (this.offset + this.size -1);
    }else{
      request_idx = (this.offset);
    }

    if(this.list_info!= undefined){
      if(this.list_info[request_idx]){
        this.insert_thumb(_jump,request_idx);
        return;  
      }  
    }    
  
    // Do AJAX request
    this.ajax.wait = false;    
    if(!g(this.id +'_thumb_' + request_idx)){
      if(this.ajax.readyState()==4 || this.ajax.readyState() ==0){
        this.ajax = new ajax();
      }
      // alert(this.ajax.readyState());
      if(this.ajax.readyState()==0|| this.ajax.readyState()==4){        
        this.ajax.query('http://www.fibc.org/inc/flickrtools/gallery.thumb.php','POST','idx='+ request_idx +'&'+ this.query, Delegate.create(this, this.insert_thumb, [_jump]));
      }
    }else{
      //left = parseFloat(this.slider_pan.style.left.replace(/px/,'')) ;
      this.slide_to_offset(this.offset); 
    }
  }  


  this.thumb_click = function(){
    idx = this.id.match(  /([0-9]+)$/)[0];    
    if(!this.parentNode.root.screen_img){
      if(this.parentNode.root.thumb_href!=''){
        document.location =   unescape(this.parentNode.root.thumb_href + '&pidx=' + idx ) ;
      }
      return false;
    }

    if(this.parentNode.root.list_info!=undefined){
      this.parentNode.root.display_screen(idx);
    }else{
      this.parentNode.root.get_screen( idx );  
    }
    if(this.parentNode.root.offset == idx){

      this.parentNode.root.prev_button.onclick();
    }
    if(this.parentNode.root.offset + this.parentNode.root.size-1 == idx){
      this.parentNode.root.next_button.onclick();
      
    }
    
    return false;
  }
  this.get_screen = function(idx){
    if(this.ajax == undefined)this.ajax = new ajax();
    if(this.ajax.readyState()==4 || this.ajax.readyState() ==0){
      this.ajax = new ajax();
    }        
    if(this.ajax.readyState()==0|| this.ajax.readyState()==4){        
   
      this.ajax.query('http://www.fibc.org/inc/flickrtools/gallery.thumb.php','POST','get=screen&idx='+ idx +'&'+ this.query, Delegate.create(this, this.display_screen,[]));
    }
  }
  
  this.display_screen = function(idx){
    new Effect.BlindUp( g(this.id + '_screen'), {duration:0.2, afterFinish:Delegate.create(this,this.re_appear,[idx]) } );
  }
  
  this.re_appear = function(idx){
    if(idx!=undefined){
      idx_src = 'http://farm'+ this.list_info[idx].farm +'.static.flickr.com/'+ this.list_info[idx].server +'/'+ this.list_info[idx].id +'_'+ this.list_info[idx].secret  +'.jpg';
      g(this.id + '_screen_img').src = idx_src;  // trigger the img.onload when img loaded
      g(this.id + '_screen_title').innerHTML = this.list_info[idx].title;    
    }else{
      if(this.ajax.readyState()==4){
        eval('o_ret=' + this.ajax.responseText() + ';');
        g(this.id + '_screen_img').src = o_ret.src;     // trigger the img.onload when img loaded
        g(this.id + '_screen_title').innerHTML = o_ret.title;    
          
      }  
    }    
  }
  if(this.screen_img){
    this.screen_img.onload = function(){
      if(g(this.root.id +'_screen') ){  
        new Effect.BlindDown( g(this.root.id + '_screen'), {duration:0.5} );
      }
    }
  }
  
  this.insert_thumb = function(jump,idx){
     // g("debug").innerHTML += this.ajax.readyState(); 
     
    if(this.list_info!=undefined){


      if(this.list_info[idx]==undefined){
        this.max_offset = this.offset;
        return;        
      }


      if(!g(this.id +'_thumb_' + idx)){ 

        o_a = document.createElement('A');
         o_a.href = '#';
        o_a.id = this.id + '_thumb_'+ idx;
        o_a.className = 'slider_thumb';
        o_a.style.left = (idx * 76) + 'px';
        o_a.title = this.list_info[idx].title;
        this.slider_pan.appendChild(o_a);
        
        idx_src = 'http://farm'+ this.list_info[idx].farm +'.static.flickr.com/'+ this.list_info[idx].server +'/'+ this.list_info[idx].id +'_'+ this.list_info[idx].secret  +'_s.jpg';
        
        o_a.innerHTML = '<span><img src="' +  idx_src + '" border="0"></span>';
        o_a.onclick = this.thumb_click;
        //o_a.idx = idx;        
      }

      this.slide_to_offset(this.offset)        

    }else{        
      if(this.ajax.readyState()==4){
        eval('o_ret=' + this.ajax.responseText() + ';');
        
        if(o_ret.src == null){
          this.offset -=jump;
          this.max_offset = this.offset;
          return;
        }
        idx = o_ret.idx;
        
        if(!g(this.id +'_thumb_' + idx)){ 
          o_a = document.createElement('A');
          // o_a.href = '#';
          o_a.id = this.id + '_thumb_'+ idx;
          o_a.className = 'slider_thumb';
          o_a.style.left = (idx * 76) + 'px';
          this.slider_pan.appendChild(o_a);
          o_a.innerHTML = '<span><img src="' +  o_ret.src + '" border="0"></span>';
          o_a.onclick = this.thumb_click;
          //o_a.idx = idx;        
        }
        this.slide_to_offset(this.offset)      
      }
    }
    

  }
  
  this.slide_to_offset = function(offset){
    //left = parseFloat(this.slider_pan.style.left.replace(/px/,'')) ;

    var left = -offset * 76;

    //this.slider_pan.style.left = (left- (jump * 76)) + 'px';   
    new Effect.Move(this.slider_pan, {x: left , y:0,mode:'absolute' ,duration: 0.1,  transition: Effect.Transitions.sinoidal});
    
  }     
  this.insert_thumb.root = this;
  
  this.go_prev = function(){
    this.root.jump(-1);
    return false;
  }
  
  this.go_next = function(){
    this.root.jump(1);
    return false;
  } 

  this.init = function(){
    for(i=0;i<this.slider_pan.childNodes.length;i++){
      this.slider_pan.childNodes[i].onclick = this.thumb_click;
    }
  }
  this.set_offset = function(offset){
    this.offset = offset;
    this.slider_pan.style.left = (offset * -76) +'px';
  }
  this.prev_button.onclick = this.go_prev;
  this.next_button.onclick = this.go_next;
  this.init();
}

Delegate = {
    create: function (obj, func, params)
    {
        var f = function()
        {
            return func.apply(obj, params);
        };
        return f;
    }
}

function g(id){
  return document.getElementById(id);  
}