var images = new Array();
images[0] = "highmaintenance2.jpg";
images[1] = "highmaintenance1.jpg";
images[2] = "la_familia.jpeg";
images[3] = "punk_rock_angel.jpeg";
images[4] = "dude_manp.jpeg";
images[5] = "rude_boys.jpeg";
images[6] = "horn_section.jpeg";
images[7] = "on_stage.jpeg";
images[8] = "on_tour.jpeg";
images[9] = "the_salad_days.jpg";

var titles = new Array();
titles[0] = "The Skatomatics";
titles[1] = "High Maintenance";
titles[2] = "La Familia";
titles[3] = "Punk Rock Angel";
titles[4] = "Dude Man";
titles[5] = "Rudeboys";
titles[6] = "Horn Section";
titles[7] = "On Stage";
titles[8] = "On Tour";
titles[9] = "The Salad Days";

function showPhotos(index) {
  var title = document.getElementById("title");
  var photobox = document.getElementById("photobox");
  var photosnav = document.getElementById("photosnav");

  title.innerHTML=titles[index];
  photobox.innerHTML=getImageHTML(index);
  photosnav.innerHTML=getNavHTML(index);
}

function getImageHTML(index) {
  var html = '<img src="/content/photos/images/';
  html += images[index];
  html += '" border="0" alt="" id="photo"/>';

  return html;
}

function getNavHTML(index) {
  var html = "";
  if(index>0) {
    html += '<a href="javascript:showPhotos(';
    html += index-1;
    html += ');">prev</a>';
  } else {
    html += 'prev';
  }
  html += '&nbsp;&nbsp;&nbsp;&nbsp;';
  for(var i=0;i<images.length;i++) {
    if(i==index) {
      html += (i+1);
    } else {
      html += ' <a href="javascript:showPhotos(';
      html += i;
      html += ');">'+(i+1)+'</a> ';
    }
  }
  html += '&nbsp;&nbsp;&nbsp;&nbsp;';
  if(index<(images.length-1)) {
    html += '<a href="javascript:showPhotos(';
    html += index+1;
    html += ');">next</a>';
  } else {
    html += 'next';
  }
  return html;
}