//VERSION AVEC JS

/**
 * AJAX
 */
function getXMLHttpRequest() {
    var xhr = null;
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    return xhr;
}

var srv, prf, out, cod, sav, dir = false, nom = false; //l'index et le prefixe, out, cod, le dossier et nom pour enregesitrer svg

/*
 * appelle paramJSON.js pour obtenir un objet json contenant toutes les infos relatives a la forme noodle
 * callback : initialiser(json)
 */
function getParam(tabGET) {
    console.log("Je passe par getParam");
    var objGET = JSON.parse(tabGET);
    console.log("J'ai réussi à parser");
    srv = objGET.srv;
    prf = objGET.prf;
    console.log(srv + prf);
 /*   if (objGET.sav) {
        sav = objGET.sav; 
        if (objGET.nom) {
            nom = objGET.nom;
        }
        if (objGET.dir) {
            dir = objGET.dir;
        }
    }*/

    var json = getParamJSON(tabGET);

}

/*
 * appelle paramJSON.php pour obtenir un objet json contenant toutes les infos relatives a la forme noodle
 * callback : initialiser(json)
 */
//function getParam(tabGET, s, p) {
//
//    srv = s;
//    prf = p;
//
//    var xhr = getXMLHttpRequest();
//
//    xhr.onreadystatechange = function () {
//        if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
////                                    alert(xhr.responseText); //test
//            try {
//                var json = JSON.parse(xhr.responseText);
//                initialiser(json);
//            }
//            catch (e) {
//                console.error("Parsing error:", e);
//            }
//        }
//    };
//
//    xhr.open("POST", "paramJSON.php", true);
//    xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
//    xhr.send("tabGET=" + tabGET); //partie URL cryptee
////alert("srv=" + srv + "&prf=" + prf + "&tabGET=" + tabGET);
//
//}

function initialiser(json) {
    //lecture du json
    creerLiens(json);
    creerQr(json);

    if (json.javascript === "svgNoodle") { //dom svg
        creerSvgNoodle(json);
    }
    else { //three js
        creerNoodle(json);
    }
//    out = json.out;
    cod = json.cod;

    //enregistre le svg sur le serveur
    //anciennement la verification se faisait avec le nom du prf = prf.charAt(0) === "s" || prf.charAt(0) === "d" 
    //maintenant avec $_GET['sav']
    if (sav && json.index === "indexM2") {
        encode_svg();
    }

}

/*
 * cree les liens out, crp, cod... et remplit la div liens 
 */
function creerLiens(json) {

    var index = json.index;
    var url = 'http://' + srv + '/' + prf + json.out;

//methode jqurey et bootstrap
    $("#menuLiens").append('<li><a href="' + url + '">dom: ' + srv + ' prf: ' + prf + '</a></li>');
    url = 'http://' + srv + '/' + index + '?prf=' + prf + '&out=' + json.out;
    $("#menuLiens").append('<li><a href="' + url + '">out: ' + json.out + ' (' + json.baseOut + ')</a></li>');
//    url = 'http://' + srv + '/' + index + '?prf=' + prf + '&crp=' + encodeURI(json.crp);
//    $("#menuLiens").append('<li><a href="' + url + '">(' + json.baseCrp + ' sur ' + json.blockSize + 'bits) crp:&nbsp;' + json.crp + "</a></li>");
    $("#menuLiens").append('<li><a>crp: ' + json.crp + ' (' + json.baseCrp + ' sur ' + json.blockSize + 'bits)</a></li>');
    url = 'http://' + srv + '/' + index + '?prf=' + prf + '&cod=' + json.cod;
    $("#menuLiens").append('<li><a href="' + url + '">cod: ' + json.cod + ' (' + json.baseCod + ')</a></li>');
    url = 'http://' + srv + '/' + index + '?prf=' + prf + '&bin=' + json.bin;
    $("#menuLiens").append('<li><a href="' + url + '">bin: ' + json.bin + '</a></li>');
    url = 'http://' + srv + '/' + index + '?prf=' + prf + '&val=' + json.val;
    $("#menuLiens").append('<li><a href="' + url + '">val: ' + json.val + '</a></li>');

}

/**
 * cree le qr code et remplit la div qr
 */
function creerQr(json) {
//    var url = encodeURI('http://' + srv + '/' + json.index + "?prf=" + prf + "&out=" + json.out); JS n'encode pas le & correctement
    var url = json.url;

    var qrc = 'http://chart.apis.google.com/chart?cht=qr&amp;chs=96x96&amp;chld=L&amp;chl=' + url;
    var html = '<a href="' + qrc + '"><img src="' + qrc + '" width="96" height="96" alt="QR"/></a>';

    //methode jquery et bootstrap
    $("#menuQR").append('<li>' + html + '</li>');
}

/*
 * cree le tableau de points a partir des infos recuperes du json
 * lance les fonctions three js pour creer et afficher noodle
 */
function creerNoodle(json) {

    //creation du tableau de points
    var params = [];
    var nb_points = 0;

    if (json.javascript === "threeNoodle2D" || json.javascript === "svgNoodle") {
        nb_points = 12;
        for (var i = 0; i < nb_points; i++) {
            params.push((json.dots[i][0] * 25 - 200) / 1.5);
            params.push((json.dots[i][1] * 25) / 1.5);
        }
    }
    else if (json.javascript === "threeNoodleGyr")
    {
        nb_points = 10;
        for (var i = 0; i < nb_points; i++) {
            params.push((json.dots[i][0] * 25 - 200) / 1.5);
            params.push((json.dots[i][1] * 25) / 1.5);
            params.push((json.dots[i][2] * 25 - 200) / 1.5);
        }
    }

    if (!json.palette) {
        var palette = ["#000000"];
    }
    else {
        var palette = json.palette;
    }


    if (json.javascript === "threeNoodleGyr") {
        init(params, json.renderer, json.type, json.sphere, palette, json.rotation, json.axes, json.gyroscope, json.bck); //creation de noodle
        if (json.gyroscope === true) {
            setGyr();//active le gyroscope
        }
    }
    else {
        init(params, json.renderer, json.type, json.sphere, palette, json.rotation, json.axes, json.bck);
    }

    animate();//lancement de l'animation et render
    //sinon il arrete l'animation avant de l'avoir lance et bubble ne s'affiche pas
    if (json.type === "bubble" || json.type === "superTube" || json.type === "metalTube" || json.type === "metalBubble" || json.type === "disk") {
        //ATTENTION fait bugger l'affichage
//        setTimeout(function () {
//            turn(json.angle * 2 - 180, true);
//        }, 700);
    }
    else {
        turn(Number(json.angle), true);//tourne la figure a l'angle recu
//        alert("turn ( "+ (json.angle * 2 - 180) +" )");
    }
}

/*
 * creer du svg dans le html a partir des param recuperes dans le json
 * @param {type} json
 */
function creerSvgNoodle(json) {

    //creation du tableau de points
    var params = [];
    var nb_points = 0;


    nb_points = 12;
    for (var i = 0; i < nb_points; i++) {
        params.push(json.dots[i][0]);
        params.push(json.dots[i][1]);
    }

    if (!json.palette) {
        var palette = ["#000000"];
    }
    else {
        var palette = json.palette;
    }

    init(params, json.type, palette, json.axes, json.bck);

}

/*
 * recupere le SVG de la page web pour en faire une image png ou SVG
 */
function encode_svg() {
    mySVGelement = document.getElementsByTagName("svg")[0];
//    myIMGelement = document.getElementById("img");

//    affiche l'image
    mySVGelement.toDataURL("image/svg+xml", {
        callback: function (data) {
//            myIMGelement.setAttribute("src", data);
            window.open(data);
        }
    });

    var id = cod; //ca sera le nom de l'image

    var img_val = mySVGelement.toDataURL("image/svg+xml");

//    alert(img_val);

    //requete AJAX pour upload l'image
    var xhr = getXMLHttpRequest();

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
//            alert(xhr.responseText); //test
            //appeler code creation QR code
//            creerQr(id);
        }
    };

    //si dir precise
    if (dir) {
        var dossier = "&dir=" + dir;
    }
    else
        var dossier = '';
    //si nom precise
    if (nom) {
        var lenom = "&nom=" + nom;
    }
    else
        var lenom = '';

    xhr.open("POST", "../img/saveSVG.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded", "charset=ISO-8859-1");
    xhr.send("img_val=" + img_val + "&id=" + id + "&prf=" + prf + dossier + lenom); //partie URL cryptee
}