/// <reference path="../Scripts/jspack-vsdoc.js" />
var common = MindFusion.Common;
var ui = MindFusion.Common.UI;

// Create a new Accordion control.
var accordion = new ui.Accordion(document.getElementById("accordion"));
accordion.theme = "black";
accordion.setWidth("500px");
accordion.setHeight("100%");
accordion.itemSize = new common.Unit(40, common.UnitType.Pixel);

var item = new ui.AccordionItem("Components List");
item.imageSrc = "../images/icon_statistics.png";
item.template = "<div id='inner-content'></div>";
accordion.items.add(item);

var item = new ui.AccordionItem("Components Hierarchy");
item.imageSrc = "../images/icon_cargo.png";
item.template = "<div id='inner-content'></div>";
accordion.items.add(item);

var item = new ui.AccordionItem("Components Samples");
item.imageSrc = "../images/icon_person.png";
var t = document.createElement("div");
t.className = "image-list";
var img = document.createElement("img");
img.src = "../images/screenshots/Activities.png";
t.appendChild(img);
var img = document.createElement("img");
img.src = "../images/screenshots/Observatories.png";
t.appendChild(img);
var img = document.createElement("img");
img.src = "../images/screenshots/ServerLoad.png";
t.appendChild(img);
var img = document.createElement("img");
img.src = "../images/screenshots/TemperatureLog.png";
t.appendChild(img);
var img = document.createElement("img");
img.src = "../images/screenshots/WorldPopulation.png";
t.appendChild(img);

item.template = t.outerHTML;
accordion.items.add(item);

accordion.controlLoad.addEventListener((accordion) => loadItems(accordion));

// Render the accordion control.
accordion.render();

accordion.collapseItems();
accordion.expandItems(accordion.items.first());

function loadItems(sender, args) {
    var theme = "standard";

    // Create a new ListView control.
    var list = new ui.ListView();
    list.theme = theme;
    list.setWidth("100%");
    list.setHeight("100%");

    // Create some data for the list items.
    var data = ['ListView', 'TreeView', 'Window', 'TabControl', 'ImagePicker', 'CheckListBox', 'DateTimePicker'];

    // Create the list items.
    for (var i = 0; i < data.length; i++) {
        list.items.add(new ui.ListItem(data[i]));
    }

    var element = sender.items.first().element;
    element.querySelector("#inner-content").appendChild(list.draw());
    list.attach();


    // Create some data to use for tree nodes.
    var treeData = [
        {
            title: "List Controls",
            items: [{ title: "ListView" }, { title: "TreeView" }]

        },
        {
            title: "Window Controls",
            items: [{ title: "TabControl" }, { title: "Window" }]

        },
        {
            title: "Picker Controls",
            items: [{ title: "CheckListBox" }, { title: "ImagePicker" }, { title: "DateTimePicker" }]

        }];

    // Create a new TreeView control.
    var tree = new ui.TreeView();
    tree.theme = theme;
    tree.allowDrag = false;
    tree.setWidth("100%");
    tree.setHeight("100%");
    tree.fromObject(treeData);

    var element = sender.items.items()[1].element;
    element.querySelector("#inner-content").appendChild(tree.draw());
    tree.attach();
}
