import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Private 1.0

Rectangle {
    id: root
    width: 400
    height: 200

    property real pi2: 2 * Math.PI

    function degToRad(degrees) {
        return degrees * (Math.PI / 180);
    }

    function radToDeg(radians) {
        return radians * (180 / Math.PI);
    }

    Slider {
        id: minSlider
        anchors.left: parent.left
        maximumValue: 360
    }

    Slider {
        id: maxSlider
        anchors.right: parent.right
        value: 220
        maximumValue: 360
    }

    Control {
        property alias minimumValue: minSlider.value
        property alias maximumValue: maxSlider.value
        property alias value: range.value
        property alias stepSize: range.stepSize

        RangeModel {
            id: range
            minimumValue: 0
            maximumValue: 100
            stepSize: 0
            value: minimumValue
        }

        style: Style {
            id: theStyle

            readonly property real outerRadius: Math.min(control.width, control.height) * 0.5
            property real minimumValueAngle: 215
            property real maximumValueAngle: 145
            readonly property real angleRange: {
                var a = maximumValueAngle - minimumValueAngle;
                return a >= 0 ? a : 360 - Math.abs(a);
            }
            property real needleRotation: {
                var percentage = (control.value - control.minimumValue) / (control.maximumValue - control.minimumValue);
                minimumValueAngle + percentage * angleRange;
            }

            property QtObject __protectedScope: QtObject {
                function toPixels(percentageOfOuterRadius) {
                    return percentageOfOuterRadius * outerRadius;
                }
            }

            property Component needle: Item {
                width: needleBaseWidth
                height: needleLength

                property real needleBaseWidth: __protectedScope.toPixels(0.05)
                property real needleLength: 0.8 * outerRadius

                Canvas {
                    id: needleCanvas
                    anchors.fill: parent

                    onPaint: {
                        var ctx = getContext("2d");
                        ctx.reset();
                    }
                }
            }

            property Component panel: Item {
                id: panelItem
                implicitWidth: 250
                implicitHeight: 250

                Loader {
                    id: needleLoader
                    sourceComponent: theStyle.needle
                    transform: [
                        Rotation {
                            angle: needleRotation
                            origin.x: needleLoader.width / 2
                            origin.y: needleLoader.height
                        }
                    ]
                }
            }
        }
    }
}