// create our transition as a plugin
$.fn.crossfade = function () {
  return this.each(function () { 
    // cache the copy of jQuery(this) - the start image
    var $$ = $(this);
    
    // get the target from the backgroundImage + regexp
    var target = $$.css('backgroundImage').replace(/^url|[()]/g, '');
    target = target.replace(/"/g, '');
    //target = .replace(/^url|[()]/g, ''));
    //alert($$.css('backgroundImage').replace(/^url|[()]/g, ''));
    //var target = '/_project/71bya15.jpg';
    $$.attr('style', '');
    
    // nice long chain: wrap img element in span
    $$.wrap('<span class="encloser" style="position: relative;"></span>')
      // change selector to parent - i.e. newly created span
      .parent()
      // prepend a new image inside the span
      .prepend('<img>')
      // change the selector to the newly created image
      .find(':first-child')
      // set the image to the target
      .attr('src', target);
    
    // position the original image
    $$.css({
      'position' : 'absolute', 
      'left' : 0, 
      // this.offsetTop aligns the image correctly inside the span
      'top' : '0'
    });
    
    // note: the above CSS change requires different handling for Opera and Safari,
    // see the full plugin for this.
    
    // similar effect as single image technique, except using .animate 
    // which will handle the fading up from the right opacity for us
    $$.hover(function () {
      $$.stop().animate({
          opacity: 0
      }, 250);
    }, function () {
      $$.stop().animate({
          opacity: 1
      }, 1000);
    });
  });
};

$(document).ready(function()
{
    $('.projectlist li a img').crossfade();
    
    
    /*
    $('.projectlist li a').hover(
        function () {
            $(this).find('img.grey').hide();
            $(this).find('img.colour').show();
        },
        function () {
            $(this).find('img.colour').hide();
            $(this).find('img.grey').show();
        }
    );
    */
});