$(window).load(function () {
  var spotlight = {
    // the opacity of the "transparent" images - change it if you like
    opacity: 0.2,

    /*the vars bellow are for width and height of the images so we can make
    the <li> same size */
    imgWidth: $('.spotlightWrapper ul li').find('img').width(),
    imgHeight: $('.spotlightWrapper ul li').find('img').height()

  };

  //set the width and height of the list items same as the images
  //$('.spotlightWrapper ul li').css({ 'width': spotlight.imgWidth, 'height': spotlight.imgHeight });

  //when mouse over the list item...
  $('.spotlightWrapper ul li').hover(function () {
	
	var IE7 = (navigator.appVersion.indexOf('MSIE 7.')==-1) ? false : true;
	
    //...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
    $(this).find('img').addClass('active').css({ 'opacity': 1 });

    $(this).find('img').attr('src', $(this).find('img').attr('highlightedImage'));

	$('.imageText').attr('src', $(this).find('img').attr('imageText'));
	
	//Figure out where the title text needs to be on the screen.
	var offset = $(this).find('img').position();
	var screen = (offset.left - offset.left % 700) / 700;
	var leftPosition = 0;
	if (IE7)
		leftPosition = offset.left - (710 * screen) + 35 - (screen * 0);
	else
		leftPosition = offset.left - (700 * screen) + 35 - (screen * 10);
		
	//Set the position of the title text
	$('.imageText').css({'left': leftPosition + 'px', 'display': 'block'});
	
    $(this).siblings('li').find('img').css({ 'opacity': spotlight.opacity });

    //when mouse leave...
  }, function () {

    //... find the image inside of the list item we just left and remove the active class
    $(this).find('img').removeClass('active');

  	$(this).find('img').css({ 'width': '116px', 'height': '91px' });

    $(this).find('img').attr('src', $(this).find('img').attr('normalImage'));
    $('.imageText').css({'display': 'none'});

  });

  //when mouse leaves the unordered list...
  $('.spotlightWrapper ul').bind('mouseleave', function () {
    //find the images and change the opacity to 1 (fully visible)
    $(this).find('img').css('opacity', 1);
  });

});