document.onmousedown = start_scrolling;
function start_scrolling(ereignis){
  if(!ereignis) {
    ereignis = window.event;
  }

  innerFrameWidth = document.getElementById('image_frame').offsetWidth;
  frameWidth = document.getElementById('photo_frame').offsetWidth;

  interfaceContainerLeft = document.getElementById('container').offsetLeft;
  interfaceContainerTop = document.getElementById('container').offsetTop;
  photoNavContainerLeft = document.getElementById('photo_nav').offsetLeft;
  photoNavContainerTop = document.getElementById('photo_nav').offsetTop;

  positionLeft = interfaceContainerLeft+photoNavContainerLeft;
  positionTop = interfaceContainerTop+photoNavContainerTop;

  if(ereignis.clientX>positionLeft+10 && ereignis.clientX<positionLeft+224
    && ereignis.clientY>positionTop && ereignis.clientY<positionTop+14) {
    trigger = document.getElementById('photo_nav_trigger').style;
    scrolling = document.getElementById('photo_nav_trigger');

    trigger.left = ereignis.clientX-positionLeft-8;
    scrolling.position = ereignis.clientX-positionLeft-24;

    if(ereignis.clientX-positionLeft-8<15)
      trigger.left = 15;

    if(ereignis.clientX-positionLeft-8>206)
      trigger.left = 206;

    if(ereignis.clientX-positionLeft-8>15
      && ereignis.clientX-positionLeft-8<206) {
      document.getElementById('image_frame').style.left = -(scrolling.position*((innerFrameWidth-frameWidth)/189));
    }
    document.onmousemove = start_scrolling;
   return false;
  }

}

function stop_scrolling(){
  document.onmousemove = null;
  return false;
}

  function in_array(value,array) {
    for(var i=0;i<array.length;i++) {
      if(array[i] == value) {
        return true;
      }
    }
  }

function next_block() {
  triggerLeft = document.getElementById('photo_nav_trigger').offsetLeft;
  imageFrameLeft = document.getElementById('image_frame').offsetLeft;
  numBlocks = (innerFrameWidth)/678;
  oneBlockLeftPx = 189/numBlocks;

  var triggerPos = new Array();
  for(var i=0;i<numBlocks;i++) {
    triggerPos[i] = Math.round(-(678*i));
  }

  if(-(innerFrameWidth-678)<imageFrameLeft || imageFrameLeft == 0) {
    if(in_array(imageFrameLeft,triggerPos)) {
      nextHighBlock = Math.round(triggerLeft/oneBlockLeftPx);
      newTriggerLeft = nextHighBlock*oneBlockLeftPx;
      document.getElementById('photo_nav_trigger').style.left = Math.round((189/(numBlocks-1)+triggerLeft));

      newImageFrameLeft = imageFrameLeft-678;
      document.getElementById('image_frame').style.left = newImageFrameLeft;
    }
    else {
      numFrameBlocks = Math.ceil(imageFrameLeft/678)-1;

      newImageFrameLeft = numFrameBlocks*678;
      document.getElementById('image_frame').style.left = newImageFrameLeft;

      numFrameBlocks = -numFrameBlocks;
      document.getElementById('photo_nav_trigger').style.left = (Math.round(oneBlockLeftPx*numFrameBlocks))+15;
    }
  }
}

function pref_block() {
  imageFrameLeft = document.getElementById('image_frame').offsetLeft;
  imageFrameLeft = document.getElementById('image_frame').offsetLeft;
  numBlocks = (innerFrameWidth)/678;
  oneBlockLeftPx = 189/numBlocks;


  var triggerPos = new Array();
  for(var i=0;i<numBlocks;i++) {
    triggerPos[i] = Math.round(-(678*i));
  }

  if(imageFrameLeft != 0) {
    if(in_array(imageFrameLeft,triggerPos)) {
      triggerLeft = document.getElementById('photo_nav_trigger').offsetLeft;
      numBlocks = (innerFrameWidth)/678;
      document.getElementById('photo_nav_trigger').style.left = triggerLeft-Math.round(189/(numBlocks-1));

      newImageFrameLeft = imageFrameLeft+678;
      document.getElementById('image_frame').style.left = newImageFrameLeft;
    }
    else {
      numFrameBlocks = (Math.floor(imageFrameLeft/678))+1;

      newImageFrameLeft = numFrameBlocks*678;
      document.getElementById('image_frame').style.left = newImageFrameLeft;

      numFrameBlocks = -numFrameBlocks;
      document.getElementById('photo_nav_trigger').style.left = Math.round(oneBlockLeftPx*numFrameBlocks)+(11*numFrameBlocks);
    }
  }
}