//set "path" variable to get you back to the root of the site
function set_path(location)
{
  switch(location) {
    case "home":
    case "root":
      path="."
      break
    case "it":
    case "cv":
    case "jokes":
    case "music":
    case "photos":
    case "tristan":
    case "sub1":
      path=".."
      break
    case "sub2":
      path="../.."
      break
    default:
  }
  return path
}


//select style sheet based on browser version
//I want to fix the navigation bar to the top of the screen
//IE 7 is the first IE to support it properly.
//If IE 6 or below is detected, it servs a slightly different stylesheet.
//This sheet doesn't even attempt to fix the division it, sidestepping indentation/padding problems
function select_style_sheets(location)
{
  //get browser name and store in variable called "browserVer"
  var browserVer=parseInt(navigator.appVersion);
  //if browser is IE
  if (navigator.appName=="Microsoft Internet Explorer") {
    //set "version" to 0
    version=0
    if (navigator.appVersion.indexOf("MSIE")!=-1){
      temp=navigator.appVersion.split("MSIE")
       version=parseFloat(temp[1])
    }//if
    //if version is less than 7 (eg IE v7)
    if (version < 7 ) {
      //set styleshee variable to non_compliant
      stylesheet="non_compliant"
    //if IE 7 or above
    } else {
      //set stylesheet to "compliant"
      stylesheet="compliant"
    }//if
  //if not internet explorer
  } else {
    //set stylesheet to compliant
    stylesheet="compliant"
  }//if
  //work out how far into the folder structure we are
  set_path(location)
  //link to the stylesheets
  document.write(
    '<link rel="stylesheet" type="text\/css" href="' + path + '\/' + stylesheet + '.css" \/>' +
    '<link rel="stylesheet" type="text\/css" href="' + path + '\/styles.css" />'
  );
}


//draw main page template
function draw_page_header(location)
{
  set_path(location)
  //define the sub sections in an array
  var Sections=new Array("home","it","music","photos","tristan","jokes")

  //start drawing page
  document.write
  (
    //draw logo in top left, start centralising and add separator graphic
    '<img src="' + path + '\/logo.png" alt="" title="" align="left" \/>' +
    '<center>' +
      '<img src="' + path + '\/separator.png" alt="" title=""  \/>'
  )

  //loop through the "sections" array
  for (i=0; i<Sections.length; i++) {
    //if the current section is the current location
    if (Sections[i]==location) {
      //display the "pressed_section" image
      document.write('<img src="' + path + '\/pressed_' + Sections[i] + '.png" alt="' + Sections[i] + 'button" title="" \/>')
    //if not
    } else {
      //if current section is the home page
      if (Sections[i]=="home") {
        //display graphic as a link to the home page
        document.write('<a href="' + path + '\/"><img src="' + path + '\/link_' + Sections[i] + '.png" alt="' + Sections[i] + '" title="" \/><\/a>')
      //else, if not the home page
      } else {
        //display graphic as a link to the subsection
        document.write('<a href="' + path + '\/' + Sections[i] + '\/"><img src="' + path + '\/link_' + Sections[i] + '.png" alt="' + Sections[i] + '" title="" \/><\/a>')
      }//if
    }//if
    //draw separator graphic
    document.write('<img src="' + path + '\/separator.png" alt="" title="" \/>')
  }//for
  //finish centre aligned section
  document.write('<\/center>')
}//function



//function to display slides. Rather than have an html page for each picture,
//it uses the innerhtml option to replace html in a specified division.
//This function just squirts all the required html into a variable called "new_html", then returns it
function display_slide(index,display_photo,caption) {
  new_html=
    '<table>' +
      '<tr>' +
        '<td width="300" class="slidecomments">' +
	  '<h2>' + index + '\/' + total_pics + '</h2>' + 
	  '<a href="javascript:new_slide(-1)">Prev</a> | <a href="javascript:new_slide(1)">Next</a><br /><br />' + caption +
	'</td>' +
	'<td class="clear"><img src="' + display_photo + '" alt="' + display_photo + '" title="Photo ' + index + ' of ' + total_pics + '"></td>' +
      '</tr>' +
    '</table>'
  ;
  return new_html;
}

//change the slide
function new_slide(direction) {
  //current document.images is defined
  if (document.images) {
    //set new picture to display (ie one before or after the currently displayed pic)
    current_pic = current_pic + direction;
    //if that result is less than 0 (ie we were at the first picture)
    if (current_pic < 0) {
      //set it to the last picture
      current_pic = total_pics -1;
    }//if
    //if that puts  you at the end of the array
    if (current_pic == total_pics) {
      //set it to the first picture
      current_pic = 0;
    }//if
    //Photo refers to the number of the photo filename (starting at 1)
    //current_pic is the index in the comments array (starting at 0)
    //set "photo" to "current_pic"+1 to synchronise them
    photo = current_pic+1;
    //pad all numbers with 0s to make them all 3 digit
    if (photo < 10 ) {
      index='00'
    } else if (photo > 9 && photo < 100) {
      index='0'
    } else {
      index=''
    }
    //set variable "display_picture" of the completed picture name
    //ie something like "2009-08_ireland-001.jpg"
    display_picture = album + '-' + index + photo + '.jpg'
  }
  //used to replace html in a specified division that we're calling "slides"
  var slide_data = document.getElementById("slides");
  //set the html of that division to be the html returned from the "display_slide" function with the given parameters
  slide_data.innerHTML = display_slide(photo,display_picture,captions[current_pic]);
}


//start the slide show
function show_slides(captions) {
  //set the current picture to be 0 (index for captions array)
  current_pic=0;
  //set total_pics to be length of captions array
  total_pics=captions.length;
  document.write(
    //define the "slides" division to allow the changing of html in that division
    '<div id="slides">' +
      //display first slide
      display_slide(1,album + '-001.jpg',captions[current_pic]) +
    //terminate "slides" division
    '</div>'
  );
}