Lazy loading script doesn't run after AJAX load

Question

Issue related to

Video lazy loading skipping first video in every list

The css shows up with a black box and the arrow, but script doesn't seem to run after ajax load from pagination, and also when clicking through from JComments Latest link, which adds #comment-43 to the end of the link to target a specific comment (just picked 43 at random).

Tried adding the script multiple places, putting onload type events in div tag, onhashchange, separating the function and calling it from different places, just doesn't want to load after those 2 cases. Click through direct url to page Page 1 will load preview images, then you click page 2 and no preview/video, back to 1 and no preview/video.

Not familiar with ajax, there are a couple of ajax files in the component directory, could I possibly add something to them?

2 files from components/com_jcomments/libraries/joomlatune

ajax.js & ajax.php, here is ajax.php:

<?php
/**
 * Simple AJAX library (based on code XAJAX library - http://www.xajaxproject.org)
 *
 * @version 1.0
 * @package JoomlaTune.Framework
 * @author Sergey M. Litvinov ([email protected])
 * @copyright (C) 2006-2013 by Sergey M. Litvinov (http://www.joomlatune.ru)
 * @license GNU/GPL: http://www.gnu.org/copyleft/gpl.html
 */

defined('_JEXEC') or die;

// Check for double include
if (!defined ('JOOMLATUNE_AJAX'))
{
    define ('JOOMLATUNE_AJAX', 1);

    class JoomlaTuneAjaxResponse
    {
        var $aCommands;
        var $xml;
        var $sEncoding;

        function JoomlaTuneAjaxResponse($sEncoding='utf-8')
        {
            $this->aCommands = array();
            $this->sEncoding = $sEncoding;
        }

        function addCommand($aAttributes, $mData)
        {
            $aAttributes['d'] = $mData;
            $this->aCommands[] = $aAttributes;
        }

        function addAssign($sTarget,$sAttribute,$sData)
        {
            $scripts = array();
            // small hack to auto execute JavaScript code returned through ajax
            if (preg_match('/\<script/', $sData)) {
                $regexp = '/<script[^>]+>(.*?)<\/script>/ism';
                $matches = array();
                preg_match_all($regexp, $sData, $matches);

                for ($i = 0, $n = count($matches[0]); $i < $n; $i++) {
                    if ($matches[1][$i] != '') {
                        $sData = str_replace($matches[0][$i], '', $sData);
                        $scripts[] = trim(preg_replace(array('#^<!--#ism', '#\/\/-->$#ism'), '', $matches[1][$i]));
                    }
                }
            }

            $this->addCommand(array('n'=>'as','t'=>$sTarget,'p'=>$sAttribute),$sData);

            if (count($scripts)) {
                foreach ($scripts as $script) {
                    $this->addCommand(array('n'=>'js'),$script);
                }
            }

            return $this;
        }

        function addScript($sJS)
        {
            $sJS = str_replace("\n", '\n', $sJS);
            $sJS = str_replace("\r", '', $sJS);
            $this->addCommand(array('n'=>'js'),$sJS);
            return $this;
        }

        function addAlert($sMsg)
        {
            $this->addCommand(array('n'=>'al'),$sMsg);
            return $this;
        }

        function getOutput()
        {
            $output = '';
            if (is_array($this->aCommands)) {
                $output = JoomlaTuneAjaxResponse::php2js($this->aCommands);
            }
            if (trim($this->sEncoding)) {
                @header('content-type: text/plain; charset="'.$this->sEncoding.'"');
            }
            return $output;
        }

        /**
        * This function taken from JsHttpRequest library
        * JsHttpRequest: PHP backend for JavaScript DHTML loader.
        * (C) Dmitry Koterov, http://en.dklab.ru
        *
        * Convert a PHP scalar, array or hash to JS scalar/array/hash. This function is
        * an analog of json_encode(), but it can work with a non-UTF8 input and does not
        * analyze the passed data. Output format must be fully JSON compatible.
        *
        * @param mixed $a   Any structure to convert to JS.
        * @return string    JavaScript equivalent structure.
        */
        function php2js($a=false)
        {
            if (is_null($a)) return 'null';
            if ($a === false) return 'false';
            if ($a === true) return 'true';
            if (is_scalar($a)) {
                if (is_float($a)) {
                    $a = str_replace(",", ".", strval($a));
                }
                // All scalars are converted to strings to avoid indeterminism.
                // PHP's "1" and 1 are equal for all PHP operators, but
                // JS's "1" and 1 are not. So if we pass "1" or 1 from the PHP backend,
                // we should get the same result in the JS frontend (string).
                // Character replacements for JSON.
                static $jsonReplaces = array(
                array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'),
                array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"')
                );
                return '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . '"';
            }
            $isList = true;
            for ($i = 0, reset($a); $i < count($a); $i++, next($a)) {
                if (key($a) !== $i) {
                    $isList = false;
                    break;
                }
            }
            $result = array();
            if ($isList) {
                foreach ($a as $v) {
                    $result[] = JoomlaTuneAjaxResponse::php2js($v);
                }
                return '[ ' . join(', ', $result) . ' ]';
            } else {
                foreach ($a as $k => $v) {
                    $k = JoomlaTuneAjaxResponse::php2js($k);
                    $v = JoomlaTuneAjaxResponse::php2js($v);
                    $result[] = $k . ': ' . $v;
                }
                return '{ ' . join(', ', $result) . ' }';
            }
        }
    }

    class JoomlaTuneAjax
    {
        var $aFunctions;
        var $aObjects;
        var $aFunctionRequestTypes;
        var $sRequestURI;
        var $sEncoding;

        function JoomlaTuneAjax($sRequestURI="",$sEncoding='utf-8')
        {
            $this->aFunctions = array();
            $this->aFunctionRequestTypes = array();
            $this->aObjects = array();
            $this->aFunctionIncludeFiles = array();
            $this->sRequestURI = $sRequestURI;
            if ($this->sRequestURI == "") {
                $this->sRequestURI = $this->_detectURI();
            }
            $this->setCharEncoding($sEncoding);
        }

        function setCharEncoding($sEncoding)
        {
            $this->sEncoding = $sEncoding;
        }

        function registerFunction($mFunction,$sRequestType=1)
        {
            if (is_array($mFunction)) {
                $this->aFunctions[$mFunction[0]] = 1;
                $this->aFunctionRequestTypes[$mFunction[0]] = $sRequestType;
                $this->aObjects[$mFunction[0]] = array_slice($mFunction, 1);
            } else {
                $this->aFunctions[$mFunction] = 1;
                $this->aFunctionRequestTypes[$mFunction] = $sRequestType;
            }
        }

        function processRequest()
        {
            return $this->processRequests();
        }

        function _isObjectCallback($sFunction)
        {
            if (array_key_exists($sFunction, $this->aObjects)) {
                return true;
            }
            return false;
        }
        function _callFunction($sFunction, $aArgs)
        {
            if ($this->_isObjectCallback($sFunction)) {
                $mReturn = call_user_func_array($this->aObjects[$sFunction], $aArgs);
            } else if (array_key_exists($sFunction, $this->aFunctions)) {
                $mReturn = call_user_func_array($sFunction, $aArgs);
            }
            return $mReturn;
        }

        function processRequests()
        {
            $sFunctionName = $_REQUEST["jtxf"];
            $aArgs = isset($_REQUEST["jtxa"]) ? $_REQUEST["jtxa"] : array();

            if (!array_key_exists($sFunctionName, $this->aFunctions)) {
                $oResponse = new JoomlaTuneAjaxResponse();
                $oResponse->addAlert("Unknown Function $sFunctionName.");
            } else {
                $oResponse = $this->_callFunction($sFunctionName, $aArgs);
            }
            @header('content-type: text/plain; charset="'.$this->sEncoding.'"');
            print $oResponse->getOutput();
            exit();
        }

        function _detectURI() {
            $aURL = array();

            // Try to get the request URL
            if (!empty($_SERVER['REQUEST_URI'])) {
                $_SERVER['REQUEST_URI'] = str_replace(array('"',"'",'<','>'), array('%22','%27','%3C','%3E'), $_SERVER['REQUEST_URI']);
                $aURL = parse_url($_SERVER['REQUEST_URI']);
            }

            // Fill in the empty values
            if (empty($aURL['scheme'])) {
                if (!empty($_SERVER['HTTP_SCHEME'])) {
                    $aURL['scheme'] = $_SERVER['HTTP_SCHEME'];
                } else {
                    $aURL['scheme'] = (!empty($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) != 'off') ? 'https' : 'http';
                }
            }

            if (empty($aURL['host'])) {
                if (!empty($_SERVER['HTTP_X_FORWARDED_HOST'])) {
                    if (strpos($_SERVER['HTTP_X_FORWARDED_HOST'], ':') > 0) {
                        list($aURL['host'], $aURL['port']) = explode(':', $_SERVER['HTTP_X_FORWARDED_HOST']);
                    } else {
                        $aURL['host'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
                    }
                } else if (!empty($_SERVER['HTTP_HOST'])) {
                    if (strpos($_SERVER['HTTP_HOST'], ':') > 0) {
                        list($aURL['host'], $aURL['port']) = explode(':', $_SERVER['HTTP_HOST']);
                    } else {
                        $aURL['host'] = $_SERVER['HTTP_HOST'];
                    }
                } else if (!empty($_SERVER['SERVER_NAME'])) {
                    $aURL['host'] = $_SERVER['SERVER_NAME'];
                } else {
                    print "Error: ajax failed to automatically identify your Request URI.";
                    print "Please set the Request URI explicitly when you instantiate the jtajax object.";
                    exit();
                }
            }

            if (empty($aURL['port']) && !empty($_SERVER['SERVER_PORT'])) {
                $aURL['port'] = $_SERVER['SERVER_PORT'];
            }

            if (empty($aURL['path'])) {
                if (!empty($_SERVER['PATH_INFO'])) {
                    $sPath = parse_url($_SERVER['PATH_INFO']);
                } else {
                    $sPath = parse_url($_SERVER['PHP_SELF']);
                }
                $aURL['path'] = str_replace(array('"',"'",'<','>'), array('%22','%27','%3C','%3E'), $sPath['path']);
                unset($sPath);
            }

            if (!empty($aURL['query'])) {
                $aURL['query'] = '?'.$aURL['query'];
            }

            // Build the URL: Start with scheme, user and pass
            $sURL = $aURL['scheme'].'://';
            if (!empty($aURL['user'])) {
                $sURL.= $aURL['user'];
                if (!empty($aURL['pass'])) {
                    $sURL.= ':'.$aURL['pass'];
                }
                $sURL.= '@';
            }

            // Add the host
            $sURL.= $aURL['host'];

            // Add the port if needed
            if (!empty($aURL['port']) && (($aURL['scheme'] == 'http' && $aURL['port'] != 80) || ($aURL['scheme'] == 'https' && $aURL['port'] != 443))) {
                $sURL.= ':'.$aURL['port'];
            }

            // Add the path and the query string
            $sURL.= $aURL['path'].@$aURL['query'];

            // Clean up
            unset($aURL);
            return $sURL;
        }
    }
} // end of double include check

I can post ajax.js, just not sure how much space there is here and how much I can post. Try here starting on line 4: https://ideone.com/8df01C

Other file is components/jcomments/jcomments.ajax.php Try it here starting on line4: https://ideone.com/16szL9

The pagination code is added to component/com_jcomments/jcomments.php

public static function getCommentsTree($object_id, $object_group = 'com_content', $page = 0)
    {
        $object_id = (int)$object_id;
        $object_group = trim($object_group);

        $user = JFactory::getUser();
        $acl = JCommentsFactory::getACL();
        $config = JCommentsFactory::getConfig();

                $comments_per_page = $config->getInt('comments_per_page');
                $limitstart = 0;

        $total = JComments::getCommentsCount($object_id, $object_group, 'c.level = 0');

        if ($acl->canComment() == 0 && $total == 0) {
            return '';
        }

        if ($total > 0) {
            $options = array();
                        $options['pagination'] = 'tree';
            $options['object_id'] = $object_id;
            $options['object_group'] = $object_group;
            $options['published'] = $acl->canPublish() || $acl->canPublishForObject($object_id, $object_group) ? null : 1;
            $options['votes'] = $config->getInt('enable_voting');

            if ($comments_per_page > 0) {
                $page = (int)$page;

                require_once(JCOMMENTS_HELPERS . '/pagination.php');
                $pagination = new JCommentsPagination($object_id, $object_group);
                $pagination->setCurrentPage($page);
                                $pagination->setCommentsCount($total);

                $total_pages = $pagination->getTotalPages();
                $this_page = $pagination->getCurrentPage();
                $limitstart = $pagination->getLimitStart();
                $comments_per_page = $pagination->getCommentsPerPage();

                $options['limit'] = $comments_per_page;
                $options['limitStart'] = $limitstart;
            }

            $rows = JCommentsModel::getCommentsList($options);

        } else {
            $rows = array();
        }

        $tmpl = JCommentsFactory::getTemplate($object_id, $object_group);
        $tmpl->load('tpl_tree');
        $tmpl->load('tpl_comment');

        if (count($rows)) {

            $isLocked = ($config->getInt('comments_locked', 0) == 1);

            $tmpl->addVar('tpl_tree', 'comments-refresh', intval(!$isLocked));
            $tmpl->addVar('tpl_tree', 'comments-rss', intval($config->getInt('enable_rss') && !$isLocked));
            $tmpl->addVar('tpl_tree', 'comments-can-subscribe', intval($user->id && $acl->check('enable_subscribe') && !$isLocked));
            $tmpl->addVar('tpl_tree', 'comments-count', count($rows));
                        $tmpl->addVar('tpl_tree', 'comments-nav-bottom', 1);

            if ($user->id && $acl->check('enable_subscribe')) {
                require_once(JCOMMENTS_SITE . '/jcomments.subscription.php');
                $manager = JCommentsSubscriptionManager::getInstance();
                $isSubscribed = $manager->isSubscribed($object_id, $object_group, $user->id);
                $tmpl->addVar('tpl_tree', 'comments-user-subscribed', $isSubscribed);
            }

            $i = 1;

            JCommentsEventHelper::trigger('onJCommentsCommentsPrepare', array(&$rows));

            if ($acl->check('enable_gravatar')) {
                JCommentsEventHelper::trigger('onPrepareAvatars', array(&$rows));
            }

            require_once(JCOMMENTS_LIBRARIES . '/joomlatune/tree.php');

            $tree = new JoomlaTuneTree($rows);
            $items = $tree->get();

            foreach ($rows as $row) {
                // run autocensor, replace quotes, smilies and other pre-view processing
                JComments::prepareComment($row);

                // setup toolbar
                if (!$acl->canModerate($row)) {
                    $tmpl->addVar('tpl_comment', 'comments-panel-visible', 0);
                } else {
                    $tmpl->addVar('tpl_comment', 'comments-panel-visible', 1);
                    $tmpl->addVar('tpl_comment', 'button-edit', $acl->canEdit($row));
                    $tmpl->addVar('tpl_comment', 'button-delete', $acl->canDelete($row));
                    $tmpl->addVar('tpl_comment', 'button-publish', $acl->canPublish($row));
                    $tmpl->addVar('tpl_comment', 'button-ip', $acl->canViewIP($row));
                    $tmpl->addVar('tpl_comment', 'button-ban', $acl->canBan($row));
                }

                $tmpl->addVar('tpl_comment', 'comment-show-vote', $config->getInt('enable_voting'));
                $tmpl->addVar('tpl_comment', 'comment-show-email', $acl->canViewEmail($row));
                $tmpl->addVar('tpl_comment', 'comment-show-homepage', $acl->canViewHomepage($row));
                $tmpl->addVar('tpl_comment', 'comment-show-title', $config->getInt('comment_title'));
                $tmpl->addVar('tpl_comment', 'button-vote', $acl->canVote($row));
                $tmpl->addVar('tpl_comment', 'button-quote', $acl->canQuote($row));
                $tmpl->addVar('tpl_comment', 'button-reply', $acl->canReply($row));
                $tmpl->addVar('tpl_comment', 'button-report', $acl->canReport($row));
                $tmpl->addVar('tpl_comment', 'avatar', $acl->check('enable_gravatar') && !$row->deleted);

                if (isset($items[$row->id])) {
                    $tmpl->addVar('tpl_comment', 'comment-number', '');
                    $tmpl->addObject('tpl_comment', 'comment', $row);
                    $items[$row->id]->html = $tmpl->renderTemplate('tpl_comment');
                    $i++;
                }
            }

            $tmpl->addObject('tpl_tree', 'comments-items', $items);

            // build page navigation
            if (($comments_per_page > 0) && ($total_pages > 1)) {
                $tmpl->addVar('tpl_tree', 'comments-nav-first', 1);
                $tmpl->addVar('tpl_tree', 'comments-nav-total', $total_pages);
                $tmpl->addVar('tpl_tree', 'comments-nav-active', $this_page);

                $pagination = $config->get('comments_pagination');

                // show top pagination
                if (($pagination == 'both') || ($pagination == 'top')) {
                    $tmpl->addVar('tpl_tree', 'comments-nav-top', 1);
                }

                // show bottom pagination
                if (($pagination == 'both') || ($pagination == 'bottom')) {
                    $tmpl->addVar('tpl_tree', 'comments-nav-bottom', 1);
                }
            }
            unset($rows);
        }

        return $tmpl->renderTemplate('tpl_tree');
    }

and component/com_jcomments/tpl/default/tpl_tree.php

  function getNavigation() {
    if ($this->getVar('comments-nav-top') == 1 
    ||  $this->getVar('comments-nav-bottom') == 1) {
      $active_page = $this->getVar('comments-nav-active', 1);
      $first_page = $this->getVar('comments-nav-first', 0);
      $total_page = $this->getVar('comments-nav-total', 0);

      if ($first_page != 0 && $total_page != 0) {
      $object_id = $this->getVar('comment-object_id');
      $object_group = $this->getVar('comment-object_group');

      $content = '';

        // number of visible pages
        $pp = 14;

        $fp = $active_page - $pp/2;
        if ($fp <= 0) {
        $fp = 1;
        }

        $lp = $fp + $pp;
        if ($lp > $total_page) {
        $lp = $total_page;
        }

        if ($lp - $fp < $pp && $pp < $total_page) {
        $fp = $lp - $pp;
        }

        if ($fp > 1) {
        $content .= '<span onclick="jcomments.showPage('.$object_id.', \''.$object_group.'\', '.($active_page-1).');" class="page" onmouseover="this.className=\'hoverpage\';" onmouseout="this.className=\'page\';" >&laquo;</span>';
        }

        for ($i=$fp; $i <= $lp; $i++) {
          if ($i == $active_page) {
          $content .= '<span class="activepage"><b>'.$i.'</b></span>';
          } else {
          $content .= '<span onclick="jcomments.showPage('.$object_id.', \''.$object_group.'\', '.$i.');" class="page" onmouseover="this.className=\'hoverpage\';" onmouseout="this.className=\'page\';" >'.$i.'</span>';
          }
        }

        if ($lp < $total_page) {
          $content .= '<span onclick="jcomments.showPage('.$object_id.', \''.$object_group.'\', '.($lp+1).');" class="page" onmouseover="this.className=\'hoverpage\';" onmouseout="this.className=\'page\';" >&raquo;</span>';
        }

      return $content;
      }
    }
        return '';
  }  

Answer 1

First: I like your question and a lot of details that you provided. I like people on StackExchange who can ask questions properly, clearly with precise details. This separates the real developers from quite ignorant people. So I like your question, but: honestly it took me quite a while to understand your question. The long, actually from the point of view of your question, irrelevant details of your project can cause a bit confusion about what your question is. It's also true that many times happen with me the same, that I do not know how to ask a question about my issue. So the right question usually embrace the answer itself somewhere. :)

Your question simply: how to fire an javascript or jquery script after an ajax call. Or more precisely, after an ajax call is completed. Any ajax call. :) This is that simple now.

Of course this was a question of millions of developers before you so jQuery has a solution for this.

You have to use the jQuery .ajaxComplete() function. This function ignites when any ajax request is finished on a page. Since an ajax call is also a Global ajax event when completed. These events are triggered on the document, calling any handlers which may be listening.

Thus, my suggestion is, since you already have a well working javascript script to load the youtube videos' sources. Then you should just wrap that or call that with the jQuery .ajaxComplete() function, something like this:

$ = jQuery.noConflict();
$( document ).ajaxComplete(function() {
    videoListLoad();
});

function videoListLoad () {

    var youtube = document.querySelectorAll( ".youtube" );

    for (var i = 0; i < youtube.length; i++) {

        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/hqdefault.jpg";

        var image = new Image();
        image.src = source;
        image.addEventListener( "load", function() {
            youtube[ i ].appendChild( image );
        }( i ) );

        youtube[i].addEventListener( "click", function() {

            var iframe = document.createElement( "iframe" );
            iframe.setAttribute( "frameborder", "0" );
            iframe.setAttribute( "allowfullscreen", "" );
            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

            this.innerHTML = "";
            this.appendChild( iframe );
        } );
    }
}

Create and load this additional script on your page (in the head for example) and try this and give me some feedback (Of course I have not tried this on your page). Do not touch your original script on your site, you just have to leave that there too. So you will have two similar scripts, one for normal page load and one for ajax events like pagination. Just to make sure it is clear for you.

More info on this jQuery function is here: http://api.jquery.com/ajaxcomplete/

You initial javascript function could be bound other way like:

$(document).bind("ajaxComplete", function(){ ...// your function... });

But I just wanted to give you an example which you can use on your page. I hope this will solve your issue.

(Of course, this can starts other new questions later, for example: how to unbind this function from other irrelevant ajax requests on the page but that's the question of another day)

UPDATE

Now, there is a possibility that the above will not work (if the ajax call is not jQuery ajax), however sounds very good, then the next valuable approach would be to build the video source loading .js function (script) in the ajax.js function which has to fire this function this way. So I copy here the edited ajax.js file and please use this instead of your file (keep the original ajax.js file though!! You can just rename it old-ajax.js or something.)

I just built in the videoloading function after the ajax response is processed. So you will see if it's successful this way.

/* based on xajax Javascript library (http://www.xajaxproject.org) */
if (!window.jtajax) {

    function jtAJAX()
    {
        this.options = {url: '',type: 'post',nocache: true,data: ''};

        this.$ = function(id) {if(!id){return null;}var o=document.getElementById(id);if(!o&&document.all){o=document.all[id];}return o;};
        this.extend = function(o, e){for(var k in (e||{}))o[k]=e[k];return o;};
        this.encode = function(t){return encodeURIComponent(t);};
        this.setup = function(options) {this.options = this.extend(this.options, options);};

        this.xhr = function()
        {
            var xhr = null;
            if ('undefined' != typeof XMLHttpRequest) xhr = new XMLHttpRequest();
            if (!xhr && 'undefined' != typeof ActiveXObject) {
                var msxmlhttp = new Array('Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');
                for (var i=0;i<msxmlhttp.length;i++){try{xhr=new ActiveXObject(msxmlhttp[i]);}catch(e){xhr=null;}}
            }
            return xhr;
        };

        this.form2query = function(sId)
        {
            var frm = this.$(sId);
            if (frm && frm.tagName.toUpperCase() == 'FORM') {
                var e = frm.elements, query = [];
                for (var i=0; i < e.length; i++) {
                    var name = e[i].name;
                    if (!name) continue;
                    if (e[i].type && ('radio' == e[i].type || 'checkbox' == e[i].type) && false === e[i].checked) continue;
                    if ('select-multiple' == e[i].type) {
                        for (var j = 0; j < e[i].length; j++) {
                            if (true === e[i].options[j].selected)
                                query.push(name+"="+this.encode(e[i].options[j].value));
                        }
                    } else { query.push(name+"="+this.encode(e[i].value));
                    }
                }
                return query.join('&');
            }
            return '';
        };

        this.startLoading = function(){};
        this.finishLoading = function(){};

        this.ajax = function(options)
        {
            var xhr = this.xhr();
            if (!xhr) return false;
            var o = this.extend(this.options, options);
            var url = o.url, jtx = this;url=url.replace(/&amp;/g,'&');
            var r=url;var h=location.hostname,d,i1,i2;i1=r.indexOf('://');if(i1!=-1){i2=r.indexOf('/',i1+3);if(i2!=-1){d=r.substring(i1+3,i2);if(d!=h){if(location.port!=''){h=h+':'+location.port;}r=r.replace(d,h);url=r;}}}

            if ('get' == o.type) {
                if (true === o.nocache) {
                    var ts=new Date().getTime();
                    url += (url.indexOf("?")==-1 ? '?' : '&') + '_jtxr_' + ts;
                }
                if (o.data) {
                    url += (url.indexOf("?")==-1 ? '?' : '&') + o.data;
                    o.data = null;
                }
            }

            xhr.open(o.type.toUpperCase(), url, true);

            if ('post' == o.type)
                try {xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");}catch(e){}
            if (true === o.nocache)
                xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jan 1970 00:00:00 GMT');

            xhr.onreadystatechange = function() {
                if (xhr.readyState != 4) return;
                jtx.finishLoading();
                if (xhr.status==200) {
                    jtx.processResponse(xhr.responseText);
                }
                delete xhr;
                xhr = null;
            };
            try {
                jtx.startLoading();
                xhr.send(o.data);
            } catch(e) { jtx.finishLoading(); }

            delete jtx;
            delete xhr;
            delete o;
            return true;
        };

        this.call = function(sFunction, aArgs, sType, sForm)
        {
            var params = 'jtxf=' + this.encode(sFunction);
            if (aArgs) {
                for (var i=0;i<aArgs.length;i++) {
                    params += '&jtxa[]=' + this.encode(aArgs[i]);
                }
            } else if (sForm) {
                params += '&' + this.form2query(sForm);
            }

            this.ajax({type: sType, data: params});
            return true;
        };

        this.processResponse = function(sText)
        {
            if(sText==='') return false;
            if(sText.substring(0,3)!='[ {'){var idx=sText.indexOf('[ {');sText=sText.substr(idx);}
            var result;try {result=eval(sText);}catch(e){}
            if ('undefined' == typeof result) {return false;}

            var cmd, id, property, data, obj = null;

            for (var i=0;i<result.length;i++) {
                cmd         = result[i]['n'];
                id      = result[i]['t'];
                property    = result[i]['p'];
                data        = result[i]['d'];
                obj         = this.$(id);

                switch(cmd) {
                    case 'as': if(obj){eval("obj."+property+"=data;");} break;
                    case 'al': if(data){alert(data);} break;
                    case 'js': if(data){eval(data);} break;
                    default: this.error('Unknown command: ' + cmd);break;
                }
            }

            delete result;
            delete cmd;
            delete id;
            delete property;
            delete data;
            delete obj;
            this.videoListLoad();
            return true;
        };

        this.error = function(){};

        this.videoListLoad = function()
        {

            var youtube = document.querySelectorAll( ".youtube" );

            for (var i = 0; i < youtube.length; i++) {

                var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/hqdefault.jpg";

                var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );

                youtube[i].addEventListener( "click", function() {

                    var iframe = document.createElement( "iframe" );
                    iframe.setAttribute( "frameborder", "0" );
                    iframe.setAttribute( "allowfullscreen", "" );
                    iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

                    this.innerHTML = "";
                    this.appendChild( iframe );
                } );
            }

        };

    }

    var jtajax = new jtAJAX();
}