import QtQuick 2.0
import Sailfish.Silica 1.0

MouseArea {
    id: cycleButton
    property alias source: image.source
    property alias text: label.text

    width: parent.width
    height: parent.height / 2

    Rectangle {
        id: verticalback
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
    }

    Rectangle {
        id: horizontalback
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
    }

    Label {
        id: label
        text: ""
        color: Theme.highlightColor
        font.pixelSize: Theme.fontSizeLarge
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: Theme.paddingMedium
        anchors.rightMargin: Theme.horizontalPageMargin
        width: parent.width - image.width
        horizontalAlignment: Text.AlignRight
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    }

    Image {
        id: image
        source: ""
        anchors.left: parent.left
        anchors.leftMargin: Theme.paddingLarge
        fillMode: Image.PreserveAspectFit
        width: parent.height
        height: parent.height
    }

    OpacityRampEffect {
        id: verticalBackgroundEffect
        slope: 0.5
        offset: -1.5
        direction: OpacityRamp.TopToBottom
        sourceItem: verticalback
    }

    OpacityRampEffect {
        id: horizontalBackgroundEffect
        slope: 1.2
        offset: -0.7
        direction: OpacityRamp.LeftToRight
        sourceItem: horizontalback
    }

    OpacityRampEffect {
        id: imageeffect
        slope: 0.5
        offset: -0.8
        direction: OpacityRamp.TopToBottom
        sourceItem: image
    }
}