local label
local imageHolder
local imageHolder2
local plusLabel

local function index(window, q, callback)
    frame = window:newFrame(0,0,0,-200,0,.2,1,.8)
    frame.visibility = 0
    label = window:newTextLabel(q.title,0,0,0,0,0,0,1,.2)
    label.align = ALIGN_CENTER
    label.textColor = color.question_font
    label.color = color.question_bg
    label.drawBorder = false
    label:scaleFont(.4)
    label:centerFont()

    if not q.imageA or q.imageA == "" then
        error("Missing 'imageA' field for question!")
    end

    if not q.imageB or q.imageB == "" then
        error("Missing 'imageB' field for question!")
    end

    -- Left image: takes up 0.0 to 0.42 of width
    imageHolder = frame:newImageLabel(q.imageA)
    imageHolder:setAspectSize(imageHolder.imageWidth, imageHolder.imageHeight)
    imageHolder:setDualDim(0, 0, 0, 0, 0, 0, .4, 1)

    -- Plus sign: centered between images at 0.42 to 0.58
    plusLabel = frame:newImageLabel("assets/images/plus.png", 0, 0, 0, 0, .4125, .4, .175)
    plusLabel.square = "w"
    plusLabel.align = ALIGN_CENTER
    plusLabel.textColor = color.question_font
    -- plusLabel.visibility=0

    -- Right image: takes up 0.58 to 1.0 of width
    imageHolder2 = frame:newImageLabel(q.imageB)
    imageHolder2:setAspectSize(imageHolder2.imageWidth, imageHolder2.imageHeight)
    imageHolder2:setDualDim(0, 0, 0, 0, .6, 0, .4, 1)

    window.apply({
        centerY = {true},
    }, imageHolder, plusLabel, imageHolder2)

    useDefaultHandler(callback)

    return {
        {title=label},
        {imageA=imageHolder, description="First image to display"},
        {imageB=imageHolder2, description="Second image to display"},
    }
end

local function update(dt)

end

return {
    index = index,
    update = update
}