/// <reference path="../GeneratedArtifacts/viewModel.js" />

function createTabItem(tabName, element, contentItem) {
    var ul = $("<ul class='msls-tile-list ui-listview' style='margin: 0px;' data-role='listview' data-inset='false'></ul>").appendTo($(element));
    var liClass = "ui-li ui-btn ui-btn-up-a";
    var divClass = "msls-presenter msls-list-child msls-ctl-group-custom-control msls-vauto msls-hstretch msls-compact-padding msls-presenter-content msls-hscroll";
    var border = "border-left-width:1px; border-right-width:1px; border-top-width:1px; border-bottom-width:1px;";
    var width = "width:254px;";
    var vsColor = "background:#68217a;";

    var items = [];
    var excluded = ["Screen", "AddEditGDPItem", "ViewGDPItem"];
    excluded.push(contentItem.screen.details.getModel().name);

    $.each(myapp, function (key, value) {
        if (key.slice(0, 4) === "show") {
            var name = key.substring(4);

            if (excluded.indexOf(name) < 0 && name.substr(0, tabName.length) === tabName) {
                myapp[name].prototype.constructor([], undefined);
                var model = myapp[name].prototype.details.getModel();
                var display = model.displayName;
                var tap = " onclick=myapp." + key + "()";
                var li = "<li title='" + display + "' class='" + liClass + "' data-msls='true' style='" + width + border + "'" + tap + ">";
                var div = "<div class='" + divClass + "'><table><tr><td><img src='Icons/" + name + ".png'/></td><td><span>" + display + "</span></td></tr></table></div></li>";
                items.push(li + div);
            }
        }
    });

    items.sort();
    $(items.join("\r\n")).appendTo(ul);
}

myapp.Home.GridContent_render = function (element, contentItem) {
    createTabItem("Grid", element, contentItem);
};

myapp.Home.ChartContent_render = function (element, contentItem) {
    createTabItem("Chart", element, contentItem);
    createTabItem("Pie", element, contentItem);
};

myapp.Home.GaugeContent_render = function (element, contentItem) {
    createTabItem("Gauge", element, contentItem);
    createTabItem("LinearGauge", element, contentItem);
    createTabItem("BulletGraph", element, contentItem);
    createTabItem("RadialGauge", element, contentItem);
};

myapp.Home.InputContent_render = function (element, contentItem) {
    createTabItem("Input", element, contentItem);
};

myapp.Home.SelectContent_render = function (element, contentItem) {
    createTabItem("Select", element, contentItem);
};

myapp.Home.MenuContent_render = function (element, contentItem) {
    createTabItem("Menu", element, contentItem);
};