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

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

  var photoW;
  var photoH;
  var timerScroller;
  var preloadTimer;
    
  
    var cat = 'south_sudanese_khartoum';  pics = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '8.jpg', '9.jpg', '10.jpg');
  picsComment = '<p>Khartoum is the capital of Sudan and has a relatively high living standard compared to other regions in the country.</p><p>It has been a city where Arabic Sudanese and internally displaced Southern Sudanese lived together as neighbors.</p><p>But since the independence of South Sudan in July 2011 the remainig Southern Sudanese are seen as foreigners and affraid of their future in an old, yet new and foreign country.</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';
    }        
  }