// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.0

Rectangle {
    id: tabbar
    width: parent.width
    height: 56
    color: "#1e1e1e"
    opacity: 1
    anchors.bottom: parent.bottom


    signal homeClicked()
    signal popularClicked()
    signal searchClicked()
    signal categoryClicked()
    signal exitClicked()

        ImagedButton {
            id: home
            anchors.top: parent.top

            anchors.left: parent.left

            normalStateSource: "./images/tabbar/home.png"
            pressedStateSource: "images/tabbar/home_tap.png"
            smooth: true
            onPressed: {
                if(tabbar.state!="home"){
                    tabbar.state = "home"
                    homeClicked()
                }

            }
         }

        ImagedButton {
            id: popularButton
            anchors.top: parent.top
            anchors.left: home.right
            normalStateSource: "./images/tabbar/popular.png"
            pressedStateSource: "images/tabbar/popular_tap.png"
            smooth: true
            onPressed: {
                if(tabbar.state!="popular"){
                    tabbar.state = "popular"
                    popularClicked()
                }
            }
         }

        ImagedButton {
            id: searchButton
            anchors.top: parent.top
            anchors.left: popularButton.right
            normalStateSource: "./images/tabbar/search.png"
            pressedStateSource: "images/tabbar/search_tap.png"
            smooth: true
            onPressed: {
                if(tabbar.state!="search"){
                    tabbar.state = "search"
                    searchClicked()
                }
            }
         }

        ImagedButton {
            id: categoriesButton
            anchors.top: parent.top
            anchors.left: searchButton.right
            normalStateSource: "./images/tabbar/more.png"
            pressedStateSource: "images/tabbar/more_tap.png"
            smooth: true
            onPressed: {
                if(tabbar.state!="categories"){
                    tabbar.state = "categories"
                    categoryClicked()
                }
            }
         }

        ImagedButton {
            id: exitButton
            anchors.top: parent.top
            anchors.right: parent.right
            normalStateSource: "./images/tabbar/exit.png"
            pressedStateSource: "images/tabbar/exit_tap.png"
            smooth: true
           // onClicked: tabbar.state = "exit"
            onPressed: {
                 if(tabbar.state!="exit"){
                    tabbar.state = "exit"
                     exitClicked()
                 }
            }
         }

        states: [
            State {
                name: "home";
                PropertyChanges {
                    target: home
                    normalStateSource: "images/tabbar/home_tap.png"
                }
                PropertyChanges {
                    target: popularButton
                    normalStateSource: "./images/tabbar/popular.png"
                }
                PropertyChanges {
                    target: searchButton
                    normalStateSource: "./images/tabbar/search.png"
                }
                PropertyChanges {
                    target: categoriesButton
                    normalStateSource: "./images/tabbar/more.png"
                }
                PropertyChanges {
                    target: exitButton
                    normalStateSource: "./images/tabbar/exit.png"
                }
            },

            State {
                name: "popular";
                PropertyChanges {
                    target: home
                    normalStateSource: "images/tabbar/home.png"
                }
                PropertyChanges {
                    target: popularButton
                    normalStateSource: "./images/tabbar/popular_tap.png"
                }
                PropertyChanges {
                    target: searchButton
                    normalStateSource: "./images/tabbar/search.png"
                }
                PropertyChanges {
                    target: categoriesButton
                    normalStateSource: "./images/tabbar/more.png"
                }
                PropertyChanges {
                    target: exitButton
                    normalStateSource: "./images/tabbar/exit.png"
                }
            },

            State {
                name: "search";
                PropertyChanges {
                    target: home
                    normalStateSource: "images/tabbar/home.png"
                }
                PropertyChanges {
                    target: popularButton
                    normalStateSource: "./images/tabbar/popular.png"
                }
                PropertyChanges {
                    target: searchButton
                    normalStateSource: "./images/tabbar/search_tap.png"
                }
                PropertyChanges {
                    target: categoriesButton
                    normalStateSource: "./images/tabbar/more.png"
                }
                PropertyChanges {
                    target: exitButton
                    normalStateSource: "./images/tabbar/exit.png"
                }
            },
            State {
                name: "categories";
                PropertyChanges {
                    target: home
                    normalStateSource: "images/tabbar/home.png"
                }
                PropertyChanges {
                    target: popularButton
                    normalStateSource: "./images/tabbar/popular.png"
                }
                PropertyChanges {
                    target: searchButton
                    normalStateSource: "./images/tabbar/search.png"
                }
                PropertyChanges {
                    target: categoriesButton
                    normalStateSource: "./images/tabbar/more_tap.png"
                }
                PropertyChanges {
                    target: exitButton
                    normalStateSource: "./images/tabbar/exit.png"
                }
            },
            State {
                name: "exit";

                PropertyChanges {
                    target: home
                    normalStateSource: "images/tabbar/home.png"
                }
                PropertyChanges {
                    target: popularButton
                    normalStateSource: "./images/tabbar/popular.png"
                }
                PropertyChanges {
                    target: searchButton
                    normalStateSource: "./images/tabbar/search.png"
                }
                PropertyChanges {
                    target: categoriesButton
                    normalStateSource: "./images/tabbar/more.png"
                }

                PropertyChanges {
                    target: exitButton
                    normalStateSource: "./images/tabbar/exit_tap.png"
                }
            }
        ]

}