jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 

var hover = false;

$(function() {


	
	// IE6 doesn't handle the fade effect very well - so we'll stick with
	  // the default non JavaScript version if that is the user's browser.
	  if ($.browser.msie && $.browser.version < 7) return;

	  $('.bullet-point')

	    // remove the 'highlight' class from the li therefore stripping 
	    // the :hover rule
	    .removeClass('highlight')

	    // within the context of the li element, find the a elements
	    .find('a')

	    // create our new span.hover and loop through anchor:
	    .append('<span class="hover" />').each(function () {
          var element = this.className;
	      // cache a copy of the span, at the same time changing the opacity
	      // to zero in preparation of the page being loaded
	      var $span = $('> span.hover', this).css('opacity', 0);

	      // when the user hovers in and out of the anchor
	      $(this).hover(function () {
	        // on hover
            if (element == 'left-point') {
		    	change_corner(true, 'left');
			};
			if (element == 'right-point') {
				change_corner(true, 'right');
			};
	        // stop any animations currently running, and fade to opacity: 1
	        $span.stop().fadeTo(120, 1);
	      }, function () {
	        // off hover
            if (element == 'left-point') {
		    	change_corner(false, 'left');
			};
			if (element == 'right-point') {
				change_corner(false, 'right');
			};
	        // again, stop any animations currently running, and fade out
	        $span.stop().fadeTo(70, 0);
	      });
	    });  
	
	       
   	

	
	
}); 
 
// changes corner to on/off hover position
var change_corner = function(hover, side) { 
	// if hoverover   
	if (hover == true) {
		$('.' + side + '>span').stop().fadeIn(120);
	} else {
		$('.' + side + '>span').stop().fadeOut(70); 
	};
}