--import the table view library
local tableView = require("tableView")
 
--import the button events library
local ui = require("ui")
 
display.setStatusBar( display.HiddenStatusBar ) 
------
--initial values
local image
local screenOffsetW, screenOffsetH = display.contentWidth -  display.viewableContentWidth, display.contentHeight - display.viewableContentHeight
 
local myList, backBtn, detailScreenText
 
local background = display.newRect(0, 0, display.contentWidth, display.contentHeight)
background:setFillColor(77, 77, 77)
 
--Uncomment the line below to see a background image
-- local background = display.newImage("coffeeBg.png")
 
--setup a destination for the list items
local detailScreen = display.newGroup()
 
local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,255,255)
detailScreen:insert(detailBg)
 
detailScreenText = display.newText("For", 0, 0, native.systemFontBold, 24)
detailScreenText:setTextColor(0, 0, 0)
detailScreen:insert(detailScreenText)
detailScreenText.x = math.floor(display.contentWidth/2)
detailScreenText.y = math.floor(display.contentHeight/4)        
detailScreen.x = display.contentWidth
 
--setup the table
local data = {}  --note: the declaration of this variable was moved up higher to broaden its scope
 
--iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50)  --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180)  --set the color fill to light blue
selected.isVisible = false  --hide color fill until needed
 
--setup functions to execute on touch of the list view items
function listButtonRelease( event )
        self = event.target
        local id = self.id
        print(self.id)
        ------>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
        
        ---000000000000000000000000000000000000000000
        
        --00000000000000000000000000000000000000000000
        detailScreenText.text =
        data[id].subtitle.." for ".. data[id].title --added this line to make the right side of the screen more interesting
 
-----adding new image with call
 
    image1 = display.newImage(data[id].image1);
        image1.x=160
        image1.y=270
              
------------------------------
 
 
---000000000000000000000000000000000000000000
 
--00000000000000000000000000000000000000000000
 
        --check for screen width of the iPad
        if system.getInfo("model") == "iPad" then                       
                selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
                selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
                selected.isVisible = true --iPad: show the fill color
        else
                transition.to(myList, {time=400, x=display.contentWidth*-1, transition=easing.outExpo })
                transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
                transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
                transition.to(backBtn, {time=400, alpha=1 })
        
                delta, velocity = 0, 0
        end
end
 
function backBtnRelease( event )
        print("back button released")
        
        --->>>>>>>>>>>>>>>>>>
        image1.isVisible=false
        ---->>>>>>>>>>>>>>>>>
        transition.to(myList, {time=400, x=0, transition=easing.outExpo })
        transition.to(detailScreen, {time=400, x=display.contentWidth, transition=easing.outExpo })
        transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
        transition.to(backBtn, {time=400, alpha=0 })
 
        delta, velocity = 0, 0
end
 
--setup each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = "Apple"
data[1].subtitle = "A"
data[1].image = "a.png"
data[1].image1 = "apple.png"
 
data[2] = {}
data[2].title = "Ball"
data[2].subtitle = "B"
data[2].image = "b.png"
data[2].image1 = "ball.png"
 
data[3] = {}
data[3].title = "Cat"
data[3].subtitle = "C"
data[3].image = "c.png"
data[3].image1 = "cat.png"
 
data[4] = {}
data[4].title = "Dog"
data[4].subtitle = "D"
data[4].image = "d.png"
data[4].image1 = "dog.png"
 
data[5] = {}
data[5].title = "Elephant"
data[5].subtitle = "E"
data[5].image = "e.png"
data[5].image1 = "elephant.png"
 
data[6] = {}
data[6].title = "Fish"
data[6].subtitle = "F"
data[6].image = "f.png"
data[6].image1 = "fish.png"
 
-------------------------------------------
 
data[7] = {}
data[7].title = "Grapes"
data[7].subtitle = "G"
data[7].image = "g.png"
data[7].image1 = "grapes.png"
 
 
data[8] = {}
data[8].title = "Horse"
data[8].subtitle = "H"
data[8].image = "h.png"
data[8].image1 = "horse.png"
 
 
data[9] = {}
data[9].title = "Inkpot"
data[9].subtitle = "I"
data[9].image = "i.png"
data[9].image1 = "inkpot.png"
 
 
data[10] = {}
data[10].title = "Joker"
data[10].subtitle = "J"
data[10].image = "j.png"
data[10].image1 = "joker.png"
 
 
data[11] = {}
data[11].title = "Kite"
data[11].subtitle = "K"
data[11].image = "k.png"
data[11].image1 = "kite.png"
 
 
 
data[12] = {}
data[12].title = "Lion"
data[12].subtitle = "L"
data[12].image = "l.png"
data[12].image1 = "lion.png"
 
 
 
data[13] = {}
data[13].title = "Monkey"
data[13].subtitle = "M"
data[13].image = "m.png"
data[13].image1 = "monkey.png"
 
 
 
data[14] = {}
data[14].title = "Niddle"
data[14].subtitle = "N"
data[14].image = "n.png"
data[14].image1 = "niddle.png"
 
 
 
data[15] = {}
data[15].title = "Orange"
data[15].subtitle = "O"
data[15].image = "o.png"
data[15].image1 = "orange.png"
 
 
 
data[16] = {}
data[16].title = "Peacock"
data[16].subtitle = "P"
data[16].image = "p.png"
data[16].image1 = "peacock.png"
 
 
 
data[17] = {}
data[17].title = "Queen"
data[17].subtitle = "Q"
data[17].image = "q.png"
data[17].image1 = "queen.png"
 
 
data[18] = {}
data[18].title = "Rose"
data[18].subtitle = "R"
data[18].image = "r.png"
data[18].image1 = "rose.png"
 
 
data[19] = {}
data[19].title = "Ship"
data[19].subtitle = "S"
data[19].image = "s.png"
data[19].image1 = "ship.png"
 
 
data[20] = {}
data[20].title = "Teeth"
data[20].subtitle = "T"
data[20].image = "t.png"
data[20].image1 = "teeth.png"
 
 
data[21] = {}
data[21].title = "Umbrella"
data[21].subtitle = "U"
data[21].image = "u.png"
data[21].image1 = "umbrella.png"
 
 
 
data[22] = {}
data[22].title = "violin"
data[22].subtitle = "V"
data[22].image = "v.png"
data[22].image1 = "violin.png"
 
 
 
data[23] = {}
data[23].title = "Window"
data[23].subtitle = "W"
data[23].image = "w.png"
data[23].image1 = "window.png"
 
 
 
data[24] = {}
data[24].title = "Xmas tree"
data[24].subtitle = "X"
data[24].image = "x.png"
data[24].image1 = "xmass.png"
 
 
 
data[25] = {}
data[25].title = "Yellow"
data[25].subtitle = "Y"
data[25].image = "y.png"
data[25].image1 = "yellow.png"
 
 
 
data[26] = {}
data[26].title = "Zebra"
data[26].subtitle = "Z"
data[26].image = "z.png"
data[26].image1 = "zebra.png"
-----------------------------------------
 
--iPad: duplicate some of the sample data to make the list longer
--[[for i=1, 6 do
        table.insert(data, data[i])
end
]]
 
local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0
 
-- create the list of items
myList = tableView.newList{
 
        data=data, 
        default="listItemBg_white.png",
        --default="listItemBg.png",
        over="listItemBg_over.png",
        onRelease=listButtonRelease,
        top=topBoundary,
        bottom=bottomBoundary,
        --backgroundColor={ 255, 255, 255 },  --commented this out because we're going to add it down below
     callback = function( row )
                         local g = display.newGroup()
 
                         local img = display.newImage(row.image)
                         g:insert(img)
                         img.x = math.floor(img.width*0.5 + 6)
                         img.y = math.floor(img.height*0.5) 
 
                         local title =  display.newText( row.title, 0, 0, native.systemFontBold, 14 )
                        title:setTextColor(0, 0, 0)
                         --title:setTextColor(255, 255, 255)
                         g:insert(title)
                         title.x = title.width*0.5 + img.width + 6
                         title.y = 30
 
                         local subtitle =  display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
                         subtitle:setTextColor(80,80,80)
                         --subtitle:setTextColor(180,180,180)
                         g:insert(subtitle)
                         subtitle.x = subtitle.width*0.5 + img.width + 6
                         subtitle.y = title.y + title.height + 6
 
                         return g   
                  end  
}
 
local function scrollToTop()
        myList:scrollTo(topBoundary-1)
end
 
--Setup the nav bar 
local navBar = ui.newButton{
        default = "navBar.png",
        onRelease = scrollToTop
}
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
 
local navHeader = display.newText("Alphabet Book For Kids", 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = navBar.y
 
--Setup the back button
backBtn = ui.newButton{ 
        default = "backButton.png", 
        over = "backButton_over.png", 
        onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y 
backBtn.alpha = 0
 
--Add a white background to the list.  
--It didn't move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)
 
--*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo("model") == "iPad" then       
        --Rather than creating a new graphic, let's just stretch the black bar at the top of the screen
        navBar.xScale = 6  
 
        --Set new default text since the list is now on the left
        detailScreenText.text = "Tap an item on the left" 
 
        --Change the width and x position of the detail screen
        detailBg.width = display.contentWidth - myList.width
        detailScreen.x = myList.x + myList.width*0.5 + 1
 
        --Insert the selected color fill one level before the last item (which was the background inserted above)
        myList:insert(2,selected)
        --Adjust the x position of the selected color fill
        selected.x = myList.x + myList.width*0.5
end
-------xxxxxxxxxx-------------