<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>List Picker test</title>
<style>
body {
    background-color: #eeffff;
}
iframe {
    z-index: 2147483647;
    width: 100px;
    height: 100px;
    border: 0;
    overflow: hidden;
}
</style>
</head>
<body>

<p>This is a testbed for list picker.</p>

<div>
<select id="menu">
    <option value="0">foo</option>
    <option value="1">bar</option>
    <option value="2">bar</option>
    <optgroup label=bar>
        <option value="4">bar</option>
        <option value="5">bar</option>
    </optgroup>
    <option value="6">bar</option>
</select>
<iframe srcdoc="<!DOCTYPE html>"></iframe>

<ol id="console" style="font-family:monospace;">
</ol>

<script>
var pickerArguments = {
    selectedIndex: 0,
    children: [{
            type: "option",
            label: "foo",
            title: "",
            value: 0,
            ariaLabel: "",
            disabled: false,
            style: {
                color: "black",
                backgroundColor: "transparent",
                fontSize: "11px",
                fontWeight: "400",
                fontFamily: ["sans-serif"],
                visibility: "visible",
                display: "block",
                direction: "ltr",
                unicodeBidi: "normal"
            }
        }, {
            type: "option",
            label: "bar",
            title: "",
            value: 1,
            ariaLabel: "",
            disabled: false,
            style: {
                color: "black",
                backgroundColor: "transparent",
                fontSize: "11px",
                fontWeight: "400",
                fontFamily: ["sans-serif"],
                visibility: "visible",
                display: "block",
                direction: "ltr",
                unicodeBidi: "normal"
            }
        }, {
            type: "separator",
            label: "bar",
            title: "",
            value: 2,
            ariaLabel: "",
            disabled: false,
            style: {
                color: "black",
                backgroundColor: "transparent",
                fontSize: "11px",
                fontWeight: "400",
                fontFamily: ["sans-serif"],
                visibility: "visible",
                display: "block",
                direction: "ltr",
                unicodeBidi: "normal"
            }
        }, {
            type: "option",
            label: "bar",
            title: "",
            value: 2,
            ariaLabel: "",
            disabled: false,
            style: {
                color: "black",
                backgroundColor: "transparent",
                fontSize: "11px",
                fontWeight: "400",
                fontFamily: ["sans-serif"],
                visibility: "visible",
                display: "block",
                direction: "ltr",
                unicodeBidi: "normal"
            }
        }, {
        type: "optgroup",
        label: "foo",
        title: "",
        ariaLabel: "",
        disabled: false,
        children: [{
            type: "option",
            label: "bar",
            title: "",
            value: 3,
            ariaLabel: "",
            disabled: false,
            style: {
                color: "black",
                backgroundColor: "transparent",
                fontSize: "11px",
                fontWeight: "700",
                fontFamily: ["sans-serif"],
                visibility: "visible",
                display: "block",
                direction: "ltr",
                unicodeBidi: "normal"
            }
        },
        {
            type: "option",
            label: "bar",
            title: "",
            value: 4,
            ariaLabel: "",
            disabled: false,
            style: {
                color: "black",
                backgroundColor: "transparent",
                fontSize: "11px",
                fontWeight: "400",
                fontFamily: ["sans-serif"],
                visibility: "visible",
                display: "block",
                direction: "ltr",
                unicodeBidi: "normal"
            }
        }],
        style: {
            color: "black",
            backgroundColor: "transparent",
            fontSize: "11px",
            fontWeight: "400",
            fontFamily: ["sans-serif"],
            visibility: "visible",
            display: "block",
            direction: "ltr",
            unicodeBidi: "normal"
        }
    }, {
        type: "option",
        label: "bar",
        title: "",
        value: 5,
        ariaLabel: "",
        disabled: false,
        style: {
            color: "black",
            backgroundColor: "transparent",
            fontSize: "11px",
            fontWeight: "400",
            fontFamily: ["sans-serif"],
            visibility: "visible",
            display: "block",
            direction: "ltr",
            unicodeBidi: "normal"
        }
    }],
    anchorRectInScreen: {
        x: 1332,
        y: 356,
        width: 64,
        height: 18,
    },
};

function openListPicker(args) {
    var frame = document.getElementsByTagName('iframe')[0];
    var doc = frame.contentDocument;
    doc.documentElement.innerHTML = '<!DOCTYPE html><head></head><body><div id=main>Loading...</div></body>';
    var commonCssLink = doc.createElement('link');
    commonCssLink.rel = 'stylesheet';
    commonCssLink.href = '../../Source/core/html/forms/resources/pickerCommon.css?' + (new Date()).getTime();
    doc.head.appendChild(commonCssLink);
    var listPickerCssLink = doc.createElement('link');
    listPickerCssLink.rel = 'stylesheet';
    listPickerCssLink.href = '../../Source/core/html/forms/resources/listPicker.css?' + (new Date()).getTime();
    doc.head.appendChild(listPickerCssLink);
    var commonJsScript = doc.createElement('script');
    commonJsScript.src = '../../Source/core/html/forms/resources/pickerCommon.js?' + (new Date()).getTime();
    doc.body.appendChild(commonJsScript);
    var listPickerJsScript = doc.createElement('script');
    listPickerJsScript.src = '../../Source/core/html/forms/resources/listPicker.js?' + (new Date()).getTime();
    doc.body.appendChild(listPickerJsScript);

    var pagePopupController = {
        setValue: function(stringValue) {
            window.log('string="' + stringValue + '"');
            if (numValue == 0)
                window.document.getElementById('menu').value = stringValue;
        },
        setValueAndClosePopup: function(numValue, stringValue) {
            window.log('number=' + numValue + ', string="' + stringValue + '"');
            if (numValue == 0)
                window.document.getElementById('menu').value = stringValue;
        },
    }

    setTimeout(function() {
        frame.contentWindow.postMessage(JSON.stringify(args), "*");
        frame.contentWindow.pagePopupController = pagePopupController;
    }, 100);
}

function log(str) {
    var entry = document.createElement('li');
    entry.innerText = str;
    document.getElementById('console').appendChild(entry);
}

document.getElementsByTagName('iframe')[0].onload = function () {
    openListPicker(pickerArguments);
}
</script>
</body>
</html>