$(document).ready(function(){
//    Generalize to extend to the case studies.
//    figures('.item img.left[@title], .item img.center[@title], .item img.right[@title]');
//    figures('.alpha-body img.left[@title], .alpha-body img.center[@title], .alpha-body img.right[@title]');
//    Why was this attached to the placement styles?
    figures('.alpha-body img[@title]');
    $('#lang-en').click(function(){
        $.cookie('lang', 'en', {expires: 30, path: '/'});
    });
    $('#lang-es').click(function(){
        $.cookie('lang', 'es', {expires: 30, path: '/'});
    });
    $('#lang-de').click(function(){
        $.cookie('lang', 'de', {expires: 30, path: '/'});
    });
$('a[img]').css('border','none'); // kill annoying border inherited from link styling
});


function figures(selectors) {
   $.each($(selectors), function(i) {
      var parent = this.parentNode;
      if ($(parent).is('a')) {
          var theFigure = $(parent).clone();
          var origFigure = parent;
      } else {
          var theFigure = $(this).clone();
          var origFigure = this;
      }

      var figureFrameInner = document.createElement('div');
      $(figureFrameInner).addClass('inner');
      var figureFrame = document.createElement('div');
      $(figureFrame).addClass('figure-frame').addClass(this.className).width($(this).width()).append($(figureFrameInner));
      
      var figureContainerInner = document.createElement('div');
      $(figureContainerInner).addClass('inner').append(theFigure);
      var figureContainer = document.createElement('div');
      $(figureContainer).addClass('figure-container').append($(figureContainerInner));

      var theCutline = $(this).attr('title');
      var cutlineContainerInner = document.createElement('div');
      $(cutlineContainerInner).addClass('inner').append(theCutline);
      var cutlineContainer = document.createElement('div');
      $(cutlineContainer).addClass('cutline-container').append($(cutlineContainerInner));

      $(figureFrameInner).append(figureContainer).append(cutlineContainer);

      $(origFigure).before(figureFrame).remove();
   });
}

/*
Resulting markup:
<div class="figure-frame">
<div class="inner">
    <div class="figure-container">
    <div class="inner">
        [The image]
    </div>
    </div>
    <div class="cutline-container">
    <div class="inner">
        [The text of the original img tag's title attribute]
    </div>
    </div>
</div>
</div>
*/