SlidingPages.prototype.addPage=function(name, link, image, position, text) {
  this.pages.push({name: name, link: link, image: image, position: position, text: text});
}

SlidingPages.prototype.insert=function(elementid) {
  this.id=elementid;
  this.element=Elem.getById(this.id);
  this.element.style.overflow='hidden';
  this.element.style.position='relative';
  this.slowness=10;
  
  var bounds=this.element.getBounds(); //this.element);
  var computedstyle=this.element.getEffectiveStyle("");
  var marginleft=parseInt(computedstyle.borderLeftWidth.substring(0,computedstyle.borderLeftWidth.length-2));
  var marginright=parseInt(computedstyle.borderRightWidth.substring(0,computedstyle.borderRightWidth.length-2));
  var margintop=parseInt(computedstyle.borderTopWidth.substring(0,computedstyle.borderTopWidth.length-2));
  var marginbottom=parseInt(computedstyle.borderBottomWidth.substring(0,computedstyle.borderBottomWidth.length-2));
  
  this.height=bounds.height;
  this.width=bounds.width-marginleft-marginright;
  this.paneWidth=this.width; //Math.floor(0.8*this.width);
  this.marginWidth=Math.floor((this.width-this.paneWidth)/2);
  
  this.images=new Array();
  for (i=0; i<this.pages.length; i++) {
    var image=new Image();
    image.src=this.pages[i].image;
    this.images.push(image);
  }
  
  hutmul="<div style='position: absolute; width: 10000px; bottom: 0; z-index: 500;' id='"+this.id+"-slider-nav' class='slider-nav'>";
  for (i=0; i<this.pages.length; i++) {
    var name=this.pages[i].name;
    var link=this.pages[i].link;
    hutmul+="<div id='"+this.id+"-slider-nav-link-page"+i+"' class='slider-nav-link' style='float: left;'><div class='slider-nav-link-inner'><a href='"+link+"'>"+name+"</a></div></div>";
  }  
  hutmul+="</div>";
  hutmul+="<div id='"+this.id+"-slider' style='width: 10000px; height: "+(this.height-this.navheight)+"px; overflow: hidden; position: absolute; z-index: 100; left: 0;'>";
  hutmul+="</div>";
  hutmul+="<div id='"+this.id+"-left-scroll' class='slider-left-scroll'></div>\n";
  hutmul+="<div id='"+this.id+"-right-scroll' class='slider-right-scroll'></div>\n";
  hutmul=hutmul.replace(/\&/g,"&amp;")
  this.element.innerHTML=hutmul;
  
  var here=this;
  var nav=Elem.getById(this.id+"-slider-nav");
  this.navheight=nav.getBounds().height+margintop+marginbottom;
  
  var scrollcontrolleft=Elem.getById(this.id+"-left-scroll");
  var scrollcontrolright=Elem.getById(this.id+"-right-scroll");
  scrollcontrolleft.style.top=(this.height-this.navheight)/2-22+"px";
  scrollcontrolright.style.top=(this.height-this.navheight)/2-22+"px";
  scrollcontrolleft.onclick=function() { here.scroll("left"); };
  scrollcontrolright.onclick=function() { here.scroll("right"); };
  
  setTimeout(function() { here.insertPhaseTwo(); }, 50);
}

SlidingPages.prototype.insertPhaseTwo=function() {
  var nav=document.getElementById(this.id+"-slider-nav");
  var links=nav.getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    var node=links.item(i);
    node.onmouseover=this.addOnClickShowPanel(i);
  }

  ready=true;
  for (i=0; i<this.images.length; i++) {
    if (!this.images[i].complete) ready=false;
  }
  
  var here=this;
  if (!ready) setTimeout(function() { here.insertPhaseTwo(); }, 50);
  else this.insertPhaseThree();
}

SlidingPages.prototype.addOnClickShowPanel=function(i) {
  var j=i;
  var here=this;
  return function() { here.showPanel(j, false); return false; };
}

SlidingPages.prototype.insertPhaseThree=function() {
  var slider=document.getElementById(this.id+"-slider");
  var image=this.images[this.images.length-1];
  var text=this.pages[this.pages.length-1].text;
  var position=this.pages[this.pages.length-1].position;
    
  var add=function(here, image, text, width, height, navheight, position, index) {
    var html='';
    var ttext=text;
    
    html+="<div class='slider-pane' id='"+here.id+"-pane-"+index+"' style='position: relative; float: left; overflow: hidden; height: "+(height+navheight)+"px; width: "+width+"px;'>";
    
    if (position=='top') {
      html+=  "<div class='blurb' width='100%' style='position: absolute; top: 0; z-index: 1000;'>"+text+"</div>";
    } else {
      html+="<div class='blurb' width='100%' style='position: absolute; bottom: "+navheight+"px; z-index: 1000;'>";
      html+="<div class='blurbinner'>"+text+"</div>";
      html+="</div>";
    }
    
    html+=  "<img src='"+image.src+"' width='"+image.width+"' height='"+image.height+"' />";
    html+="</div>";
    return html;
  }

  hutmul="";
  hutmul+=add(this, image, text, this.paneWidth, this.height-this.navheight, this.navheight, position, -1);
  for (i=0; i<this.pages.length; i++) {
    image=this.images[i];
    text=this.pages[i].text;
    position=this.pages[i].position;
    hutmul+=add(this, image, text, this.paneWidth, this.height-this.navheight, this.navheight, position, i);
  }
  
  image=this.images[0];
  text=this.pages[0].text;
  position=this.pages[0].position;
  hutmul+=add(this, image, text, this.paneWidth, this.height-this.navheight, this.navheight, position, this.pages.length);
  slider.innerHTML=hutmul;

  for (i=-1; i<=this.pages.length; i++) {
    var pane=Elem.getById(this.id+"-pane-"+i);
    var here=this;
    var index=(i+this.pages.length) % this.pages.length;
  }

  var firstpane=Elem.getById(this.id+"-pane--1");
  var computedstyle=firstpane.getEffectiveStyle("");
  var fpbounds=firstpane.getBounds();
  this.paneWidth=fpbounds.width;
  this.marginWidth=Math.floor((this.width-this.paneWidth)/2);
  
  this.showPanel(this.startPanel, false);
}

SlidingPages.prototype.scroll=function(direction) {
  if (direction=='left') {
    this.showPanel(this.currentPage-1, false, false);
  } else if (direction=='right') {
    this.showPanel(this.currentPage+1, false, false);
  }
}

SlidingPages.prototype.showPanel=function(number, instant, ignorewrap) {
  var selected=document.getElementById(this.id+"-slider-nav-link-page"+this.currentPage);
  selected.className="slider-nav-link";

  selected=document.getElementById(this.id+"-slider-nav-link-page"+((number+this.pages.length) % this.pages.length));
  selected.className="slider-nav-link-selected";

  this.currentPage=(number+this.pages.length) % this.pages.length;

  if (instant) {
    this.setPosition(-(number+1)*this.paneWidth+this.marginWidth);
  } else {
    this.scrollTo(-(number+1)*this.paneWidth+this.marginWidth, ignorewrap);
  }
}

SlidingPages.prototype.scrollTo=function(pos, ignorewrap) {
  var sliderpos=document.getElementById(this.id+"-slider").style.left;
  this.startpos=parseInt(sliderpos.substring(0, sliderpos.length-2));
  this.endpos=parseInt(pos);
  this.velocity=(this.startpos<this.endpos) ? 1 : -1;
  this.animate(ignorewrap);
}

SlidingPages.prototype.animate=function(ignorewrap) {
  var sliderpos=document.getElementById(this.id+"-slider").style.left;
  var nowpos=parseInt(sliderpos.substring(0, sliderpos.length-2));
  
  if (!ignorewrap) {
    if (nowpos<(-this.pages.length)*this.paneWidth) {
      nowpos+=(this.pages.length)*this.paneWidth;
      this.endpos+=(this.pages.length)*this.paneWidth;
      this.startpos+=(this.pages.length)*this.paneWidth;
      this.setPosition(nowpos);
    }
  
    if (nowpos>=0) {
      nowpos-=(this.pages.length)*this.paneWidth;
      this.endpos-=(this.pages.length)*this.paneWidth;
      this.startpos-=(this.pages.length)*this.paneWidth;
      this.setPosition(nowpos);
    }
  }
  
  if (nowpos!=this.endpos) {
    var m=(this.startpos+this.endpos)/2;
    var mlessnow=(m-nowpos)/(this.startpos-m);
    var m2=mlessnow*mlessnow;
    var vmax=Math.abs((this.startpos-this.endpos))/this.slowness;
    this.velocity=vmax-(vmax*m2)+1

    if (this.startpos>this.endpos) {
      if (nowpos+this.velocity>this.endpos) {
        this.setPosition(nowpos-this.velocity);
      } else {
        this.setPosition(this.endpos);
      }
    } else {
      if (nowpos+this.velocity<this.endpos) {
        this.setPosition(nowpos+this.velocity);
      } else {
        this.setPosition(this.endpos);
      }
    }
    
    var here=this;
    setTimeout(function() { here.animate(ignorewrap); }, 10);
  }
}

SlidingPages.prototype.setPosition=function(pos) {
  var slider=document.getElementById(this.id+"-slider");
  slider.style.left=pos+"px";
}

SlidingPages.prototype.setStartPanel=function(start) {
  this.startPanel=start;
}

function SlidingPages() {
  this.pages=new Array();
  this.currentPage=0;
  this.startPanel=0;
}