import QtQuick 1.0
import "Util.js" as Utility




Rectangle {
    // height of the tab bar
    property int tabsHeight : 64

    // index of the active tab
    property int tabIndex : 0

     property int tabClickCount : 0

    // the model used to build the tabs
    property VisualItemModel tabsModel

    FontLoader { id: localFont; source: "fonts/FZJLJW.TTF" }


    anchors.fill: parent




    // will contain the tab views
    Rectangle {
        id: tabViewContainer
        width: parent.width

        anchors.top: tabBar.bottom
        anchors.bottom: parent.bottom

        // build all the tab views
        Repeater {
            model: tabsModel
        }
    }

    Component.onCompleted:
    {
        // hide all the tab views
        for(var i = 0; i < tabsModel.children.length; i++)
        {
            tabsModel.children[i].visible = false;
        }
        // select the default tab index
        tabClicked(tabIndex);
    }

    function tabClicked(index)
    {


        // unselect the currently selected tab
        tabs.children[tabIndex].color = "transparent";

        // hide the currently selected tab view
        tabsModel.children[tabIndex].visible = false;

        // change the current tab index
        tabIndex = index;



        // highlight the new tab
        tabs.children[tabIndex].color = "grey"  //"#30ffffff";

       //if (index!=0)
       // Utility.renrenGetPhotoSets(0,appState.accessToken);
        if (tabClickCount>0)
        {

          Utility.renrenGetPhotoSets(index,appState.accessToken);
        }

         tabClickCount=tabClickCount+1;

        // show the new tab view
        tabsModel.children[tabIndex].visible = true;
    }

    Component {
        id: tabBarItem

        Rectangle {
            height: tabs.height
            width: tabs.width / tabsModel.count
            radius: 10
            smooth: true
            color: "transparent"

            Image {
                id:iconid
                width:  background.height*20/900
                height:    background.height*20/900
                source: tabsModel.children[index].tabicon
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter

            }

            Text {
                anchors.horizontalCenter: parent.horizontalCenter

                //anchors.left:iconid.right
                //anchors.leftMargin: background.width*4/900//4
                //anchors.bottom: parent.bottom
                //anchors.bottomMargin: 4
                font {
                    family: localFont.name
                    pointSize: background.height*18/900// 12
                    weight: Font.Bold
                }
                color: "DarkOrange"
                text: tabsModel.children[index].name
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    tabClicked(index);
                }
            }
        }
    }


    // the tab bar
    Rectangle {
        height: tabsHeight
        width: parent.width

        // take the whole parent width
        anchors.left: parent.left
        anchors.right: parent.right

        // attach it to the view bottom
        anchors.top: parent.top


        id: tabBar

        gradient: Gradient {
            GradientStop {position: 0.0; color: "#666666"}
            GradientStop {position: 1.0; color: "#000000"}
        }

        // place all the tabs in a row
        Row {
            anchors.fill: parent

            id: tabs

            Repeater {
                model: tabsModel.count

                delegate: tabBarItem
            }
        }
    }




}
