Profile

Cover photo
Knavë No
Lives in Valencia
85,375 views
AboutPostsPhotosVideos+1's

Stream

Knavë No

Shared publicly  - 
 
<!DOCTYPE html>
<html>
<head>
    <title>Objects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        canvas{border:solid 1px #fff;position:fixed;top:12px;z-index:-7;}
        body{background-color:#fff;}
        #{margin:5px 0 0 3px;position:fixed;color:#fff;}
    </style>
    <!Note: ./ = same folder, ../ = upper one, ../f/ = folder (f) in upper directory>
    <!if u want test this page u'll need download and ubicate next scripts('available in GitHUB')
     in correct folder according/relative to where you saved this page>
    <!External scripts>
    <script id="THREEjs=WebGLHelper_by_Mr_doob" src="../three.min.js" type="text/javascript"></script>
    <script id="Projector_by_Supereggbert" src="../Projector.js" type="text/javascript"></script>
    <script id="kb" src="../THREEx.KeyboardState.js" type="text/javascript"></script>
    <script id="MouseCamControl_by_Mr_Flint" src="../OrbitControls.js" type="text/javascript"></script>
    <script src="../Cloth.js"></script>
    <!stats>
    <script id="Stats function">
        // stats.js - http://github.com/mrdoob/stats.js
        var Stats = function() {
            function f(a, e, b) { a = document.createElement(a); a.id = e; a.style.cssText = b; return a } function l(a, e, b) {
                var c = f("div", a, "padding:0 0 3px 3px;text-align:left;background:" + b), d = f("div", a + "Text", "font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px;color:" + e); d.innerHTML = a.toUpperCase(); c.appendChild(d); a = f("div", a + "Graph", "width:174px;height:30px;background:" + e); c.appendChild(a); for (e = 0; 174 > e; e++) a.appendChild(f("span", "", "width:1px;height:30px;float:left;opacity:0.9;background:" +
b)); return c
            } function m(a) { for (var b = c.children, d = 0; d < b.length; d++) b[d].style.display = d === a ? "block" : "none"; n = a } function p(a, b) { a.appendChild(a.firstChild).style.height = Math.min(30, 30 - 30 * b) + "px" } var q = self.performance && self.performance.now ? self.performance.now.bind(performance) : Date.now, k = q(), r = k, t = 0, n = 0, c = f("div", "stats", "width:180px;opacity:0.9;cursor:pointer"); c.addEventListener("mousedown", function(a) { a.preventDefault(); m(++n % c.children.length) }, !1); var d = 0, u = Infinity, v = 0, b = l("fps", "#0ff", "#002"),
A = b.children[0], B = b.children[1]; c.appendChild(b); var g = 0, w = Infinity, x = 0, b = l("ms", "#0f0", "#020"), C = b.children[0], D = b.children[1]; c.appendChild(b); if (self.performance && self.performance.memory) { var h = 0, y = Infinity, z = 0, b = l("mb", "#f08", "#201"), E = b.children[0], F = b.children[1]; c.appendChild(b) } m(n); return { REVISION: 14, domElement: c, setMode: m, begin: function() { k = q() }, end: function() {
    var a = q(); g = a - k; w = Math.min(w, g); x = Math.max(x, g); C.textContent = (g | 0) + " MS (" + (w | 0) + "-" + (x | 0) + ")"; p(D, g / 200); t++; if (a > r + 1E3 && (d = Math.round(1E3
t / (a - r)), u = Math.min(u, d), v = Math.max(v, d), A.textContent = d + " FPS (" + u + "-" + v + ")", p(B, d / 100), r = a, t = 0, void 0 !== h)) { var b = performance.memory.usedJSHeapSize, c = performance.memory.jsHeapSizeLimit; h = Math.round(9.54E-7 * b); y = Math.min(y, h); z = Math.max(z, h); E.textContent = h + " MB (" + y + "-" + z + ")"; p(F, b / c) } return a
}, update: function() { k = this.end() } }
        }; "object" === typeof module && (module.exports = Stats);
    </script>
    <script>
        var 0 =
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAO" +
        "xAGVKw4bAAACGUlEQVR4nO1bS67DIAw0Tz1Aj5L7X6LH6LbL7uZtGimKwJifpymMlE0AYw+2CcgJAGRm/LEVYGMRwFaADgCybRtEZKpn2zYAkA" +
        "BAQghTZkIAYfoQWARojc/nUwCEVDuAkGrf246PVYb2TpNpnfMINQfsAkrbtYlTfff3pTKP/Sx9zjJvKUVrcVQiphyAUEt4ri01rzbnsBxwnjCn" +
        "uMX4ETB5gCWWeoyxGJ/ysNq5p9gFNGJNHlDDdGxMbmW0WM3pUtv3azzgvAt4yfoaAkRsilv3eSsJKgHv99v9jODtCeswxFaCjUVA7cDU4cTreT" +
        "weXQhoPguw8scnsTXPvUKArQAbwwnQLkJK3o/CcAJCCLAaZTkL9IZLCFhIYBgv4pgDNBJYxos4J8EYCUzjRQi7wJEEtvEiBAKORpckyFFwJSC2" +
        "4mwS3AjQ3J1JggsB1rs+BgkuX4LWRMcgweVLsMf7UZj+MNR8H8BKXq/Xq4unXPZCpBemD4FFAFsBNhYBbAXYqN4Frp79d6gEsI+qPZFasCQBMe" +
        "NbV72F0JqCi3PfmIxsCLRUdJXKKpVnGdNUH/ALyBGaJeCX8kAMyRCwXl6WFkp9G1QPsJShariC95iSYM0qX8F4kQmSYG4hir4DRiuj9WnZ6jSY" +
        "PeCsgHcJXaxMpmR88g7yymVyrRXmq0xOPiFwv9/Zerhjtzngwv8O9yirXSHAVoCN6Qn4B+BvZx06lczSAAAAAElFTkSuQmCC";
        var 1 =
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAO" +
        "xAGVKw4bAAABE0lEQVR4nGP8//8/w0ACpgG1nYGBgQWXxIcPH/7rzPKl2IInZYcZ8ckz4ooC5U2+VIubu36bcToCZwhMNr1ILfvxgsGbBnJP61" +
        "PNEi8/3HKDNwRG08BoGhhNA/RKA4z///9nkOmyxSj32TUEqOaAnzc+YBV/UnaYkQWXZdRMA7kMuENzZKQBfGDwhgBV0wCe0By8ITAk0gCu/E0K" +
        "IDsNpC2WhztiVuxDvGoJpgF8rVZ8lsMshvFJATA74c1y5Gb4zxsfcBbFsGBH9jXMAfj0oMvBHMCELkCq5ch8XGmCXUMARQ45xDE6Jh8+fPhvfC" +
        "gWpwPwxXfaYnm8lRi2qMbZM8IFsNWcMECoG4YNkOwAaoMBLwkBFSuBn6OWc2MAAAAASUVORK5CYII=";
        var 2=
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAO" +
        "xAGVKw4bAAAA1UlEQVR4nGP8//8/w0ACpgG1nYGBgQVdgHHxS5oGyf9YcUZkPkUh8P+uPcP/u/YUOQgjBBgYGBhmmuN2V/rJfwg1dxHqUcQJ6C" +
        "XoAFyK0Q1nVD4IESdDLwwMeCIcdcDQcQBySscH0k/+w5sTyHIAsZaT4wic2RDZAFIsJ9URjOiVESlFMTmORC+KcYYAMYCckEEHQycXYAP/Y8UZ" +
        "0YOUrg6gBhh1wKgDRh0w6oDB5wAOZtJLVnL04HTAj7+kd4zI0YPTAcRWLsjqyNEDAxgNEnqDAU+EADxtTYhIHM0nAAAAAElFTkSuQmCC";
        var keyboard = new THREEx.KeyboardState();              //loading kb compatibility
        var fov = 92;                                           //Field of viewer
        var asr = window.innerWidth / window.innerHeight;       //Aspect ratio
        var nea = 0.01;                                         //Nearest objects to capture with cam
        var far = 1000;                                         //Farest     "     "    "      "   "
        var C = new THREE.PerspectiveCamera(fov, asr, nea, far);//Perspective camera with upper 4 parameters
        var R = new THREE.WebGLRenderer();                      //Renderer object
        var Projector = new THREE.Projector();
        var OR = new THREE.OrbitControls(C, R.domElement);      //Cam controled with mouse
        var S = new THREE.Scene();                              //Making vars globally for future use in animation
        var V, x, y, z, ÿ, ý;                                   /"   "      "     "     "    "   "  "    " /
        var stats = new Stats();                                //4 fillupper-right box with info like FPS / MS / MB

        var pinsFormation = [];
        var pins = [6];

        pinsFormation.push(pins);

        pins = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        pinsFormation.push(pins);

        pins = [0];
        pinsFormation.push(pins);

        pins = []; // cut the rope ;)
        pinsFormation.push(pins);

        pins = [0, cloth.w]; // classic 2 pins
        pinsFormation.push(pins);

        pins = pinsFormation[1];

        //jeans material and texture
        var z = new THREE.TextureLoader().load(2);
        var x = new THREE.MeshPhongMaterial({ alphaTest: 0.5, color: 0xffffff, specular: 0x030303, emissive: 0x111111, map: z, side: THREE.DoubleSide });

        //T-shirt material and texture
        var z = new THREE.TextureLoader().load(1);
        var y = new THREE.MeshPhongMaterial({ alphaTest: 0.5, color: 0xffffff, specular: 0x030303, emissive: 0x111111, map: z, side: THREE.DoubleSide });
                      
        //flag material, geometry, and texture
        var z = new THREE.TextureLoader().load(0);
        //z.anisotropy = 16;
        var o9 = new THREE.MeshPhongMaterial({ alphaTest: 0.5, color: 0xffffff, specular: 0x030303, emissive: 0x111111, map: z, side: THREE.DoubleSide});
        var clothGeometry = new THREE.ParametricGeometry(clothFunction, cloth.w, cloth.h);
        var ms_Water;
        
        function () {                                          //Start function
            //Scene
            S.fog = new THREE.Fog(0xcce0ff, 50, 10000);        //3 fog parameters for the scene
            
            //Light first Ambient/omnidirectional=40,40,40 then directional=ef,ef,ef and spot one after the ground/plane/vehicle creation
            S.add(new THREE.AmbientLight(0x404040));

            ÿ = new THREE.DirectionalLight(0xefefef, 0.73);
            ÿ.position.set(332, 153, 0);
            ÿ.position.multiplyScalar(1.111);

            ÿ.castShadow = true;
            //ÿ.shadowCameraVisible = true;

            ÿ.shadowMapWidth = 2048;
            ÿ.shadowMapHeight = 2048;

            ÿ.shadowCameraLeft = 242;
            ÿ.shadowCameraRight = 242;
            ÿ.shadowCameraTop = 242;
            ÿ.shadowCameraBottom = -242;

            ÿ.shadowCameraFar = 2064;
            ÿ.shadowDarkness = 0.73;

            ý = new THREE.SpotLight(0xcfcfcc);
            S.add(ÿ);

            //Camera: set position then look at scene position
            C.position.x = 0;
            C.position.y = 7.3;
            C.position.z = 9.2;
            C.lookAt( S.position );
            S.add(C);
            
            //Render: fit into browser window, add render to documents body, setup stats CSS then add stats to body
            R.setSize(window.innerWidth - 52, window.innerHeight - 52);
            R.shadowMap.enabled = true;
            R.shadowMapSoft = true;
            document.body.appendChild(R.domElement);
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '14px';
            stats.domElement.style.right = '14px';
            stats.domElement.style.zIndex = 100;
            document.body.appendChild(stats.domElement);

// To create the water effect uncomment the following 20 lines
////textures
//var waterNormals = new THREE.TextureLoader().load(0);
//waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
//ms_Water = new THREE.Water(this.R, this.C, this.S, {
//textureWidth: 256,
//textureHeight: 256,
//waterNormals: waterNormals,
//alpha: 1.0,
//sunDirection: ÿ.position.normalize(),
//sunColor: 0xffffff,
//waterColor: 0x001e0f,
//betaVersion: 0,
//side: THREE.DoubleSide
//});
//var aMeshMirror = new THREE.Mesh(
//new THREE.PlaneBufferGeometry(2000, 2000, 10, 10),
//ms_Water.material
//);
//aMeshMirror.add(this.ms_Water);
//aMeshMirror.rotation.x = -Math.PI * 0.5;
//S.add(aMeshMirror);
//()()[ THIS lines are for vehicle lathe n tubes ]
    var d = [THREE.DoubleSide,
    new THREE.MeshBasicMaterial({ color: 0x000000, transparent: false }),
    new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true, transparent: false })];
    //_d.side = THREE.DoubleSide;
    var _e = [];
    _e[0] = new THREE.Vector3(9, 0, 0);
    _e[1] = new THREE.Vector3(11, 0, 2);
    _e[2] = new THREE.Vector3(13, 0, 4);
    _e[3] = new THREE.Vector3(15, 0, 6);
    _e[4] = new THREE.Vector3(15, 0, 11);
    _e[5] = new THREE.Vector3(15, 0, 15);
    _e[6] = new THREE.Vector3(14, 0, 18);
    _e[7] = new THREE.Vector3(13, 0, 21);
    var _p = [];
    _p[0] = new THREE.Vector3(-9, 0, 0);
    _p[1] = new THREE.Vector3(-11, 0, 2);
    _p[2] = new THREE.Vector3(-13, 0, 4);
    _p[3] = new THREE.Vector3(-15, 0, 6);
    _p[4] = new THREE.Vector3(-15, 0, 11);
    _p[5] = new THREE.Vector3(-15, 0, 15);
    _p[6] = new THREE.Vector3(-14, 0, 18);
    _p[7] = new THREE.Vector3(-13, 0, 21);
    _f = new THREE.SceneUtils.createMultiMaterialObject(new THREE.LatheGeometry(_e, 12, 0, Math.PI), _d);
    _o = new THREE.SceneUtils.createMultiMaterialObject(new THREE.TubeGeometry(new THREE.CatmullRomCurve3(_e), 9, 1, 8, closed), _d);
    _q = new THREE.SceneUtils.createMultiMaterialObject(new THREE.TubeGeometry(new THREE.CatmullRomCurve3(_p), 9, 1, 8, closed), _d);
    //S.add(_q, _o);
/******///ground setup
/* X=800 Y=600 /  O = new THREE.PlaneBufferGeometry(800, 600);
/ Material    /  //var P = new THREE.MeshPhongMaterial({ emissive: 0x808080 });
/ Material    /  var P = new THREE.Mesh(O, new THREE.MeshBasicMaterial({ color: 0x808080 }));
/ Material    /  //var P = new THREE.Mesh(O, new THREE.TextureLoader('./d.png'));
/ Material    /  //P.side = THREE.DoubleSide;
/ Material    /  ///var P = new THREE.TextureLoader('./d.png');
/ Mat. wrappin*/  ////P.wrapS = P.wrapT = THREE.RepeatWrapping;
/* Mat. repeat /  ////P.repeat.set(10, 10);
/ Mat. texture*/  ///var AP = new THREE.MeshBasicMaterial({map:P, side:THREE.DoubleSide,wireframe:false});
/* Ground      /  //var N = new THREE.Mesh(O, P);
/ Grnd. X Y Z /  P.position.set(0, 0, -1);
/ Grnd. Rot.X /  P.rotation.x = -Math.PI / 2;
/ Grnd. Rot.Y /  P.rotation.y = 0;
/ Grnd. Shad. /  P.castShadow = true;
/ Grnd. Shad. /  P.receiveShadow = true;
/ Grnd. 2 Scn /S.add(P);

    //walls or pool limits
    var W = new THREE.BoxGeometry(800, 23, 0.5);
    var w = new THREE.MeshPhongMaterial({ color: 0xff0000 });
    K = new THREE.Mesh(W, w);
    K.position.x = 0;
    K.position.y = 11.5;
    K.position.z = -300;
    L = new THREE.Mesh(W, w);
    L.position.x = -400;
    L.position.y = 11.5;
    L.position.z = 0;
    L.rotation.y = Math.PI / 2;
    M = new THREE.Mesh(W, w);
    M.position.x = 0;
    M.position.y = 11.5;
    M.position.z = 300;
    N = new THREE.Mesh(W, w);
    N.position.x = 400;
    N.position.y = 11.5;
    N.position.z = 0;
    N.rotation.y = Math.PI / 2;
    S.add(K);
    S.add(L);
    S.add(M);
    S.add(N);
    //vehicle
    ba(); /init//bb();direction//bc();motion//bd();rotate//be();move//bf();collide///here i call next function
function ba() {
    ///tubes
    var _0 = new THREE.CylinderGeometry(0.14, 0.14, 2.8, 16, 1, true);//
    ///wheels of vehicle
    var _1 = new THREE.CylinderGeometry(2, 2, 1, 32, 1, false); //
    ///innerwheel
    var _2 = new THREE.CylinderGeometry(0.3, 1.7, 0.5, 32, 1, false, 0, Math.PI / 3); //
    ////lights n dep.:
    ////front
    var _3 = new THREE.SphereGeometry(0.8, 32, 32, 0, Math.PI * 2, 0, 2);
    ////back
    var _4 = new THREE.SphereGeometry(0.8, 32, 32, 0, Math.PI * 2, 0, Math.PI / 2);
    ////center
    var _5 = new THREE.SphereGeometry(1.73, 32, 32, 0, Math.PI * 2, 0, 2);
    ////innerlight
    var _6 = new THREE.SphereGeometry(0.7, 32, 32, 0, Math.PI * 2, 0, 2);
    ////plight
    var _7 = new THREE.BoxGeometry(1.32, 0.42, 0.3);
    ////cover
    var _8 = new THREE.SphereGeometry(4, 32, 32, 0, Math.PI * 2, 0, 2);
    ///volante
    var _9 = new THREE.CylinderGeometry(0.85, 0.055, 0.443, 16, 1, false, 0, Math.PI / 6); //
    //materials
    var _t = new THREE.MeshLambertMaterial({ transparent: true, blending: THREE.AdditiveBlending, emissive: 0x00ffff });
    var _u = new THREE.MeshLambertMaterial({ emissive: 0xff0000 });
    var _v = new THREE.MeshLambertMaterial({ emissive: 0xffffff });
    var _w = new THREE.MeshLambertMaterial({ emissive: 0x0000ff });
    var _x = new THREE.MeshPhongMaterial({ color: 0xafafaf });
    var _y = new THREE.MeshPhongMaterial({ color: 0x0f0f0f });
    var _z = new THREE.MeshPhongMaterial({ color: 0xcfcfcf });
 
    //setup object mesh n position
    this.V = new THREE.Object3D();
    this.V.position.y = 2;
    //setup wheels
    this._a = { a: new THREE.Mesh(_1, _y), b: new THREE.Mesh(_1, _y) };
    this._a.a.scale.x += 1.37;
    this._a.a.scale.z += 2.82;
    this._a.a.position.x = 0;
    this._a.a.position.y = 0;
    this._a.a.position.z = -3;
    this._a.b.scale.x += 1.44;
    this._a.b.scale.z += 3.02;
    this._a.b.position.x = 0;
    this._a.b.position.y -= 1;
    this._a.b.position.z = -3;
    this.V.add(this._a.a); //upper wheel
    this.V.add(this._a.b); //down wheel
    ///tubes 0 n 1 or vertical 2
    this._b = { a: new THREE.Mesh(_0, _x), b: new THREE.Mesh(_0, _x) };
    this._b.a.position.x = -2.34;
    this._b.a.position.y += 1;
    this._b.a.position.z -= 9.23;
    this._b.a.rotation.x -= Math.PI;
    this._b.b.position.x = +2.34;
    this._b.b.position.y += 1;
    this._b.b.position.z -= 9.23;
    this._b.b.rotation.x -= Math.PI;
    this.V.add(this._b.a); //vertical left
    this.V.add(this._b.b); //vertical right
    ///addin' 3 portions of a cone
    this._c = { a: new THREE.Mesh(_2, _x), b: new THREE.Mesh(_2, _x), c: new THREE.Mesh(_2, _x) };
    this._c.a.position.y += 2.32;
    this._c.a.position.z -= 9.23;
    this._c.a.rotation.x -= Math.PI / 2;
    this._c.a.rotation.y -= 0;
    this.V.add(this._c.a); //1st
    this._c.b.position.y += 2.32;
    this._c.b.position.z -= 9.23;
    this._c.b.rotation.x -= Math.PI / 2;
    this._c.b.rotation.y -= 2;
    this.V.add(this._c.b); //2nd
    this._c.c.position.y += 2.32;
    this._c.c.position.z -= 9.23;
    this._c.c.rotation.x -= Math.PI / 2;
    this._c.c.rotation.y -= 4;
    this.V.add(this._c.c); //3th
    //lathe of line 97
    this._f.scale.x -= 0.82;
    this._f.scale.y -= 0.82;
    this._f.scale.z -= 0.92;
    this._f.position.y += 1.64;
    this._f.position.z -= 9.77;
    this.V.add(this._f);   //cover of the motor
    //lights cover
    this._g = { a: new THREE.Mesh(_3, _x), b: new THREE.Mesh(_3, _x) };
    this._g.a.position.x = -3.14;
    this._g.a.position.y += 1;
    this._g.a.position.z += 3.23;
    this._g.a.rotation.x -= Math.PI / 2;
    this._g.b.position.x = +3.14;
    this._g.b.position.y += 1;
    this._g.b.position.z += 3.23;
    this._g.b.rotation.x -= Math.PI / 2;
    this.V.add(this._g.a); //left
    this.V.add(this._g.b); //right
    //lights
    this._h = { a: new THREE.Mesh(_3, _v), b: new THREE.Mesh(_3, _v) };
    this._h.a.position.x = -3.14;
    this._h.a.position.y += 1;
    this._h.a.position.z += 3.23;
    this._h.a.rotation.x += Math.PI / 2;
    this._h.b.position.x = +3.14;
    this._h.b.position.y += 1;
    this._h.b.position.z += 3.23;
    this._h.b.rotation.x += Math.PI / 2;
    this.V.add(this._h.a); //left
    this.V.add(this._h.b); //right
    //plights boxes
    this._i = { a: new THREE.Mesh(_3, _z), b: new THREE.Mesh(_3, _z) };
    this._i.a.position.x = -0.9;
    this._i.a.position.y += 0.9;
    this._i.a.position.z += 3.53;
    this._i.a.rotation.x = 4;
    this._i.a.scale.x -= 1.24;
    this._i.a.scale.y -= 1.24;
    this._i.a.scale.z -= 1.24;
    this._i.b.position.x = +0.9;
    this._i.b.position.y += 0.9;
    this._i.b.position.z += 3.53;
    this._i.b.rotation.x = 4;
    this._i.b.scale.x -= 1.24;
    this._i.b.scale.y -= 1.24;
    this._i.b.scale.z -= 1.24;
    this.V.add(this._i.a); //left
    this.V.add(this._i.b); //right
    //plights
    this._j = { a: new THREE.Mesh(_3, _u), b: new THREE.Mesh(_3, _w) };
    this._j.a.position.x = -0.9;
    this._j.a.position.y += 0.9;
    this._j.a.position.z += 3.53;
    this._j.a.rotation.x = 1;
    this._j.a.scale.x -= 1.23;
    this._j.a.scale.y -= 1.23;
    this._j.a.scale.z -= 1.23;
    this._j.b.position.x = +0.9;
    this._j.b.position.y += 0.9;
    this._j.b.position.z += 3.53;
    this._j.b.rotation.x = 3.14;
    this._j.b.scale.x -= 1.23;
    this._j.b.scale.y -= 1.23;
    this._j.b.scale.z -= 1.23;
    this.V.add(this._j.a); //left
    this.V.add(this._j.b); //right
    //v. cover
    this._k = { a: new THREE.Mesh(_8, _t) };
    this._k.a.scale.x += 0.16;
    this._k.a.scale.y += 0.16;
    this._k.a.scale.z -= 0.34;
    this._k.a.position.x = 0;
    this._k.a.position.y += 1.23;
    this._k.a.position.z -= 1.23;
    this._k.a.rotation.x += Math.PI / 2;
    this.V.add(this._k.a); //add glass cover to vehicle
    //v. boxes
    this._l = { a: new THREE.Mesh(_7, _x), b: new THREE.Mesh(_7, _x), c: new THREE.Mesh(_7, _x), d: new THREE.Mesh(_7, _x), e: new THREE.Mesh(_7, _x), f: new THREE.Mesh(_7, _x), g: new THREE.Mesh(_7, _x), h: new THREE.Mesh(_7, _x), i: new THREE.Mesh(_7, _x), j: new THREE.Mesh(_7, _x) };
    this._l.a.scale.x += 1.5;
    this._l.a.scale.y += 1.5;
    this._l.a.scale.z += 4;
    this._l.a.position.x = +2.5;
    this._l.a.position.y += 1;
    this._l.a.position.z -= 3.23;
    this._l.b.scale.x += 1.5;
    this._l.b.scale.y += 1.5;
    this._l.b.scale.z += 4;
    this._l.b.position.x = -2.5;
    this._l.b.position.y += 1;
    this._l.b.position.z -= 3.23;
    this._l.c.scale.x += 1.5;
    this._l.c.scale.y += 1.5;
    this._l.c.position.x = +2.5;
    this._l.c.position.y += 2;
    this._l.c.position.z -= 3.23;
    this._l.d.scale.x += 1.5;
    this._l.d.scale.y += 1.5;
    this._l.d.position.x = -2.5;
    this._l.d.position.y += 2;
    this._l.d.position.z -= 3.23;
    this._l.e.scale.x += 0.7;
    this._l.e.scale.y += 1.5;
    this._l.e.scale.z += 1.5;
    this._l.e.position.x = +2.5;
    this._l.e.position.y += 1;
    this._l.e.position.z -=5.23;
    this._l.f.scale.x += 0.7;
    this._l.f.scale.y += 1.5;
    this._l.f.scale.z += 1.5;
    this._l.f.position.x = -2.5;
    this._l.f.position.y += 1;
    this._l.f.position.z -= 5.23;
    this._l.g.scale.x += 0.7;
    this._l.g.scale.y += 1.5;
    this._l.g.scale.z += 1.5;
    this._l.g.position.x = +2.5;
    this._l.g.position.y += 1;
    this._l.g.position.z -= 6.23;
    this._l.h.scale.x += 0.7;
    this._l.h.scale.y += 1.5;
    this._l.h.scale.z += 1.5;
    this._l.h.position.x = -2.5;
    this._l.h.position.y += 1;
    this._l.h.position.z -= 6.23;
    this._l.i.scale.x += 0.7;
    this._l.i.scale.y += 1.5;
    this._l.i.scale.z += 1.5;
    this._l.i.position.x = +2.5;
    this._l.i.position.y += 1;
    this._l.i.position.z -= 7.23;
    this._l.j.scale.x += 0.7;
    this._l.j.scale.y += 1.5;
    this._l.j.scale.z += 1.5;
    this._l.j.position.x = -2.5;
    this._l.j.position.y += 1;
    this._l.j.position.z -= 7.23;
    this.V.add(this._l.a, this._l.b, this._l.c, this._l.d, this._l.e, this._l.f, this._l.g, this._l.h, this._l.i, this._l.j); //10 rear boxes
    //eje del volante
    this._m = { a: new THREE.Mesh(_0, _y) };
    this._m.a.scale.x -= 0.19;
    this._m.a.scale.y -= 0.19;
    this._m.a.scale.z -= 0.19;
    this._m.a.position.x = 0;
    this._m.a.position.y += 1.23;
    this._m.a.position.z += 2.53;
    this._m.a.rotation.x += Math.PI / 2+1;
    this.V.add(this._m.a); //add it to mesh object
    ///volante en tres partes
    this._n = { a: new THREE.Mesh(_9, _y), b: new THREE.Mesh(_9, _y), c: new THREE.Mesh(_9, _y) };
    //this._n.a.position.y += 2.32;
    //this._n.a.position.z += 1.53;
    //this._n.a.rotation.x -= Math.PI / 2;
    //this._n.a.rotation.y -= 1.5;
    //this.V.add(this._n.a); //1ª parte
    //this._n.b.position.y += 2.32;
    //this._n.b.position.z += 1.53;
    //this._n.b.rotation.x -= Math.PI / 2;
    //this._n.b.rotation.y -= 3.5;
    //this.V.add(this._n.b); //2ª parte
    //this._n.c.position.y += 2.32;
    //this._n.c.position.z += 1.53;
    //this._n.c.rotation.x -= Math.PI / 2;
    //this._n.c.rotation.y -= 5.5;
    //this.V.add(this._n.c); //3ª parte
    //is the same as prev. commented, but shorter
    this._n.a.rotation.x=this._n.b.rotation.x=this._n.c.rotation.x -= Math.PI/2;
    this._n.a.position.y=this._n.b.position.y=this._n.c.position.y += 2.32;
    this._n.a.position.z=this._n.b.position.z=this._n.c.position.z += 1.53;
    this._n.a.rotation.y -= 1.5;
    this._n.b.rotation.y -= 3.5;
    this._n.c.rotation.y -= 5.5;
    this.V.add(this._n.a); //1ª parte
    this.V.add(this._n.b); //2ª parte
    this.V.add(this._n.c); //3ª parte   
    //two lateral tubes
    this._o.scale.x = this._o.scale.y = this._o.scale.z = this._q.scale.x = this._q.scale.y = this._q.scale.z = 0.28;
    this._o.position.x = -0.9;
    this._q.position.x = +0.9;
    this._o.position.y = this._q.position.y += 1.73;
    this._o.position.z = this._q.position.z -= 8;
    this._o.rotation.y += 0.19;
    this._q.rotation.y -= 0.19;
    this.V.add(this._o, this._q); //left n right
    //Note:
    //Add here your code
    //or modify any of prev. parameters or strip some 3ds/json model
    
    //setup vector of motion
    this.direction = new THREE.Vector3(0, 0, 0);

}
    this.V.castShadow = true;
    this.V.receiveShadow = true;
    S.add(this.V);

//vehicle direction
function bb(keyboard) {
    var x = keyboard.pressed('left') ? 1 : keyboard.pressed('right') ? -1 : 0,
    y = 0,
    z = keyboard.pressed('up') ? 1 : keyboard.pressed('down') ? -1 : 0;
    this.direction.set(x, y, z); bc();
}
//veh. motion
function bc() {
    if (this.direction.x !== 0 || this.direction.z !== 0) {
    // Rotate the character
    bd();
    // And, only if we're not colliding with an obstacle or a wall ...
    //if (cf()) {
    //    return false;
    //    }
    // ... we move the character
    be();
    return true;
        }
}
//v. direction
function bd() {
    // Set the direction's angle, and the difference between it and our Object3D's current rotation
    var angle = Math.atan2(this.direction.x, this.direction.z),
    difference = angle - this.V.rotation.y;
    // If we're doing more than a 180°
    if (Math.abs(difference) > 3.1416) {
    // We proceed to a direct 360° rotation in the opposite way
    if (difference > 0) {
    this.V.rotation.y += 0.387;
    } else {
    this.V.rotation.y -= 0.387;
    }
    // And we set a new smarter (because shorter) difference
    difference = angle - this.V.rotation.y;
    // In short : we make sure not to turn "left" to go "right"
    }
    // Now if we haven't reached our target angle
    if (difference !== 0) {
        // We slightly get closer to it
        this.V.rotation.y -= difference / 64;
        }
}
//v. move    
function be() {
    // We update our Object3D's position from our "direction"
    this.V.position.x -= this.direction.x * ((this.direction.z === 0) ? 4 : Math.sqrt(8));
    this.V.position.z -= this.direction.z * ((this.direction.x === 0) ? 4 : Math.sqrt(8));
    // Now let's use Sine and Cosine curves, using our "step" property ...
    //this.step += 0.25;
    // ... to slightly move our feet and hands
    //this.feet.left.position.setZ(Math.sin(this.step) * 1);
    //this.feet.right.position.setZ(Math.cos(this.step + (Math.PI / 2)) * 1);
    //this.hands.left.position.setZ(Math.cos(this.step + (Math.PI / 2)) * 0.5);
    //this.hands.right.position.setZ(Math.sin(this.step) * 0.5);
}
//v. collide
function bf() { }

clothGeometry.dynamic = true;
clothGeometry.computeFaceNormals();

//jeans mesh
o0 = new THREE.Mesh(clothGeometry, x);
o0.position.set(520, 95, 320);
o0.castShadow = true;
o0.receiveShadow = true;
S.add(o0);
//t-shirt mesh
o1 = new THREE.Mesh(clothGeometry, y);
o1.position.set(-310, 95, 320);
o1.castShadow = true;
o1.receiveShadow = true;
S.add(o1);
//flag mesh
o2 = new THREE.Mesh(clothGeometry, o9);
o2.position.set(-310, 98, -320);
o2.castShadow = true;
o2.receiveShadow = true;
S.add(o2);
//flag' mesh
o3 = new THREE.Mesh(clothGeometry, o9);
o3.position.set(520, 95, -320);
o3.castShadow = true;
o3.receiveShadow = true;
S.add(o3);
//4 poles
var x0 = new THREE.BoxGeometry(5, 525, 5);
var y0 = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111 });
var o4 = new THREE.Mesh(x0, y0);
o4.position.set(-420, 211, -320);
o4.receiveShadow = true;
o4.castShadow = true;
S.add(o4);
var o5 = new THREE.Mesh(x0, y0);
o5.position.set(420, 211, -320);
o5.receiveShadow = true;
o5.castShadow = true;
S.add(o5);
var oa = new THREE.Mesh(x0, y0);
oa.position.set(-420, 211, 320);
oa.receiveShadow = true;
oa.castShadow = true;
S.add(oa);
var ob = new THREE.Mesh(x0, y0);
ob.position.set(420, 211, 320);
ob.receiveShadow = true;
ob.castShadow = true;
S.add(ob);
//wind helper
o6 = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0), 50, 0xff0000);
o6.position.set(-420, 495, -320);
S.add(o6);
//        //spot light
//                ý.position.set(-300, 152, 0);
//                ý.castShadow = true;
//                ý.shadowCameraNear = 2;
//                ý.shadowCameraFar = 2048;
//                ý.shadowCameraFov = 128;
//                ý.lookAt(P);
//                S.add(ý);           
/******///Show
/**/var _0 = function() {           //Animation function
/**/requestAnimationFrame(_0);      //call this function in a loop
/**/stats.update();                 //claim a stats update
/**/
/**///new time var
/**/var o8 = Date.now();
/**///wind z or strength
/**/o7 = Math.cos(o8 / 7000) * 20;
/**///wind y or force
/**/windForce.set(Math.cos(o8 / 2000), Math.cos(o8 / 1000), Math.sin(o8 / 5000)).normalize().multiplyScalar(o7);
/**///arrow wind helper
/**/o6.setLength(o7);
/**/o6.setDirection(windForce);
/**///simulate time in cloth/flag/mesh n call _1()
/**/simulate(o8);
/**/_1();
/**/
/**/R.render(S, C);                 //in object (R) render Scene with Camera
/**/
/**/};
_0(); //< call previous written function
function _1() {    //cloth/flag/mesh function
    var p = cloth.particles;
    for (var i = 0;i < p.length;i++) {clothGeometry.vertices[i].copy(p[i].position);};
    clothGeometry.computeFaceNormals();
    clothGeometry.computeVertexNormals();
    clothGeometry.normalsNeedUpdate = true;
    clothGeometry.verticesNeedUpdate = true;
    pins = [0, 11, 22, 33, 44, 55, 66, 77, 88, 99, 110];
}
/////End of animation section*************************//
        function _2()       {                                                      //_2() is called by listener on win resized
            C.aspect = (window.innerWidth-23) / (window.innerHeight-23);           //aspect ratio
            R.setSize(window.innerWidth-23, window.innerHeight-23);                //set renderer size
                            }
        function _3(event) {                                                       //Called by Listeners at end of script
                          if (event.wheelDeltaY) {                                  // WebKit
                              C.fov -= event.wheelDeltaY * 0.05;
                          } else if (event.wheelDelta) {                            // Opera / IE9
                              C.fov -= event.wheelDelta * 0.05;
                          } else if (event.detail) {                                // Firefox
                              C.fov += event.detail * 1.0;
                          }
                          C.fov = Math.max(40, Math.min(100, C.fov));
                          C.updateProjectionMatrix();
                            }
        function _4(e)     {                               //need projector script to run + missing someting like projector
            e.preventDefault();
            var a = new THREE.Vector3();
            a.x = 2 * (e.clientX / window.innerWidth) - 1;
            a.y = 1 - 2 * (e.clientY / window.innerHeight);
            var b = THREE.Projector(a.clone(), C);
            var c = b.intersectsObject(V);
            for (var g = 0; g < c.length; g++) {
            var d = c[V],
            f = d.object;
            console.log("Intersected object", f);
                                                 }
                            }
        function _5() {                                    //Need a fix, say last mouse object selection store then kb functions
            if (this.V.position.z < -285) { this.V.position.z = -285} else if (this.V.position.z > 285) { this.V.position.z = 285 };
            if (this.V.position.x < -392) { this.V.position.x = -392} else if (this.V.position.x > 392) { this.V.position.x = 392 };
            //once we stablished limits then kb functions
            if (keyboard.pressed("up"))
                V.translateZ(-0.07);                       //case mouse click is (▲) then move obj up
            if (keyboard.pressed("down"))
                V.translateZ(0.07);                        //case mouse click is (▼) then move object down
            if (keyboard.pressed("left"))
                V.translateX(-0.07);                       //case mouse click is (◄) then move object 2 da left
            if (keyboard.pressed("right"))
                V.translateX(0.07);                        //case mouse click is (►) then move object to the right
            bb(keyboard);                                  //motion n rotation
            _c.a.rotation.y++;                             //motor rotation
            _c.b.rotation.y++;                             //
            _c.c.rotation.y++;                             //
            _j.a.rotation.x++;                             //plights rotation
            _j.b.rotation.x++;                             //  "       "
                            }
        document.addEventListener('mousewheel', _3, false);//if client change mouse wheel
        document.addEventListener('DOMMouseScroll', _3, false);
        window.addEventListener('resize', _2, false);      //If client resize browser then call _2() to fit canvas on screen
        window.addEventListener('mousedown', _4, false);   //If client touch an object fires _4() to write clicked object in console log
        window.addEventListener('keydown', _5, false);     //If client touch a key fires _5()
    }
/*****///end
    </script>
</head>
<body onload="()">
    <div id="">THREE.js<br/>-arrows move the vehicle<br/>-any other key animate the vehicle.</div>
</body>
</html>
1
Add a comment...

Knavë No

Shared publicly  - 
2
2
Add a comment...

Knavë No

Shared publicly  - 
 
 
The new YouTube Upload Widget is here! It lets your website's visitors perform both webcam and file uploads to +YouTube. Read all about it in the blog post and check out YouTube Direct Lite, a complete rewrite of the existing YouTube Direct platform developed entirely using client-side technologies: JavaScript/HTML/CSS.
To learn more, watch the #io12  session video: Google I/O 2012 - Getting Direct Feedback from your YouTube Community 
#GoogleDev 
1
1
Add a comment...

Knavë No

Shared publicly  - 
1
Tristan Leblanc's profile photo
 
How can you find so crazy stuffs ? Just wondering…
Add a comment...

Knavë No

Shared publicly  - 
 
 
Mitt's everywhere you look today

If only he would stay on the tits. In this #mittsontits photo, he's getting greedy and moving south. #NSFW  
1
1
Edwin Duterte's profile photo
 
i dont see him at all?
Add a comment...

Knavë No

Shared publicly  - 
 
//I don't know why but i hate online status and my alter ego.
//Now i wish people start playing with this pages

//webgl intro:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>googl3</title>
        <script id="_f" type="x-shader/x-vertex">
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec2 aTexCoord;
varying vec3 vNormal;
varying vec2 vTexCoord;
void main() {
    gl_Position = vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
    vNormal = aNormal;
}
    </script>
 
    <script id="_g" type="x-shader/x-fragment">
precision highp float;
varying vec3 vNormal;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
void main() {
    gl_FragColor = texture2D(uTexture, vTexCoord);
}
    </script>
    
        <script type="text/javascript">
            var t = 'data:image/png;base64,';
            var u =
   "iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA" +
   "/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACA0lEQVR4nO2Z" +
   "QW7DMAwEyaIv6D3H/P9BPfaeL2wPqWxKoWTZVrMKwgECFG4s764pSo4V" +
   "gLwzH2wBbCIAtgA2EQBbAJsIgC2ATQTAFsAmAmALYBMBsAWwiQDYAthE" +
   "AGwBbCIAtgA2EQBbAJuXDUBFhvyc/VkeuF2u1YG/fr51xEXPksyrCCCy" +
   "aFLVrlAArOfY9wIt8xZ2EPbupwB6zS/n/YXwUAEidYO9ATEAoEcqwO0B" +
   "ntGZzScAaM/HnqPlqzFrNFWCd2wZQPLUIXCrRzVvWoAcnkbeFDg8lvdu" +
   "sHa3t8yvooqU1e/YjyG0Stg0rkoAw6aA1wNa5iFQZALX/1nzgKg1nQez" +
   "JV7R+s6eJmi/W90HWMOtrm+N18pfJL/b7fKH+p825dzu/a67CnBRPBre" +
   "X9q9TLQTtOK1MjX2G9zidAWoKFLp15qiyH2+p9KvNcW7wTRGOda2+WFN" +
   "sGuQoumVTXG9WN70yqbojNx5LOdUE7xdriiXvp6Nj9f03GOO0e1G6P3d" +
   "OONgE1z2Ab1r//NId6mysSoehI6yTIGetX8mRpgXqewE56BdAaOYaBnk" +
   "MEEA3hZ337P9uatPMQVqhv+3/EWmqACRo2v/CCZ6FniO4ZJJKoBHBMAW" +
   "wCYCYAtgEwGwBbCJANgC2EQAbAFsIgC2ADYRAFsAmwiALYBNBMAWwObt" +
   "A/gFns/+ItKi4SkAAAAASUVORK5CYII=";
function A(){
        // our WebGL rendering context, it might be useful to use a global variable for this
        var gl = null;
 
        // grab the canvas object and its dimensions
        var a = document.getElementById("_c");
 
        // request rendering context from the canvas
        var b = [ "webgl", "experimental-webgl", "moz-webgl", "webkit-3d" ];
            for (var c=0; c<b.length; c++) {
                try {
                    gl = a.getContext(b[c]);
                    if (gl) { break; }
                     } catch (e) { }
                    }
         if (!gl)   {
                     alert("No known OpenGL context detected! Is it enabled?");
                     return;
                    }
//load texture
B();
function B() {
    // preparations
    var d = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, d);
    var e = new Image();

    // register event handlers
    e.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, d);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, e);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.generateMipmap(gl.TEXTURE_2D);
        //here instead of at end.
        gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
    }
    e.onerror = function() {
        alert("error while loading image '" + t + "'....");
    }

    //request image from vars
    e.src = t + u;

    // return texture object (asynchronous loading, texture NOT available yet!)
    return d;
}

//function to read scripts from the DocumentObjectModel to a variable
function C(id) {
    var f = document.getElementById(id);
    if (!f) { return null; }
 
    var h = "";
    var g = f.firstChild;
    while (g) {
        // node is a "textnode" ?
        // see: http://de.selfhtml.org/javascript/objekte/node.htm#node_type         if (g.nodeType == 3) {
            h += g.textContent;
        }
        g = g.nextSibling;
    }
    return h;
}

//loading vertex n fragment shader to strings from script         
var i = C("_f");
var j = C("_g");
    //load'em to vars
    var k = loadShader(gl.VERTEX_SHADER, i);
    var l = loadShader(gl.FRAGMENT_SHADER, j);

//load n compile shader
function loadShader(shaderType, shaderSource) {
var m = gl.createShader(shaderType);
if (!m) { return null; }    
gl.shaderSource(m, shaderSource);
gl.compileShader(m);
if (!gl.getShaderParameter(m, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(m));
return null;
}    
return m;
}

//create program n attach shaders
var n = gl.createProgram();
gl.attachShader(n, k);
gl.attachShader(n, l);
 
//set attributes
gl.bindAttribLocation(n, 0, "aPosition");
gl.bindAttribLocation(n, 1, "aNormal");
gl.bindAttribLocation(n, 2, "aTexCoord");
 
//link program with context
gl.linkProgram(n);
if (!gl.getProgramParameter(n, gl.LINK_STATUS)) {
    alert(gl.getProgramInfoLog(n));
}
 
//setup uniforms
gl.useProgram(n);
gl.uniform1i(gl.getUniformLocation(n, "uTexture"), 0);
         
//define vertex-data
var o = [
    // position XYZ,    normal XYZ,         texcoord UV => 8 floats per vertex
    -1,  1,  0.0,       0.6,  0.0,  0.8,    0.0,  0.0,
     1,  1,  0.0,       0.6,  0.0,  0.8,    1.0,  0.0,
    -1, -1,  0.0,       0.0,  0.0,  1.0,    0.0,  1.0,
     1, -1,  0.0,       0.0,  0.6,  0.8,    1.0,  1.0
];
// we need also some indices because of this annoying Firefox-Bug:
// https://bugzilla.mozilla.org/show_bug.cgi?id=521667
var p = [
   0, 1, 2, 2, 1, 3
];
// create Vertices Buffer Object = q & Indices BO = r
var q = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, q);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(o), gl.STATIC_DRAW);
var r = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, r);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(p), gl.STATIC_DRAW);
 
// ...down functions gives u info via console log
//console monovers
var c0 = gl.getSupportedExtensions();
var c1 = gl.getShaderInfoLog(l);
var c2 = gl.getShaderInfoLog(k);
var c3 = gl.getProgramParameter(n, gl.ATTACHED_SHADERS);
var c4 = gl.getProgramParameter(n, gl.LINK_STATUS);
var c5 = gl.getShaderParameter(k, gl.COMPILE_STATUS);
var c6 = gl.getShaderParameter(l, gl.COMPILE_STATUS);
console.log(gl);
console.log(c0);
console.log(c1 + "   <-- fshader er if any");
console.log(c2 + "   <-- vshader er if any");
console.log(c3 + "   <-- if i'm a (2), means shaders are loaded");
console.log(c4 + "   <-- i'm shaders program LINK STATUS");
console.log(c5 + "   <-- i'm Fshader COMPILE STATUS");
console.log(c6 + "   <-- i'm Vshader COMPILE STATUS");  
 
// setup interleaved VBO and IBO
gl.bindBuffer(gl.ARRAY_BUFFER, q);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, r);
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 8*4, 0*4); // position X  Y  Z
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 8*4, 3*4); // normal   X' Y' Z'
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8*4, 6*4); // texcoord   U  V
 
// draw the buffer...fun in line 202 is inside B() because we need load the texture first
// gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
};
   </script>
</head>
<body onload="A()">
    <div style="text-align: center">
        <canvas id="_c" width="640" height="480"></canvas>
        <div style="height:24px;width:100%">
            <table width="100%"><tr><td><input id="_0" type="checkbox" checked="checked" />Pages</td><td><input id="_1" type="checkbox" />Files</td><td><input id="_2" type="checkbox" />Text</td><td><input id="_3" type="checkbox" />Snipets</td><td><input id="_4" type="checkbox" />Mail</td><td><input id="_5" type="checkbox" />Lab</td><td><input id="_6" type="checkbox" />Books</td><td><input id="_7" type="checkbox" />News</td><td><input id="_8" type="checkbox" />Open chat rooms</td><td><input id="_9" type="checkbox" />Forums</td><td><input id="_a" type="checkbox" />Other places</td><td><input id="_b" type="checkbox" />Cache</td></tr></table>
        </div>
        <div style="height:24px;width:100%">
            <input id="_d" style="border:solid 1px #666;height:100%;width:87%" type="text" />
            <input id="_e" style="height:100%;width:11%" type="button" value="53ARch" />
        </div>
    </div>
</body>
</html>

//a bit more:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Apipetoip</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#AA, #AB, #AC {border:1px solid #f00;}
#AA {}
#AB {background-color:#000;}
#AC {}
table {width:100%;}
</style>
    <!-webgl content->
    <script language="jscript">
//            var y = 'data:image/png;base64,'; //To LOAD TEXTURE u need change shaders, bufers, vertices, indices, program, etc..
//            var z =
//   "iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA" +
//   "7EAAAOxAGVKw4bAAAB40lEQVR4nO2aMW7CQBBF/0ZpaWhSURFfgTukIBIH4HQ5ABIpcgeuAKmo0rjhAJOC" +
//   "TLK73sVrcPJjmCchocWCP2/HY0vGiQhumTt2ADYmgB2AjQlgB2BjAtgB2JgAdgA2JoAdgI0JYAdgYwLYAd" +
//   "iYAHYANiaAHYCNCWAHYGMC2AHY3LMD+LiXDwEAWR4APLq/+M1Bd0A9qaSeVF9PdnaNJzzh52kGLSDkvI65" +
//   "CgGpXW7beaXbDFhtwi9dzNLWDy48biSN4/R8V2T5kPyu6XreKOT9+dUBwHi/dVpoPalkvN86fa/H6loOV/" +
//   "xwNC5eiSXExSuehLj4GB2CqeIVlQDkd7uteKC0A/zitWBdW23ke80vXgvWtYOTVCfozrdJ8Qs+shM97/1O" +
//   "UEqKB7rOAH+3c+0PhC2fKFrx2z53CijT9Vz0dVwJh55fcGnxwECH4FHCWy9/bPhXN0I5/Pb/6YCnXm6Uun" +
//   "WAPwtyQxEIZ0FuKHbg1DC8lLIOWMxcMPTiz5SRuGDo+ZyYBSX8loTyDkgNvdRaqtALi4+vAM0rwvmU3wdc" +
//   "KYO8CvSJCWAHYGMC2AHYmAB2ADYmgB2AjQlgB2BjAtgB2JgAdgA2JoAdgI0JYAdgYwLYAdiYAHYANiaAHY" +
//   "DNzQv4BKOroRG6GqowAAAAAElFTkSuQmCC";

//starting when page end loading
function C() {
//    function A() {
//        // preparations
//        var g = gl.createTexture();
//        gl.bindTexture(gl.TEXTURE_2D, g);
//        var h = new Image();
//
//        // register event handlers
//        h.onload = function() {
//            gl.bindTexture(gl.TEXTURE_2D, g);
//            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, h);
//            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
//            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
//            gl.generateMipmap(gl.TEXTURE_2D);
//            //here instead of at end.
//            gl.drawArrays(gl.TRIANGLES, 0, 24);
//        }
//        h.onerror = function() {
//            alert("error while loading image '" + h.src + "'.");
//        }
//
//        //request image from vars
//        h.src = y + z;
//
//        // return texture object (asynchronous loading, texture NOT available yet!)
//        return g;
//    };

//canvas locate n to variable
var a = document.getElementById("AA");

//give context
var gl = a.getContext("webgl") || a.getContext("experimental-webgl") || a.getContext("moz-webgl") || a.getContext("webkit-3d");
if (gl) {
    //adjust color n clear function
    gl.clearColor(0, 0, 0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
//    A(); //Previuosly commented
    //vertex shader
    var d = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(d, [
        'attribute vec2 position;',
        'attribute vec3 vcolor;',
        'varying vec3 fcolor;',
        ' void main() {',
        '  fcolor = vcolor;',
        '  gl_Position = vec4(position, 0.0, 1.0);',
        '}',
        ].join('\n'));
    gl.compileShader(d);

    //fragment shader
    var e = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(e, [
        'precision highp float;',
        'uniform vec4 color;',
        'varying vec3 fcolor;',
        ' void main() {',
        '  gl_FragColor = vec4(fcolor, 1);',
        '}',
        ].join('\n'));
    gl.compileShader(e);

    //program
    var f = gl.createProgram();
    gl.attachShader(f, d);
    gl.attachShader(f, e);
    gl.linkProgram(f);

    //console monovers
    //NOTE: this verbose is only working for first script.
    var c0 = gl.getSupportedExtensions();
    var c1 = gl.getShaderInfoLog(e);
    var c2 = gl.getShaderInfoLog(d);
    var c3 = gl.getProgramParameter(f, gl.ATTACHED_SHADERS);
    var c4 = gl.getProgramParameter(f, gl.LINK_STATUS);
    var c5 = gl.getShaderParameter(e, gl.COMPILE_STATUS);
    var c6 = gl.getShaderParameter(d, gl.COMPILE_STATUS);
                console.log(gl);
                console.log(c0);
                console.log(c1 + "   <-[canvas id AA]-- fshader er if any");
                console.log(c2 + "   <-[canvas id AA]-- vshader er if any");
                console.log(c3 + "   <-[canvas id AA]-- if i'm a (2), means shaders are loaded");
                console.log(c4 + "   <-[canvas id AA]-- i'm shaders program LINK STATUS");
                console.log(c5 + "   <-[canvas id AA]-- i'm Fshader COMPILE STATUS");
                console.log(c6 + "   <-[canvas id AA]-- i'm Vshader COMPILE STATUS");
         
    //Vertices for 8 triangles
    var b = new Float32Array([
    //list of 8 triangles n vertex color
    //X n Y    +    R, G, B components
    0, 0,           1, 0, 0,
    0, 0.18,        0, 0, 1,
    0.09, 0.09,     0, 1, 0,

    0, 0,           1, 0, 0,
    0.09, 0.09,     0, 1, 0,
    0.18, 0,        0, 0, 1,

    0, 0,           1, 0, 0,
    0.50, 0,        0, 1, 0,
    1, -0.52,       0, 0, 1,

    0, 0,           1, 0, 0,
    0.52, -1,       0, 1, 0,
    0, -0.5,        0, 0, 1,

    0, 0,           1, 0, 0,
    -0.52, -1,      0, 1, 0,
    0, -0.5,        0, 0, 1,

    0, 0,           1, 0, 0,
    -1, -0.52,      0, 1, 0,
    -0.5, 0,        0, 0, 1,

    0, 0,           1, 0, 0,
    -1, 0.52,       0, 1, 0,
    -0.5, 0,        0, 0, 1,

    0, 0,           1, 0, 0,
    0, 0.50,        0, 1, 0,
    -0.52, 1,       0, 0, 1
    ]);

    //buffer
    var c = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, c);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(b), gl.STATIC_DRAW);
            
    //initprogram
    gl.useProgram(f);
    //f.color = gl.getUniformLocation(f, "color");
    //gl.uniform4fv(f.color, [0, 1, 1, 1.0]);

    //def position n color
    f.position = gl.getAttribLocation(f, "position");
    f.color = gl.getAttribLocation(f, "vcolor");
    gl.enableVertexAttribArray(f.position);
    gl.enableVertexAttribArray(f.color);
    //gl.vertexAttribPointer(program.attrib, n attrib elements, type of element, false, size of vertex, offset)
    gl.vertexAttribPointer(f.position, 2, gl.FLOAT, false, 5 * Float32Array.BYTES_PER_ELEMENT, 0);
    gl.vertexAttribPointer(f.color, 3, gl.FLOAT, false, 5 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

    //draw array of vertices (Triangles, skip, amount)
    gl.drawArrays(gl.TRIANGLES, 0, 24);
    //
    }
    else {
            console.log('Sorry, this browser isnt working as expected.');
        };
};
    </script></head>
<body onload="C()">
<table>
<tr>
<td>
<canvas id="AB" width="320" height="240">
    <script>
    var a = document.getElementById('AB');
    var b = a.getContext('2d');
    b.font = '23pt Calibri';
    b.fillStyle = 'lime';
    b.fillText('Welcome to WebGL', 19, 24);
    b.font = '16pt Calibri';
    b.fillStyle = 'green';
    b.fillText('-This box is 2d context', 19, 58);
    b.fillText('-Right box is webgl context -->', 19, 82);
    b.fillText('-Open jsconsole to see log', 19, 106);
    b.fillText('-Down box is experimental-webgl..', 19, 130);
    b.fillText(' ..context with 3 dots', 19, 154);
    b.lineWidth = 2;
    b.strokeStyle = 'lime'
    b.moveTo(14, 32);
    b.lineTo(282, 32);
    b.stroke();
    b.moveTo(14, 32);
    b.lineTo(14, 154);
    b.stroke();
    b.moveTo(14, 192);
    b.quadraticCurveTo(0, 232, 306, 173);
    b.stroke();
    b.moveTo(14, 173);
    b.quadraticCurveTo(0, 232, 306, 173);
    b.stroke();
    b.moveTo(14, 154);
    b.quadraticCurveTo(0, 232, 306, 173);
    b.stroke();
    </script>
</canvas>
</td>
<td rowspan="2">
<canvas id="AA" width="640" height="480">Xcu53 moi, Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.</canvas>
</td>
</tr>
<tr>
<td>
<canvas id="AC" width="320" height="240">
    <script>

    //Canvas create
    var a = document.getElementById('AC');
    gl = a.getContext('experimental-webgl');

    //Geometry
    /* vertices */
    var b = [
             // X     Y      Z coords of vertices
              -0.5, -0.5,   0.0,
              0.5,  -0.5,   0.0,
              0,    0.5,    0.0,
              ];

    //Buffer
    var c = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, c);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(b), gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    //Vertex shader code
    var d =
            'attribute vec3 i;' +

            'void main(void) {' +
               ' gl_Position = vec4(i, 1.0);' +
               'gl_PointSize = 7.0;' +
            '}';

        //vertex shader object
        var e = gl.createShader(gl.VERTEX_SHADER);

        //add Vshader code
        gl.shaderSource(e, d);

        //compile Vshader
        gl.compileShader(e);

    //Fragment shader code
    var f =
            'void main(void) {' +
               ' gl_FragColor = vec4(0.0, 1.0, 0.0, 0.7);' +
            '}';

        //fragment shader object
        var g = gl.createShader(gl.FRAGMENT_SHADER);

        //add Fshader code
        gl.shaderSource(g, f);

        //compile Fshader
        gl.compileShader(g);

        //Program
        var h = gl.createProgram();

        //add  Vshader
        gl.attachShader(h, e);

        //add Fshader
        gl.attachShader(h, g);

        //link'em
        gl.linkProgram(h);

        //use'em in H api
        gl.useProgram(h);

        //console monovers
        //NOTE: this verbose is only working for second script.
        //var c0 = gl.getSupportedExtensions(); //1 call is enought
        var c1 = gl.getShaderInfoLog(g);
        var c2 = gl.getShaderInfoLog(e);
        var c3 = gl.getProgramParameter(h, gl.ATTACHED_SHADERS);
        var c4 = gl.getProgramParameter(h, gl.LINK_STATUS);
        var c5 = gl.getShaderParameter(g, gl.COMPILE_STATUS);
        var c6 = gl.getShaderParameter(e, gl.COMPILE_STATUS);
        //console.log(gl); //1 call is enought
        //console.log(c0); //1 call is enought
        console.log(c1 + "   <-[canvas id AC]-- fshader er if any");
        console.log(c2 + "   <-[canvas id AC]-- vshader er if any");
        console.log(c3 + "   <-[canvas id AC]-- if i'm a (2), means shaders are loaded");
        console.log(c4 + "   <-[canvas id AC]-- i'm shaders program LINK STATUS");
        console.log(c5 + "   <-[canvas id AC]-- i'm Fshader COMPILE STATUS");
        console.log(c6 + "   <-[canvas id AC]-- i'm Vshader COMPILE STATUS");

    //Bind vertex buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, c);

    //Get the attribute location
    var j = gl.getAttribLocation(h, "i");

    //Point an attribute to the currently bound VBO
    gl.vertexAttribPointer(j, 3, gl.FLOAT, false, 0, 0);

    //Enable the attribute
    gl.enableVertexAttribArray(j);

    //Clear the canvas
    gl.clearColor(0, 0, 0, 1);

    //Enable the depth test
    gl.enable(gl.DEPTH_TEST);

    //Clear the color buffer bit
    gl.clear(gl.COLOR_BUFFER_BIT);

    //Set the view port
    gl.viewport(0, 0, a.width, a.height);

    //Draw the 3 points
    gl.drawArrays(gl.POINTS, 0, 3);

    </script>
</canvas>
</td>
</tr>
</table>
</body></html>

playing with THREE.js:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Dot, cube, sphere n line</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        canvas{border:solid 1px #fff;}
        body{background-color:#fff;}
    </style>
    <!-Note: ./ = same folder, ../ = upper one, ../f/ = folder (f) in upper directory->
    <!--if u want test this page u'll need doownload and ubicate next scripts('available in GitHUB')
     in correct folder according/relative to where you saved this page-->
    <!-External scripts->
    <script id="THREEjs=WebGLHelper_by_Mr_doob" src="../three.min.js" type="text/javascript"></script>
    <script id="Projector_by_Supereggbert" src="../Projector.js" type="text/javascript"></script>
    <script id="kb" src="../THREEx.KeyboardState.js" type="text/javascript"></script>
    <script id="MouseCamControl_by_Mr_Flint" src="../OrbitControls.js" type="text/javascript"></script>
    <!-External fonts->
<!--<script src="../f/helvetiker_bold.js"></script>
    <script src="../f/helvetiker_bold_italic.js"></script>
    <script src="../f/helvetiker_italic.js"></script>
    <script src="../f/helvetiker_regular.js"></script>
    <script src="../f/gentilis_bold.js"></script>
    <script src="../f/gentilis_regular.js"></script> -->
    <!-stats->
    <script id="Stats function">
        // stats.js - http://github.com/mrdoob/stats.js
        var Stats = function() {
            function f(a, e, b) { a = document.createElement(a); a.id = e; a.style.cssText = b; return a } function l(a, e, b) {
                var c = f("div", a, "padding:0 0 3px 3px;text-align:left;background:" + b), d = f("div", a + "Text", "font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px;color:" + e); d.innerHTML = a.toUpperCase(); c.appendChild(d); a = f("div", a + "Graph", "width:74px;height:30px;background:" + e); c.appendChild(a); for (e = 0; 74 > e; e++) a.appendChild(f("span", "", "width:1px;height:30px;float:left;opacity:0.9;background:" +
b)); return c
            } function m(a) { for (var b = c.children, d = 0; d < b.length; d++) b[d].style.display = d === a ? "block" : "none"; n = a } function p(a, b) { a.appendChild(a.firstChild).style.height = Math.min(30, 30 - 30 * b) + "px" } var q = self.performance && self.performance.now ? self.performance.now.bind(performance) : Date.now, k = q(), r = k, t = 0, n = 0, c = f("div", "stats", "width:80px;opacity:0.9;cursor:pointer"); c.addEventListener("mousedown", function(a) { a.preventDefault(); m(++n % c.children.length) }, !1); var d = 0, u = Infinity, v = 0, b = l("fps", "#0ff", "#002"),
A = b.children[0], B = b.children[1]; c.appendChild(b); var g = 0, w = Infinity, x = 0, b = l("ms", "#0f0", "#020"), C = b.children[0], D = b.children[1]; c.appendChild(b); if (self.performance && self.performance.memory) { var h = 0, y = Infinity, z = 0, b = l("mb", "#f08", "#201"), E = b.children[0], F = b.children[1]; c.appendChild(b) } m(n); return { REVISION: 14, domElement: c, setMode: m, begin: function() { k = q() }, end: function() {
    var a = q(); g = a - k; w = Math.min(w, g); x = Math.max(x, g); C.textContent = (g | 0) + " MS (" + (w | 0) + "-" + (x | 0) + ")"; p(D, g / 200); t++; if (a > r + 1E3 && (d = Math.round(1E3 *
t / (a - r)), u = Math.min(u, d), v = Math.max(v, d), A.textContent = d + " FPS (" + u + "-" + v + ")", p(B, d / 100), r = a, t = 0, void 0 !== h)) { var b = performance.memory.usedJSHeapSize, c = performance.memory.jsHeapSizeLimit; h = Math.round(9.54E-7 * b); y = Math.min(y, h); z = Math.max(z, h); E.textContent = h + " MB (" + y + "-" + z + ")"; p(F, b / c) } return a
}, update: function() { k = this.end() } }
        }; "object" === typeof module && (module.exports = Stats);
    </script>
    <script>
    //Note all images're 64x32 px ecxept 1 st 64 64px, the 1 st's smaller string cause almost all image is transparent, in the other cases zero transparency:       
        var t = 'data:image/png;base64,';
        var u =
   "iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA" +
   "/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACA0lEQVR4nO2Z" +
   "QW7DMAwEyaIv6D3H/P9BPfaeL2wPqWxKoWTZVrMKwgECFG4s764pSo4V" +
   "gLwzH2wBbCIAtgA2EQBbAJsIgC2ATQTAFsAmAmALYBMBsAWwiQDYAthE" +
   "AGwBbCIAtgA2EQBbAJuXDUBFhvyc/VkeuF2u1YG/fr51xEXPksyrCCCy" +
   "aFLVrlAArOfY9wIt8xZ2EPbupwB6zS/n/YXwUAEidYO9ATEAoEcqwO0B" +
   "ntGZzScAaM/HnqPlqzFrNFWCd2wZQPLUIXCrRzVvWoAcnkbeFDg8lvdu" +
   "sHa3t8yvooqU1e/YjyG0Stg0rkoAw6aA1wNa5iFQZALX/1nzgKg1nQez" +
   "JV7R+s6eJmi/W90HWMOtrm+N18pfJL/b7fKH+p825dzu/a67CnBRPBre" +
   "X9q9TLQTtOK1MjX2G9zidAWoKFLp15qiyH2+p9KvNcW7wTRGOda2+WFN" +
   "sGuQoumVTXG9WN70yqbojNx5LOdUE7xdriiXvp6Nj9f03GOO0e1G6P3d" +
   "OONgE1z2Ab1r//NId6mysSoehI6yTIGetX8mRpgXqewE56BdAaOYaBnk" +
   "MEEA3hZ337P9uatPMQVqhv+3/EWmqACRo2v/CCZ6FniO4ZJJKoBHBMAW" +
   "wCYCYAtgEwGwBbCJANgC2EQAbAFsIgC2ADYRAFsAmwiALYBNBMAWwObt" +
   "A/gFns/+ItKi4SkAAAAASUVORK5CYII=";
        var ea =
   "iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgA" +
   "ABUmSURBVGhDTVlrjFzleX7Obe7X3Zm9eq+212tsY3zBEJPicAsQNRGJS9oGlLaQ/kgh6o80lVqq1pUSNVKjqAqRIlVqSlKliUqaQJtCTTBXGYIh" +
   "trGNb2t713ud3dnL3C9n5pzT5/3OLOpY65kz853ve6/P+7zv0c6cueqFghY0z4OmAx7fTdOAbpgANLQdB61WCwHLgsPPActQ17btwNR1mFaQ6+VG" +
   "Fy43cFo2uBM0jX/cy9AN7qtxL774HuTe/IVr5B/feZ+8HE/jmTos7q/ze8d1/d88/sbPag9+1ngmt+ZvOnSTH/ib68gPoFxtlKs1tNuektU0TViU" +
   "rcXrtiO3KwX5e4vvDgzDgfb+qQue59jozqaRjEfQclwKQcXMgBIxHgspJTbWC9AMDfVaGY7dVu8tblLJL6O7tw/VWk0pn4xGkOkbwez8Khq1Fgp2" +
   "HS6VCxsBvHX6I7x08gOM9nRjKb+K/Tu3Ixw2Uao0EY9Q2GCQelBI6p0vFZVCtt3EaqnC+z1EuffOLVuUPPP8znPFEg5S0TBioQgifB8fGkYsHKbC" +
   "Lu3tUifqQWc6bZe6ROCJ9bh/22lDt0xoczcXva50HPVSCUtrZQQC/JKLXFq2XNzA0noZ8xR2ItrC4EAPmh4jQ7MwNz2FIo0wP30JXQND+O+za1hY" +
   "Xsbdu7ajf3QMTz12FDr3ajVtFSGREO+j4Pc//hc48dqbQCIBNBvienEr+nri2Cg30azSVTY9FKAhxOu8J5UOUmkTa2V+b1f558CKRtFl1pCOMlq0" +
   "Nh2rqTWTOw5iqDeDmm1jNldFdzSJ3riJJqPhlokJdMVoLBpC9r597x5oC5ff8X584ireff8MDgwEkQ4BRiSMC/MzmFuzsZZbRo3e3bFlBLv743Ab" +
   "dcR7tmDr1kkUlq7CDOtYmF3GfMVAJB5CfzqD7/7iHdy5qx/PPfss2jRmPB7GjRs38cPnX8K3/uXnMKMWkuEAQ5ehzd83ajYMK4Gn7h1ENT+Hyxs6" +
   "ig0Xs0VThelIosVUa0F3GfZGEAG3DNOroT/lYbS/B6W6g3y5xsgNYXGlQIO6jJYEGrZHW9YRg4GbhQK6Ul1cYyIY7UObxn/04U9B2/rA73lBOqHW" +
   "rOC+YS6KxTA2OECrR7C4uoJK3aQBmri0WEXQbWNiJIsAGowQG5WCjjUksVghbgRDGIm0sXPHTnzn1SuYu3AW3uI5rKyuYe8jf8pQdrFOz/71I3fh" +
   "7aklnLo6hxBTqsVI2z0+jK99MoTjp6+j3qyiJxzFXFWH25pDF71XKVeRicdhN5vIN2wKL1HlIZNMon+gG0QmnlOhsXRsrC2iQScNDY1gMJPB5Mg4" +
   "UgENMytTjKAynZRFu0UDuhW89mELWuwTRz1YAYQYRvsyG+jvG8Q7MzpCpoUH941jT3qDnnJwIXcZsSCYKjZ6e5IIMN+fPWlgKi/h5OIvDxQRDQTw" +
   "/M0QForEhmodLabQ+Eg/bqxVkIpHFShWmi3lhXgowPUeWojid/dvQXT9BXznnb347LYVRKwGWsF1mAbzVPcQ1IPEgCSuzeeUki4RTXcMKk5Yi1lo" +
   "N9qMhjjXGJjYOoGVSgVWSEOpWML24QG8eIZpo4fpBE9FM5MGV/MBZhIjMHP3o8QF5g9vbjgaBbdh6ZJTHhoUdigbxdNHRjDcF0HeyUFr1jG/XMTC" +
   "WhHbe2go28I/n43iq4cdTI4PImK28d60hu++XoNdrxONPQKdRcAipCqw5vHM60NDbTTtIq6thZDV8ujtTiFJTz0wWEOu3ca5VYYy2tBsqTIehga7" +
   "UK9WGakacstMB5pu764tyMT60WwDc6vr6O4aR1/CRtVtYm19HQOpIH59oYETVw2UnSBGU23cu62G594LICmpTlwwIsO7jomHHQpI6EOI4CNVIEhv" +
   "RiMBrNY1TBebSHt5pJJdyEaySFoRBo2DGsvQh2sR7OkrYGwshWvLK/jeG2V6IMGKYaBiGzSmX8oEzOhOhdpSFKcKYUZFAE/cWcDhrVn0dAdxoLeF" +
   "YCaL597OYX4tiE8NxfHL6SwiegR7EyYSDr0ciSLO0B8d6MNtY5O4Y2QMI329TPsAhjI0md0g0hexvjzLtQ0s1xJIMBo2GqZgJ87OEn957ZdpF0Z4" +
   "dPcxjWGlsz4LGku91YQQyAK+S13eqFVx9LYMtvcNIzPYz3JlIB6to9bOMx+JzJEMczeP4x/FsLAew/RqC9UG66yiB1LDaWmWVZ0GEDO3aOzbt9j4" +
   "4zsTOH4+gP+6FoChhbHeDLK0aujt6kEquxVfPLKdxk/g8pKJBzK2ui8UTxPMMtg/mER9YZmVJgav3kAP02m8m4ZnbFxcqCNE3nJ8oQunmc62a6FO" +
   "eTSmeYDOVTryT0qiEd++75iiKbwQAVWQCtlQ3wEmvy+3TKK7joeHYmhF0tACLWxUFnDp2iLrfo0VZR0nr2Tw4WKGnwmIrNmiKk2sCJVGjJE9PV5r" +
   "QnDICVjxMJTS0N/TiyFygX87C7w308RvV0OotC18+VAUSbeOp47ux9T0Im6fSCCcSWLiwAHcceuDSBIbtkzuQzLbi0AsACthIb9RwPzSPJ6/ZOHc" +
   "RgwhBHHrkIPz86IecUP0MoT08Zrhr9NIRnxi/zFd6q14X0WATm/QEHSfRuF1hm44aOKtaQ+L1SYOpUtcZ+D81EeYmiPqulks5UycXN6BpFlSNd/f" +
   "Twxp0UMkN8IyeS3RYBAA80T4p++O4OufvQO7t/bg4CBwf7YBK9WNP9rWxvW8jUf2ZtFl2PirZ9/FD//hccxcvYL9u7bizJlz+M/XX8bO3YeRYHld" +
   "LBThJqI49855LJfyaJYbCJhNvLjUB81p4vxykBjdpCxkmAR23/MUjxWImkLr+8yTnigqDiMlVNZR6NqJAEVbJRxIPSttHQf7gL95KI5fXHDxg1P8" +
   "jcB5+0ARcyWWiFaF5VHMy83FALSy3Oe0KYAEJzddKgPf+9wQHp0MYLrCNKFBouEYUt0a1sgnIqwOM8sVvHK5gSfuGeC9VXzppyU8uC2KXG4JX7g1" +
   "jfn5S4w8C/FED6ZW8xgc7kVv/wCqN2eQs0p47vwYLtxosCo0qKJgD8kfWaVG5YQwqZfQbHF2fPLQMeUt+UeBTXpe0XOFBcLb/bCRiCAc4GbVRJVU" +
   "eDBtImIQveM2IyOGobSEdhCNtlQUP5KkvAqwyt4k5Qjyurjm4aWvjmDBTCJIwhWPmghE43CCXShUC0gPDaHbKeH4JaZWMIbDkwkc7AZ+da2N/7ik" +
   "4exqAxPZOlLhIP7pPIG3EcbhTAEbhQpeXNiCH3zAfVkmyxXyFoK0YI5Bii1KCRbpBGcBZAl/nfIYiVsOEQOotIStNBaisOSKajqohDQ6nWvh4LLp" +
   "1JqB2YKLnriL0XQRF9czWCm2kQiTJ3ist6TLmstmhIDjI78EhTQ7BopmDJP2OTiVMjQSllohR7S2sDS/Dssuk7snsHh9FiOZIN64YaMciOObbxXx" +
   "9kyJZQ24QVR/5hPA374Xw7lSFJVWCBt1Hb/TW8YvZ+NYoIH2DYVRaHoqGsWpEv6Sfsqp4nUBfAkCcfzA5/9MNV1qobQ/rNuqYZCOQTwnSKmu/NDx" +
   "kVyQlSSmpWMgSWZGQx3ZYmE0soBQLIWT82mFGZZXUhiiDlNhpYEsAz1WGf94VxPFEgkTyUkqzCbLZmtQb5Nv9OL65WvYcXgXol4UhBAceDaH4YEw" +
   "FXJY403c2u2xMtWw3IhQGQu9aQtZkqcz+RBCuoMk7xmLt/Hm9SrSZG8iu3AQdmt+pyoOZbo7QoQGPv81ch6/JTVY+/0oEBXFHCKyb0nFwKT7Ivrq" +
   "khoKMNlaugZyVOSFr6Rx5aOTQJC1OthCNw36B8fvRMSdU4wvFGAaUQGXdLrh6BSSVIZCFO0A7upr4qHReZQK5O1JF5O9e2CxElg3p/DnN4cxU7QR" +
   "JxArqShHk2kW8GxilfRlITx+Sw2vL6awslHFK49tYMf3s9iaIdFiB5iraiBckEsQ32gsQxq9tq0c6TBVjNiOA8QAIrcoSov4pvLnAvK5c+mbgobS" +
   "uVbCSX4XwKy1HBwhCeqqv4xXTt2ExqiYubmBy4uzuLvvGrZ09zIlQuThDZ7hkyKZKTTYo7st2c9DtelgODKHiWQ/0qkYVqMxcvU6njyVxlKJqRXy" +
   "00gcowgM0V2iVFdstY21qotd6TqyLM+nL1Vx+/4hXFxk39ITwJO7GkxFE0uNEKJklE3xtVJR/lPnS2gT9+lVeQkrZLdAJWWCIKfyDkaAS3oqCvOT" +
   "MoTLfloGC5bbwvvTeYyOHqDF65jOL8CJ1GGQlERjHp45VMUzR3QSkTYtbvs8gPsIk5foCngNXCtESbOzqq9v1qIIlescbBQ4d+D+1F0NRySV5Hyh" +
   "1HJNeSQlwqTtU6vAu/M6lkjLf14aw/Gzq+yy2/iARnjhoob7hprYwVStkbTJXEFFNeWXyNY1GQrIpjLJ4aYSpiq8JeflIBrEFQQVfJCIkGuu8xgt" +
   "8tng+kqtjv+93oevHH0MAz097Nxi6I4ksXd0ArlGEt8+sa68r6vpDY3Nw9WIhumgzmwUKeQWVGRCQ4WElgdMhjjXfvk2hvE62WaLzInnu0J1lZxs" +
   "lCiVw89xk8SsVMel+Sac4qoCwIdG2nh66BorFHB6to6T7E/k7FqtwQji/XR4SCZfYk2HUxePtZoxKebmwS1+ZBSIsMIN5FopTavJ96ypEiVqHf9S" +
   "IQPPvTaF6fo2fO7w/aitsofvCrF7NHAxv4HzpLIxdnYelRYMkD3kPk/2UqlGBHRjGGQ57AqlkGbL+6PfhJC2HNw7SUMTIaWqqLP5rv4og0N5RCaH" +
   "ww+TTE8UHO8y8PSuJr75SQu/vy+LYztyeOa2Onb1NZgqQtJYkYldvElFsK6EoXXlZl9piQR5l+9p7Y7HJdzE8psCSF3VJQpEfq6lRBybraNdYKgx" +
   "b/siMfz7GRPPnIhQeRpY9mV3J4aUKBMF1Dn0dlBv4ieXWzg4MkLA1DFd8nBmUdK0jW+/wlFWmH1AgzMI8X4Hf+Q+auAbUrCB3xcrOr51Rw0P79Gx" +
   "yHEcsx/jmThev1zB392zRAM30Ki32LfwPhrN5p6606gqL4hg4h2HRpBcVVEhVudClf9UwGWa0Oz8XrxHowlO8L3Ne+IhlqOIi2Z+Bdt6UyhereNn" +
   "Zy2EOHgwOaEhCaY+gidUnMq7NIYI3ubnpOnif07O4PrSBlp00UvLOrvQNlbLbVyeb3BwIqknBqMMNIKkrBjHr170qhrGSjqW8dMrbIfZZp+8MktQ" +
   "nmOZdXg/Z4xr6whqTBGSOHGGgjZGpNZ95IvkQMLXOi/l0s5nwUVSWUHeze6wg5QdrqDKhRp6Cjh+41AEva0VnPMs/OhyN7xqSbFHoZ8fT3M73MIP" +
   "HcEVRgR/V1NhEpUqFXFIuVMR4SP+hFjBkYCz4iebTZsPiNLSfjxZ5nqL8wiP9+eLJAOcL4ylK3hyuITW+AD+/sfsGgdYfh3OA6JCbmUgcs+XeL8I" +
   "IRsp6Pt4Q//Cbx3VzFyRCOH/vrn8MTojUUCLA9B/faQPL/xmGT8jIqNVVXPNzo7+PEAZ0jeoYmaqxnbKLj/JCF7YJvsUHissknyj06NIBChHdNp1" +
   "wXIlQ0dedaVkEex2yVglNV32LwYSpO1V9h1BbiYAm+IUqb87gDrbaN3PdYa05KYCFQEmUdBHbBlgqJKoOEKnAkgKCCAyJNU7/zIBAU9OYHL+zF0O" +
   "EwFcKul00F5hCPNe4YDal3sKjvjxyIyVXBaA7GCNwiKGq6C2lCwxjknPCltV+8ha2cevUKK4zp5fhjDC8hwaUUiYzYFOhBxAOZq6COdZ5djuRp4s" +
   "N9w7dkwNLSQCNm2qZleSW+IkP1TF8yrnlfe5XjZTh/t8QeZrefL7XFWEEaVkGdeRuRnsNqUbk8NFcZWAauDSCQJJQDGSBLwCVXpb1opblbHko4Cw" +
   "9KncW8iYlG21rhNFIotiS50JlJyjXkKexLd+GdaIR8RBVDlJNshbtOTBh5nlfjB5BCDBAwEWjwtVjqn67+d6J+D8t07IKfAQskKNyXXYHzTVECUS" +
   "jqjZwOZtQp8delOF/8c4I17xQ9eVgYUyAFWkFTo2UlVIAlG6UZkwSR0z2cXZUg0Ywo4Yn3NKqethdojylEilprIDlWbUCBNUe6sRFX9XG/JsGdak" +
   "bv8MHSbhJYGxmY9SFcSYDDFFBGkyUZ+HbDY1LY6o1cCECSsA55Lacs6Ih48cRm9vFj95+XUKQ24hBhUmKUqz/rY4Hm+zwki+q7mBRAe9FeB7W/UK" +
   "8viND0L4m0WBg5wepfjgpkllq2RyksMFNkJbs11svDjx59mPfvo+jr1X8OtX30Cas8Imx/jRSBBBPvJb5ROtOsfqDZ5XZwWwuX+LkWSxVwmz99G0" +
   "7XfREKKYhImPAyCz4w58lBRT/Luvqws2863CKW+I7Vmb6+7avRM5jp2L/G55tYjD+/bgG3/yKO6+cx8+ef8f4uSH52jdpA+aisLSiCxtiZ4u7Bof" +
   "xchALyKRiJoJSEANZLM81kaOzxEmx8eQTST5fCKL4ZEBjA31gu0CTp+/gVqlhrNXr+LrT3yhE4Z8UMTqLH2c8h83a1FRi6C8+RLHTs/lcfXaDC7e" +
   "YLmdW8AH5y7iFKdL2h1Hn/A2OFYSqw/ykVKa/fjesQFEezJUnGNWemKILWqVFLLCvxAnNjYN8OnDhzC3ssqWtozZ2Rx2bh1GIBRUefzWq2/jtbPn" +
   "MZ1b4VrO4Rk53fEkDu3ehltvmcS+3bsxNswpx/97CbQISxNj1OVhJiNFqHCdD0FqNLJUBKmY4rl0kg1TSZ5XiGX90ii5bcjMkZ2fRFOT9b/JPeRl" +
   "0cEhpoEZDJCdhrFBuvziiTfx4q9ehfbbD296lSKfmMiDigTH3ZzqdHUlyZiIyvIYkJs2hYfTkyYnKp1WghOXGnPLYojyCTIFK9MQYqA6n85m+UQm" +
   "zBAsM1Sb0tCwDQ3SOH3ZFDGCfJzhbDt8Lqj4g5/38r5ZbVXplHInHERoq6r9/kjNZY0XWmUKKPvdmUrdzZxX+M3/1HxHhYSPJ/JJZoDSABWZElIR" +
   "onxGqC2ulQmqOhmZ/9jYYYtq07LBoOygqqwSRvDHn/fJ5mJxP68VWEvhVms5QKK11aCB9xgyeOygveSuKK+GVJ20UDd0Zog+2ZHiI8p0arwcKser" +
   "blgM4h+jhtecRcoTqc6cxW+MhGao/TazYZMr+N/5lUcN+RQoGiQq/wc4QnahLlu/8wAAAABJRU5ErkJggg==";
        var eb =
   "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";
        var ec =
   "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";
        var ed =
   "iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgA" +
   "AA3HSURBVGhDhdkF8FZVEwbwi2KBYouKhIHdY4BioSIWFmKDgYKFYHejCIpgghIGGCh2B9gSKqBgo2J3ImCe7/vtzP7nBZ3xzJy57733nD27zz67" +
   "e859q65du5ajjjqqHH744eXQQw8tnTt3LgcffHA55JBDSqdOncr+++9f9ttvv3LggQfG8y5dukQ3zpi8epb3fpOlH3bYYeWII46INbp37166detW" +
   "jj766Liaqx9wwAFl3333LQcddFCsufPOO5eddtqpbL/99mWPPfaI9b3LtclLvck95phjyrHHHhv9uOOOi96jR4/ofnueY1zNMZ9uVa9evcqJJ55Y" +
   "TjrppLjqPXv2jE5JA11z4pFHHhmGuT/hhBPKaaedFnMY5XrqqaeW448/vs5IAO6zzz5hBMUBzWAGkWv+ueeeW84///xywQUXxO8zzjijnHLKKeWs" +
   "s86a656O5J9++ulxdX/yySfXrcsWentOP538HJc21t5XuYiJlNtrr71Kx44dA20epSiD99577zpDeGvXXXcta6yxRll55ZXL6quvXtZZZ52y3nrr" +
   "lbXWWqusvfbapVWrVmW77bYr7du3L7vsskt4ksHnnHNOeIVMgPjdu3fvMJqyrmeffXa55JJLovft27dcddVVMc87hgM+5wIbMzt06BB6W6tt27Zl" +
   "9913DyckWGSfeeaZBUgYYB4gKoYwAO1QlHFoiB5t2rQJYxjGkwxIBqCuuVtuuWUsziCU22KLLWJxi3lG7o477hjPACKUMIXnjKG8e44AunUZOXDg" +
   "wOgDBgwIFvTv3z+AOO+88wIw4Fx44YWhM3YJGbLT+8DYeOONyzbbbFNat24dco1NpgJGaFQ8uNpqq8UgdCeM4RSDFkMJ2XTTTQMEHvMcomjKG7yD" +
   "wpQznjI8B2WKrLnmmmW55ZYrSy+9dAAGqH79+oUcLDM/QxEDAbHuuuvWAYuFe+65Z7DxoYceKjfccEMZOnRoueaaawI8MhivWw/gZLBllVVWCWbn" +
   "O4ZjGOOxtEJdXqbYpZdeGgZSYttttw0gsMEkHrMQb1x22WXxjAeuuOKKoGZSNwEA0EUXXRSoo//FF19ctt5662AN4MgAmOfuUzZPYxnmWJ8xDCGf" +
   "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" +
   "/gfbBjEKq6VyNAAAAABJRU5ErkJggg==";
        var eh =
   "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";
        var _W, textGeom, Character, x, y, z;
        var keyboard = new THREEx.KeyboardState(); //loading kb compatibility
        var fov = 92;                   //Field of viewer
        var asr = window.innerWidth / window.innerHeight;//Aspect ratio
        var nea = 0.01;                 //Nearest objects to capture with cam
        var far = 1000;                 //Farest     "     "    "      "   "
        var C = new THREE.PerspectiveCamera(fov, asr, nea, far); //Perspective camera with upper 4 parameters
        var R = new THREE.WebGLRenderer(); //Renderer object
        var projector = new THREE.Projector();
        var OR = new THREE.OrbitControls(C, R.domElement);//Cam controled with mouse
        var S = new THREE.Scene();      //Making vars globally for future use in animation
        var D, G, M, Q, R, T, _U, U, V, W, ÿ;/*"   "      "     "     "    "   "  "    " */
        var stats;                      //This is mal-configured(declared 2 times), stands 4 fill...
        var stats = new Stats();        //...upper-right box with info like FPS / MS / MB
        var X = 1.32;                   //Sphere radius
        var w = 44;                     //Cube global var for rotations start point
        
        function A() {                  //Start function
            //Scene
            ///var S = new THREE.Scene();                      //new object containing the scene
            S.fog = new THREE.Fog(0xcce0ff, 500, 10000);    //3 fog parameters for the scene
            
            //Light first Ambient/omnidirectional=40,40,40 then directional=ff,f0,00
            ÿ;
            S.add(new THREE.AmbientLight(0x404040));
            ÿ = new THREE.DirectionalLight(0xfff000);
            ÿ.position.set(0, 1, 1);
            S.add(ÿ);

            //Camera: set position then look at scene position
            C.position.x = -1;
            C.position.y = 1;
            C.position.z = 6.4;
            C.lookAt( S.position );
            S.add(C);
            
            //Render: fit into browser window, add render to documents body, setup stats CSS then add stats to body
            R.setSize(window.innerWidth-52, window.innerHeight-52);
            document.body.appendChild(R.domElement);
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '40px';
            stats.domElement.style.right = '44px';
            stats.domElement.style.zIndex = 100;
            document.body.appendChild(stats.domElement);
            
            //to add text un-comment this bloc and fonts scripts n fix ers if any. This copied section isn't mine.
         /* var materialFront = new THREE.MeshPhongMaterial( { color: 0xff0000, shading: THREE.FlatShading } );
            var materialSide = new THREE.MeshLambertMaterial( { color: 0x000088, shading: THREE.SmoothShading } );
            var materialArray = [ materialFront, materialSide ];
            var text = 'test';
            var textGeom = new THREE.TextGeometry( text , {
                      size: 1,                        // actually the height of the font, in user-space
                      height: 0.2,                    // THICKNESS of the extruded font, in user-space
                      curveSegments: 10,
                      font: "gentilis",                    // name of the font
                      weight: "bold",                    // bold or normal
                      style: "normal",                    // regular, italic or bold
                      bevelThickness: 0.05,
                      bevelSize: 0.05,
                      bevelEnabled: false,
                      material: 0,                    // index in the array of the face
                     extrudeMaterial: 1                // index in the array of the extruded sides
                 });
                 
                 //
                 var textMaterial = new THREE.MeshFaceMaterial(materialArray);
                 var textMesh = new THREE.Mesh(textGeom, textMaterial );
                 
                 //
                 textGeom.computeBoundingBox();
                 textGeom.computeVertexNormals();
                 
                 //
                 S.addToScene(textGeom);
                 
                 // get the width of the string so we can center it on the origin
                 textGeom.computeBoundingBox();
                 var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
                 textMesh.position.set(-0.5 * textWidth, 0, 0 );
                 S.addToScene(textMesh); */

            //particles say stars alike
                //get geometry
                var g = new THREE.Geometry;
                //get 53 random points n push'em to geometry vertices
                for (var k = 0; k < 53; k++) {
                    var h = new THREE.Vector3(Math.random() * 654 - 123, Math.random() * 654 - 123, Math.random() * 654 - 123);
                    g.vertices.push(h);}
                //barly white material with size of 1.3, with geometry n material get the points(particles), then add'em 2 scene                         
                var i = new THREE.ParticleBasicMaterial({ color: 0xefefef, size: 1.3 });
                var j = new THREE.ParticleSystem(g, i);
                S.add(j);

            //geometry n vector of the dot
            G = new THREE.Geometry();
            V = new THREE.Vector3(5, 0, 0);
            //push vector to geometry vertices
            G.vertices.push(V);
            //dot material
            M = new THREE.PointsMaterial({ color: 0xff0000 });
            //dot by geometry n material, position and add to scene
            D = new THREE.Points(G, M);
            D.position.set(0, 1, 1);
            S.add(D);

            //cube
            Q = new THREE.BoxGeometry(0.5, 0.5, 0.5);
            T = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
            U = new THREE.Mesh(Q, T);
            U.position.set(-1, 1, 3);
            U.castShadow = true;
            U.receiveShadow = true;
            U.visible = true;
            //U.rotation.y = 45;
                w ++;
                U.rotation.y = w;
            S.add(U);
            
            //sphere
            _U = new THREE.SphereGeometry(X, 10, 10);
            var _V = new THREE.TextureLoader().load(t+u);
            W = new THREE.MeshBasicMaterial({map: _V, transparent: true, combine: THREE.MixOperations, blending: THREE.AdditiveBlending, emissive: 0x0000ff });
            Z = new THREE.Mesh(_U, W);
            Z.castShadow = true;
            Z.receiveShadow = true;
            Z.visible = true;
            Z.position.set(0.5, 1, 2.5);
            S.add(Z);

            //Wire-framed sphere
            var _X = new THREE.Mesh(
            //  TRREE.SphereGeometry(radius, segments, rings)
            new THREE.SphereGeometry(1, 18, 18),
            new THREE.MeshBasicMaterial({ map: /new/THREE.TextureLoader('./d.png'), wireframe: true })
                                    );
            _X.position.set(-2, 1, 2);
            S.add(_X);

            //Ard
                //earth
            var h = new THREE.TextureLoader().load(t+ea);
            h.bumpMap = new THREE.TextureLoader().load(t+eb);
            h.bumpScale = 0.07;
            h.specularMap = new THREE.TextureLoader().load(t+ec);
            h.specular = new THREE.Color(0x808080);
                //clouds
                //var eg   = new THREE.SphereGeometry(32, 32, 32)
                //var ef  = new THREE.MeshPhongMaterial({
                //    map         : new THREE.TextureLoader().load(t+ed),
                //    side        : THREE.DoubleSide,
                //    opacity     : 0.7,
                //    transparent : true,
                //    depthWrite  : false
                //                                            });
                //var ee = new THREE.Mesh(eg, ef);
                //earth mesh  
            var i = new THREE.Mesh(
            //  TRREE.SphereGeometry(radius, segments, rings)
            new THREE.SphereGeometry(32, 32, 32),
            new THREE.MeshPhongMaterial({ map: h})
                                    );
                //add clouds to earth mesh
                //i.add(ee);
            i.position.set(340, 32, -240);
            S.add(i);

            //moon
            //start with a 3D object, we need it cause there're two moons one inside earth and another in moon orbit
            //this's to've first representing our rotation center n second just follow rotation:
            el = new THREE.Object3D();
            //geometry of both of 'em
            var ej = new THREE.SphereGeometry(7.3, 16, 16);
            //mesh of moon and pass it to second moon
            var ei = new THREE.Mesh(ej, new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load(t + eh) }));
            var ek = ei;
            //set second moon distance from origin
            ek.position.x = 111;
            //add them to the 3D object
            el.add(ei);
            el.add(ek);
            //positioning them with earth x, y & z
            el.position.set(340, 32, -240);
            //add object to scene
            S.add(el);
            
            //Pyramid
            var _V = new THREE.CylinderGeometry(0, 1, 1, 3, 1, true);
            var _W = new THREE.Mesh(_V, new THREE.MeshPhongMaterial({ color: 0x00ffff }));
            _W.position.set(-0.5, 0.5, 0);
            _W.castShadow = true;
            _W.receiveShadow = true;
            _W.visible = true;
            S.add(_W);
            
            //geometry, vertices n vector of line
/* J is new Geo.*/  J = new THREE.Geometry();
/* K 're vertic.*/  var K = [[0.2, 0.7, 0], [0.7, 0.2, 0], [1.2, 0.7, 0], [1.2, 1.7, 0], [0.7, 1.2, 0], [0.2, 1.7, 0], [0.2, 0.7, 0]];
/* n vertices   */  var L = K.length;
/* extrusion ar.*/  FE = [];
/* read vertex  */  for (E = 0; E < L; E++) {
                        x = K[E][0];
                        y = K[E][1];
                        z = K[E][2];
 //1//add vertex to vector:
                    I = new THREE.Vector3(x, y, z);
 //2//add vector to geometry:
                    J.vertices.push(I);
                    FE.push(I);
                }
  /*   Shape of..  */ var FF = new THREE.Shape(FE);
///*  ..extrusion  */////////////amount, ifbevel, bevelsegments, steps, thickness
/* Extrusion setup */ var FD = { amount: 1, bevelEnabled: false, bevelSegments: 1, steps: 5, bevelThickness: 1 };
/*  "    "   fun.  */ var FC = new THREE.ExtrudeGeometry(FF, FD);
/*  "    "   mesh  */ var FB = new THREE.Mesh(FC);
/* Material    */  //var _P = new THREE.TextureLoader('./d.jpg');
/* Mat. repeat */  //P.repeat.set(0.06, 0.06);
/* Mat. wrappin*/  //P.wrapS = _P.wrapT = THREE.RepeatWrapping();
                   //var AP = new THREE.MeshBasicMaterial({ map: _P, side: THREE.DoubleSide, wireframe:false });
                
                
 //3//Line:
    /* material      */  H = new THREE.PointsMaterial({ color: 0Xffffff });
    /* Line          */  F = new THREE.Line(J, H);
    /* Line to scene */  S.add(F);
    /* Mesh to scene */  S.add(FB);
            
/*************///ground setup
/* X=800 Y=600 */  O = new THREE.PlaneBufferGeometry(800, 600);
/* Material    */  //var P = new THREE.MeshPhongMaterial({ emissive: 0x808080 });
/* Material    */  var P = new THREE.Mesh(O, new THREE.MeshBasicMaterial({ color: 0x808080 }));
/* Material    */  ////var P = new THREE.Mesh(O, new THREE.TextureLoader('./d.png'));
/* Material    */  ////P.material.side = THREE.DoubleSide;
/* Material    */  ///var P = new THREE.TextureLoader('./d.png');
/* Mat. wrappin*/  ////P.wrapS = P.wrapT = THREE.RepeatWrapping;
/* Mat. repeat */  ////P.repeat.set(10, 10);
/* Mat. texture*/  ///var AP = new THREE.MeshBasicMaterial({map:P, side:THREE.DoubleSide,wireframe:false});
/* Ground      */  //var N = new THREE.Mesh(O, P);
/* Grnd. X Y Z */  P.position.set(0, 0, -1);
/* Grnd. Rot.X */  P.rotation.x = -Math.PI / 2;
/* Grnd. Rot.Y */  P.rotation.y = 0;
/* Grnd. Shad. */  P.receiveShadow = true;
/* Grnd. 2 Scn */S.add(P);

//Character
ca();/init//cb();direction//cc();motion//cd();rotate//ce();move//cf();collide/
function ca(){  // Set the different geometries composing the humanoid
        var head = new THREE.SphereGeometry(2, 32, 32),
            hand = new THREE.SphereGeometry(0.4, 16, 16),
            foot = new THREE.SphereGeometry(0.8, 16, 16, 0, Math.PI * 2, 0, Math.PI / 2),
            nose = new THREE.SphereGeometry(0.2, 8, 8),
            // Set the material, the "skin"
            material = new THREE.MeshLambertMaterial({ color: 0x808080 });
        //setup object mesh n position    
        this.mesh = new THREE.Object3D();
        this.mesh.position.y = 2;
        //setup head
        this.head = new THREE.Mesh(head, material);
        this.head.position.y = 0
        this.mesh.add(this.head);
        //setup hands
        this.hands = {left: new THREE.Mesh(hand, material),right: new THREE.Mesh(hand, material)};
        this.hands.left.position.x = -2;
        this.hands.left.position.y = -0.7;
        this.hands.right.position.x = 2;
        this.hands.right.position.y = -0.7;
        this.mesh.add(this.hands.left);
        this.mesh.add(this.hands.right);
        //setup feet
        this.feet = {left: new THREE.Mesh(foot, material),right: new THREE.Mesh(foot, material)};
        this.feet.left.position.x = 1;
        this.feet.left.position.y = -2.4;
        this.feet.left.rotation.y = Math.PI/4;
        this.feet.right.position.x = -1;
        this.feet.right.position.y = -2.4;
        this.feet.right.rotation.y = Math.PI/4;
        this.mesh.add(this.feet.left);
        this.mesh.add(this.feet.right);
        //setup nose
        this.nose = new THREE.Mesh(nose, material);
        this.nose.position.y = 0;
        this.nose.position.z = 2;
        this.mesh.add(this.nose);
        //setup vector of motion
        this.direction = new THREE.Vector3(0, 0, 0);
        //setup animation stepping
        this.step = 0;
    }
//changed to keyboard instead of controls, called from animation
function cb(keyboard) {
    var x = keyboard.pressed('left') ? 1 : keyboard.pressed('right') ? -1 : 0,
        y = 0,
        z = keyboard.pressed('up') ? 1 : keyboard.pressed('down') ? -1 : 0;
    this.direction.set(x, y, z); cc();
    }
function cc() {
    if (this.direction.x !== 0 || this.direction.z !== 0) {
        // Rotate the character
    cd();
    // And, only if we're not colliding with an obstacle or a wall ...
        //if (cf()) {
        //    return false;
        //    }
    // ... we move the character
    ce();
    return true;
    }
}
function cd() {
    // Set the direction's angle, and the difference between it and our Object3D's current rotation
    var angle = Math.atan2(this.direction.x, this.direction.z),
            difference = angle - this.mesh.rotation.y;
    // If we're doing more than a 180°
    if (Math.abs(difference) > Math.PI) {
        // We proceed to a direct 360° rotation in the opposite way
        if (difference > 0) {
            this.mesh.rotation.y += 2 * Math.PI;
        } else {
            this.mesh.rotation.y -= 2 * Math.PI;
        }
        // And we set a new smarter (because shorter) difference
        difference = angle - this.mesh.rotation.y;
        // In short : we make sure not to turn "left" to go "right"
        }
    // Now if we haven't reached our target angle
    if (difference !== 0) {
        // We slightly get closer to it
        this.mesh.rotation.y -= difference / 4;
        }
    }
function ce() {
    // We update our Object3D's position from our "direction"
    this.mesh.position.x -= this.direction.x * ((this.direction.z === 0) ? 4 : Math.sqrt(8));
    this.mesh.position.z -= this.direction.z * ((this.direction.x === 0) ? 4 : Math.sqrt(8));
    // Now let's use Sine and Cosine curves, using our "step" property ...
    this.step += 0.25;
    // ... to slightly move our feet and hands
    this.feet.left.position.setZ(Math.sin(this.step) * 1);
    this.feet.right.position.setZ(Math.cos(this.step + (Math.PI / 2)) * 1);
    this.hands.left.position.setZ(Math.cos(this.step + (Math.PI / 2)) * 0.5);
    this.hands.right.position.setZ(Math.sin(this.step) * 0.5);    
    }
function cf() { }
    S.add(this.mesh);            
/*************///Show
/**/var _A = function() {                                    //Animation load.
    /**/requestAnimationFrame(_A);
    /**/stats.update();
    /**/R.render(S, C);                                     //In object R call function render with SCENE n CAMERA as arguments
    /**/        //D.rotation.y = U.rotation.y + 0.01;               //dot  animation in y       //we join the 3
    /**/        //F.rotation.y = U.rotation.y + 0.01;               //line animation in y       //movements in 1
    /**/        //U.rotation.y = U.rotation.y + 0.01;               //cube animation in y       //call in next line
    /**/        D.rotation.y = F.rotation.y = U.rotation.y = U.rotation.y + 0.01;
    /**/        i.rotation.y += 1 / 512;                            //earth accelerated rotation
    /**/        //ee.rotation.y -= 1 / 256;                         //cloud rotation
    /**/        Z.rotation.y = Z.rotation.y - 0.01;                 //googol logo in a sphere
    /**/        j.rotation.y =j.rotation.y + 0.00111;                //particles star alike rotation
    /**/        //place here math to fit moon orbit then get new angle from prv. one and pass to next two commands
    /**/        //at this point i prefer create an orbital invisible spline and use it as animation path but in this cntxt
    /**/        //or hack the moon mesh buildin another inside earth and use it as center [definitive]
    /**/        el.rotation.y +=Math.PI/402 ;
    /**/        
    /**/        
    /**/                    };
_A();//<-- call previous written function
///******//setInterval(rend, 192);************//EO Animation section**********************************//
        function B()       {                                                      //B() is called by listener on win resized
            C.aspect = (window.innerWidth-52) / (window.innerHeight-52);          //aspect ratio
            R.setSize(window.innerWidth-52, window.innerHeight-52);               //set renderer size
                            }
        function AC(event) {                                                      //Called by Listeners at end of script
                          if (event.wheelDeltaY) { // WebKit
                              C.fov -= event.wheelDeltaY * 0.05;
                          } else if (event.wheelDelta) { // Opera / IE9
                              C.fov -= event.wheelDelta * 0.05;
                          } else if (event.detail) { // Firefox
                              C.fov += event.detail * 1.0;
                          }

                          C.fov = Math.max(40, Math.min(100, C.fov));
                          C.updateProjectionMatrix();
                            }
        function AD(e)     {//need projector script to run + missing someting like projector
            e.preventDefault();
            var a = new THREE.Vector3();
            a.x = 2 * (e.clientX / window.innerWidth) - 1;
            a.y = 1 - 2 * (e.clientY / window.innerHeight);
            var b = THREE.Projector(a.clone(), C);
            var c = b.intersectsObject(i);
            for (var g = 0; g < c.length; g++) {
            var d = c[i],
            f = d.object;
            console.log("Intersected object", f);
                                                 }
                            }
        function AE() {//Need a fix, say last mouse object selection store then kb functions
            if (keyboard.pressed("up"))
                _W.translateY(0.07);                        //case mouse click is (▲) then move obj up
            if (keyboard.pressed("down"))
                _W.translateY(-0.07);                       //case mouse click is (▼) then move object down
            if (keyboard.pressed("left"))
                _W.translateX(-0.07);                       //case mouse click is (◄) then move object 2 da left
            if (keyboard.pressed("right"))
                _W.translateX(0.07);                        //case mouse click is (►) then move object to the right
            cb(keyboard);
                            }
        document.addEventListener('mousewheel', AC, false); //if client change mouse wheel
        document.addEventListener('DOMMouseScroll', AC, false);
        window.addEventListener('resize', B, false);        //If client resize browser then call B() to fit canvas on screen
        window.addEventListener('mousedown', AD, false);    //If client touch an object fires AD() to write clicked object in console log
        window.addEventListener('keydown', AE, false);      //If client touch a key fires AE()
    }
/*************///end
    </script>
</head>
<body onload="A()">
    <div id="info">THREE.js</div>
</body>
</html>
XHTML namespace. The namespace name http://www.w3.org/1999/xhtml is intended for use in various specifications such as: Recommendations: XHTML ™ 1.0: The Extensible HyperText Markup Language · XHTML Modularization · XHTML 1.1 · XHTML Basic · XHTML Print · XHTML+RDFa. Working drafts: ...
1
Add a comment...

Knavë No

Shared publicly  - 
 
some times i think i went foo for things like this:
isn't feddback or a critic but what i wish Spartan render.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>ÿÿÿÿÿÿÿhooDerCertSystem</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <style>    
/To keep it as neat as possible, i don't use $variables in CSS, but in a future for redundant values N FIX UPPER LEFT TRIANGLE/
    /Estilo de pagina/
    *{box-sizing: border-box;}
    ::-webkit-selection{color:#0ff;background-color:#000;}
    ::-moz-selection{color:#0ff;background-color:#000;}
    ::-o-selection{color:#0ff;background-color:#000;}
    ::selection{color:#0ff;background-color:#000;}
    
    /listas.. ul/  
    ul { margin:0px;}
    
    /anchors.. a/  
    a {color:#fff;box-shadow:inset -192px 0px 0px 1px #000;border-radius: 23%;}
    a:hover{color:#000;box-shadow:inset 0px 0px 0px 1px #000;border-radius: 23%;}
    
    /Estilo de pagina interior/
    .head, .main, .menu {background-color:#fff;}
    .head {height:15%;width:100%;margin-bottom:2px;text-align:center;}
    .main {height:85%;width:75%;float:left;}
    .menu {height:85%;width:24.7%;float:left;margin:0px 2px 0px 0px;}
    .menu li {background-color:#fff;}
    .menu li:hover {background-color:#eee;}
    
    /Estilo de pagina interior: triangulos, 2ª capa del icono de pagina/
    .m, .n {border-style:solid;border-width:16px;height:0px;width:0px;}
    .m {border-color:transparent #000 #000 transparent;}
    .n {border-color:transparent transparent #000 #000;}
    .o {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -7px 0px 0px 1px #000;border-radius:50%;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
    .o:after, .o:before{content:"";left:-6px;position:absolute;background-color:rgba(0,0,0,0.5);width:11px;height:11px;border-radius:50%;border:1px #000 solid;}
    .o:after {top:0px;}
    .o:before {top:18px;}
    .o:hover {position:static;-webkit-animation: a 2s linear 1;-moz-animation: a 2s linear 1;-o-animation: a 2s linear 1;animation: a 2s linear 1;}
    @-webkit-keyframes a{0%{box-shadow: inset 0px 0px 0px #fff} 100%{box-shadow: inset 42px 0px 0px #000}}
    @-moz-keyframes a{0%{box-shadow: inset 0px 0px 0px #fff} 100%{box-shadow: inset 42px 0px 0px #000}}
    @-o-keyframes a{0%{box-shadow: inset 0px 0px 0px #fff} 100%{box-shadow: inset 42px 0px 0px #000}}
    @-keyframes a{0%{box-shadow: inset 0px 0px 0px #fff} 100%{box-shadow: inset 42px 0px 0px #000}}
         
    /barras y columnas/
    .r {}
    .r:hover{background-color:#5ee;}
    .a{top:5%;left:0%;background-color:#9ee;position:fixed;padding-left:2px;width:35%;height:90%;}
    .b{top:5%;left:0%;background-color:#eff;position:fixed;padding-left:2px;width:10%;height:90%;}
    .b:hover{background-color:#cff;}
    .c{top:0%;left:10%;background-color:#9ee;position:fixed;padding-top:2px;width:80%;height:53%;}
    .d{top:0%;left:0%;background-color:#eff;position:fixed;padding-top:2px;width:100%;height:5%;}
    .d:hover{background-color:#cff;}
    .e{top:5%;left:65%;background-color:#9ee;position:fixed;padding-right:2px;width:35%;height:90%;}
    .f{top:5%;left:90%;background-color:#eff;position:fixed;padding-right:2px;width:10%;height:90%;}
    .f:hover{background-color:#cff;}
    .g{top:65%;left:0%;background-color:#9ee;position:fixed;padding-buttom:2px;width:100%;height:35%;}
    .h{top:95%;left:0%;background-color:#eff;position:fixed;padding-buttom:2px;width:100%;height:5%;}
    .h:hover{background-color:#cff;}
    
    /pagina y su fondo/
    .i{background-color:Black;padding-left:10%; padding-top:5%;padding-right:10%;padding-bottom:5%;}
    
    /para ocultar objetos/
    .j{display:none;}
    
    /triangulos de la barra superior/
    /*.k{display:inline;border-color:transparent #9ee #9ee transparent;border-style:solid;border-width:16px;height:0px;width:0px;position:fixed;left: 6.9%;top:0px;z-index:2;}
    .l{display:inline;border-color:transparent transparent #9ee #9ee;border-style:solid;border-width:16px;height:0px;width:0px;position:fixed;left:90%;top:0px;z-index:2;}
    //*triangulos deshabilitados por mejor solucion/
    /1ª capa del icono de pagina/
    .p:after, .p:before {content:"";background-color:transparent;position:absolute;}
    .p {background-color:transparent;top:0px;left:-23px;position:relative;width:32px;height:32px;box-shadow:inset 0px -8px 0px 0px #000;border-radius:32%;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
    .p:before {top:-12px;left:10px;width:13px;height:13px;box-shadow:inset 0px -4px 0px 0px #000;border-radius:32%;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}
    .p:after {top:-17px;left:8px;width:17px;height:16px;box-shadow:inset 0px -2px 0px 1px #000;border-radius:32%;}

    /para enseñar objetos/
    .q {display:inherit; font-size:xx-small; padding-top:-10px ;}
    
    /para tablas/
    .y, .z{width:100%;}
    .y{}
    .z{text-align:center; }
    
    /Dynamic box objects//*
    .s:after, .s:before, .t:after, .t:before, .u:after, .u:before, .v:after, .v:before, .w:after, .w:before, .x:after, .x:before {content:"";background-color:transparent;position:absolute;}
    .s {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 50% 0% 50% 0;-webkit-transform:rotate(-35deg);-moz-transform:rotate(-35deg);-o-transform:rotate(-35deg);transform:rotate(-35deg);}
    .s:after {font-size:x-small;color:#fff;content:"Limon";top:10px;left:2px;-webkit-transform:rotate(35deg);-moz-transform:rotate(35deg);-o-transform:rotate(35deg);transform:rotate(35deg); }
    .s:before {box-shadow:inset 0px 0px 0px 1px #fff;width:32px;height:1px;border-radius:0%;left:-2px;top:23px;-webkit-transform:rotate(35deg);-moz-transform:rotate(35deg);-o-transform:rotate(35deg);transform:rotate(35deg);}
    .t {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius:50%;}
    .t:after {font-size:x-small;color:#fff;content:"Naranja";top:9px;left:0px; }
    .t:before {box-shadow:inset 0px 0px 0px 1px #fff;width:32px;height:1px;border-radius:0%;left:0px;top:21px;}
    .u {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .u:after {left:2px;top:2px;width:28px;height:28px;box-shadow:inset 0px 0px 0px 2px #fff;border-radius: 50%;}
    .u:before {font-size:small;color:#fff;content:"f";top:9px;left:12px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
    .v {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .v:after {left:2px;top:2px;width:28px;height:28px;box-shadow:inset 0px 0px 0px 2px #fff;border-radius: 50%;}
    .v:before {font-size:-small;color:#fff;content:"t";top:9px;left:12px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
    .w {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .w:after {left:2px;top:2px;width:28px;height:28px;box-shadow:inset 0px 0px 0px 2px #fff;border-radius: 50%;}
    .w:before {font-size:small;color:#fff;content:"y";top:9px;left:12px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
    .x {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .x:after {left:2px;top:2px;width:28px;height:28px;box-shadow:inset 0px 0px 0px 2px #fff;border-radius: 50%;}
    .x:before {font-size:small;color:#fff;content:"+";top:9px;left:12px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
    Disabled, testing with image blobs instead*/
    
    /objetos del menu principal 1ªparte/
    .b0:before, .b0:after, .b1:before, .b1:after, .b2:before, .b2:after, .b3:before, .b3:after, .b4:before, .b4:after, .b5:before, .b5:after, .b6:before, .b6:after, .b7:before, .b7:after, .b8:before, .b8:after, .b9:before, .b9:after, .ba:before, .ba:after, .bb:before, .bb:after {content:"";position:absolute;}
    .b0, .b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .ba, .bb {background-color:transparent;position:relative; margin: 20px 20px 20px 23px;}
    .b0        {top:auto;left:auto;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 24%;border:2px #000 solid;}
    .b0:before {top:7px;left:7px;width:23px;height:23px;box-shadow:inset 4px 0px 0px 4px #fff;border-radius: 30% 0% 0% 30%;}
    .b0:after  {}
    .b1        {top:auto;left:auto;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 24%;border:1px #000 solid;}
    .b1:before {top:-12px;left:1px;height:0px;width:0;border-width:19px;border-color: transparent transparent #fff transparent;border-style:solid;}
    .b1:after  {top:-6px;left:2px;height:0px;width:0;border-width:17px;border-color: transparent transparent #000 transparent;border-style:double;}
    .b2        {top:auto;left:20px;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 50%;border:1px #000 solid;}
    .b2:before {top:6px;left:6px;width:12px;height:12px;box-shadow:inset -12px 0px 0px 1px #aff, 0px 0px 0px 1px #aff, 0px 16px 0px 1px #8ff, 16px 0px 0px 1px #4ff, 16px 16px 0px 1px #0ff;border-radius: 0%;border:0px #000 solid;}
    .b2:after  {}
    .b3        {top:auto;left:12px;width:84px;height:42px;box-shadow:inset 0px 0px 84px 1px #000;border-radius: 24%;border:1px #000 solid;}
    .b3:before {top:8px;left:16px;width:23px;height:23px;box-shadow:inset 3px 0px 0px 5px #fff;border-radius: 0% 30% 30% 0%;}
    .b3:after  {top:8px;left:46px;width:23px;height:23px;box-shadow:inset 3px 0px 0px 5px #fff;border-radius: 0% 30% 30% 0%;}
    .b4        {top:auto;left:32px;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 50%;border:1px #000 solid;}
    .b4:before {top:19px;left:10px;width:20px;height:3px;box-shadow:inset 0px 0px 64px 1px #fff;border-radius: 24%;}
    .b4:after  {}
    .b5        {top:auto;left:auto;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 50%;border:1px #000 solid;}
    .b5:before {top:19px;left:10px;width:20px;height:3px;box-shadow:inset 0px 0px 64px 1px #fff;border-radius: 24%;}
    .b5:after  {top:10px;left:19px;width:3px;height:20px;box-shadow:inset 0px 0px 64px 1px #fff;border-radius: 24%;}
    .b6        {top:auto;left:6px;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 50% 50% 50% 0%;border:1px #000 solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .b6:before {top:42px;left:-20px;width:20px;height:13px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 50%;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
    .b6:after  {}
    .b7        {top:auto;left:6px;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 24%;border:1px #000 solid;}
    .b7:before {top:5px;left:20px;width:3px;height:20px;box-shadow:inset 0px 0px 64px 1px #fff;border-radius: 24%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .b7:after  {top:27px;left:10px;width:20px;height:3px;box-shadow:inset 0px 0px 64px 1px #fff;border-radius: 24%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .b8        {top:auto;left:20px;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 24%;border:2px #000 solid;}
    .b8:before {top:7px;left:7px;width:24px;height:12px;box-shadow:inset 3px 0px 0px 2px #fff;border-radius: 30% 0% 0% 30%;}
    .b8:after  {top:17px;left:7px;width:24px;height:12px;box-shadow:inset -3px 0px 0px 2px #fff;border-radius: 0% 30% 30% 0%;}
    .b9        {top:-14px;left:30px;width:12px;height:12px;box-shadow:inset 0px 0px 64px 1px #f00, 0px 19px 0px 1px #0f0, 0px 38px 0px 1px #00f ;border-radius: 50% 50% 50% 0%;border:1px #f00 solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .b9:before {top:12px;left:19px;width:12px;height:12px;box-shadow:inset 0px 0px 64px 1px #000, 0px 19px 0px 1px #fff;border-radius: 50% 50% 50% 0%;border:1px #000 solid;}
    .b9:after  {top:12px;left:-19px;width:12px;height:12px;box-shadow:inset 0px 0px 64px 1px #ff0, 0px 19px 0px 1px #f0f, 0px -19px 0px 1px #0ff;border-radius: 50% 50% 50% 0%;border:1px #ff0 solid;}
    .ba        {top:auto;left:21px;width:84px;height:42px;box-shadow:inset 0px 0px 84px 1px #000;border-radius: 24%;border:1px #000 solid;}
    .ba:before {left:1px;width:82px;height:12px;box-shadow:inset 0px 0px 6px 1px #000;border-radius: 42%;}
    .ba:after  {top:11px;left:0px;content:"Frequently Asked Questions";color:#fff;font-size:x-small;}
    .bb        {top:auto;left:auto;width:42px;height:42px;box-shadow:inset 0px 0px 64px 1px #000;border-radius: 24%;border:2px #000 solid;}
    .bb:before {}
    .bb:after  {}
    
    /rooming 12 units from:(.bc) to:(.bn) in case in a future u want to place more objects in main menu/
    
    /objetos del menu GO TO/
    .bo:after, .bo:before, .bp:after, .bp:before, .bq:after, .bq:before, .br:after, .br:before, .bs:after, .bs:before, .bt:after, .bt:before, .bu:after, .bu:before, .bv:after, .bv:before, .bw:after, .bw:before, .bx:after, .bx:before, .by:after, .by:before, .bz:after, .bz:before, .c0:after, .c0:before, .c1:after, .c1:before {content:"";background-color:transparent;position:absolute;}
    .bo {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset 0px -2px 0px 1px #000;border-radius:50%;}
    .bo:after {box-shadow:inset 0px 8px 0px 0px #000;width:32px;height:36px;border-radius:42%;}
    .bo:before {box-shadow:inset 0px 4px 0px 2px #000;width:12px;height:10px;border-radius:42%;left:10px;top:17px;}
    .bp {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset 0px 0px 0px 1px #000, 0px 0px 0px 1px #cff;border-radius:50%;-webkit-transform-origin: 16px 16px;-moz-transform-origin: 16px 16px;-o-transform-origin: 16px 16px;transform-origin: 16px 16px;-webkit-animation: b 1s linear 1; -moz-animation: b 1s linear 1; -o-animation: b 1s linear 1; animation: b 1s linear 1;}
    .bp:after {box-shadow:inset 0px 11px 0px 1px #000;width:32px;height:36px;border-radius:32%;}
    .bp:before {box-shadow:inset 0px -2px 0px 1px #000;width:12px;height:10px;border-radius:50%;left:10px;top:17px;}
    @-webkit-keyframes b {100%{-webkit-transform: rotate(90deg)}}
    @-moz-keyframes b {100%{-moz-transform: rotate(90deg)}}
    @-o-keyframes b {100%{-o-transform: rotate(90deg)}}
    @-keyframes b {100%{transform: rotate(90deg)}}
    .bq {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:0px 0px 0px 1px rgba(0,0,0,1);border-radius: 100% 100% 0% 0;}
    .bq:after {box-shadow:inset 0px 4px 0px 0px #000;width:4px;height:4px;border-radius:50%;left:4px;top:18px;}
    .bq:before {box-shadow:inset 0px 4px 0px 0px #000;width:16px;height:4px;border-radius:40%;left:8px;top:6px;}
    .br {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset 0px 0px 0px 1px #000;border-radius:0%;}
    .br:after {box-shadow:inset 0px 0px 0px 1px #000;width:32px;height:1px;border-radius:0%;left:0px;top:16px;}
    .br:before {box-shadow:inset 0px 0px 0px 1px #000;width:1px;height:32px;border-radius:0%;left:16px;top:0px;}
    .bs {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 0%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .bs:after { }
    .bs:before {}
    .bt {background-color:transparent;top:auto;left:auto;position:relative;width:0px;height:0px;border-style:solid;border-width:16px;border-color:transparent #000 transparent #000;}
    .bt:after { }
    .bt:before {}
    .bu {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 14%;}
    .bu:after { font-size:large;color:#fff;content:"TV.";left:2px;top:6px;}
    .bu:before {}
    .bv {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 14%;}
    .bv:after { font-size:large;color:#fff;content:"BR";left:4px;top:6px;}
    .bv:before {}
    .bw {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 14%;}
    .bw:after { font-size:large;color:#fff;content:"BR";left:4px;top:6px;}
    .bw:before {}
    .bx {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 14%;}
    .bx:after { font-size:large;color:#fff;content:"BR";left:4px;top:6px;}
    .bx:before {}
    .by {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(130deg);-moz-transform:rotate(130deg);-o-transform:rotate(130deg);transform:rotate(130deg);}
    .by:after {width:20px;height:20px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;left:-3px;top:0px;}
    .by:before {width:12px;height:12px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;left:8px;top:24px;}
    .bz {background-color:transparent;top:auto;left:auto;position:relative;width:32px;height:32px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
    .bz:after {width:17px;height:17px;box-shadow:inset -35px 0px 0px 1px #888;border-radius: 50% 50% 50% 0;left:5px;top:10px;}
    .bz:before {width:23px;height:23px;box-shadow:inset -35px 0px 0px 1px #444;border-radius: 50% 50% 50% 0;left:5px;top:5px;}
    .c0 {background-color:transparent;top:auto;left:9px;position:relative;width:20px;height:20px;box-shadow:inset 0px 0px 0px 5px #000;border-radius: 50%;}
    .c0:after {top:-8px;left:-5px;width:20px;height:20px;box-shadow:inset 0px 0px 0px 5px #000;border-radius: 50%;}
    .c0:before {top:0px;left:-9px;width:20px;height:20px;box-shadow:inset 0px 0px 0px 5px #000;border-radius: 50%;}
    .c1 {background-color:transparent;top:6px;left:7px;position:relative;width:20px;height:10px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 32%;}
    .c1:after {top:-10px;left:2px;width:2px;height:11px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50%;}
    .c1:before {top:-10px;left:16px;width:2px;height:11px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50%;}
    
    /objetos del menu de LINKS/
    .c2:after, .c2:before, .c3:after, .c3:before, .c4:after, .c4:before, .c5:after, .c5:before, .c6:after, .c6:before {content:"";background-color:transparent;position:absolute;}
    .c2 {background-color:transparent;top:auto;left:9px;position:relative;width:20px;height:20px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
    .c2:after {top:-6px;left:-6px;width:20px;height:20px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;}
    .c2:before {top:0px;left:-6px;width:20px;height:20px;box-shadow:inset -35px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;}
    .c3 {background-color:transparent;top:auto;left:2px;position:relative;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 50% 0% 50% 0%;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);}
    .c3:after {left:1px;top:1px;width:22px;height:22px;box-shadow:inset 0px 0px 0px 1px #fff;border-radius: 50%;}
    .c3:before {left:3px;top:3px;width:18px;height:18px;box-shadow:inset 0px 0px 0px 2px #fff;border-radius: 50%;}
    .c4 {background-color:transparent;top:auto;left:2px;position:relative;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 50% 50% 50% 0%;-webkit-transform:rotate(195deg);-moz-transform:rotate(195deg);-o-transform:rotate(195deg);transform:rotate(195deg);}
    .c4:before {left:0px;top:0px;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius:50% 50% 50% 0%;-webkit-transform:rotate(-120deg);-moz-transform:rotate(-120deg);-o-transform:rotate(-120deg);transform:rotate(-120deg);}
    .c4:after {left:2px;top:2px;width:20px;height:20px;box-shadow:inset 0px 2px 0px 1px #999;border-radius: 50%;-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform:rotate(-15deg);}
    .c5 {background-color:transparent;top:auto;left:2px;position:relative;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 50% 50% 50% 0%;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-o-transform:rotate(15deg);transform:rotate(15deg);}
    .c5:before {left:0px;top:0px;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius:50% 50% 50% 0%;-webkit-transform:rotate(-120deg);-moz-transform:rotate(-120deg);-o-transform:rotate(-120deg);transform:rotate(-120deg);}
    .c5:after {left:0px;top:0px;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius:50% 50% 50% 0%;-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);-o-transform:rotate(120deg);transform:rotate(120deg);}
    .c6 {background-color:transparent;top:0px;left:2px;position:relative;width:20px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius:0%;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
    .c6:before {left:-7px;top:0px;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 50% 50% 50% 0%;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
    .c6:after {left:6px;top:8px;width:14px;height:8px;box-shadow:inset -32px 0px 0px 1px #fff;border-radius: 50% 0% 0% 50%;}
    
    /objetos del menu HELP/
    .c7:after, .c7:before, .c8:after, .c8:before, .c9:after, .c9:before {content:"";background-color:transparent;position:absolute;}
    .c7 {background-color:transparent;top:-14px;left:0px;position:relative;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius:0%;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
    .c7:before {left:0px;top:0px;width:24px;height:24px;box-shadow:inset -32px 0px 0px 2px #fff;border-radius: 50%;}
    .c7:after {left:4px;top:4px;width:16px;height:16px;box-shadow:inset -32px 0px 0px 2px #000;border-radius: 50%;}
    .c8 {background-color:transparent;top:-14px;left:0px;position:relative;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius:50%;}
    .c8:before {left:2px;top:2px;width:20px;height:20px;box-shadow:inset -32px 0px 0px 2px #fff;border-radius: 50%;}
    .c8:after {left:4px;top:4px;width:16px;height:16px;box-shadow:inset -32px 0px 0px 2px #000;border-radius: 50%;}
    .c9 {background-color:transparent;top:-24px;left:0px;position:relative;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius: 50% 50% 50% 0;}
    .c9:before {left:-20px;top:24px;width:20px;height:20px;box-shadow:inset -32px 0px 0px 2px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}
    .c9:after {left:-18px;top:6px;width:16px;height:16px;box-shadow:inset -32px 0px 0px 2px #000;border-radius: 50% 50% 50% 0;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);}
    
    /Some of solar system according to known data but mid-orbital radius in some cases to fit in screen/
    .ca{position:relative;margin:0 auto;display:block;margin-top:200px;perspective:1000px;perspective-origin:60% 50%;transform:rotate(-10deg);}
    .ca > div {position:relative;margin:0 auto;transform-style:preserve-3d;height:0px;}
    .cb {width:250px;position:absolute;top:0px;z-index:1;height:125px !important;}
    .cb .cc {width:417px;height:417px;box-shadow:inset 0px 0px 202px 0px #ff0;/background:url(./A/A.png) no-repeat;/ background-size:cover;border-radius:50%;margin:0 auto;-webkit-animation:r 40s infinite linear;-moz-animation:r 40s infinite linear;-o-animation:r 40s infinite linear;animation:r 40s infinite linear;}
    .cd {background-size:cover;background-repeat:no-repeat;background-color:transparent;animation-iteration-count:infinite;overflow:hidden;}
    .ce {position:absolute;left:0px;right:0px;top:0px;bottom:0px;box-shadow:inset 0px 0px 52px 0px #888;/background:transparent url(./A/B.png) 0% 0% no-repeat;/background-size:cover;border-radius:50%;}
    .cf {position:absolute;width:400px;z-index:2;top:-7.5px;-webkit-animation:t 12s infinite linear;-moz-animation:t 12s infinite linear;-o-animation:t 12s infinite linear;animation:t 12s infinite linear;}
    .cf .cd {width:2px;height:2px;box-shadow:inset 250px 0px 0px 0px #f80;border-radius:50%;/background-image:url(./A/C.png);/-webkit-animation:z 12s infinite linear;-moz-animation:z 12s infinite linear;-o-animation:z 12s infinite linear;animation:z 12s infinite linear;}
    .cf .ce {-webkit-animation:s 12s infinite linear;-moz-animation:s 12s infinite linear;-o-animation:s 12s infinite linear;animation:s 12s infinite linear;}
    .cg {position:absolute;width:506px;z-index:3;top:-19px;-webkit-animation:u 15s infinite linear;-moz-animation:u 15s infinite linear;-o-animation:u 15s infinite linear;animation:u 15s infinite linear;}
    .cg .cd {width:4px;height:4px;box-shadow:inset 250px 0px 0px 0px #f84;border-radius:50%;/background-image:url(./A/D.png);/-webkit-animation:z 12s infinite linear;-moz-animation:z 12s infinite linear;-o-animation:z 12s infinite linear;animation:z 12s infinite linear;}
    .cg .ce {-webkit-animation:s 12s infinite linear;-moz-animation:s 12s infinite linear;-o-animation:s 12s infinite linear;animation:s 12s infinite linear;}
    .ch {position: absolute;width:610px;z-index:4;top:-20px;-webkit-animation:v 20s infinite linear;-moz-animation:v 20s infinite linear;-o-animation:v 20s infinite linear;animation:v 20s infinite linear;}
    .ch .cd {width:4px;height:4px;box-shadow:inset 250px 0px 0px 0px #00f;border-radius:50%;/background-image:url(./A/E.png);/-webkit-animation:z 12s infinite linear;-moz-animation:z 12s infinite linear;-o-animation:z 12s infinite linear;animation:z 12s infinite linear;}
    .ch .ce {-webkit-animation:s 12s infinite linear;-moz-animation:s 12s infinite linear;-o-animation:s 12s infinite linear;animation:s 12s infinite linear;}
    .ci {position: absolute;width: 706px;z-index:5;top:-11px;-webkit-animation:w 30s infinite linear;-moz-animation:w 30s infinite linear;-o-animation:w 30s infinite linear;animation:w 30s infinite linear;}
    .ci .cd {width:2px;height:2px;box-shadow:inset 250px 0px 0px 0px #fa8;border-radius:50%;/background-image:url(./A/F.png);/-webkit-animation:z 12s infinite linear;-moz-animation:z 12s infinite linear;-o-animation:z 12s infinite linear;animation:z 12s infinite linear;}
    .ci .ce {-webkit-animation:s 12s infinite linear;-moz-animation:s 12s infinite linear;-o-animation:s 12s infinite linear;animation:s 12s infinite linear;}
    .cj {position:absolute;width:1100px;z-index:6;top:-64px;-webkit-animation:x 50s infinite linear;-moz-animation:x 50s infinite linear;-o-animation:x 50s infinite linear;animation:x 50s infinite linear;}
    .cj .cd {width:42px;height:42px;box-shadow:inset 250px 0px 0px 0px #fca;border-radius:50%;/background-image:url(./A/G.png);/-webkit-animation:z 12s infinite linear;-moz-animation:z 12s infinite linear;-o-animation:z 12s infinite linear;animation:z 12s infinite linear;}
    .cj .ce {-webkit-animation:s 12s infinite linear;-moz-animation:s 12s infinite linear;-o-animation:s 12s infinite linear;animation:s 12s infinite linear;}
    .ck {position:absolute;width:1500px;z-index:6;top:-64px;-webkit-animation:y 50s infinite linear;-moz-animation:y 50s infinite linear;-o-animation:y 50s infinite linear;animation:y 50s infinite linear;}/recalc dimensional data/
    .ck .cd {width:36px;height:36px;box-shadow:inset 250px 0px 0px 0px #ff8;border-radius:50%;/background-image:url(./A/H.png);/-webkit-animation:z 12s infinite linear;-moz-animation:z 12s infinite linear;-o-animation:z 12s infinite linear;animation:z 12s infinite linear;}
    .ck .ce {-webkit-animation:s 12s infinite linear;-moz-animation:s 12s infinite linear;-o-animation:s 12s infinite linear;animation:s 12s infinite linear;}
    
    /Solar sys. functions...don't thrust-me/
   @-webkit-keyframes r {0%{ transform: rotate(0);} 100%{transform:rotate(-360deg);}}
   @-moz-keyframes r {0%{ transform: rotate(0);} 100%{transform:rotate(-360deg);}}
   @-o-keyframes r {0%{ transform: rotate(0);} 100%{transform:rotate(-360deg);}}
   @-keyframes r {0%{ transform: rotate(0);} 100%{transform:rotate(-360deg);}}
   @-webkit-keyframes s {0%{background-position:130% 0%;} 33%{background-position:50% 0%;} 55%{background-position:0% 0%;} 80%{background-position:-50% 0%;} 100%{background-position:-50% 0%;}}
   @-moz-keyframes s {0%{background-position:130% 0%;} 33%{background-position:50% 0%;} 55%{background-position:0% 0%;} 80%{background-position:-50% 0%;} 100%{background-position:-50% 0%;}}
   @-o-keyframes s {0%{background-position:130% 0%;} 33%{background-position:50% 0%;} 55%{background-position:0% 0%;} 80%{background-position:-50% 0%;} 100%{background-position:-50% 0%;}}
   @-keyframes s {0%{background-position:130% 0%;} 33%{background-position:50% 0%;} 55%{background-position:0% 0%;} 80%{background-position:-50% 0%;} 100%{background-position:-50% 0%;}}
   @-webkit-keyframes t {0%{z-index:2;transform:rotateY(0);} 49%{ z-index:2;} 50%{z-index:-2;} 99%{z-index:-2;} 100%{z-index:2;transform:rotateY(360deg);}}
   @-moz-keyframes t {0%{z-index:2;transform:rotateY(0);} 49%{ z-index:2;} 50%{z-index:-2;} 99%{z-index:-2;} 100%{z-index:2;transform:rotateY(360deg);}}
   @-o-keyframes t {0%{z-index:2;transform:rotateY(0);} 49%{ z-index:2;} 50%{z-index:-2;} 99%{z-index:-2;} 100%{z-index:2;transform:rotateY(360deg);}}
   @-keyframes t {0%{z-index:2;transform:rotateY(0);} 49%{ z-index:2;} 50%{z-index:-2;} 99%{z-index:-2;} 100%{z-index:2;transform:rotateY(360deg);}}
   @-webkit-keyframes u {0%{z-index:3;transform:rotateY(0);} 49%{ z-index:3;} 50%{z-index:-3;} 99%{z-index:-3;} 100%{z-index:3;transform:rotateY(360deg);}}
   @-moz-keyframes u {0%{z-index:3;transform:rotateY(0);} 49%{ z-index:3;} 50%{z-index:-3;} 99%{z-index:-3;} 100%{z-index:3;transform:rotateY(360deg);}}
   @-o-keyframes u {0%{z-index:3;transform:rotateY(0);} 49%{ z-index:3;} 50%{z-index:-3;} 99%{z-index:-3;} 100%{z-index:3;transform:rotateY(360deg);}}
   @-keyframes u {0%{z-index:3;transform:rotateY(0);} 49%{ z-index:3;} 50%{z-index:-3;} 99%{z-index:-3;} 100%{z-index:3;transform:rotateY(360deg);}}
   @-webkit-keyframes v {0%{z-index:4;transform:rotateY(0);opacity:1;} 49%{z-index:4;} 50%{z-index:-4;} 99%{z-index:-4;} 100%{z-index:4;transform:rotateY(360deg);}}
   @-moz-keyframes v {0%{z-index:4;transform:rotateY(0);opacity:1;} 49%{z-index:4;} 50%{z-index:-4;} 99%{z-index:-4;} 100%{z-index:4;transform:rotateY(360deg);}}
   @-o-keyframes v {0%{z-index:4;transform:rotateY(0);opacity:1;} 49%{z-index:4;} 50%{z-index:-4;} 99%{z-index:-4;} 100%{z-index:4;transform:rotateY(360deg);}}
   @-keyframes v {0%{z-index:4;transform:rotateY(0);opacity:1;} 49%{z-index:4;} 50%{z-index:-4;} 99%{z-index:-4;} 100%{z-index:4;transform:rotateY(360deg);}}
   @-webkit-keyframes w {0%{z-index:5;transform:rotateY(0);} 49%{ z-index:5;} 50%{z-index:-5; } 99%{z-index:-5;} 100%{z-index:5;transform: rotateY(360deg);}}
   @-moz-keyframes w {0%{z-index:5;transform:rotateY(0);} 49%{ z-index:5;} 50%{z-index:-5; } 99%{z-index:-5;} 100%{z-index:5;transform: rotateY(360deg);}}
   @-o-keyframes w {0%{z-index:5;transform:rotateY(0);} 49%{ z-index:5;} 50%{z-index:-5; } 99%{z-index:-5;} 100%{z-index:5;transform: rotateY(360deg);}}
   @-keyframes w {0%{z-index:5;transform:rotateY(0);} 49%{ z-index:5;} 50%{z-index:-5; } 99%{z-index:-5;} 100%{z-index:5;transform: rotateY(360deg);}}
   @-webkit-keyframes x {0%{z-index:6;transform:rotateY(270);} 49%{ z-index:6;} 50%{z-index:-6; } 99%{z-index:-6;} 100%{z-index:6;transform:rotateY(360deg);}}
   @-moz-keyframes x {0%{z-index:6;transform:rotateY(270);} 49%{ z-index:6;} 50%{z-index:-6; } 99%{z-index:-6;} 100%{z-index:6;transform:rotateY(360deg);}}
   @-o-keyframes x {0%{z-index:6;transform:rotateY(270);} 49%{ z-index:6;} 50%{z-index:-6; } 99%{z-index:-6;} 100%{z-index:6;transform:rotateY(360deg);}}
   @-keyframes x {0%{z-index:6;transform:rotateY(270);} 49%{ z-index:6;} 50%{z-index:-6; } 99%{z-index:-6;} 100%{z-index:6;transform:rotateY(360deg);}}
   @-webkit-keyframes y {0%{z-index:7;transform:rotateY(270);} 49%{ z-index:7;} 50%{z-index:-7; } 99%{z-index:-7;} 100%{z-index:7;transform:rotateY(360deg);}}
   @-moz-keyframes y {0%{z-index:7;transform:rotateY(270);} 49%{ z-index:7;} 50%{z-index:-7; } 99%{z-index:-7;} 100%{z-index:7;transform:rotateY(360deg);}}
   @-o-keyframes y {0%{z-index:7;transform:rotateY(270);} 49%{ z-index:7;} 50%{z-index:-7; } 99%{z-index:-7;} 100%{z-index:7;transform:rotateY(360deg);}}
   @-keyframes y {0%{z-index:7;transform:rotateY(270);} 49%{ z-index:7;} 50%{z-index:-7; } 99%{z-index:-7;} 100%{z-index:7;transform:rotateY(360deg);}}
   @-webkit-keyframes z {from{transform:rotateY(0);} to{transform:rotateY(-360deg);}}
   @-moz-keyframes z {from{transform:rotateY(0);} to{transform:rotateY(-360deg);}}
   @-o-keyframes z {from{transform:rotateY(0);} to{transform:rotateY(-360deg);}}
   @-keyframes z {from{transform:rotateY(0);} to{transform:rotateY(-360deg);}}
    
    /other objects: vflag=cl, hcover=cm, ◄=cn, ►=co n so on/
    .cl, .cm, .cn, .co, .cp, .cq {background-color:transparent;position:relative;}
    .cl:before, .cl:after, .cm:before, .cm:after, .cn:before, .cn:after, .co:before, .co:after, .cp:before, .cq:after {content:"";background-color:transparent;position:absolute;}
    .co, .cp, .cq, .cr, .cs, .ct, .cu, .cv, .cw, .cy, .cz, .d0, .d1, .d2, .d3, .d4, .d5, .d6 {position:absolute;}
    .cl {position:fixed;top:-19px;left:90%;width:24px;height:24px;box-shadow:inset -32px 0px 0px 1px #000;border-radius:0%;z-index:2;color:#0ff;font-size:x-small;}
    .cl:before {left:0px;top:24px;border-color:#000 #000 transparent transparent;border-style:solid;border-width:12px;}
    .cl:after {left:0px;top:24px;border-color:#000 transparent transparent #000;border-style:solid;border-width:12px;}
    .cm {position:fixed;top:0px;left:0%;width:100%;height:24px;box-shadow:inset -3200px 0px 0px 1px #9ee;border-radius:0%;}
    .cm:before {left:0px;top:24px;border-color:#9ee #9ee transparent transparent;border-style:solid;border-width:6px;}
    .cm:after {right:0px;top:24px;border-color:transparent transparent #9ee #9ee;border-style:solid;border-width:6px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
    .cn {top:2px;left:2px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cn:before {color:#9ee;content:"◄";}
    .co {top:2px;left:38px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .co:before {color:#9ee;content:"►";}
    .cp {top:2px;right:2px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cp:before {color:#9ee;content:"▲";}
    .cq {top:2px;right:38px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cq:before {color:#9ee;content:"▼";}
    .cr {;top:2px;right:0px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cr:before {color:#9ee;content:"≡";}
    .cs {top:2px;right:34px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cs:before {color:#9ee;content:"☺";}
    .ct {top:2px;right:68px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .ct:before {color:#9ee;content:"#";}
    .cu {top:2px;right:102px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cu:before {color:#9ee;content:"♫";}
    .cv {top:2px;right:136px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cv:before {color:#9ee;content:"♠";}
    .cw {top:2px;right:170px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .cw:before {color:#9ee;content:"◌";}
    .cx {background-color:transparent;position:relative;top:0%;right:0%;width:202px;height:68px;box-shadow:inset 0px 0px 3px 1px #000;border-radius:5%;}
    .cx:before {content:"";background-color:transparent;position:absolute;}/im the container of prv. 6 n next 9/
    .cy {top:24px;right:136px;width:64px;height:20px;box-shadow:inset -64px 0px 0px 1px #000;border-radius:14%;}
    .cy:before {color:#9ee;content:"Log-in";}
    .cz {top:24px;right:68px;width:64px;height:20px;box-shadow:inset -64px 0px 0px 1px #000;border-radius:14%;}
    .cz:before {color:#9ee;content:"Log-out";}
    .d0 {top:24px;right:0px;width:64px;height:20px;box-shadow:inset -64px 0px 0px 1px #000;border-radius:14%;}
    .d0:before {color:#9ee;content:"Exit";}
    .d1 {top:46px;right:0px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .d1:before {color:#9ee;content:"™";}
    .d2 {top:46px;right:34px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .d2:before {color:#9ee;content:"©";}
    .d3 {top:46px;right:68px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .d3:before {color:#9ee;content:"℗";}
    .d4 {top:46px;right:102px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .d4:before {color:#9ee;content:"®";}
    .d5 {;top:46px;right:136px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .d5:before {color:#9ee;content:"℅";}
    .d6 {top:46px;right:170px;width:32px;height:20px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:14%;}
    .d6:before {color:#9ee;content:"ᴥ";}
    .d7 {background-color:transparent;position:fixed;top:144px;left:152px;width:133px;height:24px;box-shadow:inset 0px 0px 3px 1px #888;border-radius:5%;}
    .d7:before {content:"";background-color:transparent;position:absolute;}/im the container of next 4 (navbar)/
    .d8, .d9, .da, .db {position:absolute;top:3px;box-shadow:inset -42px 0px 0px 1px #000;border-radius:4%;width:32px;height:20px;}
    .d8:before, .d9:before, .da:before, .db:before {position:absolute;color:#9ee;}
    .d8 {left:2px;}
    .d8:before {content:"◄";}
    .d8:hover {zoom:1.1;}
    .d9 {left:34px;}
    .d9:before {content:"►";}
    .d9:hover {zoom:1.1;}
    .da {right:34px;}
    .da:before {content:"▲";}
    .da:hover {zoom:1.1;}
    .db {right:2px;}
    .db:before {content:"▼";}
    .db:hover {zoom:1.1;}
    .de {position:relative;box-shadow:inset 0px 0px 7px 1px #000;border-radius:4%;width:20%;height:100%;}
    </style>
        <!-- This demonstration is based in MDC samples,
    from https://developer.mozilla.org/samples/webgl/sample7/index.html
    plus with some fixes from http://www.peternitsch.net/demo/webgl_webcam/index.html notice that in MDC samples, November 1st 2010, WebGLFloatArray and
    WebGLUnsignedShortArray which were replaced by Float32Array and
    Uint16Array -->
    <!-- this uses 3rd-party library http://sylvester.jcoglan.com/ -->
    <script id="sylvester" type="text/javascript">
        eval(function(p, a, c, k, e, r) { e = function(c) { return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (!''.replace(/^/, String)) { while (c-) r[e(c)] = k[c] || e(c); k = [function(e) { return r[e] } ]; e = function() { return '\\w+' }; c = 1 }; while (c-) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p } ('9 17={3i:\'0.1.3\',16:1e-6};l v(){}v.23={e:l(i){8(i<1||i>7.4.q)?w:7.4[i-1]},2R:l(){8 7.4.q},1u:l(){8 F.1x(7.2u(7))},24:l(a){9 n=7.4.q;9 V=a.4||a;o(n!=V.q){8 1L}J{o(F.13(7.4[n-1]V[n-1])>17.16){8 1L}}H(--n);8 2x},1q:l(){8 v.u(7.4)},1b:l(a){9 b=[];7.28(l(x,i){b.19(a(x,i))});8 v.u(b)},28:l(a){9 n=7.4.q,k=n,i;J{i=k-n;a(7.4[i],i+1)}H(--n)},2q:l(){9 r=7.1u();o(r===0){8 7.1q()}8 7.1b(l(x){8 x/r})},1C:l(a){9 V=a.4||a;9 n=7.4.q,k=n,i;o(n!=V.q){8 w}9 b=0,1D=0,1F=0;7.28(l(x,i){b+=x*V[i-1];1D+=x*x;1F+=V[i-1]V[i-1]});1D=F.1x(1D);1F=F.1x(1F);o(1D*1F===0){8 w}9 c=b/(1D*1F);o(c<-1){c=-1}o(c>1){c=1}8 F.37(c)},1m:l(a){9 b=7.1C(a);8(b===w)?w:(b<=17.16)},34:l(a){9 b=7.1C(a);8(b===w)?w:(F.13(b-F.1A)<=17.16)},2k:l(a){9 b=7.2u(a);8(b===w)?w:(F.13(b)<=17.16)},2j:l(a){9 V=a.4||a;o(7.4.q!=V.q){8 w}8 7.1b(l(x,i){8 x+V[i-1]})},2C:l(a){9 V=a.4||a;o(7.4.q!=V.q){8 w}8 7.1b(l(x,i){8 x-V[i-1]})},22:l(k){8 7.1b(l(x){8 x*k})},x:l(k){8 7.22(k)},2u:l(a){9 V=a.4||a;9 i,2g=0,n=7.4.q;o(n!=V.q){8 w}J{2g+=7.4[n-1]*V[n-1]}H(--n);8 2g},2f:l(a){9 B=a.4||a;o(7.4.q!=3||B.q!=3){8 w}9 A=7.4;8 v.u([(A[1]*B[2])(A[2]*B[1]),(A[2]*B[0])(A[0]*B[2]),(A[0]*B[1])(A[1]*B[0])])},2A:l(){9 m=0,n=7.4.q,k=n,i;J{i=k-n;o(F.13(7.4[i])>F.13(m)){m=7.4[i]}}H(-n);8 m},2Z:l(x){9 a=w,n=7.4.q,k=n,i;J{i=k-n;o(a===w&&7.4[i]==x){a=i+1}}H(--n);8 a},3g:l(){8 S.2X(7.4)},2d:l(){8 7.1b(l(x){8 F.2d(x)})},2V:l(x){8 7.1b(l(y){8(F.13(y-x)<=17.16)?x:y})},1o:l(a){o(a.K){8 a.1o(7)}9 V=a.4||a;o(V.q!=7.4.q){8 w}9 b=0,2b;7.28(l(x,i){2b=x-V[i-1];b+=2b*2b});8 F.1x(b)},3a:l(a){8 a.1h(7)},2T:l(a){8 a.1h(7)},1V:l(t,a){9 V,R,x,y,z;2S(7.4.q){27 2:V=a.4||a;o(V.q!=2){8 w}R=S.1R(t).4;x=7.4[0]-V[0];y=7.4[1]-V[1];8 v.u([V[0]+R[0][0]*x+R[0][1]*y,V[1]+R[1][0]*x+R[1][1]*y]);1I;27 3:o(!a.U){8 w}9 C=a.1r(7).4;R=S.1R(t,a.U).4;x=7.4[0]-C[0];y=7.4[1]-C[1];z=7.4[2]-C[2];8 v.u([C[0]+R[0][0]*x+R[0][1]*y+R[0][2]*z,C[1]+R[1][0]*x+R[1][1]*y+R[1][2]*z,C[2]+R[2][0]*x+R[2][1]*y+R[2][2]*z]);1I;2P:8 w}},1t:l(a){o(a.K){9 P=7.4.2O();9 C=a.1r(P).4;8 v.u([C[0]+(C[0]-P[0]),C[1]+(C[1]-P[1]),C[2]+(C[2](P[2]||0))])}1d{9 Q=a.4||a;o(7.4.q!=Q.q){8 w}8 7.1b(l(x,i){8 Q[i-1]+(Q[i-1]x)})}},1N:l(){9 V=7.1q();2S(V.4.q){27 3:1I;27 2:V.4.19(0);1I;2P:8 w}8 V},2n:l(){8\'[\'+7.4.2K(\', \')+\']\'},26:l(a){7.4=(a.4||a).2O();8 7}};v.u=l(a){9 V=25 v();8 V.26(a)};v.i=v.u([1,0,0]);v.j=v.u([0,1,0]);v.k=v.u([0,0,1]);v.2J=l(n){9 a=[];J{a.19(F.2F())}H(--n);8 v.u(a)};v.1j=l(n){9 a=[];J{a.19(0)}H(--n);8 v.u(a)};l S(){}S.23={e:l(i,j){o(i<1||i>7.4.q||j<1||j>7.4[0].q){8 w}8 7.4[i-1][j-1]},33:l(i){o(i>7.4.q){8 w}8 v.u(7.4[i-1])},2E:l(j){o(j>7.4[0].q){8 w}9 a=[],n=7.4.q,k=n,i;J{i=k-n;a.19(7.4[i][j-1])}H(--n);8 v.u(a)},2R:l(){8{2D:7.4.q,1p:7.4[0].q}},2D:l(){8 7.4.q},1p:l(){8 7.4[0].q},24:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(7.4.q!=M.q||7.4[0].q!=M[0].q){8 1L}9 b=7.4.q,15=b,i,G,10=7.4[0].q,j;J{i=15-b;G=10;J{j=10-G;o(F.13(7.4[i][j]-M[i][j])>17.16){8 1L}}H(--G)}H(--b);8 2x},1q:l(){8 S.u(7.4)},1b:l(a){9 b=[],12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;b[i]=[];J{j=10-G;b[i][j]=a(7.4[i][j],i+1,j+1)}H(--G)}H(--12);8 S.u(b)},2i:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}8(7.4.q==M.q&&7.4[0].q==M[0].q)},2j:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2i(M)){8 w}8 7.1b(l(x,i,j){8 x+M[i-1][j-1]})},2C:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2i(M)){8 w}8 7.1b(l(x,i,j){8 x-M[i-1][j-1]})},2B:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}8(7.4[0].q==M.q)},22:l(a){o(!a.4){8 7.1b(l(x){8 x*a})}9 b=a.1u?2x:1L;9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2B(M)){8 w}9 d=7.4.q,15=d,i,G,10=M[0].q,j;9 e=7.4[0].q,4=[],21,20,c;J{i=15-d;4[i]=[];G=10;J{j=10-G;21=0;20=e;J{c=e-20;21+=7.4[i][c]*M[c][j]}H(--20);4[i][j]=21}H(--G)}H(--d);9 M=S.u(4);8 b?M.2E(1):M},x:l(a){8 7.22(a)},32:l(a,b,c,d){9 e=[],12=c,i,G,j;9 f=7.4.q,1p=7.4[0].q;J{i=c-12;e[i]=[];G=d;J{j=d-G;e[i][j]=7.4[(a+i-1)%f][(b+j-1)%1p]}H(--G)}H(--12);8 S.u(e)},31:l(){9 a=7.4.q,1p=7.4[0].q;9 b=[],12=1p,i,G,j;J{i=1p-12;b[i]=[];G=a;J{j=a-G;b[i][j]=7.4[j][i]}H(--G)}H(--12);8 S.u(b)},1y:l(){8(7.4.q==7.4[0].q)},2A:l(){9 m=0,12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;J{j=10-G;o(F.13(7.4[i][j])>F.13(m)){m=7.4[i][j]}}H(--G)}H(--12);8 m},2Z:l(x){9 a=w,12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;J{j=10-G;o(7.4[i][j]==x){8{i:i+1,j:j+1}}}H(--G)}H(--12);8 w},30:l(){o(!7.1y){8 w}9 a=[],n=7.4.q,k=n,i;J{i=k-n;a.19(7.4[i][i])}H(--n);8 v.u(a)},1K:l(){9 M=7.1q(),1c;9 n=7.4.q,k=n,i,1s,1n=7.4[0].q,p;J{i=k-n;o(M.4[i][i]==0){2e(j=i+1;j<k;j++){o(M.4[j][i]!=0){1c=[];1s=1n;J{p=1n-1s;1c.19(M.4[i][p]+M.4[j][p])}H(--1s);M.4[i]=1c;1I}}}o(M.4[i][i]!=0){2e(j=i+1;j<k;j++){9 a=M.4[j][i]/M.4[i][i];1c=[];1s=1n;J{p=1n-1s;1c.19(p<=i?0:M.4[j][p]-M.4[i][p]*a)}H(--1s);M.4[j]=1c}}}H(--n);8 M},3h:l(){8 7.1K()},2z:l(){o(!7.1y()){8 w}9 M=7.1K();9 a=M.4[0][0],n=M.4.q-1,k=n,i;J{i=k-n+1;a=a*M.4[i][i]}H(--n);8 a},3f:l(){8 7.2z()},2y:l(){8(7.1y()&&7.2z()===0)},2Y:l(){o(!7.1y()){8 w}9 a=7.4[0][0],n=7.4.q-1,k=n,i;J{i=k-n+1;a+=7.4[i][i]}H(--n);8 a},3e:l(){8 7.2Y()},1Y:l(){9 M=7.1K(),1Y=0;9 a=7.4.q,15=a,i,G,10=7.4[0].q,j;J{i=15-a;G=10;J{j=10-G;o(F.13(M.4[i][j])>17.16){1Y++;1I}}H(--G)}H(--a);8 1Y},3d:l(){8 7.1Y()},2W:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}9 T=7.1q(),1p=T.4[0].q;9 b=T.4.q,15=b,i,G,10=M[0].q,j;o(b!=M.q){8 w}J{i=15-b;G=10;J{j=10-G;T.4[i][1p+j]=M[i][j]}H(--G)}H(--b);8 T},2w:l(){o(!7.1y()||7.2y()){8 w}9 a=7.4.q,15=a,i,j;9 M=7.2W(S.I(a)).1K();9 b,1n=M.4[0].q,p,1c,2v;9 c=[],2c;J{i=a-1;1c=[];b=1n;c[i]=[];2v=M.4[i][i];J{p=1n-b;2c=M.4[i][p]/2v;1c.19(2c);o(p>=15){c[i].19(2c)}}H(--b);M.4[i]=1c;2e(j=0;j<i;j++){1c=[];b=1n;J{p=1n-b;1c.19(M.4[j][p]-M.4[i][p]*M.4[j][i])}H(--b);M.4[j]=1c}}H(--a);8 S.u(c)},3c:l(){8 7.2w()},2d:l(){8 7.1b(l(x){8 F.2d(x)})},2V:l(x){8 7.1b(l(p){8(F.13(p-x)<=17.16)?x:p})},2n:l(){9 a=[];9 n=7.4.q,k=n,i;J{i=k-n;a.19(v.u(7.4[i]).2n())}H(--n);8 a.2K(\'\\n\')},26:l(a){9 i,4=a.4||a;o(1g(4[0][0])!=\'1f\'){9 b=4.q,15=b,G,10,j;7.4=[];J{i=15-b;G=4[i].q;10=G;7.4[i]=[];J{j=10-G;7.4[i][j]=4[i][j]}H(--G)}H(--b);8 7}9 n=4.q,k=n;7.4=[];J{i=k-n;7.4.19([4[i]])}H(--n);8 7}};S.u=l(a){9 M=25 S();8 M.26(a)};S.I=l(n){9 a=[],k=n,i,G,j;J{i=k-n;a[i]=[];G=k;J{j=k-G;a[i][j]=(i==j)?1:0}H(--G)}H(--n);8 S.u(a)};S.2X=l(a){9 n=a.q,k=n,i;9 M=S.I(n);J{i=k-n;M.4[i][i]=a[i]}H(--n);8 M};S.1R=l(b,a){o(!a){8 S.u([[F.1H(b),-F.1G(b)],[F.1G(b),F.1H(b)]])}9 d=a.1q();o(d.4.q!=3){8 w}9 e=d.1u();9 x=d.4[0]/e,y=d.4[1]/e,z=d.4[2]/e;9 s=F.1G(b),c=F.1H(b),t=1-c;8 S.u([[t*x*x+c,t*x*y-s*z,t*x*z+s*y],[t*x*y+s*z,t*y*y+c,t*y*z-s*x],[t*x*z-s*y,t*y*z+s*x,t*z*z+c]])};S.3b=l(t){9 c=F.1H(t),s=F.1G(t);8 S.u([[1,0,0],[0,c,-s],[0,s,c]])};S.39=l(t){9 c=F.1H(t),s=F.1G(t);8 S.u([[c,0,s],[0,1,0],[-s,0,c]])};S.38=l(t){9 c=F.1H(t),s=F.1G(t);8 S.u([[c,-s,0],[s,c,0],[0,0,1]])};S.2J=l(n,m){8 S.1j(n,m).1b(l(){8 F.2F()})};S.1j=l(n,m){9 a=[],12=n,i,G,j;J{i=n-12;a[i]=[];G=m;J{j=m-G;a[i][j]=0}H(--G)}H(--12);8 S.u(a)};l 14(){}14.23={24:l(a){8(7.1m(a)&&7.1h(a.K))},1q:l(){8 14.u(7.K,7.U)},2U:l(a){9 V=a.4||a;8 14.u([7.K.4[0]+V[0],7.K.4[1]+V[1],7.K.4[2]+(V[2]||0)],7.U)},1m:l(a){o(a.W){8 a.1m(7)}9 b=7.U.1C(a.U);8(F.13(b)<=17.16||F.13(b-F.1A)<=17.16)},1o:l(a){o(a.W){8 a.1o(7)}o(a.U){o(7.1m(a)){8 7.1o(a.K)}9 N=7.U.2f(a.U).2q().4;9 A=7.K.4,B=a.K.4;8 F.13((A[0]-B[0])*N[0]+(A[1]-B[1])*N[1]+(A[2]-B[2])*N[2])}1d{9 P=a.4||a;9 A=7.K.4,D=7.U.4;9 b=P[0]-A[0],2a=P[1]-A[1],29=(P[2]||0)-A[2];9 c=F.1x(b*b+2a*2a+29*29);o(c===0)8 0;9 d=(b*D[0]+2a*D[1]+29*D[2])/c;9 e=1-d*d;8 F.13(c*F.1x(e<0?0:e))}},1h:l(a){9 b=7.1o(a);8(b!==w&&b<=17.16)},2T:l(a){8 a.1h(7)},1v:l(a){o(a.W){8 a.1v(7)}8(!7.1m(a)&&7.1o(a)<=17.16)},1U:l(a){o(a.W){8 a.1U(7)}o(!7.1v(a)){8 w}9 P=7.K.4,X=7.U.4,Q=a.K.4,Y=a.U.4;9 b=X[0],1z=X[1],1B=X[2],1T=Y[0],1S=Y[1],1M=Y[2];9 c=P[0]-Q[0],2s=P[1]-Q[1],2r=P[2]-Q[2];9 d=-b*c-1z*2s-1B*2r;9 e=1T*c+1S*2s+1M*2r;9 f=b*b+1z*1z+1B*1B;9 g=1T*1T+1S*1S+1M*1M;9 h=b*1T+1z*1S+1B*1M;9 k=(d*g/f+h*e)/(g-h*h);8 v.u([P[0]+k*b,P[1]+k*1z,P[2]+k*1B])},1r:l(a){o(a.U){o(7.1v(a)){8 7.1U(a)}o(7.1m(a)){8 w}9 D=7.U.4,E=a.U.4;9 b=D[0],1l=D[1],1k=D[2],1P=E[0],1O=E[1],1Q=E[2];9 x=(1k*1P-b*1Q),y=(b*1O-1l*1P),z=(1l*1Q-1k*1O);9 N=v.u([x*1Q-y*1O,y*1P-z*1Q,z*1O-x*1P]);9 P=11.u(a.K,N);8 P.1U(7)}1d{9 P=a.4||a;o(7.1h(P)){8 v.u(P)}9 A=7.K.4,D=7.U.4;9 b=D[0],1l=D[1],1k=D[2],1w=A[0],18=A[1],1a=A[2];9 x=b(P[1]-18)-1l*(P[0]-1w),y=1l*((P[2]||0)-1a)-1k*(P[1]-18),z=1k*(P[0]-1w)-b*((P[2]||0)-1a);9 V=v.u([1l*x-1k*z,1k*y-b*x,b*z-1l*y]);9 k=7.1o(P)/V.1u();8 v.u([P[0]+V.4[0]k,P[1]+V.4[1]*k,(P[2]||0)+V.4[2]*k])}},1V:l(t,a){o(1g(a.U)==\'1f\'){a=14.u(a.1N(),v.k)}9 R=S.1R(t,a.U).4;9 C=a.1r(7.K).4;9 A=7.K.4,D=7.U.4;9 b=C[0],1E=C[1],1J=C[2],1w=A[0],18=A[1],1a=A[2];9 x=1w-b,y=18-1E,z=1a-1J;8 14.u([b+R[0][0]*x+R[0][1]*y+R[0][2]*z,1E+R[1][0]*x+R[1][1]*y+R[1][2]*z,1J+R[2][0]*x+R[2][1]*y+R[2][2]*z],[R[0][0]*D[0]+R[0][1]*D[1]+R[0][2]*D[2],R[1][0]*D[0]+R[1][1]*D[1]+R[1][2]*D[2],R[2][0]*D[0]+R[2][1]*D[1]+R[2][2]*D[2]])},1t:l(a){o(a.W){9 A=7.K.4,D=7.U.4;9 b=A[0],18=A[1],1a=A[2],2N=D[0],1l=D[1],1k=D[2];9 c=7.K.1t(a).4;9 d=b+2N,2h=18+1l,2o=1a+1k;9 Q=a.1r([d,2h,2o]).4;9 e=[Q[0]+(Q[0]-d)-c[0],Q[1]+(Q[1]-2h)-c[1],Q[2]+(Q[2]-2o)-c[2]];8 14.u(c,e)}1d o(a.U){8 7.1V(F.1A,a)}1d{9 P=a.4||a;8 14.u(7.K.1t([P[0],P[1],(P[2]||0)]),7.U)}},1Z:l(a,b){a=v.u(a);b=v.u(b);o(a.4.q==2){a.4.19(0)}o(b.4.q==2){b.4.19(0)}o(a.4.q>3||b.4.q>3){8 w}9 c=b.1u();o(c===0){8 w}7.K=a;7.U=v.u([b.4[0]/c,b.4[1]/c,b.4[2]/c]);8 7}};14.u=l(a,b){9 L=25 14();8 L.1Z(a,b)};14.X=14.u(v.1j(3),v.i);14.Y=14.u(v.1j(3),v.j);14.Z=14.u(v.1j(3),v.k);l 11(){}11.23={24:l(a){8(7.1h(a.K)&&7.1m(a))},1q:l(){8 11.u(7.K,7.W)},2U:l(a){9 V=a.4||a;8 11.u([7.K.4[0]+V[0],7.K.4[1]+V[1],7.K.4[2]+(V[2]||0)],7.W)},1m:l(a){9 b;o(a.W){b=7.W.1C(a.W);8(F.13(b)<=17.16||F.13(F.1A-b)<=17.16)}1d o(a.U){8 7.W.2k(a.U)}8 w},2k:l(a){9 b=7.W.1C(a.W);8(F.13(F.1A/2-b)<=17.16)},1o:l(a){o(7.1v(a)||7.1h(a)){8 0}o(a.K){9 A=7.K.4,B=a.K.4,N=7.W.4;8 F.13((A[0]-B[0])*N[0]+(A[1]-B[1])*N[1]+(A[2]-B[2])*N[2])}1d{9 P=a.4||a;9 A=7.K.4,N=7.W.4;8 F.13((A[0]-P[0])*N[0]+(A[1]-P[1])*N[1]+(A[2](P[2]||0))*N[2])}},1h:l(a){o(a.W){8 w}o(a.U){8(7.1h(a.K)&&7.1h(a.K.2j(a.U)))}1d{9 P=a.4||a;9 A=7.K.4,N=7.W.4;9 b=F.13(N[0](A[0]P[0])+N[1](A[1]-P[1])+N[2](A[2](P[2]||0)));8(b<=17.16)}},1v:l(a){o(1g(a.U)==\'1f\'&&1g(a.W)==\'1f\'){8 w}8!7.1m(a)},1U:l(a){o(!7.1v(a)){8 w}o(a.U){9 A=a.K.4,D=a.U.4,P=7.K.4,N=7.W.4;9 b=(N[0](P[0]A[0])+N[1](P[1]-A[1])+N[2](P[2]-A[2]))/(N[0]*D[0]+N[1]*D[1]+N[2]*D[2]);8 v.u([A[0]+D[0]*b,A[1]+D[1]*b,A[2]+D[2]*b])}1d o(a.W){9 c=7.W.2f(a.W).2q();9 N=7.W.4,A=7.K.4,O=a.W.4,B=a.K.4;9 d=S.1j(2,2),i=0;H(d.2y()){i++;d=S.u([[N[i%3],N[(i+1)%3]],[O[i%3],O[(i+1)%3]]])}9 e=d.2w().4;9 x=N[0]*A[0]+N[1]*A[1]+N[2]*A[2];9 y=O[0]*B[0]+O[1]*B[1]+O[2]*B[2];9 f=[e[0][0]*x+e[0][1]*y,e[1][0]*x+e[1][1]*y];9 g=[];2e(9 j=1;j<=3;j++){g.19((i==j)?0:f[(j+(5-i)%3)%3])}8 14.u(g,c)}},1r:l(a){9 P=a.4||a;9 A=7.K.4,N=7.W.4;9 b=(A[0]-P[0])*N[0]+(A[1]-P[1])*N[1]+(A[2](P[2]||0))*N[2];8 v.u([P[0]+N[0]*b,P[1]+N[1]*b,(P[2]||0)+N[2]*b])},1V:l(t,a){9 R=S.1R(t,a.U).4;9 C=a.1r(7.K).4;9 A=7.K.4,N=7.W.4;9 b=C[0],1E=C[1],1J=C[2],1w=A[0],18=A[1],1a=A[2];9 x=1w-b,y=18-1E,z=1a-1J;8 11.u([b+R[0][0]*x+R[0][1]*y+R[0][2]*z,1E+R[1][0]*x+R[1][1]*y+R[1][2]*z,1J+R[2][0]*x+R[2][1]*y+R[2][2]*z],[R[0][0]*N[0]+R[0][1]*N[1]+R[0][2]*N[2],R[1][0]*N[0]+R[1][1]*N[1]+R[1][2]*N[2],R[2][0]*N[0]+R[2][1]*N[1]+R[2][2]*N[2]])},1t:l(a){o(a.W){9 A=7.K.4,N=7.W.4;9 b=A[0],18=A[1],1a=A[2],2M=N[0],2L=N[1],2Q=N[2];9 c=7.K.1t(a).4;9 d=b+2M,2p=18+2L,2m=1a+2Q;9 Q=a.1r([d,2p,2m]).4;9 e=[Q[0]+(Q[0]d)-c[0],Q[1]+(Q[1]-2p)-c[1],Q[2]+(Q[2]-2m)-c[2]];8 11.u(c,e)}1d o(a.U){8 7.1V(F.1A,a)}1d{9 P=a.4||a;8 11.u(7.K.1t([P[0],P[1],(P[2]||0)]),7.W)}},1Z:l(a,b,c){a=v.u(a);a=a.1N();o(a===w){8 w}b=v.u(b);b=b.1N();o(b===w){8 w}o(1g(c)==\'1f\'){c=w}1d{c=v.u(c);c=c.1N();o(c===w){8 w}}9 d=a.4[0],18=a.4[1],1a=a.4[2];9 e=b.4[0],1W=b.4[1],1X=b.4[2];9 f,1i;o(c!==w){9 g=c.4[0],2l=c.4[1],2t=c.4[2];f=v.u([(1W-18)(2t-1a)(1X-1a)(2l-18),(1X-1a)(g-d)(e-d)(2t-1a),(e-d)(2l-18)(1W-18)*(g-d)]);1i=f.1u();o(1i===0){8 w}f=v.u([f.4[0]/1i,f.4[1]/1i,f.4[2]/1i])}1d{1i=F.1x(e*e+1W*1W+1X*1X);o(1i===0){8 w}f=v.u([b.4[0]/1i,b.4[1]/1i,b.4[2]/1i])}7.K=a;7.W=f;8 7}};11.u=l(a,b,c){9 P=25 11();8 P.1Z(a,b,c)};11.2I=11.u(v.1j(3),v.k);11.2H=11.u(v.1j(3),v.i);11.2G=11.u(v.1j(3),v.j);11.36=11.2I;11.35=11.2H;11.3j=11.2G;9 $V=v.u;9 $M=S.u;9 $L=14.u;9 $P=11.u;', 62, 206, '||||elements|||this|return|var||||||||||||function|||if||length||||create|Vector|null|||||||||Math|nj|while||do|anchor||||||||Matrix||direction||normal||||kj|Plane|ni|abs|Line|ki|precision|Sylvester|A2|push|A3|map|els|else||undefined|typeof|contains|mod|Zero|D3|D2|isParallelTo|kp|distanceFrom|cols|dup|pointClosestTo|np|reflectionIn|modulus|intersects|A1|sqrt|isSquare|X2|PI|X3|angleFrom|mod1|C2|mod2|sin|cos|break|C3|toRightTriangular|false|Y3|to3D|E2|E1|E3|Rotation|Y2|Y1|intersectionWith|rotate|v12|v13|rank|setVectors|nc|sum|multiply|prototype|eql|new|setElements|case|each|PA3|PA2|part|new_element|round|for|cross|product|AD2|isSameSizeAs|add|isPerpendicularTo|v22|AN3|inspect|AD3|AN2|toUnitVector|PsubQ3|PsubQ2|v23|dot|divisor|inverse|true|isSingular|determinant|max|canMultiplyFromLeft|subtract|rows|col|random|ZX|YZ|XY|Random|join|N2|N1|D1|slice|default|N3|dimensions|switch|liesIn|translate|snapTo|augment|Diagonal|trace|indexOf|diagonal|transpose|minor|row|isAntiparallelTo|ZY|YX|acos|RotationZ|RotationY|liesOn|RotationX|inv|rk|tr|det|toDiagonalMatrix|toUpperTriangular|version|XZ'.split('|'), 0, {}))
    </script><!-UP: Need to be studied more   -  DOWN: gsutils-->
    <script id="glutils" type="text/javascript">
        Matrix.Translation = function(v) {
            if (v.elements.length == 2) {
                var r = Matrix.I(3);
                r.elements[2][0] = v.elements[0];
                r.elements[2][1] = v.elements[1];
                return r;
            }
            if (v.elements.length == 3) {
                var r = Matrix.I(4);
                r.elements[0][3] = v.elements[0];
                r.elements[1][3] = v.elements[1];
                r.elements[2][3] = v.elements[2];
                return r;
            }
            throw "Invalid length for Translation";
        }
        Matrix.prototype.flatten = function() {
            var result = [];
            if (this.elements.length == 0)
                return [];
            for (var j = 0; j < this.elements[0].length; j++)
                for (var i = 0; i < this.elements.length; i++)
                result.push(this.elements[i][j]);
            return result;
        }
        Matrix.prototype.make4x4 = function() {
            if (this.rows() == 4 &&
        this.cols() == 4)
                return this;
            if (this.rows() != 3 &&
        this.cols() != 3)
                return null;
            return this.augment($V([0, 0, 0]))
               .transpose()
               .augment($V([0, 0, 0, 1]))
               .transpose();
        };
        Matrix.prototype.ensure4x4 = function() {
            if (this.elements.length == 4 &&
        this.elements[0].length == 4)
                return this;
            if (this.elements.length > 4 ||
        this.elements[0].length > 4)
                return null;
            for (var i = 0; i < this.elements.length; i++) {
                for (var j = this.elements[i].length; j < 4; j++) {
                    if (i == j)
                        this.elements[i].push(1);
                    else
                        this.elements[i].push(0);
                }
            }
            for (var i = this.elements.length; i < 4; i++) {
                if (i == 0)
                    this.elements.push([1, 0, 0, 0]);
                else if (i == 1)
                    this.elements.push([0, 1, 0, 0]);
                else if (i == 2)
                    this.elements.push([0, 0, 1, 0]);
                else if (i == 3)
                    this.elements.push([0, 0, 0, 1]);
            }
            return this;
        };
        Matrix.prototype.make3x3 = function() {
            if (this.elements.length != 4 ||
        this.elements[0].length != 4)
                return null;
            return Matrix.create([[this.elements[0][0], this.elements[0][1], this.elements[0][2]],
                          [this.elements[1][0], this.elements[1][1], this.elements[1][2]],
                          [this.elements[2][0], this.elements[2][1], this.elements[2][2]]]);
        };
        Vector.prototype.flatten = function() {
            return this.elements;
        };
        function mht(m) {
            var s = "";
            if (m.length == 16) {
                for (var i = 0; i < 4; i++) {
                    s += "<span style='font-family: monospace'>[" + m[i * 4 + 0].toFixed(4) + "," + m[i * 4 + 1].toFixed(4) + "," + m[i * 4 + 2].toFixed(4) + "," + m[i * 4 + 3].toFixed(4) + "]</span><br>";
                }
            } else if (m.length == 9) {
                for (var i = 0; i < 3; i++) {
                    s += "<span style='font-family: monospace'>[" + m[i * 3 + 0].toFixed(4) + "," + m[i * 3 + 1].toFixed(4) + "," + m[i * 3 + 2].toFixed(4) + "]</font><br>";
                }
            } else {
                return m.toString();
            }
            return s;
        }
        // gluLookAt
        function makeLookAt(ex, ey, ez,
                    cx, cy, cz,
                    ux, uy, uz) {
            var eye = $V([ex, ey, ez]);
            var center = $V([cx, cy, cz]);
            var up = $V([ux, uy, uz]);
            var mag;
            var z = eye.subtract(center).toUnitVector();
            var x = up.cross(z).toUnitVector();
            var y = z.cross(x).toUnitVector();
            var m = $M([[x.e(1), x.e(2), x.e(3), 0],
                        [y.e(1), y.e(2), y.e(3), 0],
                        [z.e(1), z.e(2), z.e(3), 0],
                        [0, 0, 0, 1]]);
            var t = $M([[1, 0, 0, -ex],
                        [0, 1, 0, -ey],
                        [0, 0, 1, -ez],
                        [0, 0, 0, 1]]);
            return m.x(t);
        }
        // glOrtho
        function makeOrtho(left, right,
                   bottom, top,
                   znear, zfar) {
            var tx = -(right + left) / (right - left);
            var ty = -(top + bottom) / (top - bottom);
            var tz = -(zfar + znear) / (zfar - znear);
            return $M([[2 / (right - left), 0, 0, tx],
                       [0, 2 / (top - bottom), 0, ty],
                       [0, 0, -2 / (zfar - znear), tz],
                       [0, 0, 0, 1]]);
        }
        // gluPerspective
        function makePerspective(fovy, aspect, znear, zfar) {
            var ymax = znear * Math.tan(fovy * Math.PI / 360.0);
            var ymin = -ymax;
            var xmin = ymin * aspect;
            var xmax = ymax * aspect;

            return makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
        }
        // glFrustum
        function makeFrustum(left, right,
                     bottom, top,
                     znear, zfar) {
            var X = 2 * znear / (right - left);
            var Y = 2 * znear / (top - bottom);
            var A = (right + left) / (right - left);
            var B = (top + bottom) / (top - bottom);
            var C = -(zfar + znear) / (zfar - znear);
            var D = -2 * zfar * znear / (zfar - znear);

            return $M([[X, 0, A, 0],
                       [0, Y, B, 0],
                       [0, 0, C, D],
                       [0, 0, -1, 0]]);
        }
        // glOrtho
        function makeOrtho(left, right, bottom, top, znear, zfar) {
            var tx = -(right + left) / (right - left);
            var ty = -(top + bottom) / (top - bottom);
            var tz = -(zfar + znear) / (zfar - znear);
            return $M([[2 / (right - left), 0, 0, tx],
                       [0, 2 / (top - bottom), 0, ty],
                       [0, 0, -2 / (zfar - znear), tz],
                       [0, 0, 0, 1]]);
        }
        function makeIdentity() {
            return $M([[1, 0, 0, 0],
                       [0, 1, 0, 0],
                       [0, 0, 1, 0],
                       [0, 0, 0, 1]]);
        }
        // glPush/PopMatrix
        var mvMatrixStack = [];
        var mvMatrix = Matrix.I(4);
        function pushMatrix(m) {
            if (m) {
                mvMatrixStack.push(m.dup());
                mvMatrix = m.dup();
            } else {
                mvMatrixStack.push(mvMatrix.dup());
            }
        }
        function popMatrix() {
            if (mvMatrixStack.length == 0)
                throw "Invalid popMatrix!";
            mvMatrix = mvMatrixStack.pop();
            return mvMatrix;
        }
        function mvMult(m) {
            mvMatrix = mvMatrix.x(m);
        }
        function mvTranslate(v) {
            var m = Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4();
            mvMult(m);
        }
        function mvRotate(ang, v) {
            var arad = ang * Math.PI / 180.0;
            var m = Matrix.Rotation(arad, $V([v[0], v[1], v[2]])).ensure4x4();
            mvMult(m);
        }
        function mvScale(v) {
            var m = Matrix.Diagonal([v[0], v[1], v[2], 1]);
            mvMult(m);
        }
        function mvInvert() {
            mvMatrix = mvMatrix.inv();
        }
      </script>
    <script id="webgl-demo" type="text/javascript">
        var canvas;
        var gl;
        var cubeVerticesBuffer;
        var cubeVerticesTextureCoordBuffer;
        var cubeVerticesIndexBuffer;
        var cubeVerticesIndexBuffer;
        var cubeRotation = 0.0;
        var lastCubeUpdateTime = 0;
        var cubeImage;
        var cubeTexture;
        var mvMatrix;
        var shaderProgram;
        var vertexPositionAttribute;
        var textureCoordAttribute;
        var perspectiveMatrix;

        // start
        // Called when the canvas is created to get the object rolling.
        function start() {
            canvas = document.getElementById("glcanvas");
            initWebGL(canvas);      // Initialize the GL context
            // Only continue if WebGL is available and working
            if (gl) {
                gl.clearColor(1.0, 1.0, 1.0, 1.0);  // Clear to black, fully opaque
                gl.clearDepth(1.0);                 // Clear everything
                gl.enable(gl.DEPTH_TEST);           // Enable depth testing
                gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
                // Initialize the shaders; this is where all the lighting for the
                // vertices and so forth is established.
                initShaders();
                // Here's where we call the routine that builds all the objects
                // we'll be drawing.
                initBuffers();
                // Next, load and set up the textures we'll be using.
                initTextures();
                // Set up to draw the scene periodically. - that's what it makes it laggy, be careful changing it, a value between 28 n 22 is more nice but needs more processor resources
                setInterval(drawScene, 92);
            }
        }
        // initWebGL
        // Initialize WebGL, returning the GL context or null if
        // WebGL isn't available or could not be initialized.
        function initWebGL() {
            gl = null;
            try {
                gl = canvas.getContext("experimental-webgl");
            }
            catch (e) {
            }
            // If we don't have a GL context, give up now
            if (!gl) {
                alert("Unable to initialize WebGL. Your browser may not support it.");
            }
        }
        // initBuffers
        // Initialize the buffers we'll need. For this demo, we just have
        // one object -- a simple two-dimensional cube.
        function initBuffers() {
            // Create a buffer for the cube's vertices.
            cubeVerticesBuffer = gl.createBuffer();
            // Select the cubeVerticesBuffer as the one to apply vertex
            // operations to from here out.
            gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
            // Now create an array of vertices for the cube.
            var vertices = [
            // Front face
    -1.0, -1.0, 1.0,
     1.0, -1.0, 1.0,
     1.0, 1.0, 1.0,
    -1.0, 1.0, 1.0,
            // Back face
    -1.0, -1.0, -1.0,
    -1.0, 1.0, -1.0,
     1.0, 1.0, -1.0,
     1.0, -1.0, -1.0,
            // Top face
    -1.0, 1.0, -1.0,
    -1.0, 1.0, 1.0,
     1.0, 1.0, 1.0,
     1.0, 1.0, -1.0,
            // Bottom face
    -1.0, -1.0, -1.0,
     1.0, -1.0, -1.0,
     1.0, -1.0, 1.0,
    -1.0, -1.0, 1.0,
            // Right face
     1.0, -1.0, -1.0,
     1.0, 1.0, -1.0,
     1.0, 1.0, 1.0,
     1.0, -1.0, 1.0,
            // Left face
    -1.0, -1.0, -1.0,
    -1.0, -1.0, 1.0,
    -1.0, 1.0, 1.0,
    -1.0, 1.0, -1.0
  ];
            // Now pass the list of vertices into WebGL to build the shape. We
            // do this by creating a WebGLFloatArray from the JavaScript array,
            // then use it to fill the current vertex buffer.
            // Float32Array
            //gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            // Map the texture onto the cube's faces.
            cubeVerticesTextureCoordBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
            var textureCoordinates = [
            // Front
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
            // Back
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
            // Top
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
            // Bottom
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
            // Right
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
            // Left
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0
  ];
            //gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
                gl.STATIC_DRAW);
            // Build the element array buffer; this specifies the indices
            // into the vertex array for each face's vertices.
            cubeVerticesIndexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
            // This array defines each face as two triangles, using the
            // indices into the vertex array to specify each triangle's
            // position.
            var cubeVertexIndices = [
    0, 1, 2, 0, 2, 3,    // front
    4, 5, 6, 4, 6, 7,    // back
    8, 9, 10, 8, 10, 11,   // top
    12, 13, 14, 12, 14, 15,   // bottom
    16, 17, 18, 16, 18, 19,   // right
    20, 21, 22, 20, 22, 23    // left
  ]
            // Now send the element array to GL
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
            //new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
      new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
        }
        // initTextures
        // Initialize the textures we'll be using, then initiate a load of
        // the texture images. The handleTextureLoaded() callback will finish
        // the job; it gets called each time a texture finishes loading.
        function initTextures() {
            //gl.enable(gl.TEXTURE_2D);
            cubeTexture = gl.createTexture();
            cubeImage = new Image();
            cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
            //flipped b64 image to render
            //EV(ú=üx);                 //Cycle image var
            //cubeImage.src = üw + ú;   //Must be fixed, probably i need sleep when i deal with vars as strings
            cubeImage.src = üw + üx;    //Sould be desactivated in order to do the prev..
            //setTimeout(loopTexture(),2000);
        }
        function loopTexture() {
            if (gThumbImageRef != null) {
                gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gThumbImageRef);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
                gl.generateMipmap(gl.TEXTURE_2D);
                gl.bindTexture(gl.TEXTURE_2D, null);
            }
            //setTimeout("loopTexture()", 300);
        }
        function handleTextureLoaded(image, texture) {
            gl.bindTexture(gl.TEXTURE_2D, texture);
            //gl.texImage2D(gl.TEXTURE_2D, 0, image, true);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
            gl.generateMipmap(gl.TEXTURE_2D);
            gl.bindTexture(gl.TEXTURE_2D, null);
        }
        // drawScene
        // Draw the scene.
        function drawScene() {
            // Clear the canvas before we start drawing on it.
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            // Establish the perspective with which we want to view the
            // scene. Our field of view is 45 degrees, with a width/height
            // ratio of 640:480, and we only want to see objects between 0.1 units
            // and 100 units away from the camera.
            perspectiveMatrix = makePerspective(45, 640.0 / 480.0, 0.1, 100.0);
            // Set the drawing position to the "identity" point, which is
            // the center of the scene.
            loadIdentity();
            // Now move the drawing position a bit to where we want to start
            // drawing the cube.
            mvTranslate([-0.0, 0.0, -6.0]);
            // Save the current matrix, then rotate before we draw.
            mvPushMatrix();
            mvRotate(cubeRotation, [1, 0, 1]);
            // Draw the cube by binding the array buffer to the cube's vertices
            // array, setting attributes, and pushing it to GL.
            gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
            gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
            // Set the texture coordinates attribute for the vertices.
            gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
            gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
            // Specify the texture to map onto the faces.
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
            gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
            // Draw the cube.
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
            setMatrixUniforms();
            gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
            // Restore the original matrix
            mvPopMatrix();
            // Update the rotation for the next draw, if it's time to do so.
            var currentTime = (new Date).getTime();
            if (lastCubeUpdateTime) {
                var delta = currentTime - lastCubeUpdateTime;
                cubeRotation += (30 * delta) / 1000.0;
            }
            lastCubeUpdateTime = currentTime;
        }
        // initShaders
        // Initialize the shaders, so WebGL knows how to light our scene.
        function initShaders() {
            var fragmentShader = getShader(gl, "shader-fs");
            var vertexShader = getShader(gl, "shader-vs");
            // Create the shader program
            shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);
            // If creating the shader program failed, alert
            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                alert("Unable to initialize the shader program.");
            }
            gl.useProgram(shaderProgram);
            vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
            gl.enableVertexAttribArray(vertexPositionAttribute);
            textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
            gl.enableVertexAttribArray(textureCoordAttribute);
        }
        // getShader
        // Loads a shader program by scouring the current document,
        // looking for a script with the specified ID.
        function getShader(gl, id) {
            var shaderScript = document.getElementById(id);
            // Didn't find an element with the specified ID; abort.
            if (!shaderScript) {
                return null;
            }
            // Walk through the source element's children, building the
            // shader source string.
            var theSource = "";
            var currentChild = shaderScript.firstChild;
            while (currentChild) {
                if (currentChild.nodeType == 3) {
                    theSource += currentChild.textContent;
                }
                currentChild = currentChild.nextSibling;
            }
            // Now figure out what type of shader script we have,
            // based on its MIME type.
            var shader;
            if (shaderScript.type == "x-shader/x-fragment") {
                shader = gl.createShader(gl.FRAGMENT_SHADER);
            } else if (shaderScript.type == "x-shader/x-vertex") {
                shader = gl.createShader(gl.VERTEX_SHADER);
            } else {
                return null;  // Unknown shader type
            }
            // Send the source to the shader object
            gl.shaderSource(shader, theSource);
            // Compile the shader program
            gl.compileShader(shader);
            // See if it compiled successfully
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
                return null;
            }
            return shader;
        }
        // Matrix utility functions
        function loadIdentity() {
            mvMatrix = Matrix.I(4);
        }
        function multMatrix(m) {
            mvMatrix = mvMatrix.x(m);
        }
        function mvTranslate(v) {
            multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
        }
        function setMatrixUniforms() {
            var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
            gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
            var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
            gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
        }
        var mvMatrixStack = [];
        function mvPushMatrix(m) {
            if (m) {
                mvMatrixStack.push(m.dup());
                mvMatrix = m.dup();
            } else {
                mvMatrixStack.push(mvMatrix.dup());
            }
        }
        function mvPopMatrix() {
            if (!mvMatrixStack.length) {
                throw ("Can't pop from an empty matrix stack.");
            }
            mvMatrix = mvMatrixStack.pop();
            return mvMatrix;
        }
        function mvRotate(angle, v) {
            var inRadians = angle * Math.PI / 180.0;
            var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
            multMatrix(m);
        }
    </script>
    <!-- Fragment shader program -->
    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif
      varying vec2 vTextureCoord;
      uniform sampler2D uSampler;
      void main(void) {
        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
      }
    </script>
    <!-- Vertex shader program -->
    <script id="shader-vs" type="x-shader/x-vertex">
      attribute vec3 aVertexPosition;
      attribute vec2 aTextureCoord;
      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;
      varying vec2 vTextureCoord;
      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoord = aTextureCoord;
      }
    </script>
    <script>
//var myBrowser = null;
var gThumbImageRef = null; // This is being used by webgl-demo
/*
function launchBrowser() {
    myBrowser = document.createElement("iframe");
    myBrowser.addEventListener("ChromelessLoadStop", function (e) {
      thumbnailUpdate();
    },false);
    document.body.appendChild(myBrowser);
    myBrowser.src = "http://mozillalabs.com/chromeless";
}
*/
function thumbnailUpdate() {
    var camera = require("canvas-proxy");
    var shot = camera.snapshot(myBrowser);

    var thumbnailFromPage = new Image();
    thumbnailFromPage.width="64";
    thumbnailFromPage.height="64";
    thumbnailFromPage.src=shot;
    thumbnailFromPage.onload = function () {
       ctx.drawImage(thumbnailFromPage, 0, 0, 64,64 );
       gThumbImageRef = document.createElement("img");
       gThumbImageRef.src = square.toDataURL("image/png");
       //document.body.appendChild(gThumbImageRef);
    }
    /* We do this because we need a 64x64 picture even to make  a
    * texture, required by the webgl demo */
    var square = document.createElement("canvas");
    ctx = square.getContext("2d");
    square.width = 64;
    square.height = 64;
    //document.body.appendChild(square);
}
function modalShow() { switch (canvas.style.display) { case 'none': canvas.style.display = 'inline'; break; default: canvas.style.display = 'none'; } }
    </script>
    <script>
    // Main menu images 2nd part, obviously need to be chang3D but stand n works well for this example
        var üw = 'data:image/png;base64,';
        var ü0 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAAAsElEQVR4nO3WQQ6EIAwF0F8yB+Aovf/h2llpIiq2BYdZtAkbI/zXSEBSVayssj" +
    "Q9AQn4BwBU9TCYWQG8MphZ2zxqzwEiUgAQkamNllK2hunw/OplEdknzAq/a+g2ZRaiF94FzEA8hT8CRhC" +
    "WcBMggrCGmwEehCfcBbAgvOFuQA8RCQ8BrhDRcAD4hGY1iJFTMwwYDd5q+W2YgNMeqLVOvQnbtds6/Q/8" +
    "upZ/ggQkIAFfWHKAg5POlLMAAAAASUVORK5CYII=";
        var ü1 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAAAvElEQVR4nO2WQQ6EMAhFgcwBOAr3PxzfrYNTqE61LvqTbpq2PD4EZQA0UzI1+g" +
    "JYAG8AIABfy8xARLcsM0OMx3EOMDPcvTsBEaHe8yJCAHi/96kutHQGMlMKcNaJK+9Mb8KmA/uM3P1nhiP" +
    "KkJZgdLC/ACoHrgI2AeKDVYCsZNndYT1wFrgEeLUDPdk97kBULFnrfrcDlW7vgaoJs1GcAQ0bRMPmgKqW" +
    "2UT1nlfVw97hf+BpTf8aLoAFsAA2Uj6qRTlxcGkAAAAASUVORK5CYII=";
        var ü2 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAABvklEQVR4nO2WobOqQBTGP968sJGIjUgkEmlu06Y2I5HIf2A0EtWEJsdk1GbURi" +
    "QSpa1pvxvu6DwFR3DuG27wzJyww9nz/eacs8saJNGm/WlV/QPwAfgNAH/f3WgYRqPzS9KozHO9B64JnwW" +
    "+I1oHogTwv+0R4vfNQGstaGo/PoRtWaNjuFwuuVqtUBQFhBDo9XoIguBpy+pYrQoURcHRaATTNDEYDGCa" +
    "Ji6XCzabDU6nE5IkgW3blSDz+ZyLxQLdbhdhGEIIcR9H8qVLKZkkCbXWJQdA13WplOLjvul0Sikld7sdx" +
    "+MxwzAsxbwUj+OYQRA8FQfAyWTCKIpKyW3bZpZl1FpTKUUhRHMAKeVNqApAa800Tek4Til5GIaMoohaa8" +
    "5mM0opmwNYlsU8zysh/l1/d/N+7/l85nA4JAB6nscsy5oDeJ7Hw+FwV/LHFuR5TsuySsnr+Mur2Pd97Pd" +
    "7AIDW+u7bdd3pdOD7/svTVGmvCJVSdBznNkyPbVBKEUBleet4raDj8UjHcRjH8Q1AKcX1ek3Xdbndbt8S" +
    "rw1wHaggCGiaJgFQCMF+v880Td8WJ9n+v6D198AH4APQOsAXoUs6pR3oElIAAAAASUVORK5CYII=";
        var ü3 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAADoElEQVR4nO1Xr3PyShS9MG+mkZFxjeviVq5rqogjEtf8CdRRFRxThaxrpgoZUC" +
    "kqE0WrggtVwQW3VAWV88SbMAkEmn5v3tS8O7MDu3tzz8nd3B/bAkC/Ke1fRf+fABH99RPlzWaD2WxGi8W" +
    "C9vt9Za/b7ZJlWcQYa/3EZqvJR7harfD4+Ejr9Zosy6Jut0uKolR0FosFzWYzUhSFJpMJGYbRiMi3BEaj" +
    "EebzOY3HYzIMg2azGc3nc9putwcdVVWp1+uRZVm02Wzo4eGBNE0j13VJUZTLRADUDiklmaYJx3EAAL7vQ" +
    "9d19Pt9TKdTENFheJ4H27ah6zpc1wUATKdTCCEgpcQ5DADnCRiGAc/zIKWEbdswTRNpmgL/uAxEhDzPK0" +
    "SOdaMoghACWZadJVG7OBwOMR6PIaUE5xyu6yLP8wpgMa9b930fQggkSYLpdIp+v9+cQBRF4JwDAGzbroA" +
    "XQMfgdXtBEMAwDACAZVnwPK+WRK3rgyCA7/swTfPim363V3gyjmNwzmuPojKJ4xiMMWRZBl3XkabpxTet" +
    "+y0TyLIMnHPEcQzTNOH7/gmBShiORiMQEem6TmEY0svLS23ktNttyvO80frT0xN9fX3Rzc0NhWFIrutWw" +
    "rKSij8+PkgIQfP5nHq93sXwLYNeEtM06e3tjYQQ9P7+fvp8ebLdbknTNFqv18QYawSc5zm12+2zRBhjtF" +
    "6vSdO0SvIqpFILCgK73Y5UVb0IfPz/nFxdXdF+vydVVWm3210mUCgpinJSbMpgdedf6JQ9U5b9fn9SP4i" +
    "OjqBwU+G2OqPnwI/3i+c+Pz+JMXbw7kUCnHNarVZ0e3tLYRjWGm4iZf1Op0NCCFqtVsQ5P1Uux2SRvZIk" +
    "AWPsYtJpOoosWGTVbzOhpmlI0xSO48BxnH8FXtSBLMugaVptZTwh4HkeLMtClmUwDAPL5fKPwNM0BWMMU" +
    "koMBgNMJpNmtaBcD4ocHsfxj8GPbZwryeeaEXDOkSQJlsslOOcYj8eNwD3PA2MMQRCgbOfHDUkURQdDWZ" +
    "ZhOBzCMAy4rntSpKSUh/O2LAtSSsRxDCEEoij6s46o8IRhGBgMBkjTFEEQwLZtaJpW6YRUVT20almWwXE" +
    "cCCEQx/FFcACX7wWqqraCIGhdX1/T3d0dvb6+Uq/XoyRJTvrH+/t7CsOQOp0OERH5vt+sRf+OYdkbruvC" +
    "siwoilLxABHBNE08Pz8XfWNju43uBf+l/PrV7NcJ/A28LRI2JHbk9wAAAABJRU5ErkJggg==";
        var ü4 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAACdklEQVR4nO2WMWvqUBTH/3k4ZAjU4Q53uKBgQcGC/Q7N4CAo2KFDxw5+gH6Hfg" +
    "AHkSKujgrt1qERBwdbFALNkJaAoV0CzRDQ4dLT4aE8K2pMX5888A93uOHmf365595zohARdqlfO42+B9g" +
    "D/A2AdrtNUsrIV+lbAK7r0nA4hGVZkT2+BWDbNjjnuwMwTRPFYhG2bSNqGiID+L5PUkpwziGEgOM4kXwi" +
    "A5imiaOjIwBANpuFaZr/FsC2baRSKQBAJpOJfA5iYRa5rktSyvlcSgnP85BMJgEAqqqCc47BYECMsYV3k" +
    "8mkss5bWdUNW60Wzb5KCIFYbJE1l8vh+Ph4PnccB4ZhLPnMzgbnHJVKZQlmJcB0OqWbmxtomoaTk5MlgL" +
    "Dq9Xp4fn7G6ekpNE0LDzBTv98ny7JQLpehaVrowNPpFJ1OB4wx6Lq+Og1EtHGMx2OqVqv08vJCHx8fG8f" +
    "r6yvVajV6enqiTd6hAIgIk8mEms0mdbvdtcEfHx/p+vqa3t/fNwbfCmAGcXV1tRagVqvR29tbqOBEtF0d" +
    "sCwLmUxm7Zpta8JWAI7jIJFILDwLgmBhnkqlYNv2zwB83QHDMFCv13F7e4tZoRJCwPd9BEEQqjmFBnBdl" +
    "xhjUFUVnueh0WgAAC4vLxXOORqNBlzXBQAcHh6G3oWNdWCm+/t7AoCDgwM8PDwgn89DCDG/357nUbvdRj" +
    "qdBmMMo9EIZ2dna8swELIXAL+3X0oJIQTOz8+hquqCOWNMubi4wN3dHRmGAc/zIKWkWCy2FiJUCqSUFAQ" +
    "BdF1HqVRSvgb/U7quK4VCAfF4HL7vb/QOnYKf0v//W74H+K4+ASRdI5wzHx/hAAAAAElFTkSuQmCC";
        var ü5 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAACU0lEQVR4nO2XO6viUBSFl0PAFCksAqawSGGRzoB2FmkCFv44ixQptTOdjY1goV" +
    "ZRAgo2ghYRxXcR9CISDu4phjuMj8TXDE7hgt3krLA+Tnb2SSJEhHfqx1vTPwAfgP8BgLtlOBwOZNs2XNe" +
    "FKIrIZDKQJCly7vM8jxzHwXQ6RSKRQCaTQSwWu/CdK3QHPM8jy7IAAJqmIR6Po1qtotfrnQyP0WhElmUh" +
    "Go1C0zREo1FYloXFYnF7yBBRYBUKBZrNZnQ8Hn+X7/tUqVSo2+0SEaHf71O5XKb9fn/i2+/3ZBgG7XY7C" +
    "ssI3IHBYECSJEGSpJPrHMchn8+j0WjA8zyq1+vI5/Pgef7Ex/M8UqkUbNsO3YBAAMdxkE6nr65xHAdN01" +
    "AqlaCqKgRBuOpTFAWDwSAUILAJGWPguOAeVVUVy+US2Ww20CMIAr6+vv4NAADkcrnQdZ7ncTgcQj2Bj0A" +
    "URWw2m9Cbb2mxWFz00N0AsixjPB6/BOC6LmRZfh7Add2XAMbj8fMAsVgsIknSzS4Okud52Gw2SCaTzwEA" +
    "gK7raDabYIw9DFCr1aDrOjiOCx3HoQCiKEZkWYbjOA+Fj0YjMMagKMprZwHwaxfa7fbN9/lbjDE0m03ou" +
    "n6XP/Qs+K75fE7FYvFi3p+X7/tULpdpOByGzv8/6y7TPRDPhD8EQESYTCZkmiatVquT8O12S8Vi8eHwhw" +
    "GICOv1mkzTpFarRb7vU6fTIcMwaDKZPBxORIg882PCGKNGowHbtqGqKnRdB8/zNzv+mp4C+Jt6+0fpB+A" +
    "D8BPvG6abOj7i2gAAAABJRU5ErkJggg==";
        var ü6 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAAAoElEQVR4nO2XQQ7EMAgDIeqD/ZT8mJ5W3QW3qlYJXOAWWtmj4ENQM5PKOnxjzr" +
    "mVCIB+n0emOfMYdx+yINTMqDmA1aahB0AH+Xe5+ZNmCCGAQPsvENPxPXoDmdUAIQMi60L4RocC7Ayhr/I" +
    "RNECHsHwEDdAhLB9BA5SHMNwAe72uKqZNR7AD4k5TP7th5mIicq1owzcyzX8AsiC8h1av5yeOa1ojX0qI" +
    "HQAAAABJRU5ErkJggg==";
        var ü7 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAAA9ElEQVR4nMWXWxKDMAhFm04XzFLYcfypHYwQ3pVPx4TjvYDJmHO+noz3o9kjAI" +
    "g4EbFMtmG1gEsKAKMdQPvaLIQI4JE5A/HxJAaA851ovltcFJCSn4lprBBRFX4AQpFtF1dAhBWogrjMAWl" +
    "xpedruLuAqsGBpRRYN+I2q1ZDHcU7CKE7XGNaBdC6IwsR+hsylR+GCFlQCWFSYFeQ2aJ0WdAxJ8znASYp" +
    "W5wUxjITWo9kZTXgibUYNYiwBbvNVyu+z1g7UgAaCAN2gyixIHMkK1GAhvcQWw5gAaEQbW24s4XCtc4Ba" +
    "YTT+MvdcAfSVgPWePx2fADLDLRe70zPaAAAAABJRU5ErkJggg==";
        var ü8 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAAA5UlEQVR4nO2XQRqFIAiEs+8deI7ijW39EJBBrRbNNnF+UcFKa+14Uuej7m8A+G" +
    "WCaq3qvgEo7FwlegYsU0tRmCEAa8yCuACeOQA5NgVhAmjm0tSSBmNBqAAz5h6IBhG6hhlzLU5bWAcgB2X" +
    "No/FuBmbNNckFnt7HVfIWYmZgx+opgLv0AZgAXmll5c31B5Bpp6ykh7sFK7IwmqMDkIQzEJHY0CHMQEQ7" +
    "4vJ2bMFa58t8EwIoVmlmM+Id7lEz6gIZcwBldLOoV3HUnLnOqWc5a+IpVYpXFiwqAzsqZfjHZJfe2w3v0" +
    "gWl6Hpz2xsDkwAAAABJRU5ErkJggg==";
        var ü9 =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAABA0lEQVR4nO2VoQ6DMBRFbxcEAoFAIiorEBUIRCUfwKfyCQgEoqICiUAiK5Aknd" +
    "nIxmi3kWWYXlXK4d2TNAAxxuDMXE5t9wJewAt4AS8AIHgHaK1N0zTQWiOOY+R5jjRNiY3t+369ppRa2Xu" +
    "I62eklDJ1Xb/sc85RVRXZsvM8784RQlglrEcwTdNu+a0MSinzyNrK73JfC7Rtax0IAFLKdT0Mg5N1yVkF" +
    "xnE8PPSbWAWSJPlJwWGBoiicDzLG1vU72UNHwBgjlNLde2EYQgjxxLoEHtltnK/hsiym6zpIKaG1RhAEy" +
    "LIMZVkiiiKyx27DOX9hPxb4R07/FHsBL+AFvMDpAleR+2u9tWOdPwAAAABJRU5ErkJggg==";
        var üa =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAAA20lEQVR4nO1XOw6DMBSzqx4g42PjCpwQcWpGd2hBLU3C45PSIZbeEBGM41i8hJ" +
    "IQA0kBgCRGJ5yEW0lyD+65h2Y2O3EUSSclRQuAzqy2bTWO49d36MjA4dWTTLrgykDTNCC5ubquWxfncYA" +
    "k+r73aP3AMAzz+y+ufQ6URBVQBVQBlwtY7QWSFELY9f8PIUhPsonr/3pBth0vCSZBW8c5FMuA9yRVTID3" +
    "IOPagqWNW8eHBdQM7EHNgFdMzcDlGUg6YGYAsOs+sKx3vujqUmVmp1zLzCzairPt+Fd4ALYsNLxog8y2A" +
    "AAAAElFTkSuQmCC";
        var üb =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAA" +
    "A7EAAAOxAGVKw4bAAACAUlEQVR4nO2Xva6qQBRGP4wFBYmWdo6JrQmdDcnAMxhjZRh8A0orwhuQWAsh1h" +
    "ZWlmh4AFo7xs7SwsbGuRXm4Ln+AMd4T3K/ZDcQZi3Yk2FGEkLgk6l9lP6rBTjnwrIsYVmW4JyX7mNhgQx" +
    "sGAYopaCUwjAMlBWRXp2EnHPhui42mw0cxwHnPHefEALXdaHrOhzHASFE+hGBZ+DbFBW5K1AUXFbkm0BV" +
    "cFGR3CS0bVv0ej3IsgzTNCvDAYBzDtM0r5PVtu3cG+cEPM/Der3G8XjEarWqDL+NruvwPC93LdcCSZJEH" +
    "McAAEVRYNs2ZFlGv98vDb1tQafTgRDi2oa7AllOpxOm0ylUVUW73S4Nzp6t1Wo5gacLkaIomM1moJQiDE" +
    "Ocz+en4DAMsd1uEUURfN9/KP7yStjtdrFYLNBoNBCGIZrNZiVwlvqrAlk0TYOmaVgul9jtdhiNRtdPHUV" +
    "RoTaVEsgyGAwwHA7RarVKgSsLAMDhcIDv+1WG+MX7gf8CbxFQVRXz+fwtoP1+j8lkAlVV7wskSSJRSjEe" +
    "j39MJANnW7gkSe7/jgGAMSalaVpZ5BacpqnEGPu+KRFCPKwgCAQhRDDGRBzHuQIgLpdLrtI0FYwxQQgRQ" +
    "RCIZ+M/FXgk8lWgKLiwwN9EAJQGlxb4KlKv10uDs3r5XPCu/FsL0SfyB3XKb2vWpl1LAAAAAElFTkSuQmCC";

        //Social NN png base64
        var üc =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzI0LzA59sFr4wAAABx0RVh0U29mdHdhcmUAQW" +
    "RvYmUgRmlyZXdvcmtzIENTNAay06AAAAOaSURBVFiFvZfPa1xVFMc/b+b9mHSSSV9izCRpbEmNilbjqgs" +
    "L0oW6EBSKQl1ZFJEuCtadK/8BFyq4EBeFuhB/bEqEImajiAiCoJZiMBKrSYw4MdNkMpm+effe42Jmwkxn" +
    "3p10nPbAg+HOeed87jnnfu+MIyI4jgPAhStX386E4Qsp389zG8xUq3/fKBY/funYg6831pwGwMVrK796B" +
    "wZm7wkCRtw0XirV1+SxMWwqzZ9RRLxbWXrx8KH79gA++OnKO9mJidcezR6gbAzbShOL9BXAcxxybppsKs" +
    "WP5V3K6+vvvjr38PkUgBuOnJ4OAtZjRSFWRCIY6OsTiVCIFeuxYjoIcMOR0wAuAH6QF6CiTV933ckq2uC" +
    "5afCD/B6AEkNJawz9LXuSlbRGSW2zLoARUCY5+dLSKh99uEA1quIHPqeef5xH5o72DKBEaKRzATTGuvtP" +
    "PvsWJ3c3geOACPOXf+DY3EzPAI2cewDKgKUAmIEQ6loBYFyPldV/mZoa7RlA1cetXgGwjp/vty0NDWbs7" +
    "3QxTTOAEcR27j2vbengcPZ/aYWul7xeAbHuxukA8OZblxL9/cDluWePM3N4LBmAJgAl9hnAbQcIJo4k+4" +
    "tw6curnH/lZKKLaj4FRgSxaUCHCnQz491ljWmkuQJdWtALwICXtsZUrS2QPaKO1qEF3ZKfPTGJssRUzRX" +
    "Q0uUYdqjA+6eSlVCL8EcUUbXcLbpFCUWwnqgOAD/v7Fpe6G5a2o7hrbXgl5Xr3D893DtAywx0kWK8diX8" +
    "avEfxHHIeLUbfTwMCLz0vgFapDiWbqfAbVuSkTwLiwXE1ERV4iqYWpRsJs2Jh8aZnRhMDBk3t8CIXYpHB" +
    "wM2o/bv/fHpjv5KxXyzvMm9+WxizFvSgScm03y66lg8Ws3xPCSTwVBN9GnVAWPXgamc4vjYAN8X9w8R+m" +
    "AkSgYwNwuRJVghVjyVr3J0KOCLDZdibAcJPeHMVMSGSvZRrTMAW7Em5yZP8e+ViLFA88aMj+/YAaoi/Fa" +
    "5kagt20rf9JOsXCruZPxwEPufkUIcU4hjq89+bMdodLlUBGoZ02tr88uViJIymPrVfLuekjIsVyLSa2vz" +
    "AE79cZ/5+rtrhKOThwKPYdfloKUdvdh1pdlSitUohs2Nvz4/+dgRQDmABwwB3tMXLr5nZh94UnK53jXWY" +
    "s729lZqaXHh8stnzgExUGoBoFaNO2HSDOBQG8bG5zsFIID6D4Ek7cRpQpS6AAAAAElFTkSuQmCC";
        var üd =
    "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";
        var üe =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAAVdEVYdENyZW" +
    "F0aW9uIFRpbWUANi8yNC8wOfbBa+MAAAROSURBVFiFvZdPjBNVHMc/M9POttPtLtBGlj8LCCiyNzEqB+Q" +
    "gMSoaRUxIPHAkMUYlehMTUQ9y8GBEvRm8cDKGA8GNJBoPeiCSoHBYXJZ/QZYi21K205lp5897HtrpdpjZ" +
    "7oK7fJOXZub3e7/v9/1+7/3eVJFS0oa68/iZL7Rs/x5NSw+xCAgC72bg1L8ffWXLe4AAUNoC1BdGx/4u9" +
    "BuPDOV0crqKirKg5AKJ5QpuWi6Vuj3x086RxwChSCl5/tjpw4VC8Z1Cro/rDR8nEAtKHiKrqazOpKhYTS" +
    "qV8lcndz/5bgpA0XN7+jSNcbO5KMQhLBEw7gWsSmsoem4P0BagppeXmj5CWdi0z4ZS00dR08sBUgBCCly" +
    "50FWfHU0p0WWrzC0BonUSuk7EoiPkbAsAMQ9ux2zimC4DRYOUrsXsvhtgVRtYdxwA8kWDfMGYRQAzAmQg" +
    "O4oSnQPB1NU7bOqDLcsznLxWRV1fiPiYFQf9tsWzKzNs37QEgNHLFmfrLrqRjsWUwTwz4Doe9atVDj5dY" +
    "PtwazUvb8zz1vkGerYVuGG6PKX5vP/iCnK62pn7xJDB26enKcu4gGgGpEisf/22Q8F0OLprmP6uwCvzOm" +
    "v1Jjfac4Ydh4M7kpvnlocynDTjsWV0E8YzYE5ZbMvCx6+uSQxspBRE0MrQJ88Moapqot81X0EkLC6SASF" +
    "EzOmNzUvYtzbLFTvgYSO+4QCElDy6rI/D/zTZnIa963MRu+VJLjfisUPOjgAZCORdKfi54nLFEZyreRxY" +
    "l2XbUDZilxKkkFyq+62Anoe6MR/x+aXiUPeS27pst3sVQLZL0D1MT/LXtIeQcK7mo6pqZIDS8bWnm+xck" +
    "4vY7QCOTjZiccMhoyWQiWkKMWF6KHe1aUlrTuAGPK4JdqwfjNg/v1inNsvqQ84uAb0bkZZJxzaZ3xQEPm" +
    "QqNode2xCx/3Dd5rdy74stegxF8jEM8We1GROwLqVw5mKFb3dtZDCb6rwfvWFzeGK6J3nIOSMgED07IRA" +
    "TsH/rCvZvXUG+b+aETJguX47fmTNWyNkRMJ+7oGT5rMrrnefBbFTQhZrLm3/cwuxR927EStBrEwKUbJ/h" +
    "wUyi7UKtyb5TpXmTh5xdAiRz3cQlVyZ2u19LFh+euXlP5CFnRMBcGTg+afL6hqWRd9+cL/P1WPmeiBMFi" +
    "EB2ajIbTv1rc+jsLZ5bPcD5aoPvLlSYtLz7Ig85OwJkMHcGAI6MVzgyXrlv0m5EvgekEHiWSyrhw2Ex4N" +
    "tedBN6bqPq1bWlavbBCPDqLp7bqM4IcKZOiIay18/pqJlU79n/E6LhI8o2npw6AaAA2sjISPb2S5+N2+R" +
    "WposGWi6N1q/PEereENRdAsvDK9sYWDeW/Xhg09jYmKMABrCqWCwOGLs/+LSeWbfNVY2BBWVvQxd2rb9x" +
    "9Xf72KGPyuVyDZjsCABy8MD+m0jACgVoQF/790EKCIDmf7jzVahZvBTqAAAAAElFTkSuQmCC";
        var üf =
    "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";
        var üg =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAAVdEVYdENyZW" +
    "F0aW9uIFRpbWUANi8yNC8wOfbBa+MAAAO0SURBVFiFzZY9T1tXHMZ/59w345dQqtakQvYCTRGJK6WdwhJ" +
    "lyYRUdY3Z6DdgSIvUqUOd71C2EnlrKjFVWaIixg7BiWgNWaw4AjG0GF+59j3ndLjXL7dcqJCM1cc6kq/1" +
    "nPM8/r+dK4wxCCEAODw8rBhjVoUQc47jME70ej2MMW+FED/Oz89/bYwBQPQN1Ov1V1LKpdnZWVKpFFrrs" +
    "RqQUtLpdDg6OkJr/XphYeE2gASo1+sVYKlQKOB5HkopjDFjXUopPM+jUCgALB0cHFQGBoIgWM3n8wPiuM" +
    "VHTRhjyOfzBEGwCmBHBuaklCilxhr2y9IRBMHcwIDWGiEE/cK4bgghBjU2MNAP06SQaGCS+P8ZGHffX9l" +
    "AUgSe/PQ7T3/r0PgzfC68B48+S/H4y08SD3375Bfcp39gNc4AUIUs3Ue3mHv88EIDwhjD7u6uWVxcjBHu" +
    "f/+a2rEEywFhhT8aBarHnbzmxTdLMf7J/R9I1/7CxcIKxwsKTReFf2eaD158FePv7++zvLwsJIBSapAGr" +
    "TWVZwfUTmxwM+BkwElHKwNuhtqJTeXZwYB/VHlOrtYih0cOjywuWdzBc67W4qjyPKbRnzkSODexqi8N2F" +
    "Ngp8BywyhYTvjdToE9RfXlkJ+tviGNwxQOHjYuFi4WHjZTOKRxyFbfnNO5sAYapxKcKPRhkEJEtybSoXH" +
    "aHezxGj4uHjYSiRjSARsZmmn4MY3Lu6AvLIaHxUwICcIa7HEi4QQ2ApAILCS9EY3+3sQUFGeshKPiKM5Y" +
    "w1AWb/wnn+KNxBQkFmH5cw+MhqThZAyYkNPn/12+hcaQNMoMoDEh56IiHL0LjDGsP/yQ0k0Ttp3R0TEmM" +
    "qUo3Qw5fb63fo9OaYYAHRkJPxpDgKbz6ft46/diGpemwPd9dtYLbDxwKE6HvY/qUZxWbDxw2Fkv4Pt+jG" +
    "/trNLauEunmKaLoouiU0zT2riL9Ws5xh9NgTDGsL29bUql0rnwpdNpUqkUUoadoLWm0+ng+35imq/C39v" +
    "bY2VlRdijEfg32u027XY7USwJV+FfOgcmgdgc6HfBJNHvgktTcJ2IpUApxenpKdlsdiLiZ2dn8QgA73zf" +
    "/yiTyUzEQNQV7yCaA1LKarPZTOzVcS/f92k2m0gpqxDeFQKwt7a2XkkpP87n82QyGXK53Fj/davVot1uc" +
    "3x8jNa6Xi6XbwNKAA6QA5zNzc3vXNf9AsiPVX2I4263+/Pa2tq3QACcxQxA4o16HTCjBsL3hqgeJggNqH" +
    "8AaOlSXw6OUl4AAAAASUVORK5CYII=";
        var üh =
    "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";
        var üi =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzI0LzA59sFr4wAAABx0RVh0U29mdHdhcmUAQW" +
    "RvYmUgRmlyZXdvcmtzIENTNAay06AAAAPwSURBVFiFvZdbaBxVGMd/Z86Z3Zlp0jYxJgajYmO9EKUg6YN" +
    "IS4XSWIUUKeqDkT6JUBAE0VrBp4K3oo+B4ougLy2CeAMr1AvJU4VIwFiS9BZbXJMmJs1ld2dnzjk+rLvZ" +
    "JGZnc6l/GJgzM+f7fue7nMMIKnT0w7PvgH3RWtvGLZAQ4jqIT3tf63qr/Kx08/IH3/4mBB0ttzewvT7Al" +
    "c6mOo+0YWYuy/iNaaxl6NQbTz9cBnjp/a/eBd58YEcbuYJlNhsRa7OpAEo6bA1c/JRg+PJ1gPc+PtZ9XA" +
    "HoKOppbW5iYjpPGOlNdVxSQWsmCxFpV9LcsI3MxGQPUAQwOm6zCHJhIdHQ1Qvnyc3PAvDQ7v1rBsmFGpV" +
    "2MDpuAygBkA01poawd+1up72tmSiKODuyvmhlQ4vRMWUAbTRhFCVOLOQXaLq3gZaWFrLZBYy5sS6A0Gi0" +
    "0YsARmuMSV7N3MQV2g8eJAgCjDE1zVlNRlcCmLiqsdz8TaYyVzi0t4PA93CVREmxMQBTkQITx2Wi5bo42" +
    "EdTQz3P7+/k0Ufux/M9lFK4rsvFwf7/mGe5b9eeZIC4EsCsnoITrzxLfV09vu/j+z5SKYQQ+L7HR8eOEI" +
    "b5Jd+HYcgnP/+ZDFBZA1qvHoHGxka2bd2GIyWO4yBEcfP0PA9XKYxd2jlzc3MYfS0RQFd2QbUi9D0P3/d" +
    "WvpAOuGrF4ziKaqqNZUW4OoCUDnIN54KUTm0AK9pwlRQcP3UOgN7Xn0GpxRXHcczRk1/UDLYCYC1tWHRY" +
    "wPNS5XE+X9jENqySgpKstUgpl4w3BlBjCkpS0kFV1IKSTuKcqgC1FmFJQohyC5bGmxiB5BqoZmRdACv2g" +
    "TWGUwjB35mrbL2tFUcWuyMu5JmfucH25rtqACj6c2AxBdWu8ckZrLVlA67rcqT7cW7+dYmJP4YZH7tANJ" +
    "vhyccerMne0hTUUAOjYxl27ri7XAepVIrDTz3BgT2djFy+Rt2WgDvvaCKKIvpPfp4cgbV2wXf9g3Tt7cR" +
    "xip0gpaSurg7P82hsbCwaU+rfs6D2rbjmFIxcn+LrH85jTPHwEUKglCKdThMEAUEQkEqlmJqZX18KCmEW" +
    "5aarUveeOcfg8BgvdO9j5z2t5da01jLw+yW++fEX+n4dTVx9HIXLAUxGF3KtjrPydFuuvoFh+gaGE7+rJ" +
    "l3IYYzJlAHAnl6YnX51i+Milbsh44nO44iF2WmEEKeh+GckALXrQM8QiJ3poA6Z8hLTsVbFUYgu5Amz84" +
    "AdHfz+sw4gFoAL1ANux77nTgjpHMLSvKneSxJMWG2+HPrpzNtABMwtAaDiZ/UWy1YCCIq1ULr/vwAsEP8" +
    "D0JRySGrePecAAAAASUVORK5CYII=";
        var üj =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzI0LzA59sFr4wAAABx0RVh0U29mdHdhcmUAQW" +
    "RvYmUgRmlyZXdvcmtzIENTNAay06AAAARqSURBVFiFvZZRaFtVHMZ/N0ndknRutGnWdm7K4hZpu6cEyzr" +
    "GQMH2QSYogsj64Ga3h7CydRNXBbEEa8OG6yZDoRQfZh/ry/BBRVBGHSsNCOvCqm7UZnWttWPduqTtvfcc" +
    "H3Lv9d4mqaU0++BwTr577v/77jn//zlRsGF8//5PhZSHJDxDCaDAXZeifP3c1audNi6HP/btu1lWVVW3O" +
    "RzmKa+3FPosZbPMjY2hzsyknh8aqrcMjO3d2+Ouqnq/evt23Ldvw+JiSQywYQN6KMRUOo0+M5MIX7t2xg" +
    "OgCnFoSyCAcnOUJSlJPX7MnKatq/Zmj4c64cdzc5RNO0PMTE8fAnIGNCm2udITCCm5pSjs+uJLKqPRdTU" +
    "wOzLCrfdOUyclrvQEmhTbAFwAmhCULSygC0Ho7Ll1FweojEYJnT2HbmhpQmAZ0KVEGK2Q+I4dO4jH4wDE" +
    "43ECgcCaTZg6upT/GdCkQDdaIbS1tdHX1wfAlStXOHjw4JoMAJaOJu0roEuEyLVCOHbsGJlMhsHBQVKpF" +
    "D09PSQSCQKBAIFAgEQiAUB5ebn1jn1sh6mj644V0BFSIIqsQDAY5MCBA3R2dtLc3EwwGKS/v59YLEYsFu" +
    "PSpUsA+Hw+6x372GHA0NGkblsBIa1WDN3d3aiqyqlTpwBQVZWuri66urpwu90A+P1+a759bMdyLbMMi36" +
    "9iXA4jN/vp6mpqajYagyYOmYOeCBXBWZWrgR70NraWnp7ewGoqKiwnsfjcYaHh4uvgKFj9jkDQiDEyisA" +
    "zn1tbW1lYGAAyFUJQHV1NUNDQzQ0NDA/P18whqmjG70C8E14l2wwgm/r68cXifyvmbUgk0wy2XYEgNFMh" +
    "tfHflesc8DMzsmT7WSSIyUQH2HyZLutCmw5IATWGSDmHvLn4XfW3cBymDtuVUGxU7BUyKsCUaAKRh5n8r" +
    "io35c3Zzm3GqyqCg7fGc/jfq1/IW/Ocm5VBoRtBYptQbJuNwCR1G8k63aTzGSJ+HJ/1+zjG9kMWSOHIj4" +
    "vf6kq99TcH5qaMg+1ZWV5sR2XkXlBFGvmnKPjaYszxwCvffsdR8fTFlcTO279rokdXzFu3nVcqAGOfjn3" +
    "8McfSLW+bXHREx1cbmrkclMj0RMdBWM6y7BIEtphPrfPM8cTF3vzuNZfrudxheIZOSCtpCgG8/l9VWNO6" +
    "DTZuInFJbwuxTHvp7feBGBW0wkWiK3ZDQgpmdN1NrlcRQ1YX/HSy0RaWhxc/UcfMzV6w8F5X2wE4I2O0/" +
    "wcetYR65EQzhWQQk4/ULWt/jJPcQPGV7za/xULk3cd3K6WFvYcedfixi+cp7HjNADjF87nlfgDVUMKOQ3" +
    "GZfTZ1sBFze0+Hna78bkUSomMkIzpOh5d/7xj+p92hVwlbPwkWHFDgZ3VHjdPu1wrbsda8EgIHgrBlKYj" +
    "4c6Hf9/fAywogA+oAbxnKrd84FOUVyRUrqu6AQVmM1J+3zP7oBvIAvccBjDOhScAYTfgAjYa/ZM0IICFf" +
    "wH2sdYzZ30qpAAAAABJRU5ErkJggg==";
        var ük =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzI0LzA59sFr4wAAABx0RVh0U29mdHdhcmUAQW" +
    "RvYmUgRmlyZXdvcmtzIENTNAay06AAAAKxSURBVFiF1Ze9a1NRGMZ/596bT5tgUwoWOjjo1Lo6CS7Ozg5" +
    "q3Sy6uCpIcbF7/Q8Uh64ODgqCUPzapKlUtHRooaShfqRpk9zcc16Hm3vTWGjvuQ2CD2Q773N+532fc5Io" +
    "EUEpBcDKl6+PReSGCJMk1IWHn2FkItlipTZBPePppQcAIoKKAJarq1WlmCoWT1EsFnBdB4U60q9cHuHy3" +
    "FsKlWS87XaXrZ1d1uv7Kzy/Mi0ieADL1dV5YKpSGaNQyCNGMGIQOdpQgPff96C0mwggn3GYKOe5eFamPl" +
    "17OQ/c9wC01tdLpRL5XA6tDXLczgelfQg6iZa2A1hvQd1pcW7MvRUDGK0ns9ksRgRjTPLNpQeg/eQ1QNP" +
    "XdLzOGSAcgRGD53kYY3l6BIwPOlkH+mVC/WeDPoAxKKXsTh9JpwAA2q39gwBiefJQEgEkzMCAejW9DASI" +
    "pDi9COiudQaAuCbOQJoOhEbDALAOXyiBdCH8G8D67scEEm6eCuBABuR/HUFslOYWRABKKV69fsP4eMXaQ" +
    "5DQaK9mD9D+EQIA3L1zm1wuZ28CND98TFW3tPSuD+C6LplMxtrE98M21us71rXRuxNnIM0zHGUnzSMW7R" +
    "cDaK2tTaKaNAE+BJCmA+HG6b5HjNEnBwhHkLYD0gfQWv/zEQyEUGx/CfUU1qQbgdZDykD6EQzpGkYgtjr" +
    "0DnS7XRzHsTIJM2A/gmazORhCY8yW1nrC8zyCIEhs1B+BXfcajd+AbMUAIrIYBME9IP6blkRpQthqtajV" +
    "ariuuwigep/M6OhoFTjvOA6O4yQC0VqztrbGxsbmsWubzSaNRoPt7W2MMd9mZm5OA10FZIHTQK5cLs8pp" +
    "a6KyHiS0xhjWFh4kmRppLrvd17Mzs4+AjrArwEAG6chKAZQQAawuwInlwG6fwC6iOGzX5PqugAAAABJRU" +
    "5ErkJggg==";
        var ül =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzI0LzA59sFr4wAAABx0RVh0U29mdHdhcmUAQW" +
    "RvYmUgRmlyZXdvcmtzIENTNAay06AAAAN6SURBVFiFvZdNaFxVGIafc+/MJJnaJGXSNGlGW1JGaOsfFkT" +
    "EbooLFVFQQSnJQoJddSGI4A/VRfFn405QFHERAgZUEMG6kIJIqm5KNbYU0w6NDY2JM00mw8x17pwfF/He" +
    "3DtzM5nYm3xw4cx5v3O+557vPTOMIBDPf/b9OwYzijFZtiKEmBOI8c9feOR1f8obPPvJd78LIQ7f0Z+hv" +
    "3sHqYQVa21XahZXKvy5WMQYc/GLFx+9ywd4+uNv3wVevT+3j1JNU6i6uErHCpCyLfrSKXo6LM7PzAK899" +
    "WJx19LAMi6HNk/sJv8TYdqXcVa2AtHaa67kmLSJpvZxbW//h4BVgGUUlkpbMr/1EOLqsUFlmdnAOjdlyO" +
    "d2XPLIOWaprPTRimVBfAAWKopVMOxH0w6jI09AcCnP1wgH1NblmqrNdcApKZak02JJ44dCY1fObcQC0BV" +
    "aZTUAQDV/PYAlhW+CVE5/zfCJ6AUSjdvPnF5idFDGQDGLxUjc2IC0JFvNzW3wtTcSmxFwwBttKAw/XPoc" +
    "9/dDwJQr6xQyl/y59P9QyRv66G6cJ16pezPp7p3kd5zO4nOdARAGy048+ZY6PPxL6cBODjQy1sja9rE1D" +
    "QXrswy+sxR7tk/6M+fu3yNiR9/pcAQdqqjFUB0C9YzYdXYIe2hXJbRo/c2rX/40DD3DQ9xcvwsFXsgci/" +
    "LP4H/IIKPZVmhx5u/WqiE5nN7dzflek93uovjD+Qi9g+cgNY6sgW2bYepAzmNWr5Q5vTZPwA4dexOhvt2" +
    "+tqRA1nUb0uhfK2DJyA3dwJR2ke/zHKj5HCj5PDhT/mQtjfT07y/DHpAR5uwyQOBnEbt/NxNfzxTrLRc6" +
    "9X0AfQ6JmxqgVq/BUGtVHVb6l5NH2Czt2AjrR09/EUkpe/KYDS/hWpLa0dXUgYAtEa24QHZwgON6zfSPU" +
    "/4ANvegiCAlpv/Ob5VAN3ONWyMVjkbrV/vGgqAzHNvmOTggQ0B4oz6/FWKk28L3wPCqSBSXdtS3LhOgwe" +
    "0mReuM6gSHS0XxhW266C1mV8DMEw6y8WXLLsDscUQRtZwl4sgxCSsekAAia4nX74IImft6IVUV+ztMK4D" +
    "roOuLIMxM8437x8GpACSwE4gmXrs5GlhJZ4C0x9rdT/EotHya/fMB6eAOlAOARD4s7rFYYIAglUveOPtA" +
    "jCA/Bfknj2Vx2kPiQAAAABJRU5ErkJggg==";
        var üm =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZW" +
    "F0aW9uIFRpbWUANi8yNC8wOfbBa+MAAASuSURBVFiFvZZdaFNnGMd/yXtC1sR0y2xLg9Fpa02a2SvjrIq" +
    "0da7oXbGgFdygCF4qo4xBoQrdhci8FSkiXtlSZYj0YmUX/dhFLbRXjdRlkobSj5S1c7Q97jTJOefdhSam" +
    "W3MaO+sfXng57/Pxf5//8z4c21R9PRVDQwC+3mDwZqXTebrIbi/lDb778mesEKtusTwfKVvN7v9Omou/z" +
    "ST7v/p28nsgsfzrSRRT0wB84wcPDn/i9VY5y8qwKUrW6fPqIssE7A1ZHju9f73dm3rpFyV/fD3zU03t7u" +
    "ZIHYaWUGQySfeePTc/drurHEVFJKenkbqedfo9kLJMEHVFLc913hLArmD/6FM8XnfVLz9+dlOayW8UU9P" +
    "YaxinFSFYm57+T4BkSlom0PQ1y3MMLWcPZnoVu2snwXLzNIaGTUrJ0aNHZUlJCXrOzbcTiqKwtLTE06dP" +
    "bQqAlJJ0Ov1BkgOk02mkfF1ZBcA0TUzT/GAEMjmzBIAso3zGqqqiqmpeosXFxRQXFwMwOzuL3+8viEhWg" +
    "nwETNNkbW2N8+fP09LSgtvt3tDu4cOH9Pb2AjA6Okpzc7Nl4oIlME2T27dv4/P5uHHjBpFIhJqaGtrb23" +
    "G73bx48YIrV67gcDiYm5sDwOVyMTMzA8CuXbvyxgWw51Zgo9Xc3EwwGGRkZISJiQmklExMTNDe3o4QgmA" +
    "wyNWrV5FSEo1GiUajOByO7N4qdkESHDp0CCEE8/Pz62xisRjxeJz9+/fj9/uRUlJfXw/A0NBQdr+ZBPZc" +
    "CTZaXq8XIQThcJhkMrnubHBwECEEQoh13zeLmWtnz2W00YrH4wghqK2tpaysDE3TkFKiqiqBQAAhBM+eP" +
    "Vvnc+LECcvS51Zy0x64f/8+qqoC8ODBAw4fPkwikeDs2bOcOnWKR48ece/evU0T5iNhk1JSU1MjM294I/" +
    "h8Pi5dukRVVRXl5eXs2LEDgFu3bvH48WNLrfNhZWWFSCRiK2gSzs3N0dnZCUBrayuXL18GQNM0lpeX8Xg" +
    "870yg4GdoGAaqqvLy5UsWFhYYHh7OBuno6KCtrY2lpaX/J0EoFJIb3ULXdQzDoLW1lePHjxMOh1lYWGB+" +
    "fp4DBw5kpXj+/Dnnzp3D5XIVXIHV1VUmJyetJfD5fPT09ODxeLh79y6dnZ0kEgkAPB4P169fp66ujurqa" +
    "i5cuPBO/VCQBF1dXXg8Hu7cuUNXV1d2GEkpWVlZoa2tjbGxMQCOHDmyJQksCWTmeCQSyWszOjoKwKtXr7" +
    "ZEIDuKrV5BU1MT/f39OJ1OhBBkfDRNIxAIANDX1/dO/xQFVeDatWsANDY20t3dzZkzZwiFQoRCIY4dO0Z" +
    "PTw+NjY309fUxNja29VdQWVkpMx39b4TDYS5evEhDQ8O676qqMjAwwJMnTxgfHy/45rn+sVjMZpNSUlFR" +
    "kZfAdkFVVaamprLPcNE0zdLNnN4nTNNchDc9kEql+nVd39I028rSdZ1UKtUPYHuzdu/bt29AUZTKTJdvF" +
    "wzDQNf1WDwePwnM2gAH4AH8paWlHUKIBpvNtnM7kksp/zQMY3BxcfEHYA5Qcwk4eF2NDwEJ6BkCNl4PJL" +
    "uly/uHCRj/AHxeOPV3XtUyAAAAAElFTkSuQmCC";
        var ün =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzI0LzA59sFr4wAAABx0RVh0U29mdHdhcmUAQW" +
    "RvYmUgRmlyZXdvcmtzIENTNAay06AAAALRSURBVFiFzZfPaxNBFMe/s7tNqi1NKIg/arFCamnx5EUqvep" +
    "JL0WxtuBFPQhqT63+C9aLiOBdLJUgglBEvPfgwR4kWqUV2/oDbZq1SZpsdnZnnocm22yyTWh3F/xCYCdv" +
    "930/O+/NsMOICIwxAMDl8en7IG2MSOlCCGJM/gSzp58/HL3r/FcBuHR75hOg9nce7EBHZxtUTQnUXNgSO" +
    "b0A/U8OgFhIPhoZcAAu3no6BUQnjvUfgW1aKG6WIGwZKICqKdjf3got2oKVhV8AzAcvHl+d1ABACHW081" +
    "AM2cwmbG4HalyR5AJZvQAtoiF2IAb9d2YUQAWAdTGFgZesUMyrxU0bkdYIhGBdAKABgCQC5xySyFdyo2D" +
    "AKBrQ03pdLDGQ2Iao8tIAgKSEsPzVXE/rOH64DacG+3B9ZLAuPnbvlXMtJIGk3AYQUvp6e6NoYPhsH26M" +
    "nNnxntr8ohpA+gTo7Y41NPcCkNUAJCXIB8CJ7njTe2rzk3sGCFLuHeBaTc1tIZF8k8KXlQ18/Jr2fKbi5" +
    "6wCH/5Qylt5RZqq4PPKBlJL3uYVTwfAbxN66cPiWsO48NsDP5aWG8a/L35zjY8melxj3z3wfnZiV/ELd5" +
    "KucU0PBF+CWtUtQwpwH9gTgKsHyN8+4GVWvTKevU7V7wPuGdj67Ubnbs4412+fXHHFFMZccU/Isl9oJWi" +
    "Wz1WCMJqwKUB1CUhIkJ+t0EPN8pH4n2ZAkkSpUAgUoFk+F0C8vQM9vcEeBRJN8i2b9jYAiJD/m0d0XzQw" +
    "AF7iO8ZMwwTKJdo6fagQvBTO57iXeMkGFAgHgKk0n89kYZnhf5ZbpoV8Jgum0TwAKIwxNpccHyIm+dpqG" +
    "rn1HMyiGbixWTSRW89hbTUNYpLPJceHGNs6lUYAxAFETw9PzTIZOUkCwR4My2IqJCk89e7l5HkAJoANF0" +
    "AYpg3kADAALUA4b91AEoD1D2jZsYholQ5sAAAAAElFTkSuQmCC";
        var üo =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAAVdEVYdENyZW" +
    "F0aW9uIFRpbWUANi8yNC8wOfbBa+MAAAO2SURBVFiFvZZNbBtFFMd/M7vxV/wR0jSCJCpRaYURhDYceqk" +
    "48CFybCFVBcJceuHQY0GUXriFSD1Aj0iAKqGq7QGKVAnUC5QiDiDaklCEUVHlRHEs0ca1E8der9c7HJy4" +
    "/ti1t5HTJz2tZnd23m/ee/+dFUophBAAZE4zoxTvKMUY22BCsCQEXz3+njpVv7cJkJ7lloBnI0/E8Q88C" +
    "Xqot9GtIuXcAmuZJAr+GvlAPVcHWJ4VHwMnh+Mvo5eWobAIVrG3AHoIwruwgiP8l/wBYHbkpPpQAlQtEp" +
    "HhOPrd65BNglkEm966WYRsEv3udSLDcaoWCQAdwK4y5qMCRr63u3YyI4+vfwi7WuszHUAp6CtlQG1/fKj" +
    "FUhuxagBVkBX3mhsWpLJwrwCW3f5clzAUhvFBCOjdAaRdRFUbATbr5GCFMsyvjqDtf5fQ+EsIX7htjjIL" +
    "5FM/cuOPz3g+ukzY3x1C2Q0Ato1j+g0L5o2n6Z/+0jFw3YIx9GcOo556lfnLx3hB/tM1E/YGgKzTOHjKG" +
    "CVy6CxaIIqUsqtrgSiRQ2dJGaNdVaG8ABgTx9GDMTRN8+x6MIYxcdwzwKYMHXsgsPc1pKY9GN+5xNDSN0" +
    "1z7o29gbH79bb3rL9PocsOJWhqQoVjD+jBWNO4dOsSsvhbvb6GBaWcQNsz3TRPBmNIXxQqq64AbTJ0yoD" +
    "WsHuA0t4j/H4tjZVbqr08MEZs3xHCLfMAriVrwccfg/EBBwAvMmwFiE0eJTZ51HVXjbb7owUA7l/9FFKf" +
    "tAM0NmFdhi3+MM3n5kOvnHBc225sQrcMSNmhix7GHNZWXgBaS7B9AC4qaAUQf14gkjzfMdZa/C3UxJst0" +
    "RwAGlXg9h1oBcj+eoHQyi+un1nDglxeMLj/7eYHDmvbXlQgzAIiEK2P5WSCG5cXMVcWHQF8O3YxMplo6h" +
    "27lN96D/Td/g7VsJudBxPsPJhwDO5m+u3vOwJ0lGHw6gyyUtiyBKVZIPjTTEcZdjyMRHaBwOdTSHPN02n" +
    "Y5OYagS+mENmFrZ+G2CDSc/jOHEC/eQ7NSzYqBfSb5/CdOYBIz3k7DZWC1TJEfS6FXEkhzx/zWvautmo+" +
    "kGGtXRWZvNnX+19xF8+bfaDI1AF0uJjOV1gvb3/w9TKk8xV0uAggAA3w/3yYOSnYM9oPA36IuZVji5Y3I" +
    "VeG9DrYin9f/JZ9QFkAIWAU6P96ivcH/UwJ2NHb8DVTsJItc2X6CqeBdSDdBEAtI4/CVCOABvg3ro8SoA" +
    "qU/wdxuwRM0OLCGgAAAABJRU5ErkJggg==";
        var üp =
    "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALE" +
    "gAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzI0LzA59sFr4wAAABx0RVh0U29mdHdhcmUAQW" +
    "RvYmUgRmlyZXdvcmtzIENTNAay06AAAALUSURBVFiFvZc7aBRRFIa/OzO7JkbFKAkmxIiCoGihpWBjlUL" +
    "BUsRYpLCx8UHAB1oJGjHYCJZKEkVSKlrEJr2FWBgUAj7ik5XERM1usjP3jMU6k3tnd5OYzO4PA+f+nDnn" +
    "n3PO3DujMNDTP3IdwpNhGHZQAyilPoMaut/bdTnmIuPkzWevlVJ7tm7ZTEtzE1nPTTV5MdD8+DnLp++Th" +
    "GE4NnTh8N5YQHff0xvAxX27tvGrIEz9macYSKoCsp7DpnVr2NDo8OrtR4C+BxePXPIAAt/v7mxv5UMuT6" +
    "GoU00coaCFL/MBU1mX9pZmJr7muoGSAK11h+AwO+fXJLmJ2TmhoclFa90BUBIgwnRBoyXdslfDdIE4V1Q" +
    "BCvNBXZJDqR1aa1OA1O3pI2htVEAkQBYRMPF+HIDO7TstezUQCRYELFWBgavHAbg8+MKyVwOrAlpLTFSC" +
    "5zrxTaadmoBKLfg68W5BgHOQkp9w7MogAO2dOyyfCIvxJpZswZObPeWqRWL+1J3Rij6L8VYsqwVSLiAqd" +
    "VJA3ALDruaT5CutHQDRGtFiXZ6r8FxF962R2Db55fgkefsy9wEp3wUrPelqbbsChgARKRvC6Mbclw+xLU" +
    "ZA067mk+RNiLkVS4UhzLilT4WX985YfYt4067mk+QtAfYQ6rL3uuIgJfaBpXySvLUW6ywon4ED5x6VBUn" +
    "yu0/0x/abh73/AktV3ha0xAwsB1FwEyJSla+0jgWkdRpWi1M2A8nvgZXs7ftPD/wXbwlKowWrQc1asCIB" +
    "Wgv+XB4n01Cf5P6cfRiFoXzDz7eJm62LAPx8KWckQEI1PDszeTbrNOB4tRUhQZHizCRKOcNQ+jNSgNfWd" +
    "X4M2Omu3YiTbcTJNKab2C8gxQI6Pw0h49+e394DBArIAOuBTOuh09eU4x0FWlPNvoBcKMHj3Ojdq4AP/L" +
    "YEYPys1hihKUBRmoXIrpeAEAj+AuDDE08z88hqAAAAAElFTkSuQmCC";
        var üq =
    "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" +
    "/n+mAOsv1vKou5QDFb4AAAAASUVORK5CYII=";
        var ür =
    "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" +
    "/HBAg8j/E6eCPaXZ42wAAAABJRU5ErkJggg==";
        var üs = üt = üu = üv =
    "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";
   /*     var üt =
    "";
        var üu =
    "";
        var üv =
    "";
   *///Yahoo 106o
        var üx =
   "iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA" +
   "7EAAAOxAGVKw4bAAAB40lEQVR4nO2aMW7CQBBF/0ZpaWhSURFfgTukIBIH4HQ5ABIpcgeuAKmo0rjhAJOC" +
   "TLK73sVrcPJjmCchocWCP2/HY0vGiQhumTt2ADYmgB2AjQlgB2BjAtgB2JgAdgA2JoAdgI0JYAdgYwLYAd" +
   "iYAHYANiaAHYCNCWAHYGMC2AHY3LMD+LiXDwEAWR4APLq/+M1Bd0A9qaSeVF9PdnaNJzzh52kGLSDkvI65" +
   "CgGpXW7beaXbDFhtwi9dzNLWDy48biSN4/R8V2T5kPyu6XreKOT9+dUBwHi/dVpoPalkvN86fa/H6loOV/" +
   "xwNC5eiSXExSuehLj4GB2CqeIVlQDkd7uteKC0A/zitWBdW23ke80vXgvWtYOTVCfozrdJ8Qs+shM97/1O" +
   "UEqKB7rOAH+3c+0PhC2fKFrx2z53CijT9Vz0dVwJh55fcGnxwECH4FHCWy9/bPhXN0I5/Pb/6YCnXm6Uun" +
   "WAPwtyQxEIZ0FuKHbg1DC8lLIOWMxcMPTiz5SRuGDo+ZyYBSX8loTyDkgNvdRaqtALi4+vAM0rwvmU3wdc" +
   "KYO8CvSJCWAHYGMC2AHYmAB2ADYmgB2AjQlgB2BjAtgB2JgAdgA2JoAdgI0JYAdgYwLYAdiYAHYANiaAHY" +
   "DNzQv4BKOroRG6GqowAAAAAElFTkSuQmCC"
    //oninit load images to respective img tag
      function F() { BA.src = üw + ü0; BB.src = üw + ü1; BC.src = üw + ü2; BD.src = üw + ü3; BE.src = üw + ü4; BF.src = üw + ü5; BG.src = üw + ü6; BH.src = üw + ü7; BI.src = üw + ü8; BJ.src = üw + ü9; BK.src = üw + üa; BL.src = üw + üb; BM.src = üw + üc; BN.src = üw + üd; BO.src = üw + üe; BP.src = üw + üf; BQ.src = üw + üg; BR.src = üw + üh; BS.src = üw + üi; BT.src = üw + üj; BU.src = üw + ük; BV.src = üw + ül; BW.src = üw + üm; BX.src = üw + ün; BY.src = üw + üo; BZ.src = üw + üp; C0.src = üw + üq; C1.src = üw + ür; C2.src = üw + üs; C3.src = üw + üt; C4.src = üw + üu; C5.src = üw + üv; }
      /*A C n E & B functions are for close/open fixed outter menus & hide or show their objects. Those 4 functions are called each time u click 'em, so it can be modified as a whole function with 4 arguments ( ÿ, þ, ý & ü )
        Finally D stands to fill with content the page as one click the <ul> elements*/
      function A() { switch (ÿ.className) {case þ: ÿ.className = ý; break; default: ÿ.className = þ; };C();E();  }
      function B() { switch (ü) { case 'a': A1.className = 'd'; A2.className = 'f'; A3.className = 'h'; break; case 'b': A0.className = 'b'; A2.className = 'f'; A3.className = 'h'; break; case 'c': A0.className = 'b'; A1.className = 'd'; A3.className = 'h'; break; case 'd': A0.className = 'b'; A1.className = 'd'; A2.className = 'f'; break; default: ; } }
      function C() { switch (A1.className) { case 'd': A4.className = A5.className = A6.className = 'j'; break; case 'c': A4.className = 'k'; A5.className = 'l'; A6.className = 'z'; break; default: ; }; }
      function D() { AG.innerHTML = û; AA.innerText = ù; A9.innerText = ú; A8.className = 'o';AH.className = 'p'; }
      function E() { switch (A0.className) { case 'b': AI.className = AJ.className = AK.className = AL.className = AM.className = AN.className = AO.className = AP.className = AQ.className = AR.className = AS.className = AT.className = AU.className = AV.className = 'j'; AW.innerText = 'He'; AX.innerText = 'She'; AY.innerText = 'Door'; AZ.innerText = 'Win.'; B0.innerText = 'Kit.'; B1.innerText = 'Bat.'; B2.innerText = 'R 1'; B3.innerText = 'R 2'; B4.innerText = 'R 3'; B5.innerText = 'R 4'; B6.innerText = 'Gas'; B7.innerText = 'Wat.'; B8.innerText = 'Ele.'; B9.innerText = 'Com.'; break; case 'a': AI.className = AJ.className = AK.className = AL.className = AM.className = AN.className = AO.className = AP.className = AQ.className = AR.className = AS.className = AT.className = AU.className = AV.className = 'q'; AW.innerText = 'He'; AX.innerText = 'She'; AY.innerText = 'Door'; AZ.innerText = 'Window'; B0.innerText = 'Kitchen'; B1.innerText = 'Bathroom'; B2.innerText = 'Room 1'; B3.innerText = 'Room 2'; B4.innerText = 'Room 3'; B5.innerText = 'Room 4'; B6.innerText = 'Gas'; B7.innerText = 'Water'; B8.innerText = 'Electricity'; B9.innerText = 'Communications'; break; default: ; }; }
      //reserving 2 functions for time based things
      function G() { Ø = new Date(); A[0] = (Ø.getTimezoneOffset() / 60); if (clientInformation.appName != 'Microsoft Internet Explorer') { A[1] = Ø.getYear() + 1900; } else { A[1] = Ø.getYear(); }; A[2] = Ø.getMonth() + 1; A[3] = Ø.getDay() + 24; A[4] = Ø.getHours();A[5] = Ø.getMinutes(); A[6] = Ø.getSeconds();EU(a = '4');EU(a = '5');EU(a = '6');A[7] = '<!-#echo var="REMOTE_ADDR"-->'; L060.innerHTML = 'Yahoo <br/>' + 'Toffset: ' + A[0] + ' @ ' + A[1] + ' / ' + A[2] + ' / ' + A[3] + ' <br/>SysTime: ' + A[4] + ' : ' + A[5] + ' : ' + A[6] + '<br/>ip: ' + A[7]; } //alert('Toffset: ' + A[0] + ', Year: ' + A[1] + ', Month: ' + A[2] + ', Day: ' + A[3] + ', Hour: ' + A[4] + ', Minute: ' + A[5] + ', Second ' + A[6]); }
      function H() { }//<--setInterval/timeout for some functions like localizator, hack mitigation or whatever
      //Identificator function
      function I() { }
      //Sign in function
      function J() { }
      //KronJob function for Time and iframe prevention
      function K() { Time=window.setInterval(G,1920);if (self != top) top.location = self.location;}
      //Localizator function
      function L() { }
      //metric K according to media
      function M() { }// <-- for things (media screen / browser size) dependant
      //Go to left, right, up n down
      function N() { scrollTo(ý, ÿ) }// <--This should be scrollBy some px to've a nice nav xp
      //Origen distance
      function O() { A[8] = window.pageYOffset; if (A[8] < 1) { A[8] = 'ÿÿÿÿÿÿÿhooDerCertSystem'; }; document.title = A[8]; }
      //Particular function
      function P() { alert('Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber); }
      //Go to searched fragment of Frequently Asked Question; alert(''+clientInformation.appName+' says: '+AG.innerText.search(FAQ.value) + ', ' + FAQ.value.length);
      function Q() { switch (clientInformation.appName) { case 'Microsoft Internet Explorer': var ÿ = document.body.createTextRange(); ÿ.findText(FAQ.value); ÿ.select(); break; case 'Mozilla': var ÿ = window.getSelection(); var ý = document.createRange(); ÿ.selectNodeContent(FAQ.value); ÿ.removeAllRanges(); ÿ.addRange(ý); ; break; case 'Opera': var ÿ = window.getSelection(); var ý = document.createRange(); ÿ.selectNodeContent(FAQ.value); ÿ.removeAllRanges(); ÿ.addRange(ý); break; case 'Netscape': window.find(FAQ.value); window.find(FAQ.value);/This hack fails at 50% of times/ break; case 'Safari': var ý = AG.innerText.search(FAQ.value) + FAQ.value.length; var ÿ = window.getSelection(); ÿ.selection.setBaseAndExtent(text, ý, text, FAQ.value.length);/this other is imposible givin those args/ break; default: ; }; }  // <-- i'm a headache . for ie:-> works but not the way expected, chrome||netscape:-> 1/2 of times, mozilla:-> nil <-:safari||opera
      //Remoting function
      function R() { }
      //Zoo zone instead of entropy
      //SQuirreL
      function S() { }
      //Tig32
      function T() { }
      //ARMad-11o
      function U() { }
      //G00Fer
      function V() { }
      //GoSTh
      function W() { Ð = $.value; if (Ð < 0) { Ð = $.value = '0'; } else { if (Ð > 63) { Ð = $.value = '63'; }; }; _.innerHTML = Ø.charCodeAt(Ð); }
      //@eof zoo zone
      //conditional menu show
      function X() {switch (C6.className) {case 'j': Y(); break;default: Z(); } }
      //Show inner menu
      function Y() { C6.className = 'menu'; AG.style.width = '75%'; }
      //hide inner menu
      function Z() { C6.className = 'j'; AG.style.width = '100%'; }
      //Page gets heavy at this point, but remember it will not refresh while navigating & even work offline till client push f5 or call a refresh
      //56 page sections (main menu, Go to n Links buttons). We jumped to from DA to ET to avoid HTML object collision
      //    -Main menu:
      function DA() { Y(); AG.innerHTML = "COMODO firewall<br/><div class='b0'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Allow&#8194;/&#8194;Block&#8194;applications&#8194;page',û=EU.innerText)>Applications</li><li onclick=D(ú='2º',ù='Stealth&#8194;/&#8194;Open&#8194;ports&#8194;page',û=EV.innerText)>Ports</li><li onclick=D(ú='3º',ù='Manage&#8194;network&#8194;page',û=EW.innerText)>Manage NN</li><li onclick=D(ú='4º',ù='Stop&#8194;network&#8194;activity&#8194;page',û=EX.innerText)>Stop NN</li><li onclick=D(ú='5º',ù='Advanced&#8194;settings&#8194;page',û=EY.innerText)>Advanced options</li></ul>"; }
      function DB() { Y(); AG.innerHTML = "COMODO firewall<br/><div class='b1'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Applications&#8194;n&#8194;operating&#8194;system&#8194;sensors',û=EZ.innerText)>HIPS Technology</li><li onclick=D(ú='2º',ù='Run&#8194;apps&#8194;sandboxed&#8194;in&#8194;virtual&#8194;memory',û=F0.innerText)>SANDBOX Technology</li><li onclick=D(ú='3º',ù='Quarantine&#8194;page',û=F1.innerText)>Quarantine</li><li onclick=D(ú='4º',ù='Virtual&#8194;desktop&#8194;page',û=F2.innerText)>Virtual desktop</li><li onclick=D(ú='5º',ù='Scan&#8194;results&#8194;page',û=F3.innerText)>Scan</li></ul>"; }
      function DC() { Y(); AG.innerHTML = "OPERATING SYSTEMS<br/><div class='b2'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Free&#8194;Object&#8194;Oriented&#8194;System',û=F4.innerText)>FOOS</li><li onclick=D(ú='2º',ù='Linux&#8194;OS',û=F5.innerText)>Linux</li><li onclick=D(ú='3º',ù='Unix&#8194;OS',û=F6.innerText)>Unix</li><li onclick=D(ú='4º',ù='Windows&#8194;OS',û=F7.innerText)>Windows</li><li onclick=D(ú='5º',ù='Non&#8194;FOOS',û=F8.innerText)>Non FOOS</li></ul>"; }
      function DD() { Y(); AG.innerHTML = "Drivers<br/><div class='b3'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Mother&#8194;board&#8194;drivers&#8194;page',û=F9.innerText)>MB</li><li onclick=D(ú='2º',ù='Processor&#8194;driver&#8194;page',û=FA.innerText)>Processor</li><li onclick=D(ú='3º',ù='Graphic&#8194;card&#8194;drivers&#8194;page',û=FB.innerText)>Graphic card</li><li onclick=D(ú='4º',ù='Sound&#8194;card&#8194;drivers&#8194;page',û=FC.innerText)>Sound card</li><li onclick=D(ú='5º',ù='Other&#8194;devices&#8194;drivers&#8194;page',û=FD.innerText)>TV, Wifi, etc.. devices</li></ul>"; }
      function DE() { Y(); AG.innerHTML = "Compilers<br/><div class='b4'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Compiler&#8194;1&#8194;page',û=FE.innerText)>compiler 1</li><li onclick=D(ú='2º',ù='Compiler&#8194;2&#8194;page',û=FF.innerText)>compiler 2</li><li onclick=D(ú='3º',ù='Compiler&#8194;3&#8194;page',û=FG.innerText)>compiler 3</li><li onclick=D(ú='4º',ù='Compiler&#8194;4&#8194;page',û=FH.innerText)>compiler 4</li><li onclick=D(ú='5º',ù='Compiler&#8194;5&#8194;page',û=FI.innerText)>compiler 5</li></ul>"; }
      function DF() { Y(); AG.innerHTML = "Interpreters<br/><div class='b5'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Interpreter&#8194;1&#8194;page',û=FJ.innerText)>interpreter 1</li><li onclick=D(ú='2º',ù='Interpreter&#8194;2&#8194;page',û=FK.innerText)>interpreter 2</li><li onclick=D(ú='3º',ù='Interpreter&#8194;3&#8194;page',û=FL.innerText)>interpreter 3</li><li onclick=D(ú='4º',ù='Interpreter&#8194;4&#8194;page',û=FM.innerText)>interpreter 4</li><li onclick=D(ú='5º',ù='Interpreter&#8194;5&#8194;page',û=FN.innerText)>interpreter 5</li></ul>"; }
      function DG() { Y(); AG.innerHTML = "Maps<br/><div class='b6'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Local&#8194;maps&#8194;page',û=FO.innerText)>Local</li><li onclick=D(ú='2º',ù='National&#8194;maps&#8194;page',û=FP.innerText)>National</li><li onclick=D(ú='3º',ù='International&#8194;maps&#8194;page',û=FQ.innerText)>International</li><li onclick=D(ú='4º',ù='Solar&#8194;maps&#8194;page',û=FR.innerHTML)>Solar</li><li onclick=D(ú='5º',ù='Gallactic&#8194;maps&#8194;page',û=FS.innerText)>Gallactic</li></ul>"; }
      function DH() { Y(); AG.innerHTML = "Code<br/><div class='b7'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Search&#8194;code&#8194;page',û=FT.innerText)>Search</li><li onclick=D(ú='2º',ù='Examples&#8194;page',û=FU.innerText)>Examples</li><li onclick=D(ú='3º',ù='Snipets&#8194;page',û=FV.innerText)>Snipets</li><li onclick=D(ú='4º',ù='Applications&#8194;code&#8194;page',û=FW.innerText)>Applications</li><li onclick=D(ú='5º',ù='Operating&#8194;systems&#8194;code&#8194;page',û=FX.innerText)>Operating systems</li></ul>"; }
      function DI() { Y(); AG.innerHTML = "Search<br/><div class='b8'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Search&#8194;page&#8194;page',û=FY.innerText)>Page</li><li onclick=D(ú='2º',ù='Search&#8194;person&#8194;page',û=FZ.innerText)>Person</li><li onclick=D(ú='3º',ù='Search&#8194;program&#8194;page',û=G0.innerText)>Program</li><li onclick=D(ú='4º',ù='Search&#8194;object&#8194;page',û=G1.innerText)>Object</li><li onclick=D(ú='5º',ù='Search&#8194;organization&#8194;page',û=G2.innerText)>Organization</li></ul>"; }
      function DJ() { Y(); AG.innerHTML = "Social networks<br/><div class='b9'></div>"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Visit-us&#8194;page',û=G3.innerText)>Visit-us</li><li onclick=D(ú='2º',ù='Follow-us&#8194;page',û=G4.innerText)>Follow-us</li><li onclick=D(ú='3º',ù='Bookmark-us&#8194;page',û=G5.innerText)>Bookmark-us</li></ul>"; }
      function DK() { Y(); AG.innerHTML = "Frequently asked questions<br/><div class='ba'></div><br/>" + G6.innerHTML; C6.innerHTML = "<input id='FAQ' type='text' style='width:100%' /><input id='FAB' onclick='Q()' style='width:100%' type='button' value='search' />"; } // <-- AG May append the FAQ that resides in G6 <-- C6 Must be a search box targeting FAQ
      function DL() { Y(); AG.innerHTML = "Web site map<br/><div class='bb'></div><br/>" + G7.innerHTML; C6.innerHTML = ""; } // <-- C6 must be a navbar or icons
      function DM() { Y(); C6.innerHTML = "Mail<br/><img src='data:image/png;base64," + ü0 + "' title='mail'/>"; AG.innerHTML = G8.innerHTML; }
      function DN() { Y(); C6.innerHTML = "News<br/><img src='data:image/png;base64," + ü1 + "' title='news'/>"; AG.innerHTML = G9.innerHTML; }
      function DO() { Y(); C6.innerHTML = "Sports<br/><img src='data:image/png;base64," + ü2 + "' title='sports'/>"; AG.innerHTML = GA.innerHTML; }
      function DP() { Y(); C6.innerHTML = "Finance<br/><img src='data:image/png;base64," + ü3 + "' title='finance'/>"; AG.innerHTML = GB.innerHTML; }
      function DQ() { Y(); C6.innerHTML = "Celebrity<br/><img src='data:image/png;base64," + ü4 + "' title='celebrity'/>"; AG.innerHTML = GC.innerHTML; }
      function DR() { Y(); C6.innerHTML = "Life & style<br/><img src='data:image/png;base64," + ü5 + "' title='life & style'/>"; AG.innerHTML = GD.innerHTML; }
      function DS() { Y(); C6.innerHTML = "Movies<br/><img src='data:image/png;base64," + ü6 + "' title='movies'/>"; AG.innerHTML = GE.innerHTML; }
      function DT() { Y(); C6.innerHTML = "Weather<br/><img src='data:image/png;base64," + ü7 + "' title='weather'/>"; AG.innerHTML = GF.innerHTML; }
      function DU() { Y(); C6.innerHTML = "Answers<br/><img src='data:image/png;base64," + ü8 + "' title='answers'/>"; AG.innerHTML = GG.innerHTML; }
      function DV() { Y(); C6.innerHTML = "Flickr<br/><img src='data:image/png;base64," + ü9 + "' title='flickr'/>"; AG.innerHTML = GH.innerHTML; }
      function DW() { Y(); C6.innerHTML = "Mobile<br/><img src='data:image/png;base64," + üa + "' title='mobile'/>"; AG.innerHTML = GI.innerHTML; }
      function DX() { Y(); C6.innerHTML = "More<br/><img src='data:image/png;base64," + üb + "' title='more'/>"; AG.innerHTML = GJ.innerHTML; }
      //    -Go to:
      function DY() { Z(); AG.innerHTML = GK.innerHTML; }
      function DZ() { Z(); AG.innerHTML = GL.innerHTML; }
      function D0() { Z(); AG.innerHTML = GM.innerHTML; }
      function D1() { Z(); AG.innerHTML = GN.innerHTML; }
      function D2() { Z(); AG.innerHTML = GO.innerHTML; }
      function D3() { Z(); AG.innerHTML = GP.innerHTML; }
      function D4() { Z(); AG.innerHTML = GQ.innerHTML; }
      function D5() { Z(); AG.innerHTML = GR.innerHTML; }
      function D6() { Z(); AG.innerHTML = GS.innerHTML; }
      function D7() { Z(); AG.innerHTML = GT.innerHTML; }
      function D8() { Z(); AG.innerHTML = GU.innerHTML; }
      function D9() { Z(); AG.innerHTML = GV.innerHTML; }
      function EA() { Z(); AG.innerHTML = GW.innerHTML; }
      function EB() { Z(); AG.innerHTML = GX.innerHTML; }
      //    -links:
      function EC() { Z(); AG.innerHTML = GY.innerHTML; }
      function ED() { Z(); AG.innerHTML = GZ.innerHTML; }
      function EE() { Z(); AG.innerHTML = H0.innerHTML; }
      function EF() { Z(); AG.innerHTML = H1.innerHTML; }
      function EG() { Z(); AG.innerHTML = H2.innerHTML; }
      function EH() { Z(); AG.innerHTML = H3.innerHTML; }
      function EI() { Z(); AG.innerHTML = H4.innerHTML; }
      function EJ() { Z(); AG.innerHTML = H5.innerHTML; }
      function EK() { Z(); AG.innerHTML = H6.innerHTML; }
      function EL() { Z(); AG.innerHTML = H7.innerHTML; }
      function EM() { Z(); AG.innerHTML = H8.innerHTML; }
      function EN() { Z(); AG.innerHTML = H9.innerHTML; }
      function EO() { Z(); AG.innerHTML = HA.innerHTML; }
      function EP() { Z(); AG.innerHTML = HB.innerHTML; }
      function EQ() { Z(); AG.innerHTML = HC.innerHTML; }
      function ER() { Z(); AG.innerHTML = HD.innerHTML; }
      function ES() { Z(); AG.innerHTML = HE.innerHTML; }
      function ET() { Y(); AG.innerText = "loremloremloremloremloremloremloremloremloremlorem loremloremloremloremlorem"; C6.innerHTML = "<ul><li onclick=D(ú='1º',ù='Page'+ú,û=AB.innerHTML)>1</li><li onclick=D(ú='2º',ù='Page'+ú,û=AC.innerHTML)>2</li><li onclick=D(ú='3º',ù='Page'+ú,û=AD.innerHTML)>3</li><li onclick=D(ú='4º',ù='Page'+ú,û=AE.innerHTML)>4</li><li onclick=D(ú='5º',ù='Page'+ú,û=AF.innerHTML)>5</li></ul>"; }
      function EU() { if (A[a] < 10) { A[a] = '0' + A[a]; }; }//Prepending a zero if number is alone
      function EV() { if (ù = '') { ù = -1 }; ù++; if (ù > 9) { ù = '0'; }; ü = 'ü'; ú[ü, ù];String.prototype.concat(ú); }  //ú = String.prototype.concat(ü, ù);return ú;}//ú must be fixed
      </script>
</head>
<body class="i" onload="F(),K(),start()" onerror="P(msg, url, linenumber)" onscroll="O()">
<!-Dynamic box->
<div class="head"><div class="d7"><div class="d8" onclick="N(ý='0', ÿ='0')"></div><div class="d9" onclick="N(ý='65535', ÿ='0')"></div><div class="da" onclick="N(ý='0', ÿ='0')"></div><div class="db" onclick="N(ý='0', ÿ='65535')"></div></div><div class="cm"><div class="cn"></div><div class="co"></div><div class="cp"></div><div class="cq"></div></div><table class="y"><tr align="center"><td><table class="y"><tr><td><img class="" id="BM" title="twitter" /></td><td><img class="" id="BN" title="identica" /></td><td><img class="" id="BO" title="vimeo" /></td><td><img class="" id="BP" title="devian-art" /></td><td><img class="" id="BQ" title="flickr" /></td><td><img class="" id="BR" title="lastfm" /></td><td><img class="" id="BS" title="tmblr" /></td><td><img class="" id="BT" title="youtube" /></td><td><img class="" id="BU" title="delicious" /></td><td><img class="" id="BV" title="linked-in" /></td></tr><tr><td><img class="" id="BW" title="google plus" /></td><td><img class="" id="BX" title="facebook" /></td><td><img class="" id="BY" title="blogger" /></td><td><img class="" id="BZ" title="digg" /></td><td><img class="" id="C0" title="posterous" /></td><td><img class="" id="C1" title="reddit" /></td><td><img class="" id="C2" title="wordpress" /></td><td><img class="" id="C3" title="world" /></td><td><img class="" id="C4" title="wide" /></td><td><img class="" id="C5" title="web" /></td></tr></table></td><!-section disabled for testing pruposes-<td><div class="s"></div></td><td></td><td class=""><div class="t"></div></td><td></td><td class=""><div class="u"></div></td><td></td><td class=""><div class="v"></div></td><td></td><td class=""><div class="w"></div></td><td></td><td class=""><div class="x"></div></td>--><td id="L060">Yahoo</td><td><div class="cx"><div class="cr"></div><div class="cs"></div><div class="ct"></div><div class="cu"></div><div class="cv"></div><div class="cw"></div><div class="cx"></div><div class="cy"></div><div class="cz"></div><div class="d0" onclick="javascript:window.close();"></div><div class="d1"></div><div class="d2"></div><div class="d3"></div><div class="d4"></div><div class="d5"></div><div class="d6"></div></div></td><td></td></tr></table><table class="y"><tr><td><div id="A7" class="m" onclick="X()"><div style="color:#fff" id="A9"></div></div></td><td bgcolor="black" style="color:White" id="AA" width="100%"></td><td align="right"><div id="A8" class="n"><div id="AH"></div></div></td></tr></table></div>
<div class="menu" id="C6"><ul><li onclick="D(ú='1º', ù='Page'+ú, û=AB.innerText)">1</li><li onclick="D(ú='2º', ù='Page'+ú, û=AC.innerText)">2</li><li onclick="D(ú='3º', ù='Page'+ú, û=AD.innerText)">3</li><li onclick="D(ú='4º', ù='Page'+ú, û=AE.innerText)">4</li><li onclick="D(ú='5º', ù='Page'+ú, û=AF.innerText)">5</li></ul></div>
<div class="main" id="AG">loremloremloremloremloremloremloremloremloremlorem loremloremloremloremlorem<input onclick="modalShow()" type="button" value="hide/show" /><canvas id="glcanvas" width="640" height="480">Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.</canvas></div>
<!-Triangles->
<div class="j" id="A4"></div><div class="j" id="A5"></div>
<!-Outter menus->
<div id="A0" align="center" class="b" onclick="A(ÿ=this, þ='a', ý='b'),B(ü='a')">Go to:<table class="y"><tr class="r"><td id="AW">He</td><td><div class="bo"></div></td></tr><tr><td id="AI" class="j" colspan="2">love RAM</td></tr><tr class="r"><td id="AX">She</td><td><div class="bp"></div></td></tr><tr><td id="AJ" class="j" colspan="2">love ROM</td></tr><tr class="r"><td id="AY">Door</td><td><div class="bq"></div></td></tr><tr><td id="AK" class="j" colspan="2">open / close</td></tr><tr class="r"><td id="AZ">Win.</td><td><div class="br"></div></td></tr><tr><td id="AL" class="j" colspan="2">doWS arguments n parameters</td></tr><tr class="r"><td id="B0">Kit.</td><td><div class="bs"></div></td></tr><tr><td id="AM" class="j" colspan="2">functions or apps</td></tr><tr class="r"><td id="B1">Bat.</td><td><div class="bt"></div></td></tr><tr><td id="AN" class="j" colspan="2">variables and arrays</td></tr><tr class="r"><td id="B2">R 1</td><td><div class="bu"></div></td></tr><tr><td id="AO" class="j" colspan="2">Tv room</td></tr><tr class="r"><td id="B3">R 2</td><td><div class="bv"></div></td></tr><tr><td id="AP" class="j" colspan="2">Bedroom</td></tr><tr class="r"><td id="B4">R 3</td><td><div class="bw"></div></td></tr><tr><td id="AQ" class="j" colspan="2">Bedroom</td></tr><tr class="r"><td id="B5">R 4</td><td><div class="bx"></div></td></tr><tr><td id="AR" class="j" colspan="2">Bedroom</td></tr><tr class="r"><td id="B6">Gas</td><td><div class="by"></div></td></tr><tr><td id="AS" class="j" colspan="2">gas prices</td></tr><tr class="r"><td id="B7">Wat.</td><td><div class="bz"></div></td></tr><tr><td id="AT" class="j" colspan="2">water prices n taxes</td></tr><tr class="r"><td id="B8">Ele.</td><td><div class="c0"></div></td></tr><tr><td id="AU" class="j" colspan="2">Electricity prices n taxes</td></tr><tr class="r"><td id="B9">Com.</td><td><div class="c1"></div></td></tr><tr><td id="AV" class="j" colspan="2">do it yourself</td></tr></table></div>
<div id="A1" class="d" onclick="A(ÿ=this, þ='c', ý='d'),B(ü='b')">Main menu:<br/><table class="j" id="A6"><tr><td>Firewall</td><td>Antivirus</td><td>Operating Systems</td><td>Drivers</td><td>Compilers</td><td>Interpreters</td></tr><tr><td onclick="DA()"><div class="b0"></div></td><td onclick="DB()"><div class="b1"></div></td><td onclick="DC()"><div class="b2"></div></td><td onclick="DD()"><div class="b3"></div></td><td onclick="DE()"><div class="b4"></div></td><td onclick="DF()"><div class="b5"></div></td></tr><tr><td colspan="6"></td></tr><tr><td>Maps</td><td>Code</td><td>Search</td><td>SNN</td><td>FAQ</td><td>Web map</td></tr><tr><td onclick="DG()"><div class="b6"></div></td><td onclick="DH()"><div class="b7"></div></td><td onclick="DI()"><div class="b8"></div></td><td onclick="DJ()"><div class="b9"></div></td><td onclick="DK()"><div class="ba"></div></td><td onclick="DL()"><div class="bb"></div></td></tr><tr><td colspan="6"></td></tr><tr><td>Mail</td><td>News</td><td>Sports</td><td>Finance</td><td>Celebrity</td><td>life & style</td></tr><tr><td onclick="DM()"><img class="bc" id="BA"/></td><td onclick="DN()"><img class="bd" id="BB"/></td><td onclick="DO()"><img class="be" id="BC"/></td><td onclick="DP()"><img class="bf" id="BD"/></td><td onclick="DQ()"><img class="bg" id="BE"/></td><td onclick="DR()"><img class="bh" id="BF"/></td></tr><tr><td colspan="6"></td></tr><tr><td>Movies</td><td>Weather</td><td>Answers</td><td>Flickr</td><td>Mobile</td><td>More</td></tr><tr><td onclick="DS()"><img class="bi" id="BG"/></td><td onclick="DT()"><img class="bj" id="BH"/></td><td onclick="DU()"><img class="bk" id="BI"/></td><td onclick="DV()"><img class="bl" id="BJ"/></td><td onclick="DW()"><img class="bm" id="BK"/></td><td onclick="DX()"><img class="bn" id="BL"/></td></tr></table></div>
<div id="A2" align="center" class="f" onclick="A(ÿ=this, þ='e', ý='f'),B(ü='c')">Links:<table class="y"><tr><td>C</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>C++</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>VB</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>JS</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>CSS</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>HTM</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>HTA</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>EXE</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>INI</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>BAT</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>NET</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>NB</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>MAX</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>CAD</td><td><div class="c2"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>eye</td><td><div class="c3"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>kat</td><td><div class="c4"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr><td>lab</td><td><div class="c5"></div></td></tr><tr><td colspan="2" height="11px"></td></tr><tr onclick="ET()"><td>home</td><td><div class="c6"></div></td></tr></table></div>
<div id="A3" class="h" onclick="A(ÿ=this, þ='g', ý='h'),B(ü='d')">Help:<table class="y"><tr><td width="16.5%">Navigation</td><td width="16.5%"><div class="c7"></div></td><td width="16.5%">Compatibility</td><td width="16.5%"><div class="c8"></div></td><td width="16.5%">About</td><td width="16.5%"><div class="c9"></div></td></tr><tr></tr><tr><td colspan="2"><ul><li><a>fun0</a> <a>fun1</a> <a>fun2</a> <a>fun3</a> <a>fun4</a> <a>fun5</a> <a>fun6</a> <a>fun7</a> <a>fun8</a> <a>fun9</a> <a>fun10</a> <a>fun11</a></li></ul><ul><li><a>he</a> <a>she</a> <a>door</a> <a>window</a> <a>lemon</a> <a>orange</a> <a>facebook</a> <a>twitter</a> <a>youtube</a> <a>google+</a> <a>gas</a> <a>water</a> <a>electricity</a> <a>Com</a></li></ul><ul><li><a>C</a> <a>C++</a> <a>VB</a> <a>JS</a> <a>CSS</a> <a>HTM</a> <a>HTA</a> <a>EXE</a> <a>INI</a> <a>BAT</a> <a>NET</a> <a>NB</a> <a>MAX</a> <a>CAD</a> <a>eye</a> <a>kat</a> <a>lab</a> <a>home</a></li></ul><ul><li><a>Navigation</a> <a>Compatibility</a> <a>About</a></li></ul></td><td colspan="2">Chrom:<ul><li>Chrome: webkit</li><li>Chromodo: webkit</li></ul>Mozilla:<ul><li>Mozilla: moz</li></ul>Opera:<ul><li>Opera: o</li><li>Safari: o</li></ul>Microsoft:<ul><li>IE &lt;6: ms</li><li>IE &gt;6: </li></ul></td><td colspan="2">XX-large HTML text + CSS functions + JS<br/><ul><li>Less than 30 HTML lines</li></ul><ul><li>About 300 lines of CSS</li></ul><ul><li>Some JScript lines</li></ul></td></tr><tr><td style="position:absolute;left:-98px;top:152px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg);">:Help - Links - Go to - Main menu:</td></tr></table></div>
<!-Dynamic content (Any div tag can contain HTML fragments, so it's da place to fill with html or text of content). Deco. remider: vflag=cl, hcover=cm->
 <!-home->         <div class="j" id="AB"><div class="cm" style="position:relative;text-align:center;">title 1<div class="cl" style="position:relative;">save<br/>this<br/>box</div></div><br/>lorem 1<table class="y"><tr><td class="de"><br/><br/>sublorem1<div class="cm" style="position:relative;top:-58px;">subtitle 1<div class="cl" style="position:relative;">save<br/>this</div></div><br/></td><td class="de"><br/><br/>sublorem2<div class="cm" style="position:relative;top:-58px;">subtitle 2<div class="cl" style="position:relative;">save<br/>this</div></div><br/></td></tr><tr><td class="de"><br/><br/>sublorem3<div class="cm" style="position:relative;top:-58px;">subtitle 3<div class="cl" style="position:relative;">save<br/>this</div></div><br/></td><td class="de"><br/><br/>sublorem4<div class="cm" style="position:relative;top:-58px;">subtitle 4<div class="cl" style="position:relative;">save<br/>this</div></div><br/></td></tr></table></div><div class="j" id="AC"><div class="cm" style="position:relative;"><div class="cl" style="position:relative;">save<br/>this</div></div><br/>lorem 2</div><div class="j" id="AD"><div class="cm" style="position:relative;"><div class="cl" style="position:relative;"></div></div><br/>lorem 3</div><div class="j" id="AE"><div class="cm" style="position:relative;"><div class="cl" style="position:relative;"></div></div><br/>lorem 4</div><div class="j" id="AF"><div class="cm" style="position:relative;"><div class="cl" style="position:relative;"></div></div><br/>lorem 5</div>
 <!-firewall->     <div class="j" id="EU">CF 1</div><div class="j" id="EV">CF 2</div><div class="j" id="EW">CF 3</div><div class="j" id="EX">CF 4</div><div class="j" id="EY">CF 5</div>
 <!-antivirus->    <div class="j" id="EZ">CF 6</div><div class="j" id="F0">CF 7</div><div class="j" id="F1">CF 8</div><div class="j" id="F2">CF 9</div><div class="j" id="F3">CF 0</div>
 <!-O.Systems->    <div class="j" id="F4">OS 0</div><div class="j" id="F5">OS 1</div><div class="j" id="F6">OS 2</div><div class="j" id="F7">OS 3</div><div class="j" id="F8">OS 4</div>
 <!-drivers->      <div class="j" id="F9">DD 0</div><div class="j" id="FA">DD 1</div><div class="j" id="FB">DD 2</div><div class="j" id="FC">DD 3</div><div class="j" id="FD">DD 4</div>
 <!-compilers->    <div class="j" id="FE">CC 0</div><div class="j" id="FF">CC 1</div><div class="j" id="FG">CC 2</div><div class="j" id="FH">CC 3</div><div class="j" id="FI">CC 4</div>
 <!-interpreters-> <div class="j" id="FJ">II 0</div><div class="j" id="FK">II 1</div><div class="j" id="FL">II 2</div><div class="j" id="FM">II 3</div><div class="j" id="FN">II 4</div>
 <!-maps->         <div class="j" id="FO"> </div><div class="j" id="FP"> </div><div class="j" id="FQ"> </div><div class="j" id="FR"><div class="ca">  <div class="cb"><div class="cc"></div></div> <div class="cf"><div class="cd"><div class="ce"></div></div></div> <div class="cg"><div class="cd"><div class="ce"></div></div></div> <div class="ch"><div class="cd"><div class="ce"></div></div></div> <div class="ci"><div class="cd"><div class="ce"></div></div></div> <div class="cj"><div class="cd"><div class="ce"></div></div></div> <div class="ck"><div class="cd"><div class="ce"></div></div></div></div></div><div class="j" id="FS"> </div>
 <!-code->         <div class="j" id="FT"> </div><div class="j" id="FU"> </div><div class="j" id="FV"> </div><div class="j" id="FW"> </div><div class="j" id="FX"> </div>
 <!-search->       <div class="j" id="FY"> </div><div class="j" id="FZ"> </div><div class="j" id="G0"> </div><div class="j" id="G1"> </div><div class="j" id="G2"> </div>
 <!-social->       <div class="j" id="G3"> </div><div class="j" id="G4"> </div><div class="j" id="G5"> </div>
 <!-FAQ->          <div class="j" id="G6">Q 0?<br/>Q 1?<br/>Q 2?<br/>Q 3?<br/>Q 4?<br/>Q 5?<br/><br/>A 0.<br/>A 1.<br/>A 2.<br/>A 3.<br/>A 4.<br/>A 5. </div>
 <!-web map->      <div class="j" id="G7"><div class="y" onclick="ET()">HOME:  lorem 1  lorem 2  lorem 3  lorem 4  lorem 5</div><div class="y" onclick="DA()">FIREWALL:  CF 1  CF 2  CF 3  CF 4  CF 5</div><div class="y" onclick="DB()">ANTIVIRUS:  CF 6  CF 7  CF 8  CF 9  CF 0</div><div class="y" onclick="DC()">OS:  OS 0  OS 1  OS 2  OS 3  OS 4</div><div class="y" onclick="DD()">DRIVERS:  DD 0  DD 1  DD 2  DD 3  DD 4</div><div class="y" onclick="DE()">COMPILERS:  CC 0  CC 1  CC 2  CC 3  CC 4</div><div class="y" onclick="DF()">INTERPRETERS:  II 0  II 1  II 2  II 3  II 4</div><div class="y" onclick="DG()">MAPS:  Local  National  International  Solar  Gallactic</div><div class="y" onclick="DH()">CODE:  Search  Examples  Snipets  Applications  Operating_systems</div><div class="y" onclick="DI()">SEARCH:  Page  Person  Program  Object  Organization</div><div class="y" onclick="DJ()">SNN:  Visit-us  Follow-us  Bookmark-us</div><div class="y" onclick="DK()">Frequently Asked questions</div><div class="y" onclick="DL()">Web sitemap (THIS.Page)</div><div class="y" onclick="DM()">Mail service</div><div class="y" onclick="DN()">News</div><div class="y" onclick="DO()">Sports</div><div class="y" onclick="DP()">Finance</div><div class="y" onclick="DQ()">Celebrity</div><div class="y" onclick="DR()">Life & Style</div><div class="y" onclick="DS()">Movies</div><div class="y" onclick="DT()">Weather</div><div class="y" onclick="DU()">Answers</div><div class="y" onclick="DV()">Flickr</div><div class="y" onclick="DW()">Mobile</div><div class="y" onclick="DX()">More</div><div class="y" onclick="DY()">He</div><div class="y" onclick="DZ()">She</div><div class="y" onclick="E0()">Door</div><div class="y" onclick="E1()">Window</div><div class="y" onclick="E2()">Kitchen</div><div class="y" onclick="E3()">Bathroom</div><div class="y" onclick="E4()">TV. room</div><div class="y" onclick="E5()">Bedroom 1</div><div class="y" onclick="E6()">Bedroom 2</div><div class="y" onclick="E7()">Bedroom 3</div><div class="y" onclick="E8()">Gas</div><div class="y" onclick="E9()">Water</div><div class="y" onclick="EA()">Electricity</div><div class="y" onclick="EB()">Comunications</div><div class="y" onclick="EC()">C</div><div class="y" onclick="ED()">C++</div><div class="y" onclick="EE()">VB</div><div class="y" onclick="EF()">JS</div><div class="y" onclick="EG()">CSS</div><div class="y" onclick="EH()">HTM</div><div class="y" onclick="EI()">HTA</div><div class="y" onclick="EJ()">EXE</div><div class="y" onclick="EK()">INI</div><div class="y" onclick="EL()">BAT</div><div class="y" onclick="EM()">NET</div><div class="y" onclick="EN()">NB</div><div class="y" onclick="EO()">MAX</div><div class="y" onclick="EP()">CAD</div><div class="y" onclick="EQ()">Eye</div><div class="y" onclick="ER()">Kat</div><div class="y" onclick="ES()">Lab</div><BR/><BR/><BR/><BR/><BR/><BR/><BR/></div>
 <!-mail->         <div class="j" id="G8"><button onclick="G()"></button> </div>
 <!-news->         <div class="j" id="G9"> </div>
 <!-sports->       <div class="j" id="GA"> </div>
 <!-finance->      <div class="j" id="GB"> </div>
 <!-celebrity->    <div class="j" id="GC"> </div>
 <!-l & s->        <div class="j" id="GD"> </div>
 <!-movies->       <div class="j" id="GE"> </div>
 <!-weather->      <div class="j" id="GF"> </div>
 <!-answers->      <div class="j" id="GG"> </div>
 <!-flickr->       <div class="j" id="GH"> </div>
 <!-mobile->       <div class="j" id="GI"> </div>
 <!-more->         <div class="j" id="GJ"> </div>
 <!-he->           <div class="j" id="GK"> </div>
 <!-she->          <div class="j" id="GL"> </div>
 <!-door->         <div class="j" id="GM"> </div>
 <!-win->          <div class="j" id="GN"> </div>
 <!-kit->          <div class="j" id="GO"> </div>
 <!-bat->          <div class="j" id="GP"> </div>
 <!-room 1->       <div class="j" id="GQ"> </div>
 <!-room 2->       <div class="j" id="GR"> </div>
 <!-room 3->       <div class="j" id="GS"> </div>
 <!-room 4->       <div class="j" id="GT"> </div>
 <!-gas->          <div class="j" id="GU"> </div>
 <!-wat->          <div class="j" id="GV"> </div>
 <!-ele->          <div class="j" id="GW"> </div>
 <!-com->          <div class="j" id="GX"> </div>
 <!-c->            <div class="j" id="GY"> </div>
 <!-c++->          <div class="j" id="GZ"> </div>
 <!-vb->           <div class="j" id="H0"> </div>
 <!-js->           <div class="j" id="H1"> </div>
 <!-css->          <div class="j" id="H2"> </div>
 <!-htm->          <div class="j" id="H3"> </div>
 <!-hta->          <div class="j" id="H4"> </div>
 <!-exe->          <div class="j" id="H5"> </div>
 <!-ini->          <div class="j" id="H6"> </div>
 <!-bat->          <div class="j" id="H7"> </div>
 <!-net->          <div class="j" id="H8"> </div>
 <!-nb->           <div class="j" id="H9"> </div>
 <!-max->          <div class="j" id="HA"> </div>
 <!-cad->          <div class="j" id="HB"> </div>
 <!-eye->          <div class="j" id="HC"> </div>
 <!-kat->          <div class="j" id="HD"> </div>
 <!-lab->          <div class="j" id="HE"> </div>
</body>
</html>
1
Add a comment...

Knavë No

Shared publicly  - 
 
 
Mañana, el actor y director, Paco León, estará en una Hangout en directo, a las 9:30 am, en #TcDesayunos de +Territorio creativo, para hablar de su nueva película "Carmina o revienta". El actor ha sido pionero en implantar Internet como una vía más de visualización de su película, como un canal indispensable para su difusión: 
Disfruta de este momento en el perfil de +Territorio creativo:
https://plus.google.com/u/0/118124970869337913834/posts
 ·  Translate
Social Customer Engagement
3
Add a comment...

Knavë No

Shared publicly  - 
 
omg
1
Add a comment...

Knavë No

Shared publicly  - 
 
 
Billy Wilson is hanging out with 8 people right now in a live Hangout On Air! #hangoutsonairGary Munroe, Abigail Markov, LIZZY SPIT, Stephanie Van Pelt, Jim Davis, Jacob Lucas, Steph Bergy and Pearl Lombardo
That Show with Billy Wilson #16
Billy Wilson and 8 others participated
1
Add a comment...
People
In his circles
4,255 people
Work
Occupation
Welder, IEEE Devices Manager / Programmer, Industrial & Indoor Design & Construction
Basic Information
Gender
Male
Story
Introduction
bhāṣātuhanseni
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
Valencia
Previously
Asfi
Links
Other profiles
Knavë No's +1's are the things they like, agree with, or want to recommend.
The Venus Project
plus.google.com

Designed by Jacque Fresco advocating a Resource Based Economy.

Coca-Cola
plus.google.com

Open Happiness. The official Coca-Cola page on Google+.

Uniqlo
plus.google.com

Change clothes, change conventional wisdom, change the world

Google España
plus.google.com

Conoce, disfruta, comparte

Android
plus.google.com

A place for Android fans everywhere to meet, share and get the latest on all things Android.

Al Jazeera English
plus.google.com

Al Jazeera English, the 24-hour English-language news and current affairs channel, is headquartered in Doha, Qatar.

Gardens of Time
plus.google.com

Find objects lost in time!

Khan Academy
plus.google.com

A free world-class education for anyone anywhere

Cool Electric Cars
plus.google.com

Latest Buzz About Electric Cars .. And Environmental, Safety, Investing In Electric Cars.

Google Plus Nick
gplus.to

Make short url for google+ profile.

CSC
plus.google.com

We do amazing things!

Google Zeitgeist 2011
www.googlezeitgeist.com

Japan Earthquake. #1 Fastest Rising Search. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit, odio ac mollis commodo,

+1 button errors - Google+ Help
www.google.com

If the +1 button is unavailable or has stopped working, you'll see this image: A +1 button error can occur for a variety of reasons, inclu

Don’t Feed The Google Plus Trolls | Media Tapper
mediatapper.com

As with any site that involves opening up the doors to the public and general commenting there will be those people who, for whatever reason

Solve for X
plus.google.com

A forum to encourage and amplify technology-based moonshot thinking and teamwork.

Discover influential people on Google+
www.plusclout.com

Discover influential people with clout on Google+ to add to your circles.

The Verge
plus.google.com

The Verge's mission is to offer breaking news coverage and in-depth reporting, product information, and community content via a unified, modern platform.

Google Green
www.google.com

Why all the questions? Whether we&#39;re deciding how best to invest hundreds of millions of dollars in renewable energy or wondering how te