

import * as ui from "@mindfusion/common-ui";
import * as common from "@mindfusion/common";

namespace Menu
{

	// Create a new Menu control.
	var menu = new ui.Menu();
	// Apply the custom css theme.
	menu.theme = "custom";
	menu.width = new common.Unit(200, common.UnitType.Pixel);
	menu.left = new common.Unit(20, common.UnitType.Pixel);
	menu.itemSize = new common.Unit(40, common.UnitType.Pixel);

	// Create a new MenuItem, displaying a link.
	var item = new ui.MenuItem("Home");
	item.imageSrc = "../assets/icon_home.png";
	item.href = "http://www.mindfusion.eu";
	menu.items.add(item);

	// Create a new MenuItem, displaying an icon and a text.
	// Add a 2-level child nodes hierarchy.
	var item = new ui.MenuItem("Products");
	item.imageSrc = "../assets/icon_delivery.png";
	menu.items.add(item);

	var cat1 = new ui.MenuItem("Category 1");
	var cat2 = new ui.MenuItem("Category 2");
	var cat3 = new ui.MenuItem("Category 3");

	item.items.add(cat1);
	item.items.add(cat2);
	item.items.add(cat3);

	var prod1 = new ui.MenuItem("Product 1");
	var prod2 = new ui.MenuItem("Product 2");
	var prod3 = new ui.MenuItem("Product 3");

	cat1.items.add(prod1);
	cat1.items.add(prod2);
	cat1.items.add(prod3);

	var prod1 = new ui.MenuItem("Product 1");
	var prod2 = new ui.MenuItem("Product 2");
	cat2.items.add(prod1);
	cat2.items.add(prod2);

	var prod1 = new ui.MenuItem("Product 1");
	var prod2 = new ui.MenuItem("Product 2");
	cat3.items.add(prod1);
	cat3.items.add(prod2);

	// Create a new MenuItem, displaying an icon and a text.
	var item = new ui.MenuItem("About");
	item.imageSrc = "../assets/icon_fish.png";
	menu.items.add(item);

	// Create a new MenuItem, displaying an icon and a text.
	var item = new ui.MenuItem("Contact");
	item.imageSrc = "../assets/icon_time.png";
	menu.items.add(item);

	// Create a new templated MenuItem.
	var card = new ui.MenuItem();
	card.size = new common.Unit(160, common.UnitType.Pixel);

	var t = document.createElement("div");
	t.className = "cardClass";

	var img = document.createElement("img");
	img.src = "../assets/h1.png";
	img.style.width = "100px";
	img.style.height = "100px";
	img.style.margin = "auto";
	t.appendChild(img);

	var span = document.createElement("span");
	span.style.fontSize = "larger";
	span.innerText = "Armillaria Ponderosa";
	t.appendChild(span);

	var span = document.createElement("span");
	span.innerText = "[50.010083,-110.113006]";
	t.appendChild(span);

	card.template = t.outerHTML;

	item.items.add(card);

	// Draw and attach the menu control.
	document.body.appendChild(menu.draw());
	menu.attach();

}