/// <reference path="JsChart-vsdoc.js" />
var Gauges = MindFusion.Gauges;
var d = MindFusion.Drawing;

var OvalScale = Gauges.OvalScale;
var Length = Gauges.Length;
var LengthType = Gauges.LengthType;
var Alignment = Gauges.Alignment;
var TickShape = Gauges.TickShape;
var Pointer = Gauges.Pointer;
var PointerShape = Gauges.PointerShape;

// create the gauge JS object
var clock = Gauges.OvalGauge.create(document.getElementById('clock'), false);
clock.addEventListener(Gauges.Events.prepaintBackground, onPrepaintBackground.bind(this));
clock.addEventListener(Gauges.Events.prepaintPointer, onPrepaintPointer.bind(this));

// define the scales
var scale = new OvalScale(clock);
scale.minValue = 0;
scale.maxValue = 60;
scale.startAngle = -90;
scale.endAngle = 270;
scale.fill = 'Transparent';
scale.stroke = 'Transparent';

// ticks for the hours
var majorSettings = scale.majorTickSettings;
majorSettings.showLabels = false;
majorSettings.tickShape = TickShape.Rectangle;
majorSettings.tickWidth = new Length(6, LengthType.Relative);
majorSettings.tickHeight = new Length(1.8, LengthType.Relative);
majorSettings.fill = '#334155';   // Slate 700
majorSettings.stroke = '#334155';
majorSettings.tickAlignment = Alignment.Inner;
majorSettings.count = 12;

// ticks for the minutes
var middleSettings = scale.middleTickSettings;
middleSettings.showLabels = false;
middleSettings.tickShape = TickShape.Rectangle;
middleSettings.tickWidth = new Length(3, LengthType.Relative);
middleSettings.tickHeight = new Length(0.8, LengthType.Relative);
middleSettings.fill = '#94A3B8';  // Slate 400
middleSettings.stroke = '#94A3B8';
middleSettings.tickAlignment = Alignment.Inner;
middleSettings.count = 5;

var minorSettings = scale.minorTickSettings;
minorSettings.showLabels = false;
minorSettings.showTicks = false;

// the clock hands
var now = new Date();

// hour hand
var hourHand = new Pointer();
hourHand.name = 'HourHand';
hourHand.fill = 'Transparent';
hourHand.stroke = 'Transparent';
hourHand.pointerWidth = new Length(55, LengthType.Relative);
hourHand.pointerHeight = new Length(4, LengthType.Relative);
hourHand.shape = PointerShape.Needle;
hourHand.value = ((now.getHours() * 5) % 60) + (now.getMinutes() / 60 * 5);
scale.addPointer(hourHand);

// minute hand
var minuteHand = new Pointer();
minuteHand.name = 'MinuteHand';
minuteHand.fill = 'Transparent';
minuteHand.stroke = 'Transparent';
minuteHand.pointerWidth = new Length(80, LengthType.Relative);
minuteHand.pointerHeight = new Length(3, LengthType.Relative);
minuteHand.shape = PointerShape.Needle;
minuteHand.value = now.getMinutes() % 60;
scale.addPointer(minuteHand);

// seconds hand
var secondHand = new Pointer();
secondHand.name = 'SecondHand';
secondHand.fill = 'Transparent';
secondHand.stroke = 'Transparent';
secondHand.pointerWidth = new Length(88, LengthType.Relative);
secondHand.pointerHeight = new Length(1.5, LengthType.Relative);
secondHand.shape = PointerShape.Needle;
secondHand.value = now.getSeconds();
scale.addPointer(secondHand);

// update the intervals at 1 sec
setInterval(updateTime, 1000);

function updateTime() {
    var gauge = Gauges.OvalGauge.find("clock");
    if (!gauge) return;

    var hHand = gauge.getElementByName("HourHand");
    var mHand = gauge.getElementByName("MinuteHand");
    var sHand = gauge.getElementByName("SecondHand");

    var current = new Date();
    if (hHand) hHand.value = ((current.getHours() * 5) % 60) + (current.getMinutes() / 60 * 5);
    if (mHand) mHand.value = current.getMinutes() % 60;
    if (sHand) sHand.value = current.getSeconds();
}

// 7. Minimalist Dial Painting
function onPrepaintBackground(sender, args) {
    args.cancelDefaultPainting = true;

    var context = args.context;
    var element = args.element;
    var bounds = new d.Rect(0, 0, element.renderSize.width, element.renderSize.height);
    var cx = bounds.center().x;
    var cy = bounds.center().y;
    var radius = bounds.width / 2;

    context.save();

    // paint the outer card background
    context.beginPath();
    context.arc(cx, cy, radius - 2, 0, 2 * Math.PI);
    context.fillStyle = '#FFFFFF';
    context.fill();

    // paint the border ring
    context.lineWidth = 3;
    context.strokeStyle = '#F1F5F9'; // Slate 100
    context.stroke();

    // the inner track guideline
    context.beginPath();
    context.arc(cx, cy, radius - 14, 0, 2 * Math.PI);
    context.lineWidth = 1;
    context.strokeStyle = '#E2E8F0'; // Slate 200
    context.stroke();

    context.restore();
}

// paint the hand and the center cap
function onPrepaintPointer(sender, args) {
    args.cancelDefaultPainting = true;

    var context = args.context;
    var element = args.element;

    context.save();
    context.transform.apply(context, element.transform.matrix());
    context.scale(element.children[0].renderSize.width, element.children[0].renderSize.height);

    context.beginPath();

    if (element.name === "HourHand") {
        context.fillStyle = "#0F172A"; // Dark Slate
        drawRoundedPointer(context, 0, 0.38, 0.65, 0.24, 0.12);
    } else if (element.name === "MinuteHand") {
        context.fillStyle = "#334155"; // Mid Slate
        drawRoundedPointer(context, 0, 0.40, 0.90, 0.20, 0.10);
    } else if (element.name === "SecondHand") {
        context.fillStyle = "#F97316"; // Vibrant Orange Accent
        // Extended tail for a classic modern balance
        drawRoundedPointer(context, -0.15, 0.43, 1.10, 0.14, 0.07);
    }

    context.fill();

    // paint the cap pin in the center (drawn once over the second hand for layering)
    if (element.name === "SecondHand") {
        context.beginPath();
        context.arc(0, 0.5, 0.18, 0, 2 * Math.PI);
        context.fillStyle = "#0F172A";
        context.fill();

        // Inner accent dot on center pin
        context.beginPath();
        context.arc(0, 0.5, 0.06, 0, 2 * Math.PI);
        context.fillStyle = "#F97316";
        context.fill();
    }

    context.restore();
}

// a helper function to draw smooth rounded pointers
function drawRoundedPointer(ctx, x, y, width, height, radius) {
    if (ctx.roundRect) {
        ctx.roundRect(x, y, width, height, radius);
    } else {
        ctx.rect(x, y, width, height);
    }
}