// preload large images
if (document.images) {
  var images = new Array();
  var image_urls = new Array();
  image_urls[0] = "images/1.jpg";
  image_urls[1] = "images/2.jpg";
  image_urls[2] = "images/3.jpg";
  image_urls[3] = "images/4.jpg";
  image_urls[4] = "images/5.jpg";
  image_urls[5] = "images/6.jpg";
  images[0] = new Image();
  images[1] = new Image();
  images[2] = new Image();
  images[3] = new Image();
  images[4] = new Image();
  images[5] = new Image();
  images[0].src = image_urls[0];
  images[1].src = image_urls[1];
  images[2].src = image_urls[2];
  images[3].src = image_urls[3];
  images[4].src = image_urls[4];
  images[5].src = image_urls[5];
}

function initialize() {
  should_still_scroll = false;
  $('right_blocker').setStyle({top: ($('small_image').viewportOffset()[1]).toString()+"px"});
  $('left_blocker').setStyle({top: ($('small_image').viewportOffset()[1]).toString()+"px"});
  $('link_1').addClassName('active');
  initial_large_position = $('large_image').viewportOffset()[0];
  Event.observe('left_arrow', 'mouseover', scroll_right);
  Event.observe('left_arrow', 'mouseout', stop_scrolling);
  Event.observe('right_arrow', 'mouseover', scroll_left);
  Event.observe('right_arrow', 'mouseout', stop_scrolling);
  new PeriodicalExecuter(update_small_image_location, 0.05);
}

function scroll_image(direction) {
  should_still_scroll = true;
  large_scroll_amount = Math.round(direction * 0.005 * $('large_image').getDimensions().width);
  new PeriodicalExecuter(function(pe) {
    if(direction == 1 && $('large_image').viewportOffset()[0] + large_scroll_amount > initial_large_position) {
      should_still_scroll = false;
      new Effect.Move('large_image', {x: initial_large_position, y: 0, mode: 'absolute', duration: 0.25});
    }
    else if(direction == -1 && $('large_image').viewportOffset()[0] + large_scroll_amount < (($('large_image').getDimensions().width-document.viewport.getWidth()+initial_large_position)*-1)) {
      should_still_scroll = false;
      new Effect.Move('large_image', {x: (($('large_image').getDimensions().width-document.viewport.getWidth()+initial_large_position)*-1), y: 0, mode: 'absolute', duration: 0.25});
    }
    if(should_still_scroll) {
      new Effect.Move('large_image', {x: large_scroll_amount, y: 0, mode: 'relative', duration: 0.25});
    }
    else {
      pe.stop();
    }
  }, 0.1);
}

function scroll_left() {
  scroll_image(-1);
}

function scroll_right() {
  scroll_image(1);
}

function stop_scrolling() {
  should_still_scroll = false;
}

function update_small_image_location() {
  var large_image_percentage_scrolled = $('large_image').viewportOffset()[0] / $('large_image').getDimensions().width;
  var small_image_scroll_by = Math.round($('small_image').getDimensions().width * large_image_percentage_scrolled);
  $('small_image').setStyle({left: small_image_scroll_by.toString()+"px" });
}

function switch_images(image_number) {
  for (var i=1; i<=6; i++) {
    $('link_'+i.toString()).removeClassName('active');
  }
  $("link_"+image_number).addClassName('active');
  $('large_image').src='images/'+image_number+'.jpg';
  $('small_image').src='images/'+image_number+'t.jpg';
  $('large_image').setStyle({left: "0px"});
  $('small_image').setStyle({left: "0px"});
}