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

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

  var photoW;
  var photoH;
  var timerScroller;
  var preloadTimer;
    
  
    var cat = 'sports';  pics = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg', '21.jpg');

  picsComment = '<p>Soccer photos from my work for the Deutsche Presse-Agentur (dpa) in Munich.</p><br /><p>Encoutners:</p><p>1. FC Bayern München <br />vs. FSV Mainz 05</p><p>2. FC Bayern München <br />vs. VFL Wolfsburg</p>';
  // ---------------------------------------------------------------------------------
  // 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");
    urlPhoto();
  }


  // ---------------------------------------------------------------------------------
  // 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;
    
    // Infotext positioning
    if(picsComment == '') 
      document.getElementById('info').style.display='none';
    else 
      document.getElementById('info').style.display='block';
       
    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 = '';
      document.getElementById('infotext').style.left = document.getElementById('logo').offsetLeft+29+'px';
      document.getElementById('infotext').style.width = '90%';
    }

    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%';
    }
    
    document.getElementById('arrows').style.margin = document.getElementById('photo').style.margin;
    document.getElementById('arrows').style.height = document.getElementById('photo').offsetHeight+'px';
    document.getElementById('arrows').style.width = document.getElementById('photo').offsetWidth+'px';
    document.getElementById('arrowsarea').style.top = document.getElementById('photoarea').offsetTop+'px';

    document.getElementById('info').style.left = document.getElementById('arrows').offsetLeft+14+'px';
    document.getElementById('info').style.top = document.getElementById('photo').offsetTop+'px';
    document.getElementById('info').style.width = document.getElementById('photo').offsetWidth+'px';


    document.getElementById('infotext').style.top = document.getElementById('nav').offsetTop+'px';
    if(wideScreen != 0)
      document.getElementById('infotext').style.left = document.getElementById('nav').offsetLeft+'px';
    else
      document.getElementById('infotext').style.left = document.getElementById('logo').offsetLeft+29+'px';
    
    if((document.getElementById('photoarea').offsetLeft-document.getElementById('nav').offsetLeft-50+document.getElementById('photo').offsetLeft) > 180 && wideScreen != 0)
      document.getElementById('infotext').style.width = document.getElementById('photoarea').offsetLeft-document.getElementById('nav').offsetLeft-50+document.getElementById('photo').offsetLeft+'px';
    else if(wideScreen != 0)
      document.getElementById('infotext').style.width = '180px';

    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);
    }
    
  }


  // ---------------------------------------------------------------------------------
  // Preloading photos
  // ---------------------------------------------------------------------------------
  
  pic00 = new Array();
  pic001 = new Image();
  pic001.src = 'img/loading.png';
    
  function preloadPics(picNr) {
    if(picNr+1 < pics.length) {
      pic00[parseInt(picNr)+1] = new Image();
      pic00[parseInt(picNr)+1].src = 'photos/'+cat+'/'+pics[picNr+1];
      preloadDone(parseInt(picNr)+1);
    } 
  }

  function preloadDone(picNr) {
    if(pic00[picNr].complete)
      preloadPics(picNr);
    else
      preloadTimer = window.setTimeout("preloadDone("+picNr+")",100);  
  }



  // ---------------------------------------------------------------------------------
  // Open the hastag-number
  // ---------------------------------------------------------------------------------

  function urlPhoto() {
    if(window.location.hash)
      var picNr = parseInt(window.location.hash.substr(1));
    else
      var picNr = 1;

    openPhoto();
    hideArrow(picNr);
  }


  // ---------------------------------------------------------------------------------
  // Hiding arrows, if there's no next or prev. photos
  // ---------------------------------------------------------------------------------
  
  function hideArrow(picNr) {
    if(picNr == 1 && cat != 'home') {
      document.getElementById('prev').onclick = function onclick(event) {};
      document.getElementById('prev').style.visibility = "hidden";
      document.getElementById('next').style.backgroundImage = "url(img/next.png)";
      document.getElementById('next').style.visibility = "visible";
    } else if(picNr == pics.length && cat != 'home') {
      document.getElementById('next').onclick = function onclick(event) {};
      document.getElementById('next').style.visibility = "hidden";
      document.getElementById('prev').style.visibility = "visible";
    } else if(cat != 'home') {
      document.getElementById('prev').style.visibility = "visible";
      document.getElementById('next').style.visibility = "visible";
    } else {
      document.getElementById('prev').style.visibility = "hidden";
      document.getElementById('next').style.visibility = "hidden";
    }
  } 
  
   
  // ---------------------------------------------------------------------------------
  // "openPhoto" - Ãndern des aktiven Fotos
  // ---------------------------------------------------------------------------------

  function openPhoto(picNr) {

    if(!picNr)
      if(window.location.hash)
        var picNr = parseInt(window.location.hash.substr(1));
      else
        var picNr = 1;

    document.getElementById('photo').src = 'img/loading.png';
    document.getElementById('photo').src = 'photos/'+cat+'/'+pics[picNr-1];

    if(picsComment != '') document.getElementById('infotext').innerHTML = picsComment;
    window.location.hash = picNr;
    document.getElementById('prev').onclick = function onclick(event) { openPhoto(picNr-1) };
    document.getElementById('next').onclick = function onclick(event) { openPhoto(picNr+1) };

    hideArrow(picNr);
    preloadTimer = window.setTimeout("preloadPics(0)",100);

  }

  
  function info(mode) {
    if(mode == 1) {
      document.getElementById('infobox').style.display='block';
      document.getElementById('name').style.color='#ccc';
    } else {
      document.getElementById('infobox').style.display='none';
      document.getElementById('name').style.color='#000';
    }        
  }