import QtQuick 2.0
import QtQuick.LocalStorage 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
           //width:  parent.width; height: parent.height;
            }

            BusyIndicator { anchors.centerIn: parent; running: realImage.status != Image.Ready }
            Image {
                id: realImage;
 //               property string hqphotolink: photoLink
               width: photoWrapper.width; height: photoWrapper.height
                antialiasing: true;
                asynchronous: true
                cache: false
                fillMode: Image.PreserveAspectFit;
                source: imageLocation
 //               onStatusChanged: if (realImage.status == Image.Ready) print(realImage.paintedHeight+"x"+realImage.paintedWidth)
            }
            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
                onClicked: {
                    if (albumWrapper.state == 'inGrid') {
                        gridItem.GridView.view.currentIndex = index;
                        //print("photoLink"+realImage.photoLink)
                        albumWrapper.state = 'fullscreen'
                    } else {
                        gridItem.GridView.view.currentIndex = index;
                       albumWrapper.state = 'inGrid'
                    }
                }
         }

            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.heigh-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: realImage; width: Math.min(listItem.width,sourceSize.width);height: Math.min(listItem.height,sourceSize.height) }
            }
            ]

        }
}