/*
ThumbThru v0.1
Copyright 2008 Mike Angstadt
mike.angstadt@gmail.com
http://www.mangst.com/projects/thumb-thru/
*/

/*
Constructor.
varName: the name of the variable this new instance is being assigned to.
*/
function ThumbThru(varName){
  this.varName = varName;
  this.photos = [];
  this.photoIdPrefix = 'p_';
  this.numberIdPrefix = 'n_';
  this.numberCols = 8;
  this.numberRowWidth = 400;
  this.curPhotoIndex = 0;
  this.prevHtml = '< prev';
  this.nextHtml = 'next >';
}

/*
Adds a photo to the gallery.
url: the URL to the photo
description: the description to give the photo
*/
ThumbThru.prototype.add = function(url, description){
  with(this){
    photos[photos.length] = {'url':url, 'description':description};
  }
}

/*
Displays the photo gallery.
*/
ThumbThru.prototype.display = function(){
  document.write('<div class="thumbThru">');
  
  with(this){
    if (photos.length > 0){
      document.write('<div class="nav"><table cellpadding="0" cellspacing="0" border="0"><tr>');

      //prev
      document.write('<td class="prevNext"><a href="#" onclick="' + varName + '.prev();return false;">' + prevHtml + '</a></td>');

      //numbers
      document.write('<td class="numbers" width="' + numberRowWidth + '"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>');
      var cellWidth = numberRowWidth / numberCols;
      var i;
      for (i = 0; i < photos.length; ++i){
        if (i % numberCols == 0 && i != 0){
          document.write('</tr><tr>');
        }
        document.write('<td id="' + getNumberId(i) + '" style="cursor:pointer;" width="' + cellWidth + '" onclick="' + varName + '.show(' + i + ');return false;">' + (i+1) + '</td>');
      }
      for (var j = i % numberCols; j < numberCols; ++j){
        document.write('<td> </td>');
      }
      document.write('</tr></table></td>');

      //next
      document.write('<td class="prevNext"><a href="#" onclick="' + varName + '.next();return false;">' + nextHtml + '</a></td>');

      document.write('</tr></table></div>');

      //photos
      for (var i = 0; i < photos.length; ++i){
        document.write('<div class="photo" id="' + getPhotoId(i) + '">');
        document.write('<a href="#" onclick="' + varName + '.next();return false;"><img src="' + photos[i].url + '" /></a>');
        document.write('<div class="description">' + photos[i].description + '</div>');
        document.write('</div>');
      }

      //make the first photo visible
      show(0);
    }
    else{
      document.write('No photos to display.');
    }
  }

  document.write('</div>');
}

/*
Moves to the previous photo.
*/
ThumbThru.prototype.prev = function (){
  with(this){
    show(curPhotoIndex - 1);
  }
}

/*
Moves to the next photo.
*/
ThumbThru.prototype.next = function (){
  with(this){
    show(curPhotoIndex + 1);
  }
}

/*
Shows a photo given its index.
index: the index of the photo...out-of-bounds values are accounted for
*/
ThumbThru.prototype.show = function (index){
  with(this){
    //account for out of bounds
    if (index >= photos.length){
      index = 0;
    }
    if (index < 0){
      index = photos.length - 1;
    }
    
    //hide all
    for (i = 0; i < photos.length; ++i){
      document.getElementById(getPhotoId(i)).style.display = 'none';
      document.getElementById(getNumberId(i)).className = 'numberInactive';
    }
    
    //show photo
    document.getElementById(getPhotoId(index)).style.display = 'block';
    document.getElementById(getNumberId(index)).className = 'numberActive';
    
    curPhotoIndex = index;
  }
}

/*
Gets the ID of a number link
index: the index of the number link
*/
ThumbThru.prototype.getNumberId = function (index){
  return this.numberIdPrefix + index;
}

/*
Gets the ID of a photo.
index: the index of the photo
*/
ThumbThru.prototype.getPhotoId = function (index){
  return this.photoIdPrefix + index;
}

/*
Sets the HTML displayed for the "previous photo" link.
*/
ThumbThru.prototype.setPrevHtml = function (prevHtml){
  this.prevHtml = prevHtml;
}

/*
Sets the HTML displayed for the "next photo" link.
*/
ThumbThru.prototype.setNextHtml = function (nextHtml){
  this.nextHtml = nextHtml;
}

/*
Sets the number of numbers that appear per row
*/
ThumbThru.prototype.setNumbersPerRow = function (num){
  this.numberCols = num;
}

/*
Sets the width of each number row
*/
ThumbThru.prototype.setNumberRowWidth = function (width){
  this.numberRowWidth = width;
}