<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Calendar Picker test</title>
<style>
body {
    background-color: #eeffff;
    line-height: 1.4em;
    font-family: Helvetica, sans-serif;
}
label {
    width: 160px;
    display: inline-block;
}
iframe {
    z-index: 2147483647;
    width: 100px;
    height: 100px;
    border: 0;
    overflow: hidden;
}
</style>
</head>
<body>

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

<h2>Preview</h2>

<input type="text" id="date" style="margin: 0;"><br>
<iframe></iframe>

<h2>Console</h2>

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

<h2>Config</h2>
<form action="" method="GET">
    <fieldset>
        <legend>Locale</legend>
        
        <label for="locale">Locale</label>
        <select name="locale" id="config_locale">
            <!-- Populated from locale_data. -->
        </select>
        <br />
        <label for="locale_rtl">Locale RTL</label>
        <input type="checkbox" name="locale_rtl" id="config_locale_rtl" value="true">
        <br />
        <label for="week_start_day">Week start day</label>
        <select name="week_start_day" id="config_week_start_day">
            <option value="0">Sunday</option>
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
        </select>
    </fieldset>

    <fieldset>
        <legend>Attributes</legend>
        
        <label for="type">[type]</label>
        <select name="type" id="config_type">
            <option>date</option>
            <option>week</option>
            <option>month</option>
        </select>
        <br />
        <label for="value">[value]</label>
        <input type="text" name="value" id="config_value">
        <br />
        <label for="min">[min]</label>
        <input type="text" name="min" id="config_min">
        <br />
        <label for="max">[max]</label>
        <input type="text" name="max" id="config_max">
        <br />
        <label for="step">[step]</label>
        <input type="number" name="step" id="config_step">
    </fieldset>
    <input type="submit" value="Submit">
</form>

<script>
function getParam(key) {
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var pattern = "[\\?&]" + key + "=([^&#]*)";
    var regex = new RegExp(pattern);
    var results = regex.exec(window.location.search);
    if (!results)
        return "";
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

function setParam(key, value) {
    key = escape(key);
    value = escape(value);

    var kvp = document.location.search.substr(1).split('&');

    for (var i = kvp.length - 1; i >= 0; --i){
        kvp[i]
        var x = kvp[i].split('=');
        if (x[0] === key) {
            x[1] = value;
            kvp[i] = x.join('=');
            break;
        }
    }

    if (i < 0)
        kvp[kvp.length] = key + "=" + value;

    document.location.search = kvp.join('&');
}

function $(id) {
    return document.getElementById(id);
}

var config = {};
function initializeConfig() {
    for (locale in locale_data) {
        var option = document.createElement("option");
        option.setAttribute("label", locale_data[locale].displayName);
        option.setAttribute("value", locale);
        $("config_locale").appendChild(option);
    }
    
    config.locale = getParam("locale") || "en_US";
    config.isLocaleRTL = getParam("locale_rtl") === "true";
    config.weekStartDay = parseInt(getParam("weekStartDay") || "0", 10);
    config.type = getParam("type") || "date";
    config.value = getParam("value") || "";
    config.min = getParam("min") || "";
    config.max = getParam("max") || "";
    config.step = getParam("step") || "1";

    $("config_locale").value = config.locale;
    $("config_locale_rtl").checked = config.isLocaleRTL;
    $("config_week_start_day").value = config.weekStartDay;
    $("config_type").value = config.type;
    $("config_value").value = config.value;
    $("config_min").value = config.min;
    $("config_max").value = config.max;
    $("config_step").value = config.step;
};

var locale_data = {
    "en_US": {
        "displayName": "English (United States)",
        "shortMonthLabels": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
        ],
        "dayLabels": [
        "S",
        "M",
        "T",
        "W",
        "T",
        "F",
        "S"
        ],
    },
    "ja": {
        "displayName": "Japanese",
        "shortMonthLabels": [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
        ],
        "dayLabels": [
        "日",
        "月",
        "火",
        "水",
        "木",
        "金",
        "土"
        ],
    },
    "ar": {
        "displayName": "Arabic",
        "shortMonthLabels": [
        "يناير",
        "فبراير",
        "مارس",
        "أبريل",
        "مايو",
        "يونيو",
        "يوليو",
        "أغسطس",
        "سبتمبر",
        "أكتوبر",
        "نوفمبر",
        "ديسمبر"
        ],
        "dayLabels": [
        "ح",
        "ن",
        "ث",
        "ر",
        "خ",
        "ج",
        "س"
        ],
    },
    "vi": {
        "displayName": "Vietnamese",
        "shortMonthLabels": [
        "thg 1",
        "thg 2",
        "thg 3",
        "thg 4",
        "thg 5",
        "thg 6",
        "thg 7",
        "thg 8",
        "thg 9",
        "thg 10",
        "thg 11",
        "thg 12"
        ],
        "dayLabels": [
        "CN",
        "T2",
        "T3",
        "T4",
        "T5",
        "T6",
        "T7"
        ],
    },
};

function createParam() {
    return {
        mode: config.type,
        locale: config.locale,
        weekStartDay: config.weekStartDay,
        isLocaleRTL: config.isLocaleRTL,
        dayLabels: locale_data[config.locale].dayLabels,
        shortMonthLabels: locale_data[config.locale].shortMonthLabels,
        max: config.max,
        min: config.min,
        step: config.step * (config.type === "month" ? 1 : 86400000),
        stepBase: "0",
        currentValue: config.value,
        axShowMonthSelector: "Show month selection panel",
        axShowNextMonth: "Show next month",
        axShowPreviousMonth: "Show previous month",
        todayLabel: "Today",
    }
};

function openCalendar() {
    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;
        },
        setValue: function(stringValue) {
            window.log('string="' + stringValue + '"');
            window.document.getElementById('date').value = stringValue;
        },
        closePopup: function() {
            window.log('closePopup');
        },
        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;
        },
        formatShortMonth: function(year, zeroBaseMonth) {
            var monthLabels = ['<Jan>', '<Feb>', '<Mar>', '<Apr>', '<May>', '<Jun>',
                               '<Jul>', '<Aug>', '<Sept>', '<Oct>', '<Nov>', '<Dec>'];
            return monthLabels[zeroBaseMonth] + " " + year;
        },
        formatWeek: function(year, week, startDate) {
            return '' + year + '-W' + week + ' starting on ' + startDate;
        }
    }

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

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

window.onload = function() {
    initializeConfig();
    openCalendar();
};
</script>
</body>
</html>