import QtQuick 2.0
import QtQuick.Controls 1.2

Package {
   Item { id: stackItem; Package.name: 'stack'; z: stackItem.PathView.z;width:16.5*mm;height:16.5*mm}
    Item { id: listItem; Package.name: 'list'; width: root.width-1*mm; height: root.height-8*mm; }
    Item { id: gridItem; Package.name: 'grid';}

    Item {
      id: photoWrapper
      width: 16.5*mm; height: 16.5*mm
      z: stackItem.PathView.z
      property string hqphotolink: photoLink

        Rectangle {
           id: placeHolder
           color: 'lightblue'; antialiasing: true
           anchors.fill:parent
        }
        BusyIndicator { anchors.centerIn: parent; running: realImage.status != Image.Ready }
        Image {
            id: realImage;
            width: photoWrapper.width; height: photoWrapper.height
            antialiasing: true;
            asynchronous: true
            cache: false
            fillMode: Image.PreserveAspectFit;
            source: imageLocation
        }
        Rectangle{
            id:phototextRectangle
            color:"black"
            z:3
            opacity: 0.5
            width:phototext.contentWidth
            height: phototext.contentHeight
            anchors.bottom: photoWrapper.bottom
        }
        Text {
            id:phototext
            z:4
            text: photoDescription.trim()
            width:15*mm
            anchors.bottom: photoWrapper.bottom
            color: "white"
            font.pixelSize: 2*mm
            wrapMode:Text.Wrap
        }
        MouseArea {
            width: realImage.paintedWidth; height: realImage.paintedHeight; anchors.centerIn: realImage
             onPressAndHold:{print("Pressed");
                 var menuString="import QtQuick.Controls 1.4; Menu {MenuItem{text:qsTr('Delete on client and server'); onTriggered: {deletepics('image','"+imageLocation+"');photoModel.remove(index)}}}";
                 print (menuString);
                 var imagemenuObject=Qt.createQmlObject(menuString,photoWrapper,"imagemenuOutput")
                        imagemenuObject.popup()  
             }
             onClicked: {
                if (albumWrapper.state == 'inGrid') {
                    gridItem.GridView.view.currentIndex = index;
                    albumWrapper.state = 'fullscreen';
                    listItem.ListView.view.currentIndex=index
                } else {
                    gridItem.GridView.view.currentIndex = index;
                    albumWrapper.state = 'inGrid'
                }
            }
        }
        PinchArea  {
            id:imagePinch
            pinch.target: realImage
            anchors.fill: realImage
            pinch.minimumScale: 0.1
            pinch.maximumScale: 10
            enabled: false
        }

        // onStateChanged: print("State"+photoWrapper.state+index)
        states: [
            State {
                name: 'stacked'; when: albumWrapper.state == ''
                ParentChange { target: photoWrapper; parent: stackItem; }//x: 1*mm; y: 1*mm }
                PropertyChanges { target: photoWrapper; opacity: stackItem.PathView.onPath ? 1.0 : 0.0 }
                PropertyChanges { target: phototext; opacity: 0.0 }
                PropertyChanges { target: phototextRectangle; opacity: 0.0 }
            },
            State {
                name: 'inGrid'; when: albumWrapper.state == 'inGrid'
                ParentChange { target: photoWrapper; parent: gridItem; x: 1*mm; y: 1*mm;}
                PropertyChanges { target: phototext; opacity: 1.0 }
                PropertyChanges { target: phototextRectangle; opacity: 0.5 }
                PropertyChanges { target: placeHolder; opacity: 1.0 }
            },
            State {
                name: 'fullscreen'; when: albumWrapper.state == 'fullscreen'
                ParentChange {
                    target: photoWrapper; parent: listItem; x: 1; y: 1;
                    width: root.width-mm; height: root.height-8*mm
                }
                PropertyChanges { target: placeHolder; opacity: 0.0 }
                PropertyChanges { target: realImage; source: photoWrapper.hqphotolink}
                PropertyChanges { target: phototext; anchors.bottom: realImage.bottom}
                PropertyChanges { target: phototext; width:realImage.width }
                PropertyChanges { target: phototextRectangle; anchors.bottom: realImage.bottom }
                PropertyChanges { target: imagePinch; enabled:true}
               // PropertyChanges { target: realImage; width: Math.min(listItem.width,sourceSize.width);height: Math.min(listItem.height,sourceSize.height) }
            }
        ]
    }
}