$(function() {

    var $el = $(),
        $mainContent = $("#main-content");

    // Usado para desaparecer el contenido abandonando la blancura/principal contenta el área a lo largo
    $mainContent.wrapInner("<div id='fade-wrapper' />");

    // añada en AJAX que hace girar gráfico (ocultado por CSS)
    $mainContent.append('<img src="imagenes/cargador.gif" id="ajax-loader" />');

    var $fadeWrapper = $("#fade-wrapper"),
        $allNav = $("#menu2 a"),
        $allListItems = $("#menu2 li"),
        url = '',
        liClass = '',
        hash = window.location.hash,
        $ajaxLoader = $("#ajax-loader");

    // quite ID, que es usado sólo para nav que destaca en la versión Non-JS
    $("body").attr("id", "");

    // Si, cuando las cargas de página, esto tiene un valor de *hash en el URL
    if (hash) {
        hash = hash.substring(1);
        liClass = hash.substring(0,hash.length-4);
        url = hash + " #inside-content";
        $fadeWrapper.load(url);
        $("." + liClass).addClass("active");
    } else {
        // Ningún presente de etiqueta de, entonces haga el primer artículo en el nav nav activo
        $("#menu2 a:first").addClass("active");
    }

    $allNav.click(function(e) {

        $el = $(this);

        // Sólo siga con AJAX nav si el chasquido es la página no corriente
        if (!$el.parent().hasClass("active")) {

            // Enrolle la página encima (de sobre todo entonces ellos pueden ver que el hilandero gráfico comienza)
            $(window).scrollTop(0);

            url = $el.attr("href") + " #inside-content";

            $fadeWrapper.animate({ opacity: 0.1 });
            $ajaxLoader.fadeIn(400, function() {

                $fadeWrapper.load(url, function() {

                    window.location.hash = $el.attr("href");

                    $fadeWrapper.animate({ opacity: 1 });
                    $ajaxLoader.fadeOut();

                });

                $allListItems.removeClass("active");
                $el.parent().addClass("active");

            });

        }

        // Asegúrese que los eslabones no recargan la página
        e.preventDefault();

    });

});
