<?php
    
    // The two following lines belong into the theme's functions.php or wherever scripts are
    // embedded for Plugins or Widgets. "portfolio-page.js" is the script I want to make
    // Ajax calls from.
    
    // This is the wordpress way of embedding scripts into a page.
    wp_enqueue_script('portfolio-page', get_template_directory_uri() . '/js/portfolio-page.js', array('jquery'), false, false);
    
    // This means: "Allow portfolio-page to call stuff with Ajax."
    wp_localize_script('portfolio-page', 'ajaxAdmin', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));


    
    // These two lines belong into functions.php as well. They map the Ajax calls to the respective
    // Php methods. It's important that the parameters match exactly, e.g. here "tne_load_post_content"
    // (yes, including the wp_ stuff).
    add_action( 'wp_ajax_tnet_load_post_content', 'tnet_load_post_content' );
    add_action( 'wp_ajax_nopriv_tnet_load_post_content', 'tnet_load_post_content' );

   
   
    // This is the actual method that is called from the Javascript.
    function tnet_load_post_content()
    {
        $id = $_POST['pageId']; // Parameters sent by Javascript can be accessed like this.
        
        // Here it is checked, if the current page is one with a Siteorigin layout.
        $meta = get_post_meta( $id, 'panels_data', true );
        if( class_exists( 'SiteOrigin_Panels' ) && $meta )
        {
            // Yes: Use Siteorigin magic to get the layout.
            $renderer = SiteOrigin_Panels::renderer();
            $content = $renderer->render( $id );
        }
        else
        {
            // No: Get the layout the standard Wordpress way.
            $content = apply_filters( 'the_content', get_page($id)->post_content );
        }
        
        // Hand the layout back to the caller.
        echo $content;
        
        // With this wordpress will at a "0" in the response.
        die(); 
    }
?>

function loadContent(id)
{
    // Here I build an object that is sent with the Ajax call.
    // It contains the Php method to call, and the Id of the
    // wordpress page to be loaded.
    var data = { 
        action: "tnet_load_post_content",
        pageId: id
        };
    
    // Builds the Ajax call, executes it, and calls onContentLoaded on success.
    useAjax(data, onContentLoaded);
}

function useAjax(data, onSuccess)
{
    $.ajax({
        type: "post",
        cache: false,
        
        // The target for the wordpress Ajax call, was enabled via wp_localize_script() in the Php code.
        url: ajaxAdmin.ajaxurl,
        
        // The parameters that get send along
        data: data, 
        
        // Method that is called on success
        success: onSuccess
    });
}

function onContentLoaded(response)
{
    // The loaded content is put into the designated container.
    contentContainer.html(response);
}

// Get the desired pages's content and the styles.
$renderer = SiteOrigin_Panels::renderer();
$content = $renderer->render( $id );
$css = $renderer->generate_css( $id );

// Sent both to the Javascript as a JSON.
echo json_encode(array($content, $css));

function onContentLoaded(response)
{
    // Parse the JSON into a Javascript object.
    var data = JSON.parse(response);

    // The content goes into the designated container.
    contentContainer.html(data[0]);
    
    // The styles are replaced.
    addMissingStyles(data[1]);
}

function addMissingStyles(css)
{
    if(css == '')
    {
        return;
    }
    
    // First I remove the old wrong styles.
    var siteOriginId = "#siteorigin-panels-layouts-head";
    tryRemove(siteOriginId);
    
    // Dann I manually embed the new styles.
    var styles = '<style type="text/css" media="all" id="'+siteOriginId+'">'+css+'</style>';
    $('head').append(styles);
}

function tryRemove(id)
{
    var element = document.getElementById(id);
    if(element !== null)
    {
        element.parentNode.removeChild(element);
    }
}

function addMissingScripts()
{
    // I wait a bit because the widget might not be there, yet.
    setTimeout(function()
    {
        if( $(".gallery-widget").length ) //<- This means: Does "gallery-widget" exist?
        {
            if( $("#gallery-widget-js").length ) //<- This means: Does the gallery-widget Javascript already exist?
            {
                return;
            }
            
            // Here I'm embedding the script from the theme manually.
            $("head").append('<script type="text/javascript" src="https://taijj.net/wp-content/themes/tnet/js/gallery-widget.js?ver=5.5" id="gallery-widget-js"></script>');
        }
    }, 1000);
}

function updateLanguageButtons()
{
    $('.language-switcher .lang-item a').each(updateUrl);
    $('.header-language-section .lang-item a').each(updateUrl);

    function updateUrl()
    {
        var item = $(this);
        var url = item.attr('href');

        var hashIndex = url.indexOf('#');
        if(hashIndex >= 0)
        {
            url = url.substr(0, hashIndex);
        }
        item.attr('href', url+window.location.hash);
    }
}