var imgIndex = 0;
var imgArray = new Array();
var progressBarTimer;
var args = location.search.substr(1).split("&");
if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) {  
  document.addEventListener("DOMContentLoaded", onDomLoad, false);
}

function getCounter() {
   return document.getElementById('counter');
}

  
window.onload=function() {
  if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
    onDomLoad();
  }
}


function onDomLoad() {
  if (getCounter()) {
    progressBarTimer = setTimeout("getCounter().style.visibility = 'visible'", 4000);
  }
  var imgSource = args[0];
	if (imgSource)  {
    if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
			imgSource = unescape(imgSource);
		} 
		imgArray = fillImageArray();
		imgIndex = findImageIndex(imgArray, imgSource);
		showImage(imgIndex);
	} else {
    hideGlassPane();
	}
}


function hideGlassPane() {
		if (document.getElementById("glassPane")) {
			document.getElementById("glassPane").style.display = "none";
		}
    document.documentElement.style.overflow = "auto";
}


function fillImageArray() {
  if (imgArray.length > 0) {
    return imgArray;
  }
  
  var j = 0;
  var anchors = document.getElementsByTagName("a"); 
	for (var i=0; i < anchors.length; i++) {
      
      // look for anchors with href containing "?"
      var lastSlash = anchors[i].href.lastIndexOf("?");
      if (lastSlash != -1) {
        var imgName = anchors[i].href.substring(lastSlash + 1);
        if (imgName.indexOf("slideshow") == -1) {
          var foto = new Object();
          foto.src = imgName;
          foto.title = anchors[i].title;
          foto.id = anchors[i].getElementsByTagName("span")[0].id;
          imgArray[j++] = foto;
        }
      }          
    }
	return imgArray;
}
  

function findImageIndex(imgArray, imgSource) {
 	for (var i=0; i < imgArray.length; i++) {
	  if (imgSource == imgArray[i].src) {
        return i;
      };
    }
    return -1;
}
  
  

function showPage(imgIndex) {
  if (imgIndex < 0) { imgIndex = imgArray.length - 1; }
  if (imgIndex > imgArray.length - 1) { imgIndex = 0; }
  location.search = imgArray[imgIndex].src;
}


function showImage(imgIndex) {
  if (imgIndex < 0) {
    imgIndex = 0;
  }
  var preloadedImage = new Image();
  preloadedImage.onload = imageLoaded;
  preloadedImage.title = imgArray[imgIndex].title;
  preloadedImage.src = "images/" + imgArray[imgIndex].src + ".jpg";
  preloadedImage.id = imgArray[imgIndex].id;
}


function imageLoaded() {
    clearTimeout(progressBarTimer);
    getCounter().style.visibility = "hidden";
    
    // adjust preloaded image width, height and position
    var preloadedImage = this;
    preloadedImage.origWidth = preloadedImage.width;
    preloadedImage.origHeight = preloadedImage.height;
    fitToScreen(preloadedImage);

    // copy attributes from the preloaded image to the image contained in the html document
    var bigimage = document.getElementById("bigimage");
	  bigimage.src = preloadedImage.src;
	  bigimage.width = preloadedImage.width;		
    bigimage.height = preloadedImage.height;
    bigimage.origWidth = preloadedImage.origWidth;
    bigimage.origHeight = preloadedImage.origHeight;
    bigimage.style.top = preloadedImage.style.top;
  	bigimage.style.visibility = "visible";
	
    // prepare the title of the htmlImage
    var lastSlash = preloadedImage.src.lastIndexOf("/");
    var lastPoint = preloadedImage.src.lastIndexOf(".");
    var imgSource = preloadedImage.src.substring(lastSlash + 1, lastPoint);
    imgSource = imgSource.replace("%20", " ");
    imgSource = imgSource.replace("%20", " ");
    bigimage.title = imgSource;
    if (preloadedImage.title) {
      bigimage.title += " - " + preloadedImage.title;
    }
    // preloadedImage.src = http://www.valamit.com/2009/BestOf/page.html?Karlsruhe 068p
    // pic = 2009/BestOf/images/Karlsruhe 068p
    var rooturl = preloadedImage.src.substring(0, lastSlash);
    rooturl = rooturl.substring(0, rooturl.lastIndexOf("/"));
    rooturl = rooturl.substring(0, rooturl.lastIndexOf("/"));
    var pic = preloadedImage.src.substring(rooturl.lastIndexOf("/") + 1, lastPoint);
    var ut =  "http://www.valamit.com/Resources/UpdateTop.php?pic=" + pic + "&id=" + preloadedImage.id;
    getCounter().src = ut;
}

  
function rootURL() {
  var lastSlash = document.location.href.lastIndexOf("/");
  var rooturl = document.location.href.substring(0, lastSlash);
  return rooturl;	
};
	

	
function fitToScreen(img) {
  
  if (!img) {
    return;
  }

  var pictureMargin = 25;
  var clientWidth  = window.innerWidth - 2 * pictureMargin;
  var clientHeight = window.innerHeight - 2 * pictureMargin;

    // IE workaround
    if (!clientWidth) {
      clientWidth  = document.documentElement.clientWidth - 2 * pictureMargin;
      clientHeight = document.documentElement.clientHeight - 2 * pictureMargin;   
    } 
 
    var WidthRatio  = img.origWidth / clientWidth;
    var HeightRatio = img.origHeight / clientHeight;
    var Ratio = WidthRatio > HeightRatio ? WidthRatio : HeightRatio;

    img.width = Math.min(img.origWidth, img.origWidth / Ratio);
    img.height = Math.min(img.origHeight, img.origHeight / Ratio);
    img.style.top = pictureMargin -1 + (clientHeight - img.height)/2 +'px';

}
  

window.onresize = function() {
	fitToScreen(document.getElementById("bigimage"));
}
  
  
  
document.onkeydown = function(evt) {
  
  // no image no event handling
  if (imgArray.length == 0) {
    return;
  }

  // workaround for IE and Firefox differences 
  evt = (evt) ? evt : ((event) ? event : null);
  switch(evt.keyCode) {
      case 13 : imgIndex++;  break;
      case 32 : imgIndex++;  break;
      case 34 : imgIndex++;  break;
      case 39 : imgIndex++;  break;
      case 40 : imgIndex++;  break;
      case  8 : imgIndex--;  break;
      case 33 : imgIndex--;  break; 
      case 37 : imgIndex--;  break;
      case 38 : imgIndex--;  break;
      case 35 : imgIndex = imgArray.length - 1;  break;
      case 36 : imgIndex = 0;  break;
      case 27 : location.search="";
      default : return;
  }

  showPage(imgIndex);
 
 }
  
    
  
  // Mozilla mouse scroll event handler.
  if (window.addEventListener) {
    window.addEventListener('DOMMouseScroll', handleMouseWheelEvent, false);  
  }
	
  // IE mouse scroll event handler.
  window.onmouseheel = document.onmousewheel = function() {
    handleMouseWheelEvent(event);
  }


function handleMouseWheelEvent(evt) {

  // no image no event handling
  if (imgArray.length == 0) {
    return;
  }
	    
    var scrollDirection;	
    
    if (evt.detail) {
      scrollDirection = evt.detail;
    } else if (evt.wheelDelta) { 
      scrollDirection = -evt.wheelDelta;
    }

    if (scrollDirection > 0) {
      imgIndex++;
    } else {
      imgIndex--;
    }
	
    showPage(imgIndex);
	
}



function rollout(navFrameWidth) {

  // start condition
  if (!navFrameWidth) {
    navFrameWidth = 20;
  }

  // end condition
  if (navFrameWidth == 200) {
    return;
  }
  
  var navFrame = document.getElementById("navFrame");
  if (navFrameWidth == 20) {
    navFrame.style.opacity="0.75";
    if (navFrame.style.filter != 'undefined') {
      navFrame.style.filter= "alpha(opacity = 75)";
    }
  	navFrame.contentWindow.document.getElementById("navi1").style.display = "none";
  	navFrame.contentWindow.document.getElementById("navi2").style.display = "none";
  }

  // increment
  navFrameWidth = navFrameWidth + 20;
  navFrame.style.width = navFrameWidth +"px";
  setTimeout("rollout(" + navFrameWidth +")", 10);
 
}



function rollin(navFrameWidth) {

  // start condition
  if (!navFrameWidth) {
    navFrameWidth = 200;
  }
  
  var navFrame = document.getElementById("navFrame");
   
  // end condition
  if (navFrameWidth == 20) {
    navFrame.style.opacity="0.25";
    if (navFrame.style.filter != 'undefined') {
      navFrame.style.filter= "alpha(opacity = 25)";
    }
    navFrame.contentWindow.document.getElementById("navi1").style.display = "block";
  	navFrame.contentWindow.document.getElementById("navi2").style.display = "block";
    return;
  }
  
  navFrameWidth = navFrameWidth - 20;
  navFrame.style.width = navFrameWidth +"px";
  setTimeout("rollin(" + navFrameWidth +")", 10);
   
}