function changeImageState(image, forceState) {
  var state = forceState;
  try {
    if (image.src.indexOf('off.') > 0) {
      if (state == null) state = "on";
      image.src = image.src.replace(/off\./, state + ".");
    } else {
      if (state == null) state = "off";
      image.src = image.src.replace(/on\./, state + ".");
    }
  } catch(e) {}
}

function selectTab(name) {
  try {
    panel = document.getElementById(name + "Panel");
    tab = document.getElementById(name + "Tab");
    tab.className = "selected";
    panel.style.display = "block";
  } catch(e) {}
}

function unselectTab(name) {
  try {
    panel = document.getElementById(name + "Panel");
    tab = document.getElementById(name + "Tab");
    tab.className = " ";
    panel.style.display = "none";
  } catch(e) {}
}

/* ============ START Photo Viewer Generator ============ */
function PhotoViewer() {
  this.photos = new Array();
  this.photo_index = new Array();
  this.max_shown = 5;
  this.photo_width = 90;
  this.activePhotoIndex = 0;
  this.slideshow = false;
  this.slideshowTimer = 3000;
  
  this.fullViewLinkID = "photo_viewer_full_link";
  this.playAsSlideshowLinkID = "photo_viewer_slideshow_link";
  this.mainImageID = "photo_viewer_main_image";
  this.photoTitleID = "photo_title";
  this.photoDescriptionID = "photo_description";
  this.photoAuthorID = "photo_author";
  this.photoDateID = "photo_date";
  this.ids = {'photoHolderID': 'photo_tiles' }
}

PhotoViewer.prototype.queuePhoto = function(photo_id, thumbnail_url, large_url, title, description, uploader, date) {
  if (title == null || title.length == 0) title = "[No Title]";
  if (description == null || description.length == 0) description = "[No description]";
//  if (uploader == null || uploader.length == 0) uploader = "Unknown";
  uploader = "";
  if (date == null || date.length == 0) date = "Unknown";
  var photo = { 'photo_id': photo_id,
                'thumbnail_url': thumbnail_url,
                'large_url': large_url,
                'title': title,
                'description': description,
                'uploader': uploader,
                'date': date};
  this.photo_index[photo_id] = this.photos.length;
  this.photos.push(photo);
}

PhotoViewer.prototype.renderSlider = function(target, activePhoto) {
  var self = this;
  if (activePhoto != null) {
    this.activePhotoIndex = this.photo_index[activePhoto] == undefined?0:this.photo_index[activePhoto];
  }
  if (this.photos.length % this.max_shown > 0) {
    remnant = Math.ceil(this.photos.length / this.max_shown) * this.max_shown - this.photos.length;
    for (i=0; i<remnant; i++) {
      this.queuePhoto(-1);
    }
  }
  
  window_size = this.max_shown * this.photo_width;
  total_width = this.photos.length * this.photo_width;

  var slider = document.createElement("table");
  var galRow = slider.insertRow(-1);
  
  /*previous button*/
  var prevBtnHolder = galRow.insertCell(-1);
  var prevBtn = document.createElement("a");
  prevBtn.className = "slider_button fakeLink";
  prevBtn.onclick = function() { self.scroller(self.ids.photoHolderID, window_size, 1); }
  var prevBtnImage = document.createElement("img");
  prevBtnImage.border = 0;
  prevBtnImage.onmouseover = function () { if (self.canscroll(this, self.ids.photoHolderID, window_size, 1)) changeImageState(this, 'on'); }
  prevBtnImage.onmouseout = function() { changeImageState(this, 'off'); }
  prevBtnImage.src = "/images/prev_arrow.gif";
  prevBtn.appendChild(prevBtnImage);
  prevBtnHolder.appendChild(prevBtn);
  
  /*slider images*/
  var slider_images = galRow.insertCell(-1);
  var photosHolder = document.createElement("div");
  photosHolder.className = "photo_tiles_holder";
  photosHolder.style.width = window_size + "px";
  var photoTiles = document.createElement("div");
  photoTiles.id = this.ids.photoHolderID;
  photoTiles.className = "photo_tiles";
  photoTiles.style.width = total_width + "px";

  for (i=0; i<this.photos.length; i++) {
    var photoPreview = document.createElement("div");
    photoPreview.id = "preview_slot_" + i;
    if (i == this.activePhotoIndex) photoPreview.className = "selected";
    
    var photoLink = document.createElement("a");
    if (this.photos[i].photo_id >= 0) {
      photoLink.className = "fakeLink";
      photoLink.pid = i;
      photoLink.onclick = function() { self.setActivePhotoByIndex(this.pid); }
      var img_path = this.photos[i].thumbnail_url;
    } else {
      var img_path = "/images/ImageNotAvailableSmall.jpg";
    }
    
    var photoImage = document.createElement("img");
    photoImage.src = img_path;
    photoImage.border = 0;
    
    photoLink.appendChild(photoImage);
    photoPreview.appendChild(photoLink);
    photoTiles.appendChild(photoPreview);
  }
  photosHolder.appendChild(photoTiles);
  slider_images.appendChild(photosHolder);
  
  /*next button*/
  var nextBtnHolder = galRow.insertCell(-1);
  var nextBtn = document.createElement("a");
  nextBtn.className = "slider_button fakeLink";
  nextBtn.onclick = function() { self.scroller(self.ids.photoHolderID, window_size, -1); }
  var nextBtnImage = document.createElement("img");
  nextBtnImage.border = 0;
  nextBtnImage.onmouseover = function () { if (self.canscroll(this, self.ids.photoHolderID, window_size, -1)) changeImageState(this, 'on'); }
  nextBtnImage.onmouseout = function() { changeImageState(this, 'off'); }
  nextBtnImage.src = "/images/next_arrow.gif";
  nextBtn.appendChild(nextBtnImage);
  nextBtnHolder.appendChild(nextBtn);
  
  try {
    if (this.photos.length > 1) 
      this.enablePlaySlideshow();
    document.getElementById(target).appendChild(slider);
    this.repositionSlider();
  } catch(e) {}
}

PhotoViewer.prototype.repositionSlider = function() {
  id = "photo_tiles";
  window_size = this.max_shown * this.photo_width;
  total_width = this.photos.length * this.photo_width;
  if (this.activePhotoIndex == 0) {
    this.scroller(id, total_width, 1, false, 50);
  } else if (this.activePhotoIndex % this.max_shown == 0) {
    this.scroller(id, window_size, -1);
  }
}

PhotoViewer.prototype.slideToActive = function() {
  id = "photo_tiles";
  window_size = this.max_shown * this.photo_width;
  total_width = this.photos.length * this.photo_width;
  if (this.activePhotoIndex > this.max_shown) {
    slideAmount = Math.floor(this.activePhotoIndex/this.max_shown);
    this.scroller(id, window_size*slideAmount, -1);
  }
}

PhotoViewer.prototype.enablePlaySlideshow = function() {
  try {
    document.getElementById(this.playAsSlideshowLinkID).style.display = "";
  } catch(e) {}
}

PhotoViewer.prototype.stopSlideshow = function() {
  if (this.slideshow != false) {
    var self = this;
    document.getElementById(this.playAsSlideshowLinkID).innerHTML = "Play as Slideshow";
    document.getElementById(this.playAsSlideshowLinkID).onclick = function() {self.playAsSlideshow();}
    clearInterval(this.slideshow);
    this.slideshow = false;
  }
}

PhotoViewer.prototype.playAsSlideshow = function() {
  if (this.slideshow == false) {
    var self = this;
    document.getElementById(this.playAsSlideshowLinkID).innerHTML = "Stop Slideshow";
    document.getElementById(this.playAsSlideshowLinkID).onclick = function() {self.stopSlideshow();}
    this.slideshow = setInterval(function(){self.showNextPhoto();}, this.slideshowTimer);
  }
}

PhotoViewer.prototype.showNextPhoto = function() {
  nextPhoto = this.activePhotoIndex + 1;
  if (nextPhoto >= this.photos.length || this.photos[nextPhoto].photo_id < 0)
    nextPhoto = 0;
  this.setActivePhotoByIndex(nextPhoto);
  this.repositionSlider();
}

PhotoViewer.prototype.toggleHighlight = function(id) {
  try {
    target = document.getElementById(id);
    if (target.className != "selected")
      target.className = "selected";
    else
      target.className = "";
  } catch(e) {}
}

PhotoViewer.prototype.setActivePhotoByIndex = function(index) {
  try {
    if (index == this.activePhotoIndex)
      return true;
    obj = "preview_slot_" + this.activePhotoIndex;
    this.toggleHighlight(obj);
    this.activePhotoIndex = index;
    obj = "preview_slot_" + this.activePhotoIndex;
    this.toggleHighlight(obj);
    
    document.getElementById(this.mainImageID).src = this.photos[index].large_url;
    oldHref = document.getElementById(this.fullViewLinkID).href;
    document.getElementById(this.fullViewLinkID).href = oldHref.replace(/\/[a-zA-Z-_1234567890]+\.html/, "/"+this.photos[index].photo_id+".html");
    this.setPhotoInfoByIndex(index);
    
//    loadComments(this.photos[index].photo_id, 'commentsSlot');
  } catch(e) {}  
}

PhotoViewer.prototype.setActivePhotoById = function(id) {
  index = this.photo_index[id];
  this.setActivePhotoByIndex(index);
}

PhotoViewer.prototype.setPhotoInfoByIndex = function(index) {
  try {
    document.getElementById(this.photoTitleID).innerHTML = this.photos[index].title;
    document.getElementById(this.photoDescriptionID).innerHTML = this.photos[index].description;
    document.getElementById(this.photoAuthorID).innerHTML = this.photos[index].uploader;
    document.getElementById(this.photoDateID).innerHTML = this.photos[index].date;
  } catch(e) {}  
}

PhotoViewer.prototype.canscroll = function(obj, id, amount, direction) {
  canScroll = this.scroller(id, amount, direction, true);
  if (canScroll) {
    obj.parentNode.style.cursor = "pointer";
  } else {
    obj.parentNode.style.cursor = "default";
  }
  return canScroll;
}

PhotoViewer.prototype.scroller = function(id, amount, direction, testonly, speed) {
  if (speed == null) speed = 20;
  interval = 10;
  target = document.getElementById(id);
  leftMargin = parseInt(target.style.marginLeft);
  if (isNaN(leftMargin)) leftMargin = 0;
  slideWidth = parseInt(target.offsetWidth) + leftMargin;
  windowSize = parseInt(target.parentNode.offsetWidth);
  rightBound = windowSize - slideWidth;
  if (amount < speed) speed = amount;
  if (speed > 0) {
    newMargin = leftMargin + (direction * speed);
    if (newMargin > 0) { newMargin = 0; amount = 0;}
    else if (newMargin < rightBound) { newMargin = leftMargin; amount = 0; }
    if (testonly == true && amount > 0) return true;
    target.style.marginLeft = newMargin + "px";
    target.style.paddingRight = (-1 * newMargin) + "px";
    var self = this;
    setTimeout(function(){self.scroller(id, amount-speed, direction, false, speed);}, interval);
  } else {
    return false;
  }
}

/* ============ END Photo Viewer Generator ============ */