var startWidth = 380;
  var endWidth = 765;
  var animationDuration = 300;

  $(document).ready(function()
  {
	
	$('#slideNav').css("width",endWidth); //stretch the nav to full width. This is done in here so that non-JS users can use the nav.
	$('#slideNav').css("font-size","16px");
	$('#slideNav').css("letter-spacing","0px");
	  //change the CSS so that the Cufon font looks about the same size as the non-JS alternative font
	
	$('#slideNav li a').prepend('<img src="../slidenav/images/ajax-loader.gif" width="16" height="16" alt="loading..." class="slideLoader" />'); //add the loaders to the li here, keeps the html clean
	$('#slideNav li a').prepend('<span></span>'); //add the holders for the circles
	$('.slideLoader').hide(0); //hide the loaders
	
	$("#slideNav li a").click(function ()
	{
	  if ($(this).attr("target")=="slideFrame")
	  {
	    var slideLink = $(this).attr('href');
	    var slideFrameSrc = $('#slideFrame').attr('src');

	    if (slideLink!=slideFrameSrc)
        {
          $('#slideNav').stop(true,true).animate;
          $('.slideLoader').stop(true,true).fadeIn;
          $('.slideLoader').stop(true,true).fadeOut;
          $('#slideNav li a span').show(0);
          $('#slideNav li').removeClass("activeSlideLink");
		  $('.slideLoader').fadeOut(100);
		    //Stop all animations and reset CSS of all menu items

		  $(this).children('#slideNav li a span').fadeOut(100);
          $(this).children('.slideLoader').fadeIn(100);
          $(this).parent().addClass("activeSlideLink");
		  $(this).children('li a em').css("color","#aa0000");
		    //Display loader and add active class to this menu item
		  
		  $('#slideNav').animate({width: endWidth+'px'},{ duration: animationDuration,  complete: function()
          {
			//Animate navigation to slide to full width, hiding slideFrame from view. When finished...

            $('#slideFrame').attr('src',slideLink);
            $("#slideFrame").load(function()
            {
			  //... load the link into the slideFrame. When the frame has loaded in...

              $('#slideNav').animate({width: startWidth+'px'},{ duration: animationDuration, complete: function()
              {
			    //...animate the navigation to slide back, revealing the slideFrame. When finished...

                $('.slideLoader').fadeOut(100);
                $('#slideNav li a span').fadeIn(100);
			      //Hide the loader and show the circles

			  }});
            });
	      }});  
		 
        }
	    return false;
	  }
	  else //else this is a standard link
	  {
		return true;  
	  }
	});
	
	Cufon.replace('ul#slideNav');
	
  });