// Initialize our column object, passing the screen required, all others optional
        public MetroColumn(MetroScreen metroScreen, string titleText = "", string onClick = "", string navUrl = "")
        {
            // Look to see if there is a "last" column in the list, if not returns null
            MetroColumn lastColumnAdded = metroScreen.Columns.LastOrDefault();

            // Set the defaults for columns
            this.LeftMargin = metroScreen.TilesStartLeftMargin;
            this.TilesTopMargin = metroScreen.TilesStartTopMargin;
            this.SpacingBetweenTiles = metroScreen.SpacingBetweenTiles;
            this.NavUrl = navUrl;
            this.Position = 0;

            // If this is not the first column, calculate the left margins based on the previous column
            if (lastColumnAdded != null)
            {
                lastColumnAdded.Width = lastColumnAdded.Rows.OrderBy(e => e.Width).LastOrDefault().Width;
                this.LeftMargin = lastColumnAdded.LeftMargin + lastColumnAdded.Width + metroScreen.SpacingBetweenColumns;
                this.Position = lastColumnAdded.Position+1;
            }

            // Set the column title and click event
            this.TitleText = titleText;
            this.OnClick = onClick;

            // Create our default list of rows for this column
            this.Rows = new List<MetroRow>();
        }
        public ActionResult Index()
        {
            // Some temp variables to make life a bit more cleaner
            MetroTile aTile;
            MetroColumn aColumn;
            MetroRow aRow;


            // =============================================================================
            // =============================================================================
            // Everything starts with a screen object
            // =============================================================================
            // =============================================================================
            MetroScreen metroScreen = new MetroScreen(145, 10, 0, 45);


            // =============================================================================
            // =============================================================================
            // Lets create a column (group)
            //      Steps:
            //          1. Add a column to the screen object
            //          2. Add a row to the column
            //          3. Add tiles to your row
            //          4. As necessary, keep adding rows to the column and tiles to rows
            // =============================================================================
            // =============================================================================
            aColumn = metroScreen.AddColumn("Column0", "window.alert('Column 0 title clicked!')");

            // Now a row within this column
            aRow = aColumn.AddRow();

            // How about some tiles to this row, specific to this column
            // Only need to grab the tile if you want to add additional property values
            aTile = aRow.AddTile(TileType.ScrollingText, TileWidth.Wide, TileHeight.Normal, "orange", "Tile0", "window.alert('Tile 0_0_0')");
            aTile.LabelText = "Label";
            aTile.Text.Add("This is a scrolling text tile...");
            aTile.Text.Add("You can add as many lines as needed...");
            aTile.Text.Add("Easy peasy!!");

            // Now another row, within this column
            aRow = aColumn.AddRow();

            // Tiles for this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "purple", "Tile1", "window.alert('Tile 0_1_1')");
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "purple", "Tile2", "window.alert('Tile 0_1_2')");

            // Now our final row, within this column
            aRow = aColumn.AddRow();

            // And our final tile in this row, specific to this column
            aTile = aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightblue", "Tile3", "window.alert('Tile 0_2_3')");
            aTile.Text.Add("This is a simple tile, Text, No Image");


            // =============================================================================
            // =============================================================================
            // Lets create aanother column (group)
            //      Steps:
            //          1. Add a column to the screen object
            //          2. Add a row to the column
            //          3. Add tiles to your row
            //          4. As necessary, keep adding rows to the column and tiles to rows
            //
            // Notice this one has no title and obviously no onClick
            // =============================================================================
            // =============================================================================
            aColumn = metroScreen.AddColumn("Column1");

            // Now a row within this column
            aRow = aColumn.AddRow();

            // How about some tiles to this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "red", "Tile0", "window.alert('Tile 1_0_0')");

            // now another row, within this column
            aRow = aColumn.AddRow();

            // Tiles for this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile1", "window.alert('Tile 1_1_1')");
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile2", "window.alert('Tile 1_1_2')");

            // now our final row, within this column
            aRow = aColumn.AddRow();

            // and our final tile in this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightgreen", "Tile3", "window.alert('Tile 1_2_3')");


            // =============================================================================
            // =============================================================================
            // Lets create another column (group)
            //      Steps:
            //          1. Add a column to the screen object
            //          2. Add a row to the column
            //          3. Add tiles to your row
            //          4. As necessary, keep adding rows to the column and tiles to rows
            //
            // Notice this column has a title, no click event
            // =============================================================================
            // =============================================================================
            aColumn = metroScreen.AddColumn("Column2");

            // Now a row within our column
            aRow = aColumn.AddRow();

            // How about some tiles to this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "red", "Tile0", "window.alert('Tile 2_0_0')");

            // now another row, within this column
            aRow = aColumn.AddRow();

            // Tiles for this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile1", "window.alert('Tile 2_1_1')");
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile2", "window.alert('Tile 2_1_2')");

            // now our final row, within this column
            aRow = aColumn.AddRow();

            // and our final tile in this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightgreen", "Tile3", "window.alert('Tile 2_2_3')");


            // =============================================================================
            // =============================================================================
            // Lets create our final column (group)
            //      Steps:
            //          1. Add a column to the screen object
            //          2. Add a row to the column
            //          3. Add tiles to your row
            //          4. As necessary, keep adding rows to the column and tiles to rows
            //
            // Notice this column has a title, no click event
            // =============================================================================
            // =============================================================================
            aColumn = metroScreen.AddColumn("Column3");

            // Now a row within our column
            aRow = aColumn.AddRow();

            // How about some tiles to this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "red", "Tile0", "window.alert('Tile 3_0_0')");

            // now another row, within this column
            aRow = aColumn.AddRow();

            // Tiles for this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile1", "window.alert('Tile 3_1_1')");
            aRow.AddTile(TileType.Simple, TileWidth.Half, TileHeight.Normal, "pink", "Tile2", "window.alert('Tile 3_1_2')");

            // now our final row, within this column
            aRow = aColumn.AddRow();

            // and our final tile in this row, specific to this column
            aRow.AddTile(TileType.Simple, TileWidth.Wide, TileHeight.Normal, "lightgreen", "Tile3", "window.alert('Tile 3_2_3')");


            // =============================================================================
            // =============================================================================
            // Done with creating our columns and tiles
            //
            // Lets get the html to define our screen
            // =============================================================================
            // =============================================================================
            string colHtml = null;
            string tileHtml = null;
            string configVariables = null;

            // Build our html for the screen
            foreach (MetroColumn column in metroScreen.Columns)
            {
                // first lets get the html for this columns header
                colHtml += column.GetTitleHtml();

                // Lets get the html for the tiles associated with this column
                tileHtml += column.GetTileHtml();

            }

            // create our variables for the javascript side
            configVariables = metroScreen.GetClientConfig();

            // lets put the html and script in the global data space for the view
            ViewData["configVariables"] = configVariables;
            ViewData["metroHtml"] = colHtml + tileHtml;

            return View();
        }