.NET to Javascript compiler

C# code   Html page   Start
public class TabStripApp
{
    static readonly Item[] items = new Item[] { new Item("White", false, false), 
        new Item("Red", false, true), 
        new Item("Disabled 1", true, true), 
        new Item("Orange", true, false), 
        new Item("Yellow", false, false),
        new Item("Disabled 2", false, false), 
        new Item("Green", true, true),
        new Item("Aqua", false, false),
        new Item("Blue", false, false), 
        new Item("Purple", false, false), 
        new Item("Disabled 3", false, false), 
        new Item("Black", true, false)
    };

    readonly HtmlElement elem;
    readonly TabStrip tabStrip;
    readonly HtmlRadioButton[] verticalAlignments;
    readonly HtmlRadioButton[] horizontalAlignments;
    readonly HtmlRadioButton[] headerAlignments;

    TabStripApp()
    {
        elem = HtmlDocument.Current.GetElementById("tabStrip");
        tabStrip = new TabStrip(elem);
        AttachTabStrip(tabStrip);

        verticalAlignments = new HtmlRadioButton[] {
            (HtmlRadioButton)HtmlDocument.Current.GetElementById("top"),
            (HtmlRadioButton)HtmlDocument.Current.GetElementById("bottom")
        };

        horizontalAlignments = new HtmlRadioButton[] {
            (HtmlRadioButton)HtmlDocument.Current.GetElementById("left"),
            (HtmlRadioButton)HtmlDocument.Current.GetElementById("right")
        };

        headerAlignments = new HtmlRadioButton[] {
            (HtmlRadioButton)HtmlDocument.Current.GetElementById("beforeBack"),
            (HtmlRadioButton)HtmlDocument.Current.GetElementById("betweenBackAndForward"),
            (HtmlRadioButton)HtmlDocument.Current.GetElementById("afterForward")
        };

        HtmlDocument.Current.GetElementById("settings").AdviseClick(settings_Click);
        GridApp.ResizeMainElement(elem);
    }

    public static void Start()
    {
        new TabStripApp();
    }

    void settings_Click(HtmlMouseEvent e)
    {
        tabStrip.VerticalAlignment = (VerticalAlignment)GetChecked(verticalAlignments);
        tabStrip.HorizontalAlignment = (HorizontalAlignment)GetChecked(horizontalAlignments);
        tabStrip.HeaderAlignment = (HeaderAlignment)GetChecked(headerAlignments);
    }

    static int GetChecked(HtmlRadioButton[] buttons)
    {
        for (int i = 0; i < buttons.Length; i++)
        {
            if (buttons[i].Checked)
            {
                return i;
            }
        }

        return -1;
    }

    internal static void AttachTabStrip(TabStrip tabStrip)
    {
        tabStrip.Renderer = delegate(IHeaderItem headerItem, object data) { Render(headerItem, (Item)data); };
        tabStrip.Selection.Advise(delegate() { tab_SelectionChage(tabStrip); });
        tabStrip.List = new ObservableList<Item>(items);
        tabStrip.Selection.SelectedIndex = 0;
    }

    static void tab_SelectionChage(TabStrip tabStrip)
    {
        if (tabStrip.Selection.SelectedIndex >= 0)
        {
            Item item = tabStrip.List[tabStrip.Selection.SelectedIndex] as Item;
            if (item != null && tabStrip.SelectedPane != null)
            {
                tabStrip.SelectedPane.ClassName = item.Title;
            }
        }
    }

    static void Render(IHeaderItem headerItem, Item item)
    {
        if (headerItem.State != item)
        {
            headerItem.Element.InnerText = item.Title;
            headerItem.Element.ClassName = item.Title;
            headerItem.Enabled = item.Enabled;
            headerItem.SeparatorBefore = item.SeparatorBefore;
            headerItem.SeparatorAfter = item.SeparatorAfter;
            headerItem.State = item;
        }
    }

    class Item
    {
        internal readonly string Title;
        internal readonly bool Enabled;
        internal readonly bool SeparatorBefore;
        internal readonly bool SeparatorAfter;

        internal Item(string title, bool separatorBefore, bool separatorAfter)
        {
            Title = title;
            Enabled = !title.StartsWith("Disabled");
            SeparatorBefore = separatorBefore;
            SeparatorAfter = separatorAfter;
        }
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;width:100%;height:100%">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
    <meta http-equiv="x-ua-compatible" content="IE=11;IE=10;IE=9;IE=8;IE=7" />
    <link rel="stylesheet" href="styles/jscriptsuite.css" type="text/css" />
    <link rel="stylesheet" href="styles/summary.css" type="text/css" />
    <script language="javascript" type="text/javascript" src="js/tabstrip.js"></script>
	</head>
  <body onload="javascript:StartScript()" scroll="no" style="overflow:hidden;width:100%;height:100%;margin:0 0 0 0">
    tab.html: tab control.
    <table cellpadding="2" cellspacing="0" id="settings">
      <tr>
        <td>
          Vertical Alignment
        </td>
        <td style="padding:4px">&#160;</td>
        <td style="border-left:1px solid #cccccc;padding:4px">&#160;</td>
        <td>
          Horizontal Alignment
        </td>
        <td style="padding:4px">&#160;</td>
        <td style="border-left:1px solid #cccccc;padding:4px">&#160;</td>
        <td>
          Header Alignment
        </td>
      </tr>
      <tr>
        <td>
          <input type ="radio" id="top" name="verticalAlignment" checked="checked"/>
          <label for="top">Top</label>

          <input type ="radio" id="bottom" name="verticalAlignment"/>
          <label for="bottom">Bottom</label>
        </td>
        <td style="padding:4px">&#160;</td>
        <td style="border-left:1px solid #cccccc">&#160;</td>
        <td>
          <input type ="radio" id="left" name="horizontalAlignment" checked="checked"/>
          <label for="left">Left</label>

          <input type ="radio" id="right" name="horizontalAlignment"/>
          <label for="right">Right</label>
        </td>
        <td style="padding:4px">&#160;</td>
        <td style="border-left:1px solid #cccccc">&#160;</td>
        <td>
          <input type ="radio" id="beforeBack" name="headerAlignment" checked="checked"/>
          <label for="beforeBack">Before Back</label>

          <input type ="radio" id="betweenBackAndForward" name="headerAlignment"/>
          <label for="betweenBackAndForward">Between Back and Forward</label>

          <input type ="radio" id="afterForward" name="headerAlignment"/>
          <label for="afterForward">After Forward</label>
        </td>
      </tr>
    </table>
    <div id="tabStrip" style="width:100%"></div>
</body>
</html>

© 2009 JScriptSuite. All rights reserved.