var steps = 500;
var step_delta = 0;
var old_step = 0;
var slider = null;
var scroll_to = null;
var scroll = null;
var knobmousedown = false;

function sliderChange(step) {
  scroll.stop();
  var y = $('copy').scrollHeight*step/steps;
  if (knobmousedown) {
    $('copy').scrollTo(0, y)
  }
  else {
  	scroll.scrollTo(0, y);
  }
  old_step = step;
}

function scrollToTarget(target) {
	slider.set(steps*$(target).offsetTop/$('copy').scrollHeight);
  $('anchors').getElements('a').each(function(el){
    el.setStyle('color', '#000');
  });
}

window.addEvent('domready', function() {
  $('copy').setStyle('height', (window.getHeight()-230)+'px');
  $('copy').setStyle('overflow', 'hidden');
  $('slider').setStyle('display', 'block');
  $('slider').setStyle('height', $('anchors').clientHeight+'px');
  $('slider').setStyle('margin-bottom', '0px');
  var sliderknob_h = $('slider').getStyle('height').toInt() * $('copy').getStyle('height').toInt() / $('copy').scrollHeight;
  if (sliderknob_h < 26) { sliderknob_h = 26; }
  $('sliderknob').setStyle('height', Math.floor(sliderknob_h)+'px');
	var temp_div = new Element('div', {'id': 'mask1'});
  document.body.appendChild(temp_div);

  scroll = new Fx.Scroll('copy', {
  	wait: false,
  	duration: 1000
  });

  slider = new Slider($('slider'), $('sliderknob'), {
  	steps: steps,
  	mode: 'vertical',
  	onChange: sliderChange
  }).set(0);

  $('sliderknob').addEvent('mousedown', function() { knobmousedown = true; });
  $('sliderknob').addEvent('mouseup', function() { knobmousedown = false; });

  $('anchors').getElements('a').each(function(el){
    el.addEvent('click', function(e){
      e = new Event(e).stop();
      knobmousedown = false;
  		var target = el.getAttribute('href').split('#')[1];
  		scrollToTarget(target);
	    el.setStyle('color', '#7f8062');
  	});
  });

  step_delta = steps * 100/$('copy').scrollHeight
  $('slider').addEvent('mousewheel', function(e) {
    e = new Event(e).stop();
    var delta = e.wheel;
    var delta_steps = Math.floor(delta * step_delta);
    slider.set(slider.step-delta_steps);
  });

  $('copy').addEvent('mousewheel', function(e) {
    e = new Event(e).stop();
    var delta = e.wheel;
    var delta_steps = Math.floor(delta * step_delta);
    slider.set(slider.step-delta_steps);
  });

  if (location.hash.length > 0) {
  	var target = location.hash.split('#')[1];
  	scrollToTarget(target);
    $('anchors').getElements('a').each(function(el){
      if ('#'+el.href.split('#')[1] == location.hash) {
	      el.setStyle('color', '#7f8062');
      }
    });
  }

});