public XRectangle()
			{
				var aelement = new IHTMLDiv();



				// WPF: Rectangle, Image or Label
				var acontent = new IHTMLDiv();

				acontent.style.backgroundColor = "#ff0000";

				this.Rotor = new IHTMLDiv();

				//this.Rotor.style.backgroundColor = "#ffd0d0";

				this.Rotor.style.border = "1px solid black";

				//this.Rotor.style.paddingRight = "10px";

				this.Rotor.AttachTo(aelement);

				acontent.AttachTo(this.Rotor);

				aelement.AttachToDocument();

				Element = aelement;
				Content = acontent;
			}
		public UltraApplication(IHTMLElement e)
		{
			var Title = new IHTMLDiv
				{
					innerHTML = @"
<img border='0' src='http://www.w3schools.com/images/compatible_ie.gif' width='31' height='30' alt='Internet Explorer' title='Internet Explorer' />
<img border='0' src='http://www.w3schools.com/images/compatible_firefox.gif' width='31' height='30' alt='Firefox' title='Firefox' />
<img border='0' src='http://www.w3schools.com/images/compatible_opera.gif' width='28' height='30' alt='Opera' title='Opera' />
<img border='0' src='http://www.w3schools.com/images/compatible_chrome.gif' width='31' height='30' alt='Google Chrome' title='Google Chrome' />
<img border='0' src='http://www.w3schools.com/images/compatible_safari.gif' width='28' height='30' alt='Safari' title='Safari' />
"
				};


			var TitleLogo = new IHTMLImage("assets/ScriptCoreLib/jsc.png");
			var TitleText = new IHTMLSpan("UltraApplication");
			TitleText.style.fontFamily = ScriptCoreLib.JavaScript.DOM.IStyle.FontFamilyEnum.Verdana;
			TitleText.style.paddingLeft = "2em";
			TitleText.style.fontSize = "xx-large";
			TitleLogo.style.verticalAlign = "middle";


			Title.appendChild(TitleLogo);
			Title.appendChild(TitleText);

			Title.style.height = "128px";

			Title.AttachToDocument();
			Title.FadeIn(2500, 1000,
				delegate
				{
					1500.AtDelay(ContinueBuildingApplication);
				}
			);
		}
        public NumberGuessingGame()
        {
            Control.AttachToDocument();

            Native.Document.body.style.background = "#6591cd";
            //Native.Document.body.style.background = "#6591cd url(assets/NumberGuessingGame/editorBg.gif) repeat-x";
            Native.Document.body.style.overflow = IStyle.OverflowEnum.hidden;

            Control.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h1,
                "This project demostrates how to make a number guessing game."));

            Control.appendChild("The computer will think of a number. Try finding out which numbers are in it. You will win if you guess the numbers before all buttons are gone.");

            CreateDisposableButton("Show The GuessingGame",
                delegate
                {
                    var div = new IHTMLDiv();

                    div.AttachToDocument();

                    new GuessingGame(div);

                }
            );
        }
        public OrcasAvalonApplicationDocument(IHTMLElement e)
        {
            // wpf here
            var clip = new IHTMLDiv();

            clip.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.relative;
            clip.style.SetSize(TargetCanvas.DefaultWidth, TargetCanvas.DefaultHeight);
            clip.style.overflow = ScriptCoreLib.JavaScript.DOM.IStyle.OverflowEnum.hidden;

            if (e == null)
                clip.AttachToDocument();
            else
                e.insertPreviousSibling(clip);

            AvalonExtensions.AttachToContainer(new TargetCanvas(), clip);
        }
		private void Start1()
		{

			//concept.AttachToDocument();

			var Title = new IHTMLDiv
			{

			};

			new Browsers
			{
			}.Container.AttachTo(Title);

			new HTML.Images.FromBase64.twitter_small().AttachToDocument();
			new HTML.Images.FromAssets.twitter_small().AttachToDocument();




			var TitleLogo = new IHTMLImage("assets/ScriptCoreLib/jsc.png");
			var TitleText = new IHTMLSpan("UltraApplication");
			TitleText.style.fontFamily = ScriptCoreLib.JavaScript.DOM.IStyle.FontFamilyEnum.Verdana;
			TitleText.style.paddingLeft = "2em";
			TitleText.style.fontSize = "xx-large";
			TitleLogo.style.verticalAlign = "middle";


			Title.appendChild(TitleLogo);
			Title.appendChild(TitleText);

			Title.style.height = "128px";

			Title.AttachToDocument();
			Title.FadeIn(2500, 1000,
				delegate
				{
					1500.AtDelay(
						delegate
						{
							ContinueBuildingApplication();
						}
					);
				}
			);
		}
        /// <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(IDefault page)
        {
            IHTMLDiv Control = new IHTMLDiv();


            Control.AttachToDocument();

            Control.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h1, "This page will ask you to confirm in order to unload the page"));

            var check = new IHTMLInput(HTMLInputTypeEnum.checkbox).AttachToDocument();
            var label = new IHTMLLabel("Bypass check", check).AttachToDocument();



            Native.window.onbeforeunload +=
                delegate (IWindow.Confirmation ev)
                {

                    Timer.DoAsync(
                        delegate
                        {
                            Native.document.body.style.backgroundColor = JSColor.Red;


                            new Timer((t) => Native.document.body.style.backgroundColor = JSColor.White, 500, 0);
                        }
                    );

                    if (check.@checked)
                        return;

                    ev.Text = "This is a secure website, do you want to leave?";
                };

            var anchor = new IHTMLAnchor("http://example.com", "example.com");

            anchor.target = "_self";

            Control.appendChild(anchor);


        }
        /// <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(IDefaultPage page)
        {
            var caption_foreground = new IHTMLDiv();

            caption_foreground.style.backgroundColor = JSColor.Red;
            caption_foreground.style.SetLocation(100, 100, 100, 100);
            caption_foreground.AttachToDocument();

            var drag = new ScriptCoreLib.JavaScript.Controls.DragHelper(caption_foreground);

            drag.Position = new Point(100, 100);
            // http://forum.mootools.net/topic.php?id=534
            // disable text selection
            // look at http://forkjavascript.com/

            drag.Enabled = true;

            drag.DragStart +=
                delegate
                {
                    caption_foreground.style.backgroundColor = JSColor.Yellow;
                };
            drag.DragMove +=
                delegate
                {
                    caption_foreground.style.backgroundColor = JSColor.Green;
                    caption_foreground.style.SetLocation(drag.Position.X, drag.Position.Y);
                };
            drag.DragStop +=
            delegate
            {
                caption_foreground.style.backgroundColor = JSColor.Blue;
            };

            @"Hello world".ToDocumentTitle();
            // Send data from JavaScript to the server tier
            service.WebMethod2(
                @"A string from JavaScript.",
                value => value.ToDocumentTitle()
            );
        }
        /// <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(IDefault page)
        {
            @"Hello world".ToDocumentTitle();

            var output = new IHTMLTextArea().AttachToDocument();

            var gexf = new XElement("gexf");

            gexf.Add(
                new XElement("meta",
                    new XElement("creator", "jsc"),
                    new XElement("description", "NASDAQSNA")
                )
            );

            var graph = new XElement("graph",
                new XAttribute("mode", "static"),
                new XAttribute("defaultedgetype", "directed")
            );

            gexf.Add(graph);

            var nodes = new XElement("nodes");

            graph.Add(nodes);

            var edges = new XElement("edges");

            graph.Add(edges);

            output.value = gexf.ToString();
            output.onfocus +=
                delegate
                {
                    output.value = gexf.ToString();
                };
            output.onmouseover +=
             delegate
             {
                 output.value = gexf.ToString();
             };

            var NumericNodeIdLookup = new List<string>();

            Func<string, int> GetNumericNodeId =
                k =>
                {
                    if (!NumericNodeIdLookup.Contains(k))
                        NumericNodeIdLookup.Add(k);


                    return NumericNodeIdLookup.IndexOf(k);
                };

            #region AddRelatedCompanies
            Func<IHTMLDiv, string, Action, Task> AddRelatedCompanies = null;

            AddRelatedCompanies =
                (c, qid, done) =>
                {
                    var nqid = GetNumericNodeId(qid).ToString();
                    var cc = new IHTMLDiv();

                    cc.style.marginLeft = "2em";



                    var service = new ApplicationWebService
                    {
                        qid = qid,
                        yield = (id, CompanyName, Price) =>
                        {
                            var nid = GetNumericNodeId(id).ToString();

                            if (nodes.Elements().Any(k => k.Attribute("id").Name.LocalName == nid))
                            {
                            }
                            else
                            {
                                nodes.Add(
                                    new XElement("node",
                                     new XAttribute("id", nid),
                                     new XAttribute("label", CompanyName)
                                    )
                                );
                            }



                            var btn = new IHTMLButton
                            {
                                innerText = id + " " + CompanyName + " " + Price
                            };

                            btn.style.display = IStyle.DisplayEnum.block;

                            if (qid == id)
                            {
                                btn.disabled = true;

                                if (c == null)
                                {
                                    btn.AttachToDocument();
                                    cc.AttachToDocument();
                                }
                                else
                                {
                                    //btn.AttachTo(c);
                                    cc.AttachTo(c);
                                }

                                if (done != null)
                                    done();
                            }
                            else
                            {
                                edges.Add(
                                    new XElement("edge",
                                     new XAttribute("source", nqid),
                                     new XAttribute("target", nid)
                                    )
                                );

                                btn.AttachTo(cc);

                                var ccc = new IHTMLDiv();

                                ccc.AttachTo(cc);

                                int cx = 0;

                                ccc.ToggleVisible();



                                btn.WhenClicked(
                                    async delegate
                                    {
                                        if (cx == 0)
                                        {
                                            btn.style.color = JSColor.Red;

                                            await AddRelatedCompanies(ccc, id,
                                                delegate
                                                {
                                                    btn.style.color = JSColor.Blue;

                                                }
                                            );
                                        }


                                        cx++;

                                        ccc.ToggleVisible();

                                    }
                                );

                            }
                        }
                    };



                    return service.GetRelatedCompanies();
                };
            #endregion

            AddRelatedCompanies(null, "NASDAQ:FB", null);
            AddRelatedCompanies(null, "NASDAQ:GOOG", null);
        }
        /// <summary>
        /// Creates a new control
        /// </summary>
        /// <param name="DataElement">The hidden data element</param>
        public SimpleFilmstrip()
        {
            IHTMLDiv Control = new IHTMLDiv();

            Control.style.position = IStyle.PositionEnum.absolute;

            new filmstrip().ToBackground(Control, false);

            //Control.style.background = "url(assets/SimpleFilmstrip/filmstrip.png) no-repeat";
            Control.style.height = "600px";
            Control.style.width = "326px";

            var index = 0;

            var t_icount = default(int);
            var t_interval = default(int);
            var t_iwidth = default(int);
            var t_iheight = default(int);
            var t_feed = default(string);

            var Restart = default(Action);

            var feed = new IHTMLInput(HTMLInputTypeEnum.text,

                new veh_cy().src
                );

            var iwidth = new IHTMLInput(HTMLInputTypeEnum.text, "48");
            var iheight = new IHTMLInput(HTMLInputTypeEnum.text, "48");
            var icount = new IHTMLInput(HTMLInputTypeEnum.text, "32");
            var interval = new IHTMLInput(HTMLInputTypeEnum.text, "50");
            var fps = new IHTMLInput(HTMLInputTypeEnum.text, "24");


            feed.onchange += delegate { Restart(); };
            iwidth.onchange += delegate { Restart(); };
            iheight.onchange += delegate { Restart(); };

            interval.onchange += delegate
            {
                int v = int.Parse(interval.value);

                if (v == 0)
                    return;

                fps.value = "" + (1000 / v);


                Restart();
            };

            icount.onchange += delegate { Restart(); };

            fps.onchange += delegate
            {
                int v = int.Parse(fps.value);

                if (v == 0)
                    return;

                interval.value = "" + (1000 / v);

                Restart();
            };


            var fieldset = new IHTMLElement(IHTMLElement.HTMLElementEnum.fieldset);

            fieldset.style.width = "30em";

            fieldset.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.legend, "Properties"));

            Func<string, IHTMLElement, IHTMLDiv> AsLabel =
                (string text, IHTMLElement control) =>
                {
                    var label = new IHTMLLabel(text, control);

                    control.style.position = IStyle.PositionEnum.absolute;
                    control.style.left = "8em";

                    return new IHTMLDiv(label, control);
                };

            fieldset.appendChild(AsLabel("feed:", feed));
            fieldset.appendChild(AsLabel("width:", iwidth));
            fieldset.appendChild(AsLabel("height:", iheight));
            fieldset.appendChild(AsLabel("count:", icount));
            fieldset.appendChild(AsLabel("interval:", interval));
            fieldset.appendChild(AsLabel("fps:", fps));


            fieldset.style.position = IStyle.PositionEnum.absolute;
            fieldset.style.top = "320px";

            var image = new IHTMLDiv();




            image.style.position = IStyle.PositionEnum.absolute;
            image.style.top = "52px";
            image.style.left = "32px";


            var t = new Timer();

            t.Tick += delegate
            {

                image.style.backgroundPosition = "-" + (index * t_iwidth) + "px 0px";


                index = (index + 1) % t_icount;
            };

            Restart =
                delegate
                {
                    t_icount = int.Parse(icount.value);
                    t_interval = int.Parse(interval.value);
                    t_iwidth = int.Parse(iwidth.value);
                    t_iheight = int.Parse(iheight.value);
                    t_feed = feed.value;

                    image.style.background = "url(" + t_feed + ") no-repeat";

                    image.style.width = t_iwidth + "px";
                    image.style.height = t_iheight + "px";

                    t.StartInterval(t_interval);
                };

            Restart();

            Control.appendChild(image, fieldset);

            Control.AttachToDocument();

        }
        /// <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(IDefault page)
        {
            Func<Action> AtEdit =
                delegate
                {
                    page.Edit.ToggleVisible();

                    var Control = new IHTMLDiv();

                    Control.AttachToDocument();

                    var Content = page.Content.innerHTML;

                    page.Content.Clear();

                    var Editor = new TextEditor(Control);

                    Editor.InnerHTML = Content;

                    Editor.IsFadeEnabled = false;


                    TextEditor.ToolbarButton SaveChanges = null;

                    SaveChanges = Editor.AddButton(
                        new RTA_save(),
                        "Save Changes And Refresh",
                        delegate
                        {
                            Console.WriteLine("Save Changes And Refresh ... ");

                            SaveChanges.Button.disabled = true;
                            this.SaveChanges(
                                Native.Document.location.pathname,
                                XElement.Parse("<div>" + Editor.InnerHTML + "</div>"),
                                delegate
                                {

                                    // refresh
                                    // does not work for hash tags
                                    //Native.Document.location = Native.Document.location;

                                    var href =
                                        Native.Document.location.ToString().TakeUntilIfAny("#")
                                        ;
                                    Console.WriteLine("Save Changes And Refresh ... done! " + new { href });

                                    Native.Document.location.replace(href);
                                }
                            );
                        }
                    );


                    Editor.BottomToolbarContainer.Add(
                        SaveChanges.Control
                    );

                    return delegate
                    {
                        Editor.Control.Orphanize();
                        page.Content.innerHTML = Content;
                        page.Edit.ToggleVisible();
                    };
                };

            page.Edit.onclick +=
                delegate
                {
                    Native.window.history.pushState(
                       data: "",
                       title: "edit",
                       url: "#edit"
                   );

                    var revert = AtEdit();

                    Native.window.window.onpopstate +=
                     e =>
                     {
                         if (revert != null)
                         {
                             revert();
                         }
                         revert = null;
                     };

                };

            if (Native.Document.location.hash == "#edit")
                AtEdit();

            //page.Fullscreen.onclick +=
            //    delegate
            //    {
            //        Native.Document.body.requestFullscreen();
            //    };


        }
        /// <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)
        {
            page.clear.WhenClicked(
                delegate
                {
                    //page.search.Clear();
                    page.search.value = "";
                }
            );

            new IHTMLButton { innerText = "Install" }.AttachToDocument().With(
                   btn =>
                   {
                       // http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-7ffd.html

                       btn.onclick +=
                           delegate
                           {
                               service.Install("assets/AndroidListApplications/foo.apk");
                           };
                   }
               );

            var items = new
            {
                div = default(IHTMLDiv),
                packageName = "",
                name = "",
                Remove = default(IHTMLButton),
                Launch = default(IHTMLButton)
            }.ToEmptyList();

            Action queryIntentActivities =
                async delegate
                {
                    var a = new List<string>();

                    // Send data from JavaScript to the server tier
                    await service.queryIntentActivities(
                        yield: (packageName, name, icon_base64, label) =>
                        {
                            #region yield
                            a.Add(packageName);

                            // already have it
                            if (items.Any(k => k.packageName == packageName))
                                return;

                            var div = new IHTMLDiv();
                            div.style.margin = "1em";

                            if (Native.Document.body.firstChild == null)
                                div.AttachToDocument();
                            else
                                Native.Document.body.insertBefore(div, Native.Document.body.firstChild);

                            new IHTMLImage { src = "data:image/png;base64," + icon_base64 }.AttachTo(div);
                            new IHTMLSpan { innerText = label }.AttachTo(div);

                            var Remove = new IHTMLButton { innerText = "Remove" }.AttachTo(div).WhenClicked(
                                    btn =>
                                    {
                                        // http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-7ffd.html


                                        if (!Native.window.confirm("Remove " + name + "?"))
                                            return;

                                        service.Remove(packageName, name);
                                    }
                               );


                            //div.appendChild(new { icon_base64.Length }.ToString());

                            var Launch = new IHTMLButton { innerText = "Launch" }.AttachTo(div).WhenClicked(
                                    btn =>
                                    {
                                        // http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-7ffd.html

                                        service.Launch(packageName, name);
                                    }
                                );


                            var LaunchFloat = new IHTMLButton { innerText = "Launch Float" }.AttachTo(div).WhenClicked(
                                 btn =>
                                 {

                                     service.Launch(packageName, name,
                                         ExtraKey: "Float",
                                         ExtraValue: "Float"
                                     );
                                 }
                             );

                            // var LaunchWebService = new IHTMLButton { innerText = "Launch WebService" }.AttachTo(div).WhenClicked(
                            //    btn =>
                            //    {

                            //        //service.Launch(packageName, name);
                            //    }
                            //);


                            var item = new
                            {
                                div,
                                packageName,
                                name,
                                Remove,
                                Launch
                            };


                            items.Add(item);

                            //https://play.google.com/store/apps/details?id=com.abstractatech.battery

                            new IHTMLAnchor { href = "https://play.google.com/store/apps/details?id=" + packageName, innerText = name }.AttachTo(div);
                            #endregion

                        }
                    );

                    items.WithEach(
                                   item =>
                                   {
                                       if (a.Contains(item.packageName))
                                           return;

                                       item.div.style.color = "red";

                                       item.Launch.disabled = true;
                                       item.Remove.disabled = true;
                                   }
                               );

                    // remove others!
                };

            queryIntentActivities();

            new Timer(
                delegate
                {
                    items.WithEach(
                        item =>
                        {
                            if (string.IsNullOrEmpty(page.search.value))
                            {
                                item.div.Show();
                            }
                            else
                            {
                                if (item.packageName.Contains(page.search.value))
                                {
                                    item.div.Show();
                                }
                                else
                                {
                                    item.div.Hide();
                                }
                            }

                        }
                    );

                    queryIntentActivities();
                }
            ).StartInterval(2000);


        }
        /// <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 = null)
        {
            { THREE.SkinnedMesh ref0; }
            { THREE.SpeedBlendCharacter ref0; }

//			will skip DefineVersionInfoResource
//102c: 02:01:1e RewriteToAssembly error: System.NotSupportedException: Type 'xchrome.BCLImplementation.System.Net.Sockets.__TcpListener' was not completed.


			#region AtFormCreated
			FormStyler.AtFormCreated =
                 s =>
                 {
                     s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;

                     // this is working?
                     var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
                 };
			#endregion

#if false
			#region ChromeTCPServer
			dynamic self = Native.self;
            dynamic self_chrome = self.chrome;
            object self_chrome_socket = self_chrome.socket;

            if (self_chrome_socket != null)
            {
                chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src;
                chrome.Notification.DefaultTitle = "WebGLYomotsuTPS";


                ChromeTCPServer.TheServerWithStyledForm.Invoke(
                    AppSource.Text,
                    AtFormCreated: FormStyler.AtFormCreated
                );

                return;
            }
			#endregion
#endif

			var fov = 40;

            #region container
            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
            var container = new IHTMLDiv();

            container.AttachToDocument();
            container.style.backgroundColor = "#000000";
            container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
            #endregion

            var player_model_objects = new THREE.Object3D();
            var player_position_x = 0.0f;
            var player_position_y = 0.0f;
            var player_position_z = 0.0f;
            var player_position_direction = 0;
            var player_camera_speed = 300;
            var player_camera_distance = 5;
            var player_camera_x = 0.0f;
            var player_camera_y = 0.0f;
            var player_camera_z = 0.0f;
            var player_motion = default(motion);

            //var width = Native.window.Width;
            //var height = Native.window.Height;

            var clock = new Stopwatch();
            clock.Start();
            //var clock = new THREE.Clock();

            var scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2(0x000000, 0.05f);

            scene.add(player_model_objects);

            var camera = new THREE.PerspectiveCamera(fov,
                Native.window.aspect,
                //width / height,
                1, 1000);

            scene.add(camera);

            #region light

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

            light.position.set(1, 1, 1).normalize();

            light.castShadow = true;




            scene.add(light);




            #endregion

            var md2frames = new md2frames();

            var moveState_moving = false;
            var moveState_front = false;
            var moveState_Backwards = false;
            var moveState_left = false;
            var moveState_right = false;
            var moveState_speed = .1;
            var moveState_angle = 0;

            #region move
            Action move = delegate
            {
                //            if(player.model.motion !== 'run' && player.model.state === 'stand'){

                //    changeMotion('run');

                //}

                //if(player.model.motion !== 'crwalk' && player.model.state === 'crstand'){

                //    changeMotion('crwalk');

                //}

                var speed = moveState_speed;

                //if(player.model.state === 'crstand'){speed *= .5;}

                //if(player.model.state === 'freeze') {speed *= 0;}



                var direction = moveState_angle;

                if (moveState_front && !moveState_left && !moveState_Backwards && !moveState_right) { direction += 0; }
                if (moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 45; }
                if (!moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 90; }
                if (!moveState_front && moveState_left && moveState_Backwards && !moveState_right) { direction += 135; }
                if (!moveState_front && !moveState_left && moveState_Backwards && !moveState_right) { direction += 180; }
                if (!moveState_front && !moveState_left && moveState_Backwards && moveState_right) { direction += 225; }
                if (!moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 270; }
                if (moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 315; }



                player_model_objects.rotation.y = (float)(direction * Math.PI / 180);

                player_position_x -= (float)(Math.Sin(direction * Math.PI / 180) * speed);
                player_position_z -= (float)(Math.Cos(direction * Math.PI / 180) * speed);

            };
            #endregion

            #region camera rotation


            Action rotate = delegate { };

            var pointer_x = 0f;
            var pointer_y = 0f;
            var oldPointerX = 0f;
            var oldPointerY = 0f;

            container.onmousemove +=
                e =>
                {
                    if (Native.document.pointerLockElement == container)
                    {
                        oldPointerX = 0;
                        oldPointerY = 0;
                        pointer_x = e.movementX * 0.01f;
                        pointer_y = -e.movementY * 0.01f;
                        rotate();
                        return;
                    }

                    pointer_x = (e.CursorX / Native.window.Width) * 2 - 1;
                    pointer_y = -(e.CursorY / Native.window.Height) * 2 + 1;
                    rotate();
                };


            container.onmouseup +=
              e =>
              {
                  rotate = delegate { };

                  Native.document.exitPointerLock();
              };

            container.onmousedown +=
                e =>
                {

                    oldPointerX = pointer_x;
                    oldPointerY = pointer_y;

                    rotate = delegate
                    {
                        player_camera_x += (oldPointerX - pointer_x) * player_camera_speed;
                        player_camera_y += (oldPointerY - pointer_y) * player_camera_speed;

                        if (player_camera_y > 150)
                        {
                            player_camera_y = 150;
                        }

                        if (player_camera_y < -150)
                        {
                            player_camera_y = -150;
                        }

                        moveState_angle = Convert.ToInt32(player_camera_x / 2) % 360;

                        oldPointerX = pointer_x;
                        oldPointerY = pointer_y;

                    };

                    Console.WriteLine("requestPointerLock");
                    container.requestPointerLock();
                };

            #endregion

            var renderer = new THREE.WebGLRenderer();
            //renderer.setSize(width, height);
            renderer.setSize();
            renderer.shadowMapEnabled = true;
            renderer.shadowMapSoft = true;
            renderer.domElement.AttachTo(container);




            #region create field


            var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
            var planeMaterial = new THREE.MeshLambertMaterial(
                new
                {
                    map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.bg().src),
                    color = 0xffffff
                }
            );

            planeMaterial.map.repeat.x = 300;
            planeMaterial.map.repeat.y = 300;
            planeMaterial.map.wrapS = THREE.RepeatWrapping;
            planeMaterial.map.wrapT = THREE.RepeatWrapping;
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.castShadow = false;
            plane.receiveShadow = true;


            {

                var parent = new THREE.Object3D();
                parent.add(plane);
                parent.rotation.x = -Math.PI / 2;

                scene.add(parent);
            }

            var random = new Random();
            var meshArray = new List<THREE.Mesh>();
            var geometry = new THREE.CubeGeometry(1, 1, 1);

            for (var i = 0; i < 100; i++)
            {

                var ii = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial(
                    new
                    {
                        color = (Convert.ToInt32(0xffffff * random.NextDouble()))
                    }));
                ii.position.x = i % 2 * 5 - 2.5f;
                ii.position.y = .5f;
                ii.position.z = -1 * i * 4;
                ii.castShadow = true;
                ii.receiveShadow = true;


                meshArray.Add(ii);

                scene.add(ii);

            }
            #endregion







            //load converted md2 data

            var material = new THREE.MeshPhongMaterial(
                new
                {
                    map = THREE.ImageUtils.loadTexture(
                        new HTML.Images.FromAssets._1().src
                    ),
                    ambient = 0x999999,
                    color = 0xffffff,
                    specular = 0xffffff,
                    shininess = 25,
                    morphTargets = true
                }
            );




            var loader = new THREE.JSONLoader();

            loader.load(
                new global::WebGLYomotsuTPS.Design.droid().Content.src,
                            xgeometry =>
                            {
                                var md2meshBody = new THREE.MorphAnimMesh(xgeometry, material);

                                md2meshBody.rotation.y = (float)(-Math.PI / 2);
                                md2meshBody.scale.set(.02, .02, .02);
                                md2meshBody.position.y = .5f;
                                md2meshBody.castShadow = true;
                                md2meshBody.receiveShadow = false;

                                #region player_motion
                                Action<motion> player_changeMotion = motion =>
                                {
                                    Console.WriteLine(
                                        new { motion, md2frames.run, md2frames.stand });

                                    player_motion = motion;

                                    //    player.state = md2frames[motion][3].state;

                                    var animMin = motion.min;
                                    var animMax = motion.max;
                                    var animFps = motion.fps;

                                    md2meshBody.time = 0;
                                    md2meshBody.duration = (int)(
                                        1000 * ((animMax - animMin) / (double)animFps)
                                    );
                                    Native.document.title = new { animMin, animMax }.ToString();

                                    md2meshBody.setFrameRange(animMin, animMax);
                                };

                                player_changeMotion(md2frames.stand);
                                #endregion

                                player_model_objects.add(md2meshBody);

                                #region onkeydown
                                Native.document.onkeydown +=
                                    e =>
                                    {
                                        if (e.KeyCode == 67)
                                        {
                                            if (player_motion == md2frames.stand)
                                                player_changeMotion(md2frames.crstand);
                                            else if (player_motion == md2frames.crstand)
                                                player_changeMotion(md2frames.stand);

                                        }
                                        else if (e.KeyCode == 87)
                                        {
                                            moveState_front = true;
                                            moveState_Backwards = false;
                                        }
                                        else if (e.KeyCode == 83)
                                        {
                                            moveState_front = false;
                                            moveState_Backwards = true;
                                        }
                                        else if (e.KeyCode == 65)
                                        {
                                            moveState_left = true;
                                            moveState_right = false;
                                        }
                                        else if (e.KeyCode == 68)
                                        {
                                            moveState_left = false;
                                            moveState_right = true;
                                        }

                                        var isStand = player_motion == md2frames.stand;
                                        Console.WriteLine(
                                            new { e.KeyCode, moveState_front, moveState_Backwards, isStand }
                                            );

                                        if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
                                            if (player_motion == md2frames.stand)
                                                player_changeMotion(md2frames.run);
                                            else if (player_motion == md2frames.crstand)
                                                player_changeMotion(md2frames.crwalk);
                                    };
                                #endregion

                                #region onkeyup
                                Native.document.onkeyup +=
                                    e =>
                                    {
                                        if (e.KeyCode == 87)
                                        {
                                            moveState_front = false;
                                        }
                                        else if (e.KeyCode == 83)
                                        {
                                            moveState_Backwards = false;
                                        }
                                        else if (e.KeyCode == 65)
                                        {
                                            moveState_left = false;
                                        }
                                        else if (e.KeyCode == 68)
                                        {
                                            moveState_right = false;
                                        }

                                    };
                                #endregion




                                #region loop


                                Native.window.onframe += delegate
                                {
                                    if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
                                        move();
                                    else
                                        if (player_motion == md2frames.run)
                                        player_changeMotion(md2frames.stand);
                                    else if (player_motion == md2frames.crwalk)
                                        player_changeMotion(md2frames.crstand);



                                    player_model_objects.position.x = player_position_x;
                                    player_model_objects.position.y = player_position_y;
                                    player_model_objects.position.z = player_position_z;

                                    // camera rotate x
                                    camera.position.x = (float)(player_position_x + player_camera_distance * Math.Sin((player_camera_x) * Math.PI / 360.0));
                                    camera.position.z = (float)(player_position_z + player_camera_distance * Math.Cos((player_camera_x) * Math.PI / 360.0));

                                    //camera rotate y
                                    //camera.position.x = player.position.x + player.camera.distance * Math.cos( (player.camera.y) * Math.PI / 360 );
                                    camera.position.y = (float)(player_position_y + player_camera_distance * Math.Sin((player_camera_y) * Math.PI / 360.0));
                                    //camera.position.z = player.position.z + player.camera.distance * Math.cos( (player.camera.y) * Math.PI / 360 );

                                    camera.position.y += 1;
                                    //console.log(camera.position.z)

                                    var vec3 = new THREE.Vector3(player_position_x, player_position_y, player_position_z);

                                    camera.lookAt(vec3);



                                    #region model animation

                                    var delta = clock.ElapsedMilliseconds * 0.001;
                                    clock.Restart();

                                    var isEndFleame = (player_motion.max == md2meshBody.currentKeyframe);
                                    var isAction = player_motion.action;

                                    var x = (isAction && !isEndFleame);

                                    if (!isAction || x)
                                    {
                                        md2meshBody.updateAnimation(1000 * delta);
                                    }
                                    else if (player_motion.state == "freeze")
                                    {
                                        //dead...
                                    }
                                    else
                                    {
                                        player_changeMotion(player_motion);
                                    }
                                    #endregion

                                    renderer.render(scene, camera);


                                };

                                #endregion





                                #region AtResize
                                Action AtResize = delegate
                                {
                                    container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);


                                    renderer.setSize(Native.window.Width, Native.window.Height);

                                    camera.projectionMatrix.makePerspective(fov, Native.window.aspect, 1, 1100);

                                    //camera.aspect = Native.Window.Width / Native.Window.Height;
                                    //camera.updateProjectionMatrix();
                                };

                                Native.window.onresize +=
                                    delegate
                                {
                                    AtResize();
                                };

                                AtResize();
                                #endregion

                                #region requestFullscreen
                                Native.document.body.ondblclick +=
                                    delegate
                                {
                                    if (IsDisposed)
                                        return;

                                    // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/

                                    Native.document.body.requestFullscreen();

                                    //AtResize();
                                };
                                #endregion


                            }
            );





        }
        // new three broke it?
        // http://www.clicktorelease.com/code/perlin/explosion.html
        // http://www.webgl.com/2013/01/webgl-tutorial-vertex-displacement-with-a-noise-function-aka-fiery-explosion/


        /// <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(IDefault page = null)
        {
            // http://inear.se/fireshader/




            // http://stackoverflow.com/questions/16765120/ashima-perlin-noise-shader-not-working-with-recent-versions-of-three-js

            //var container, renderer,  camera, mesh;
            var start = IDate.Now;
            var fov = 30;


            #region container
            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
            var container = new IHTMLDiv();

            container.AttachToDocument();
            container.style.backgroundColor = "#000000";
            container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
            #endregion


            var scene = new THREE.Scene();
            var bkgScene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(fov, Native.window.aspect, 1, 10000);
            camera.position.z = 100;
            //camera.target = new THREE.Vector3(0, 0, 0);

            scene.add(camera);

            var bkgCamera = new THREE.OrthographicCamera(
                Native.window.Width / -2,
                Native.window.Width / 2,
                Native.window.Height / 2,
                Native.window.Height / -2,
                -10000,
                10000
            );

            bkgScene.add(bkgCamera);

            var bkgShader = new THREE.ShaderMaterial(
                new 
                {
                    uniforms = new 
                    {
                        tDiffuse = new 
                        {
                            type = "t",
                            value = THREE.ImageUtils.loadTexture(
                                new HTML.Images.FromAssets.bkg().src
                            )
                        },

                        resolution = new  { type = "v2", value = new THREE.Vector2(Native.window.Width, Native.window.Height) }
                    },

                    vertexShader = new Shaders.ExplosionVertexShader().ToString(),
                    //        fragmentShader: document.getElementById( 'fs_Gradient' ).textContent,
                    //fragmentShader = new Shaders.GradientFragmentShader().ToString(),
                    fragmentShader = new Shaders.ExplosionFragmentShader().ToString(),

                    depthWrite = false,
                    depthTest = false,
                    transparent = true
                }
            );

            var quad = new THREE.Mesh(new THREE.PlaneGeometry(Native.window.Width, Native.window.Height), bkgShader);
            quad.position.z = -100;
            quad.rotation.x = (float)Math.PI / 2;
            bkgScene.add(quad);


            var material = new THREE.ShaderMaterial(

                new 
                {
                    uniforms = new // material_uniforms
                    {
                        tExplosion = new  //uniforms_item
                        {
                            type = "t",
                            value =  THREE.ImageUtils.loadTexture(
                                new HTML.Images.FromAssets.explosion().src
                            )
                        },
                        time = new { type = "f", value = 0.0 },
                        weight = new { type = "f", value = 8.0 },
                    },

                    vertexShader = new Shaders.ExplosionVertexShader().ToString(),
                    fragmentShader = new Shaders.ExplosionFragmentShader().ToString(),
                    depthWrite = false,
                    depthTest = false,
                    transparent = true
                }
            );


            var mesh = new THREE.Mesh(new THREE.SphereGeometry(20, 200, 200), material);
            scene.add(mesh);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.autoClear = false;

            container.appendChild(renderer.domElement);

          
            var lon = 0.0;
            var phi = 0.0;
            var theta = 0.0;
            var lat = 15.0;
            var isUserInteracting = false;


            var scale = 0.0;

            #region render

            Native.window.onframe += delegate
            {

                ((material_uniforms)material.uniforms).time.value = .00025 * (IDate.Now - start);

                scale += .005;
                scale %= 2;

                lat = Math.Max(-85, Math.Min(85, lat));
                phi = (90 - lat) * Math.PI / 180;
                theta = lon * Math.PI / 180;

                camera.position.x = (float)(100 * Math.Sin(phi) * Math.Cos(theta));
                camera.position.y = (float)(100 * Math.Cos(phi));
                camera.position.z = (float)(100 * Math.Sin(phi) * Math.Sin(theta));

                //mesh.rotation.x += .012;
                //mesh.rotation.y += .01;
                camera.lookAt(scene.position);

                //    //renderer.render( bkgScene, bkgCamera );
                renderer.render(scene, camera);

                //    stats.update();

            };


            #endregion



            #region IsDisposed

            Dispose = delegate
            {
                if (IsDisposed)
                    return;

                IsDisposed = true;


                container.Orphanize();
            };
            #endregion






            #region AtResize
            Action AtResize = delegate
            {
                container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);


                renderer.setSize(Native.window.Width, Native.window.Height);

                camera.projectionMatrix.makePerspective(fov, Native.window.aspect, 1, 1100);

                //camera.aspect = Native.Window.Width / Native.Window.Height;
                //camera.updateProjectionMatrix();
            };

            Native.window.onresize +=
                delegate
                {
                    AtResize();
                };

            AtResize();
            #endregion



            var ze = new ZeProperties();

            ze.Show();
            ze.treeView1.Nodes.Clear();

            ze.Add(() => renderer);
            //ze.Add(() => controls);
            ze.Add(() => scene);
            ze.Left = 0;



        }
        //public const string Alias = "Class1";
        //public const string DefaultData = "Class1Data";

        /// <summary>
        /// Creates a new control
        /// </summary>
        /// <param name="DataElement">The hidden data element</param>
        public GoogleGearsSimple()
        {
            // this ctor creates a new div which has a text and a button element
            // on mouseover over the color text is changed
            // on pressing the button the next message in text element is displayed
            IHTMLDiv Control = new IHTMLDiv();

            Control.AttachToDocument();

            Func<string, string, IHTMLElement> link = (href, text) => new IHTMLDiv(new IHTMLAnchor(href, text));


            Control.appendChild(link("http://gears.google.com/", "Google Gears"));
            Control.appendChild(link("http://code.google.com/apis/gears/samples/hello_world_database.html", "Google Example # 1"));

            Control.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h3, "This page uses Google Gears to record your entries on the local disk. If you navigate away and revisit this page, all your data will still be here. Try it!"));

            // http://code.google.com/apis/gears/samples/hello_world_database.html

            GoogleGearsFactory.Database db = null;

            try
            {
                db = new GoogleGearsFactory.Database();
            }
            catch (Exception exc)
            {
                var err = new IHTMLCode(exc.Message);

                err.style.color = Color.Red;


                Control.appendChild(err);
            }

            IStyleSheet.Default.AddRule(".odd").style.backgroundColor = Color.FromGray(0xa0);
            IStyleSheet.Default.AddRule(".even").style.backgroundColor = Color.FromGray(0xef);

            if (db != null)
            {
                db.open("demo1");
                db.execute(@"
    create table if not exists Demo
    (Phrase varchar(255), Timestamp int)
            ");

                var textfield = new IHTMLInput(HTMLInputTypeEnum.text, "text1", "");

                var btnadd = new IHTMLButton("Add new entry");
                var btnrefresh = new IHTMLButton("Refresh");
                var btnclear = new IHTMLButton("Clear");

                Control.appendChild(textfield, btnadd, btnclear, btnrefresh,
                    
                    new IHTMLCode(GoogleGearsFactory.Default.getBuildInfo())
                        
                        );



                var list = new IHTMLElement(IHTMLElement.HTMLElementEnum.ol);

                Control.appendChild(list);

                var read = default(Action);

                read = delegate
                {
                    //from i in Demo
                    //select new { Phrase, Timestamp }
                    //order by Timestamp desc

                    list.removeChildren();

                    Func<string, IHTMLElement> AddItem = 
                        text => new IHTMLElement(IHTMLElement.HTMLElementEnum.li, text).Aggregate(v => list.appendChild(v));



                    // this could be rewritten as an expression once they are supported by jsc

                    int counter = 0;

                    var query = from Data in db.AsEnumerable<DemoDataEntity>(
                                                "select * from Demo order by Timestamp desc",
                                                typeof(DemoDataEntity)
                                            )
                                // let ListItem = AddItem(Data.Timestamp + " - " + Data.Phrase)
                                select new __Type2 { ListItem = AddItem(Data.Timestamp + " - " + Data.Phrase), Data  = Data};

                    foreach (var v in query)
                    {
                        counter++;
                        var vx = v;


                        if (counter % 2 == 0)
                            v.ListItem.className = "odd";
                        else
                            v.ListItem.className = "even";

                        #region -
                        var btndel = new IHTMLButton("-");

                        btndel.style.color = Color.Red;

                        btndel.onclick +=
                            delegate
                            {
                                db.execute("delete from Demo where Timestamp = ?", vx.Data.Timestamp);

                                read();
                            };
                        #endregion

                        #region +
                        var btnclone = new IHTMLButton("+");

                        btnclone.style.color = Color.Blue;

                        btnclone.onclick +=
                            delegate
                            {
                                db.Insert("Demo", vx.Data);


                                read();
                            };
                        #endregion

                        v.ListItem.insertBefore(btnclone, v.ListItem.firstChild);
                        v.ListItem.insertBefore(btndel, v.ListItem.firstChild);

                    }


                    #region raw
                    //var rs = db.execute("select * from Demo order by Timestamp desc");

                    //while (rs.isValidRow())
                    //{
                    //    var xt = typeof(DemoDataEntity);
                    //    var xx = (DemoDataEntity)Activator.CreateInstance(xt);

                    //    for (int i = 0; i < rs.fieldCount(); i++)
                    //    {
                    //        xt.GetField(rs.fieldName(i)).SetValue(xx, rs.field(i));
                    //    }

                    //    AddItem(xx.Timestamp + " - " + xx.Phrase);

                    //    rs.next();
                    //}

                    //rs.close();
                    #endregion

                };

                btnclear.onclick +=
                    delegate
                    {
                        db.execute("delete from Demo");

                        read();
                    };

                btnadd.onclick +=
                    delegate
                    {
                        db.Insert("Demo",
                            new DemoDataEntity
                            {
                                Phrase = textfield.value,
                                Timestamp = IDate.Now.getTime()
                            }
                        );

                        //db.execute("insert into Demo (Phrase, Timestamp) values (?, ?)", textfield.value, IDate.Now.getTime());

                        textfield.value = "";

                        read();
                    };

                btnrefresh.onclick +=
                    delegate
                    {
                        read();
                    };

                read();

            }


            // not array
            // is object
            // no prototype
        }
        //public const string Alias = "Class1";
        //public const string DefaultData = "Class1Data";


        /// <summary>
        /// Creates a new control
        /// </summary>
        /// <param name="DataElement">The hidden data element</param>
        public SimpleRollover()
        {
            // wallpapers at http://labnol.blogspot.com/2006/11/download-windows-vista-wallpapers.html

            // * broken at the moment
            #region AnimateCharacterColors
            System.Func<string, INode> AnimateCharacterColors =
                (text) =>
                {
                    var s = new IHTMLSpan();

                    var l = new global::System.Collections.Generic.List<IHTMLSpan>();

                    foreach (char c in text)
                    {
                        var y = new string(c, 1);
                        var x = new IHTMLSpan(y);

                        if (y == " ")
                        {
                            s.appendChild(" ");
                        }
                        else
                        {
                            l.Add(x);


                            s.appendChild(x);
                        }


                    }



                    new Timer(
                        t =>
                        {
                            var len = l.Count + 40;

                            if (t.Counter % len < l.Count)
                            {
                                if (t.Counter % (len * 2) < l.Count)
                                {
                                    l[t.Counter % len].style.visibility = IStyle.VisibilityEnum.hidden;
                                }
                                else
                                {
                                    l[t.Counter % len].style.visibility = IStyle.VisibilityEnum.visible;
                                }
                            }



                        }, 6000, 200);


                    return s;
                };
            #endregion
            // */

            var u = new IHTMLDiv();

            //u.style.backgroundColor = Color.Green;
            u.style.position = IStyle.PositionEnum.absolute;
            u.style.left = "0";
            u.style.top = "0";
            u.style.height = "100%";
            u.style.width = "100%";
            u.style.overflow = IStyle.OverflowEnum.auto;

            var styles = new XStyles
            {
                dark = new IStyleSheet(),
                light = new IStyleSheet(),
                switchbutton = new IHTMLAnchor("", "day/night"),
                counter = 0
            };



            styles.switchbutton.onclick +=
                ev =>
                {
                    ev.PreventDefault();

                    styles.counter++;


                    if (styles.counter % 2 == 1)
                    {
                        styles.dark.disabled = false;
                        styles.light.disabled = true;
                    }
                    else
                    {
                        styles.dark.disabled = true;
                        styles.light.disabled = false;
                    }
                };


            var ad = new IHTMLDiv(
                            new IHTMLSpan(
                                 AnimateCharacterColors(
                                "this application was written in c# and then translated to javascript by jsc to run in your browser"
                                 )
                            ),
                            new IHTMLAnchor("http://zproxy.wordpress.com", "visit blog"),
                            new IHTMLAnchor("http://jsc.sf.net", "get more examples"),
                            styles.switchbutton
                         )
                         {
                             className = "ad1"
                         };

            u.appendChild(ad);

            var sheet = new IStyleSheet();

            sheet.AddRule(".ad1",
                r =>
                {
                    r.style.marginTop = "1em";
                    r.style.color = Color.White;
                    r.style.fontFamily = IStyle.FontFamilyEnum.Verdana;
                }
            );


            sheet.AddRule(".ad1 > *",
                r =>
                {
                    r.style.padding = "1em";

                    r.style.marginTop = "1em";
                }
            );

            sheet.AddRule(".ad1 > span",
                r =>
                {
                    r.style.Float = IStyle.FloatEnum.right;
                }
            );

            sheet.AddRule(".ad1 > a",
                r =>
                {
                    r.style.Float = IStyle.FloatEnum.left;
                    r.style.color = Color.White;

                    r.style.textDecoration = "none";
                }
            );

            sheet.AddRule(".ad1 a:hover",
                r =>
                {
                    r.style.color = Color.Yellow;
                }
            );



            sheet.AddRule("html",
                r =>
                {

                    r.style.overflow = IStyle.OverflowEnum.hidden;
                }
            );

            sheet.AddRule("body",
                r =>
                {
                    r.style.overflow = IStyle.OverflowEnum.hidden;

                    r.style.padding = "0";
                    r.style.margin = "0";

                    //r.style.backgroundImage = "url(assets/vista.jpg)";

                }
            );


            styles.dark.AddRule("body").style.backgroundColor = JSColor.Black;
            styles.dark.AddRule("body").style.backgroundPosition = "center top";

            styles.light.AddRule("body").style.backgroundColor = JSColor.Black;
            styles.light.AddRule("body").style.backgroundPosition = "center top";


            new global::SimpleRollover.HTML.Images.FromAssets.vistax().ToBackground(
                styles.dark.AddRule("body").style, false
            );

            new global::SimpleRollover.HTML.Images.FromAssets.vista().ToBackground(
                styles.dark.AddRule(".effect1").style
            );

            styles.dark.AddRule(".moon1").style.backgroundColor = Color.Yellow;

            new global::SimpleRollover.HTML.Images.FromAssets.vista().ToBackground(
                styles.light.AddRule("body").style, false
            );

            new global::SimpleRollover.HTML.Images.FromAssets.vistax().ToBackground(
                 styles.light.AddRule(".effect1").style
            );
            styles.light.AddRule(".moon1").style.backgroundColor = Color.Red;


            sheet.AddRule(".special1",
                r =>
                {
                    r.style.background = "none";
                    r.style.border = "0";
                    r.style.width = "100%";
                    r.style.marginTop = "4em";


                }
            );

            sheet.AddRule(".content1",
                r =>
                {
                    r.style.backgroundColor = Color.White;

                    r.style.padding = "1em";
                    r.style.marginLeft = "4em";
                    r.style.marginRight = "4em";
                    r.style.Opacity = 0.5;
                    r.style.border = "1px solid gray";
                }
            );

            sheet.AddRule(".special1 img", "border: 0", 0);
            sheet.AddRule(".special1:hover", "background: url(" + new global::SimpleRollover.HTML.Images.FromAssets.Untitled_3().src + ") repeat-x", 1);

            sheet.AddRule(".special1 .hot").style.display = IStyle.DisplayEnum.none;
            sheet.AddRule(".special1:hover .hot").style.display = IStyle.DisplayEnum.inline;

            sheet.AddRule(".special1 .cold", "display: inline;", 1);
            sheet.AddRule(".special1:hover .cold", "display: none;", 1);


            var states = new XState[] { }.AsEnumerable();

            //    new XState { 
            //        Show = default(System.Action), 
            //        Hide = default(System.Action), 
            //        Selected = false } 
            //}.Where(p => false);


            Action<IHTMLImage, IHTMLImage, string> Spawn =
                async (icold, ihot, i2) =>
                {
                    var cold = await icold;
                    var hot = await ihot;

                    //((IHTMLImage)i[0]).InvokeOnComplete(cold =>
                    //((IHTMLImage)i[1]).InvokeOnComplete(hot =>
                    //     {
                    cold.className = "cold";
                    hot.className = "hot";


                    var btn = new IHTMLButton()
                        {
                            className = "special1"
                        };

                    btn.appendChild(cold, hot);

                    var content = new IHTMLElement(IHTMLElement.HTMLElementEnum.pre);

                    content.innerHTML = "...";
                    content.className = "content1";

                    var tween = new TweenDataDouble();
                    var tween_max = 16;

                    tween.ValueChanged +=
                        delegate
                        {
                            content.style.Opacity = tween.Value / tween_max;
                            content.style.height = tween.Value + "em";

                            content.style.overflow = IStyle.OverflowEnum.hidden;

                        };

                    tween.Done += delegate
                    {
                        if (tween.Value > 0)
                            content.style.overflow = IStyle.OverflowEnum.auto;
                    };

                    tween.Value = 0;

                    var state = new XState
                       {
                           Show = (System.Action)(() =>
                                               {
                                                   tween.Value = tween_max;
                                               }
                           ),
                           Hide = (System.Action)(() => tween.Value = 0),
                           Selected = false
                       };

                    //try
                    //{
                    //    new IXMLHttpRequest(HTTPMethodEnum.GET, i[2],
                    //       request => content.innerHTML = request.responseText
                    //    );
                    //}
                    //catch
                    //{
                    content.innerText = i2;
                    //}

                    states = states.Concat(new[] { state });

                    btn.onclick +=
                        delegate
                        {
                            foreach (var v in states)
                            {
                                if (v == state)
                                {

                                    v.Selected = !v.Selected;

                                    if (v.Selected)
                                    {
                                        v.Show();
                                    }
                                    else
                                    {
                                        v.Hide();
                                    }

                                }
                                else
                                {
                                    v.Selected = false;
                                    v.Hide();
                                }
                            }
                        };

                    u.appendChild(btn, content);




                };


            SpawnCursor();


            u.AttachToDocument();

            Spawn(
                new global::SimpleRollover.HTML.Images.FromAssets.Untitled_1_03(),
                new global::SimpleRollover.HTML.Images.FromAssets.Untitled_2_03(),
                "This application was written in C#."
            );

            Spawn(
                new global::SimpleRollover.HTML.Images.FromAssets.Untitled_1_07(),
                new global::SimpleRollover.HTML.Images.FromAssets.Untitled_2_07(),

                 "This application was cross compiled into JavaScript."
            );


        }
        /// <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)
        {
            // what about webrtc?

            content.BackColor = Color.Transparent;

            if (Native.window.opener != null)
            {
                content.button1.Enabled = false;
                content.button1.Text = "we are the secondary screen!";
                return;
            }

            var flocal = new Form1();

            flocal.Show();
            flocal.webBrowser1.Navigate("/jsc");

            content.button1.Click +=
                delegate
                {
                    content.button1.Enabled = false;

                    int c = -1;

                    Native.window.open("/", "_blank").With(
                        w =>
                        {
                            w.onload +=
                                delegate
                                {
                                    c++;

                                    if (c == 0)
                                    {

                                    }
                                    else if (c == 1)
                                    {
                                        // we need the secondary load?
                                        w.document.title = "secondary screen";


                                        w.document.body.style.backgroundColor = JSColor.Yellow;



                                        var fremote = new Form1 { Text = "(Remote)" };

                                        fremote.webBrowser1.Navigate("/jsc");

                                        fremote.Show();


                                        fremote.GetHTMLTarget().AttachTo(
                                            w.document.body
                                        );

                                        fremote.Opacity = 0.5;

                                        var shadow = new IHTMLDiv();

                                        shadow.style.SetLocation(
                                            32, 32, 200,
                                            200
                                        );

                                        shadow.style.backgroundColor = JSColor.Yellow;

                                        shadow.style.Opacity = 0.5;

                                        shadow.AttachToDocument();

                                        #region update
                                        Action update =
                                            delegate
                                            {
                                                dynamic xwlocal = Native.window;

                                                int xwlocal_left = xwlocal.screenLeft;
                                                int xwlocal_top = xwlocal.screenTop;

                                                int xwlocal_innerHeight = xwlocal.innerHeight;
                                                int xwlocal_outerHeight = xwlocal.outerHeight;
                                                int xwlocal_innerWidth = xwlocal.innerWidth;
                                                int xwlocal_outerWidth = xwlocal.outerWidth;

                                                dynamic xw = w;

                                                int xw_left = xw.screenLeft;
                                                int xw_top = xw.screenTop;

                                                int xw_innerHeight = xw.innerHeight;
                                                int xw_outerHeight = xw.outerHeight;
                                                int xw_innerWidth = xw.innerWidth;
                                                int xw_outerWidth = xw.outerWidth;

                                                Console.WriteLine(
                                                    new
                                                    {
                                                        flocal.Left,
                                                        xwlocal_left,
                                                        xw_left,
                                                        xwlocal_innerWidth,
                                                        xwlocal_outerWidth,
                                                        xw_innerWidth,
                                                        xw_outerWidth
                                                    }
                                                    );

                                                fremote.MoveTo(
                                                    flocal.Left + xwlocal_left + (xwlocal_outerWidth - xwlocal_innerWidth) - xw_left - (xw_outerWidth - xw_innerWidth),
                                                    flocal.Top + xwlocal_top + (xwlocal_outerHeight - xwlocal_innerHeight) - xw_top - (xw_outerHeight - xw_innerHeight)
                                                );

                                                fremote.SizeTo(
                                                    flocal.Width,
                                                    flocal.Height
                                                );

                                                shadow.style.SetLocation(
                                                   -xwlocal_left - (xwlocal_outerWidth - xwlocal_innerWidth) + xw_left + (xw_outerWidth - xw_innerWidth),
                                                   -xwlocal_top - (xwlocal_outerHeight - xwlocal_innerHeight) + xw_top + (xw_outerHeight - xw_innerHeight),

                                                   xw_innerWidth,
                                                   xw_innerHeight
                                               );

                                            };
                                        flocal.LocationChanged +=
                                            delegate
                                            {
                                                update();
                                            };

                                        flocal.SizeChanged +=
                                            delegate
                                            {
                                                update();
                                            };

                                        update();

                                        Action loop = null;
                                        loop = delegate
                                            {
                                                update();
                                                Native.window.requestAnimationFrame += loop;
                                            };
                                        loop();
                                        #endregion

                                        content.button1.Enabled = true;

                                    }

                                };
                        }
                    );

                    @"primary screen".ToDocumentTitle();
                };

            //content.AttachControlTo(page.Content);

            content.AttachControlToDocument();

            //content.AutoSizeControlTo(page.ContentSize);

        }
        /// <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://blog.cuartodejuegos.es/wp-content/uploads/2011/06/Story-cubes-caras.jpg
            // http://css-eblog.com/3d/box.html

            var w = Native.window.Width;
            var h = Native.window.Height;

            //      var world, ground, 
            var timeStep = 1 / 60.0;

            //diceRigid, dice,
            //camera, scene, renderer, floorObj,
            //startDiceNum = 3,
            var cubeSize = 3.0;

            #region Cannonの世界を生成
            var world = new CANNON.World();

            //重力を設定
            world.gravity.set(0, -90.82, 0);
            world.broadphase = new CANNON.NaiveBroadphase();
            world.solver.iterations = 10;
            world.solver.tolerance = 0.001;

            //地面用にPlaneを生成
            var plane = new CANNON.Plane();

            //Planeの剛体を質量0で生成する
            var ground = new CANNON.RigidBody(0, plane);

            //X軸に90度(つまり地面)に回転
            ground.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
            ground.position.set(
                50, 0, 50);

            world.add(ground);
            #endregion


            #region initThree() {


            //var camera = new THREE.OrthographicCamera(-w / 2, w / 2, h / 2, -h / 2, 1, 1000);
            var camera = new THREE.PerspectiveCamera(60, w / (double)h, 0.1, 1000);


            camera.lookAt(new THREE.Vector3(0, 0, 0));

            var scene = new THREE.Scene();
            var renderer = new THREE.CSS3DRenderer();
            renderer.setSize(w, h);

            var textureSize = 800;
            var floorEle = new IHTMLDiv();
            //floorEle.style.width = textureSize + "px";
            //floorEle.style.height = textureSize + "px";

            floorEle.style.width = 100 + "px";
            floorEle.style.height = 100 + "px";

            new WebGLDiceByEBLOG.HTML.Images.FromAssets.background().ToBackground(floorEle.style, true);

            //floorEle.style.background = 'url(http://jsrun.it/assets/d/x/0/w/dx0wl.png) left top repeat';
            //floorEle.style.backgroundSize = textureSize / 20 + "px " + textureSize / 20 + "px";
            (floorEle.style as dynamic).backgroundSize = textureSize / 20 + "px " + textureSize / 20 + "px";

            var floorObj = new THREE.CSS3DObject(floorEle);
            //floorObj.position.fromArray(new double[] { 100, 0, 0 });
            //floorObj.rotation.fromArray(new double[] { Math.PI / 2.0, 0, 0 });
            scene.add(floorObj);

            scene.add(camera);

            renderer.domElement.AttachToDocument();

            renderer.render(scene, camera);
            #endregion }



            #region createDice
            Func<xdice> createDice = delegate
            {


                Console.WriteLine("before array");


                //t = new Array(3);
                //p.rotation = t;

                var zero = 0.0;


                #region boxInfo
                var boxInfo = new[] 
                {
                         new xdiceface {
                        img = (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num4(),
                        position= new double [] { 0, 0, -cubeSize },

                        // jsc, please allow 
                        rotation= new double [] { 0, 0, zero }
                    },


                    new  xdiceface{
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num2(),
                        position = new double [] { -cubeSize, 0, 0 },
                        rotation =  new double [] { 0, Math.PI / 2, 0 }
                    },
                    new xdiceface{
                        img = (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num5(),
                        position = new double [] { cubeSize, 0, 0 },
                        rotation= new double [] { 0, -Math.PI / 2, 0 }
                    },
                    new xdiceface{
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num1(),
                        position= new double [] { 0,  cubeSize, 0 },
                        rotation= new double [] { Math.PI / 2, 0, Math.PI }
                    },
                    new xdiceface {
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num6(),
                        position= new double [] { 0, -cubeSize, 0 },
                        rotation= new double [] { - Math.PI / 2, 0, Math.PI }
                    },
                    new xdiceface{
                        img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num3(),
                        position= new double [] { 0, 0,  cubeSize },
                        rotation= new double [] { 0, Math.PI, 0 }
                    },
               
                };
                #endregion
                Console.WriteLine("after array");

                //for three.js
                //var el, dice,
                //    info, img, face;

                var el = new IHTMLDiv();
                el.style.width = cubeSize * 2 + "px";
                el.style.height = cubeSize * 2 + "px";
                var dice = new THREE.CSS3DObject(el);

                for (var j = 0; j < boxInfo.Length; j++)
                {
                    Console.WriteLine("after array " + new { j });

                    var info = boxInfo[j];

                    info.img.style.SetSize(
                        (int)(cubeSize * 2),
                        (int)(cubeSize * 2)
                    );


                    var face = new THREE.CSS3DObject(info.img);

                    face.position.fromArray(info.position);
                    face.rotation.fromArray(info.rotation);
                    dice.add(face);
                }

                //Create physics.
                var mass = 1;
                var box = new CANNON.Box(new CANNON.Vec3(cubeSize, cubeSize, cubeSize));
                var body = new CANNON.RigidBody(mass, box);

                //body.position.set(x, y, z);
                //body.velocity.set(0, 0, Math.random() * -50 - 30);

                //body.angularVelocity.set(10, 10, 10);
                //body.angularDamping = 0.001;

                return new xdice
                {
                    dice = dice,
                    rigid = body
                };
            };
            #endregion


            //world.allowSleep = true;
            var stopped = false;

            Func<double> random = new Random().NextDouble;

            #region initAnimation
            Action<xdice> initAnimation = y =>
            {
                var position = new
                {
                    x = 5 + random() * 50.0,
                    y = 5 + random() * 50.0,
                    z = 5 + random() * 5.0,
                };

                Console.WriteLine(new { position });
                y.rigid.position.set(position.x, position.y, position.z);

                y.rigid.velocity.set(
                    random() * 20 + 0,
                    random() * 20 + 10,
                    random() * 20 + 10
                    );


                y.rigid.angularVelocity.set(10, 10, 10);
                y.rigid.angularDamping = 0.001;
            };
            #endregion

            //create a dice.

            var AllDice = new List<xdice>();

            for (int i = 0; i < 9; i++)
            {

                var y = createDice();

                initAnimation(y);

                scene.add(y.dice);
                world.add(y.rigid);

                AllDice.Add(y);

            }





            var target = new THREE.Vector3();

            var lon = 50.0;
            var lat = -72.0;





            var drag = false;

            #region onframe
            Native.window.onframe +=
                delegate
                {
                    if (Native.document.pointerLockElement == Native.document.body)
                        lon += 0.00;
                    else
                        lon += 0.01;

                    lat = Math.Max(-85, Math.Min(85, lat));

                    Native.document.title = new { lon = (int)lon, lat = (int)lat }.ToString();


                    var phi = THREE.Math.degToRad(90.0 - lat);
                    var theta = THREE.Math.degToRad(lon);

                    target.x = Math.Sin(phi) * Math.Cos(theta);
                    target.y = Math.Cos(phi);
                    target.z = Math.Sin(phi) * Math.Sin(theta);

                    //XInteractiveInt32Form.ToInteractiveInt32Form(
                    camera.position.set(
                        x: 0,
                        y: 50.ToInteractiveInt32Form(),
                        z: 0
                   );

                    #region updatePhysics();
                    //物理エンジンの時間を進める
                    world.step(timeStep);

                    //物理エンジンで計算されたbody(RigidBody)の位置をThree.jsのMeshにコピー
                    AllDice.WithEach(
                        y =>
                        {
                            y.rigid.position.copy(y.dice.position);
                            y.rigid.quaternion.copy(y.dice.quaternion);

                            //y.rigid.position.copy(camera.position);
                        }
                    );

                    if (!drag)
                    {
                        camera.lookAt(
                            new THREE.Vector3(
                                AllDice.Average(i => i.rigid.position.x),
                                AllDice.Average(i => i.rigid.position.y),
                                AllDice.Average(i => i.rigid.position.z)
                            )
                        );



                    }
                    else
                    {
                        camera.lookAt(
                            new THREE.Vector3(
                                target.x + camera.position.x,
                                target.y + camera.position.y,
                                target.z + camera.position.z
                            )
                        );
                    }

                    ground.position.copy(floorObj.position);
                    ground.quaternion.copy(floorObj.quaternion);
                    #endregion

                    renderer.render(scene, camera);
                };
            #endregion




            #region sleepy
            AllDice.Last().With(
                x =>
                {

                    x.rigid.addEventListener("sleepy",

                        IFunction.OfDelegate(
                            new Action(
                                delegate
                                {

                                    var px = new THREE.Vector4(1, 0, 0, 0);
                                    var nx = new THREE.Vector4(-1, 0, 0, 0);
                                    var py = new THREE.Vector4(0, 1, 0, 0);
                                    var ny = new THREE.Vector4(0, -1, 0, 0);
                                    var pz = new THREE.Vector4(0, 0, 1, 0);
                                    var nz = new THREE.Vector4(0, 0, -1, 0);
                                    var UP = 0.99;
                                    //tmp;

                                    #region showNum
                                    Action<int> showNum = num =>
                                    {
                                        new { num }.ToString().ToDocumentTitle();
                                    };

                                    if (px.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(5);
                                    }
                                    else if (nx.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(2);
                                    }
                                    else if (py.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(1);
                                    }
                                    else if (ny.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(6);
                                    }
                                    else if (pz.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(3);
                                    }
                                    else if (nz.applyMatrix4(x.dice.matrixWorld).y > UP)
                                    {
                                        showNum(4);
                                    }
                                    #endregion

                                    stopped = true;
                                }
                            )
                        )
                    );
                }
            );

            #endregion

            #region onresize
            Action AtResize = delegate
            {
                camera.aspect = Native.window.Width / Native.window.Height;
                camera.updateProjectionMatrix();
                renderer.setSize(Native.window.Width, Native.window.Height);
            };
            Native.window.onresize +=
              delegate
              {
                  AtResize();
              };
            #endregion


            #region onclick
            var button = new IHTMLDiv();

            button.style.position = IStyle.PositionEnum.absolute;
            button.style.left = "0px";
            button.style.right = "0px";
            button.style.bottom = "0px";
            button.style.height = "3em";
            button.style.backgroundColor = "rgba(0,0,0,0.5)";

            button.AttachToDocument();



            button.onmousedown +=
                e =>
                {
                    e.stopPropagation();
                };

            button.ontouchstart +=
                e =>
                {
                    e.stopPropagation();
                };

            button.ontouchmove +=
                 e =>
                 {
                     e.stopPropagation();
                 };

            button.onclick +=
                delegate
                {
                    stopped = false;

                    AllDice.WithEach(
                       y =>
                       {
                           initAnimation(y);
                       }
                    );

                };
            #endregion

            #region ontouchmove
            var touchX = 0;
            var touchY = 0;

            Native.document.body.ontouchend +=
               e =>
               {
                   drag = false;
               };


            Native.document.body.ontouchstart +=
                e =>
                {
                    drag = true;
                    e.preventDefault();

                    var touch = e.touches[0];

                    touchX = touch.screenX;
                    touchY = touch.screenY;

                };


            Native.document.body.ontouchmove +=
              e =>
              {
                  e.preventDefault();

                  var touch = e.touches[0];

                  lon -= (touch.screenX - touchX) * 0.1;
                  lat += (touch.screenY - touchY) * 0.1;

                  touchX = touch.screenX;
                  touchY = touch.screenY;

              };
            #endregion






            #region camera rotation
            renderer.domElement.onmousemove +=
                e =>
                {
                    e.preventDefault();

                    if (Native.document.pointerLockElement == renderer.domElement)
                    {
                        drag = true;
                        lon += e.movementX * 0.1;
                        lat -= e.movementY * 0.1;

                        //Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
                    }
                };


            renderer.domElement.onmouseup +=
              e =>
              {
                  drag = Native.document.pointerLockElement != null;
                  e.preventDefault();
              };

            renderer.domElement.onmousedown +=
                e =>
                {
                    //e.CaptureMouse();

                    drag = true;
                    e.preventDefault();
                    renderer.domElement.requestPointerLock();

                };


            renderer.domElement.ondblclick +=
                e =>
                {
                    e.preventDefault();

                    Console.WriteLine("requestPointerLock");
                };

            #endregion






        }
Example #18
0
        //public const string Alias = "Class1";
        //public const string DefaultData = "Class1Data";

        /// <summary>
        /// Creates a new control
        /// </summary>
        /// <param name="DataElement">The hidden data element</param>
        public Class1(IHTMLElement DataElement)
        {
            IStyleSheet.Default.AddRule("*", "cursor: url('assets/NatureBoy/cursor.cur'), auto;", 0);

            IStyleSheet.Default.AddRule("body",
                r =>
                {
                    r.style.backgroundColor = Color.Gray;
                    r.style.overflow = IStyle.OverflowEnum.hidden;
                    r.style.padding = "0px";
                }
            );

            IStyleSheet.Default.AddRule(".stage",
                r =>
                {
                    r.style.backgroundColor = Color.White;

                    r.style.position = IStyle.PositionEnum.absolute;
                    r.style.left = "0px";
                    r.style.top = "0px";
                    r.style.right = "0px";
                    r.style.bottom = "0px";
                    r.style.Opacity = 0.0;
                }
            );



            var bg = new IHTMLImage("assets/NatureBoy/back/IMG_0572.jpg");

            bg.style.position = IStyle.PositionEnum.absolute;
            bg.style.SetLocation(0, 0);
            bg.style.width = "100%";
            bg.AttachToDocument();



            var stage = new IHTMLDiv { className = "stage" };

            stage.AttachToDocument();


            var dude4 = new Dude { ZoomFunc = y => (y + 300) / (600) };

            dude4.TeleportTo(200, 200);
            dude4.Control.AttachToDocument();
            dude4.AutoRotate(1);

            var dude5 = new Dude { ZoomFunc = dude4.ZoomFunc };

            dude5.TeleportTo(600, 300);
            dude5.Control.AttachToDocument();
            dude5.AutoRotateToCursor(stage);

            var dude6 = new Dude { ZoomFunc = dude4.ZoomFunc };

            dude6.TeleportTo(300, 400);
            dude6.Control.AttachToDocument();

            var dude7 = new Dude { ZoomFunc = dude4.ZoomFunc };

            dude7.TeleportTo(200, 400);
            dude7.Control.AttachToDocument();

            var dude8 = new Dude { ZoomFunc = dude4.ZoomFunc };

            dude8.TeleportTo(250, 300);
            dude8.Control.AttachToDocument();

            var CurrentDude = default(Dude);

            Action<Dude> SelectDude = i =>
                                          {
                                              if (CurrentDude != null)
                                                  CurrentDude.IsSelected = false;

                                              CurrentDude = i;
                                              CurrentDude.IsSelected = true;
                                          };

            Action<Dude> BindSelectDude =
                i => i.Control.onclick += delegate { SelectDude(i); };

            BindSelectDude(dude6);
            BindSelectDude(dude7);
            BindSelectDude(dude8);


            stage.onclick +=
                delegate(IEvent ev)
                {
                    CurrentDude.WalkTo(ev.CursorPosition);

                    dude5.WalkTo(ev.CursorPosition);
                };

        }
Example #19
0
        void Spawn(DudeAnimationInfo LoadedCharacter, Scene.Document LoadedScene)
        {
            var ViewSize = new Size { Width = 640, Height = 480 };

            var Container = new IHTMLDiv();
            Container.AttachToDocument();
            Container.style.SetSize(ViewSize.Width, ViewSize.Height + 22);
            Container.KeepInCenter();

            //Container.MakeCSSShaderCrumple();

            var Wallpaper = new IHTMLDiv().AttachTo(Container);
            Wallpaper.style.SetSize(ViewSize.Width, ViewSize.Height + 22);


            new power().ToBackground(Wallpaper.style);
            Wallpaper.style.position = IStyle.PositionEnum.absolute;
            Wallpaper.style.backgroundRepeat = "no-repeat";
            Wallpaper.style.backgroundPosition = "center center";





            var Margin = 48;
            var MarginSafe = 72;



            var CurrentFrame = LoadedScene.Frames.Randomize().First();
            //var CurrentFrame = LoadedScene.Frames.Single(f => f.Name == "C");

            var Room = new IHTMLDiv();



            Room.style.border = "1px solid #00ff00";
            Room.style.SetSize(ViewSize.Width, ViewSize.Height);
            Room.style.position = IStyle.PositionEnum.absolute;
            Room.style.overflow = IStyle.OverflowEnum.hidden;

            Room.AttachTo(Container);
            Room.style.SetLocation(0, 22);

            //Room.AttachToDocument();
            //Room.KeepInCenter();




            var tween = Room.ToOpacityTween();

            Action HideRoom = () => tween.Value = 1;
            Action ShowRoom = () => tween.Value = 0;

            HideRoom();

            //var GroundOverlay2 = new IHTMLDiv();

            //GroundOverlay2.style.backgroundColor = Color.Blue;
            ////GroundOverlay.style.Opacity = 0;

            //GroundOverlay2.style.position = IStyle.PositionEnum.absolute;
            //GroundOverlay2.style.SetLocation(0, 0, ViewSize.Width, ViewSize.Height);
            //GroundOverlay2.AttachTo(Room);

            var LostInTime_Images = new ImpAdventures.HTML.Pages.LostInTimeImages().Images;

            var BackgroundImage = new IHTMLImage();

            LostInTime_Images.FirstOrDefault(
                                   k => k.src.SkipUntilLastIfAny("/") == CurrentFrame.Image.Source.SkipUntilLastIfAny("/")
                               ).With(
                                   ImageSource =>
                                   {
                                       Console.WriteLine(ImageSource.src);
                                       BackgroundImage.src = ImageSource.src;
                                   }
                               );

            BackgroundImage.style.SetLocation(0, 0, ViewSize.Width, ViewSize.Height);
            BackgroundImage.alt = "BackgroundImage";
            BackgroundImage.AttachTo(Room);

            //GroundOverlay2.style.backgroundImage = "url(" + CurrentFrame.Image.Source + ")";
            //BackgroundImage.InvokeOnComplete(
            //    delegate
            //    {
            //        //BackgroundImage.style.backgroundColor = Color.Red;
            //        //BackgroundImage.style.SetLocation(0,0, ViewSize.Width, ViewSize.Height);
            //        BackgroundImage.AttachTo(GroundOverlay2);
            //    }
            //);


            var GroundOverlay = new IHTMLDiv();

            GroundOverlay.style.backgroundColor = Color.Blue;
            GroundOverlay.style.Opacity = 0;
            GroundOverlay.style.SetLocation(0, 0, ViewSize.Width, ViewSize.Height);
            GroundOverlay.AttachTo(Room);

            var Ground = new IHTMLDiv();

            Ground.style.SetLocation(0, 0, ViewSize.Width, ViewSize.Height);
            Ground.AttachTo(Room);




            var AnimateRoomChange = default(Action<Action>);

            #region TryToChangeRooms
            Func<TryToChangeRoomsArgs, bool> TryToChangeRooms =
                e =>
                {
                    if (e == null)
                        return false;

                    if (e.NextRoomSelector == null) throw new ArgumentNullException("NextRoomSelector");

                    var next = LoadedScene.Frames.SingleOrDefault(e.NextRoomSelector);

                    var r = next != null;

                    if (r)
                    {
                        AnimateRoomChange(
                            delegate
                            {
                                CurrentFrame = next;

                                Console.WriteLine("AnimateRoomChange");

                                LostInTime_Images.FirstOrDefault(
                                    k => k.src.SkipUntilLastIfAny("/") == CurrentFrame.Image.Source.SkipUntilLastIfAny("/")
                                ).With(
                                    ImageSource =>
                                    {
                                        Console.WriteLine(ImageSource.src);
                                        BackgroundImage.src = ImageSource.src;
                                    }
                                );

                                //GroundOverlay2.style.backgroundImage = "url(" + CurrentFrame.Image.Source + ")";
                                //BackgroundImage.src = CurrentFrame.Image.Source;

                                e.ReadyToTeleport();
                            }
                        );
                    }


                    return r;
                };
            #endregion


            var dude = CreateDude(LoadedCharacter);

            dude.Control.AttachTo(Ground);

            #region Doors
            var Doors = new[]
                {
                    new TryToChangeRoomsArgs
                            {
                                Condition = () => dude.CurrentLocation.X > ViewSize.Width - Margin,
                                NextRoomSelector = f => f.Name == CurrentFrame.Right,
                                ReadyToTeleport = delegate
                                {

                                    dude.TeleportTo(-MarginSafe, dude.CurrentLocation.Y);
                                    dude.LookAt(new Point(MarginSafe, (int)dude.CurrentLocation.Y));
                                }
                            },
                    new TryToChangeRoomsArgs
                            {
                                Condition = () => dude.CurrentLocation.X < Margin,
                                NextRoomSelector = f => f.Name == CurrentFrame.Left,
                                ReadyToTeleport = delegate
                                {

                                    dude.TeleportTo(ViewSize.Width + MarginSafe, dude.CurrentLocation.Y);
                                    dude.LookAt(new Point(ViewSize.Width - MarginSafe, (int)dude.CurrentLocation.Y));
                                }
                            },
                    new TryToChangeRoomsArgs
                            {
                                Condition = () => dude.CurrentLocation.Y < Margin,
                                NextRoomSelector = f => f.Name == CurrentFrame.Top,
                                ReadyToTeleport = delegate
                                {

                                     dude.TeleportTo(dude.CurrentLocation.X, ViewSize.Height + MarginSafe);
                                    dude.LookAt(new Point((int)dude.CurrentLocation.X, ViewSize.Height - MarginSafe));

                                }
                            },
                    new TryToChangeRoomsArgs
                            {
                                Condition = () => dude.CurrentLocation.Y > ViewSize.Height - Margin,
                                NextRoomSelector = f => f.Name == CurrentFrame.Bottom,
                                ReadyToTeleport = delegate
                                {

                                  dude.TeleportTo(dude.CurrentLocation.X, -Margin);
                                dude.LookAt(new Point((int)dude.CurrentLocation.X, MarginSafe));

                                }
                            }
                };
            #endregion

            Console.WriteLine(new { Doors = Doors.Length });

            Doors.WithEachIndex(
                (x, index) =>
                {
                    Console.WriteLine(new { index, x });
                    Console.WriteLine(new { index, x.Condition });
                }
            );


            var ChangeRoom = new ChangeRoom { autobuffer = true };
            var Talk = new Talk { autobuffer = true };
            var Argh_RChannel = new Argh_RChannel { autobuffer = true };
            var Argh_LChannel = new Argh_LChannel { autobuffer = true };
            var Argh_Disabled = false;
            var Argh_VolumeMultiplier = 1.0;

            #region Argh_Stereo
            Action<double, double> Argh_Stereo =
                (volume, balance) =>
                {
                    if (Argh_Disabled)
                        return;

                    Argh_RChannel.AttachToDocument();
                    Argh_LChannel.AttachToDocument();

                    Argh_RChannel.volume = Argh_VolumeMultiplier * volume * balance;
                    Argh_LChannel.volume = Argh_VolumeMultiplier * volume * (1 - balance);

                    Argh_RChannel.play();
                    Argh_LChannel.play();

                    Argh_RChannel = new Argh_RChannel { autobuffer = true };
                    Argh_LChannel = new Argh_LChannel { autobuffer = true };

                    Argh_Disabled = true;
                    Argh_VolumeMultiplier /= 2;

                    new Timer(t => Argh_Disabled = false).StartTimeout(800);
                    new Timer(t => Argh_VolumeMultiplier = 1).StartTimeout(5000);
                };
            #endregion

            #region PrintText
            Action<string, Action> PrintText =
                (text, done) =>
                {
                    Talk.AttachToDocument();
                    Talk.load();
                    Talk.volume = Math.Min(1, dude.Zoom.DynamicZoom / 4);
                    Talk.play();
                    Talk = new Talk { autobuffer = true };

                    text.Length.Range().AsyncForEach(
                        i =>
                        {
                            Wallpaper.innerText = text.Left(i + 1);

                            var c = text[i];

                            if (LoadedScene.SlowText.Contains("" + c))
                                return 100.Random();

                            return 50.Random();
                        }, done
                    );
                };
            #endregion

            Action<string, Action> PrintRandomText =
                (text, done) => PrintText(text.Split(LoadedScene.TextDelimiter).Randomize().First(), done);




            dude.DoneWalking +=
                delegate
                {
                    // compiler bug: cannot invoke Action<func, action> delegate ?

                    System.Console.WriteLine("done walking in " + CurrentFrame.Name + " at " + dude.CurrentLocation);

                    var xFirstOrDefault = Doors.FirstOrDefault(d => d.Condition());

                    System.Console.WriteLine("done walking in " + new { xFirstOrDefault });

                    // Doors null?
                    if (TryToChangeRooms(xFirstOrDefault))
                        return;


                    if (CurrentFrame.Items != null)
                    {
                        var item = CurrentFrame.Items.Where(
                            i => new Point(i.X.ToInt32(), i.Y.ToInt32()).GetRange(dude.CurrentLocation) < i.R.ToInt32()
                            ).FirstOrDefault();

                        if (item != null)
                        {


                            dude.IsSelected = false;
                            dude.LookDown();

                            PrintRandomText(item.Text,
                                delegate
                                {

                                    dude.WalkingOnce +=
                                        delegate
                                        {
                                            Wallpaper.innerText = "";
                                        };

                                    dude.IsSelected = true;
                                }
                            );
                        }
                    }

                };

            #region AnimateRoomChange
            AnimateRoomChange =
                ReadyToTeleport =>
                {
                    var Step1 = default(System.Action);
                    var Step2 = default(System.Action);
                    var Step3 = default(Action);

                    Step1 =
                        delegate
                        {
                            tween.Done -= Step1;

                            ReadyToTeleport();

                            tween.Done += Step2;

                            ShowRoom();
                        };

                    Step2 =
                        delegate
                        {
                            tween.Done -= Step2;

                            dude.DoneWalking += Step3;

                            dude.IsWalking = true;

                        };

                    Step3 =
                        delegate
                        {
                            dude.DoneWalking -= Step3;

                            dude.IsSelected = true;
                        };

                    dude.IsSelected = false;

                    tween.Done += Step1;
                    // go left
                    HideRoom();

                    // http://stackoverflow.com/questions/3009888/autoplay-audio-files-on-an-ipad-with-html5
                    ChangeRoom.AttachToDocument();
                    ChangeRoom.load();
                    ChangeRoom.volume = 0.2;
                    ChangeRoom.play();
                    ChangeRoom = new ChangeRoom();
                };
            #endregion

            var pointer_x = 0;
            var pointer_y = 0;

            #region onmousemove
            Container.onmousemove +=
                ev =>
                {
                    if (Native.Document.pointerLockElement == Container)
                    {
                        if (dude.IsSelected)
                        {
                            var volume = Math.Min(1, dude.Zoom.DynamicZoom / 4);
                            var balance = dude.CurrentLocation.X / ViewSize.Width;

                            pointer_x += ev.movementX;
                            pointer_y += ev.movementY;

                            pointer_x = Math.Min(ViewSize.Width - 0, Math.Max(0, pointer_x));
                            pointer_y = Math.Min(ViewSize.Height - 0, Math.Max(0, pointer_y));

                            var OffsetPosition = new Point(pointer_x, pointer_y

                            );

                            Console.WriteLine(OffsetPosition);

                            Argh_Stereo(volume, balance);
                            dude.WalkTo(OffsetPosition);
                        }
                    }
                };
            #endregion

            #region ontouchstart
            Container.ontouchstart +=
                ev =>
                {
                    ev.preventDefault();

                    System.Console.WriteLine(ev.CursorPosition);

                    if (dude.IsSelected)
                    {
                        var volume = Math.Min(1, dude.Zoom.DynamicZoom / 4);
                        var balance = dude.CurrentLocation.X / ViewSize.Width;

                        var ev_OffsetPosition = new Point(
                            ev.touches[0].clientX - Container.Bounds.Left,
                            ev.touches[0].clientY - Container.Bounds.Top
                            );

                        Argh_Stereo(volume, balance);
                        dude.WalkTo(ev_OffsetPosition);
                    }
                };
            #endregion

            #region onclick
            Container.onclick +=
                ev =>
                {
                    ev.preventDefault();

                    if (ev.MouseButton == IEvent.MouseButtonEnum.Middle)
                    {
                        if (Native.Document.pointerLockElement == Container)
                        {
                            Native.Document.exitPointerLock();
                            return;
                        }

                        pointer_x = (int)dude.CurrentLocation.X;
                        pointer_y = (int)dude.CurrentLocation.Y;

                        //Container.requestFullscreen();
                        Container.requestPointerLock();
                        return;
                    }

                    if (ev.Element != Ground)
                        return;

                    System.Console.WriteLine(ev.CursorPosition);

                    if (dude.IsSelected)
                    {
                        var volume = Math.Min(1, dude.Zoom.DynamicZoom / 4);
                        var balance = dude.CurrentLocation.X / ViewSize.Width;

                        Argh_Stereo(volume, balance);
                        dude.WalkTo(ev.OffsetPosition);
                    }
                };
            #endregion



            //GroundOverlay.onclick +=
            //    ev =>
            //    {
            //        if (ev.Element != GroundOverlay)
            //            return;

            //        System.Console.WriteLine(ev.CursorPosition);

            //        if (dude.IsSelected)
            //        {
            //            new Argh().play();

            //            dude.WalkTo(ev.OffsetPosition);
            //        }
            //    };


            dude.TeleportTo(ViewSize.Width / 2, (ViewSize.Height - MarginSafe) / 2);
            dude.LookDown();

            ShowRoom();

            dude.DoneWalkingOnce +=
                delegate
                {
                    PrintRandomText(
                        LoadedScene.IntroText,
                        delegate
                        {

                            dude.WalkingOnce +=
                              delegate
                              {
                                  Wallpaper.innerText = "";
                              };

                            dude.IsSelected = true;
                        }
                    );
                };

            dude.WalkToArc(MarginSafe, dude.Direction);

        }
        /// <summary>
        /// Creates a new control
        /// </summary>
        /// <param name="DataElement">The hidden data element</param>
        public LightsOut2FullScreen()
        {

            // based on http://www.cjcraft.com/Blog/PermaLink,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx

            // what happens in beta2 when the anonymous types are immutable? :)

            
            var usersettings = new __Type1 { x = 5, y = 5, tile = new __Type2 { w = 64, h = 64, cold = 0.8 } };
            var search = Native.document.location.search;

            if (search.StartsWith("?"))
            {
                var values = from i in search.Substring(1).Split('&')
                             let kvp = i.Split('=')
                             where kvp.Length == 2
                             select new { key = kvp[0], value = kvp[1] };

                var _x = values.FirstOrDefault(i => i.key == "x");
                if (_x != null) usersettings.x = int.Parse(_x.value);

                var _y = values.FirstOrDefault(i => i.key == "y");
                if (_y != null) usersettings.y = int.Parse(_y.value);
            }

            var a = new Array2D<IHTMLDiv>(usersettings.x, usersettings.y);
            var m = a.ToBooleanArray();



            var r = new System.Random();

            m.ForEach(
                (x, y) =>
                {
                    m[x, y] = r.NextDouble() > 0.5;
                }
            );


            var canvas = new IHTMLDiv();

            canvas.className = "canvas";


            // does it work???
            //canvas.MakeCSSShaderCrumple();

            canvas.style.overflow = IStyle.OverflowEnum.hidden;
            canvas.style.backgroundColor = Color.Black;


            var canvas_size = new __Type1 { x = ((a.XLength + 1) * usersettings.tile.w), y = ((a.YLength + 1) * usersettings.tile.h) };

            canvas.style.position = IStyle.PositionEnum.relative;
            canvas.style.border = "2px solid black";
            canvas.style.width = canvas_size.x + "px";
            canvas.style.height = canvas_size.y + "px";

            var canvas_bg = new IHTMLDiv();
            //var canvas_bg_tween = new TweenDataDouble();

            //canvas_bg_tween.Value = 1;
            //canvas_bg_tween.ValueChanged += delegate { canvas_bg.style.Opacity = canvas_bg_tween.Value; };

            new HTML.Images.FromAssets.background().ToBackground(canvas_bg.style);

            //canvas_bg.style.backgroundImage = Assets.Default.Background.StyleSheetURL;
            canvas_bg.style.SetLocation(0, 0, canvas_size.x * 2, canvas_size.y);

            canvas.appendChild(canvas_bg);


            Action<int, int> UpdateColor =
                (x, y) =>
                {
                    var n = a[x, y];

                    if (m[x, y])
                    {
                        new HTML.Images.FromAssets.vistaLogoOn().ToBackground(n.style);
                        //n.style.backgroundImage = Assets.Default.LogoOn.StyleSheetURL;
                        //n.className = "on";
                    }
                    else
                    {
                        new HTML.Images.FromAssets.vistaLogoOff().ToBackground(n.style);
                        //n.style.backgroundImage = Assets.Default.LogoOff.StyleSheetURL;
                        //n.className = "off";
                    }

                };

            Action<int, int> ToggleDirect =
                (x, y) =>
                {
                    var n = a[x, y];

                    if (n == null)
                        return;

                    m[x, y] = !m[x, y];
                    UpdateColor(x, y);
                };

            Action<int, int> Toggle =
                (x, y) =>
                {
                    //Console.WriteLine("click at: " + new { x, y } + " = " + m[x, y]);

                    var f = ToggleDirect.WithOffset(x, y);

                    f(-1, 0);
                    f(0, -1);
                    f(0, 0);
                    f(0, 1);
                    f(1, 0);
                };


            var info_stats_clicks = new IHTMLDiv();
            var info_stats_clicks_count = 0;
            var info_stats_off = new IHTMLDiv();
            var info_stats_on = new IHTMLDiv();

            Action info_stats_update =
                () =>
                {
                    info_stats_clicks.innerHTML = info_stats_clicks_count + " clicks made so far";
                    info_stats_on.innerHTML = m.Count(i => i) + " blocks are on";
                    info_stats_off.innerHTML = m.Count(i => !i) + " blocks are off";

                };

            var info_stats = new IHTMLDiv(info_stats_clicks, info_stats_off, info_stats_on);
            info_stats.className = "info";


            a.ForEach(
                (x, y) =>
                {
                    var n = new IHTMLDiv();

                    n.style.left = (x * usersettings.tile.w + usersettings.tile.w / 2) + "px";
                    n.style.top = (y * usersettings.tile.h + usersettings.tile.h / 2) + "px";
                    n.style.width = usersettings.tile.w + "px";
                    n.style.height = usersettings.tile.h + "px";
                    n.style.position = IStyle.PositionEnum.absolute;
                    n.style.overflow = IStyle.OverflowEnum.hidden;

                    //n.style.border = "1px solid black";
                    n.style.cursor = IStyle.CursorEnum.pointer;

                    canvas.appendChild(n);

                    var tween = new TweenDataDouble();


                    tween.ValueChanged += () => n.style.Opacity = tween.Value;
                    tween.Value = usersettings.tile.cold;

                    n.style.Opacity = tween.Value;

                    n.onmouseover += delegate
                    {
                        tween.Value = 1;
                        //canvas_bg_tween.Value = 0.5;
                    };

                    n.onmouseout += delegate
                    {
                        tween.Value = usersettings.tile.cold;
                        //canvas_bg_tween.Value = 1;
                    };

                    n.onclick += delegate
                    {
                        info_stats_clicks_count++;

                        Toggle(x, y);


                        info_stats_update();

                        new click().play();
                    };


                    a[x, y] = n;

                    UpdateColor(x, y);

                }
            );

            var ani = new Timer(t =>
                               canvas_bg.style.left = -(int)System.Math.Floor((double)((IDate.Now.getTime() / 75) % canvas_size.x)) + "px");




            var info = new IHTMLDiv();

            info_stats.style.Aggregate(
                    s =>
                    {
                        s.backgroundColor = Color.Black;
                        s.color = Color.White;
                        s.padding = "2em";
                        s.fontFamily = IStyle.FontFamilyEnum.Tahoma;
                        s.Float = IStyle.FloatEnum.right;
                    }
                );

            var info_header_text = "Lights out 2";

            Native.Document.title = info_header_text;
            Native.Document.body.style.backgroundColor = Color.Black;

            /*
            info.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h1, info_header_text));

            info.appendChild(new IHTMLAnchor("http://www.cjcraft.com/Blog/PermaLink,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx", "based on SilverlightsOut"));
            info.appendChild(new IHTMLBreak());
            info.appendChild(new IHTMLAnchor("http://www.cjcraft.com/Blog/CommentView,guid,5c35b1f1-dc66-4d85-ac04-22fc97503d4a.aspx", "cjcraft blog post"));

            info.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.p,
                @"Lights out is a one player puzzle that is played on a 5 by 5 grid of squares in which every square has two states: on and off. The game starts off with all squares off, where the goal is to turn on every square. By selecting a square, all the surrounding squares' (up, down, left, right) state is turned toggled. For example, on a 3 by 3 grid of squares with all squares off, if the center one is selected, it will turn 'on' the 4 up, down, left, right squares from it."));

            info.appendChild(new IHTMLDiv("Mozilla based browsers seem to suffer in performance while animating contents under semitransparent elements."));

            info.appendChild(new IHTMLButton("Animate background").Aggregate(btn => btn.onclick += delegate { ani.StartInterval(50); }));
            info.appendChild(new IHTMLButton("Freeze background").Aggregate(btn => btn.onclick += delegate { ani.Stop(); }));
            */

            ani.StartInterval(50);

            info.appendChild(info_stats);
            info.appendChild(canvas);

            info_stats_update();


            info.AttachToDocument();

            new reveal().play();
        }
        /// <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)
        {

            //page.body.css.after.contentImage = new HTML.Images.FromAssets.Anonymous_LogosSingle();

            var s = new ISVGSVGElement
            {

            };

            var f = new ISVGForeignObject().AttachTo(s);
            //requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">

            //f.setAttribute("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Extensibility");

            // http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/
            // http://stackoverflow.com/questions/11194403/svg-foreignobject-not-showing-in-chrome
            var div = new IHTMLDiv
            {
            };

            var divbody = new IHTMLDiv
            {
                innerHTML = "I like <span style='color:white; text-shadow:0 2px 2px blue;'>cheese</span>"
            }.AttachTo(div);
            // https://groups.google.com/forum/#!topic/svg-edit/60HICxGWFNE
            // http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement

            // http://css.dzone.com/articles/securing-pixel-data-svg-and
            // view-source:http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-transform.svg
            // http://stackoverflow.com/questions/6849192/what-can-be-rendered-in-foreignobject-element-when-svg-is-embedded-in-html5
            new StockToolboxImageForWebGLComponent().AttachTo(divbody);

            new Anonymous_LogosSingle().AttachTo(divbody);

            div.style.fontFamily = IStyle.FontFamilyEnum.Verdana;
            div.style.fontSize = "40px";
            div.style.display = IStyle.DisplayEnum.inline_block;

            div.AttachToDocument();

            //page.body.css.before.content = new { div.clientWidth, div.clientHeight }.ToString();



            #region do
            new IHTMLButton { "do" }.AttachToDocument().WhenClicked(
                button =>
                {
                    //div.querySelectorAll("img").WithEach(
                    div.ImageElements().WithEach(
                        q =>
                        {
                            q.src = q.toDataURL();

                        }
                    );

                    button.Orphanize();

                    //s.width
                    //s.setAttribute("width", div.clientWidth + 0);
                    //s.setAttribute("height", div.clientHeight + 0);

                    s.width = div.clientWidth;
                    s.height = div.clientHeight;

                    div.AttachTo(f);


                    //page.body.css.before.content = xmlstring;




                    // var data =
                    //"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
                    //  "<foreignObject width='100%' height='100%'>" +
                    //    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                    //      "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
                    //    "</div>" +
                    //  "</foreignObject>" +
                    //"</svg>";

                    //                    var ss = @"<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'>
                    //<foreignObject width='100%' height='100%'>
                    //<HTML xmlns='http://www.w3.org/1999/xhtml'>
                    //<BODY style=' font-size: 30px;'>
                    //This is <span style='color: green'>HTML</span>.
                    //An img: <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH2wUDABwN9r5HMgAAFv1JREFUaIG9mnlgVNXZ/z937txZk5kkk2SSTBZCNghJWMJi0FYioiioUGQXEF+1VWgrUvVV+kNcXgVXtIUCtYIbFOSt1gKFaJFFElYDhEAgK9n3ZSazz9z7/hEJ0Gor1P6ev+6cc8/zPN/7nPM833POCPwHJDcuNDJEr7zc4QpMbHUErE6frNZLqkCyRVOiAnePJ5ja4QpGuP2yWlEgK1ZvD8pyZ6hG/LzdL/53SW1P17XaFH4o53OsGE1Gw4ctjmBes90f5fDKqkt9Y5ONzBkRzqclPZxudJObYECnFrCZJTwBhd1lDsanhTDUpqfFEWitbPVs3F7S8wwgX2kjNzn8w4DXYzzV6J76HwFywwDTmFaHZ49RI5oDikJFm5ep2WaSLRpO1Ln52wUHggCCIGAxiuSnhhBvlrjQ5sXhlQnKkDfAQGOPn3PNHvLTQjnZ4KprcgSCKgHxhtvujX7gZ4u0sbGxDE4bKLv9sviDArkjFW2kOXyFVq16JMIomtt6A3gDCkFZoaHHT48niCxDU6+fTmeQmFA14QY1na4ALY4AAy0axqWGkBalZddZO0NidNR3+/hbuRO3vy8YTzzxBC+//DKiKNLY2EjqgIRvBaK+XhD/71Zrdm6S4f3ievews80eKju8HKtzEaYXGW7TMzrRwNsH2wnICgCSKCCpVQyJ0TIiPpwIvciFdi8fn+zm3SOdAJh0Il9eAQJg9uzZiGKf30ePHiVMr3Jf2f9vAfnlrXGJ2TZp6+fnHYO/uOAgxaIlNVLL6CQD3oDCiToXv/2qnXCDSHtvAAXwBxXqu3xkRGl5ZmcTADenhLBlXhJ/Ot3Dhye6CNGocP2dk5IkAeD1elm8eDExoeojTfbADwNklFX6VVGNa/CpRjf35YZzptnDn0p66HBeNqBVC9yUbGTyEBM7z9o52+yhrNXLoGgtZ1s8NNv9+IMKr+xtZfntMdw40MjvDnVgkK4Gc+7cObKysvjss8/obmuSQ6OkR67H53+QFyfHj/79zETP/FERSm6CQQEUUSUosSZJiTSqlYdusCjhelEBFECxmSVl2QSrcuSxNOX5iTHKcJteWXJzlCKJgrJ6ik1JDNcob9wTpyybYFU0akG5fZCpfyygaLVaZenSpQqgDLXp3/8uv651sQs7Hhp4vrDamebxy/woJQRriJqKDh8lTW7uHmJCr1HRosSw7NPzpFmNDI3V093dTk6MlhiTRE2njxHxep7Z2YRaFBifFsKvdzXzh1kJrCvsINIocqLezcVOX79RSRTItGrPnmr0ZH0D8B/kH1b/P5NXp2c8UdEtzXrnUD0DLVpuSQuhwxlkXWEHj/04Cp0kMWjuq6RMe5qmHjeWAVk8+9uPyL91EhUHt/ObA63MGxmOAqw91MHX9S7mj4zAG1TY8nUXT4+P5p4sM+F6kaIaF9GhagZF63huYiyThpjrcuO19Z+f7y3/t4DkgvT4mo0Hbrh3EZveWcfDeRb2VvRyssFNg92PxahhwuPv4E8cw649BYSEhLBq1SrcXh9ZY24mXg+P/343mVYdJY0ePj3TgwK0O4MsvimS9UWdfFXtJEwvMiHDxP2jwrl3aBg7ztpZX9RBqEYV+5Oc8Nk3DjSEfFpi//zv/VN9i8/fKr9fv2jd7iOlHCg8zN0jBwAgqQQiDCLP3GrlfKuPRtGKy+1mx44dRERE8JOf/IQ1a9YgaTTIA/IYmWDgQpuXHWft/XoPVvaiEQUe+3EkjT1+3jncSUO3D1EloFELRIX05aPdZXZKmtzCkBj9r9bPsD1zXRE5/uYDzxf22h5z+hUulJ5iZkwtfyzuIigrGLUiTfYAt6YbGTDhv9DoQyguLiY8PJzz588TGxvL8uXLKTh4hGcnxDImTiHOLBFUYLBVx8LREbT2BvHLEGeSKKxx0uEKkp8agkoQyEs28pdSO5IocP/oCHRqFRa9dOOASMMXX5bbG64pIqm3zH7GkphGZmYmVcUH6Xb5SY/SMnmImTC9yMSMUML0IuEGLZIkUVdXR35+PkajkYSEBF5//XW+2PslY2ctpd0ZYPX+Np6fGMPy26zcNDCEZ3c3o1cLjEsNAeBci4f1RR0AGCQVM4aFUdftp+abBKCVBJ3f73uSK5LVv6wjt+VYkxsrzskR4aniyfY/kBIXQaSxkxuSDH10w6lGo+7TF3S0c6T8LJs3byYQCPDCCy+gUqlobW3l7bffZs/WdzlaWoNBc/n7rS9s58cpRu7MNFHR7gX6stR9ueH977Q7A+QNMDLYqutvG2YzhF7p57+MSJTov3/fllckq8pFe/AES+4dhUoFFqMalQCDrlAedHbxox/9iM/2bOa1zXP57/+ZwzPPPMPRo0eJ1Mo8OjTAmCQD8WaJqg4fX1b08sHxLhaOjuj7+t8AbLb7qe/2AyArEG4Q0aoFNOLlapEYoZnw26m2+d8JZNWqVVchvXNIaERDj5/Fjy4kqWgYzUU7r1KouqISCYLA4cOH2V+zgj279pI4toOnnnqKnpY6RnX9hcp2Nw7BxB8em0G5J4bW3r650eroYwSxJom4b6j9B8f7tiR2T5Ctxd2kRWpptPsv2wJizJr/+k4gbrfbW1BQEHfpd6Pdnzo128z/3BKJrbUItXQ5PwT9Ms5uL64eD452F/VVVax6+SUq95tIGRxGT6mN5Y8/QuG2t3EakzjgTiMgmRgwMJlfvb2Zs8oAJI0GZ3gWqhArApCXZABgf2Uvaw+1E6YXGWjRICsKkYarV4IgoLn03N/z0ksvWW677baw3NzcqqKiIsOl9n3lvab6ZhcTB+pJTDbj9QQpP9+J7JeRAzIarRq300dbvYPi1meZFQWDrXpEUy4HTtfQ2etEiMtk4ortONwBHrkxko7TnxM6cQkb//gJt4wfjycqk4FjEmg5/EecwW4AfEGFkg4NA0bP4HHOsmD1J+TEGbkxWd8PxBqqHjFnbFjS5sLui+qHH35YysvLs1it1q7c3NzOkydPDjWbzbXHjx+PLfr1HTdFCcGY+EQTWoOEooAoQrTVSFuLC0EQ8PmCBFAR1OtoOXmRnCmZ7PVlMrymlPE5Gfx4QCvVtdUMuiWKrIRw0oflEWa2Emg4R6NLR2xsLJkjbsAw/i4Sh9+NeOh+hLNtKIrC9DkLMN/5GF1NmzAaP+eZ3e3sXjEdY+sxZCWI2ye3ZUcYboDui6oNGzb4Fy5c2BwTExNz7NixeJ1OV+f1ekPPbnph1qAozeYwozRQZ9QgCAKCAM3NHgIBmZBQCa/Lj1YvotGrCYvQogs3Uu1O4siRYkrM41l7qJM3dpbhkvXMmnI3w0bejEUlIkYlo4gasrOGEB8fz6lTp5C0enSxKUybMx9FUZAkifsXL0UdaqGmvgm7w4HT7abCchOZiz4kMjYDhzdY/vSOxu0A6pUrV5ozMjLC9Xq9prq62lVTUxOXmpQUItUdf8gn+NTRyZfToKwoGEMlQo0SLY29DBsTcxXt1CUMRdDoSR8xiC/L2pl05928ssnLwYCNLVvL8CoiQtCPSVfOgLSv0ZstfPLJJzzwwAP9OsZPuB2z2YzL5aK7u5uoqCjmzZvHG2+8gcViQRZEtMnDiX/kfYKbnxo76fhW086Sni61wWDQWK1Wv9Pp1CUlJaU7HA512eqFj0QZlcF+d18U+heUSiQlwYJaG4Ik1aMgI6nUREbEootIQhk1DdHVQ0RbLX4liD4jl8eWJLDpvfc5efYCDY1Nl5Xt/rL/8ZFH+rYYiqKwZs0aenp6AKisrCQtLY3Dhw8DYDKZuOOOOwAB0RhG4r3L1Unv/m8M0KX6xS9+0VZfX9/W1dXl8nq9wdDQ0IGDI413G3QG9Pr+pIBBqychZSSWkVNQjZrLwCm/xmKKJH7wOMyjZ6CZvAxN4ggaQ9KoCh+NJfPH6Lsv4vUFiLPFc+ToMZYvX86uXbs4dOgQI0aM6Nc9bdo0urq6EASBtrY2VKq+ZLp7925QFAoLC1EUheeee46oqKj+cSpDmLD2cMc5+IZrzZ07N85ms5l8Pp8SCAQ00Z7aGebk4UKoyYxZpybUHEXYwDHoMsehHZxPcYufQTffjXHgaFQRNtqtuTR09PDlwUMgSuQMH05YXBJelQadTkesLZ6SkhJSU1OxWCzYbDY6OjqYMmUK69ato7KyEo/bTU7WYO655x7mzr2PDRs2UFxczNSpU4mNjWXLli3MnDmTnJwc/H4/gUAAUdISFxf35Y4dOy6qt23bJvp8PlmW5V6/3094eHilMWlQ0JGUr96xfgNBn5oQKQRTs4zv9Am+qtrOr1auRBDVYE3nSGU7wbYabrzxRoYOG4bwzVwsKirC4/GQkJCAy+vH5XJRXV3NW2+9hTU6GrPJhMlkwmAwsHPnThYvXkxQUaEEZOwOB15vH1359NNPWbhwIQAaTd8MkSSJmpoae3t7+/vp6em5wAF1W1ubftGiRQ0A77zzTsSoUaMMsjmh3mRLHjDalkxCRAQIAucaGqjs6GDijBmkpqbicDior69n9Jgb0Ov1qFQqSktL2bVrF2azmby8PEaNHIlaVBEdZeGll1eh1+t59dVX0ev1dHR0sGTJEvbv38/ChQvJyckBQBRF9u7dC0BqaioZGRlER0djMBjQ6S7ToZiYGOOaNWveOH36dCuAatGiRb2XOgVB0LW0tOhPOELeVICSQICm5mZKKirYZbczfMECpsyY0ZehdDoGDx6M0WikoaGBtWvXUlRUxNw5c5g/bx7p6ekEZZl9Bw7idHlISUmhp6eH8PBw0tPTqaioQJZlysrKEEWxP5KlpaVs3bqVzMxMNm/ezO23344oikiSRE9PT38i0Ol04uTJk6cUFBQ44YrKvmLFCtXQoUO73W63Th0a+pkc8L/1wLJlfPjkk0Q4HAzx+YiL62Muvb29+Hw+nE4nHo8bv8/H3LlzMBiMCIJAZ2cn+/btQ6fTkZSUhNlsJj8/nzNnzlBdXU1SUhLTpk2joqKCuro6BgwYgEqlwuVyMXPmTEpLS/uypFqNXt9XyWVZxmw2o9VqaW5uJjw8nPj4+MnAm38PRKaPe9WsWLFCbm6ov6hSqZLmv/YaSxcswN7RwQM2G8gyRoOOEKMBo9HYn2Hq6+spLT3L+fPn0Wg0jBw+nJKPP2HP7gIWnT7JwoULyc/PJyEhAY/H802BFSgrK+PBBx+kvb2dJUuWUFpaysqVK9Hr9WRlZSGKIrfddhsOhwOLxYJOpyMmJoaWlhZKS0sbZ8+ebd2yZUsL3yUrV640l5aWLm9ubtp7+PCB7oSEeKWgoEC5Utxut1JZWalUV1crpaWlSlNTk9Lb26t88e4m5dTPHldOPfgL5dS8nykrZs1XsrOzlZ///OdKU1OT4na7lfr6emXSpEmKXq9XcnJylPj4eMVqtSrZ2dmKw+G4ys6zzz6rSJKkuN3uq9oPHjz4eP+y+E4kV8i5c9s3iaKyoKGhl/Lydpqbm4mOtlJTU87Bg8f53z++gNcu0/3STlCrUZmMBBqa0Fij8ba0UuuXmLZzE1nZ2ezfvx+TyYTf78fj8TB48GCOHTvGsmXLiI6O5sUXX0SlUvUfk7rdbvbt28eCBQtoamrqbwcoLy//W3p6+q3wPbe6W7dufTg01FKRnZ3BnDkPU1R0mrlz78dqTeTQoWK6PvmauPQYnN1t+C9eRPIHCA3I6LvtRCcm4m93MjEpi/b2dsxmM4FAoH9q6XQ6amtr2bhxI6tWrUKSpKucdTqdzJw5E4vFwoEDB/rbvV4vKpWqv6p+LyArVnzsKy7ufVsUNfh8bvLzJyAIBlyuvuHioRq89R0MuWkUiYlJpERGk5KaSnJsHPqAzMD4ZFw+7zf0oq8OSJLE+vXrqaqq4r333vsHm0ePHuXIkSM8+uijOBwOLly4wO9+97v+fq1Wi1qt7sfwvY+D3G5/RGjoUA4eLKSqqgqVSkVERAQaUY0mJBz501J8Lg8mkwm1y90/rtsVwGgM4XBLFZMmTbpK5/bt2wFYt24dJ0+eBPr4lizLvPXWW4wbN46PP/4Y6Mta48ePR5YvnwsbjUaV1WrVXxMQnU4XVKlEhgzJoaOjg/LycjQaDWNikpERCa1zoG3uRau5zM+a7L34gzo+rShGMuiZOHFif9+ZM2coL798aNjZ2Xe10NjYyHPPPceWLVvweDxX+eBwOGhubu4H093dfaalpcV5TUDi4+PH1tTUtISFhXHTTWMoLCzE6/VyR3I2Hd19NTU0NKT//RaHk/O1LkI0ZracP8r48eP7K/Pp06cZOnQowWCQ3/zmN8THx/fXi9WrV/P888+jKFcf8b755pt89dVXREdHU1dXhyzLmEymQUOGDNHANRyZhoSEhEyePHmKVqtVm0wBamtLKD52jgciMnF0e2h2dNDpctMcq6cRPxUnG8hMGcRfa87w+5IDrFq1ioyMDL744gtmz57N0qVL+eijj7j55puZOnUqZrMZWZaZP38+RqOR1NRUOjs7SUpKIj09nQ0bNhAbG0tKSgo6nY66ujqXIAgXNRpNcUFBQd33vh+56667Yru6uoJer7cyJibLcu+96rA5sxTa/1ZJ2M4AzlYVza09pM1LQ5RVaKvUuPx+Xjj8F8aOHUtOTg6yLLN9+3b27t2LJEn09vZiNptJTk6mra2N1157jZ6eHt577z3mzZvH008/jc1mIy8vD1EUyc/PB/rokUaj6V29evWEpKQk9TVFxGQypdrt9q8KCgoOZ2QMynjrrXejkjQ6lBA1Hq2AkGQi4oYkbBPS8fZ4UF9wsXjvR5R7unjjjTew2Wx8/fXXDB8+nPDw8GBXV1eDw+GoLS0tDf71r381rlq1yilJkpSbmyssW7YMQRDIy8vDaDSSnZ2NKIrIsozb7UaW5d76+vq/7N69u+iVV16pheu4DN28efOgsWPHfnTw4MERGzZswN3ehcfrpaapAZPBiFZUow2ALxgASygrVqwgMzOT5ORkNmzYwO233+632+0/HTdu3MZLOgsKCn5ZWFj40bBhw8alpaV90NjY+ITNZhsaHR09s7u7O1QURb/NZhMkSVK73W4OHTr0pwkTJky7Vt/75eGHHzbU1taeVxRFcTgcSiAQUDo7O5Xz588rZWVlSkNDg9LQ0KCcO3dOOXXqlFJdXa00NDQop06dUnw+n1JRUaGcPHnyt//Mxrp165679JyRkRG6Z8+elw4dOrRv27ZtE1pbW7tkWVZOnDix5rpBADz00EOjqqur7Zc4j8fjURobGxWv16s4nU7F7/f38yBZlpWurq6ruNHp06crjh8//vG12Jw+fbrm1VdfvQvgz3/+8/QLFy70bty48Zf/FhCAzz///JQsy4rb7Va8Xq/i9/sVt9utBAKBfof9fr/S2dmpeDye/rbCwsLPnnrqqdc3bdq09PXXXx9+vfa3bdu28V+/9T3kxIkTa2prax3BYLDfUbvd3h+FS9PuSnE6ncH333//TvqSi3D//ffPul77EyZMiPu29mu6QwQYNmyYMzo6Okan02X4/X5kWcbj8WAwGHA6nUBferxENfx+PwcOHNhTVlZWtnfv3hKA9vb2Srv9Wy7Lv4dUVVU5fhAgO3fuvJifn/+Qy+UKUxTlbCAQMDqdTpdWq9UEAgGVy+VClmXq6upaFEUJMZlM7Ny5c+OTTz7Zz/iuF8Q/k2sGAqhlWT4niuJJh8Pxjl6vnxUIBN7t7e319Pb2prjd7p66urrjLS0tF/1+v7uqqmpvVlaWae3atX/+oZ2/Uq77TzXjxo3T7du3z/PBBx88mJiYGKkoSk9VVdWYYDBYo9Foiuvr6y/a7Xaroiil06dPf23UqFHXvS7+v8ldd92VeN9992UAqp/+9Kcz/77/xRdfvOs/7cP/ATLDlgAd+zZTAAAAAElFTkSuQmCC'/>
                    //
                    //
                    //</BODY>
                    //</HTML>
                    //</foreignObject></svg>";



                    //var img = new IHTMLImage();
                    ////var url = "data:image/svg+xml;base64," + Convert.ToBase64String(Encoding.UTF8.GetBytes(s.AsXElement().ToString()));
                    //var url = "data:image/svg+xml;base64," + Convert.ToBase64String(Encoding.UTF8.GetBytes(xmlstring));
                    ////var url = "data:image/svg+xml;base64," + Convert.ToBase64String(Encoding.UTF8.GetBytes(ss));
                    //img.src = url;

                    //img.InvokeOnComplete(
                    //    delegate
                    //    {
                    //        page.body.css.after.contentImage = img;
                    //        page.body.css.after.style.border = "1px solid red";

                    //    }
                    //);

                    page.body.css.after.contentImage = s;
                    //page.body.css.after.style.border = "1px solid red";

                }
            );
            #endregion


        }
        public ConvertASToCS()
        {
            Native.Document.title = "ConvertASToCS";

            Native.Document.body.style.padding = "0";
            Native.Document.body.style.margin = "0";


            var cookie = new Cookie("DeclaringType").BindTo(DeclaringType);

            #region Title
            var MyTitleText = new IHTMLDiv("This tool allows you to copy various parts of flash doc html file in and generate C# headers.");
            MyTitleText.style.paddingTop = "12px";
            MyTitleText.style.paddingLeft = "15px";
            MyTitleText.style.fontFamily = IStyle.FontFamilyEnum.Tahoma;
            MyTitleText.style.fontSize = "13px";


            var MyTitle = new IHTMLDiv(MyTitleText);
            MyTitle.style.background = "url(" + Assets.Path + "titleTableTop.jpg) repeat-x";
            MyTitle.style.height = "44px";
            MyTitle.AttachToDocument();

            var MyTitleMiddleTextFloat = new IHTMLDiv();

            MyTitleMiddleTextFloat.style.paddingTop = "3px";
            MyTitleMiddleTextFloat.style.Float = IStyle.FloatEnum.right;

            var MyTitleMiddleText = new IHTMLDiv(new IHTMLLabel("DeclaringType: ", DeclaringType), DeclaringType);
            MyTitleMiddleText.style.paddingTop = "3px";
            MyTitleMiddleText.style.paddingLeft = "15px";
            MyTitleMiddleText.style.fontFamily = IStyle.FontFamilyEnum.Tahoma;
            MyTitleMiddleText.style.fontSize = "20px";



            var MyTitleMiddle = new IHTMLDiv(MyTitleMiddleTextFloat, MyTitleMiddleText);
            MyTitleMiddle.style.background = "url(" + Assets.Path + "titleTableMiddle.jpg) repeat-x";
            MyTitleMiddle.style.height = "31px";
            MyTitleMiddle.AttachToDocument();

            var MyTitleShadow = new IHTMLDiv("");
            MyTitleShadow.style.background = "url(" + Assets.Path + "titleTableBottom.jpg) repeat-x";
            MyTitleShadow.style.height = "5px";
            MyTitleShadow.AttachToDocument();
            #endregion



            DocumentBody = new IHTMLDiv().AttachToDocument();
            DocumentBody.style.padding = "1em";
            DocumentBody.style.backgroundImage = "url(assets/ConvertASToCS/flash_logo.png)";
            DocumentBody.style.backgroundPosition = "right top";
            DocumentBody.style.backgroundRepeat = "no-repeat";


            a = new IHTMLTextArea().AttachTo(DocumentBody);
            a.style.backgroundColor = Color.Transparent;
            a.style.border = "1px solid gray";


            Func<IHTMLImage, string, IHTMLAnchor> CreateButton =
                (img, text) =>
                {
                    img.style.border = "0px";

                    var htext = new IHTMLAnchor("#", img, new IHTMLSpan(text)).AttachTo(MyTitleMiddleTextFloat);

                    htext.onclick += e => e.PreventDefault();
                    htext.style.margin = "1em";

                    return htext;
                };


            AddEvents(CreateButton((Assets.Path + "ak590dyt.pubevent(en-US,VS.80).gif"), "Events"));
            AddConstants(CreateButton((Assets.Path + "ak590dyt.pubproperty(en-US,VS.80).gif"), "Constants"));
            AddProperties(CreateButton((Assets.Path + "ak590dyt.pubproperty(en-US,VS.80).gif"), "Properties"));
            AddMethods(CreateButton((Assets.Path + "deshae98.pubmethod(en-us,VS.90).gif"), "Methods"));
            AddAny(CreateButton((Assets.Path + "deshae98.pubmethod(en-us,VS.90).gif"), "Any"));
            AddProxy(CreateButton((Assets.Path + "deshae98.pubmethod(en-us,VS.90).gif"), "Proxy"));
        }
        public MatrixTransformBExample()
        {
            var x = 400;
            var y = 200;
            var w = 200;
            var h = 200;

            var ro_matrix = new IHTMLDiv();

            ro_matrix.style.backgroundColor = "#8080ff";
            ro_matrix.style.SetLocation(x, y);
            ro_matrix.AttachToDocument();
            //ro_matrix.style.paddingLeft = w + "px";
            //ro_matrix.style.paddingTop = h + "px";
            var ro_matric_content = new IHTMLDiv();

            ro_matric_content.style.backgroundColor = "#0000ff";
            ro_matric_content.style.SetSize(w, h);
            ro_matric_content.AttachTo(ro_matrix);


            var r_matrix = new IHTMLDiv();

            r_matrix.style.backgroundColor = "#80ff80";
            r_matrix.style.SetLocation(x, y);
            r_matrix.AttachToDocument();

            //r_matrix.style.paddingLeft = w + "px";
            //r_matrix.style.paddingTop = h + "px";
            var r_matric_content = new IHTMLDiv();

            r_matric_content.style.backgroundColor = "#00ff00";
            r_matric_content.style.SetSize(w, h);
            r_matric_content.AttachTo(r_matrix);


            #region blue rotation
            var jo = new IHTMLDiv();

            jo.style.background = "blue";
            jo.style.SetLocation(x - w / 2 - 4, y - h / 2 - 1, 8, 2);

            jo.AttachToDocument();

            var joh = new IHTMLDiv();

            joh.style.background = "blue";
            joh.style.SetLocation(x - w / 2 - 1, y - h / 2 - 4, 2, 8);

            joh.AttachToDocument();

            jo.BlinkAt(400);
            joh.BlinkAt(400);
            #endregion

            #region black origin
            var zo = new IHTMLDiv();

            zo.style.background = "black";
            zo.style.SetLocation(x - 4, y - 1, 8, 2);

            zo.AttachToDocument();

            var zoh = new IHTMLDiv();

            zoh.style.background = "black";
            zoh.style.SetLocation(x - 1, y - 4, 2, 8);

            zoh.AttachToDocument();
            #endregion




            var ro = new IHTMLDiv();

            ro.style.background = "red";
            ro.style.SetLocation(x, y, w, h);
            ro.style.Opacity = 0.3;
            ro.AttachToDocument();



            var info = new IHTMLSpan { innerText = "MatrixTransform" };


            info.style.SetLocation(x, y + h, w, h);

            info.AttachToDocument();

            var at = new IHTMLDiv();

            at.style.background = "yellow";
            at.style.SetLocation(x - w / 2, y - h / 2, w * 2, h * 2);
            at.style.Opacity = 0.5;
            at.AttachToDocument();



            var r = new IHTMLDiv();

            r.style.background = "black";
            r.style.SetLocation(x, y, w, h);
            r.style.Opacity = 0.3;

            r.AttachToDocument();
            r.style.cursor = IStyle.CursorEnum.pointer;

            #region blue origin
            var o = new IHTMLDiv();

            o.style.background = "blue";
            o.style.SetLocation(x + w / 2 - 4, y + h / 2 - 1, 8, 2);

            o.AttachToDocument();

            var oh = new IHTMLDiv();

            oh.style.background = "blue";
            oh.style.SetLocation(x + w / 2 - 1, y + h / 2 - 4, 2, 8);

            oh.AttachToDocument();
            #endregion



            #region black rotation
            var jzo = new IHTMLDiv();

            jzo.style.background = "black";
            jzo.style.SetLocation(x - w / 2 - 4, y - h / 2 - 1, 8, 2);

            jzo.AttachToDocument();

            var jzoh = new IHTMLDiv();

            jzoh.style.background = "black";
            jzoh.style.SetLocation(x - w / 2 - 1, y - h / 2 - 4, 2, 8);

            jzoh.AttachToDocument();


            jzo.BlinkAt(400);
            jzoh.BlinkAt(400);
            #endregion


            var m = new MatrixModifiers();

            var InteractiveSetOrigin_x = 0;
            var InteractiveSetOrigin_y = 0;

            var InteractiveSetRotation_x = 0;
            var InteractiveSetRotation_y = 0;


            Action<int, int> InteractiveSetRotation = null;

            Action<int, int> SetPadding =
                (ox, oy) =>
                {
                    // -0 ... -w

                    ox += w / 2;
                    oy += h / 2;

                    info.innerText = "padding x: " + ox + " y:" + oy;

                    if (ox > 0)
                    {
                        ro_matrix.style.paddingLeft = ox * 2 + "px";
                        ro_matrix.style.paddingRight = 0 + "px";
                    }
                    else
                    {
                        ro_matrix.style.paddingLeft = 0 + "px";
                        ro_matrix.style.paddingRight = ox * -2 + "px";
                    }

                    if (oy > 0)
                    {
                        ro_matrix.style.paddingTop = oy * 2 + "px";
                        ro_matrix.style.paddingBottom = 0 + "px";
                    }
                    else
                    {
                        ro_matrix.style.paddingTop = 0 + "px";
                        ro_matrix.style.paddingBottom = oy * -2 + "px";
                    }



                    if (ox > 0)
                    {
                        r_matrix.style.paddingLeft = ox * 2 + "px";
                        r_matrix.style.paddingRight = 0 + "px";
                    }
                    else
                    {
                        r_matrix.style.paddingLeft = 0 + "px";
                        r_matrix.style.paddingRight = ox * -2 + "px";
                    }

                    if (oy > 0)
                    {
                        r_matrix.style.paddingTop = oy * 2 + "px";
                        r_matrix.style.paddingBottom = 0 + "px";
                    }
                    else
                    {
                        r_matrix.style.paddingTop = 0 + "px";
                        r_matrix.style.paddingBottom = oy * -2 + "px";
                    }
                };

            m.Visual1.CheckedChanged +=
                delegate
                {
                    r_matrix.Show(m.Visual1.Checked);
                };

            m.Visual2.CheckedChanged +=
                delegate
                {
                    ro_matrix.Show(m.Visual2.Checked);
                };

            m.Debug1.CheckedChanged +=
                delegate
                {
                    if (m.Debug1.Checked)
                    {
                        ro_matrix.style.backgroundColor = "#8080ff";
                        r_matrix.style.backgroundColor = "#80ff80";

                        return;
                    }

                    ro_matrix.style.backgroundColor = "";
                    r_matrix.style.backgroundColor = "";
                };

            Action<int, int> InteractiveSetOrigin =
                (ox, oy) =>
                {
                    var dx = InteractiveSetOrigin_x - ox;
                    var dy = InteractiveSetOrigin_y - oy;

                    InteractiveSetOrigin_x = ox;
                    InteractiveSetOrigin_y = oy;

                    SetPadding(ox, oy);

                    m.TranslateX.Text = "" + ox;
                    m.TranslateY.Text = "" + oy;

                    ro.style.SetLocation(x + ox, y + oy, w, h);
                    ro_matrix.style.SetLocation(x + ox, y + oy /*, w, h*/);
                    o.style.SetLocation(x - ox - 4, y - oy - 1, 8, 2);
                    oh.style.SetLocation(x - ox - 1, y - oy - 4, 2, 8);

                    InteractiveSetRotation(InteractiveSetRotation_x + dx, InteractiveSetRotation_y + dy);
                };

            InteractiveSetRotation =
                (ox, oy) =>
                {
                    InteractiveSetRotation_x = ox;
                    InteractiveSetRotation_y = oy;

                    var ax = x - w / 2 + ox;
                    var ay = y - h / 2 + oy;

                    var bx = x - InteractiveSetOrigin_x;
                    var by = y - InteractiveSetOrigin_y;

                    var dx = ax - bx;
                    var dy = ay - by;

                    var rotation = Extensions.GetRotation(dx, dy);
                    var rotation_degrees = rotation.RadiansToDegrees();

                    var costheta = Math.Cos(rotation);
                    var sintheta = Math.Sin(rotation);

                    var M11 = costheta;
                    var M12 = -sintheta;
                    var M21 = sintheta;
                    var M22 = costheta;

                    m.M11.Text = "" + M11;
                    m.M12.Text = "" + M12;
                    m.M21.Text = "" + M21;
                    m.M22.Text = "" + M22;

                    info.innerText = "rotation: " + rotation_degrees + "° x: " + InteractiveSetOrigin_x + " y:" + InteractiveSetOrigin_y;
                    //Native.Document.title = new { ax, bx, dx, rotation_degrees }.ToString();

                    joh.style.SetLocation(ax - 1, y - h / 2 + oy - 4, 2, 8);
                    jo.style.SetLocation(x - w / 2 + ox - 4, ay - 1, 8, 2);

                    jzoh.style.SetLocation(x + InteractiveSetOrigin_x - w / 2 + ox - 1, y + InteractiveSetOrigin_y - h / 2 + oy - 4, 2, 8);
                    jzo.style.SetLocation(x + InteractiveSetOrigin_x - w / 2 + ox - 4, y + InteractiveSetOrigin_y - h / 2 + oy - 1, 8, 2);

                    var mm = new[]
					{
						M11, M21,
						M12, M22,
						
						0, 0
						//0.838670551776886,0.5446390509605408,-0.5446390509605408,0.838670551776886,0,0
					};

                    var code = @"
			q.style.filter = ""progid:DXImageTransform.Microsoft.Matrix(M11='"" + m[0] + ""',M12='"" + m[2] + ""',M21='"" + m[1] + ""', M22='"" + m[3] + ""', sizingmethod='auto expand');"";
	
			q.style.MozTransform = ""matrix("" + m[0] + "","" + m[1] + "","" + m[2] + "","" + m[3] + "","" + m[4] + "","" + m[5] + "")"";
			
			q.style.WebkitTransform = ""matrix("" + m[0] + "","" + m[1] + "","" + m[2] + "","" + m[3] + "","" + m[4] + "","" + m[5] + "")"";
				";

                    new IFunction("q", "m", code).apply(null, r_matrix, mm);
                    new IFunction("q", "m", code).apply(null, ro_matrix, mm);


                    var r_matrix_adj_x = (r_matrix.clientWidth - r_matrix.offsetWidth) / 2;
                    var r_matrix_adj_y = (r_matrix.clientHeight - r_matrix.offsetHeight) / 2;

                    var ro_matrix_adj_x = (ro_matrix.clientWidth - ro_matrix.offsetWidth) / 2;
                    var ro_matrix_adj_y = (ro_matrix.clientHeight - ro_matrix.offsetHeight) / 2;



                    r_matrix.style.SetLocation(x + r_matrix_adj_x, y + r_matrix_adj_y/*, w, h*/);
                    ro_matrix.style.SetLocation(x + InteractiveSetOrigin_x + ro_matrix_adj_x, y + InteractiveSetOrigin_y + ro_matrix_adj_y/*, w, h*/);

                };



            #region bind InteractiveSetRotation
            at.onclick +=
                e =>
                {

                    InteractiveSetRotation(e.OffsetX, e.OffsetY);

                };

            at.onmousemove +=
                e =>
                {

                    InteractiveSetRotation(e.OffsetX, e.OffsetY);

                };

            at.onmouseover +=
                delegate
                {
                    info.innerText = "Click to set rotation";
                };

            InteractiveSetRotation(0, 0);
            #endregion

            #region bind InteractiveSetOrigin
            m.ButtonClear.Click +=
                delegate
                {
                    InteractiveSetOrigin(0, 0);
                };

            r.onclick +=
                e =>
                {
                    // 0 0 is top left

                    InteractiveSetOrigin(-e.OffsetX, -e.OffsetY);
                };

            r.onmouseover +=
                delegate
                {
                    if (m.Debug1.Checked)
                    {
                        info.innerText = "Click to set padding";
                        return;
                    }
                    info.innerText = "Click to set origin";
                };


            #endregion

            //InteractiveSetOrigin(0, 0);
            InteractiveSetOrigin(-w / 2, -h / 2);

            var f = new Form { Text = "MatrixModifier" };

            m.BackColor = System.Drawing.Color.White;

            f.Controls.Add(m);
            f.ClientSize = m.Size;

            f.GetHTMLTarget().AttachToDocument();
        }
Example #24
0
        //async Task __buttryfly()
        //{ 
        //    //Task.Factory.
        //}

        //async 
        void Spawn(IHTMLElement e)
        {


            Native.Document.body.style.margin = "0px";
            Native.Document.body.style.padding = "0px";
            Native.Document.body.style.overflow = IStyle.OverflowEnum.hidden;

            e.style.position = IStyle.PositionEnum.absolute;
            e.style.left = "0px";
            e.style.top = "0px";
            e.style.right = "0px";
            e.style.bottom = "0px";

            e.style.backgroundColor = Color.FromRGB(209, 245, 245);

            IHTMLElement loading = new IHTMLElement(IHTMLElement.HTMLElementEnum.code, "loading...");

            loading.style.SetLocation(64, 64, 200, 64);

            e.appendChild(loading);

            //await __buttryfly();

            new global::ButterFlyWithInteractiveInt32Offset.HTML.Images.FromAssets.buttryfly().InvokeOnComplete(
                img =>
                {
                    loading.FadeOut();

                    try
                    {
                        //IStyleSheet.Default.AddRule("*", "cursor: none, url('" + new global::ButterFlyWithInteractiveInt32Offset.HTML.Images.FromAssets.nocursor().src + "'), auto;", 0);
                        //IStyleSheet.Default.AddRule("*", "cursor: none;", 0);
                    }
                    catch (Exception exc)
                    {
                        new IHTMLElement(IHTMLElement.HTMLElementEnum.pre, exc.Message).AttachToDocument();
                    }


                    e.style.backgroundImage = "url(" + img.src + ")";
                    e.style.backgroundRepeat = "no-repeat";



                    e.DisableContextMenu();


                    var x = 0;
                    var y = 0;


                    var overlay = new IHTMLDiv();
                    overlay.style.border = "1px solid red";
                    overlay.style.SetSize(64, 64);
                    overlay.AttachToDocument();

                   Native.window.onframe +=
                        delegate
                        {
                            e.style.backgroundPosition = x + "px " + y + "px";

                            overlay.style.SetLocation(
                                // how does this work with the background compiler?
                                // once browser clicks save, visual studio asks if
                                // to accept, and bacground compiler
                                // starts a new compilation
                                // so, the running app could first be able
                                // to inspect, whats new?
                                // and if only the same constant was changed,
                                // it can be discarded. same with comments.
                                x + 67.ToInteractiveInt32Form(),
                                y + 2.ToInteractiveInt32Form()
                            );

                        };

                    e.onmousemove +=
                        delegate(IEvent i)
                        {


                            #region where is the cursor?
                            if (Native.Document.pointerLockElement == e)
                            {
                                x += i.movementX;
                                y += i.movementY;
                            }
                            else
                            {
                                x = i.CursorX;
                                y = i.CursorY;
                            }

                            if (x < -img.width / 2)
                                x += Native.window.Width;

                            if (y < -img.height / 2)
                                y += Native.window.Height;

                            x = x % Native.window.Width;
                            y = y % Native.window.Height;
                            #endregion



                        };

                    e.onclick +=
                        delegate
                        {
                            e.requestPointerLock();
                        };
                });

        }
		public HyperDesign()
		{
			Native.Document.body.style.overflow = IStyle.OverflowEnum.auto;

			var g1 = new ThreeDGroup1();

			//WriteAnimations();

			g1.Images.ToGoogleThreeDWarehouseImages().Animate();


			g1.Frame1.onload +=
				e =>
				{
					g1.Go1.style.color = Color.Blue;

				};

			g1.Go1.onclick +=
				delegate
				{
					g1.Go1.style.color = Color.Red;
					g1.Frame1.src = "http://google.com";
				};

			g1.Container.AttachToDocument();

			var n = new Application();

			n.Container.AttachToDocument();

			n.Read.onclick +=
				delegate
				{
					n.FirstName.value = "John";
					n.LastName.value = "Doe";
				};

			var Items = new IHTMLDiv();

			Items.style.height = "300px";
			Items.style.overflow = IStyle.OverflowEnum.auto;
			Items.style.backgroundColor = Color.System.ButtonFace;
			Items.style.borderWidth = "2px";
			Items.style.borderStyle = "solid";
			Items.style.borderColor = Color.System.ButtonShadow;

			Items.AttachToDocument();

			var List = new List<Employee>();

			n.Add.onclick +=
				delegate
				{
					var i = new Summary();
					var j = new Employee
					{
						Number = List.Count + 1,
						FirstName = n.FirstName.value,
						LastName = n.LastName.value
					};
					List.Add(j);

					Action Update =
						delegate
						{
							i.Number.value = "#" + j.Number;
							i.FirstName.value = j.FirstName;
							i.LastName.value = j.LastName;
						};

					Update();

					i.Delete.onclick +=
						delegate
						{
							i.Container.Dispose();
						};

					i.Container.AttachTo(Items);

					i.Edit.onclick +=
						delegate
						{
							i.Edit.disabled = true;

							var details = new Details();

							details.FirstName.value = i.FirstName.value;
							details.LastName.value = i.LastName.value;
							details.Bio.value = j.Bio;

							details.Container.AttachTo(i.Details);

							details.Discard.onclick +=
								delegate
								{
									details.Container.Dispose();
									i.Edit.disabled = false;
								};

							details.Save.onclick +=
								delegate
								{
									details.Container.Dispose();
									i.Edit.disabled = false;

									j.Bio = details.Bio.value;
									j.FirstName = details.FirstName.value;
									j.LastName = details.LastName.value;

									Update();
								};
						};
				};
		}
Example #26
0
        // vNext should be semi 3D - http://www.freeworldgroup.com/games/3dworm/index.html

        public Game()
        {
            //typeof(ConsoleWorm).ToWindowText();

            var canvas = new IHTMLDiv();

            canvas.style.overflow = IStyle.OverflowEnum.hidden;
            canvas.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
            canvas.style.backgroundColor = Color.Black;
            canvas.AttachToDocument();
            //canvas.style.position = IStyle.PositionEnum.relative;


            new HTML.Images.FromAssets.avatar14683_21().InvokeOnComplete(
                 scull =>
                 {
                     new global::ConsoleWorm.HTML.Audio.FromAssets.applause().play();

                     var zoom = 24;

                     Func<int> RoomWidth = () => (Native.window.Width / zoom).ToInt32();
                     Func<int> RoomHeight = () => ((Native.window.Height /*- scull.height - 16*/) / zoom).ToInt32();

                     var score = 0;
                     var status = new IHTMLDiv("0$");
                     var isdead = false;
                     var paused = true;


                     status.style.color = Color.Green;
                     status.style.fontFamily = IStyle.FontFamilyEnum.Consolas;


                     scull.AttachTo(canvas);
                     scull.style.SetLocation(
                         8,
                         Native.window.Height - scull.height - 8);


                     status.AttachTo(canvas);
                     status.style.SetLocation(
                         8 + scull.width + 8,
                         Native.window.Height - scull.height
                     );
                     Native.window.onresize +=
                         delegate
                         {
                             canvas.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
                             scull.style.SetLocation(
                                  8,
                                  Native.window.Height - scull.height - 8);
                             status.style.SetLocation(
                                    8 + scull.width + 8,
                                    Native.window.Height - scull.height
                                );
                         };





                     Func<Point> GetRandomLocation =
                         () => new Point(
                                 (RoomWidth() - 1).Random(),
                                 (RoomHeight() - 1).Random()
                             );

                     var game_colors = new
                     {
                         worm = new
                         {
                             active = Color.FromRGB(0, 0xff, 0),
                             inactive = Color.FromRGB(0, 0x7F, 0),
                             excited = Color.FromRGB(0xff, 0xff, 0),
                         }

                     };

                     Func<Point, Point> Wrapper =
                         p => new Point((p.X + RoomWidth()) % RoomWidth(), (p.Y + RoomHeight()) % RoomHeight());


                     Func<Apple> CreateApple =
                         () => new Apple
                         {
                             GetRandomLocation = GetRandomLocation,
                             GetZoom = () => zoom,
                             Wrapper = Wrapper
                         }.MoveToRandomLocation();


                     var apples = new List<Apple>
                     {
                     };

                     10.Times(() =>
                         apples.Add(
                             CreateApple()
                         )
                     );

                     apples.ForEach(a => a.AttachTo(canvas));





                     var worm = new Worm
                     {
                         Wrapper = Wrapper,
                         Location = new Point(4, 8),
                         GetZoom = () => zoom,
                         Canvas = canvas,
                         Vector = new Point(0, 1),
                         Color = game_colors.worm.active
                     }
                     .Grow()
                     .GrowToVector()
                     .GrowToVector();



                     Action<int> AddScore = x =>
                     {
                         score += x;

                         if (isdead)
                             status.innerText = score + "$ - Game Over - Enter to continue";
                         else if (paused)
                             status.innerText = score + "$ - Paused - Zoom: " + zoom;
                         else
                             status.innerText = score + "$";

                         worm.Color = game_colors.worm.excited;
                         status.style.color = JSColor.Yellow;
                     };


                     100.AtInterval(
                         t =>
                         {
                             if (paused)
                             {
                                 // slowdown
                                 if (t.Counter % 4 == 0)
                                 {
                                     if (worm.Color == game_colors.worm.active)
                                     {
                                         worm.Color = game_colors.worm.inactive;
                                         status.style.color = game_colors.worm.inactive;
                                     }
                                     else
                                     {
                                         worm.Color = game_colors.worm.active;
                                         status.style.color = game_colors.worm.active;
                                     }

                                 }

                                 return;
                             }

                             if (worm.Parts.Any(i => i.Location.IsEqual(worm.NextLocation)))
                             {
                                 paused = true;
                                 isdead = true;

                                 AddScore(0);
                                 new global::ConsoleWorm.HTML.Audio.FromAssets.buzzer().play();

                                 return;
                             }

                             worm.Color = game_colors.worm.active;
                             status.style.color = Color.Green;
                             worm.GrowToVector();

                             // did we find an apple?
                             var a = apples.Where(i => i.Location.IsEqual(worm.Location)).ToArray();

                             if (a.Length > 0)
                             {
                                 foreach (var v in a)
                                 {
                                     v.MoveToRandomLocation();
                                 }

                                 new global::ConsoleWorm.HTML.Audio.FromAssets.tick().play();

                                 AddScore(1);
                             }
                             else
                             {
                                 worm.Shrink();
                             }
                         }
                     );

                     var map = new[]
                        {
                            new { KeyCode = 38, Point = new Point(0, -1)}, // up
                            new { KeyCode = 37, Point = new Point(-1, 0)}, // left
                            new { KeyCode = 39, Point = new Point(1, 0)}, // right
                            new { KeyCode = 40, Point = new Point(0, 1)}, // down,

                              new { KeyCode = (int)System.Windows.Forms.Keys.W, Point = new Point(0, -1)}, // up
                            new { KeyCode =  (int)System.Windows.Forms.Keys.A, Point = new Point(-1, 0)}, // left
                            new { KeyCode =  (int)System.Windows.Forms.Keys.D, Point = new Point(1, 0)}, // right
                            new { KeyCode =  (int)System.Windows.Forms.Keys.S, Point = new Point(0, 1)}, // down
                        };

                     Func<IEvent, bool> IsPauseKey =
                         ev => ev.IsKeyCode("pP") || ev.KeyCode == 8504;

                     var PreviousKeyCode = 40;

                     Native.Document.body.onselectstart +=
                        ev =>
                        {
                            ev.PreventDefault();
                            ev.StopPropagation();
                        };


                     Action<IEvent> AtClick =
                         ev =>
                         {

                             ev.PreventDefault();
                             ev.StopPropagation();
                             var KeyCode = PreviousKeyCode;

                             if (ev.CursorX < Native.window.Width / 2)
                             {
                                 if (KeyCode == 38) KeyCode = 37;
                                 else if (KeyCode == 37) KeyCode = 40;
                                 else if (KeyCode == 40) KeyCode = 39;
                                 else if (KeyCode == 39) KeyCode = 38;
                                 // turn left
                             }
                             else
                             {
                                 if (KeyCode == 38) KeyCode = 39;
                                 else if (KeyCode == 37) KeyCode = 38;
                                 else if (KeyCode == 40) KeyCode = 37;
                                 else if (KeyCode == 39) KeyCode = 40;


                                 // turn right
                             }


                             if (isdead)
                             {

                                 while (worm.Parts.Count > 2)
                                     worm.Shrink();

                                 paused = false;
                                 isdead = false;
                                 AddScore(-score);
                                 new global::ConsoleWorm.HTML.Audio.FromAssets.reveal().play();
                                 return;
                             }


                             if (paused)
                             {
                                 paused = !paused;

                                 if (!paused)
                                 {
                                     worm.Color = game_colors.worm.active;
                                     status.style.color = game_colors.worm.active;
                                 }

                                 canvas.requestFullscreen();

                                 AddScore(0);
                                 new global::ConsoleWorm.HTML.Audio.FromAssets.reveal().play();

                                 return;
                             }

                             if (!paused)
                             {
                                 var v = map.SingleOrDefault(i => i.KeyCode == KeyCode);

                                 if (v != null)
                                 {
                                     ev.PreventDefault();


                                     if ((worm.Vector + v.Point).IsZero())
                                         return;

                                     PreviousKeyCode = v.KeyCode;
                                     worm.Vector = v.Point;
                                 }

                             }
                         };

                     Native.Document.body.onclick += AtClick;


                     #region onkeyup
                     Native.Document.onkeyup +=
                         ev =>
                         {

                             if (isdead)
                                 if (ev.IsReturn)
                                 {

                                     while (worm.Parts.Count > 2)
                                         worm.Shrink();

                                     paused = false;
                                     isdead = false;
                                     AddScore(-score);
                                     new global::ConsoleWorm.HTML.Audio.FromAssets.reveal().play();
                                 }

                             if (!paused)
                             {
                                 var v = map.SingleOrDefault(i => i.KeyCode == ev.KeyCode);

                                 if (v != null)
                                 {
                                     ev.PreventDefault();


                                     if ((worm.Vector + v.Point).IsZero())
                                         return;

                                     worm.Vector = v.Point;
                                 }

                                 if (ev.IsReturn)
                                 {
                                     apples.Add(
                                         CreateApple().AttachTo(canvas)
                                     );
                                 }
                                 else
                                     if (ev.KeyCode == 33)
                                 {
                                     zoom--;
                                     zoom = zoom.Max(8);

                                     apples.ForEach(a => a.MoveToLocation());
                                     worm.Parts.ForEach(p => p.MoveToLocation());
                                 }
                                 else if (ev.KeyCode == 34)
                                 {
                                     zoom++;
                                     zoom = zoom.Min(64);
                                     apples.ForEach(a => a.MoveToLocation());
                                     worm.Parts.ForEach(p => p.MoveToLocation());
                                 }


                             }

                             if (!isdead)
                                 if (IsPauseKey(ev))
                                 {
                                     paused = !paused;

                                     if (!paused)
                                     {
                                         worm.Color = game_colors.worm.active;
                                         status.style.color = game_colors.worm.active;
                                     }

                                     AddScore(0);
                                 }

                         };
                     #endregion



                 }
            );
        }
        /// <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(IDefaultPage page)
        {
            var SpiderModelContent = new SpiderModel.ApplicationContent();


            page.program_13_turn_left.onclick += delegate { SpiderModelContent.po = 13; };
            page.program_14_turn_right.onclick += delegate { SpiderModelContent.po = 14; };
            page.program_15_go_backwards.onclick += delegate { SpiderModelContent.po = 15; };
            page.program_16_go_forwards.onclick += delegate { SpiderModelContent.po = 16; };
            page.program_53_mayday.onclick += delegate { SpiderModelContent.po = 53; };
            page.program_43_high_five_calibration_stand.onclick += delegate { SpiderModelContent.po = 43; };
            page.stop.onclick += delegate { SpiderModelContent.po = 0; ; };

            new Timer(
                tttt =>
                {
                    var pp = SpiderModelContent.pp;

                    if (tttt.Counter % 2 == 0)
                        pp = 0;

                    if (pp == 13)
                        page.program_13_turn_left.style.color = JSColor.Blue;
                    else
                        page.program_13_turn_left.style.color = JSColor.None;

                    if (pp == 14)
                        page.program_14_turn_right.style.color = JSColor.Blue;
                    else
                        page.program_14_turn_right.style.color = JSColor.None;

                    if (pp== 15)
                        page.program_15_go_backwards.style.color = JSColor.Blue;
                    else
                        page.program_15_go_backwards.style.color = JSColor.None;


                    if (pp == 16)
                        page.program_16_go_forwards.style.color = JSColor.Blue;
                    else
                        page.program_16_go_forwards.style.color = JSColor.None;
                },
                300,
                150
            );

            #region program_60
            page.program_60.onclick += delegate
            {
                #region po
                Action<int> po =
                    v =>
                    {
                        page.program_60.innerText = "program_60: " + v;
                        SpiderModelContent.po = v;
                    };
                #endregion



                #region po_to_po
                Action<int, int> po_to_po =
                    (from, to) =>
                    {
                        if (SpiderModelContent.po != from)
                            return;

                        po(to);
                    };
                #endregion



                #region po_to_po_at
                Action<int, int, int> po_to_po_at =
                    (from, to, xdelay) =>
                    {
                        new Timer(delegate { po_to_po(from, to); }, xdelay * 1000, 0);
                    };
                #endregion

                // turn left until 3
                po(13);

                // wait 3 sec and go backwards until 6
                po_to_po_at(13, 15, 3);

                // wait 6 sec and turn right
                po_to_po_at(15, 14, 3 + 6);

                // wait 6 sec and go forwards until 6
                po_to_po_at(14, 16, 3 + 6 + 6);

                // wait 3 sec and stop
                po_to_po_at(16, 0, 3 + 6 + 6 + 6);
            };
            #endregion

            #region program_61
            page.program_61.onclick += delegate
            {
                #region po
                Action<int> po =
                    v =>
                    {
                        page.program_61.innerText = "program_61: " + v;
                        SpiderModelContent.po = v;
                    };
                #endregion



                #region po_to_po
                Action<int, int> po_to_po =
                    (from, to) =>
                    {
                        if (SpiderModelContent.po != from)
                            return;

                        po(to);
                    };
                #endregion



                #region po_to_po_at
                Action<int, int, int> po_to_po_at =
                    (from, to, xdelay) =>
                    {
                        new Timer(delegate { po_to_po(from, to); }, xdelay * 1000, 0);
                    };
                #endregion

                // turn left until 3
                po(14);

                // wait 3 sec and go backwards until 6
                po_to_po_at(14, 15, 3);

                // wait 6 sec and turn right
                po_to_po_at(15, 13, 3 + 6);

                // wait 6 sec and go forwards until 6
                po_to_po_at(13, 16, 3 + 6 + 6);

                // wait 3 sec and stop
                po_to_po_at(16, 0, 3 + 6 + 6 + 6);
            };
            #endregion

            @"Hello world".ToDocumentTitle();

            #region sidebars
            var LeftLR = new IHTMLDiv();

            LeftLR.style.position = IStyle.PositionEnum.absolute;
            LeftLR.style.left = "0";
            LeftLR.style.top = "0";
            LeftLR.style.bottom = "0";
            LeftLR.style.width = "4em";
            LeftLR.style.Opacity = 0.5;
            LeftLR.AttachToDocument();

            var LeftIR = new IHTMLDiv();

            LeftIR.style.position = IStyle.PositionEnum.absolute;
            LeftIR.style.left = "0";
            LeftIR.style.top = "0";
            LeftIR.style.height = "1em";
            LeftIR.style.width = "4em";
            LeftIR.style.Opacity = 0.8;
            LeftIR.AttachToDocument();
            LeftIR.style.backgroundColor = JSColor.FromRGB(0xB0, 0, 0);



            var RightLR = new IHTMLDiv();

            RightLR.style.position = IStyle.PositionEnum.absolute;
            RightLR.style.right = "0";
            RightLR.style.top = "0";
            RightLR.style.bottom = "0";
            RightLR.style.Opacity = 0.5;
            RightLR.style.width = "4em";
            RightLR.AttachToDocument();


            var RightIR = new IHTMLDiv();

            RightIR.style.position = IStyle.PositionEnum.absolute;
            RightIR.style.right = "0";
            RightIR.style.top = "0";
            RightIR.style.height = "1em";
            RightIR.style.width = "4em";
            RightIR.style.Opacity = 0.8;
            RightIR.AttachToDocument();
            RightIR.style.backgroundColor = JSColor.FromRGB(0xB0, 0, 0);



            LeftLR.style.backgroundColor = JSColor.FromRGB(0x80, 0, 0);
            RightLR.style.backgroundColor = JSColor.FromRGB(0x80, 0, 0);
            #endregion

            page.PageContainer.AttachToDocument();
            page.PageContainer.style.color = JSColor.White;
            page.PageContainer.style.textShadow = "#000 0px 0px 3px";
            page.ElShadow.style.textShadow = "#000 0px 0px 3px";

            #region AtResize
            Action AtResize = delegate
            {
                page.PageContainer.style.SetLocation(0, 0, Native.Window.Width, Native.Window.Height);


            };

            AtResize();

            Native.Window.onresize += delegate { AtResize(); };
            #endregion

            var delay = new Timer(
                delegate
                {
                    Native.Document.body.style.cursor = IStyle.CursorEnum.wait;
                }
            );

            var COM46_Line_value = "";

            Func<double, double> sin = Math.Sin;

            #region deviceorientation
            var gamma = 0.0;
            var beta = 0.0;
            var alpha = 0.0;

            Window.deviceorientation +=
                e =>
                {
                    gamma = e.gamma;
                    beta = e.beta;
                    alpha = e.alpha;

                    if (beta < 20) SpiderModelContent.po = 16;
                    if (beta > 60) SpiderModelContent.po = 15;
                    if (gamma > 30) SpiderModelContent.po = 14;
                    if (gamma < -30) SpiderModelContent.po = 13;
                };
            #endregion


            #region COM46_Line_value_loop
            Action COM46_Line_value_loop = null;

            COM46_Line_value_loop = delegate
            {
                var t = SpiderModelContent.t;

                page.Content2.innerText = COM46_Line_value;

                page.Content.innerText = ""
                    //+ "\n: \t" + 
                    + "\nt: \t" + System.Convert.ToInt32((double)SpiderModelContent.t)
                    + "\np: \t" + SpiderModelContent.p
                    + "\npo: \t" + SpiderModelContent.po
                   + "\ncamera_z: \t" + System.Convert.ToInt32((double)SpiderModelContent.camera_z)
                    //+ "\nalpha: \t" + alpha
                    //+ "\nbeta: \t" + beta
                    //+ "\ngamma: \t" + gamma
                    + "\n"
                    + "\nRED leg1down_vertical_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg1down_vertical_deg)
                    + "\nGREEN leg2down_vertical_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg2down_vertical_deg)
                    + "\nBLUE leg3down_vertical_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg3down_vertical_deg)
                    + "\nWHITE leg4down_vertical_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg4down_vertical_deg)
                    + "\n"
                    + "\nRED leg1up_sideway_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg1up_sideway_deg)
                    + "\nGREEN leg2up_sideway_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg2up_sideway_deg)
                    + "\nBLUE leg3up_sideway_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg3up_sideway_deg)
                    + "\nWHITE leg4up_sideway_deg: \t" + System.Convert.ToInt32((double)SpiderModelContent.leg4up_sideway_deg);

                Native.Window.requestAnimationFrame += COM46_Line_value_loop;
            };

            Native.Window.requestAnimationFrame += COM46_Line_value_loop;
            #endregion


            #region Connect
            page.Connect.onclick +=
            delegate
            {
                SpiderModelContent.t_fix = 0;
                "Connect".ToDocumentTitle();
                SpiderModelContent.po = 0; ;
                service.AtFocus();
            };
            #endregion

            #region Disconnect
            page.Disconnect.onclick +=
                delegate
                {
                    "Disconnect".ToDocumentTitle();
                    SpiderModelContent.po = 0; ;
                    service.AtBlur();
                };
            #endregion


            Action poll = null;

            poll = delegate
                {
                    delay.StartTimeout(400);

                    // Send data from JavaScript to the server tier
                    service.WebMethod2(
                        "" + SpiderModelContent.po,
                        COM46_Line =>
                        {
                            Native.Document.body.style.cursor = IStyle.CursorEnum.@default;
                            delay.Stop();

                            COM46_Line_value = COM46_Line.Replace("\t", "\n");

                            // jsc: why string.split with each not working??

                            var a = COM46_Line.Split(';');

                            byte RightLR_value = 0;
                            byte LeftLR_value = 0;
                            var t = 0f;

                            #region parse RightLR, LeftLS, LeftIR, RightIR
                            for (int i = 0; i < a.Length; i++)
                            {
                                var u = a[i];

                                u.TakeUntilOrEmpty(":").Trim().With(
                                    key =>
                                    {
                                        var _value = u.SkipUntilOrEmpty(":").Trim();

                                        // 1024 is dark


                                        #region RightLR
                                        if (key == "RS")
                                        {

                                            var value_int32 = int.Parse(_value);
                                            var value_1024 = (1024 - Math.Min(int.Parse(_value), 1024));

                                            // jsc: please do the masking when casting to byte yyourself, thanks :)
                                            RightLR_value = (byte)((255 * value_1024 / 1024) & 0xff);
                                            RightLR_value = (byte)Math.Min(255, RightLR_value * 2);

                                            if (RightLR_value == 255)
                                                RightLR.style.backgroundColor = JSColor.Cyan;
                                            else
                                                RightLR.style.backgroundColor = JSColor.FromGray(RightLR_value);

                                        }
                                        #endregion

                                        #region LeftLS
                                        if (key == "LS")
                                        {

                                            var value_int32 = int.Parse(_value);
                                            var value_1024 = (1024 - Math.Min(int.Parse(_value), 1024));

                                            // jsc: please do the masking when casting to byte yyourself, thanks :)
                                            LeftLR_value = (byte)((255 * value_1024 / 1024) & 0xff);
                                            LeftLR_value = (byte)Math.Min(255, LeftLR_value * 2);

                                            //LeftLR.innerText = "" + ivalue;

                                            if (LeftLR_value == 255)
                                                LeftLR.style.backgroundColor = JSColor.Cyan;
                                            else
                                                LeftLR.style.backgroundColor = JSColor.FromGray(LeftLR_value);

                                        }
                                        #endregion

                                        #region LeftIR
                                        if (key == "LI")
                                        {

                                            var value_int32 = int.Parse(_value);

                                            if (value_int32 > 400)
                                                LeftIR.style.backgroundColor = JSColor.Red;
                                            else
                                                if (value_int32 > 200)
                                                    LeftIR.style.backgroundColor = JSColor.Yellow;
                                                else
                                                    LeftIR.style.backgroundColor = JSColor.Green;

                                            LeftIR.style.height = value_int32 + "px";

                                            SpiderModelContent.tween_red_obstacle_L_y((1 - value_int32 / 600) * 24);
                                        }
                                        #endregion

                                        #region RightIR
                                        if (key == "RI")
                                        {

                                            var value_int32 = int.Parse(_value);

                                            if (value_int32 > 400)
                                                RightIR.style.backgroundColor = JSColor.Red;
                                            else
                                                if (value_int32 > 200)
                                                    RightIR.style.backgroundColor = JSColor.Yellow;
                                                else
                                                    RightIR.style.backgroundColor = JSColor.Green;



                                            RightIR.style.height = value_int32 + "px";
                                            SpiderModelContent.tween_red_obstacle_R_y((1 - value_int32 / 600) * 24);

                                        }
                                        #endregion

                                        if (key == "t")
                                        {
                                            t = (float)double.Parse(_value);
                                        }

                                        if (key == "pp")
                                        {
                                            SpiderModelContent.p = int.Parse(_value);
                                        }
                                    }
                                );
                            }
                            #endregion

                            if (t != 0)
                                if (SpiderModelContent.t_local != 0)
                                    if (SpiderModelContent.t_fix == 0)
                                        SpiderModelContent.t_fix = t - SpiderModelContent.t_local;



                            // dark 70 .. 255 bright

                            SpiderModelContent.tween_white_arrow_y(
                                50 * (1 - ((Math.Max(LeftLR_value, RightLR_value) - 70) / (255 - 70)))
                            );

                            SpiderModelContent.tween_white_arrow_x(
                                (LeftLR_value - 60) * -20f / (255 - 60)
                            + (RightLR_value - 60) * 20f / (255 - 60)
                            );


                            #region next
                            new Timer(
                               delegate
                               {
                                   Native.Window.requestAnimationFrame += poll;
                               }
                           ).StartTimeout(UpdateSpeed);
                            #endregion

                        }
                    );

                    page.FastUpdates.onclick += delegate
                    {
                        UpdateSpeed = 50;
                    };

                    page.SlowUpdates.onclick += delegate
                    {
                        UpdateSpeed = 500;
                    };
                };

            Native.Window.requestAnimationFrame += poll;

        }
        /// <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(IDefault page = null)
        {
            // var THREE = { REVISION: '67' };
            Native.document.title = new { THREE.REVISION }.ToString();
            // works on IE11
            //DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();


            //var fov = 40;
            var fov = 100;

            #region container
            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
            var container = new IHTMLDiv();

            container.AttachToDocument();
            container.style.backgroundColor = "#000000";
            container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
            #endregion



            var width = Native.window.Width;
            var height = Native.window.Height;



            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(
                fov,
                Native.window.aspect,
                1,
                1000
            ).AttachTo(scene);

            //camera.AttachTo(scene);
            //scene.add(camera);



            //var ambient = new THREE.AmbientLight( 0xffffff);

            //scene.add( ambient );

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

            var light2 = new THREE.DirectionalLight(0xffffff);
            light2.position.set(-1, -1, -1).normalize();
            scene.add(light2);



            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height);
            renderer.domElement.AttachTo(container);

            var md2frames = new md2frames();

            //load converted md2 data

            var material = new THREE.MeshPhongMaterial(
                new
                {
                    map = THREE.ImageUtils.loadTexture(
                        new HTML.Images.FromAssets._1().src
                    ),
                    ambient = 0x999999,
                    color = 0xffffff,
                    specular = 0xffffff,
                    shininess = 25,
                    morphTargets = true
                }
            );



            #region AtResize
            Action AtResize = delegate
            {
                container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);


                renderer.setSize(Native.window.Width, Native.window.Height);

                camera.projectionMatrix.makePerspective(fov, Native.window.aspect, 1, 1100);

                //camera.aspect = Native.Window.Width / Native.Window.Height;
                //camera.updateProjectionMatrix();
            };

            Native.window.onresize +=
                delegate
                {
                    AtResize();
                };

            AtResize();
            #endregion

            new THREE.JSONLoader().load(
                new global::WebGLYomotsuMD2Model.Design.tris_md2().Content.src,
                new Action<object>(
                    geometry =>
                    {
                        var player_mesh = new THREE.MorphAnimMesh(geometry, material);

                        player_mesh.rotation.y = (float)(-Math.PI / 2);
                        player_mesh.scale.set(2, 2, 2);
                        player_mesh.castShadow = true;
                        player_mesh.receiveShadow = false;

                        #region player_motion
                        var player_motion = default(motion);
                        Action<motion> player_changeMotion = motion =>
                        {
                            player_motion = motion;

                            //    player.state = md2frames[motion][3].state;

                            var animMin = motion.min;
                            var animMax = motion.max;
                            var animFps = motion.fps;

                            player_mesh.time = 0;
                            player_mesh.duration = 1000 * ((animMax - animMin) / animFps);

                            //Console.WriteLine(
                            //    "setFrameRange " +
                            //    new
                            //    {
                            //        motion.min,
                            //        motion.max,
                            //        motion.fps
                            //    }
                            //    );

                            player_mesh.setFrameRange(animMin, animMax);
                        };

                        player_changeMotion(md2frames.stand);
                        #endregion


                        //player_mesh.att
                        scene.add(player_mesh);

                        var theta = 0;

                        //var clock = new THREE.Clock();

                        var clock = new Stopwatch();
                        clock.Start();

                        #region loop


                        Native.window.onframe += delegate
                        {
                            var delta = clock.ElapsedMilliseconds * 0.001;
                            clock.Restart();

                            var isEndFleame = (player_motion.max == player_mesh.currentKeyframe);
                            var isAction = player_motion.action;

                            var x = (isAction && !isEndFleame);

                            if (!isAction || x)
                            {

                                player_mesh.updateAnimation(1000 * delta);

                            }
                            else if (player_motion.state == "freeze")
                            {

                                //dead...

                            }
                            else
                            {

                                player_changeMotion(player_motion);

                            }


                            camera.position.x = (float)(150 * Math.Sin(theta / 2 * Math.PI / 360));
                            camera.position.y = (float)(150 * Math.Sin(theta / 2 * Math.PI / 360));
                            camera.position.z = (float)(150 * Math.Cos(theta / 2 * Math.PI / 360));

                            camera.lookAt(scene.position);

                            theta++;



                            renderer.render(scene, camera);


                        };

                        #endregion

                        #region Toolbar
                        var toolbar = new Toolbar();

                        if (page != null)
                        {
                            toolbar.Container.style.Opacity = 0.7;
                            toolbar.Container.AttachToDocument();
                            toolbar.Container.style.position = IStyle.PositionEnum.absolute;
                            toolbar.Container.style.right = "0";
                            toolbar.Container.style.bottom = "0";

                            toolbar.HideButton.onclick +=
                                    delegate
                                    {
                                        // ScriptCoreLib.Extensions
                                        toolbar.HideTarget.ToggleVisible();
                                    };


                            Action<IHTMLButton, motion> bind =
                                (btn, value) => btn.onclick += delegate { player_changeMotion(value); };

                            bind(toolbar.Stand, md2frames.stand);
                            bind(toolbar.Run, md2frames.run);
                            bind(toolbar.Attack, md2frames.attack);
                            bind(toolbar.Pain1, md2frames.pain1);
                            bind(toolbar.Pain2, md2frames.pain2);
                            bind(toolbar.Pain3, md2frames.pain3);
                            bind(toolbar.Jump, md2frames.jump);
                            bind(toolbar.Flip, md2frames.flip);
                            bind(toolbar.Salute, md2frames.salute);
                            bind(toolbar.Taunt, md2frames.taunt);
                            bind(toolbar.Wave, md2frames.wave);
                            bind(toolbar.Point, md2frames.point);
                            bind(toolbar.Crstand, md2frames.crstand);
                            bind(toolbar.Crwalk, md2frames.crwalk);
                            bind(toolbar.Crattack, md2frames.crattack);
                            bind(toolbar.Crpain, md2frames.crpain);
                            bind(toolbar.Crdeath, md2frames.crdeath);
                            bind(toolbar.Death1, md2frames.death1);
                            bind(toolbar.Death2, md2frames.death2);
                            bind(toolbar.Death3, md2frames.death3);
                        }
                        #endregion



                    }
                )
            );


            //var ze = new ZeProperties();

            //ze.Show();
            //ze.treeView1.Nodes.Clear();

            //ze.Add(() => renderer);
            ////ze.Add(() => controls);
            //ze.Add(() => scene);
            //ze.Left = 0;


        }
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150831

        // Z:\jsc.svn\examples\javascript\chrome\apps\ChromeWriteFiles\ChromeWriteFiles\bin\Debug\staging\ChromeWriteFiles.Application\web

        //        subst /D b:
        //subst b: s:\jsc.svn\examples\javascript\chrome\apps\ChromeWriteFiles\ChromeWriteFiles\bin\Debug\staging\ChromeWriteFiles.Application\web

        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome-filesystem

        /// <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)
        {
            #region += Launched chrome.app.window
            dynamic self = Native.self;
            dynamic self_chrome = self.chrome;
            object self_chrome_socket = self_chrome.socket;

            if (self_chrome_socket != null)
            {
                if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
                {
                    Console.WriteLine("chrome.app.window.create, is that you?");

                    // pass thru
                }
                else
                {
                    // should jsc send a copresence udp message?
                    chrome.runtime.UpdateAvailable += delegate
                    {
                        new chrome.Notification(title: "UpdateAvailable");

                    };

                    chrome.app.runtime.Launched += async delegate
                    {
                        // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
                        Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });

                        new chrome.Notification(title: "ChromeWriteFiles");

                        var xappwindow = await chrome.app.window.create(
                               Native.document.location.pathname, options: null
                        );

                        //xappwindow.setAlwaysOnTop

                        xappwindow.show();

                        await xappwindow.contentWindow.async.onload;

                        Console.WriteLine("chrome.app.window loaded!");
                    };


                    return;
                }
            }
            #endregion

            // X:\jsc.svn\examples\javascript\chrome\apps\ChromeWriteFiles\ChromeWriteFiles\Application.cs

            //{{ Length = 4 }}
            //{{ prefixLength = 64, name = {D7020941-742E-4570-93B2-C0372D3D870F}, address = fe80::88c0:f0a:9ccf:cba0 }}
            //{{ prefixLength = 24, name = {D7020941-742E-4570-93B2-C0372D3D870F}, address = 192.168.43.28 }}
            //{{ prefixLength = 64, name = {A8657A4E-8BFA-41CC-87BE-6847E33E1A81}, address = 2001:0:9d38:6abd:20a6:2815:3f57:d4e3 }}
            //{{ prefixLength = 64, name = {A8657A4E-8BFA-41CC-87BE-6847E33E1A81}, address = fe80::20a6:2815:3f57:d4e3 }}

            new { }.With(
                async delegate
                {
                    // http://css-infos.net/property/-webkit-user-select
                    // http://caniuse.com/#feat=user-select-none
                    //(Native.body.style as dynamic).userSelect = "auto";
                    (Native.body.style as dynamic).webkitUserSelect = "text";

                    // https://css-tricks.com/almanac/properties/u/user-select/
                    //Native.body.style.setProperty(
                    // X:\jsc.svn\examples\java\hybrid\JVMCLRNIC\JVMCLRNIC\Program.cs
                    // clr does not have it async. 

                    //var refresh = 
                    new IHTMLButton { "0000.txt" }.AttachToDocument().onclick += async delegate
                    //while (await refresh.async.onclick)
                    {
                        new IHTMLHorizontalRule { }.AttachToDocument();

                        // TypeError: Cannot read property 'getVolumeList' of undefined
                        //var n = await chrome.fileSystem.getVolumeList();


                        //{
                        //    "fileSystem" : ["write", "directory"]
                        //    }
                        // TypeError: Cannot read property 'chooseEntry' of undefined
                        var entry = await chrome.fileSystem.chooseEntry(
                                            new { type = "openDirectory" }
                                        );

                        // {{ entry = [object DirectoryEntry] }}
                        new IHTMLPre { new { entry } }.AttachToDocument();

                        // http://sharpkit.net/help/SharpKit.PhoneGap/SharpKit.PhoneGap/DirectoryEntry/getFile(JsString,Flags,FileEntry%5D%5D,JsAction).htm
                        // https://developer.mozilla.org/en-US/docs/Web/API/DirectoryEntry#getFile
                        var dir = (DirectoryEntry)entry;

                        dir.getFile(
                            "0000.txt",
                            new
                            {
                                create = true,
                                exclusive = false
                            },
                            fentry =>
                            {
                                // {{ fentry = [object FileEntry] }}
                                new IHTMLPre { new { fentry } }.AttachToDocument();


                                fentry.createWriter(
                                    w =>
                                    {
                                        new IHTMLPre { new { w } }.AttachToDocument();

                                        // new Blob([document.getElementById("HTMLFile").value],
                                        //{ type: 'text/plain'}

                                        var blob = new Blob(
                                            blobParts: new[] { "hello\nworld" },
                                            options: new { type = "text/plain" }
                                        );

                                        // http://stackoverflow.com/questions/12168909/blob-from-dataurl
                                        w.write(blob);


                                        //w.write()
                                    }
                                );

                            }
                        );
                        //foreach (var item in n)
                        //{
                        //    new IHTMLPre { new { item, item.volumeId, item.writable } }.AttachToDocument();
                        //}
                    };



                    IHTMLImage c0002 = new IHTMLDiv { "frame2 " + new { DateTime.Now } };
                    IHTMLImage c0001 = new IHTMLDiv { "frame1 " + new { DateTime.Now } };
                    IHTMLImage c = new IHTMLDiv { "lets render this div into file " + new { DateTime.Now } };

                    c.AttachToDocument();

                    // "Z:\jsc.svn\examples\javascript\chrome\apps\ChromeWriteFiles\ChromeWriteFiles\bin\Debug\staging\ChromeWriteFiles.Application\web\manifest.json"

                    //var data = c.toDataURL();

                    //new IHTMLPre { new { data } }.AttachToDocument();
                    // { data = data:image/png;base64,iVBORw


                    //var fileBytes = Convert.FromBase64String(data.SkipUntilOrEmpty("base64,"));
                    // { Length = 1382 }

                    //new IHTMLPre { new { fileBytes.Length, fileBytes } }.AttachToDocument();


                    new IHTMLButton { "0000.jpg" }.AttachToDocument().onclick += async delegate
                    //while (await refresh.async.onclick)
                    {
                        new IHTMLHorizontalRule { }.AttachToDocument();

                        // TypeError: Cannot read property 'getVolumeList' of undefined
                        //var n = await chrome.fileSystem.getVolumeList();


                        //{
                        //    "fileSystem" : ["write", "directory"]
                        //    }
                        // TypeError: Cannot read property 'chooseEntry' of undefined
                        // 1757ms TypeError: Cannot read property 'chooseEntry' of undefined
                        var entry = await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });

                        // {{ entry = [object DirectoryEntry] }}
                        new IHTMLPre { new { entry } }.AttachToDocument();

                        // http://sharpkit.net/help/SharpKit.PhoneGap/SharpKit.PhoneGap/DirectoryEntry/getFile(JsString,Flags,FileEntry%5D%5D,JsAction).htm
                        // https://developer.mozilla.org/en-US/docs/Web/API/DirectoryEntry#getFile
                        var dir = (DirectoryEntry)entry;

                        dir.getFile(
                            "0000.jpg",
                            new
                            {
                                create = true,
                                exclusive = false
                            },
                            fentry =>
                            {
                                // {{ fentry = [object FileEntry] }}
                                new IHTMLPre { new { fentry } }.AttachToDocument();


                                fentry.createWriter(
                                    w =>
                                    {

                                        new IHTMLPre { new { w } }.AttachToDocument();

                                        // new Blob([document.getElementById("HTMLFile").value],
                                        //{ type: 'text/plain'}

                                        //var blob = new Blob(
                                        //    blobParts: new ArrayBufferView[] { fileBytes },
                                        //    options: new { type = "application/octet-stream" }
                                        //);

                                        // http://stackoverflow.com/questions/12168909/blob-from-dataurl
                                        //w.write(fileBytes);
                                        w.write(c);


                                        //w.write()
                                    }
                                );

                            }
                        );
                        //foreach (var item in n)
                        //{
                        //    new IHTMLPre { new { item, item.volumeId, item.writable } }.AttachToDocument();
                        //}
                    };

                    new IHTMLButton { "0001.png" }.AttachToDocument().onclick += async delegate
                       {
                           new IHTMLHorizontalRule { }.AttachToDocument();

                           var dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });


                           await dir.WriteAllBytes("0001.png", c0001);
                           await dir.WriteAllBytes("0002.png", c0002);

                           new IHTMLPre { "done" }.ToString();
                       };

                }
            );
        }
        public void __Application(IApplicationLoader app)
        {
            //app.LoadingAnimation.FadeOut();

            var DefaultTitle = "jsc solutions";


            Native.Document.title = DefaultTitle;

            StringActionAction GetTitleFromServer = new UltraWebService().GetTitleFromServer;



            GetTitleFromServer(
                n => Native.Document.title = n
            );

            var MyPagesBackground = new IHTMLDiv
            {

            };

            MyPagesBackground.style.overflow = IStyle.OverflowEnum.hidden;
            MyPagesBackground.style.position = IStyle.PositionEnum.absolute;
            MyPagesBackground.style.width = "100%";
            MyPagesBackground.style.height = "100%";
            MyPagesBackground.AttachToDocument();

            var MyPages = new IHTMLDiv
            {

            };

            MyPages.style.overflow = IStyle.OverflowEnum.auto;
            MyPages.style.position = IStyle.PositionEnum.absolute;
            MyPages.style.width = "100%";
            MyPages.style.height = "100%";
            MyPages.AttachToDocument();

            var MyPagesInternal = new IHTMLDiv();

            MyPagesInternal.style.margin = "4em";
            MyPagesInternal.AttachTo(MyPages);

            // http://www.google.com/support/forum/p/Google+Analytics/thread?tid=486a963e463df665&hl=en
            var gapathname = Native.Document.location.pathname;
            var gasearch = Native.Document.location.search;
            var gahash = Native.Window.escape(Native.Document.location.hash);
            var gapageview = gapathname + gasearch + gahash;

            var hash = Native.Document.location.hash;

            Action<string> Analytics = delegate { };

        #region logo
            {
                var IsStudio = Native.Document.location.hash.StartsWith("#/studio");

                if (Native.Document.location.host.StartsWith("studio."))
                {
                    IsStudio = true;
                }

                if (IsStudio)
                {
                    new StudioView(AddSaveButton).Content.AttachToDocument();
                }
                else if (Native.Document.location.hash.StartsWith("#/docs"))
                {
                    var view = new DocumentationCompilationViewer();

                    view.TouchTypeSelected +=
                        type =>
                        {
                            Native.Document.location.hash = "#/docs/" + type.FullName;

                            Analytics("#/docs/" + type.FullName);
                        };

                }
                else if (Native.Document.location.hash.StartsWith("#/warehouse"))
                {
                    new UltraWebService().ThreeDWarehouse(
                        y =>
                        {
                            Func<string, IHTMLAnchor> Build =
                                mid =>
                                {
                                    var a = new IHTMLAnchor { href = "http://sketchup.google.com/3dwarehouse/details?ct=hppm&mid=" + mid }.AttachTo(MyPagesInternal);
                                    var img = new IHTMLImage { src = "http://sketchup.google.com/3dwarehouse/download?rtyp=st&ctyp=other&mid=" + mid }.AttachTo(a);

                                    return a;
                                };

                            var imgs = Enumerable.ToArray(
                                from k in y.Elements()
                                select Build(k.Value)

                            );
                        }
                    );

                }

                else if (Native.Document.location.hash == "#/source")
                {

                    var sln = new TreeNode(() => new VistaTreeNodePage());

                    sln.Text = "Solution";
                    sln.IsExpanded = true;

                    Action<TreeNode> AddReferences =
                        p =>
                        {
                            var r = p.Add("References", new References());

                            r.Add("System", new Assembly());
                            r.Add("System.Core", new Assembly());
                            r.Add("ScriptCoreLib", new Assembly());
                            r.Add("ScriptCoreLib.Ultra", new Assembly());
                            r.Add("ScriptCoreLib.Ultra.Library", new Assembly());
                            r.Add("ScriptCoreLib.Ultra.Controls", new Assembly());
                            r.Add("ScriptCoreLibJava", new Assembly());
                            r.Add("jsc.meta", new Assembly());
                        };

                    Action<TreeNode> AddUltraSource =
                        p =>
                        {
                            var my = p.Add("My.UltraSource");
                            my.Add("Default.htm", new HTMLDocument());
                            my.Add("jsc.png", new ImageFile());

                        };

                    {
                        var p = sln.Add("Visual C# Project", new VisualCSharpProject());


                        AddReferences(p);
                        AddUltraSource(p);



                        p.Add("Application.cs", new VisualCSharpCode());
                        p.Add("WebService.cs", new VisualCSharpCode());
                        p.Add("Program.cs", new VisualCSharpCode());
                    }

                    {
                        var p = sln.Add("Visual Basic Project", new VisualBasicProject());

                        AddReferences(p);
                        AddUltraSource(p);

                        p.Add("Application.vb", new VisualBasicCode());
                        p.Add("WebService.vb", new VisualBasicCode());
                        p.Add("Program.vb", new VisualBasicCode());
                    }


                    {
                        var p = sln.Add("Visual F# Project", new VisualFSharpProject());

                        AddReferences(p);
                        AddUltraSource(p);


                        p.Add("Application.fs", new VisualFSharpCode());
                        p.Add("WebService.fs", new VisualFSharpCode());
                        p.Add("Program.fs", new VisualFSharpCode());
                    }

                    sln.Container.style.Float = IStyle.FloatEnum.right;
                    sln.Container.AttachTo(MyPagesInternal);

                    new SourceEditorHeader().Container.AttachTo(MyPagesInternal);

                    //new IHTMLElement(IHTMLElement.HTMLElementEnum.h1, "Create your own Ultra Application project template").AttachTo(MyPagesInternal);

                    var n = new TextEditor(MyPagesInternal);

                    n.Width = 600;
                    n.Height = 400;

                    //n.InnerHTML = "<p>Create your own <b>Ultra Application</b> Project Template</p>";


                    new DefaultPage1().Container.AttachTo(n.Document.body);

                    var m1 = new SimpleCodeView();

                    m1.Container.AttachTo(MyPagesInternal);
                    //m1.SelectType.onchange +=
                    //    delegate
                    //    {
                    //        m1.TypeName.innerText = m1.SelectType.value;
                    //    };

                    //m1.RunJavaScript.onclick +=
                    //    delegate
                    //    {
                    //        m1.RunJavaScript.style.color = JSColor.Blue;

                    //        try
                    //        {
                    //            Native.Window.eval(m1.Code1.value);

                    //            1000.AtDelay(
                    //                delegate
                    //                {
                    //                    m1.RunJavaScript.style.color = JSColor.None;
                    //                }
                    //            );
                    //        }
                    //        catch
                    //        {
                    //            m1.RunJavaScript.style.color = JSColor.Red;

                    //            1000.AtDelay(
                    //                delegate
                    //                {
                    //                    m1.RunJavaScript.style.color = JSColor.None;
                    //                }
                    //            );
                    //        }
                    //    };
                    new Compilation().GetArchives().SelectMany(k => k.GetAssemblies()).First(k => k.Name == "ScriptCoreLib").WhenReady(
                        ScriptCoreLib =>
                        {
                            // we do not have reflection in place for native wrappers :/

                            m1.SelectEvent.Clear();

                            var Element = ScriptCoreLib.GetTypes().Single(k => k.FullName == "ScriptCoreLib.JavaScript.DOM.HTML.IHTMLElement");
                            //var Element = ScriptCoreLib.GetTypes().Single(k => k.HTMLElement == "ScriptCoreLib.JavaScript.DOM.HTML.IHTMLElement");

                            Action<CompilationEvent> Add =
                                SourceEvent =>
                                {
                                    m1.SelectEvent.Add(
                                        new IHTMLOption { innerText = SourceEvent.Name }
                                    );
                                };

                            Element.GetEvents().ForEach(Add);

                        }
                    );


                    m1.SelectEvent.onchange +=
                        delegate
                        {
                            m1.EventName.innerText = m1.SelectEvent.value;
                        };




                }
                else if (Native.Document.location.hash == "#/UltraApplicationWithAssets")
                {
                    new UltraApplicationWithAssets().Container.AttachToDocument();
                }
                else
                    if (Native.Document.location.hash == "#/audio")
                    {
                        Action AtTimer = delegate { };

                        (1000 / 15).AtInterval(
                            tt =>
                            {
                                AtTimer();
                            }
                        );

                        new SoundCloudBackground().Container.AttachTo(MyPagesBackground);
                        new SoundCloudHeader().Container.AttachTo(MyPagesInternal);

                        var page = 1;

                        var Tracks = new IHTMLDiv().AttachTo(MyPagesInternal);
                        Tracks.style.margin = "1em";

                        var More = new SoundCloudMore();

                        var AudioLinks = default(AudioLink);

                        var LoadCurrentPage = default(Action);

                        LoadCurrentPage = delegate
                        {
                            var loading = new SoundCloudLoading();

                            loading.Container.AttachTo(Tracks);


                            new UltraWebService().SoundCloudTracksDownload(
                                System.Convert.ToString(page),
                                ee =>
                                {
                                    if (loading != null)
                                    {
                                        loading.Container.Orphanize();
                                        loading = null;
                                    }

                                    var t = new SoundCloudTrack();

                                    t.Content.ApplyToggleConcept(t.HideContent, t.ShowContent).Hide();

                                    t.Title.innerHTML = ee.trackName;
                                    t.Waveform.src = ee.waveformUrl;

                                    t.Audio.src = ee.streamUrl;
                                    t.Audio.autobuffer = true;


                                    AudioLinks = new AudioLink
                                    {
                                        Audio = t.Audio,
                                        Prev = AudioLinks
                                    };

                                    var _AudioLinks = AudioLinks;

                                    if (AudioLinks.Prev != null)
                                        AudioLinks.Prev.Next = AudioLinks;
                                    else
                                        // we are the first  :)
                                        t.Audio.play();

                                    t.MoreButton.onclick +=
                                        delegate
                                        {
                                            t.Audio.pause();

                                            if (_AudioLinks.Next != null)
                                            {
                                                _AudioLinks.Next.Audio.currentTime = 0;
                                                _AudioLinks.Next.Audio.play();

                                                if (_AudioLinks.Next.Next == null)
                                                {
                                                    page++;
                                                    LoadCurrentPage();
                                                }
                                            }
                                        };

                                    t.Audio.onended +=
                                        delegate
                                        {
                                            if (_AudioLinks.Next != null)
                                            {
                                                _AudioLinks.Next.Audio.currentTime = 0;
                                                _AudioLinks.Next.Audio.play();

                                                if (_AudioLinks.Next.Next == null)
                                                {
                                                    page++;
                                                    LoadCurrentPage();
                                                }
                                            }
                                        };

                                    t.Identity.innerText = ee.uid;

                                    t.Play.onclick += eee => { eee.PreventDefault(); t.Audio.play(); };
                                    t.Pause.onclick += eee => { eee.PreventDefault(); t.Audio.pause(); };

                                    t.Title.style.cursor = IStyle.CursorEnum.pointer;
                                    t.Title.onclick += eee =>
                                        {
                                            eee.PreventDefault();

                                            var playing = true;

                                            if (t.Audio.paused)
                                                playing = false;

                                            if (t.Audio.ended)
                                                playing = false;

                                            if (!playing)
                                                t.Audio.play();
                                            else
                                                t.Audio.pause();
                                        };

                                    DoubleAction SetProgress1 = p =>
                                    {

                                        t.Gradient3.style.width = System.Convert.ToInt32(800 * p) + "px";
                                        t.Gradient4.style.width = System.Convert.ToInt32(800 * p) + "px";
                                    };

                                    t.Gradient5.style.Opacity = 0.4;
                                    t.Gradient6.style.Opacity = 0.4;

                                    DoubleAction SetProgress2 = p =>
                                    {

                                        t.Gradient5.style.width = System.Convert.ToInt32(800 * p) + "px";
                                        t.Gradient6.style.width = System.Convert.ToInt32(800 * p) + "px";
                                    };

                                    AtTimer +=
                                        delegate
                                        {
                                            if (t.Audio.duration == 0)
                                            {
                                                t.Play.Hide();
                                                t.Pause.Hide();
                                                return;
                                            }
                                            else
                                            {

                                                var playing = true;

                                                if (t.Audio.paused)
                                                    playing = false;

                                                if (t.Audio.ended)
                                                    playing = false;

                                                if (!playing)
                                                    t.Title.style.color = Color.None;
                                                else
                                                    t.Title.style.color = Color.Blue;

                                                t.Play.Show(!playing);
                                                t.Pause.Show(playing);
                                            }

                                            var p = t.Audio.currentTime / t.Audio.duration;
                                            SetProgress1(p);
                                        };

                                    t.Waveform.onmouseout +=
                                        delegate
                                        {
                                            SetProgress2(0);
                                        };

                                    t.Waveform.onmousemove +=
                                        eee =>
                                        {
                                            SetProgress2(eee.OffsetX / 800.0);
                                        };

                                    t.Waveform.onclick +=
                                        eee =>
                                        {
                                            t.Audio.currentTime = t.Audio.duration * (eee.OffsetX / 800.0);
                                            t.Audio.play();
                                        };

                                    t.Waveform.style.cursor = IStyle.CursorEnum.pointer;

                                    SetProgress1(0);
                                    SetProgress2(0);

                                    t.Container.AttachTo(Tracks);
                                }
                            );


                            10000.AtDelay(
                                delegate
                                {
                                    More.MoreButton.FadeIn(0, 1000, null);
                                }
                            );
                        };


                        More.MoreButton.Hide();
                        More.Container.AttachTo(MyPagesInternal);

                        More.MoreButton.onclick += eee =>
                            {
                                eee.PreventDefault();
                                More.MoreButton.FadeOut(1, 300,
                                    delegate
                                    {
                                        page++;
                                        LoadCurrentPage();
                                    }
                                );
                            };

                        LoadCurrentPage();

                    }
                    else
                    {
                        //new PromotionWebApplication1.HTML.Audio.FromAssets.Track1 { controls = true }.AttachToDocument();
                        //new PromotionWebApplication1.HTML.Audio.FromWeb.Track1 { controls = true, autobuffer = true }.AttachToDocument();

                        var IsAvalonJavaScript = hash == "#/avalon.js";
                        var IsAvalonActionScript = hash == "#/avalon.as";
                        var IsAvalon = IsAvalonActionScript || IsAvalonJavaScript;

                        //if (IsAvalon)
                        //{

                        //{
                        //    var ccc = new IHTMLDiv();

                        //    ccc.style.position = IStyle.PositionEnum.absolute;
                        //    ccc.style.left = "15%";
                        //    ccc.style.right = "15%";
                        //    ccc.style.top = "15%";


                        //    var Now = DateTime.Now;

                        //    var CountDown = new CountDownGadgetConcept(CountDownGadget.Create)
                        //    {
                        //        ShowOnlyDays = true,
                        //        Event = new DateTime(2010, 5, 24, 23, 59, 50),

                        //    };

                        //    CountDown.Element.GadgetContainer.style.color = "#808080";
                        //    CountDown.Element.GadgetContainer.style.textShadow = "#E0E0E0 1px 1px 1px";


                        //    CountDown.Element.GadgetContainer.AttachTo(ccc);
                        //    CountDown.Element.GadgetContainer.FadeIn(3000, 2000, null);

                        //    ccc.AttachToDocument();
                        //}

                        {
                            var ccc = new IHTMLDiv();

                            ccc.style.position = IStyle.PositionEnum.absolute;
                            ccc.style.left = "50%";
                            ccc.style.top = "50%";
                            ccc.style.marginLeft = (-JSCSolutionsNETCarouselCanvas.DefaultWidth / 2) + "px";
                            ccc.style.marginTop = (-JSCSolutionsNETCarouselCanvas.DefaultHeight / 2) + "px";

                            ccc.style.SetSize(JSCSolutionsNETCarouselCanvas.DefaultWidth, JSCSolutionsNETCarouselCanvas.DefaultHeight);

                            ccc.AttachToDocument();

                            if (IsAvalonActionScript)
                            {
                                var alof = new UltraSprite();
                                alof.ToTransparentSprite();
                                alof.AttachSpriteTo(ccc);
                            }
                            else
                            {
                                var alo = new JSCSolutionsNETCarouselCanvas();
                                alo.Container.AttachToContainer(ccc);

                                alo.AtLogoClick +=
                                    delegate
                                    {
                                        //Native.Window.open("http://sourceforge.net/projects/jsc/", "_blank");
                                        Native.Window.open("/download", "_blank");
                                    };

                            }
                        }
                        //}
                        //else
                        //{
                        //    var cc = new HTML.Pages.FromAssets.Controls.Named.CenteredLogo_Kamma();

                        //    cc.Container.AttachToDocument();

                        //    // see: http://en.wikipedia.org/wiki/Perl_control_structures
                        //    // "Unless" == "if not"  ;)

                        //    IsMicrosoftInternetExplorer.YetIfNotThen(cc.TheLogoImage.BeginPulseAnimation).ButIfSoThen(cc.TheLogoImage.HideNowButShowAtDelay);
                        //}

                        var aa = new About();
                        aa.Service.innerText = gapageview;
                        aa.Container.AttachToDocument();

                    }
            }
        #endregion


            Analytics =
                __hash =>
                {
                    var __gahash = Native.Window.escape(__hash);
                    var __gapageview = gapathname + gasearch + __gahash;


                    "UA-13087448-1".ToGoogleAnalyticsTracker(
                        pageTracker =>
                        {
                            pageTracker._setDomainName(".jsc-solutions.net");
                            pageTracker._trackPageview(__gapageview);


                        }
                    );
                };

            Analytics(Native.Document.location.hash);


        }