var slideNav = {
  slides :[],
  buttons :[],
  currentIndex: (parseInt(location.hash.substr(6)) - 1 || 0)
}

window.addEvent('domready', function(){
  $$('#SlideNav .previous a')[0].onclick = function(){ next(-1) };
  $$('#SlideNav .next a')[0].onclick = function(){ next(1) };

  var index = 0;
  $$('#SlideNav .button').each( function(lmnt){
    lmnt.onclick= (function(i){ return function(ev){ view(i) } })(index++);
  });

  $$('#SlideShow .slide').each( function(lmnt){
    lmnt.removeProperty('id');
  });
  
  slideNav.slides = $$('#SlideShow .slide');
  slideNav.buttons= $$('#SlideNav .button');

  view(slideNav.currentIndex);
});

function next(offset){
  var target = slideNav.currentIndex + offset;
  if(target >= 0 && target < slideNav.slides.length){
    view(target);
  }
}

function view(index){
  hideAll(slideNav.slides, slideNav.buttons);
  slideNav.slides[index].style.display = 'block';
  slideNav.buttons[index].style.backgroundColor = '#B4E6FF';

  if(index == 0) $$('#SlideNav .previous')[0].addClass('off');
  else $$('#SlideNav .previous')[0].removeClass('off');
  if(index == slideNav.slides.length - 1) $$('#SlideNav .next')[0].addClass('off');
  else $$('#SlideNav .next')[0].removeClass('off');
  
  slideNav.currentIndex = index;
}

function hideAll(slideList, buttonList){
  for(var i=0; i<slideList.length; i++){
    slideList[i].style.display = 'none';
    buttonList[i].style.backgroundColor = '';
  }
}