$(document).ready(function() 
  {
    $('img.caption').each(function () {
      var hasNext = true;
      var hasPrevious = false;
      var currentImageID = parseInt(this.id.replace('newsImage_',''));

      // save some stuff for later use
      var oParent = this.parentNode;
      var sCaption1 = this.alt;
      var sCaption2 = this.title;
      var publisherPos = sCaption2.lastIndexOf(',');
      var sCaption3 = '';
      if (publisherPos > 0)
      {
        sCaption3 = sCaption2.substring(publisherPos+1);
      }
      sCaption2 = sCaption2.replace(','+sCaption3,'');
      var sClasses = this.className;
            
      // clear title and className properties
      this.title = '';
      this.className = '';
            
      // create new parent container for image
      var oContainer = document.createElement('div');

      // assign classes from img tag
      oContainer.className = sClasses;
            
      // constrain the width and height of DIV to image dimensions
      oContainer.style.width = this.width + 'px';
      oContainer.style.height = this.height + 'px';
            
      // swap existing image
      oParent.replaceChild(oContainer, this);
      oContainer.appendChild(this);

      // create strap line
      var oCaptionContainer1 = document.createElement('div');
      oCaptionContainer1.id = 'photoStrapLine';
      oCaptionContainer1.appendChild(document.createTextNode(' '));

      //Create the caption holder (no background)
      var oCaptionContainer2 = document.createElement('div');
      oCaptionContainer2.id = 'photoCaption2';

      var oCaptionContainer3 = document.createElement('div');
      oCaptionContainer3.id = 'photoCaption3';
      
      //Add in the captions
      var oCaption1 = document.createElement('h2');
      oCaption1.appendChild(document.createTextNode(sCaption1));
      oCaption1.id='caption_Text1';
      oCaptionContainer2.appendChild(oCaption1);
      var lineBreak = document.createElement('br');
      oCaptionContainer2.appendChild(lineBreak);
      var oCaption2 = document.createElement('h3');
      oCaption2.id='caption_Text2';
      oCaption2.appendChild(document.createTextNode(sCaption2));
      oCaptionContainer2.appendChild(oCaption2);
      oCaptionContainer3.appendChild(document.createTextNode(sCaption3));

      var oButtonContainer = document.createElement('div');
      oButtonContainer.id = 'LinkContainer';

      //direction = 1 for forward, -1 for back
      function previousImage() 
      {
        fetchImage(-1);
      }

      function nextImage() 
      {
        fetchImage(1);
      }
      
      function fetchImage(direction) 
      {
        //Call the web service to fetch the next image for display.
        //This service should return:
        // 1. The image
        // 2. The image caption header
        // 3. The image caption
        // 4. Values indicating that next and previous images are available.
        //Let's fade it in!
        //$.getJSON('/index_FetchPhoto.php?c='+currentImageID+'&d='+direction');
        $.ajax({ 
          url: '/index_FetchPhoto.php',
          cache: true, 
          data: 'c='+currentImageID+'&d='+direction,
          success: function(data) 
          { 
            var newsImage = $.parseJSON(data,true);
            $('#caption_Text1').html(newsImage._title);
            $('#caption_Text1').removeClass("sIFR-replaced");
            $('#caption_Text2').html(newsImage._textSummary);
            $('#caption_Text2').removeClass("sIFR-replaced");
            $('#photoCaption3').html('© ' + newsImage._publisher);
            $('#newsImage_'+currentImageID).attr('src',newsImage._supportingURL);
            $('#newsImage_'+currentImageID).attr('id','newsImage_'+newsImage._newsID);
            currentImageID = newsImage._newsID;
            hasPrevious = newsImage._hasPrevious;
            hasNext = newsImage._hasNext;
            if (hasPrevious == true)
              document.getElementById('PrevLink').className = 'PrevLink';
            else
              document.getElementById('PrevLink').className = '';
            if (hasNext == true)
              document.getElementById('NextLink').className = 'NextLink';
            else
              document.getElementById('NextLink').className = '';

          },
          error: function() {  }
        });
      }
      
      var oButtonLink1 = document.createElement('a');
      oButtonLink1.id = 'PrevLink';
      if (hasPrevious == true)
        oButtonLink1.className = 'PrevLink';
      oButtonLink1.title = 'Previous Image';
      oButtonLink1.href= 'javascript:void(null);';
      var oButtonLink1Obj = $(oButtonLink1);
      oButtonLink1Obj.click(previousImage);
      var oButtonText1 = document.createElement('span');
      oButtonText1.appendChild(document.createTextNode('Previous'));
      oButtonLink1.appendChild(oButtonText1);
      oButtonContainer.appendChild(oButtonLink1);
      var oButtonLink2 = document.createElement('a');
      oButtonLink2.id = 'NextLink';
      if (hasNext == true)
        oButtonLink2.className = 'NextLink';
      oButtonLink2.title = 'Next Image';
      oButtonLink2.href= 'javascript:void(null);';
      var oButtonLink2Obj = $(oButtonLink2);
      oButtonLink2Obj.click(nextImage);
      var oButtonText2 = document.createElement('span');
      oButtonText2.appendChild(document.createTextNode('Next'));
      oButtonLink2.appendChild(oButtonText2);
      oButtonContainer.appendChild(oButtonLink2);

      // append all of it to parent container
      oContainer.appendChild(oButtonContainer);

      // make sure they have title text set
      if (sCaption2 != '') 
      {
        oContainer.appendChild(oCaptionContainer1);
        oContainer.appendChild(oCaptionContainer2);
        oContainer.appendChild(oCaptionContainer3);
      }

      oCaptionContainer1.style.width = (this.width-5) + 'px';
      oCaptionContainer2.style.width = (this.width-5) + 'px';
      oButtonContainer.style.width = (this.width-5) + 'px';

      
    });
  });