$(document).ready(function() {
    var thumbs = $('#thumbs');
    thumbs.empty();

//    thumbs.append('<span style="display: inline-block; width: 81px; height: 54px;"> </span> ');
//    thumbs.append('<span style="display: inline-block; width: 81px; height: 54px;"> </span> ');
    for(var i = 0; i < photos.length; i++) {
	if(photos[i][0] != '') {
	        thumbs.append('<a href="javascript:void(0);"><img style="width: 81px; height: 54px;" src="img/thumbs/81x54/' + photos[i][0] + '" alt="" border="0"></a> ');
	} else if(photos[i][1] != '') {
	        thumbs.append('<a href="javascript:void(0);"><img style="width: 81px; height: 54px;" src="http://i.ytimg.com/vi/' + photos[i][1] + '/default.jpg" alt="" border="0"></a> ');
	}
    }
    thumbs.append('<span style="display: inline-block; width: 81px; height: 54px;"> </span> ');
    thumbs.append('<span style="display: inline-block; width: 81px; height: 54px;"> </span> ');
    thumbs.append('<span style="display: inline-block; width: 81px; height: 54px;"> </span> ');
    thumbs.append('<span style="display: inline-block; width: 81px; height: 54px;"> </span> ');

    function select_image(a) {
      index = $('a', thumbs).index(a);

//      $('#bigimage').attr('src', src.replace(/thumbs\/81x54/, 'photos'));
      $('#bigcontainer').empty();
      if(photos[index][0] != '') {
        $('#bigcontainer').append('<img id="bigimage" src="img/photos/' + photos[index][0] + '" alt="" border="0">');
      } else if(photos[index][1] != '') {
        var html = '';
        html += '<object id="bigimage" width="354" height="292">';
        html += '<param name="movie" value="http://www.youtube.com/v/' + photos[index][1] + '&hl=en&fs=1&rel=0"></param>';
        html += '<param name="allowFullScreen" value="true"></param>';
        html += '<param name="allowscriptaccess" value="always"></param>';
        html += '<embed src="http://www.youtube.com/v/' + photos[index][1] + '&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="354" height="292"></embed>';
        html += '</object>';
        $('#bigcontainer').append(html);
      }

//      $('#thumbs').scrollTo(a, 800, { offset: { left: -165, top: 0} });
      $('#thumbs').scrollTo(a, 800);
    }

    $('a', thumbs).click(function() {
      select_image($(this));
    });

    $.scrollTo.defaults.axis = 'x';             
    $('#thumbs').scrollTo(0);
    $.scrollTo(0);

    $('#button_previous').attr('href', 'javascript:void(0)');
    $('#button_previous').click(function() {
      index--;
      if(index < 0) {
        index = 0;
      }

      var a = $('a', thumbs).get(index);
      select_image($(a));
      return false;
    });

    function volgende_foto() {
      index++;
      if(index >= photos.length) {
//        index = photos.length - 1;
        index = 0;
      }

      var a = $('a', thumbs).get(index);
      select_image($(a));
      return false;
    }

    $('#button_next').attr('href', 'javascript:void(0)');
    $('#button_next').click(function() {
      return volgende_foto();
    });

    var a = $('a', thumbs).get(index);
    select_image($(a));

    if(slideshow != 0) {
      function slideshow_slide() {
	volgende_foto();
        setTimeout(slideshow_slide, slideshow);
      }
      setTimeout(slideshow_slide, slideshow);
    }
  });