/*
 * Copyright (C) Research In Motion Limited, 2012. All rights reserved.
 */

// Upon the user making a selection, I will call window.setValueAndClosePopup with a binary string where
// the character at index i being '1' means that the option at index i is selected.
(function (){

    var selectOption = function (event) {
        for (var option = document.getElementById('select-area').firstChild; option; option = option.nextSibling) {
            if (option === event.target) {
                if (option.className.indexOf('selected') === -1) {
                    option.className += ' selected';
                }
            } else {
                option.className = option.className.replace('selected', '');
            }
        }
        done();
    };

    var toggleOption = function (event) {
        if (event.target.className.indexOf('selected') === -1) {
            event.target.className += ' selected';
        } else {
            event.target.className = event.target.className.replace('selected', '');
        }
    };

    var done = function () {
        var result = '';
        for (var option = document.getElementById('select-area').firstChild; option; option = option.nextSibling) {
            if (option.className.indexOf('selected') === -1) {
                result += '0';
            } else {
                result += '1';
            }
        }
        window.setValueAndClosePopup(result, window.popUp);
    };

    /* multiple - a boolean
     * labels - an array of strings
     * enableds - an array of booleans.
     *   -I will assume that the HTML "disabled optgroups disable all options in the optgroup" hasn't been applied,
     *    so if the index corresponds to an optgroup, I will render all of its options as disabled
     * itemTypes - an array of integers, 0 === option, 1 === optgroup, 2 === option in optgroup
     * selecteds - an array of booleans
     * buttonText - a string to use for the button presented when multiple is true. Like "OK" or "Done" or something.
     */
    var show = function (multiple, labels, enableds, itemTypes, selecteds, buttonText) {
        var i,
            size = labels.length,
            popup = document.createElement('div'),
            select = document.createElement('div');

        popup.className = 'popup-area';
        select.className = 'select-area';
        select.id = 'select-area';
        popup.appendChild(select);

        for (i = 0; i < size; i++) {
            // TODO: handle itemTypes
            var option = document.createElement('div');
            option.className = 'option' + (enableds[i] ? '' : ' disabled') + (selecteds[i] ? ' selected' : '');
            option.appendChild(document.createTextNode(labels[i]));
            if (!multiple) {
                option.addEventListener('click', selectOption);
            } else if (enableds[i]) {
                option.addEventListener('click', toggleOption);
            }

            select.appendChild(option);
        }

        if (multiple) {
            var okButton = document.createElement('button'),
                buttons = document.createElement('div');
            buttons.className = 'popup-buttons';
            okButton.className = 'popup-button';
            okButton.addEventListener('click', done);
            okButton.appendChild(document.createTextNode(buttonText));
            buttons.appendChild(okButton);
            popup.appendChild(buttons);
        }

        document.body.appendChild(popup);
    };

    window.select = window.select || {};
    window.select.show = show;
}());