<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../forms/resources/common.js"></script>
<script src="../../forms/resources/common-wheel-event.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
<script src="resources/suggestion-picker-common.js"></script>
</head>
<body style="background-color: #bbbbbb;">
<p id="description"></p>
<div id="console"></div>
<input type=datetime-local id=datetime-local value="2012-11-22T01:00" list=suggestions>
<datalist id=suggestions>
    <option label="Now">2012-11-22T01:01</option>
    <option>2012-11-22T01:02</option>
    <option>2012-11-22T01:03</option>
    <option>2012-11-22T01:04</option>
    <option>2012-11-22T01:05</option>
    <option>2012-11-22T01:06</option>
    <option>2012-11-22T01:07</option>
    <option>2012-11-22T01:08</option>
    <option>2012-11-22T01:09</option>
    <option>2012-11-22T01:10</option>
    <option>2012-11-22T01:11</option>
    <option>2012-11-22T01:12</option>
    <option>2012-11-22T01:13</option>
    <option>2012-11-22T01:14</option>
    <option>2012-11-22T01:15</option>
    <option>2012-11-22T01:16</option>
    <option>2012-11-22T01:17</option>
    <option>2012-11-22T01:18</option>
    <option>2012-11-22T01:19</option>
    <option>2012-11-22T01:20</option>
    <option>2012-11-22T01:21</option>
</datalist>
<script>
debug('Check that page popup doesn\'t exist at first.');
shouldBeNull('$("mock-page-popup")');

window.onload = function() {
    openPicker($('datetime-local'), test1);
};


function test1() {
    debug('Check that page popup exists.');
    shouldBeEqualToString('popupWindow.pagePopupController.toString()', '[object PagePopupController]');

    debug('Check that hovering over an entry highlights it.');
    hoverOverElement(popupWindow.document.querySelector('.suggestion-list-entry:nth-child(2)'));
    shouldBeEqualToString('highlightedEntry()', '2012-11-22T01:02');

    debug('Check that moving the mouse outside the popup de-highlights entries.');
    hoverOverElement(document.getElementById('description'));
    shouldBeNull('highlightedEntry()');

    debug('Check that mouse click closes the popup and sets the value.');
    clickElement(popupWindow.document.querySelector('.suggestion-list-entry:nth-child(3)'));
    waitUntilClosing(test1AfterClosing);
}

function test1AfterClosing() {
    shouldBeNull('document.getElementById("mock-page-popup")');
    shouldBeEqualToString('document.getElementById("datetime-local").value', '2012-11-22T01:03');

    openPicker($('datetime-local'), test2);
}

var scrollTopBeforeWheelEvent = 0;
var scrollTopAfterWheelEvent = 0;
var suggestionList;

function test2() {
    suggestionList = popupWindow.document.getElementsByClassName("suggestion-list")[0];

    debug('Check that you can scroll using the mouse wheel.');

    function finishTest() {
        popupWindow.focus();
        eventSender.keyDown('escape');
        waitUntilClosing(test2AfterClosing);
    }

    function scrollUp() {
        scrollTopBeforeWheelEvent = suggestionList.scrollTop;
        dispatchWheelEvent(suggestionList, 0, 100);
        shouldBecomeEqual('scrollTopBeforeWheelEvent > suggestionList.scrollTop', 'true', finishTest)
    }

    function scrollDown() {
        scrollTopBeforeWheelEvent = suggestionList.scrollTop;
        dispatchWheelEvent(suggestionList, 0, -100);
        shouldBecomeEqual('scrollTopBeforeWheelEvent < suggestionList.scrollTop', 'true', scrollUp);
    }

    scrollDown();
}

function test2AfterClosing() {
    shouldBeNull('$("mock-page-popup")');

    openPicker($('datetime-local'), test3);
}

function test3() {
    debug('Check that you can scroll using the scroll bar.');

    var suggestionList = popupWindow.document.getElementsByClassName('suggestion-list')[0];
    var suggestionListOffset = cumulativeOffset(suggestionList);
    var scrollbarCenterX = suggestionListOffset[0] + suggestionList.offsetWidth - popupWindow.getScrollbarWidth() / 2;

    scrollTopBeforeWheelEvent = suggestionList.scrollTop;
    eventSender.mouseMoveTo(scrollbarCenterX, suggestionListOffset[1] + 20); // 20 is the height of the up arrow button plus a few pixels
    eventSender.mouseDown();
    eventSender.mouseMoveTo(scrollbarCenterX, suggestionListOffset[1] + suggestionList.offsetHeight);
    eventSender.mouseUp();
    scrollTopAfterWheelEvent = suggestionList.scrollTop;
    shouldBeTrue('scrollTopBeforeWheelEvent < scrollTopAfterWheelEvent');

    finishJSTest();
}

</script>
</body>
</html>