// startup function to attach click event handlers to the tabs
var currentBody;
$(function() {
  currentBody = $(".compositeTabBody:first").show();
  $("#bodies").after('<div id="nav" class="left">').cycle({ fx: 'fade',
    sync: true,
    pager: '#nav',
    timeout: 3000,
    before: onbefore,
    after: onafter,
    pagerAnchorBuilder: buildTab
  }).height("263px"); // something is setting the height wrongly - need this to fix it

  $("#compositeTabFeature").hover(function() { $("#bodies").cycle('pause'); }, function() { $("#bodies").cycle('resume'); });
  $(".compositeTabImage").hover(function() { setTabImg($(this), 'ontab'); }, setTabOff);
  setTabImg($(".compositeTabImage:first"), "ontab");
});

function buildTab(idx, slide) {
  var offtab = $(slide).attr('offtab');
  var ontab = $(slide).attr('ontab');
  var id = $(slide).attr('tabid');
  return  '<div id="' + id + '" class="compositeTabImage" bodyid="' + slide.id + '">' +
            '<img src="' + offtab + '" alt="" />' +
          '</div>';
}

function setTabImg(tab, onoff) {
  var img = $("#" + tab.attr('bodyid')).attr(onoff);
  $("img", tab).attr("src", img);
}

function onbefore() {
  setTabImg($('#' + currentBody.attr('tabid')), 'offtab');
}

function onafter() {
  
  currentBody = $(this);
  setTabImg($('#' + currentBody.attr('tabid')), 'ontab');
}

function setTabOff() {
  if ($(this).attr('bodyid') != currentBody[0].id) 
  {
    setTabImg($(this), 'offtab'); 
  } 
}