// picker.js
// 2010-12-13

// The picker is a lightweight data entry device. It is activated by a
// mousedown event. A menu is displayed, centered around the cursor. The menu
// is removed when an action is triggered, or when the cursor leaves the menu.

// The picker is called by a mousedown function. It pops up a dialog made
// up of simple tiles. The one you mouseup on produces a value. The picker
// maker function takes these parameters:
//      box         A box that will be the container of the picker.
//      x           The x of the click point.
//      y           The y of the click point.
//      func        A function that will be called when a pick is made.

ADSAFE.lib("picker", function () {
    "use strict";
    return function () {
        return function (box, x, y, func) {
            var i;

// Make span elements and put them in the box.

            box.append(box.tag('span')
                .value('clear')
                .style('backgroundColor', 'white')
                .style('color', 'black'));
            for (i = 1; i < 10; i += 1) {
                box.append(box.tag('span')
                    .value(i)
                    .style('backgroundColor', 'white')
                    .style('color', 'black'));
            }
            box
                .ephemeral()
                .style('cursor', 'default')
                .style('position', 'absolute')
                .style('left', Math.max(x - (box.getOffsetWidth() / 2), 0) + 'px')
                .style('top', (y - (box.getOffsetHeight() / 2)) + 'px')
                .style('visibility', 'visible')
                .on('mouseup', function (e) {
                    if (e.target.getTagName() === 'span') {
                        func(e.target.getValue());
                    }
                    box.ephemeral();
                    e.preventDefault();
                })
                .on('mouseout', function (e) {
                    if (e.target.getTagName() === 'span') {
                        e.target
                            .style('backgroundColor', 'white')
                            .style('color', 'black');
                    } else {
                        box.ephemeral();
                    }
                    e.preventDefault();
                })
                .on('mouseover', function (e) {
                    if (e.target.getTagName() === 'span') {
                        e.target
                            .style('backgroundColor', 'green')
                            .style('color', 'yellow');
                    }
                    e.preventDefault();
                });
        };
    };
});