// ---------------------------------------------------------------------------------
  // Done by Paul Knecht in Oct 2012
  // Don't copy without permission!
  // ---------------------------------------------------------------------------------

  
  // ---------------------------------------------------------------------------------
  // Global definitions
  // ---------------------------------------------------------------------------------

  var photoW;
  var photoH;
  var timerScroller;
  var preloadTimer;


  // ---------------------------------------------------------------------------------
  // Adding an Event Listner and resize the photo upon loading
  // ---------------------------------------------------------------------------------

  function load() {
    if(isIE) {
      window.attachEvent('onresize', resizePhoto);
    } else {
      window.addEventListener("resize", resizePhoto, false);
    }
    window.setTimeout(resizePhoto,"100");
    window.setTimeout(resizePhoto,"150");
  }


  // ---------------------------------------------------------------------------------
  // Resizing and repositioning the photo in addition to the media query css files
  // ---------------------------------------------------------------------------------

  function resizePhoto() {
    
    if(!photoW || !photoH) {
      photoW = document.getElementById('photo').offsetWidth;
      photoH = document.getElementById('photo').offsetHeight;
    }
    newPhotoW = document.getElementById('photo').offsetWidth;
    newPhotoH = document.getElementById('photo').offsetHeight;
    
    photoAreaW = document.getElementById('photoarea').offsetWidth;
    photoAreaH = document.getElementById('photoarea').offsetHeight;
    
    ratioPhoto = photoW/photoH;
    ratioPhotoArea = photoAreaW/photoAreaH;
    
    wideScreen = document.getElementById('photoarea').offsetLeft;
    if(isIE) {
      screenSizeX = document.body.clientWidth;
    } else {
      screenSizeX = window.innerWidth;
    }

    navTop = document.getElementById('logo').offsetTop;
       
    if(wideScreen != 0) {
      if(((screenSizeX-newPhotoW)/5) > 100) navLeft = 100;
      else navLeft = ((screenSizeX-newPhotoW)/5);
      document.getElementById('nav').style.left = navLeft+'px';
      document.getElementById('logo').style.left = navLeft+'px';
      document.getElementById('support').style.left = navLeft+'px';
    } else {
      document.getElementById('nav').style.left = '';
      document.getElementById('logo').style.left = '';
      document.getElementById('support').style.left = '';
    }

    if(ratioPhotoArea/ratioPhoto >= 0.95 && ratioPhotoArea/ratioPhoto <= 1.04 && wideScreen != 0) {
      document.getElementById('photo').style.margin = '0px';      
      document.getElementById('photo').style.height = '100%';
      document.getElementById('photo').style.width = photoAreaW+'px';
    } else if(ratioPhotoArea/ratioPhoto < 1-(2*(navTop/photoAreaH)) && wideScreen != 0) {
      document.getElementById('photo').style.margin = navTop+'px 0px 0px 0px';      
      document.getElementById('photo').style.width = '100%';
      document.getElementById('photo').style.height = 'auto';
    } else if(ratioPhotoArea/ratioPhoto < 0.95 && wideScreen != 0) {
      document.getElementById('photo').style.margin = (photoAreaH-newPhotoH)/2+'px 0px 0px 0px';      
      document.getElementById('photo').style.width = '100%';
      document.getElementById('photo').style.height = 'auto';
    } else if(ratioPhotoArea/ratioPhoto > 1.04 && ((ratioPhotoArea/ratioPhoto < 1.1) || (photoAreaW-newPhotoW < 120)) && wideScreen != 0) {
      document.getElementById('photo').style.margin = '0px 0px 0px '+(photoAreaW-newPhotoW)+'px';      
      document.getElementById('photo').style.height = '100%';
      document.getElementById('photo').style.width = 'auto';
      document.getElementById('nav').style.left = ((screenSizeX-newPhotoW)/4.5)-10+'px';
      document.getElementById('logo').style.left = ((screenSizeX-newPhotoW)/4.5)-10+'px';
      document.getElementById('support').style.left = ((screenSizeX-newPhotoW)/4.5)-10+'px';
    } else if(ratioPhotoArea/ratioPhoto > 1.04 && photoAreaW-newPhotoW > 115 && ratioPhotoArea/ratioPhoto < 2 && wideScreen != 0) {
      document.getElementById('photo').style.margin = '0px 0px 0px '+(photoAreaW-newPhotoW)/3+'px';      
      document.getElementById('photo').style.height = '100%';
      document.getElementById('photo').style.width = 'auto';
    } else if(wideScreen != 0) {
      document.getElementById('photo').style.margin = '0px';      
      document.getElementById('photo').style.height = '100%';
      document.getElementById('photo').style.width = 'auto';
    } else {
      document.getElementById('photo').style.margin = '0px 0px 0px 0px';      
      document.getElementById('photo').style.height = 'auto';
      document.getElementById('photo').style.width = '100%';
    }

    photoWidth = document.getElementById('photoarea').offsetWidth;
    if((photoWidth*0.8 <= 1000) && (photoWidth*0.8 >= 600)) {
      document.getElementById('text').style.maxWidth = photoWidth*0.8+'px';
      document.getElementById('text').style.marginLeft = photoWidth*0.05+'px';
    } else if(photoWidth*0.8 > 1000) {
      document.getElementById('text').style.maxWidth = '1000px';
    } else {
      document.getElementById('text').style.maxWidth = '600px';
    }
    
    document.getElementById('paulphoto').style.width = document.getElementById('text').offsetWidth+'px';
    
    if(wideScreen != 0) {
      document.getElementById('text').style.left = document.getElementById('photoarea').offsetLeft+document.getElementById('photo').offsetLeft+'px';
      document.getElementById('text').style.top = navTop+'px';
    } else {
      document.getElementById('text').style.left = document.getElementById('navcon').offsetLeft+'px';
      document.getElementById('text').style.marginLeft = '';
      document.getElementById('text').style.top = document.getElementById('nav').offsetTop+document.getElementById('nav').offsetHeight+50+'px';
    }
    document.getElementById('abouttext').style.width = document.getElementById('text').offsetWidth-300+'px';

    
    scroll(3);
  }


  // ---------------------------------------------------------------------------------
  // Scroll function for the navigation
  // ---------------------------------------------------------------------------------

  function scroll(dir,mode) {
    speed = 10;
    steps = 2;
    
    navHeightOffset = document.getElementById('nav').offsetHeight;
    navHeightInner = document.getElementById('navlist').offsetHeight;

    pos = document.getElementById('navcon').scrollTop;

    if(mode == 1)
      clearTimeout(timerScroller);

    if(dir == 3 && navHeightOffset < navHeightInner) {
      if(pos == 0) {
        document.getElementById('scrollup').style.display = 'none';
        document.getElementById('scrolldown').style.display = 'block';
      } else if(pos+1 >= navHeightInner-navHeightOffset && navHeightOffset < navHeightInner) {
        document.getElementById('scrollup').style.display = 'block';
        document.getElementById('scrolldown').style.display = 'none';
      } else {
        document.getElementById('scrollup').style.display = 'block';
        document.getElementById('scrolldown').style.display = 'block';
      }
    } else if(dir == 3 && navHeightOffset > navHeightInner) {
      document.getElementById('scrollup').style.display = 'none';
      document.getElementById('scrolldown').style.display = 'none';
    } else if(dir == 2 && mode == 0 && pos+1 < navHeightInner-navHeightOffset) {
      clearTimeout(timerScroller);
      document.getElementById('navcon').scrollTop = pos + steps;
      timerScroller = setTimeout("scroll(2,0)", speed);        
      scroll(3);
    } else if(dir == 2 && mode == 0 && pos+1 == navHeightInner-navHeightOffset) {
      document.getElementById('navcon').scrollTop = navHeightInner-navHeightOffset;
      scroll(3);
    } else if(dir == 1 && mode == 0 && pos > 1) {
      clearTimeout(timerScroller);
      document.getElementById('navcon').scrollTop = pos - steps;
      timerScroller = setTimeout("scroll(1,0)", speed);        
      scroll(3);
    } else if(dir == 1 && mode == 0 && pos == 1) {
      document.getElementById('navcon').scrollTop = 0;
      scroll(3);
    }
    
  }