$(function () {
    $('<div id="ajax-spinner"></div>').appendTo("body").ajaxStop(function () {
        $(this).hide().css({
            position: "fixed",
            left: "50%",
            top: "50%"
        });
    }).hide();
    });
    
    $(document).ready(function(){
       
       getIndexLetter($("#index a#a"));
       
       $("#index a").click(function(){
          getIndexLetter($(this)); 
        });
        
       function getIndexLetter(link){
           $("#index a").removeClass("active");
           link.addClass("active");
           var letter = link.attr("id");

           $.getJSON(backgroundUrl, {letter: letter}, function(data){
            displayLinks(data);
           });
           
           var position = $("#index").position();
           
           $("#ajax-spinner").show().css({
             position: "absolute",
             left: position.left + 80,
             top: position.top + 80
            });
           return false;
        }
        
        function displayLinks(links)
        {
          $("#indexContent p").empty();
          $("#indexContent p").hide();
          
          for (key in links) {
            var title = links[key]['title'];
            var href = links[key]['href'];
            
            var link = '<a href="'+href+'" target="_top">'+title+'</a><br />';
            
            $("#indexContent p").append(link);
          }
          
          $("#indexContent p").fadeIn('slow');
        }
    
    });