// switch to target tab pane
function switchTab(targetId){
    var panes = document.querySelectorAll('.tab-content .tab-pane');
    for (var i=0; i< panes.length; i++){
        panes[i].style.display = 'none';
    }
    var targetPane = document.getElementById(targetId);
    if(targetPane){
        targetPane.style.display = 'block';
    }
}

// send ajax post request with content to specified url
function ajaxPost(content, url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function(){
        if(xhr.readyState === XMLHttpRequest.DONE){
            if(xhr.status === 200){
                callback(xhr.responseText);
            } else {
                console.error("AJAX error: " + xhr.status);
            }
        }
    };
    var params = 'content=' + encodeURIComponent(content);
    xhr.send(params);
}

// load preview via ajax into preview element
function loadPreview(previewElement){
    var sourceId = previewElement.getAttribute('data-source');
    var handlerUrl = previewElement.getAttribute('data-handler');
    var method = previewElement.getAttribute('data-method');
    var sourceElement = document.getElementById(sourceId);
    if(sourceElement){
        var content = sourceElement.value;
        if(method && method.toLowerCase() == 'post'){
            ajaxPost(content, handlerUrl, function (response){
                previewElement.innerHTML = response;
            });
        }
    }
}

// initialise tab links to handle tab switching
function initTabs(){
    var tabLinks = document.querySelectorAll('.tabs a[data-target]');
    for(var i=0; i<tabLinks.length; i++){
        tabLinks[i].addEventListener('click', function(e){
            e.preventDefault();
            var target = this.getAttribute('data-target');
            switchTab(target);

            // if the new tab has a preview element, load the preview
            var pane = document.getElementById(target);
            if(pane){
                var previewElement = pane.querySelector('.preview');
                if(previewElement){
                    console.log('pane has preview el')
                    loadPreview(previewElement);
                } else {
                    console.log('pane doesnt have preview el');
                }
            }
        });
    }
}

document.addEventListener('DOMContentLoaded', function(){
    initTabs();
});