$(document).ready(function() {

  $('#magnifier').draggable({
    containment: 'parent',
    drag: function(event, ui) { 
      var xtop = (ui.position.top);
      var xleft = (ui.position.left);
      $('#box2 img').css('left', ((xleft * -4) + 'px'));
      $('#box2 img').css('top', ((xtop * -4) + 'px'));
    }
  });

  $('ul#chooser li').click(function() {
    var whichpic = $(this).attr('id');
	var picalt = $(this).attr('title');
    var smallpic = ('images/' + whichpic + 'small.jpg');
    var largepic = ('images/' + whichpic + '.jpg');
    $('#box1 img').attr('src', smallpic);
    $('#box2 img').attr('src', largepic);
	$('#box1 img').attr('alt', picalt);
    $('#box2 img').attr('alt', picalt);
	$('ul#chooser').hide();
	$('ul#chooser li').css('display', 'none');
	$('ul#chooser').css('display', 'block');
  });
  
  
  $('ul#chooser span').hover(function() {
    $('ul#chooser li').css('display', 'block');
  });

});