$(document).ready(function() {
  $('a[href*=cluefiles], span[title]').css('borderBottom', '1px dotted #933');

  $('a.basic-clue').cluetip();  
  $('a:contains(options)').cluetip({width: 520, sticky: true});
  
  $('a.sticky-clue').cluetip({sticky: true});
  $('span[title]').cluetip({
    splitTitle: ',', 
    hoverClass:'highlighter'
  });
  
  $('a.local').cluetip({
    local: true, 
    attribute: 'href', 
    activation: 'click'
  });


  $('#clue-image').cluetip({
    width: 380,
    attribute: 'longdesc',
    titleAttribute: 'alt',
    sticky: 'true',
    closeText: '<img src="/images/cross.png" alt="close" height="16" width="16" />',
    closePosition: 'bottom',
    ajaxProcess: function(data) {
      var html = '';
      $(data).find('hero[firstname=Ben]').each(function() {
        var $hero = $(this);
        html +='<span style="width: 332px;height: 500px"><img src="' + $('photo', $hero).text() + '" alt="" width="332" height="500" /></span>';
        html += '<p>' + $hero.attr('firstname') + ' loves to ' + $('activity', $hero).text() + '</p>';
      });
      return html;
    },
    ajaxSettings: {
      dataType: 'xml'
    }
  });
  
});