function initImageNav(onbody){
  if(document.imagenavinit)
    return;

  var viewportHeight = 31;
  var height = 307;
  
  var imgnav = document.getElementById('imagenavviewport');
  var img = document.getElementById('image');
  var list = document.getElementById('imagenavlist');
  if(imgnav!=null && img!=null && list!=null){
    imgnav.className += " imagenavjs";   
    var children = list.childNodes;
		if(children!=null){
			for(var i=0;i<children.length;i++){
        if(children[i].firstChild.className.length==0)
          children[i].firstChild.className = 'load';
        else if(children[i].firstChild.className=='current')
          children[i].firstChild.className = 'current load';
      }
    }  
    
    
    if(!onbody)
      return;
        
    imgnav.toNumber = function(v){
      if(v==null) return 0;
      return (""+v).toUpperCase().replace("PX","")*1;
    }
    imgnav.mouseMove = function(evt){
      var m = AJS.getMousePos(evt);
      var my = m.y-this.initpos.y;
      if(AJS.isIe())
        my += AJS.getScrollTop();
      var min = 0;
      var max = this.height;
      if(this.listHeight<this.height){
        min = this.viewportHeight/2;
        max = this.listHeight-(this.viewportHeight/2);
      }
      if(my>=min && my<=max){
        this.currentMousePos = my;
      }
    }
    imgnav.mouseOver = function(evt){
      if(this.miid==null)
        this.miid = window.setInterval (this.bind(this.onMouseInterval,this), 50);
    }
    imgnav.mouseOut = function(evt){
      window.clearInterval(this.miid);
      this.miid = null;
    }
    imgnav.onMouseInterval = function(){
      var y = this.toNumber(this.list.style.top);
          
      
      if(this.images.length>10){
        var f = 1;
        var m = 0;
        //Top
        if(this.currentMousePos<=(this.viewportHeight/3)){
          var s = ((this.viewportHeight)/3-this.currentMousePos)*f;
          if((y+s)<=0){
            m = s;
          }
          else {
            m = Math.abs(y);
          }
        }
        //Bottom
        else if(this.currentMousePos>=(this.height-(this.viewportHeight/3))){
          var s = -((this.viewportHeight/3)-(this.height-this.currentMousePos))*f;
          if((y+s)>=-(this.listHeight-this.height-3)){
            m = s-1;
          }
          else {
            m = -(this.listHeight-this.height+y-3);
          }
        }
        if(m!=0){
          this.list.style.top = (y+m)+'px';
        }
      }
      
      //Activate
      if(this.images.length>0){
        var p = (-y+this.currentMousePos)/(this.viewportHeight);
        p = Math.floor(p);
        if(this.currentPos!=p){
          for(var i=0;i<this.list.childNodes.length;i++){
            if(this.list.childNodes[i].firstChild.className!='load'){
              this.list.childNodes[i].firstChild.className = (i==this.currentImage?'current':'');
            }
          }
          if(this.list.childNodes[p]!=null && this.list.childNodes[p].firstChild.className!='load')
            this.list.childNodes[p].firstChild.className = 'active'+(p==this.currentImage?' current':'');
        }
        this.currentPos = p;
      }
    }
    imgnav.onTransitionInterval = function(){
      if(this.fadeOut==null)
        this.fadeOut = true;
      var step = 0.2;
      var op = this.img.currentOpacity;
      if(op==null || op.length==0)
        op = '1';
      op = Math.round(op*10)/10;

      if(this.fadeOut){
        op -= step;
        if(op>=0){
          this.img.currentOpacity = op;
          this.img.style.opacity = op;
          this.img.style.filter = 'alpha(opacity='+Math.floor(op*100)+')';
        }
        else {
          if(this.loadImgSrc!=null && this.loadImgSrc.length>0)
            this.img.src = this.loadImgSrc;
          this.fadeOut = false;
        }
      }
      else {
        op += step;
        if(op<=1){
          this.img.currentOpacity = op;
          this.img.style.opacity = op;
          this.img.style.filter = 'alpha(opacity='+Math.floor(op*100)+')';
        }
        else {
          window.clearInterval(this.tiid); 
          this.tiid = null;
          this.fadeOut = true;
        }
      }
    }
    imgnav.load = function(imgNr){
      if((''+typeof(imgNr)).toLowerCase()=='object'){
        imgNr = this.currentPos;
        var y = this.toNumber(this.list.style.top);
        var hi = Math.max(Math.round(Math.abs(y)/this.viewportHeight),0);
        this.selectionPos = this.currentPos-hi;
      }
      var img = this.images[imgNr];
      if(img!=null){
        if(this.tiid==null && img.loaded && imgNr!=this.currentImage){
          this.list.childNodes[this.currentImage].firstChild.className = '';
          this.list.childNodes[imgNr].firstChild.className = 'current';
          this.currentImage = imgNr;
          this.loadImgSrc = img.src;
          this.tiid = window.setInterval (this.bind(this.onTransitionInterval,this), 50);
        }
      }
    }
    imgnav.loaded = function(nbr){
      var img = this.list.childNodes[nbr];
      if(img!=null){
        img = img.firstChild;
        if(img.className=='load')
          img.className = '';
      }
      if(this.images[nbr]!=null)
        this.images[nbr].loaded = true;
    }
    imgnav.buttonDown = function(obj){
      this.buttonUp();
      this.biid = window.setInterval (this.bind(this.onMove,this,obj.element.id=='imagenavtop'), 50);
    }
    imgnav.buttonUp = function(){
      window.clearInterval(this.biid);
    }
    imgnav.onMove = function(up){
      var y = this.toNumber(this.list.style.top);
      
      var speed = 10;
      var m = 0;
      if(up){
        var s = speed;
        if((y+s)<=0){
          m = s;
        }
        else {
          m = Math.abs(y);
        }
      }
      else {
        var s = -speed;
        if((y+s)>=-(this.listHeight-this.height-3)){
          m = s;
        }
        else {
          m = -(this.listHeight-this.height+y-3);
        }
      }
      if(m!=0){
        this.list.style.top = (y+m)+'px';
      }
    }
    imgnav.showNext = function(){
      if(this.tiid!=null)
        return;
      var nr = this.currentImage+1;
      if(nr>=this.images.length)
        nr = 0;
      this.load(nr);
      this.scrollIntoView();
    }
    imgnav.scrollIntoView = function(){
      if(this.images.length>10){
        var p = this.currentImage-this.selectionPos;
        var m = this.images.length-10;
        if(p<m){
          p = Math.max(p,0);
          this.list.style.top = (-p*this.viewportHeight)+'px';
        }
        else {
          this.list.style.top = (-m*this.viewportHeight)+'px';
        }
      }
    }
    imgnav.bind = function(func,obj,arg){
      return function () { return func.call (obj,arg); }; 
    }
    
    imgnav.currentPos=0;
    imgnav.currentImage=0;
    imgnav.selectionPos=0;
    imgnav.images = new Array();
    var children = list.childNodes;
		if(children!=null){
			for(var i=0;i<children.length;i++){
        if(children[i].firstChild.className.indexOf('current')!=-1){
          imgnav.currentPos = i;
          imgnav.currentImage = i;
        }
        children[i].firstChild.className = 'load';
        //Preload
        imgnav.images.push(new Image());
        /*var url = children[i].firstChild.style.backgroundImage;
        url = url.substring(url.indexOf('(')+1,url.length);
        url = url.substring(0,url.indexOf(')'));
        url = url.trim();*/
        var url = children[i].firstChild.firstChild.firstChild.src;
        url = url.replace('=image_preview','=image');
        imgnav.images[imgnav.images.length-1].src = url;
        imgnav.images[imgnav.images.length-1].onload = imgnav.bind(imgnav.loaded,imgnav,i);
				children[i].href='javascript:void(0)';
        children[i].onclick=function(){this.blur();};
			}
		}
    if(imgnav.currentImage<=9)
      imgnav.selectionPos = imgnav.currentImage;
    
    imgnav.img = img.firstChild;
    Event.register(imgnav.img,'click',Event.bind(imgnav.showNext,imgnav));
    imgnav.img.style.cursor = 'pointer';
    
    imgnav.height = height;
    imgnav.viewportHeight = viewportHeight
    imgnav.listHeight = imgnav.images.length*viewportHeight;

    imgnav.list = list;
    
    imgnav.initpos = AJS.absolutePosition (imgnav);
    
    list.childNodes[imgnav.currentPos].firstChild.className = 'current';
    imgnav.images[imgnav.currentPos].loaded = true;
        
    Event.register(imgnav,'mousemove',Event.bind(imgnav.mouseMove,imgnav));
    Event.register(imgnav,'mouseover',Event.bind(imgnav.mouseOver,imgnav));
    Event.register(imgnav,'mouseout',Event.bind(imgnav.mouseOut,imgnav));
    Event.register(imgnav,'click',Event.bind(imgnav.load,imgnav));   

    if(imgnav.images.length>10){
      var top = document.getElementById("imagenavtop");
      top.style.visibility = 'visible';
      Event.register(top,'mousedown',Event.bind(imgnav.buttonDown,imgnav));  
      Event.register(top,'mouseup',Event.bind(imgnav.buttonUp,imgnav));  
      var bottom = document.getElementById("imagenavbottom");
      bottom.style.visibility = 'visible';
      Event.register(bottom,'mousedown',Event.bind(imgnav.buttonDown,imgnav));  
      Event.register(bottom,'mouseup',Event.bind(imgnav.buttonUp,imgnav)); 
      imgnav.scrollIntoView();
    }
    document.imagenavinit=true;
  }
}