$(function() {  
  // takes an XML-DOM object containing the faculty profile,
  // and injects it into the HTML
  function loadprofile(faculty) {
    var profile = $('#profilescontent');
    faculty = $(faculty);
    var name = faculty.find('personal name').text();
    if(typeof console == "object") {
      console.log(faculty);
      console.log(typeof faculty);
      console.log("loading %s", name, faculty);
    }
    
    var pers_url = faculty.find('personal url').text();
    $('.name a', profile).text(name).attr('href', pers_url);
    $('.title', profile).text(faculty.find('personal title').text());
    var photoelem = $('.profilephoto', profile);
    photoelem.attr('src', faculty.find('personal photo').text());
    photoelem.parent('a').attr('href', pers_url);
    
    var story_url = faculty.find('story url').text();
    $('.blurb-header a', profile).text(faculty.find('story headline').text())
        .attr('href', story_url);
    $('.blurb a', profile).text(faculty.find('story blurb').text())
        .attr('href', story_url);
  } 
      
      // overwrite thumbs list with a list of all teasers,
      // for use with jCarousel
        function writeteasers(profiles) {
            var tlist = $('<ul></ul>');
            profiles.each(function (i, profile) {
                var name = $(this).find('personal name').text();
                if (typeof console == "object") {
                  console.log("loading %s", name, profile);
                } 
             
                var teaser = $(this).find('story teaser').text();
                var a = $('<a href="#"></a>');
                a.text(teaser);
                var li = $('<li></li>');
                li.attr('rel', i);
                li.append(a);
                tlist.append(li);
            });
            $('#thumbs ul').replaceWith(tlist);
        }
  
  
  $.ajax({
    type: 'GET',
    url: '../../profiles.xml',
    dataType: 'xml',
    success: function(xml) {
      var profiles = $(xml).find('profile');
      // use .get() to turn into normal Array
      profiles = $.shuffle(profiles);
      if(typeof console == "object") {
        console.log(profiles);
      }
      
      // Initialize the HTML
      loadprofile(profiles[0]);
      writeteasers(profiles);
      
      //load data when teaser is clicked on
      $('#thumbs ul li').click(function () {
          i = parseInt($(this).attr('rel'));
          var profile = profiles.eq(i);
          loadprofile(profile);
          return false;
      })
      
      function itemVisibleInCb(carousel, li, index, state) {
          if (index == 1) {
              $('.jcarousel-prev').hide();
          } else if (index == profiles.length) {
              $('.jcarousel-next').hide();
          } 
      }
      function itemVisibleOutCb(carousel, li, index, state) {
          if (index == 1) {
              $('.jcarousel-prev').show();
          } else if (index == profiles.length) {
              $('.jcarousel-next').show();
          } 
      }

      //set up carousel
      $('#thumbs ul').jcarousel({
          size: profiles.length,
          scroll: 5,
          buttonNextHTML: '<img alt="Click for more Heller experts" id="more" src="design-heller/images/graphics/more.gif" />',
          buttonPrevHTML: '<img alt="Click for more Heller experts" id="back" src="design-heller/images/graphics/back.gif" />',
          itemVisibleInCallback: itemVisibleInCb,
          itemVisibleOutCallback: itemVisibleOutCb
      });
      
      
    } // end success: function(xml)
    
  }); // end $('xml')
  
}); // end main