/// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {

            var x = new XAttribute("foo", "bar");



            //Native.document.documentElement.css["[foo]"][page.Header].style.backgroundColor = "yellow";

            // Uncaught SyntaxError: An invalid or illegal string was specified. 
            //Native.document.documentElement.css["[foo]"]["h1"].style.backgroundColor = "yellow";

            Native.document.body.css["[foo]"][" h1"].style.backgroundColor = "yellow";
            Native.document.body.css["[foo='bar']"][" h1"].style.color = "red";
            Native.document.body.css["[foo='zoo']"][" h1"].style.color = "green";


            Native.document.body.css[x][page.Content].With(
                css =>
                {
                    css.style.borderLeft = "1em solid black";

                    page.Content.innerText = new { css.rule.selectorText }.ToString();

                }
            );



            Native.document.body.css[x].descendant[IHTMLElement.HTMLElementEnum.h1].style.borderLeft = "1em solid cyan";
            Native.document.body.css[new XAttribute("foo", "zoo")].descendant[IHTMLElement.HTMLElementEnum.h1].style.borderLeft = "1em solid cyan";

            //Native.document.body.css[e => e.getAttribute("foo") == "bar"]


            //Native.document.body.css.before.style.content = "attr(foo)";
            Native.document.body.css.before.contentXAttribute = x;

            new IHTMLButton { "foo" }.AttachToDocument().WhenClicked(
                 delegate
                 {
                     //x.AttachTo(Native.document.documentElement);
                     x.AttachTo(Native.document.body);


                 }
            );

            new IHTMLButton { "change foo" }.AttachToDocument().WhenClicked(
                delegate
                {
                    x.Value = "zoo";
                }
            );
        }
        /// <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)
        {
            // "X:\jsc.svn\examples\javascript\android\MultiMouse\MultiMouse.SVGCursor\MultiMouse.SVGCursor.csproj"

            new IStyle(Native.document.head.css | IHTMLElement.HTMLElementEnum.title).display = IStyle.DisplayEnum.block;

            var c = Native.document.documentElement.css.before;
            c.contentImage = new cursor1();

            var c0 = Native.document.documentElement.css.after;
            c0.contentImage = new cursor1();


            //Native.document.documentElement.style.cursorImage = new cursor1();

            new IStyle().cursorImage = new cursor1();



            var PointerLock_false = new XAttribute("PointerLock", Convert.ToString(false));

            PointerLock_false.AttachTo(Native.document.documentElement);

            Native.document.documentElement.css[PointerLock_false].before.style.visibility = IStyle.VisibilityEnum.hidden;
            Native.document.documentElement.css[PointerLock_false].after.style.visibility = IStyle.VisibilityEnum.hidden;

            var x = 0;
            var y = 0;


            (page.Foo.css + page.Foo.async.onclick).style.backgroundColor = "yellow";
            (page.Bar.css + page.Bar.async.onclick).style.backgroundColor = "cyan";

            Native.document.documentElement.style.overflow = IStyle.OverflowEnum.hidden;

            Native.document.documentElement.onclick +=
                e =>
                {
                    var pointerLock = e.Element == Native.document.pointerLockElement;

                    if (pointerLock)
                    {
                        Native.document.elementFromPoint(x, y).With(
                            z => z.click()
                        );

                    }
                };




            Native.document.documentElement.onmousedown +=
                e =>
                {
                    // this pauses pointerLockElement
                    //e.CaptureMouse();

                    if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
                    {
                        Native.document.documentElement.requestFullscreen();
                        Native.document.documentElement.requestPointerLock();
                    }
                    else
                    {
                        e.CaptureMouse();
                    }
                };


            Native.document.documentElement.onmousemove +=
                e =>
                {
                    // https://dvcs.w3.org/hg/pointerlock/raw-file/default/index.html#why-use-.movementx-y-instead-of-.deltax-y

                    var pointerLock = e.Element == Native.document.pointerLockElement;

                    PointerLock_false.Value = Convert.ToString(pointerLock);

                    if (pointerLock)
                    {
                        x = (x + e.movementX + Native.window.Width + cursor1.ImageDefaultWidth) % Native.window.Width - cursor1.ImageDefaultWidth;
                        y = (y + e.movementY + Native.window.Height + cursor1.ImageDefaultHeight) % Native.window.Height - cursor1.ImageDefaultHeight;
                    }
                    else
                    {
                        x = e.CursorX;
                        y = e.CursorY;
                    }


                    c.style.SetLocation(
                        x,
                        y + 1
                    );

                    x = (x + Native.window.Width) % Native.window.Width;
                    y = (y + Native.window.Height) % Native.window.Height;

                    c0.style.SetLocation(
                        x,
                        y + 1
                    );


                    var hot = Native.document.elementFromPoint(x, y);


                    //                    var target = document.elementFromPoint(x, y)
                    //if (target)
                    //  target.dispatchEvent(ee)


                    new { about = "middle click to see wrapping cursor", pointerLock, e.OffsetX, e.OffsetY, e.movementX, e.movementY, e.MouseButton, hot }.ToString().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(IApp page)
        {
            var x = new XAttribute("foo", "bar");

            //// should the intellisense say that we have .body available
            //// for html element
            ////Native.css.style.backgroundColor = "red";
            Native.css[x].style.backgroundColor = "red";

            x.AttachTo(Native.document.documentElement);

            //IStyleSheet.all["html[zoo]>body::after"].style.content = "h!";
            //IStyleSheet.all["body:after"].style.content = "'h!'";

            Console.WriteLine("we should have 1 rule");

            //// add it as is? what if we change the attributes value after?
            //// css selector shall use a snapshot of the [foo='bar']

            //// html cannot have :before?
            var z = Native.css[x][IHTMLElement.HTMLElementEnum.body];

            Console.WriteLine("we should still have 1 rule, the other is pending");

            var before1 = z.before;

            before1.content = "should have 2 styles";
            Console.WriteLine(new { before1 });

            //// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140204
            var before2 = z.before;

            before2.content = "should still have 2 styles. ?";
            Console.WriteLine(new { before2 });

            var after3 = z.after;
            after3.content = "this should be the 3rd style. next we will apply the or operator";

            var all = before1 | before2;
            all.style.color = "blue";
            // 4:21ms { all = { selectorElement = , rule = { selectorText = html[foo='bar']>body:before,html[foo='bar']>body:before, type = 1 } } } 
            Console.WriteLine(new { all });
            // 3:24ms { all = { selectorElement = , rule = { selectorText = html[foo='bar']>body:before, type = 1 } } } 

            var all1 = before1 | after3;
            all1.style.borderLeft = "1em solid yellow";
            Console.WriteLine("was this rul 4?");

            var all2 = before1 | after3;
            all2.style.borderRight = "1em solid yellow";
            Console.WriteLine("was this also rule 4?");


            //4:26ms was this rul 4? view-source:35502
            //5:26ms was this also rule 4? 

            //            4:29ms was this rul 4? view-source:35523
            //4:29ms was this also rule 4? view-source:35523


            //1:18ms we should still have 1 rule, the other is pending view-source:35482
            //2:18ms { before1 = { selectorElement = , rule = { selectorText = html[foo='bar']>body:before, type = 1 } } } view-source:35482
            //3:20ms { before2 = { selectorElement = , rule = { selectorText = html[foo='bar']>body:before, type = 1 } } } 

            // vs

            //            2:30ms { before1 = { selectorElement = , rule = { selectorText = html[foo='bar']>body:before, type = 1 } } } view-source:35494
            //2:31ms { before2 = { selectorElement = , rule = { selectorText = html[foo='bar']>body:before, type = 1 } } } 


        }
        public new CSSStyleRuleMonkier this[Task task]
        {
            // x:\jsc.svn\examples\javascript\async\asyncworkersourcesha1\asyncworkersourcesha1\application.cs

            get
            {

                //var TaskIdentity = new Random().Next();
                var TaskName = "incomplete";

                if (InternalTaskNameLookup.ContainsKey(task))
                {
                    TaskName = InternalTaskNameLookup[task];
                }

                InternalTaskIdentity++;
                var a = new XAttribute("await" + InternalTaskIdentity, TaskName);


                var s = this.selectorElement;
                var p = this;

                while (p != null)
                {
                    if (p.selectorElement != null)
                    {
                        s = p.selectorElement;

                        break;
                    }
                    p = this.parent;
                }

                a.AttachTo(s);

                var x = !this[a];
                // when complete
                x.__task = task;


                // overkill
                Native.window.onframe +=
                    delegate
                    {
                        if (a == null)
                            return;

                        if (task.IsCompleted)
                        {
                            if (InternalTaskNameLookup.ContainsKey(task))
                                InternalTaskNameLookup.Remove(task);


                            a.Remove();

                            a = null;
                        }
                    };

                // how should we be introducing the conditional? document level?

                return x;
            }

        }