var sShow = {
  curPic: "0",
  imOffset:"0",
  maxViewable:"0",
  minRange:"0",
  maxRange:"0",

  findTarget: function(e)
  {
    var target;

    if (window.event && window.event.srcElement)
      target = window.event.srcElement;
    else if (e && e.target)
      target = e.target;
    if (!target)
      return null;

    return target;
  }, 

  addEvent: function(elm, evType, fn, useCapture)
  {
    if(elm.addEventListener)
    {
      elm.addEventListener(evType, fn, useCapture);
      return true;
    }
    else if(elm.attachEvent)
    {
      return elm.attachEvent('on' + evType, fn);
      //EventCache.add(elm, evType, fn);
    }
    else
    {
      elm['on' + evType] = fn;
    }
  },


  updateContent: function(myImages)
  {
    var total = myImages.length;
    var imStart = 0;
    var imEnd = total;
    var i;
    var d=document;

    if(total > sShow.maxViewable)
    {
      imStart = sShow.curPic - sShow.imOffset;

      if(imStart < 0)
      {
        imStart = 0;
      }
      if(imStart > (total - sShow.maxViewable))
      {
        imStart = total - sShow.maxViewable;
      }

      imEnd = sShow.curPic + sShow.imOffset;

      if(imEnd-imStart < sShow.maxViewable)
      {
        imEnd = imStart + sShow.maxViewable;
      }
      if(imEnd > total)
      {
        imEnd = total;
      }
    }
    sShow.maxRange = imEnd;
    sShow.minRange = imStart;
    
    var prevSlide = ((sShow.curPic) % (total + 2));
    if(sShow.curPic == 0)
      prevSlide = total;
    var spans = d.getElementsByTagName('span');
    if(!spans)
    {
      return;
    }
    var j = 0;
    for(i = 0; i < spans.length; i++)
    {
      if(spans[i].className == "current")
        spans[i].className = "slideLink";
      if(spans[i].className == "slideLink")
      {
        if(j < imStart || j >= imEnd)
        {
          spans[i].style.display = "none";
        }
        else
        {
           spans[i].style.display = "inline";
           spans[i].setAttribute('title', 'Click to move directly to slide  ' + (j + 1))
        }
        if(j == sShow.curPic)
        {
          spans[i].className = "current";
          spans[i].setAttribute('title', 'The current slide.');
        }
        j++;
      }
    }

    var pr = d.getElementById("picRange");

    if(!pr)
    {
      return;
    }
    var pL = pr.childNodes.length;
    for(var i = 0; i < pL; i++)
      pr.removeChild(pr.childNodes[0]);

    txt = d.createTextNode("Picture " + (sShow.curPic + 1) + " of " + myImages.length);
    pr.appendChild(txt);  

    var pb = d.getElementById("PictureBox");
    if(!pb)
    {
      return;
    }
    while(pb.firstChild){pb.removeChild(pb.firstChild);}

    var image = d.createElement('img');
    image.setAttribute('src', prefix + myImages[sShow.curPic].src);
    //image.className = 'bordered';
    pb.appendChild(image);
    pb.style.textAlign="center";

    var cap = d.getElementById("CaptionBox");
    if(!cap)
    {
      return;
    }
    iL = cap.childNodes.length;
    for(var i = 0; i < iL; i++)
      cap.removeChild(cap.childNodes[0]);
    txt = d.createTextNode(myImages[sShow.curPic].caption);
    cap.appendChild(txt);
    
    if(typeof myImages[sShow.curPic].lat != "undefined" && myImages[sShow.curPic].lat != "")
    {
      var s = d.createElement("abbr");
      s.appendChild(d.createTextNode(" "));
      s.setAttribute('title', myImages[sShow.curPic].lat + ';' + myImages[sShow.curPic].lon);
      s.className = "geo";
      cap.appendChild(s);
    }
    cap.style.textAlign="center";
  },


  showSlide: function(evt)
  {
    var index = sShow.findTarget(evt).id.split("_");

    sShow.curPic = parseInt(index[1]);
 
    sShow.updateContent(pictures);
  },

  changeSlide: function(direction, myImages)
  {
    var total = myImages.length-1;

    if(document.images)
    {
      sShow.curPic += direction;
      if(sShow.curPic > total)
      {
        sShow.curPic = 0;
      }
      if(sShow.curPic < 0)
      {
        sShow.curPic = total;
      }
      sShow.updateContent(myImages);
    }
  },

  changeLeft: function()
  {
    sShow.changeSlide(-1, pictures);
    
    var mid = document.getElementById("ssL_"+sShow.minRange);
    var high = document.getElementById("ssL_"+(sShow.minRange+1));
    this.style.fontSize="140%";
    //this.style.color="#000";
    mid.style.fontSize="120%";
    //mid.style.color="#222";
    high.style.fontSize="100%";
    //high.style.color="#444";
  },

  changeRight: function()
  {
    sShow.changeSlide(1, pictures);
    
    var mid = document.getElementById("ssL_"+(sShow.maxRange-1));
    var low = document.getElementById("ssL_"+(sShow.maxRange-2));
    //alert(sShow.maxRange);
    this.style.fontSize="140%";
    //this.style.color="#000";
    mid.style.fontSize="122%";
    //mid.style.color="#222";
    low.style.fontSize="100%";
    //low.style.color="#444";
  },

  startSlide: function()
  {
    /*
      This little lot is needed to allow both Internet explorer and
      Firefox to handle the arrow keys. The page moves in IE if onkeypress
      is used, similarly for Firefox if onkeydown is used. Opera moves the
      page whatever and however it is set up.
    */
    if (navigator.appName.indexOf("Microsoft")!=-1) 
    {
       document.onkeydown = sShow.checkKeyPressed;
    }
    else if(navigator.appName.indexOf("Netscape")!=-1)
    {   
       document.onkeypress = sShow.checkKeyPressed;
    }

    if(!document.getElementById || !document.getElementsByTagName)
      return;

    sShow.curPic = 0;
    sShow.imOffset = 4;
    sShow.maxViewable = (sShow.imOffset * 2) + 1;
    myImages = pictures;
    var i;
    var navBar = document.getElementById("navigation");
    if(!navBar) { return; }
     var ns = document.createElement('span');
    if(!ns){ return; }
    ns.appendChild(document.createTextNode("<- "));

    ns.className="navArrow_L";
    ns.id="leftArrow";
    sShow.addEvent(ns, 'mouseover', sShow.leftHover, false);
    sShow.addEvent(ns, 'mouseout', sShow.leftMouseOut, false);
    sShow.addEvent(ns, 'click', sShow.changeLeft, false);
    ns.setAttribute('title', 'Click to move to previous slide ');
    ns.style.verticalAlign="middle";
    navBar.appendChild(ns);

    for(i = 0; i < myImages.length; i++)
    {
       ns = document.createElement('span');
       ns.appendChild(document.createTextNode( '  ' + (i + 1) + '  '));
       sShow.addEvent(ns, 'click', sShow.showSlide, false);
       ns.className = (0 == i) ? "current": "slideLink";
       ns.id = "ssL_"+ i;
       ns.style.display = "inline";
       ns.style.verticalAlign="middle";
       sShow.addEvent(ns, 'mouseover', sShow.hover, false);
       sShow.addEvent(ns, 'mouseout', sShow.mouseOut, false);
       navBar.appendChild(ns);
    }
    ns = document.createElement('span'); 
    ns.id="rightArrow";
    ns.className="navArrow_R";
    ns.style.verticalAlign="middle";
    ns.setAttribute('title', 'Click to move to next slide ');
    sShow.addEvent(ns, 'mouseover', sShow.rightHover, false);
    sShow.addEvent(ns, 'mouseout', sShow.rightMouseOut, false);
    sShow.addEvent(ns, 'click', sShow.changeRight, false);
    ns.appendChild(document.createTextNode("  -> "));
    navBar.appendChild(ns);

    sShow.updateContent(myImages);
  },
  
  // These six event handlers provide a magnifying lens effect
  hover: function()
  {
    var p = this.id.split('_');
    var c = parseInt(p[1]);

    var low = document.getElementById((c == 0) ? "leftArrow":("ssL_"+(c-1)));
    var high = document.getElementById((c+1 == sShow.maxRange) ? "rightArrow":("ssL_"+(c+1)));
   
    low.style.fontSize="120%";
    low.style.color= (sShow.curPic == (c-1))?"#e00":"#222";
    this.style.fontSize="140%";
    this.style.color=(sShow.curPic == c)?"#e00":"#000";
    high.style.fontSize="120%";
    high.style.color=(sShow.curPic == (c+1))?"#e00":"#222";
  },
  
  mouseOut: function()
  { 
    var p = this.id.split('_');
    var c = parseInt(p[1]);
    var low = document.getElementById((c == 0) ? "leftArrow":("ssL_"+(c-1)));
    var high = document.getElementById((c+1 == sShow.maxRange) ? "rightArrow":("ssL_"+(c+1)));
    
    low.style.fontSize="100%";
    low.style.color=(sShow.curPic == (c-1))?"#e00":"#444";
    this.style.fontSize="100%";
    this.style.color=(sShow.curPic == c)?"#e00":"#444";
    high.style.fontSize="100%";
    high.style.color=(sShow.curPic == (c+1))?"#e00":"#444";
  },
  
  rightHover: function()
  {
    var left = document.getElementById("ssL_"+(sShow.maxRange-1));
    left.style.fontSize="120%";
    left.style.color="#222";
    this.style.fontSize="140%";
    this.style.color="#000";
  },
  rightMouseOut: function()
  {
    var left = document.getElementById("ssL_"+(sShow.maxRange-1));
    left.style.fontSize="100%";
    left.style.color="#444";
    this.style.fontSize="100%";
    this.style.color="#444";
  },
  
  leftHover: function()
  {
    var left = document.getElementById("ssL_"+sShow.minRange);
    left.style.fontSize="120%";
    left.style.color="#222";
    this.style.fontSize="140%";
    this.style.color="#000";
  },
  leftMouseOut: function()
  {
    var right = document.getElementById("ssL_"+sShow.minRange);
    right.style.fontSize="100%";
    right.style.color="#444";
    this.style.fontSize="100%";
    this.style.color="#444";
  },


  /*
    handles left (37) and right (39) arrow keys.
  */
  checkKeyPressed: function (evt)
  {
    evt = (evt) ? evt : (window.event) ? event : null;
    if (evt)
    {
      var charCode = (evt.charCode) ? evt.charCode :
                     ((evt.keyCode) ? evt.keyCode :
                     ((evt.which) ? evt.which : 0));

      if (charCode == 39) 
      {
         sShow.changeSlide(1, pictures);
         return false;
      }
      if(charCode == 37)
      {
         sShow.changeSlide(-1, pictures);
         return false;
      }
    }
    return true;  
  }
};

// Finally, bind the above functions to the onload & onunload events of the page
sShow.addEvent(window, 'load', sShow.startSlide, false);
//sShow.addEvent(window, 'unload', EventCache.flush, false);

// End of file