function ImageViewer()
{
  this.imgWidth = -1;
  this.imgHeight = -1;
  this.TopOffset = 40;
  this.galleryHeight = 60;
  this.galleryWidth = 60;
  
  this.imageName = "";
  
  this.aGallery = Array();
  this.aImage = Array();
  this.aGalleryLoads = Array();
  
  this.bSizesSet = false;
  
  this.current = Array();
  this.current["count"] = -1;
  this.current["galleryid"] = "";
  this.current["rel"] = "";
  
  addLoadEvent(this.ProcessPage.bind(this));                     
  document.body.onResize = this.setOverlay.bind(this); // ie7  ie6 
  window.onresize = this.setOverlay.bind(this); //firefox    
  // safari only resizes bigger... wierd bug
}

ImageViewer.prototype.ProcessPage = function()
{
  var aLinks = document.getElementsByTagName('a');
  var a,i=0;
  var regex = new RegExp("imageviewer\\[(.+)\\]");
  while(( a = aLinks[i++]))
  {
    if ((attr = a.getAttribute('rel'))) {
      if((match = regex.exec(attr))) {
        this.AddImage(match[1], a.href, a.title, a.rel);
        a.onclick = this.ShowImage.bind(this, match[1], a);
      }
    }
  }
}

ImageViewer.prototype.AddImage = function(GalleryId, ImgSrc, ImgTitle, ImgRel)
{
  if(this.aImage[ImgRel] == null || this.aImage[ImgRel] == "undefined")
  {
    this.aImage[ImgRel] = Array();
  }
  var bAdd = true;
  for(var i = 0; i < this.aImage[ImgRel].length; i++)
  {
    if(ImgSrc == this.aImage[ImgRel][i]["src"]) {
      bAdd = false;
    }
  }
  if(bAdd) {
    var imageDetails = Array();
    imageDetails["src"] = ImgSrc;
    imageDetails["title"] = ImgTitle;
    imageDetails["GalleryId"] = GalleryId;
    this.aImage[ImgRel].push(imageDetails); 
  }
}

ImageViewer.prototype.AddGalleryColors = function(GalleryId, backcolor, containercolor, opacity, GalleryLocation, textcolor, showArrows)
{
  this.aGallery[GalleryId] = Array();
  this.aGallery[GalleryId]["backcolor"] = backcolor; 
  this.aGallery[GalleryId]["containercolor"] = containercolor; 
  this.aGallery[GalleryId]["opacity"] = opacity; 
  this.aGallery[GalleryId]["GalleryLocation"] = GalleryLocation; 
  this.aGallery[GalleryId]["textcolor"] = textcolor;  
  this.aGallery[GalleryId]["showArrows"] = showArrows;  
}

ImageViewer.prototype.ShowImage = function(GalleryId, HyperObj)
{
  var ImgRuler = new Image();
  ImgRuler.name = HyperObj.href;
  this.imageName = HyperObj.title;
  ImgRuler.onload = this.openImage.bind(this, ImgRuler, GalleryId, HyperObj.href, HyperObj.rel);
  ImgRuler.onerror  = this.errorLoad.bind(this);
  ImgRuler.src = HyperObj.href;
  return false;
}

ImageViewer.prototype.ShowInternalImage = function(GalleryId, href, title, rel)
{
  var ImgRuler = new Image();
  ImgRuler.name = href;
  this.imageName = title;
  ImgRuler.onload = this.openImage.bind(this, ImgRuler, GalleryId,href,rel);
  ImgRuler.onerror  = this.errorLoad.bind(this);
  ImgRuler.src = href;
  return false;
}

ImageViewer.prototype.errorLoad = function()
{
  alert('error loading image');
}

ImageViewer.prototype.showNext = function()
{
  if(this.current["count"] >= 0) {
    if(this.current["count"] == this.aImage[this.current["rel"]].length - 1) {
      this.current["count"] = 0;
    } else {
      this.current["count"]++;
    }
    this.ShowInternalImage(this.current["galleryid"], this.aImage[this.current["rel"]][this.current["count"]]["src"] , this.aImage[this.current["rel"]][this.current["count"]]["title"] , this.current["rel"]);
  } 
}

ImageViewer.prototype.showPrevious = function()
{
  if(this.current["count"] >= 0) {
    if(this.current["count"] == 0) {
      this.current["count"] = this.aImage[this.current["rel"]].length - 1;
    } else {
      this.current["count"]--;
    }
    this.ShowInternalImage(this.current["galleryid"], this.aImage[this.current["rel"]][this.current["count"]]["src"] , this.aImage[this.current["rel"]][this.current["count"]]["title"] , this.current["rel"]);
  } 
}

ImageViewer.prototype.openImage = function(ImgRuler, GalleryId, ImgSrc, ImgRel)
{ 
  this.imgHeight = ImgRuler.height;
  this.imgWidth = ImgRuler.width;
  var ImgOverlay = document.getElementById("imageOverlay");
  if(ImgOverlay == "undefined" || ImgOverlay == null) {
    this.createObjects();
    var ImgOverlay = document.getElementById("imageOverlay");      
  }
  var ImgViewer = document.getElementById("imageViewer");
  var ImgContainer = document.getElementById("imageContainerViewer");
  var TxtContainer = document.getElementById("imageTextViewer");

  
  ImgContainer.src = ImgSrc;
  
  TxtContainer.innerHTML = this.imageName;
  
  if(this.aGallery[GalleryId] != "undefined" && this.aGallery[GalleryId] != null)
  {
    ImgViewer.style.backgroundColor = this.aGallery[GalleryId]["containercolor"];
    ImgOverlay.style.backgroundColor = this.aGallery[GalleryId]["backcolor"];
    ImgOverlay.style.opacity = (this.aGallery[GalleryId]["opacity"] / 100);
    ImgOverlay.style.filter = "alpha(opacity = " + this.aGallery[GalleryId]["opacity"] + ")";
    var GalleryLocation = this.aGallery[GalleryId]["GalleryLocation"];
    var bShowArrows = this.aGallery[GalleryId]["showArrows"];
    var textColor = this.aGallery[GalleryId]["textcolor"];
  } else {
    ImgViewer.style.backgroundColor = '#FFFFFF';
    ImgOverlay.style.backgroundColor = '#666666';
    ImgOverlay.style.opacity = '0.70';
    ImgOverlay.style.filter = "alpha(opacity = 70)";
    var GalleryLocation = '0';   
    var bShowArrows = '0';
    var textColor = '#666666';     
  }
  
  switch(GalleryLocation)
  {
    case '2': //left
    {
        var bSide = true;     
        var GalType = "_left";  
        var bDisplayGallery = true;  
        break;
    }    
    case '1': //right
    {
        var bSide = true;     
        var GalType = "_right";   
        var bDisplayGallery = true; 
        break;
    }
    case '-1': //right
    {
        var bSide = false;     
        var GalType = "_bottom";    
        var bDisplayGallery = false; 
        break;
    }
    default: //0 bottom
    {
        var bSide = false;     
        var GalType = "_bottom";   
        var bDisplayGallery = true; 
        break;
    }
  }
  
  document.getElementById('galleryContainer'+'_right').style.display = 'none';
  document.getElementById('galleryContainer'+'_left').style.display = 'none';
  document.getElementById('galleryContainer'+'_bottom').style.display = 'none';
  
  var aGalleryImages = this.aImage[ImgRel];

  if(aGalleryImages.length > 1 && bDisplayGallery) {   
    if(bShowArrows == "1") {
      document.getElementById('ArrowView').style.visibility = 'visible';
      document.getElementById('ArrowView').style.color = textColor;       
    } else {
      document.getElementById('ArrowView').style.visibility = 'hidden';  
    }
   
    document.getElementById('galleryItems' + GalType).innerHTML = "";
    document.getElementById('galleryContainer' + GalType).style.display = 'block';  
 
    for(var GalImg = 0; GalImg < aGalleryImages.length; GalImg++) {
      var GalleryImage = document.createElement("img");
      GalleryImage.src = aGalleryImages[GalImg]["src"];
      
      if(aGalleryImages[GalImg]["src"] == ImgSrc) {     
        GalleryImage.style.border = '1px solid ' + textColor;     
          this.current["count"] = GalImg;
          this.current["galleryid"] = GalleryId;
          this.current["rel"] = ImgRel;
      } else {
        GalleryImage.style.padding = "1px"; 
      }
      if(bSide) {
        GalleryImage.style.width = this.galleryWidth;
        GalleryImage.width = this.galleryWidth;
        GalleryImage.style.height = 'auto';
        GalleryImage.style.margin = "0px 0px 4px 0px";    
      } else {
        GalleryImage.style.height = this.galleryHeight;
        GalleryImage.height = this.galleryHeight;
        GalleryImage.style.width = 'auto';
        GalleryImage.style.margin = "4px 4px 0px 0px";   
      }
      GalleryImage.style.cursor = "pointer";
      GalleryImage.style.display = "inline";
      GalleryImage.style.cssFloat = "left";
      GalleryImage.style.styleFloat = "left";
      GalleryImage.onclick = this.ShowInternalImage.bind(this, GalleryId, aGalleryImages[GalImg]["src"], aGalleryImages[GalImg]["title"], ImgRel);     
      document.getElementById('galleryItems' + GalType).appendChild(GalleryImage);
      if(!bSide) {             // afterwards so elements can be found
        var ImgRuler = new Image();
        ImgRuler.onload = this.GalleryItemLoaded.bind(this,ImgRel, GalType);                                                     
        ImgRuler.onerror += this.errorLoad.bind(this);
        ImgRuler.src = aGalleryImages[GalImg]["src"];
      }
    }
  } else {
    bDisplayGallery = false;
  }
  
  if(bDisplayGallery) {
    if(bSide)
    {
      ImgViewer.style.width = this.imgWidth + (this.galleryWidth + 6 + 22) + "px";  
      ImgViewer.style.height = this.imgHeight + 8 + 11 + "px";     // 8 = margins
      document.getElementById('galleryContainer' + GalType).style.height = this.imgHeight + 2 + "px"; 
      ImgViewer.style.left = (((document.body.scrollWidth - this.imgWidth) / 2) - ((this.galleryWidth + 6 + 22) / 2)) + "px";     
    } else {
      ImgViewer.style.width = this.imgWidth + "px";   
      ImgViewer.style.height = this.imgHeight + 8 + 11 + this.galleryHeight + 24 + "px";  // 8 = margins      
      document.getElementById('galleryContainer' + GalType).style.width = this.imgWidth + "px";  
      ImgViewer.style.left = ((document.body.scrollWidth - this.imgWidth) / 2) + "px";          
    }
  } else {
    ImgViewer.style.height = this.imgHeight + 8 + 11 + "px";  // 8 = margins      
    ImgViewer.style.width = this.imgWidth + "px";   
    ImgViewer.style.left = ((document.body.scrollWidth - this.imgWidth) / 2) + "px";     
  }
  
  document.getElementById('ImagePropertiesContainer').style.color = textColor;
  
  var aTops = new Array();
  aTops.push(window.screenTop);
  aTops.push(window.pageYOffset);
  aTops.push(document.documentElement.scrollTop);
  aTops.push(document.body.scrollTop);
  aTops.push(document.body.pageYOffset);
  var PageOffset = GetBiggest(aTops);  
  ImgViewer.style.top = PageOffset + this.TopOffset + "px";
  ImgViewer.rel = ImgRel; 
  var finalHeight = this.getPageHeight();
  ImgOverlay.style.height = finalHeight + "px";
  ImgOverlay.style.width = document.body.scrollWidth + "px"; 
  ImgOverlay.style.display = 'block';
  ImgViewer.style.display = 'block';
}

ImageViewer.prototype.GalleryItemLoaded = function(ImgRel, GalType)
{
  var aGalleryImages = document.getElementById('galleryItems' + GalType).getElementsByTagName('img');
  var totalWidth = 0;       
  for(var GalImg = 0; GalImg < aGalleryImages.length; GalImg++) { 
    totalWidth += parseInt(aGalleryImages[GalImg].clientWidth) + 4; // add 4px for margins
  }

  document.getElementById('galleryItems' + GalType).style.width = (totalWidth + 4) + "px"; // add additional 4 px to compensate container margins
}

function GetBiggest(aValues)
{
  var biggest = 0;
  if(aValues.length < 1) {
    return 0;
  }
  for(var i = 0; i < aValues.length; i++)
  {
    if((aValues[i] != "undefined") && (aValues[i] != null)) {
      if(aValues[i] > biggest) {
        biggest = aValues[i];  
      }
    }
  }
  return biggest;
}

ImageViewer.prototype.setOverlay = function()  
{
  var ImgOverlay = document.getElementById("imageOverlay");
  if(ImgOverlay == "undefined" || ImgOverlay == null) {
    return;   
  }
  if(ImgOverlay.style.display == "block") {
    var ImgViewer = document.getElementById("imageViewer");
    ImgViewer.style.width = this.imgWidth + "px";
    
    if(this.aImage[ImgViewer.rel].length <= 1) {
      ImgViewer.style.height = this.imgHeight + 16 + "px";   
    } else {
      ImgViewer.style.height = this.imgHeight + 16 + this.galleryHeight + 20 + "px";
    }
    
    ImgViewer.style.left = ((document.body.scrollWidth - this.imgWidth) / 2) + "px"; 
    
    var PageOffset = window.pageYOffset || document.body.scrollTop;
    ImgViewer.style.top = PageOffset + this.TopOffset + "px";
    
    var finalHeight = this.getPageHeight();
    ImgOverlay.style.height = finalHeight + "px";
    ImgOverlay.style.width = document.body.scrollWidth + "px"; 
    ImgOverlay.style.display = 'block';
    ImgViewer.style.display = 'block';  
  }
}

ImageViewer.prototype.getPageHeight = function()  
{
  var height1 = 0;
  if(isDefined(window, window.innerHeight))
  {
    height1 = parseInt(window.innerHeight);
  }
  var height2 = 0;
  if(isDefined(document.body, document.body.scrollHeight))  
  {
    height2 = parseInt(document.body.scrollHeight);
  }
  var height3 = 0;
  if(isDefined(document.documentElement, document.documentElement.clientHeight))  
  {
    height3 = parseInt(document.documentElement.clientHeight);
  }
  return Math.max(height1, height2, height3); 
}

ImageViewer.prototype.createObjects = function()
{
    var OverlayObj = document.createElement("div");
    OverlayObj.id = "imageOverlay";
    OverlayObj.style.display = 'none';
    OverlayObj.style.position = 'absolute';
    OverlayObj.style.top = '0px';
    OverlayObj.style.left = '0px';
    OverlayObj.style.backgroundColor = '#666666'; // to be set   
    OverlayObj.style.opacity = '0.70';                     // to be set   
    OverlayObj.style.filter = "alpha(opacity = 70)";     // to be set   
    OverlayObj.style.zIndex = '900';
    OverlayObj.style.height = document.body.scrollHeight + "px"; 
    OverlayObj.style.width = document.body.scrollWidth + "px"; 
    OverlayObj.onclick = this.hideViewer.bind(this);  
    document.body.appendChild(OverlayObj);
    var ViewerObj = document.createElement("div");
    ViewerObj.id = "imageViewer";
    ViewerObj.style.display = 'none';
    ViewerObj.style.position = 'absolute';
    ViewerObj.style.top = '0px'; // to be set
    ViewerObj.style.left = '0px'; // to be set
    ViewerObj.style.backgroundColor = '#FFFFFF'; // to be set   
    ViewerObj.style.padding = '0px 10px 10px 10px';
    ViewerObj.style.zIndex = '901';
    ViewerObj.style.height = '0px'; // to be set
    ViewerObj.style.width = '0px'; // to be set      
    document.body.appendChild(ViewerObj);
    
    var ArrowView = document.createElement("div");
    ArrowView.id = "ArrowView";
    ArrowView.style.width = "100%";      
    //ArrowView.style.display = "none";
    ArrowView.style.visibility = "hidden";   
    ArrowView.style.fontSize = "20px";  
    ArrowView.style.margin = "-5px 0px 0px 0px";
    ArrowView.style.lineHeight = "16px";          
    ArrowView.style.Height = "16px";      
    ArrowView.style.cssFloat = "left";
    ArrowView.style.styleFloat = "left";            
    var ArrowViewL = document.createElement("span");
    ArrowViewL.id = "ArrowViewLeft";
    ArrowViewL.onclick = this.showPrevious.bind(this);
    ArrowViewL.style.cssFloat = "left";
    ArrowViewL.style.styleFloat = "left"; 
    ArrowViewL.innerHTML = "←";
    ArrowViewL.style.cursor = "pointer";  
    var ArrowViewR = document.createElement("span");
    ArrowViewR.id = "ArrowViewRight";
    ArrowViewR.onclick = this.showNext.bind(this);  
    ArrowViewR.style.cssFloat = "right";
    ArrowViewR.style.styleFloat = "right";
    ArrowViewR.style.cursor = "pointer";  
    ArrowViewR.innerHTML = "→";  
    ViewerObj.appendChild(ArrowView);
    ArrowView.appendChild(ArrowViewL); 
    ArrowView.appendChild(ArrowViewR); 
    
    var GalleryContainerLFT = document.createElement("div");
    GalleryContainerLFT.id = "galleryContainer_left";
    GalleryContainerLFT.style.display = 'none'; 
    GalleryContainerLFT.style.overflowX = 'hidden';  
    GalleryContainerLFT.style.cssFloat = "left";
    GalleryContainerLFT.style.styleFloat = "left";
    GalleryContainerLFT.style.overflowY = 'scroll';    
    GalleryContainerLFT.style.width = (this.galleryWidth + 6 + 18) + "px";     
    var GalleryItemsLFT = document.createElement("div");
    GalleryItemsLFT.id = "galleryItems_left";
    GalleryItemsLFT.style.height = "100%";      
    GalleryItemsLFT.style.width = (this.galleryWidth + 6) + "px";           
    ViewerObj.appendChild(GalleryContainerLFT);
    GalleryContainerLFT.appendChild(GalleryItemsLFT);   

    var ImageContainer = document.createElement("img");
    ImageContainer.id = "imageContainerViewer";
    ImageContainer.style.margin = '0px';
    ImageContainer.style.cssFloat = "left";
    ImageContainer.style.styleFloat = "left"; 
    ImageContainer.style.padding = "0px";  
    ViewerObj.appendChild(ImageContainer);
    
    var GalleryContainerBTM = document.createElement("div");
    GalleryContainerBTM.id = "galleryContainer_bottom";
    GalleryContainerBTM.style.display = 'none'; 
    GalleryContainerBTM.style.overflowX = 'scroll';  
    GalleryContainerBTM.style.overflowY = 'hidden';  
    GalleryContainerBTM.style.height = (this.galleryHeight + 6 + 18) + "px";     
    var GalleryItemsBTM = document.createElement("div");
    GalleryItemsBTM.id = "galleryItems_bottom";
    GalleryItemsBTM.style.width = "100%";      
    GalleryItemsBTM.style.height = (this.galleryHeight + 6) + "px";           
    ViewerObj.appendChild(GalleryContainerBTM);
    GalleryContainerBTM.appendChild(GalleryItemsBTM);  
    
    var GalleryContainerRGT = document.createElement("div");
    GalleryContainerRGT.id = "galleryContainer_right";
    GalleryContainerRGT.style.display = 'none'; 
    GalleryContainerRGT.style.overflowX = 'hidden';  
    GalleryContainerRGT.style.cssFloat = "right";
    GalleryContainerRGT.style.styleFloat = "right";
    GalleryContainerRGT.style.overflowY = 'scroll';    
    GalleryContainerRGT.style.width = (this.galleryWidth + 6 + 18) + "px";       
    var GalleryItemsRGT = document.createElement("div");
    GalleryItemsRGT.id = "galleryItems_right";
    GalleryItemsRGT.style.height = "100%";      
    GalleryItemsRGT.style.width = (this.galleryWidth + 6) + "px";           
    ViewerObj.appendChild(GalleryContainerRGT);
    GalleryContainerRGT.appendChild(GalleryItemsRGT);   
    
    var ContentContainer = document.createElement("div");
    ContentContainer.style.width = "100%";
    ContentContainer.id = "ImagePropertiesContainer";
    ContentContainer.style.fontFamily = "Arial";
    ViewerObj.appendChild(ContentContainer);
    
    var TextContainer = document.createElement("div");
    TextContainer.id = "imageTextViewer";
    TextContainer.style.cssFloat = "left";
    TextContainer.style.styleFloat = "left";
    ContentContainer.appendChild(TextContainer);
    
    var CloseContainer = document.createElement("div");
    CloseContainer.innerHTML = "Sluiten";
    CloseContainer.style.cssFloat = "right";
    CloseContainer.style.cursor = "pointer";
    CloseContainer.style.styleFloat = "right";
    CloseContainer.style.width = "50px";
    CloseContainer.style.textAlign  = "right";
    CloseContainer.onclick = this.hideViewer.bind(this);
      
    ContentContainer.appendChild(CloseContainer);
}

ImageViewer.prototype.hideViewer = function()
{
  var ImgOverlay = document.getElementById("imageOverlay");
  var ImgViewer = document.getElementById("imageViewer");
  if(ImgOverlay == "undefined" || ImgOverlay == null) {
    //alert("It's missing!");
  } else {
    ImgOverlay.style.display = 'none';  
    ImgViewer.style.display = 'none';
  }
}

function isDefined(obj, property)
{
  if(obj != "undefined" && obj != null && property != "NaN" && property != null && property != "undefined")
  {
    return true;
  }
  return false;
}

function toArray(pseudoArray) {
  var result = [];
  for (var i = 0; i < pseudoArray.length; i++)
    result.push(pseudoArray[i]);
  return result;
}

Function.prototype.bind = function (object) {
  var method = this;
  var oldArguments = toArray(arguments).slice(1);
  return function () {
    var newArguments = toArray(arguments);
    return method.apply(object, oldArguments.concat(newArguments));
  };
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}