Example #1
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // http://docs.webplatform.org/wiki/dom/shadowdom/ShadowRoot

            // https://www.w3.org/Bugs/Public/show_bug.cgi?id=24867

            //new ShadowLayout().AttachTo(Native.document.documentElement.shadow);
            var s = new ShadowLayout().AttachTo(Native.shadow);

            // http://w3c.github.io/webcomponents/spec/shadow/#dfn-content-element-select
            // http://caniuse.com/#feat=shadowdom
            new IHTMLButton {
                "select all buttons"
            }.AttachToDocument().onclick +=
                e =>
            {
                // this aint working. why?
                // spec says it should. but nothing shows up. 20140812
                s.SelectedContent.select = ".what";
            };

            //new IHTMLButton { "select this button" }.AttachToDocument().onclick +=
            //    e =>
            //    {
            //        s.SelectedContent.select = "button";
            //    };
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // http://docs.webplatform.org/wiki/dom/shadowdom/ShadowRoot

            // https://www.w3.org/Bugs/Public/show_bug.cgi?id=24867

            //new ShadowLayout().AttachTo(Native.document.documentElement.shadow);
            var s = new ShadowLayout().AttachTo(Native.shadow);

            // http://w3c.github.io/webcomponents/spec/shadow/#dfn-content-element-select
            // http://caniuse.com/#feat=shadowdom
            new IHTMLButton { "select all buttons" }.AttachToDocument().onclick +=
                e =>
                {
                    // this aint working. why?
                    // spec says it should. but nothing shows up. 20140812
                    s.SelectedContent.select = ".what";

                };

            //new IHTMLButton { "select this button" }.AttachToDocument().onclick +=
            //    e =>
            //    {
            //        s.SelectedContent.select = "button";
            //    };
        }
Example #3
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // used by
            // X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionShadowExperiment\ChromeExtensionShadowExperiment\Application.cs



            // X:\jsc.svn\examples\javascript\Test\TestShadowBody\TestShadowBody\Application.cs
            //var s = new ShadowLayout().AttachTo(Native.document.documentElement.shadow);
            var s = new ShadowLayout().AttachTo(Native.shadow);

            // forms shall use position fixed
            // to prevent overflow!?

            __Form.InternalHTMLTargetAttachToDocument =
                (that, yield) =>
            {
                if (that.HTMLTarget.parentNode == null)
                {
                    //that.HTMLTarget.AttachTo(Native.document.documentElement.shadow);
                    that.HTMLTarget.AttachTo(Native.shadow);
                }

                // animate!
                yield(true);
            };


            new FooUserControl().AttachControlTo(
                s.TopSideBar
                );
        }
Example #4
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            var s = new ShadowLayout().AttachTo(Native.shadow);

            s.ShadowHeader = this.ShadowHeader;

            new { }.With(
                async delegate
            {
                await Task.Delay(500);

                await this.WebMethod2();
            }
                );
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            var s = new ShadowLayout().AttachTo(Native.shadow);

            s.ShadowHeader = this.ShadowHeader;

            new { }.With(
                async delegate
                {
                    await Task.Delay(500);

                    await this.WebMethod2();
                }
            );
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // used by
            // X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionShadowExperiment\ChromeExtensionShadowExperiment\Application.cs



            // X:\jsc.svn\examples\javascript\Test\TestShadowBody\TestShadowBody\Application.cs
            //var s = new ShadowLayout().AttachTo(Native.document.documentElement.shadow);
            var s = new ShadowLayout().AttachTo(Native.shadow);

            // forms shall use position fixed
            // to prevent overflow!?

            __Form.InternalHTMLTargetAttachToDocument =
                (that, yield) =>
                {
                    if (that.HTMLTarget.parentNode == null)
                    {
                        //that.HTMLTarget.AttachTo(Native.document.documentElement.shadow);
                        that.HTMLTarget.AttachTo(Native.shadow);
                    }

                    // animate!
                    yield(true);
                };


            new FooUserControl().AttachControlTo(
                s.TopSideBar
            );






        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // this will override everything being shown
            //page.body.shadow.appendChild("the shadow");


            var s = new ShadowLayout().AttachTo(Native.document.documentElement.shadow);

            // override the whole document.
            //Native.document.documentElement.shadow.appendChild("the shadow");



            //Console.WriteLine(new { Native.document.documentElement.parentNode });
            // :40ms {{ parentNode = [object HTMLDocument] }}
            //Native.document.documentElement.parentNode.shadow.appendChild("the shadow");

                // cool!
            new IHTMLIFrame { src = "http://example.com" }.AttachTo(
                s.TopSideBar
            );

        }
Example #8
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // this will override everything being shown
            //page.body.shadow.appendChild("the shadow");


            var s = new ShadowLayout().AttachTo(Native.document.documentElement.shadow);

            // override the whole document.
            //Native.document.documentElement.shadow.appendChild("the shadow");



            //Console.WriteLine(new { Native.document.documentElement.parentNode });
            // :40ms {{ parentNode = [object HTMLDocument] }}
            //Native.document.documentElement.parentNode.shadow.appendChild("the shadow");

            // cool!
            new IHTMLIFrame {
                src = "http://example.com"
            }.AttachTo(
                s.TopSideBar
                );
        }
Example #9
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // if we are running in a SYSTEM account
            // the chrome no-sandbox only allows software renderer
            // where we get 1 frame per sec.


            // on older systems we may not get GL_OES_standard_derivatives
            // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
            //          ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "",
            // or that system is just old as hell


            // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app

            //http://thematicmapping.org/playground/webgl/earth/
            // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222


            // Earth params
            var radius = 0.5;

            //var segments = 32;
            var segments = 128;
            var rotation = 6;

            var scene = new THREE.Scene();

            locations = new ArrayList();

            var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000);

            camera.position.z = 1.5;

            var renderer = new THREE.WebGLRenderer(
                new
            {
                preserveDrawingBuffer = true
            }
                );

            renderer.setSize();

            scene.add(new THREE.AmbientLight(0x333333));

            var light = new THREE.DirectionalLight(0xffffff, 1);

            light.position.set(5, 3, 5);
            scene.add(light);

            parent = new THREE.Object3D();
            scene.add(parent);


            #region sphere
            var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(radius, segments, segments),
                new THREE.MeshPhongMaterial(
                    new
            {
                map = new THREE.Texture().With(
                    async s =>
                {
                    //0:75ms event: _2_no_clouds_4k_low view-source:36543
                    //Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1
                    //Application Cache Progress event (2 of 2)  192.168.1.72/:1
                    //Application Cache Cached event 192.168.1.72/:1
                    //1:1018ms event: _2_no_clouds_4k_low done view-source:36543
                    //1:1019ms event: _2_no_clouds_4k view-source:36543
                    //event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995
                    //1:16445ms event: _2_no_clouds_4k done

                    // ~ tilde to open css editor?

                    Console.WriteLine("event: _2_no_clouds_4k_low");
                    s.image       = await new _2_no_clouds_4k_low();
                    s.needsUpdate = true;
                    Console.WriteLine("event: _2_no_clouds_4k_low done");

                    await 20000;

                    Console.WriteLine("event: _2_no_clouds_4k");
                    s.image       = await new _2_no_clouds_4k();
                    s.needsUpdate = true;
                    Console.WriteLine("event: _2_no_clouds_4k done");
                }
                    ),

                bumpMap = THREE.ImageUtils.loadTexture(
                    new elev_bump_4k().src
                    //new elev_bump_4k_low().src
                    ),


                // applies onyl to shaders to create the shadow
                bumpScale   = 0.001,
                specularMap = new THREE.Texture().With(
                    async s =>
                {
                    Console.WriteLine("event: water_4k_low");
                    s.image       = await new water_4k_low();
                    s.needsUpdate = true;
                    Console.WriteLine("event: water_4k_low done");

                    await 20000;

                    Console.WriteLine("event: water_4k");
                    s.image       = await new water_4k();
                    s.needsUpdate = true;
                    Console.WriteLine("event: water_4k done");
                }
                    ),


                //specular =    new THREE.Color("grey")
                specular = new THREE.Color(0xa0a0a0)
            })
                );
            #endregion

            // http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane


            //sphere.rotation.y = rotation;
            parent.rotation.y = rotation;
            //sphere.position.x = 10;
            //sphere.position.y = 10;
            //sphere.position.z = 10;
            //sphere.position.normalize();
            //sphere.position.multiplyScalar(200);

            parent.add(sphere);
            //scene.add(sphere);


            #region clouds
            var clouds = new THREE.Mesh(
                new THREE.SphereGeometry(
                    //radius + 0.003,
                    radius + 0.006,
                    segments, segments),
                new THREE.MeshPhongMaterial(
                    new
            {
                //map = THREE.ImageUtils.loadTexture(
                //    //new fair_clouds_4k().src
                //    new fair_clouds_4k_low().src
                //    ),


                map = new THREE.Texture().With(
                    async s =>
                {
                    Console.WriteLine("event: fair_clouds_4k_low");
                    s.image       = await new fair_clouds_4k_low();
                    s.needsUpdate = true;
                    Console.WriteLine("event: fair_clouds_4k_low done");

                    await 20000;

                    Console.WriteLine("event: fair_clouds_4k");
                    s.image       = await new fair_clouds_4k();
                    s.needsUpdate = true;
                    Console.WriteLine("event: fair_clouds_4k done");
                }
                    ),

                transparent = true
            })
                );
            //clouds.rotation.y = rotation;
            parent.add(clouds);
            //scene.add(clouds);
            #endregion


            var citiesData = new XElement("cities");



            {
                var cityH = new XElement("city");
                cityH.Add(new XElement("name", "Tallinn"));
                cityH.Add(new XElement("longitude", "24.7281"));
                cityH.Add(new XElement("latitude", "59.4339"));
                citiesData.Add(cityH);
            }
            {
                var cityH = new XElement("city");
                cityH.Add(new XElement("name", "London"));
                cityH.Add(new XElement("longitude", "-0.116667"));
                cityH.Add(new XElement("latitude", "51.5"));
                citiesData.Add(cityH);
            }


            var shadowL = new ShadowLayout().AttachTo(Native.shadow);
            page.dataHolder = citiesData;

            #region Location on sphere

            Action AddCities = async delegate
            {
                //var table = await this.GetAllCities();
                //Console.WriteLine(table.Rows.Count.ToString());



                //for (var r = 0; r < table.Rows.Count; r++)
                //{
                //    var latitude = (double)table.Rows[r]["Latitude"];
                //    var longtitude = (double)table.Rows[r]["Longtitude"];
                //    addLocation(latitude, longtitude, radius, 0.001, parent, 6);
                //    Console.WriteLine(latitude.ToString());
                //    await 100;
                //}
                var elemList = citiesData.Elements();
                Console.WriteLine(elemList.Count().ToString());

                foreach (var i in elemList)
                {
                    //Console.WriteLine(i.ToString());

                    //foreach (var t in i.Elements())
                    //{
                    //    Console.WriteLine(t.ToString());
                    //}

                    //var l = i.Element("name");
                    //if (l == null)
                    //{
                    //    Console.WriteLine("F**k");
                    //}
                    //else
                    //{
                    //    Console.WriteLine(l.Value);
                    //}
                    //Console.WriteLine(i.Element("longitude"));
                    //Console.WriteLine(i.Element("latitude"));

                    var lat = i.Element("latitude");
                    if (lat != null)
                    {
                        Console.WriteLine("Latitude not null");
                        var latitude = Convert.ToDouble(lat.Value);
                        Console.WriteLine(latitude.ToString());

                        var longit = i.Element("longitude");
                        if (longit != null)
                        {
                            Console.WriteLine("Longitude not null");

                            var longtitude = Convert.ToDouble(longit.Value);
                            addLocation(latitude, longtitude, radius, 0.001, parent, 6);
                            Console.WriteLine(longtitude.ToString());
                        }
                    }
                }
            };

            citiesData.Changed += (send, arg) =>
            {
                //if(arg.ObjectChange == XObjectChange.Value)
                //{
                //Console.WriteLine(citiesData);

                //Console.WriteLine("Sender name "+((XAttribute)send).Name);
                //Console.WriteLine("Sender val " + ((XAttribute)send).Value);
                removeLocations();
                AddCities();
                //}
            };


            AddCities();


            #endregion

            var stars = new THREE.Mesh(
                new THREE.SphereGeometry(90, 64, 64),
                new THREE.MeshBasicMaterial(
                    new
            {
                map  = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
                side = THREE.BackSide
            })
                );
            scene.add(stars);

            this.canvas = (IHTMLCanvas)renderer.domElement;

            //renderer.domElement.AttachToDocument();
            this.canvas.AttachTo(shadowL.webGlCanvas);
            this.canvas.style.SetLocation(0, 0);

            // jsc, what pointers do we have in store?
            this.canvas.css.style.cursor        = IStyle.CursorEnum.pointer;
            this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;


            var
                old = new
            {
                parent = new
                {
                    parent.rotation.x,
                    parent.rotation.y
                },
                //sphere = new
                //{
                //    //sphere.rotation.x,
                //    //sphere.rotation.y

                //},
                //clouds = new
                //{
                //    //clouds.rotation.x,
                //    //clouds.rotation.y,
                //},


                CursorX = 0,
                CursorY = 0
            };

            #region onmousedown
            this.canvas.onmousedown +=
                e =>
            {
                var pointerLock = this.canvas == Native.document.pointerLockElement;

                if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
                {
                    this.canvas.requestFullscreen();
                    this.canvas.requestPointerLock();
                }
                else
                {
                    // movementX no longer works
                    old = new
                    {
                        parent = new
                        {
                            parent.rotation.x,
                            parent.rotation.y
                        },
                        //sphere = new
                        //{
                        //    sphere.rotation.x,
                        //    sphere.rotation.y

                        //},
                        //clouds = new
                        //{
                        //    clouds.rotation.x,
                        //    clouds.rotation.y,
                        //},


                        e.CursorX,
                        e.CursorY
                    };

                    if (pointerLock)
                    {
                        // skip
                    }
                    else
                    {
                        e.CaptureMouse();
                    }
                }
            };
            #endregion



            var z = camera.position.z;

            var sfx = new TestWebGLEarthShadowDomXML.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1
            {
                autobuffer = true,

                // this aint working
                //loop = true
            };

            sfx.play();

            //sfx.AttachToHead();


            // http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/

            this.canvas.onmousewheel +=
                e =>
            {
                //camera.position.z = 1.5;

                // min max. shall adjust speed also!
                // max 4.0
                // min 0.6
                z -= 0.1 * e.WheelDirection;

                z = z.Max(0.6).Min(4.5);

                //Native.document.title = new { camera.position.z }.ToString();
            };

            // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
            #region onmousemove
            this.canvas.onmousemove +=
                e =>
            {
                var pointerLock = this.canvas == Native.document.pointerLockElement;


                //Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });

                if (e.MouseButton == IEvent.MouseButtonEnum.Left)
                {
                    if (pointerLock)
                    {
                        parent.rotation.x += 0.01 * e.movementY;
                        parent.rotation.y += 0.01 * e.movementX;

                        //sphere.rotation.x += 0.01 * e.movementY;
                        //sphere.rotation.y += 0.01 * e.movementX;

                        //clouds.rotation.x += 0.01 * e.movementY;
                        //clouds.rotation.y += 0.01 * e.movementX;
                    }
                    else
                    {
                        parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY);
                        parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX);

                        //sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY);
                        //sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX);

                        //clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY);
                        //clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX);
                    }


                    //    Native.document.title = new { e.movementX, e.movementY }.ToString();
                }
            };
            #endregion


            // could we
            Native.window.onframe +=
                e =>
            {
                if (this.canvas.parentNode == null)
                {
                    return;
                }

                camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
                camera.updateProjectionMatrix();

                camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;


                // the larger the vew the slower the rotation shall be
                var speed = 0.0001 * e.delay.ElapsedMilliseconds +
                            0.007
                            * 96.0 / canvas.clientHeight
                            * 1.0 / camera.position.z;

                //Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
                //Native.document.title = new { speed }.ToString();


                //controls.update();
                //sphere.rotation.y += speed;
                //clouds.rotation.y += speed;

                parent.rotation.y += speed;


                renderer.render(scene, camera);
            };

            Native.window.onresize +=
                delegate
            {
                //if (canvas.parentNode == Native.document.body)

                // are we embedded?
                if (page != null)
                {
                    renderer.setSize();
                }
            };


            //new IStyle(this.canvas.css.before)
            //{
            //    content = "'do a middle click to maximize the earth dashboard'",

            //    left = "1em",
            //    bottom = "1em",

            //    color = "white",

            //    position = IStyle.PositionEnum.absolute
            //};
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // if we are running in a SYSTEM account
            // the chrome no-sandbox only allows software renderer
            // where we get 1 frame per sec.


            // on older systems we may not get GL_OES_standard_derivatives 
            // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app
            // 			( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "",
            // or that system is just old as hell


            // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app

            //http://thematicmapping.org/playground/webgl/earth/
            // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222


            // Earth params
            var radius = 0.5;

            //var segments = 32;
            var segments = 128;
            var rotation = 6;

            var scene = new THREE.Scene();

            locations = new ArrayList();

            var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000);
            camera.position.z = 1.5;

            var renderer = new THREE.WebGLRenderer(
                   new
                   {
                       preserveDrawingBuffer = true
                   }
                );
            renderer.setSize();

            scene.add(new THREE.AmbientLight(0x333333));

            var light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(5, 3, 5);
            scene.add(light);

            parent = new THREE.Object3D();
            scene.add(parent);


            #region sphere
            var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(radius, segments, segments),
                new THREE.MeshPhongMaterial(
                        new
                        {
                            map = new THREE.Texture().With(
                                async s =>
                                {
                                    //0:75ms event: _2_no_clouds_4k_low view-source:36543
                                    //Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1
                                    //Application Cache Progress event (2 of 2)  192.168.1.72/:1
                                    //Application Cache Cached event 192.168.1.72/:1
                                    //1:1018ms event: _2_no_clouds_4k_low done view-source:36543
                                    //1:1019ms event: _2_no_clouds_4k view-source:36543
                                    //event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995
                                    //1:16445ms event: _2_no_clouds_4k done 

                                    // ~ tilde to open css editor?

                                    Console.WriteLine("event: _2_no_clouds_4k_low");
                                    s.image = await new _2_no_clouds_4k_low();
                                    s.needsUpdate = true;
                                    Console.WriteLine("event: _2_no_clouds_4k_low done");

                                    await 20000;

                                    Console.WriteLine("event: _2_no_clouds_4k");
                                    s.image = await new _2_no_clouds_4k();
                                    s.needsUpdate = true;
                                    Console.WriteLine("event: _2_no_clouds_4k done");
                                }
                            ),

                            bumpMap = THREE.ImageUtils.loadTexture(
                                new elev_bump_4k().src
                                //new elev_bump_4k_low().src
                                ),


                            // applies onyl to shaders to create the shadow
                            bumpScale = 0.001,
                            specularMap = new THREE.Texture().With(
                                async s =>
                                {
                                    Console.WriteLine("event: water_4k_low");
                                    s.image = await new water_4k_low();
                                    s.needsUpdate = true;
                                    Console.WriteLine("event: water_4k_low done");

                                    await 20000;

                                    Console.WriteLine("event: water_4k");
                                    s.image = await new water_4k();
                                    s.needsUpdate = true;
                                    Console.WriteLine("event: water_4k done");
                                }
                            ),


                            //specular =    new THREE.Color("grey")								
                            specular = new THREE.Color(0xa0a0a0)
                        })
            );
            #endregion

            // http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane


            //sphere.rotation.y = rotation;
            parent.rotation.y = rotation;
            //sphere.position.x = 10;
            //sphere.position.y = 10;
            //sphere.position.z = 10;
            //sphere.position.normalize();
            //sphere.position.multiplyScalar(200); 

            parent.add(sphere);
            //scene.add(sphere);


            #region clouds
            var clouds = new THREE.Mesh(
                    new THREE.SphereGeometry(
                //radius + 0.003,
                        radius + 0.006,
                        segments, segments),
                    new THREE.MeshPhongMaterial(
                        new
                        {
                            //map = THREE.ImageUtils.loadTexture(
                            //    //new fair_clouds_4k().src
                            //    new fair_clouds_4k_low().src
                            //    ),


                            map = new THREE.Texture().With(
                                async s =>
                                {
                                    Console.WriteLine("event: fair_clouds_4k_low");
                                    s.image = await new fair_clouds_4k_low();
                                    s.needsUpdate = true;
                                    Console.WriteLine("event: fair_clouds_4k_low done");

                                    await 20000;

                                    Console.WriteLine("event: fair_clouds_4k");
                                    s.image = await new fair_clouds_4k();
                                    s.needsUpdate = true;
                                    Console.WriteLine("event: fair_clouds_4k done");
                                }
                            ),

                            transparent = true
                        })
                );
            //clouds.rotation.y = rotation;
            parent.add(clouds);
            //scene.add(clouds);
            #endregion


            var citiesData = new XElement("cities");

            

            {
                var cityH = new XElement("city");
                cityH.Add(new XElement("name", "Tallinn"));
                cityH.Add(new XElement("longitude", "24.7281"));
                cityH.Add(new XElement("latitude", "59.4339"));
                citiesData.Add(cityH);
            }
            {
                var cityH = new XElement("city");
                cityH.Add(new XElement("name", "London"));
                cityH.Add(new XElement("longitude", "-0.116667"));
                cityH.Add(new XElement("latitude", "51.5"));
                citiesData.Add(cityH);

            }


            var shadowL = new ShadowLayout().AttachTo(Native.shadow);
            page.dataHolder = citiesData;

            #region Location on sphere

            Action AddCities = async delegate
            {
                //var table = await this.GetAllCities();
                //Console.WriteLine(table.Rows.Count.ToString());



                //for (var r = 0; r < table.Rows.Count; r++)
                //{
                //    var latitude = (double)table.Rows[r]["Latitude"];
                //    var longtitude = (double)table.Rows[r]["Longtitude"];
                //    addLocation(latitude, longtitude, radius, 0.001, parent, 6);
                //    Console.WriteLine(latitude.ToString());
                //    await 100;
                //}
                var elemList = citiesData.Elements();
                Console.WriteLine(elemList.Count().ToString());
               
                foreach (var i in elemList)
                {
                    //Console.WriteLine(i.ToString());

                    //foreach (var t in i.Elements())
                    //{
                    //    Console.WriteLine(t.ToString());
                    //}

                    //var l = i.Element("name");
                    //if (l == null)
                    //{
                    //    Console.WriteLine("F**k");
                    //}
                    //else
                    //{
                    //    Console.WriteLine(l.Value);
                    //}
                    //Console.WriteLine(i.Element("longitude"));
                    //Console.WriteLine(i.Element("latitude"));

                    var lat = i.Element("latitude");
                    if (lat != null)
                    {
                        Console.WriteLine("Latitude not null");
                        var latitude = Convert.ToDouble(lat.Value);
                        Console.WriteLine(latitude.ToString());

                        var longit = i.Element("longitude");
                        if(longit != null)
                        {
                            Console.WriteLine("Longitude not null");

                            var longtitude = Convert.ToDouble(longit.Value);
                            addLocation(latitude, longtitude, radius, 0.001, parent, 6);
                            Console.WriteLine(longtitude.ToString());

                        }
                    }
                }
            };

            citiesData.Changed += (send, arg) =>
            {
                //if(arg.ObjectChange == XObjectChange.Value)
                //{
                    //Console.WriteLine(citiesData);

                    //Console.WriteLine("Sender name "+((XAttribute)send).Name);
                    //Console.WriteLine("Sender val " + ((XAttribute)send).Value);
                    removeLocations();
                    AddCities();
                //}
            };

            
            AddCities();


            #endregion

            var stars = new THREE.Mesh(
                    new THREE.SphereGeometry(90, 64, 64),
                    new THREE.MeshBasicMaterial(
                    new
                    {
                        map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
                        side = THREE.BackSide
                    })
                );
            scene.add(stars);

            this.canvas = (IHTMLCanvas)renderer.domElement;

            //renderer.domElement.AttachToDocument();
            this.canvas.AttachTo(shadowL.webGlCanvas);
            this.canvas.style.SetLocation(0, 0);

            // jsc, what pointers do we have in store?
            this.canvas.css.style.cursor = IStyle.CursorEnum.pointer;
            this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;


            var
                old = new
                {
                    parent = new
                    {
                        parent.rotation.x,
                        parent.rotation.y
                    },
                    //sphere = new
                    //{
                    //    //sphere.rotation.x,
                    //    //sphere.rotation.y

                    //},
                    //clouds = new
                    //{
                    //    //clouds.rotation.x,
                    //    //clouds.rotation.y,
                    //},


                    CursorX = 0,
                    CursorY = 0
                };

            #region onmousedown
            this.canvas.onmousedown +=
                e =>
                {
                    var pointerLock = this.canvas == Native.document.pointerLockElement;

                    if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
                    {
                        this.canvas.requestFullscreen();
                        this.canvas.requestPointerLock();
                    }
                    else
                    {
                        // movementX no longer works
                        old = new
                        {
                            parent = new
                            {
                                parent.rotation.x,
                                parent.rotation.y
                            },
                            //sphere = new
                            //{
                            //    sphere.rotation.x,
                            //    sphere.rotation.y

                            //},
                            //clouds = new
                            //{
                            //    clouds.rotation.x,
                            //    clouds.rotation.y,
                            //},


                            e.CursorX,
                            e.CursorY
                        };

                        if (pointerLock)
                        {
                            // skip
                        }
                        else
                        {
                            e.CaptureMouse();
                        }
                    }

                };
            #endregion





            var z = camera.position.z;

            var sfx = new TestWebGLEarthShadowDomXML.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1
            {
                autobuffer = true,

                // this aint working
                //loop = true 

            };

            sfx.play();

            //sfx.AttachToHead();


            // http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/

            this.canvas.onmousewheel +=
                e =>
                {
                    //camera.position.z = 1.5;

                    // min max. shall adjust speed also!
                    // max 4.0
                    // min 0.6
                    z -= 0.1 * e.WheelDirection;

                    z = z.Max(0.6).Min(4.5);

                    //Native.document.title = new { camera.position.z }.ToString();

                };

            // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
            #region onmousemove
            this.canvas.onmousemove +=
                e =>
                {
                    var pointerLock = this.canvas == Native.document.pointerLockElement;


                    //Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });

                    if (e.MouseButton == IEvent.MouseButtonEnum.Left)
                    {
                        if (pointerLock)
                        {
                            parent.rotation.x += 0.01 * e.movementY;
                            parent.rotation.y += 0.01 * e.movementX;

                            //sphere.rotation.x += 0.01 * e.movementY;
                            //sphere.rotation.y += 0.01 * e.movementX;

                            //clouds.rotation.x += 0.01 * e.movementY;
                            //clouds.rotation.y += 0.01 * e.movementX;
                        }
                        else
                        {
                            parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY);
                            parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX);

                            //sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY);
                            //sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX);

                            //clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY);
                            //clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX);
                        }


                        //    Native.document.title = new { e.movementX, e.movementY }.ToString();

                    }

                };
            #endregion


            // could we 
            Native.window.onframe +=
                e =>
                {
                    if (this.canvas.parentNode == null)
                        return;

                    camera.aspect = canvas.clientWidth / (double)canvas.clientHeight;
                    camera.updateProjectionMatrix();

                    camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200;


                    // the larger the vew the slower the rotation shall be
                    var speed = 0.0001 * e.delay.ElapsedMilliseconds +
                        0.007
                        * 96.0 / canvas.clientHeight
                        * 1.0 / camera.position.z;

                    //Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString();
                    //Native.document.title = new { speed }.ToString();


                    //controls.update();
                    //sphere.rotation.y += speed;
                    //clouds.rotation.y += speed;

                    parent.rotation.y += speed;


                    renderer.render(scene, camera);
                };

            Native.window.onresize +=
                delegate
                {


                    //if (canvas.parentNode == Native.document.body)

                    // are we embedded?
                    if (page != null)
                        renderer.setSize();
                };


            //new IStyle(this.canvas.css.before)
            //{
            //    content = "'do a middle click to maximize the earth dashboard'",

            //    left = "1em",
            //    bottom = "1em",

            //    color = "white",

            //    position = IStyle.PositionEnum.absolute
            //};
        }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(ChromeExtensionShadowExperiment.HTML.Pages.IApp page)
        {
            // based on
            // X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionWithWorker\ChromeExtensionWithWorker\Application.cs
            // X:\jsc.svn\examples\javascript\Test\TestShadowDocumentWithForms\TestShadowDocumentWithForms\Application.cs

            // lets test shadow on external web apps

            // first lets get this test running in chrome


            dynamic self = Native.self;
            dynamic self_chrome = self.chrome;
            object self_chrome_tabs = self_chrome.tabs;

            if (self_chrome_tabs != null)
            {
                #region Installed

                chrome.runtime.Installed += delegate
                {
                    // our API does not have a Show
                    new chrome.Notification
                    {
                        Message = "Extension Installed!"
                    };
                };
                #endregion


                var IgnoreSecondaryUpdatesFor = new List<TabIdInteger>();




                chrome.tabs.Created +=
                    async (z) =>
                    {
                        var n = new chrome.Notification
                        {
                            Message = "Created! " + new { z.id }
                        };
                    };

                chrome.tabs.Activated +=
                    async (z) =>
                    {
                        var n = new chrome.Notification
                        {
                            Message = "Activated! " + new { z }
                        };

                    };


                #region Updated
                chrome.tabs.Updated +=
            async (i, x, tab) =>
                    {
                        // chrome://newtab/

                        if (tab.url.StartsWith("chrome-devtools://"))
                            return;

                        if (tab.url.StartsWith("chrome://"))
                            return;

                        if (tab.status != "complete")
                            return;


                        if (IgnoreSecondaryUpdatesFor.Contains(tab.id))
                            return;

                        // inject?

                        // what if we sent the uri to our android tab?
                        var n = new chrome.Notification
                        {
                            Message = "Updated! " + new { tab.id, tab.url }
                        };

                        IgnoreSecondaryUpdatesFor.Add(tab.id);



                        await tab.pageAction.async.onclick;

                        var nn = new chrome.Notification
                        {
                            Message = "Clicked " + new { tab.id, tab.url }
                        };

						// X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionHopToTab\ChromeExtensionHopToTab\Application.cs

						// document.currentScript?
						var code = await new WebClient().DownloadStringTaskAsync(
                              new Uri(Worker.ScriptApplicationSource, UriKind.Relative)
                         );

                        // https://developer.chrome.com/extensions/tabs#method-executeScript
                        // https://developer.chrome.com/extensions/tabs#type-InjectDetails
                        // https://developer.chrome.com/extensions/content_scripts#pi

                        // Content scripts execute in a special environment called an isolated world. 
                        // They have access to the DOM of the page they are injected into, but not to any JavaScript variables or 
                        // functions created by the page. It looks to each content script as if there is no other JavaScript executing
                        // on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any 
                        // functions or access any variables defined by content scripts.

                        var result = await tab.id.executeScript(
                            //new { file = url }
                            new { code }
                        );
                    };
                #endregion



                return;

            }

            // run it
            // save view-source
            // subst
            // test in chrome


            // 1999999999

            // X:\jsc.svn\examples\javascript\Test\TestShadowBody\TestShadowBody\Application.cs
            var s = new ShadowLayout().AttachTo(Native.shadow);

            // youtube
            //s.TopSideBar.style.zIndex = 19999999999;


            // forms shall use position fixed
            // to prevent overflow!?

            __Form.InternalHTMLTargetAttachToDocument =
                (that, yield) =>
                {
                    if (that.HTMLTarget.parentNode == null)
                    {
                        that.HTMLTarget.AttachTo(Native.shadow);
                    }

                    // animate!
                    yield(true);
                };

            s.TopSideBar.style.Opacity = 0.7;

            new FooUserControl { }.AttachControlTo(
                s.TopSideBar
            );
        }