window.addEvent('domready', function() {
  // this 'scroll' variable will hold our wrapper
	var scroll = new Fx.Scroll('wrapper', {
  	wait: false,
  	duration: 500,
  	transition: Fx.Transitions.Quad.easeInOut
  });

  // this 'navs' array has a list of ids that we want to turn into links that scroll to the content
  var navs = ['pageone','pagetwo','pagethree','pagefour','pagefive','pagesix','pageseven'];

  // this goes through each id in the navs array, and adds the 'click' observer so that when those links
  // are clicked, it will take the 'scroll' variable defined above and make it scroll to the content area
  // we have it set up so that our content always has the id in the form [link id]_content.
  // we added our own function 'deselect' which removes the classname 'selected' from each of the other links
  // and then we add the selected class to the link that was just clicked
  navs.each(function(item){
    $(item).addEvent('click', function(event) {
      event = new Event(event).stop();
      scroll.toElement(item+'_content');
      deselect(navs);
      event.target.addClass('selected');
    });
  });
      
  var hash = getHash();
  if (hash) {
    var autoTab = $(hash+'_content');
    if (autoTab) {
    	scroll.toElement(autoTab);
    }
  }
});

function deselect(navs)
{
  navs.each(function(nav) { 
    $(nav).removeClass('selected');
  });
}

function getHash() {
  var hash = window.location.hash;
  return hash.substring(1);
}