import QtQuick 1.0
import "Util.js" as Utility


Item{
    id: tabItem
    property int currentfocus:0

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

    Rectangle{
        id:albumListID
        width: tabItem.width
        height: tabItem.height
        color: "#343434";

        Rectangle
        {
            id:albumListLeftID
            width: tabItem.width*0.85
            height: tabItem.height
            color: "#343434";


            ListModel {
                id: albumModel

            }

            Component {
                id: primeImageDelegate
                Item {
                    id: albumcell
                    width: albumgridID.cellWidth; height: albumgridID.cellHeight


                    ImageFrame
                    {
                        id: albumImageFrameID

                        imgUrl: primaryUrl;
                        anchors.centerIn:parent
                        color: "#343434"


                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                albumListID.opacity=0;
                                photolistgridID.focus=true;
                                currentfocus=1;
                                tabcontainer.callrenrenGetPhotos(photosetID);


                            }
                        }
                    }

                    BusyIndicator { anchors.centerIn: parent; width:20; height:20; on: albumImageFrameID.imagestatus != Image.Ready }

                    Text {
                        text: photosetDesc;
                        anchors.top: albumImageFrameID.bottom;
                        anchors.topMargin: 5

                        color:"white";
                        anchors.horizontalCenter: parent.horizontalCenter;
                        wrapMode:Text.WrapAnywhere

                    }

                    Keys.onPressed: {

                        if (event.key == Qt.Key_Return)
                        {
                            albumListID.opacity=0;
                            photolistgridID.focus=true;
                            currentfocus=1;
                            tabcontainer.callrenrenGetPhotos(photosetID);
                        }

                    }

                }
            }

            Component {
                id: appHighlight
                Rectangle { color: "lightsteelblue"; radius: 10 }
            }


            GridView {
                id: albumgridID

                anchors.fill: parent
                cellWidth: 175; cellHeight:175

                model: albumModel
                delegate: primeImageDelegate
                highlight:appHighlight
                focus: true





                ScrollBar {
                    id: albumScrollBar
                    scrollArea: albumgridID
                    height: albumgridID.height
                    width: 8
                    opacity: 0
                    anchors.right: albumgridID.right
                }
            }

        }

        Rectangle
        {
            id:albumListRightID
            anchors.left:albumListLeftID.right;

            width: tabItem.width*0.15
            height: tabItem.height*0.95
            color: "#343434";


            Column
            { id: toolbarID


               // anchors.bottom:albumListRightID.bottom;
               // anchors.bottomMargin:40
                anchors.verticalCenter:albumListRightID.verticalCenter;
                anchors.right:albumListRightID.right;
                anchors.rightMargin:20

                spacing: 20

                Column{

                    anchors.horizontalCenter:parent.horizontalCenter;

                    Image{
                        id:vipImageID
                        width:100
                        height:100
                        anchors.horizontalCenter:parent.horizontalCenter;
                        smooth:true
                        source:"images/vip.png";

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {

                                tabcontainer.opacity=0 ;
                                vipContainer.opacity=1;
                               // vipContainer.focus=true;

                                switch (viptabbedUIId.tabIndex)
                                {
                                case 0:
                                      vipTabContentID1.setVipTabContentfocus();
                                    break
                                case 1:
                                      vipTabContentID2.setVipTabContentfocus();
                                    break

                                case 2:
                                      vipTabContentID3.setVipTabContentfocus();
                                    break

                                case 3:
                                       vipTabContentID4.setVipTabContentfocus();
                                    break

                                case 4:
                                      vipTabContentID5.setVipTabContentfocus();
                                    break

                                case 5:
                                     vipTabContentID6.setVipTabContentfocus();
                                    break
                                }



                            }
                        }
                    }
                    Text
                    {

                        id: vipText;
                        anchors.horizontalCenter:parent.horizontalCenter;

                        font {
                            family: localFont.name
                            pointSize: 13
                            weight: Font.Bold
                        }
                        text: "VIP\u4E13\u533A"
                        color:"DarkOrange"

                    }
                }


                Column{

                    anchors.horizontalCenter:parent.horizontalCenter;
                    Image // AnimatedImage
                    {
                        id:advertisementImage1ID

                        width:100
                        height:100

                        anchors.horizontalCenter:parent.horizontalCenter;

                        smooth:true
                        source:"images/shangcheng.png";

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {

                                tabcontainer.opacity=0 ;
                                shoptabcontainer.opacity=1;

                                switch (shoptabbedUIId.tabIndex)
                                {
                                case 0:
                                      shopTabContentID1.setShopTabContentfocus();
                                    break
                                case 1:
                                      shopTabContentID2.setShopTabContentfocus();
                                    break

                                case 2:
                                      shopTabContentID3.setShopTabContentfocus();
                                    break

                                case 3:
                                       shopTabContentID4.setShopTabContentfocus();
                                    break

                                case 4:
                                      shopTabContentID5.setShopTabContentfocus();
                                    break

                                case 5:
                                     shopTabContentID6.setShopTabContentfocus();
                                    break
                                }


                                Utility.renrenShopGetPhotoSets(0,appState.accessToken);
                                //Qt.openUrlExternally("http://shop68974037.taobao.com/")

                            }
                        }

                    }

                    Text
                    {

                        id: shangchengText;
                        anchors.horizontalCenter:parent.horizontalCenter;

                        font {
                            family: localFont.name
                            pointSize: 13
                            weight: Font.Bold
                        }
                        text: "\u5546\u57CE"
                        color:"DarkOrange"

                    }

                }



                Column{

                    anchors.horizontalCenter:parent.horizontalCenter;

                    Image{
                        id:guanggaoImageID
                        width:100
                        height:100
                        anchors.horizontalCenter:parent.horizontalCenter;
                        smooth:true
                        source:"images/guanggaozhaozu.png";

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                    Qt.openUrlExternally("http://www.anywebtech.com")
                            }
                        }
                    }
                    Text
                    {

                        id: guanggaoText;
                        anchors.horizontalCenter:parent.horizontalCenter;

                        font {
                            family: localFont.name
                            pointSize: 13
                            weight: Font.Bold
                        }
                        text: "\u5E7F\u544A\u62DB\u79DF"
                        color:"DarkOrange"

                    }
                }



                Column{

                    anchors.horizontalCenter:parent.horizontalCenter;

                    Image{
                        id:banner2ImageID
                        width:100
                        height:100
                        anchors.horizontalCenter:parent.horizontalCenter;
                        smooth:true
                        source:"images/weibo.png";

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                Qt.openUrlExternally("http://weibo.com/2463394302")

                            }
                        }
                    }
                    Text
                    {

                        id: weiboText;
                        anchors.horizontalCenter:parent.horizontalCenter;

                        font {
                            family: localFont.name
                            pointSize:  13
                            weight: Font.Bold
                        }
                        text: "\u5B98\u65B9\u5FAE\u535A"
                        color:"DarkOrange"

                    }
                }








                Column{

                    anchors.horizontalCenter:parent.horizontalCenter;
                    Image{
                          width:100;
                          height:100;

                        anchors.horizontalCenter:parent.horizontalCenter;

                        id:banner4ImageID
                        //
                        smooth:true
                        source:"images/zhuye.png";

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                Qt.openUrlExternally("http://www.anywebtech.com/maodouxiu.html")

                            }
                        }
                    }

                    Text
                    {

                        id: zhuyeText;
                        anchors.horizontalCenter:parent.horizontalCenter;

                        font {
                            family: localFont.name
                            pointSize:  13
                            weight: Font.Bold
                        }
                        text: "\u4EA7\u54C1\u4E3B\u9875"
                        color:"DarkOrange"

                    }
                }//end of column



            }//end of column

        }

    }

    Rectangle
    {
        id:photoListID
        width: tabItem.width
        height: tabItem.height


        color: "#343434";
        opacity:0



        Rectangle
        {
            id:photoListLeftID

            width: tabItem.width*0.9
            height: tabItem.height
            color: "#343434";

            ListModel {
                id: photosModel

            }


            Component {
                id: photoDelegate
                Item {
                    id: photocell
                    width: photolistgridID.cellWidth; height: photolistgridID.cellHeight

                    Item {
                        anchors.fill: parent
                        // spacing:5
                        anchors.topMargin:15

                        Image
                        {
                            id: imageInPhotocellID;


                            source: photoUrl;
                            smooth:true


                            width:sourceSize.width>sourceSize.height? 250: (sourceSize.width*250/sourceSize.height)
                            height:sourceSize.width>sourceSize.height?  (sourceSize.height*250/sourceSize.width):250


                            anchors.horizontalCenter: parent.horizontalCenter;

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    //originalImageItemID.focus=true;

                                    currentfocus=2;
                                    thumbnailPathview.focus=true;

                                    var pathviewcount= photoStreamModel.count;
                                    var matchedindex=0;
                                    if (pathviewcount>0)
                                    {
                                        for (var i=0;i<pathviewcount;i++ )
                                        {
                                            if (photoStreamModel.get(i).photoID==photoID)
                                                matchedindex=i;
                                        }
                                        thumbnailPathview.currentIndex = matchedindex;

                                    }

                                    originalImageItemID.opacity=1;
                                    fullDisplayViewID.source= fullDisplayURL;  //photoUrl.substring(0,photoUrl.length-6)+".jpg";
                                    photoListID.opacity=0;
                                }
                            }


                        }

                        BusyIndicator { anchors.centerIn: parent; on: imageInPhotocellID.status != Image.Ready }

                    }

                    Keys.onPressed: {

                        if (event.key == Qt.Key_Return)
                        {
                            //originalImageItemID.focus=true;

                            currentfocus=2;
                            thumbnailPathview.focus=true;

                            var pathviewcount= photoStreamModel.count;
                            var matchedindex=0;
                            if (pathviewcount>0)
                            {
                                for (var i=0;i<pathviewcount;i++ )
                                {
                                    if (photoStreamModel.get(i).photoID==photoID)
                                        matchedindex=i;
                                }
                                thumbnailPathview.currentIndex = matchedindex;

                            }

                            originalImageItemID.opacity=1;
                            fullDisplayViewID.source= fullDisplayURL; // fullDisplayViewID.source= photoUrl.substring(0,photoUrl.length-6)+".jpg";
                            photoListID.opacity=0;
                        }
                        else   if (event.key == Qt.Key_Escape)
                        {
                            currentfocus=0;

                            photoListID.opacity=0;
                            albumgridID.focus=true;
                            albumListID.opacity=1;

                        }

                    }
                }
            }


            GridView {
                id: photolistgridID

                anchors.fill: parent
                cellWidth: 280; cellHeight: 280

                model: photosModel
                delegate: photoDelegate
                highlight: Rectangle {  color: "lightsteelblue"; radius: 15 }



                ScrollBar {
                    id: photoListScrollBar
                    scrollArea: photolistgridID
                    height: photolistgridID.height
                    width: 8
                    opacity: 0
                    anchors.right: photolistgridID.right
                }

            }
        }

        Rectangle
        {
            id:photoListRightID
            anchors.left:photoListLeftID.right
            width: tabItem.width*0.1
            height: tabItem.height
            color: "#343434";

            Image
            {
                id:photolistviewBackImageID
                source:"images/back_button_pressed.png";
                anchors.top:photoListRightID.top;
                anchors.topMargin:10

                anchors.right:photoListRightID.right;
                anchors.rightMargin:10

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        currentfocus=0;
                        photoListID.opacity=0;
                        albumgridID.focus=true;
                        albumListID.opacity=1;
                    }
                }

            }
        }

    }


    Rectangle
    {
        id:originalImageItemID
        width: tabItem.width
        height: tabItem.height*0.97

        color: "#343434";
        opacity:0

        Rectangle
        {
            id:originalImageTopPartID
            anchors.top:originalImageItemID.top
            width: tabItem.width
            height: tabItem.height*0.9


            color: "#343434";




            Image
            {
                id: fullDisplayViewID;

                // anchors.top:parent.top
                // anchors.topMargin:background.height*0.1

                /* width: background.width*0.7;
            height: background.height*0.9;
            fillMode:Image.PreserveAspectFit;*/

                width:sourceSize.width>sourceSize.height? tabItem.height*0.8: (sourceSize.width*tabItem.height*0.8/sourceSize.height)
                height:sourceSize.width>sourceSize.height?  (sourceSize.height*tabItem.height*0.8/sourceSize.width):tabItem.height*0.8
                smooth:true;


                anchors.verticalCenter:originalImageTopPartID.verticalCenter;

                // source: photoUrl;
                anchors.horizontalCenter: parent.horizontalCenter;


                onStatusChanged:
                {
                    // if (fullDisplayViewID.status == Image.Ready)

                    //console.log('Loaded')
                }


            }


            Image
            {
                id:fulldisplayviewBackImageID
                source:"images/back_button_pressed.png";
                anchors.top:originalImageTopPartID.top;
                anchors.topMargin:10

                anchors.right:originalImageTopPartID.right;
                anchors.rightMargin:10

                MouseArea {
                    anchors.fill: parent
                    onClicked: {


                        currentfocus=1;
                        photolistgridID.focus=true;

                        photoListID.opacity=1;
                        originalImageItemID.opacity=0;
                    }
                }

            }

            Image
            {
                id:leftIconID
                width:150
                height:150
                smooth:true
                source:"images/left.png";
                anchors.verticalCenter:originalImageTopPartID.verticalCenter;


                anchors.left:originalImageTopPartID.left;
                anchors.leftMargin:30

                MouseArea {
                    anchors.fill: parent
                    onClicked: {

                        if (!thumbnailPathview.moving)
                        {
                            thumbnailPathview.decrementCurrentIndex();
                            fullDisplayViewID.source="";
                            fullDisplayViewID.source= photoStreamModel.get(thumbnailPathview.currentIndex).fullDisplayURL;
                        }

                    }
                }

            }

            Image
            {
                id:rightIconID
                width:150
                height:150
                smooth:true
                source:"images/right.png";
                anchors.verticalCenter:originalImageTopPartID.verticalCenter;

                anchors.right:originalImageTopPartID.right;
                anchors.rightMargin:30

                MouseArea {
                    anchors.fill: parent
                    onClicked: {

                        if (!thumbnailPathview.moving)
                        {
                            thumbnailPathview.incrementCurrentIndex();
                            fullDisplayViewID.source="";
                            fullDisplayViewID.source= photoStreamModel.get(thumbnailPathview.currentIndex).fullDisplayURL;
                        }
                    }
                }

            }

            BusyIndicator { anchors.centerIn: parent; on: fullDisplayViewID.status != Image.Ready }
        }


        Rectangle {
            id:imageNavigator
            width: tabItem.width
            height: tabItem.height*0.1
            // anchors.top: parent.bottom
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            color: "#343434";

            ListModel {
                id: photoStreamModel

            }


            Component {
                id: photoThumbnailDelegate
                Item {
                    id: thumbnailcell
                    width: tabItem.height*0.1; height: tabItem.height*0.1

                    Item {
                        anchors.fill: parent

                        // anchors.bottom: parent.bottom
                        // anchors.horizontalCenter: parent.horizontalCenter

                        //anchors.centerIn: parent.Center


                        Image
                        {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter:parent.verticalCenter
                            id: thumbnailphotoID;
                            source: tinyUrl;


                            MouseArea {
                                anchors.fill: parent
                                onClicked: {

                                    thumbnailPathview.currentIndex = index

                                    fullDisplayViewID.source="";

                                    fullDisplayViewID.source= photoStreamModel.get(thumbnailPathview.currentIndex).fullDisplayURL

                                }
                            }
                        }

                        BusyIndicator { anchors.centerIn: parent; on: thumbnailphotoID.status != Image.Ready }

                    }

                }
            }

            PathView {
                id: thumbnailPathview
                anchors.fill: parent
                model: photoStreamModel
                delegate: photoThumbnailDelegate

                highlight : Component {
                    Rectangle {
                        id:highlightRecID
                        //visible: PathView.onPath
                        width: tabItem.height*0.1
                        height:tabItem.height*0.1
                        color: "lightsteelblue"; radius: 10
                    }
                }

                preferredHighlightBegin : 0.5
                preferredHighlightEnd : 0.5
                highlightRangeMode :  PathView.StrictlyEnforceRange



                Keys.onRightPressed: if (!moving) { incrementCurrentIndex();  fullDisplayViewID.source=""; fullDisplayViewID.source= photoStreamModel.get(thumbnailPathview.currentIndex).fullDisplayURL;}
                Keys.onSpacePressed: if (!moving) { incrementCurrentIndex();  fullDisplayViewID.source=""; fullDisplayViewID.source= photoStreamModel.get(thumbnailPathview.currentIndex).fullDisplayURL;}
                Keys.onLeftPressed: if (!moving) { decrementCurrentIndex(); fullDisplayViewID.source=""; fullDisplayViewID.source= photoStreamModel.get(thumbnailPathview.currentIndex).fullDisplayURL;}

                pathItemCount: tabItem.width/ (tabItem.height*0.12)
                path:  Path {
                    startX: 0; startY: tabItem.height*0.05
                    PathLine { x:tabItem.width; y:tabItem.height*0.05 } }
            }
        }




        Keys.onPressed: {

            if (event.key == Qt.Key_Escape)
            {
                currentfocus=1;
                photolistgridID.focus=true;
                photoListID.opacity=1;
                originalImageItemID.opacity=0;

            }

        }


    }


    function formatRenrenAlbumListModel(arr)
    {
        console.log("formatRenrenAlbumListModel start...");

        albumModel.clear();


        //var arr = appState.photosetJson;



        for (var p in arr)
        {
            var sat = arr[p];

            if (sat["type"]==0)
                albumModel.append({ "primaryUrl":sat["url"], "photosetDesc":sat["name"]+"("+sat["size"]+")", "photosetID":sat["aid"]});


        }

    }

    function formatRenrenPhotoListModel(arr)
    {
        photosModel.clear();
        // photoStreamModel.clear();

        photoListID.opacity=1;

        //var arr = Utility.photolistJson;

        for (var p in arr)
        {
            var sat = arr[p];

            photosModel.append({ "photoUrl":sat["url_main"],  "photoID":sat["pid"], "fullDisplayURL":sat["url_large"], "tinyUrl":sat["url_tiny"] });

            var pathviewcount= photoStreamModel.count;
            var inphotostreammodel=false;

            if (pathviewcount>0)
            {
                for (var i=0;i<pathviewcount;i++ )
                {
                    if (photoStreamModel.get(i).photoID==sat["pid"])
                        inphotostreammodel=true;

                }
            }
            if (inphotostreammodel==false)
                photoStreamModel.append({   "photoID":sat["pid"], "fullDisplayURL":sat["url_large"], "tinyUrl":sat["url_tiny"]});


        }
    }

    function setTabContentfocus()
    {
        switch(currentfocus)
        {
        case 0:
            albumgridID.focus=true;
            console.log(" currentfocus 0 ");
            break
        case 1:
            photolistgridID.focus=true;
            break

        case 2:
            thumbnailPathview.focus=true;
            break

        }

    }
}





