<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Calendar 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 date suggestion picker.</p>
<select onchange="selected(this)">
 <option>with datalist</option>
 <option>with long datalist</option>
 <option>Arabic with datalist</option>
 <option>Arabic with long datalist</option>
</select>

<div><input type="text" id="date"></div>
<iframe></iframe>

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

<script>
var datalistArguments = {
    locale: 'en-US',
    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    todayLabel : 'Today',
    clearLabel : 'Clear',
    cancelLabel : 'Cancel',
    weekStartDay : 0,
    step : "86400000",
    stepBase: "0",
    max : '2099-12-31',
    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
    showOtherDateEntry: true,
    otherDateLabel: 'Other...',
    inputWidth: 127,
    suggestionHighlightColor: "#0000ff",
    suggestionHighlightTextColor: "#ffffff"
};
var longDatalistArguments = {
    locale: 'en-US',
    dayLabels : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    todayLabel : 'Today',
    clearLabel : 'Clear',
    cancelLabel : 'Cancel',
    weekStartDay : 0,
    step : "86400000",
    stepBase: "0",
    max : '2099-12-31',
    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
        "2012-03-30", "2012-03-31"],
    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", ""],
    showOtherDateEntry: true,
    otherDateLabel: 'Other...',
    inputWidth: 127,
    suggestionHighlightColor: "#0000ff",
    suggestionHighlightTextColor: "#ffffff"
};

var arabicDatalistArguments = {
    locale: 'ar',
    isRTL: true,
    isCalendarRTL: true,
    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
    todayLabel : 'اليوم',
    clearLabel : 'مسح',
    weekStartDay : 5,
    step : "86400000",
    stepBase: "0",
    max : '2020-05-15',
    suggestionValues : ['2012-01-01', '2012-06-03', '2012-09-06', '2012-12-24'],
    localizedSuggestionValues : ['1/1/12', '6/3/12', '9/6/12', '12/24/12'],
    suggestionLabels : ['', 'Birthday', '', 'Christmas'],
    showOtherDateEntry: true,
    otherDateLabel: 'Other...',
    inputWidth: 127,
    suggestionHighlightColor: "#0000ff",
    suggestionHighlightTextColor: "#ffffff"
};

var arabicLongDatalistArguments = {
    locale: 'ar',
    isRTL: true,
    isCalendarRTL: true,
    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
    todayLabel : 'اليوم',
    clearLabel : 'مسح',
    weekStartDay : 5,
    step : "86400000",
    stepBase: "0",
    max : '2020-05-15',
    suggestionValues: ["2012-01-01", "2012-01-02", "2012-01-03", "2012-01-04",
        "2012-01-05", "2012-01-06", "2012-01-07", "2012-01-08", "2012-01-09",
        "2012-01-10", "2012-01-11", "2012-01-12", "2012-01-13", "2012-01-14",
        "2012-01-15", "2012-01-16", "2012-01-17", "2012-01-18", "2012-01-19",
        "2012-01-20", "2012-01-21", "2012-01-22", "2012-01-23", "2012-01-24",
        "2012-01-25", "2012-01-26", "2012-01-27", "2012-01-28", "2012-01-29",
        "2012-01-30", "2012-01-31", "2012-02-01", "2012-02-02", "2012-02-03",
        "2012-02-04", "2012-02-05", "2012-02-06", "2012-02-07", "2012-02-08",
        "2012-02-09", "2012-02-10", "2012-02-11", "2012-02-12", "2012-02-13",
        "2012-02-14", "2012-02-15", "2012-02-16", "2012-02-17", "2012-02-18",
        "2012-02-19", "2012-02-20", "2012-02-21", "2012-02-22", "2012-02-23",
        "2012-02-24", "2012-02-25", "2012-02-26", "2012-02-27", "2012-02-28",
        "2012-02-29", "2012-03-01", "2012-03-02", "2012-03-03", "2012-03-04",
        "2012-03-05", "2012-03-06", "2012-03-07", "2012-03-08", "2012-03-09",
        "2012-03-10", "2012-03-11", "2012-03-12", "2012-03-13", "2012-03-14",
        "2012-03-15", "2012-03-16", "2012-03-17", "2012-03-18", "2012-03-19",
        "2012-03-20", "2012-03-21", "2012-03-22", "2012-03-23", "2012-03-24",
        "2012-03-25", "2012-03-26", "2012-03-27", "2012-03-28", "2012-03-29",
        "2012-03-30", "2012-03-31"],
    localizedSuggestionValues: ["1/1/12", "1/2/12", "1/3/12", "1/4/12",
        "1/5/12", "1/6/12", "1/7/12", "1/8/12", "1/9/12", "1/10/12", "1/11/12",
        "1/12/12", "1/13/12", "1/14/12", "1/15/12", "1/16/12", "1/17/12",
        "1/18/12", "1/19/12", "1/20/12", "1/21/12", "1/22/12", "1/23/12",
        "1/24/12", "1/25/12", "1/26/12", "1/27/12", "1/28/12", "1/29/12",
        "1/30/12", "1/31/12", "2/1/12", "2/2/12", "2/3/12", "2/4/12", "2/5/12",
        "2/6/12", "2/7/12", "2/8/12", "2/9/12", "2/10/12", "2/11/12", "2/12/12",
        "2/13/12", "2/14/12", "2/15/12", "2/16/12", "2/17/12", "2/18/12",
        "2/19/12", "2/20/12", "2/21/12", "2/22/12", "2/23/12", "2/24/12",
        "2/25/12", "2/26/12", "2/27/12", "2/28/12", "2/29/12", "3/1/12",
        "3/2/12", "3/3/12", "3/4/12", "3/5/12", "3/6/12", "3/7/12", "3/8/12",
        "3/9/12", "3/10/12", "3/11/12", "3/12/12", "3/13/12", "3/14/12", 
        "3/15/12", "3/16/12", "3/17/12", "3/18/12", "3/19/12", "3/20/12",
        "3/21/12", "3/22/12", "3/23/12", "3/24/12", "3/25/12", "3/26/12",
        "3/27/12", "3/28/12", "3/29/12", "3/30/12", "3/31/12"],
    suggestionLabels: ["Today", "Tomorrow", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
        "", "", "", "", "", "", "", ""],
    showOtherDateEntry: true,
    otherDateLabel: 'Other...',
    inputWidth: 127,
    suggestionHighlightColor: "#0000ff",
    suggestionHighlightTextColor: "#ffffff"
};

function openCalendar(args) {
    var frame = document.getElementsByTagName('iframe')[0];
    var doc = frame.contentDocument;
    doc.documentElement.innerHTML = '<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 buttonCssLink = doc.createElement('link');
    buttonCssLink.rel = 'stylesheet';
    buttonCssLink.href = '../../Source/core/html/forms/resources/pickerButton.css?' + (new Date()).getTime();
    doc.head.appendChild(buttonCssLink);
    var suggestionPickerCssLink = doc.createElement('link');
    suggestionPickerCssLink.rel = 'stylesheet';
    suggestionPickerCssLink.href = '../../Source/core/html/forms/resources/suggestionPicker.css?' + (new Date()).getTime();
    doc.head.appendChild(suggestionPickerCssLink);
    var link = doc.createElement('link');
    link.rel = 'stylesheet';
    link.href = '../../Source/core/html/forms/resources/calendarPicker.css?' + (new Date()).getTime();
    doc.head.appendChild(link);
    var commonJsScript = doc.createElement('script');
    commonJsScript.src = '../../Source/core/html/forms/resources/pickerCommon.js?' + (new Date()).getTime();
    doc.body.appendChild(commonJsScript);
    var suggestionPickerJsScript = doc.createElement('script');
    suggestionPickerJsScript.src = '../../Source/core/html/forms/resources/suggestionPicker.js?' + (new Date()).getTime();
    doc.body.appendChild(suggestionPickerJsScript);
    var script = doc.createElement('script');
    script.src = '../../Source/core/html/forms/resources/calendarPicker.js?' + (new Date()).getTime();
    doc.body.appendChild(script);

    var pagePopupController = {
        setValueAndClosePopup: function(numValue, stringValue) {
            window.log('number=' + numValue + ', string="' + stringValue + '"');
            if (numValue == 0)
                window.document.getElementById('date').value = stringValue;
        },
        localizeNumberString: function(numString) {
            if (typeof numString == "number")
                return numString.toLocaleString();
            return numString.toString();
        },
        histogramEnumeration: function() {},
        formatMonth: function(year, zeroBaseMonth) {
            var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
                               '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
            return monthLabels[zeroBaseMonth] + " " + year;
        }
    }

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

function selected(select) {
    var frame = document.getElementsByTagName('iframe')[0];
    frame.style.width = '100px';
    frame.style.height = '100px';
    switch (select.selectedIndex) {
    case 0:
        openCalendar(datalistArguments);
        break;
    case 1:
        openCalendar(longDatalistArguments);
        break;
    case 2:
        openCalendar(arabicDatalistArguments);
        break;
    case 3:
        openCalendar(arabicLongDatalistArguments);
        break;
    }
}

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

openCalendar(englishArguments);
</script>
</body>
</html>