Cider Controls 7. Release 2 Includes TabBar and ListView controls along with bug fixes

CiderControls7-2

--# Main
-- Cider Controls 7
-- =====================
-- Designed for use with the Cider interface designer
-- Use this file to test and demostrate controls in the library
-- =====================

function setup()
    displayMode(FULLSCREEN)
    supportedOrientations(PORTRAIT_ANY)
    
    -- buttons
    ctlButtonView = Control("Button", 10, HEIGHT - 150, 
    WIDTH - 20, 140)
    ctlButtonView.enabled = false
    ctlButtonView.background = color(255, 255, 255, 255)
    lblButton = Label("Examples of buttons using predefined styles", 
    20, 910, WIDTH,0)
    lblButton.textColor = color(147, 129, 129, 255)
    lblButton.textAlign = CENTER
    btnButton = Button("Standard", 60, 930, 100, 40,
    ButtonTypeStandard, callback)
    btnCancel = Button("Warning", 200, 930, 100, 40,
    ButtonTypeWarning, callback)
    btnInfo = Button("Info", 350, 930, 40, 40,
    ButtonTypeInfo, callback)
    btnDetails = Button("Detail", 440, 930, 40, 40,
    ButtonTypeDetail, callback)
    btnAdd = Button("Add", 530, 930, 40, 40,
    ButtonTypeAdd, callback)
    btnRound = Button("Round", 610, 920, 60, 60,
    ButtonTypeRound, callback)
    
    -- SegmentedControls
    ctlSegmentedView = Control("SegmentedControl", 
    10, HEIGHT - 270, WIDTH - 20, 110)
    ctlSegmentedView.enabled = false
    ctlSegmentedView.background = color(255, 255, 255, 255)
    sctStandard = SegmentedControl("One;Two;Three", 30, 780, 250, 40, 
    SegmentedTypeStandard)
    sctInfo = SegmentedControl("One;Two;Three", 310, 780, 250, 40, 
    SegmentedTypeInfo)
    sctStepper = SegmentedControl("-;+", 590, 780, 80, 40, 
    SegmentedTypeInfo)
    sctStepper.fontSize = 30
    sctStepper.selectedItem = 0
    
    -- Sliders
    ctlSliderView = Control("Slider", 10, HEIGHT - 390, 
    WIDTH - 20, 110)
    ctlSliderView.enabled = false
    ctlSliderView.background = color(255, 255, 255, 255)
    sldSlider = Slider("50", 30, 660, 220,50, 
    SliderTypeStandard, 0, 100, 50, callback)
    sldSlider2 = Slider("No Labels", 270, 660, 220,50, 
    SliderTypeNoLabel, 0, 100, 50, callback)
    sldSlider3 = Slider("With Icons", 520, 660, 220,50, 
    SliderTypeIcons, 0, 100, 50, callback)
    sldSlider3.leftIcon = "Space Art:Red Explosion"
    sldSlider3.rightIcon = "Space Art:Green Explosion"
    
    -- Switches
    ctlSwitchView = Control("Switch", 10, HEIGHT - 510, 200, 110)
    ctlSwitchView.enabled = false
    ctlSwitchView.background = color(255, 255, 255, 255)
    switch = Switch("Switch", 30, 550, 120, 40, callback)
    
    -- TextField
    ctlTextFieldView = Control("TextField", 10, HEIGHT - 630, 
    WIDTH - 20, 110)
    ctlTextFieldView.enabled = false
    ctlTextFieldView.background = color(255, 255, 255, 255)
    txtField = TextField("Text", 30, 430, 150, 30, "",
    TextFieldStyleStandard, callback)
    txtField2 = TextField("Title", 200, 430, 150, 30, "",
    TextFieldStyleTitle, callback)
    txtField3 = TextField("Search", 370, 430, 150, 30, "",
    TextFieldStyleSearch, callback)
    
    ctlActionSheetView = Control("ActionSheet", 10, 50, 250, 334)
    ctlActionSheetView.enabled = false
    ctlActionSheetView.background = color(255, 255, 255, 255)
    actionSheet = ActionSheet("Add photo;Save photo;Delete photo", 
    20, 60, 230, 290, callback)
    
    ctlSelectListView = Control("SelectList", 270, 50, 250, 334)
    ctlSelectListView.enabled = false
    ctlSelectListView.background = color(255, 255, 255, 255)
    selectList = SelectList("$Switch 1;$Switch 2;$Switch 3;!Break;"..
    "&Text;!Break;Alert;Label 2" , 280, 60, 230, 290, 1)
    
    ctlMiscView = Control("Misc", 530, 50, 228, 334)
    ctlMiscView.enabled = false
    ctlMiscView.background = color(255, 255, 255, 255)
    spotSwitch = SpotSwitch("Spot Switch", 540, 300, 120, 40, callback)
    icbIconButton = IconButton("7", 540,200, 80, 80, nil,
    "Icon", "Button")
    icbIconButton2 = IconButton("7", 640,200, 80, 80,
    "Small World:Heart Stone", "Icon", "Button")

    -- DropList
    ctlDropListView = Control("DropList", 220, HEIGHT - 510, 
    WIDTH - 230, 110)
    ctlDropListView.enabled = false
    ctlDropListView.background = color(255, 255, 255, 255)
    dropList = DropList("iPad;iPad 2;iPad 3;iPad 4;iPad Mini",
    250, 550, 140, 40, callback)
    dropList2 = DropList("Washington;Adams;Jefferson;Madison;Monroe;"..
    "Adams;Jackson;Van Buren;Harrison;Tyler;Polk;Taylor;Fillmore;"..
    "Pierce;Buchanan;Lincoln;Johnson;Grant",
    500, 550, 180, 40, callback)
    
    dialog = Dialog("Dialog", 200, 200, 400, 700)
    
    colorSelector = ColorSelector(200,200, dropList.background)
    
end

function callTest()
    print("hello")
end

function draw()
    -- This sets a dark background color 
    background(181, 181, 181, 255)

    ctlButtonView:draw()
    lblButton:draw()
    btnButton:draw()
    btnCancel:draw()
    btnInfo:draw()
    btnDetails:draw()
    btnAdd:draw()
    btnRound:draw()
    
    ctlSegmentedView:draw()
    sctStandard:draw()
    sctInfo:draw()
    sctStepper:draw()
    
    ctlSliderView:draw()
    sldSlider:draw()
    sldSlider2:draw()
    sldSlider3:draw()
    
    ctlSwitchView:draw()
    switch:draw()
    
    ctlActionSheetView:draw()
    actionSheet:draw()
    
    ctlTextFieldView:draw()
    txtField:draw()
    txtField2:draw()
    txtField3:draw()
    
    ctlSelectListView:draw()
    selectList:draw()
          
    ctlMiscView:draw()
    spotSwitch:draw()
    icbIconButton:draw()
    icbIconButton2:draw()
    
    ctlDropListView:draw()
    dropList:draw()
    dropList2:draw()
    
    if dialog.visible then dialog:draw() end
    
    if colorSelector.visible then colorSelector:draw() end

end

function touched(touch)
    btnButton:touched(touch)
    btnCancel:touched(touch)
    btnInfo:touched(touch)
    btnDetails:touched(touch)
    btnAdd:touched(touch)
    btnRound:touched(touch)
    
    sctStandard:touched(touch)
    sctInfo:touched(touch)
    
    sldSlider:touched(touch)
    sldSlider.text = sldSlider.val
    sldSlider2:touched(touch)
    sldSlider3:touched(touch)
    
    switch:touched(touch)
    
    dropList:touched(touch)
    dropList2:touched(touch)
    
    txtField:touched(touch)
    txtField2:touched(touch)
    txtField3:touched(touch)
    
    if actionSheet:touched(touch) and actionSheet.selectedItem == 1 then
        dialog.visible = true
    end
    
    spotSwitch:touched(touch)
    

    if selectList:touched(touch) and touch.state == BEGAN then
        if selectList.selectedItem == 7 then
            alert("here")
        end
        if selectList.selectedItem == 8 then
            colorSelector.visible = true
        end
    end
    
    if touch.state == BEGAN and dialog.visible and
    dialog:touched(touch) then
        dialog.visible = false
    end
    
    if colorSelector.visible then colorSelector:touched(touch) end
    
end

function keyboard(key) 
    if CCActiveTextBox then
        CCActiveTextBox:acceptKey(key)
    end
end


--# Frame
Frame = class()

-- Frame 
-- ver. 7.0
-- a simple rectangle for holding controls.
-- ====================

function Frame:init(x, y, w, h)
    self.x = x
    self.y = y
    self.w = w
    self.h = h
end

function Frame:setPosition(pos)
    self.x = pos.x
    self.y = pos.y
end

function Frame:setSize(size)
    self.w = size.x
    self.h = size.y
end

function Frame:position()
    return vec2(self.x, self.y)
end

function Frame:size()
    return vec2(self.w, self.h)
end

function Frame:inset(dx, dy)
    self.x = self.x + dx
    self.y = self.y + dy
    self.w = self.w - dx * 2
    self.h = self.h - dy * 2
end

function Frame:offset(dx, dy)
    self.x = self.x + dx
    self.y = self.y + dy
end
    
function Frame:draw()
    pushStyle()
    rectMode(CORNER)
    rect(self.x, self.y, self.w, self.h)
    popStyle()
end

function Frame:roundRect(radius)
    pushStyle()
    insetPos = vec2(self.x + radius, self.y + radius)
    insetSize = vec2(self.w - 2 * radius, self.h - 2 * radius)

    rectMode(CORNER)
    rect(insetPos.x, insetPos.y, insetSize.x, insetSize.y)

    if radius > 0 then
        smooth()
        lineCapMode(ROUND)
        strokeWidth(radius * 2)

        line(insetPos.x, insetPos.y, 
             insetPos.x + insetSize.x, insetPos.y)
        line(insetPos.x, insetPos.y,
             insetPos.x, insetPos.y + insetSize.y)
        line(insetPos.x, insetPos.y + insetSize.y,
             insetPos.x + insetSize.x, insetPos.y + insetSize.y)
        line(insetPos.x + insetSize.x, insetPos.y,
             insetPos.x + insetSize.x, insetPos.y + insetSize.y)            
    end
    popStyle()
end

function Frame:touched(touch)
    if self:ptIn(touch) then
        return true
    end
    return false
end

function Frame:ptIn(test)
    if test.x >= self.x and test.x <= self.x + self.w then
        if test.y >= self.y and 
        test.y <= self.y + self.h then
            return true
        end
    end
    return false
end

function Frame:overlaps(f)
    if self:left() > f:right() or self:right() < f:left() or
    self:bottom() > f:top() or self:top() < f:bottom() then
        return false
    else
        return true
    end
end

function Frame:left()
    return self.x
end

function Frame:right()
    return self.x + self.w
end

function Frame:bottom()
    return self.y
end

function Frame:top()
    return self.y + self.h
end

function Frame:midX()
    return self.x + (self.w / 2)
end
    
function Frame:midY()
    return self.y + (self.h / 2)
end

function Frame:width()
    return self.w
end

function Frame:height()
    return self.h
end





--# Control
Control = class(Frame)

-- Control 7.0
-- =====================
-- Designed for use with CiderControls7
-- Used alone, and as a base class for other controls
-- =====================

function Control:init(s, x, y, w, h, callback)
    -- creates a boundary
    Frame.init(self, x, y, w, h)
    
    -- text properties
    self.text = s
    self.itemText = {}
    self.font = "HelveticaNeue-Light"
    self.textColor = color(0, 0, 0, 255)
    self.highlightedTextColor = color(0, 50, 255, 255)
    self.textMode = CORNER
    self.textAlign = LEFT
    self.fontSize = 18
    self.textVerticalAlign = TOP
    
    -- basic color properties
    self.background = color(0, 0, 0, 0)
    self.foreground = color(14, 14, 14, 255)
    self.highlightColor = color(0, 0, 0, 0)
    
    -- status properties
    self.selected = false
    self.highlighted = false
    self.enabled = true
    
    -- shadow properties
    self.shadowColor = color(0, 0, 0, 46)
    self.shadowOffset = 4
    self.shadowVisible = false

    -- class refrences
    self.controlName = "Control"
    self.callback = callback or nil
end

function Control:splitText()
    -- allows multiple items to be passed to text using
    -- semicolons as seperators
    local i, k
    i = 0
    for k in string.gmatch(self.text,"([^;]+)") do
        i = i + 1
        self.itemText[i] = k
    end
end

function Control:draw()
    local i, h, w, x
    pushStyle()
    noStroke()
    fill(self.background)
    Frame.draw(self)
    if self.enabled then
        fill(self.textColor)
    else
        fill(self.textColor.r, self.textColor.g,
        self.textColor.b, 50)
    end
    textAlign(self.textAlign)
    textMode(self.textMode)
    font(self.font)
    fontSize(self.fontSize)
    w, h = textSize(self.text)
    
    if self.textAlign == LEFT then
        x = self:left() + 4
    elseif self.textAlign == CENTER then
        x = self:midX() - w / 2
    elseif self.textAlign == RIGHT then
        x = self:right() - w - 8
    end
    
    if self.textVertAlign == TOP then
        text(self.text, x, self:top() - h)
    elseif self.textVertAlign == MIDDLE then
        text(self.text, x, self:midY()- h/2)
    elseif self.textVertAlign == BOTTOM then
        text(self.text, x, self:bottom() + 4)
    end
    
    popStyle()
end

function Control:initString(ctlName)
    return self.controlName.."('"..self.text.."', " .. 
        self.x..", "..self.y..", "..
        self.w..", "..self.h..", "..
        ctlName.."_Clicked" ..
        ")"
end

 
 

--# Label
Label = class(Control)

-- Label 
-- ver. 7.0
-- a control for basic text label
-- ====================

function Label:init(s, x, y, w, h)
    Control.init(self, s, x, y, w, h)
    self.controlName = "Label"
    self.background = color(0, 0, 0, 0)
    self.textVertAlign = MIDDLE
end

function Label:draw()
    local h, w, x, y
    pushStyle()
    noStroke()
    if self.enabled then
        fill(self.textColor)
    else
        fill(self.textColor.r, self.textColor.g,
        self.textColor.b, 50)
    end
    textAlign(self.textAlign)
    textMode(self.textMode)
    font(self.font)
    fontSize(self.fontSize)
    w, h = textSize(self.text)
    
    if self.textAlign == LEFT then
        x = self:left()
    elseif self.textAlign == CENTER then
        x = self:midX() - w / 2
    elseif self.textAlign == RIGHT then
        x = self:right() - w - 8
    end
    
    if self.textVertAlign == TOP then
        text(self.text, x, self:top() - h)
    elseif self.textVertAlign == MIDDLE then
        text(self.text, x, self:midY()- h/2)
    elseif self.textVertAlign == BOTTOM then
        text(self.text, x, self:bottom() + 4)
    end
    
    popStyle()
end

--# Button
Button = class(Control)

-- Button 
-- ver. 7.0
-- a control for displaying a simple button
-- ====================

-- constants
    ButtonTypeStandard = 0
    ButtonTypeWarning = 1
    ButtonTypeInfo = 2
    ButtonTypeDetail = 3
    ButtonTypeAdd = 4
    ButtonTypeRound = 5
    ButtonTypeAction = 6

function Button:init(s, x, y, w, h, buttonType, callback)
    Control.init(self, s, x, y, w, h, callback) 
    self.controlName = "Button"
    self.textMode = CENTER
    self.callback = callback or nil
    self.type = ButtonTypeStandard
    self:setType(buttonType)
end

function Button:setType(bt)
    self.type = bt
    if bt == ButtonTypeStandard then
        self.foreground = color(255, 0, 0, 0)
    elseif bt == ButtonTypeWarning then
        self.background = color(255, 0, 0, 255)
        self.foreground = color(255, 0, 0, 255)
        self.textColor = color(255, 255, 255, 255)
        self.highlightColor = color(227, 224, 224, 255)
        self.highlightedTextColor = color(255, 0, 0, 255)
    elseif bt == ButtonTypeInfo then
        self.background = color(0, 0, 0, 0)
        self.textColor = color(34, 53, 207, 255)
        self.foreground = color(18, 45, 197, 255)
        self.highlightColor = color(127, 127, 127, 69)
    elseif bt == ButtonTypeDetail then
        self.background = color(0, 0, 0, 0)
        self.textColor = color(51, 51, 51, 255)
        self.foreground = color(51, 51, 51, 255)
        self.highlightColor = color(127, 127, 127, 69)
    elseif bt == ButtonTypeAdd then
        self.background = color(0, 0, 0, 0)
        self.textColor = color(0, 31, 255, 255)
    elseif bt == ButtonTypeRound then
        self.foreground = color(18, 45, 197, 255)
        self.highlightColor = color(181, 184, 199, 195)
        self.highlightedTextColor = color(255, 255, 255, 255)
    elseif bt == ButtonTypeAction then
        self.background = color(255, 255, 255, 255)
        self.textColor = color(48, 55, 121, 255)
        self.highlightColor = color(59, 101, 114, 255)
        self.highlightedTextColor = color(255, 255, 255, 255)
    end
end

function Button:draw()
    pushStyle()
    textMode(CENTER)
    font(self.font)
    fontSize(self.fontSize)
    strokeWidth(1)
    stroke(self.foreground)
    if self.highlighted then
        fill(self.highlightColor)
    else
        fill(self.background)
    end
    if self.type == ButtonTypeInfo or self.type == ButtonTypeDetail 
    or self.type == ButtonTypeAdd or self.type == ButtonTypeRound then
        ellipse(self:midX(), self:midY(), self:height())
    else
        Frame.draw(self)
    end
    noStroke()
    if self.highlighted then
        fill(self.highlightedTextColor)
    else
        fill(self.textColor)
    end
    if self.type == ButtonTypeInfo or self.type == ButtonTypeDetail then
        text("i", self:midX(), self:midY())
        noFill()
        strokeWidth(1)
        stroke(self.foreground)
        noSmooth()
        ellipse(self:midX(), self:midY(), self:height())
    elseif self.type == ButtonTypeAdd then
        noFill()
        strokeWidth(1)
        stroke(self.foreground)
        noSmooth()
        ellipse(self:midX(), self:midY(), self:height())
        line(self:midX() - self:width() / 4, self:midY(),
        self:midX() + self:width() / 4, self:midY())
        line(self:midX(), self:midY() - self:height() / 4,
        self:midX(), self:midY() + self:height() / 4)
    elseif self.type == ButtonTypeRound then
        text(self.text, self:midX(), self:midY())
        noFill()
        strokeWidth(1)
        stroke(self.foreground)
        noSmooth()
        ellipse(self:midX(), self:midY(), self:height())
    else
        text(self.text, self:midX(), self:midY())
    end
    popStyle()
end

function Button:touched(touch)
    -- touch in button
    if self:ptIn(touch) then
        if touch.state == BEGAN then 
            self.highlighted = true
            self.selected = true
        elseif self.selected then
            if touch.state == MOVING then 
                self.highlighted = true
            elseif touch.state == ENDED then
                self.highlighted = false
                self.selected = false
                if self.callback ~= nil then self.callback() end
                return true
            end
        end
    -- touch outside button
    elseif self.selected then
        if touch.state == MOVING then 
            self.highlighted = false
        elseif touch.state == ENDED then
            self.highlighted = false
            self.selected = false
        end
    end
    
    return false
    
end

function Button:initString(ctlName)
    return self.controlName.."('"..self.text.."', " .. 
        self.x..", "..self.y..", "..
        self.w..", "..self.h..", "..
        self.type..", "..
        ctlName.."_Clicked" ..
        ")"
end

--# ListView
ListView = class(Control)

-- ListView 
-- ver. 7.0
-- a control for displaying tables
-- ====================

function ListView:init(s, x, y, w, h, data, callback)
    Control.init(self, s, x, y, w, h)
    self.data = data
    self.showTitle = false
    self.header = {}
    self.topRow = 1
    self.select = 0
    self.offsetY = 0
    self.startItem = 0
    self.rowHeight = 30
    self.colorAlternateRows = true
    self.spacing = 2
    self.key = {}
    self.headerFrame = {}
    self.columnAlign = {}
    self.columnWidth={}
    self.rowFrame = {}
    self:getHeaders(order)
    self:initHeaderFrames()
    self.background = color(255, 255, 255, 255)
    self.headerColor = color(201, 201, 201, 255)
    self.headerTextColor = color(252, 252, 252, 255)
    self.alternateRowColor = color(172, 194, 167, 35)
end

function ListView:getHeaders()
    i = 0;
    if self.text == nil or self.text == "" then
        for key, value in pairs(self.data[1]) do
            i = i + 1
            self.key[i] = key
            self.itemText[i] = key
            print(self.key[i])
        end
    else
        self:splitText()
        for i = 1,#self.itemText do
            self.key[i] = self.itemText[i]
        end
    end
end

function ListView:initHeaderFrames()
    x = 0
    w = self.w / #self.itemText
    for i, h in ipairs(self.itemText) do
        self.headerFrame[i] = Frame(x, self.h - 30, w, 30)
        x = x + self.w / #self.itemText
    end
end

function ListView:setColumnWidth(c, w)
    dw = self.headerFrame[c].w - w
    self.headerFrame[c].w = w
    if c < #self.headerFrame then
        self.headerFrame[c + 1].w = self.headerFrame[c + 1].w + dw
        self.headerFrame[c + 1].x = self.headerFrame[c + 1].x - dw
    else
        
    end
end

function ListView:setColumnAlignment(col, alignment)
    self.columnAlign[col] = alignment
end

function ListView:draw()
    pushStyle()
    pushMatrix()
    textMode(CENTER)
    fill(self.background)
    Frame.draw(self)
    w = self.w / #self.header
    self.maxOffsetY =  #self.data * self.rowHeight - self.rowHeight/2
    fill(self.textColor)
    translate(self.x, self.y)
    for i, h in ipairs(self.itemText) do
        fill(self.headerColor)
        self.headerFrame[i]:draw()
        fill(self.headerTextColor)
        text(h, self.headerFrame[i]:midX(), self.headerFrame[i]:midY())
    end 
    fill(self.textColor)
    clip(self.x, self.y, self.w, self.h - self.rowHeight)
    for i, row in ipairs(self.data) do
        y = self.h - self.rowHeight - 
        (self.rowHeight * i) + self.offsetY
        self.rowFrame[i] = Frame(0, y - self.rowHeight / 2, 
        self.w, self.rowHeight)
        if self.select == i then
            fill(self.highlightedTextColor)
        else
            fill(self.textColor)
        end
        c = 1
        for c = 1, #self.itemText do
            w, h = textSize(row[self.key[c]])
            if self.columnAlign[c] == nil or
            self.columnAlign[c] == CENTER then
                x = self.headerFrame[c]:midX()
            elseif self.columnAlign[c] == LEFT then
                x = self.headerFrame[c].x + w / 2 + 2
            elseif self.columnAlign[c] == RIGHT then
                x = self.headerFrame[c]:right() - w / 2 - 2
            end
            text(row[self.key[c]], x, y)
        end
        if math.mod(i, 2) == 0 then
            fill(172, 203, 175, 49)
            self.rowFrame[i]:draw()
        end
    end
    clip()
    popMatrix()
    popStyle()
end
 
function ListView:touched(touch)
    if self:ptIn(touch) then
        for i = 1, #self.rowFrame do
            tt = Ttouch(touch)
            tt:translate(self.x, self.y)
            if self.rowFrame[i]:ptIn(tt) and tt.state == BEGAN then
                self.startItem = i
            end
            if self.rowFrame[i]:ptIn(tt) and tt.state == ENDED then
                if self.startItem == i then
                    self.select = i
                end
            end
        end
        if touch.state == MOVING then
        self.offsetY = self.offsetY + touch.deltaY 
            if self.offsetY < 0 then 
                self.offsetY = 0 
            elseif self.offsetY > self.maxOffsetY then 
                self.offsetY = self.maxOffsetY
            end
                print(tt.deltaY, self.offsetY, self.maxOffsetY)
        end
        return true
    end
    return false
end

--# SegmentedControl
SegmentedControl = class(Control)

-- SegmentedControl 7.0
-- =====================
-- Designed for use with the Cider Controls 7
-- =====================
    
    SegmentedTypeStandard = 0
    SegmentedTypeInfo = 1

function SegmentedControl:init(s, x, y, w, h, st, callback)
    Control.init(self, s, x, y, w, h, callback)
    
    self.controlName = "SegmentedControl"
    self.font = "HelveticaNeue-Light"
    self.itemText = {}
    self:splitText()
    self.selectedItem = 1
    self.type = SegmentedTypeStandard
    self:setType(st)
end

function SegmentedControl:setType(st)
    if st ~= nil then self.type = st end
    if st == SegmentedTypeStandard then
        self.background = color(255, 255, 255, 255)
        self.foreground = color(127, 127, 127, 255)
        self.highlightedTextColor = color(255, 255, 255, 255)
        self.highlightColor = color(127, 127, 127, 255)
        self.textColor = color(57, 57, 57, 255)
    elseif st == SegmentedTypeInfo then
        self.background = color(255, 255, 255, 255)
        self.foreground = color(30, 66, 217, 255)
        self.highlightedTextColor = color(255, 255, 255, 255)
        self.highlightColor = color(30, 66, 217, 255)
        self.textColor = color(20, 48, 188, 255)
    end
end

function SegmentedControl:draw()
    local w, i, b
    pushStyle()
    w = self:width() / #self.itemText
    strokeWidth(2)
    fill(self.background)
    stroke(self.foreground)
    self:roundRect(4)
    noStroke()
    stroke(self.background)
    self:inset(1, 1)
    self:roundRect(4)
    self:inset(-1, -1)
    stroke(self.foreground)
    textMode(CENTER)
    font(self.font)
    fontSize(self.fontSize)
    
    for i, b in ipairs(self.itemText) do
        noSmooth()
        fill(self.textColor)
        strokeWidth(2)
        if i < #self.itemText then
            line(self:left() + i * w, self:top() -1, 
            self:left() + i * w, self:bottom() + 1)
        end
        text(b, (self:left() + i * w) - (w / 2), self:midY())
        noStroke()
        fill(0, 0, 0, 22)
        
        if i == self.selectedItem then
            fill(self.highlightColor)
            rect(self:left() + i * w - w, self:bottom() ,
            w, self:height())
            fill(self.highlightedTextColor)
        else
            fill(self.textColor)
        end
        smooth()
        text(b, (self:left() + i * w) - (w / 2), self:midY())
    end
    popStyle()
end

function SegmentedControl:touched(touch)
    if self:ptIn(touch) then
        if touch.state == BEGAN then
            w = self:width() / #self.itemText
            i = math.floor((touch.x - self:left()) / w) + 1
            self.selectedItem = i
        end
        if self.callback ~= nil then self.callback() end
        return true
    end
end

function SegmentedControl:initString(ctlName)
    return self.controlName.."('"..self.text.."', " .. 
        self.x..", "..self.y..", "..
        self.w..", "..self.h..", "..
        self.type..", "..
        ctlName.."_Clicked" ..
        ")"
end

--# Slider
Slider = class(Control)

-- Slider 7.0
-- =====================
-- Designed for use with Cider controls 7
-- offers option of sliding to 1-x values
-- =====================

    SliderTypeStandard = 0
    SliderTypeNoLabel = 1
    SliderTypeIcons = 2

function Slider:init(s, x, y, w, h, sliderType, min, max, val, callback)
    Control.init(self, s, x, y, w, h, callback)
    self.controlName = "Slider"
    self.min = min
    self.max = max
    self.val = val
    self.type = SliderTypeStandard
    self:setType(sliderType)
    self.foreground = color(59, 62, 67, 255)
    self.background = color(255, 255, 255, 255)
    self.highlightColor = color(48, 73, 221, 255)
    self.scale = 1
    self.lineLeft = self.left
    self.lineWidth = self.width
    self.leftIcon = nil
    self.rightIcon = nil
end

function Slider:setType(sliderType)
    if sliderType ~= nil then self.type = sliderType end
end

function Slider:getPointerPosition()
    local x, y
    x = self.lineLeft + (self.val - self.min) * self.scale
    y = self:midY()
    return vec2(x, y)
end

function Slider:draw()
    local x, y, scale
    pushStyle()
    
    font(self.font)
    fontSize(self.fontSize)
    stroke(self.foreground)
    fill(self.background)
    if self.type == SliderTypeStandard then
        w, h = textSize(self.max)
        w = w + 8
        noSmooth()
        stroke(self.highlightColor)
        strokeWidth(1)
        
        self.lineLeft = self:left() + w
        self.lineWidth = self:width() - w * 2
        
        line(self:left() + w, self:midY(), 
        self:left() + self:width() - w, self:midY())
        
        fill(self.textColor)
        smooth()
        textMode(CENTER)
        textAlign(LEFT)
        w, h = textSize(self.min)
        text(self.min, self:left() + w / 2 + 4, self:midY())
        w, h = textSize(self.max)
        text(self.max, self:left() + self:width() -  w /  2 - 4, 
        self:midY())
        self.scale = self.lineWidth / (self.max - self.min)
        x = self.lineLeft + (self.val - self.min) * self.scale
        y = self:midY()
    elseif self.type == SliderTypeNoLabel then
        noSmooth()
        stroke(self.highlightColor)
        strokeWidth(1)
        
        self.lineLeft = self:left()
        self.lineWidth = self:width()
        self.scale = self.lineWidth / (self.max - self.min)
        
        line(self:left(), self:midY(), 
        self:left() + self:width(), self:midY())
        
        fill(self.textColor)
        smooth()
        
        x = self.lineLeft + (self.val - self.min) * self.scale
        y = self:midY()
    elseif self.type == SliderTypeIcons then
        w = 40
        noSmooth()
        stroke(self.highlightColor)
        strokeWidth(1)
        
        self.lineLeft = self:left() + w 
        self.lineWidth = self:width() - w * 2
        self.scale = self.lineWidth / (self.max - self.min) 
        sprite(self.leftIcon, self:left() + 16, self:midY(), 32, 32)
        sprite(self.rightIcon, self:right() - 16, self:midY(), 32, 32)
        
        line(self:left() + w, self:midY(), 
        self:left() + self:width() - w, self:midY())
        
        fill(self.textColor)
        smooth()
        
        x = self.lineLeft + (self.val - self.min) * self.scale
        y = self:midY()
        
    end
    fill(self.background)
    stroke(self.foreground)
    strokeWidth(1)
    ellipse(x, y, 25)
    textAlign(CENTER)
    fill(self.textColor)
    w, h = textSize(self.text)
    text(self.text, self:midX(), self:top())
    popStyle()
end

function Slider:touched(touch)
    local x
    if touch.state == BEGAN or touch.state == MOVING then
        if self:ptIn(touch) then
            x = touch.x - self.lineLeft
            self.val = math.floor(x / self.scale) + self.min
            if self.val < self.min then
                self.val = self.min
            elseif self.val > self.max then
                self.val = self.max
            end
            if self.callback ~= nil then self.callback() end
            return true
        end
    end
end

function Slider:initString(ctlName)
    return self.controlName.."('"..self.text.."', " .. 
        self.x..", "..self.y..", "..
        self.w..", "..self.h..", "..
        self.type..", "..
        self.min..", "..self.max..", "..
        self.val..", "..
        ctlName.."_Clicked" ..
        ")"
end



--# Switch
Switch = class(Control)

-- Switch 7.0
-- =====================
-- Designed for use with Cider controls 7
-- two-position selector
-- =====================


function Switch:init(s, x, y, w, h, callback)
    Control.init(self, s, x, y, w, h, callback)
    self.controlName = "Switch"
    self.itemText = {}
    self.highlightedColor = color(17, 226, 21, 255)
    self.background = color(255, 255, 255, 255)
end

function Switch:drawOn()
    pushStyle()
    rectMode(CENTER)
    stroke(self.highlightedColor)
    fill(self.highlightedColor)
    w=26
    h=26
    rect(self:right()-w*.75,self:midY(),w/2,h)
    ellipse(self:right()-w,self:midY(),h)
    fill(self.background)
    ellipse(self:right()-h/2,self:midY(),h)
    
    popStyle()
end

function Switch:drawOff()
    pushStyle()
    rectMode(CENTER)
    stroke(self.foreground)
    fill(self.background)
    w=26
    h=26
    ellipse(self:right()-h/2,self:midY(),h)
    noStroke()
    rect(self:right()-w*.75,self:midY(),w/2,h)
    strokeWidth(1)
    noSmooth()
    line(self:right()-w,self:midY()+h/2-2,
    self:right()-h/2,self:midY()+h/2-2)
    line(self:right()-w,self:midY()-h/2+1,
    self:right()-h/2,self:midY()-h/2+1)
    stroke(127, 127, 127, 72)
    fill(127, 127, 127, 53)
    ellipse(self:right()-w+1,self:midY()-3,h)
    stroke(self.foreground)
    fill(self.background)
    ellipse(self:right()-w,self:midY(),h)
    popStyle()
end


function Switch:draw()
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    strokeWidth(1)
    textMode(CORNER)
    textAlign(LEFT)
    fill(self.textColor)
    w,h = textSize(self.text)
    text(self.text, self:left(), self:midY()-h/2)
    
    if self.selected then
        self:drawOn()
    else
        self:drawOff()
    end
    popStyle()
end

function Switch:touched(touch)
    if self:ptIn(touch) then
        if touch.state == BEGAN then
            self.selected = not self.selected
            if self.callback ~= nil then self.callback() end
        end
        return true
    else
        return false
    end
end


--# DropList
DropList = class(Control)

-- DropList 7.0
-- =====================
-- Designed for use with the Cider 7
-- drop down menu item list
-- =====================

function DropList:init(s, x, y, w, h, callback)
    Control.init(self, s, x, y, w, h, callback)
    self.controlName = "DropList"
    self.background = color(255, 255, 255, 255)
    self.itemText = {}
    self:splitText()
    self.tempBottom = bottom
    self.firstItem = 1
    self.selectedItem = 1
    self.spacing = 1.5
    self.maxHeight = 600
    self.itemHeight = 40
    self.openRect = Frame:init(pos, size)
    self:setOpenRect()
end

function DropList:setOpenRect()
    local h, x, y, h, w
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    w, h = textSize("X")
    popStyle()
    self.itemHeight = h * self.spacing
    h = self.itemHeight * #self.itemText
    w = self:width()
    if h > self.maxHeight then 
        h = self.maxHeight
    end
    
    x = self:left()
    y = self:top() - h
    
    if y - h < 0 then
        y = self.itemHeight
        h = self:top() - y
    end
    
    self.openRect = Frame(x, y, w, h)
end

function DropList:drawOpen()
    fill(self.background)
    Frame.draw(self.openRect) 
    for i, t in ipairs(self.itemText) do
        if i >= self.firstItem then 
            y = self.openRect:top() - ((i - self.firstItem + 1) * 
            self.itemHeight)
            if y >= self.openRect:bottom() then
                fill(self.textColor)
                text(t, self.openRect:left()+4, y + 
                self.itemHeight * 0.1)
            end
            if i == self.selectedItem then
                noSmooth()
                line(self.openRect:left() + 2, y, 
                self.openRect:right() - 4, y)
                line(self.openRect:left() + 2, y + self.itemHeight, 
                self.openRect:right() - 4, y + self.itemHeight) 
                smooth()
            end
        end
    end
    noFill()
    if (#self.itemText - self.firstItem + 1) * self.itemHeight > 
    self.openRect:height() then
        ellipse(self:midX()-11, self.openRect:bottom() + 10, 6)
        ellipse(self:midX(), self.openRect:bottom() + 10, 6)
        ellipse(self:midX()+11, self.openRect:bottom() + 10, 6)
    end
    if self.firstItem > 1 then
        ellipse(self.openRect:midX()-11, self.openRect:top() - 10, 6)
        ellipse(self.openRect:midX(), self.openRect:top() - 10, 6)
        ellipse(self.openRect:midX()+11, self.openRect:top() - 10, 6)
    end
end

function DropList:drawClosed()
    fill(self.background)
    strokeWidth(1)
    stroke(self.foreground)
    Frame.draw(self)
    fill(self.textColor)
    text(self.itemText[self.selectedItem], self:left() + 4, 
    self:top() - self.itemHeight * 0.9)
    line(self:right() - 25, self:bottom() + 25, 
    self:right() - 15, self:bottom() + 15)
    line(self:right() - 15, self:bottom() + 15, 
    self:right() - 5, self:bottom() + 25)
end
    
function DropList:draw()
    local i, t, h
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    textMode(CORNER)
    textAlign(LEFT)
    strokeWidth(1)
    stroke(self.foreground)
    if self.selected then
        self:drawOpen()
    else
        self:drawClosed()
    end
    popStyle()
end

function DropList:touched(touch)
    if touch.state == ENDED then
        self.selected = false
        if self.callback ~= nil then self.callback() end
        return false
    end
    if self.selected then
        if self.openRect:ptIn(touch) then
            self.selectedItem = 
            math.floor((self:top() - touch.y + 
            self.itemHeight/4) / self.itemHeight) + 
            self.firstItem - 1
            if self.selectedItem < 1 then self.selectedItem = 1 
            elseif self.selectedItem > #self.itemText then 
                self.selectedItem = #self.itemText
            end 
            return true
        else
            if touch.y < self.openRect:bottom() then
                if self.firstItem < #self.itemText and
                self.selectedItem < #self.itemText then
                    self.firstItem = self.firstItem + 1
                end
            end
            if touch.y > self.openRect:top() then
                if self.firstItem > 1 then
                    self.firstItem = self.firstItem - 1
                end
            end
            return true
        end
    else
        if self:ptIn(touch) then
            if touch.state == BEGAN then
                self.selected = true
                return true
            end
        else 
            return false
        end
    end
    
    return false
end
    
function DropList:selectedText()
    return self.itemText[self.selected]
end

--# TextField
TextField = class(Control)

-- TextField 7.0
-- a control for basic string editing
-- ====================

    CCActiveTextBox = nil

    TextFieldStyleStandard = 0
    TextFieldStyleTitle = 1
    TextFieldStyleSearch = 2

function TextField:init(title, x, y, w, h, txt, style, callback)
    Control.init(self, title, x, y, w, h, callback)
    self.background = color(255, 255, 255, 255)
    self.title = title
    self.text = txt
    self.controlName = "TextField"
    self.blink = ElapsedTime
    self.blinkstate = true
    self.insertPoint = string.len(txt)
    self.vertAlign = MIDDLE
    self.textPos = 0
    self.cursorPos = 0
    self.type = style
end

function TextField:drawStandardType()
    w, h = textSize(self.text)
    if self.textAlign == LEFT then
        self.textPos = self:left() + 4 
    elseif self.textAlign == CENTER then
        self.textPos = self:midX() - w / 2
    elseif self.textAlign == RIGHT then
        self.textPos = self:right() - w - 4
    end
end

function TextField:drawTitleType()
    fill(self.textColor.r, self.textColor.g, self.textColor.b, 80)
    w, h = textSize(self.title..":")
    text(self.title .. ":", self:left() + 4, self:top() - h - 4)
    if self.textAlign == LEFT then
        self.textPos = w + self:left() + 8
    elseif self.textAlign == CENTER then
        w, h = textSize(self.text)
        self.textPos = self:midX() - w / 2 + textSize(self.title) / 2
    elseif self.textAlign == RIGHT then
        w, h = textSize(self.text)
        self.textPos = self:right() - w - 8
    end
end

function TextField:drawSearchType()
    fill(self.textColor.r, self.textColor.g, self.textColor.b, 50)
    w, h = textSize(self.title)
    text(self.title, self:midX() - w / 2, self:top() - h - 4)
    w, h = textSize(self.text)
    if self.textAlign == LEFT then
        self.textPos = self:left() + 4 
    elseif self.textAlign == CENTER then
        self.textPos = self:midX() - w / 2
    elseif self.textAlign == RIGHT then
        self.textPos = self:right() - w - 4
    end
end

function TextField:draw()
    local x, w, h, offset
    pushStyle()
    font(self.font)
    textMode(CORNER)
    textAlign(LEFT)
    fontSize(self.fontSize)
    stroke(self.foreground)
    fill(self.foreground)
    smooth()
    if self.type == TextFieldStyleSearch then
        x = 6
    else 
        x = 3
    end
    self:roundRect(x)
    self:inset(1, 1)
    noStroke()
    Frame.draw(self)
    stroke(self.background)
    fill(self.background)
    self:roundRect(x)
    self:inset(-1, -1)
    clip(self.x, self.y, self.w, self.h)
    if self.type == TextFieldStyleStandard then 
        self:drawStandardType()
    elseif self.type == TextFieldStyleTitle then 
        self:drawTitleType()
    elseif self.type == TextFieldStyleSearch then 
        self:drawSearchType()
    end
    
    w, h = textSize(self.text)
    fill(self.textColor)
    text(self.text, self.textPos, self:top() - h - 4)
    clip()
    --insert position
    self.cursorPos = self.textPos + w + 2
    
    if self == CCActiveTextBox then
        if self.blink < ElapsedTime - 0.3 then
            self.blink = ElapsedTime
            self.blinkstate = not self.blinkstate
        end
        if self.blinkstate then
            stroke(self.foreground)
            strokeWidth(1)
            noSmooth()
            line(self.cursorPos, 
            self:top() - 4, self.cursorPos, self:bottom() + 4)
            smooth()
        end
    end
    
    popStyle()
end

function TextField:acceptKey(k)
    if k ~= nil then
        if string.byte(k) == nil then
            if string.len(self.text) > 0 then
                self.text = string.sub(self.text, 
                 1, string.len(self.text) - 1)
            end
        end
        self.text = self.text..k
    end
end

function TextField:touched(touch)
    if self:ptIn(touch) and touch.state == BEGAN then
        CCActiveTextBox = self
        self.insertPoint = string.len(self.text)
        if not isKeyboardShowing() then showKeyboard() end
        if self.callback ~= nil then self.callback() end
        return true
    else
        return false
    end
end
    
function TextField:initString(ctlName)
    return self.controlName.."('"..self.title.."', " .. 
        self.x..", "..self.y..", "..
        self.w..", "..self.h..", '"..
        self.text.."', "..
        self.type..", "..
        ctlName.."_Clicked" ..
        ")"
end





--# ActionSheet
ActionSheet = class(Control)

function ActionSheet:init(s, x, y, w, h, callback)
    Control.init(self, s, x, y, w, h, callback)
    self.controlName = "DropList"
    self.background = color(193, 193, 193, 255)
    self.foreground = color(0, 0, 0, 255)
    self.visible = false
    self.selectionMade = false
    self.itemText = {}
    self.buttons = {}
    self:splitText(s)
    self.selectedItem = 0
    self.itemHeight = 40
    self.itemSpacing = 8
    self.btnCancel = Button("Cancel",
    self:left() + 10, 
    self:bottom() + self.itemSpacing, 
    self:width() - 20, self.itemHeight,
    ButtonTypeAction, callback)
    self.btnCancel.textColor = color(255, 0, 0, 255)
    self.btnCancel.highlightColor = color(189, 18, 18, 255)
    self.btnCancel.highlightedTextColor = color(255, 255, 255, 255)
    self:setButtons()
end

function ActionSheet:setButtons()
    self.buttons = {}
    for i, t in ipairs(self.itemText) do
        self.buttons[i] = Button(t,
        self:left() + self.itemSpacing, 
        self:top() - (i * self.itemHeight) - self.itemSpacing, 
        self:width() - self.itemSpacing * 2, self.itemHeight,
        ButtonTypeAction, callback) 
    end
end

function ActionSheet:draw()
    pushStyle()
    stroke(self.foreground)
    fill(self.background)
    strokeWidth(1)
    noSmooth()
    Frame.draw(self)
    smooth()
    for i, b in ipairs(self.buttons) do
        b:draw()
    end
    self.btnCancel:draw()
    popStyle()
end

function ActionSheet:touched(touch)
    for i, b in ipairs(self.buttons) do
        if b:touched(touch) then
            self.selectedItem = i
            self.selectionMade = true
            return true
        end
    end
    if self.btnCancel:touched(touch) then
        self.selectionMade = false
        self.visible = false
        return true
    end
    return false
end

--# SpotSwitch
SpotSwitch = class(Control)

-- SpotSwitch 7.0
-- =====================
-- Designed for use with the Cider interface designer
-- A two-state inducator that alters state on touch
-- =====================

function SpotSwitch:init(t, x, y, w, h, callback)
    Control.init(self, t, x, y, w, h, callback)
    self.controlName = "SpotSwitch"
    self.highlightColor = color(6, 252, 64, 255)
end

function SpotSwitch:draw()
    pushStyle()
    fill(self.background)
    stroke(self.foreground)
    strokeWidth(1)
    ellipse(self:left() + 20, self:midY(), 40)
    if self.selected then
        fill(self.highlightColor)
        ellipse(self:left() + 20, self:midY(), 25)
        fill(255, 255, 255, 37)
        noStroke()
        ellipse(self:left() + 20, self:midY() + 5, 20, 10)
        fill(0, 0, 0, 8)
        ellipse(self:left() + 20, self:midY() - 6, 20, 10)
    else
        noFill()
        stroke(self.foreground)
        strokeWidth(1)
        ellipse(self:left() + 20, self:midY(), 25)
    end
    fill(self.foreground)
    textAlign(LEFT)
    textMode(CORNER)
    font(self.font)
    fontSize(self.fontSize)
    text(self.text, self:left() + 45, self:midY()- 8)
    popStyle()
end

function SpotSwitch:touched(touch)
    if self:ptIn(touch) then
        if touch.state == BEGAN  then
            self.selected = not self.selected
        end
        if self.callback ~= nil then self.callback() end
        return true
    end
    return false
end


--# SelectList
SelectList = class(Control)

-- SelectList 7.0
-- =====================
-- Designed for use with Cider controls
-- mimics the grouping control of Apple's UI
-- =====================
 
function SelectList:init(s, x, y, w, h, callback)
    Control.init(self, s, x, y, w, h, nil) 
    self.controlName = "SelectList"
    self.pressed = false
    self.over = false
    self.background = color(255, 255, 255, 255)
    self.foreground = color(37, 37, 37, 255)
    self.highlightColor = color(73, 73, 73, 255)
    self.seperatorColor = color(178, 177, 177, 255)
    self.itemText = {}
    self:splitText()
    self.itemHeight = 40
    self.selectedItem = 0
    
    self.item = {} -- an array to hold controls within the list
    self:setControls()
    
end

function SelectList:setControls()
    local i, t, s, r, x, y
    y = self:top()
    for i, t in ipairs(self.itemText) do
        s = string.sub(self.itemText[i], 1, 1)
        r = string.sub(self.itemText[i], 2)
        x = self:left() + 4
        if s == "$" then
            y = y - self.itemHeight
            self.item[i] = Switch(r, 
            x, y, 
            self:width()-8, self.itemHeight-4, nil)
        elseif s == "&" then
            y = y - self.itemHeight
            self.item[i] = TextField(r, 
            x, y, 
            self:width()-8, self.itemHeight-4,"", 1, 
            nil)
            self.item[i].foreground = color(175, 175, 175, 255)
        elseif s == "!" then
            y = y - self.itemHeight / 2
            self.item[i] = Control("", self:left(), y, 
            self:width(), self.itemHeight/2-4)
            self.item[i].foreground = color(175, 175, 175, 255)
            self.item[i].background = color(175, 175, 175, 255)
        else 
            y = y - self.itemHeight
            self.item[i] = Label(self.itemText[i], x, y,
            self:width()-8, self.itemHeight, nil)
        end
    end
end

function SelectList:draw()
    local y
    pushStyle()
    
    stroke(self.foreground)
    fill(self.background)
    strokeWidth(1)
    Frame.draw(self)
    smooth()
    for i, c in ipairs(self.item) do
        smooth()
        c:draw()
        strokeWidth(3)
        
        if c.controlName == "Label" then
            line(self:right() - 18, c:midY()- 10, 
                self:right() - 4, c:midY())
            line(self:right() - 18, c:midY()+10, 
                self:right() - 4, c:midY())
        end
        strokeWidth(1)
        noSmooth()
        stroke(self.seperatorColor)
        if i < #self.item then
            line(self:left() + 4, c:bottom(), 
            self:right() - 4, c:bottom())
        end
    end
    popStyle()
end

function SelectList:touched(touch)
    local i
    pushStyle()
    font(self.font)
    fontSize(self.fontSize)
    w, h = textSize(self.itemText[1])
    popStyle()
    for i, c in ipairs(self.item) do
        if c:touched(touch) and touch.state == BEGAN then 
            self.selectedItem = i
            return true
        end
    end
    return false
end

--# IconButton
IconButton = class(Control)

-- IconButton 
-- ver. 7.0
-- a simple control that centers an image in a frame
-- ====================

function IconButton:init(s, x, y, w, h, img, topText, bottomText)
    Control.init(self, s, x, y, w, h)
    self.controlName = "IconButton"
    self.background = color(255, 255, 255, 255)
    self.font = "HelveticaNeue-UltraLight"
    self.fontSize = 32
    self.img = img
    self.text = s
    self.topText = topText
    self.bottomText = bottomText
    self.textAlign = CENTER
    self.smallFontSize = 12
end

function IconButton:draw()
    local h, w
    w, h = textSize(self.text)
    pushStyle()
    fill(self.foreground)
    stroke(self.foreground)
    self:roundRect(4)
    fill(self.background)
    stroke(self.background)
    self:inset(1,1)
    self:roundRect(4)
    self:inset(-1,-1)
    font(self.font)
    fontSize(self. smallFontSize)
    textMode(CENTER)
    textAlign(CENTER)
    smooth()
    w, h = textSize(self.topText)
    fill(self.textColor)
    text(self.topText, self:midX(), self:top() - h / 2 - 4)
    if self.bottomText then
        text(self.bottomText, self:midX(), self:bottom() + h/2 + 4)
    end
    if self.img == nil then
        fontSize(self.fontSize)
        text(self.text, self:midX(), self:midY())
    else
        sprite(self.img, self:midX(), self:midY())
    end
    
    popStyle()
end

function IconButton:initString(ctlName)
    return "IconButton('"..self.text.."', " .. 
        self.x..", "..self.y..", "..
        self.w..", "..self.h..", '"..
        self.img .. "', '"..
        self.topText .. "', '"..
        self.bottomText .. "', '"..
        "')"
end


--# Dialog
Dialog = class(Control)

-- Dialog 7.0
-- =====================
-- Designed for use with the Cider controls
-- A simple pop up window for other controls
-- =====================

function Dialog:init(t, x, y, w, h)
    Control.init(self, t, x, y, w, h)
    self.controlName = "Dialog"
    self.text = t
    self.visible = false
    self.inner = Frame(x + 4, y + 4, 
    w - 8, h - 40)
    self.background = color(255, 255, 255, 255)
    self.foreground = color(43, 43, 43, 255)
end

function Dialog:draw()
    pushMatrix()
    pushStyle()
    textMode(CENTER)
    textAlign(CENTER)
    fill(self.foreground)
    stroke(self.foreground)
    strokeWidth(2)
    self:roundRect(4)
    fill(self.background)
    stroke(self.background)
    text(self.text, self:midX(), self:top() - 20)
    self.inner:roundRect(4)
    popStyle()
    popMatrix()
end
--# ColorSelector
ColorSelector = class(Control)

function ColorSelector:init(x, y, c)
    Control.init(self, "", x, y, 350, 310)
    self.background = color(255, 255, 255, 255)
    self.foreground = color(54, 54, 54, 255)
    self.sldRed = Slider("", 70, 160, 255, 20, 1, 0, 256, 0)
    self.sldGreen = Slider("", 70, 130, 255, 20, 1, 0, 256, 0)
    self.sldBlue = Slider("", 70, 100, 255, 20, 1, 0, 256, 0)
    self.sldAlpha = Slider("", 70, 70, 255,  20, 1, 0, 256, 0)
    self.ctlSample = Control("", 100,  200,  150,  100)
    self.btnOK = Button("OK", 0, 0, 175, 40, 1)
    self.btnOK.background = color(39, 195, 46, 255)
    self.btnCancel = Button("Cancel", 175, 0, 175, 40, 1)
    self.originalColor = c
    self.color = c
    self.closedOK = false
    self:setColor(c)
    self.visible = false
end

function ColorSelector:setColor(c)
    self.sldRed.val = c.r
    self.sldGreen.val = c.g
    self.sldBlue.val = c.b
    self.sldAlpha.val = c.a
    self.color = c
end

function ColorSelector:draw()
    if self.visible == false then
        return false
    end
    pushStyle()
    pushMatrix()
    self.ctlSample.background = self:getColor()
    fill(self.background)
    stroke(self.foreground)
    strokeWidth(1)
    Frame.draw(self)
    translate(self.x, self.y)
    font("HelveticaNeue-Light")
    fontSize(18)
    self.sldRed:draw()
    self.sldGreen:draw()
    self.sldBlue:draw()
    self.sldAlpha:draw()
    self.ctlSample:draw()
    fill(21, 21, 21, 255)
    textAlign(LEFT)
    textMode(CORNER)
    text("Red", self.sldRed.x - 60, self.sldRed.y)
    text("Green", self.sldRed.x - 60, self.sldGreen.y)
    text("Blue", self.sldRed.x - 60, self.sldBlue.y)
    text("Alpha", self.sldRed.x - 60, self.sldAlpha.y)
    self.btnCancel:draw()
    self.btnOK:draw()
    popMatrix()
    popStyle()
end

function ColorSelector:getColor()
    self.color = color(self.sldRed.val, self.sldGreen.val, 
    self.sldBlue.val, self.sldAlpha.val)
    return self.color
end

function ColorSelector:touched(touch)
    local tt
    if Control.touched(self, touch) then
        tt = Ttouch(touch)
        tt:translate(self.x, self.y)
        self.sldRed:touched(tt)
        self.sldGreen:touched(tt)
        self.sldBlue:touched(tt)
        self.sldAlpha:touched(tt)
        self.ctlSample.background = self:getColor()
        self.color = self:getColor()
        if self.btnCancel:touched(tt) then
            self.color = self.originalColor
            self:setColor(self.color)
            self.visible = false
        end
        if self.btnOK:touched(tt) then
            self.closedOK = true
            self.visible = false
        end
        return true
    else
        return false
    end
end


--# TabBar
TabBar = class(Control)

-- TabBar  
-- 7.0
-- =====================
-- Designed for use with Cider controls
-- provides a strip of selectable tabs
-- =====================

function TabBar:init(s, x, y, w, h, callback)
    Control.init(self, s, x, y, w, h, callback)
    self.controlName = "TabBar"
    self.itemText = {}
    self.tab = {}
    self.icons = {}
    self:splitText()
    self:sizeTabs()
    self.selected = 1
    self.background = color(255, 255, 255, 212)
    self.textColor = color(127, 127, 127, 255)
    self.tintIcons = true
end

function TabBar:sizeTabs()
    local i, x, w
    x = 0
    w = self.w / #self.itemText
    for i=1, #self.itemText do
        self.tab[i] = Frame(x, 0, w, self.h)
        x = x + w
    end
end

function TabBar:setIcon(tab, img)
    self.icons[tab] = img
end

function TabBar:draw()
    local w, i, b, h, x
    pushStyle()
    pushMatrix()
    translate(self.x, self.y)
    fill(self.background)
    noStroke()
    rect(0, 0, self.w, self.h)
    fontSize(self.fontSize)
    font(self.font)
    for i = 1, #self.itemText do
        w, h = textSize(self.itemText[i])
        self.tab[i].top = self.h - 4
        if i == self.selected then
            fill(self.highlightColor)
            self.tab[i]:draw()
        end
        if i == self.selected then
            fill(self.highlightedTextColor)
            if self.tintIcons then
                tint(self.highlightedTextColor)
            end
        else
            fill(self.textColor)
            if self.tintIcons then
                tint(self.textColor)
            end
        end
        text(self.itemText[i], self.tab[i]:midX(), self.tab[i].y + h/2)
        if self.icons[i] then
            sprite(self.icons[i] , self.tab[i]:midX(), 
            self.tab[i]:midY() + h/2)
        end
    end
    
    popMatrix()
    popStyle()
end

function TabBar:touched(touch)
    if self:ptIn(touch) then
        if touch.state == BEGAN then
            for i = 1, #self.itemText do
                tt = Ttouch(touch)
                tt.x = tt.x - self.x
                tt.y = tt.y - self.y
                if self.tab[i]:touched(tt) then
                    self.selected = i
                end
            end
        end
        return true
    else
        return false
    end
end

--# Ttouch
Ttouch = class()

-- Translatable Touch 
-- ver. 1.0
-- maps fields of a touch but is easily modified.
-- allows easier may on controls that have been translated / rotated
-- ====================.

function Ttouch:init(touch)
    self.x = touch.x
    self.y = touch.y
    self.state = touch.state
    self.prevX = touch.prevX
    self.prevY = touch.prevY
    self.deltaX = touch.deltaX
    self.deltaY = touch.deltaY
    self.id = touch.id
    self.tapCount = touch.tapCount
    self.timer = 0
end

function Ttouch:translate(x, y)
    self.x = self.x - x
    self.y = self.y - y
end