YAHOO.util.Event.addListener(window, 'load', function() {
  //initialise tabs
  myTabs = new YAHOO.widget.TabView('articleContent');
  //set min-height on body to stop page size shrinking when a smaller tab is loaded
  YAHOO.util.Dom.setStyle(document.body,'min-height',YAHOO.util.Dom.getStyle(document.body,'height'));
  theAnim = new YAHOO.util.Anim( myTabs.getTab(0).get('contentEl').parentNode, {opacity: { to: 0.99 }}, 0.6, YAHOO.util.Easing['easeIn'] );
  //explicitly set transformation to make future development easier
  myTabs.contentTransition = function(newTab, oldTab) {
  if ( theAnim && theAnim.isAnimated() ) theAnim.stop(true);
    //if the current tab caused the body to expand beyond its min-height then update min-height 
    if(YAHOO.util.Dom.getStyle(document.body,'height') > YAHOO.util.Dom.getStyle(document.body,'min-height')) YAHOO.util.Dom.setStyle(document.body,'min-height',YAHOO.util.Dom.getStyle(document.body,'height'));
    //Implement transition effects
    //hide the old element before displaying the new to avoid jumping page
    YAHOO.util.Dom.setStyle(oldTab.get('contentEl').parentNode,'opacity','0');
    YAHOO.util.Dom.setStyle(oldTab.get('contentEl'),'display','none');
    YAHOO.util.Dom.setStyle(newTab.get('contentEl'),'display','block');
    myTabs.removeClass(oldTab.get('labelEl'),'selected');
    myTabs.addClass(newTab.get('labelEl'),'selected');
    theAnim.animate();
  };

  theImgs = false;
  theDivs = document.getElementById('articleContent').getElementsByTagName('div');
  for(x in theDivs) if(theDivs[x].className == 'article') {theImgs = theDivs[x].getElementsByTagName('img'); break;}
  if(theImgs !== false && theImgs.length > 0)
  {
    for(x = 0; x < theImgs.length; x++)
    {
      theTitle = theImgs[x].getAttribute('title');
      if(theTitle != null && theTitle != '')
      {
        theOuterSpan = document.createElement('span');
        theInnerSpan = document.createElement('span');
        theInnerSpan.appendChild(document.createTextNode(theTitle));
        theInnerSpan.className = 'caption';
        if(YAHOO.util.Dom.getStyle(theImgs[x].parentNode,'text-align') == 'center')
        {
          YAHOO.util.Dom.setStyle(theOuterSpan,'margin-left','auto');
          YAHOO.util.Dom.setStyle(theOuterSpan,'margin-right','auto');
        }
        YAHOO.util.Dom.setStyle(theOuterSpan,'height',YAHOO.util.Dom.getStyle(theImgs[x],'height'));
        YAHOO.util.Dom.setStyle(theOuterSpan,'width',YAHOO.util.Dom.getStyle(theImgs[x],'width'));
        YAHOO.util.Dom.setStyle(theInnerSpan,'width',((parseInt(YAHOO.util.Dom.getStyle(theImgs[x],'width')) - 10) + 'px'));
        //Chop the nxt two lines if you want to repect images margin. Will position caption accordingly
        YAHOO.util.Dom.setStyle(theImgs[x],'margin-left','0px');
        YAHOO.util.Dom.setStyle(theImgs[x],'margin-right','0px');
        
        YAHOO.util.Dom.setStyle(theInnerSpan,'bottom',(parseInt(YAHOO.util.Dom.getStyle(theImgs[x],'padding-bottom')) + parseInt(YAHOO.util.Dom.getStyle(theImgs[x],'margin-bottom')) + 'px'));
        YAHOO.util.Dom.setStyle(theInnerSpan,'left',(parseInt(YAHOO.util.Dom.getStyle(theImgs[x],'padding-left')) + parseInt(YAHOO.util.Dom.getStyle(theImgs[x],'margin-left')) + 'px'));
  //      YAHOO.util.Dom.setStyle(theOuterSpan,{'display':'block','position':'relative','float':YAHOO.util.Dom.getStyle(theImgs[x],'float')});
  //      YAHOO.util.Dom.setStyle(theImgs[x],'float', 'none');
        YAHOO.util.Dom.setStyle(theOuterSpan,'display','block');
        YAHOO.util.Dom.setStyle(theOuterSpan,'position','relative');
        theOuterSpan.className = theImgs[x].className;
        theImgs[x].parentNode.insertBefore(theOuterSpan,theImgs[x]);
        theOuterSpan.appendChild(theImgs[x]);
        theImgs[x].className = '';
        theOuterSpan.appendChild(theInnerSpan);
      }
    }
  }
});