//kind of kludgy resizing for mobile
const mq = window.matchMedia( "(min-width: 600px)" );

if (mq.matches) {
  // window width is at least 600px
  //document.body.style.backgroundColor = "pink";
} else {
  // window width is less than 600px
 document.getElementById('myCanvas').width = 330;
 document.getElementById('myCanvas').height = 330;
}

var theWheel = new Winwheel({
        'canvasId'    : 'myCanvas',
        'numSegments' : 8,
        'segments'    :
            [
  {'fillStyle' : '#3366cc', 'text' : 'Javascript'},
  {'fillStyle' : '#66cc66', 'text' : 'Web Security'},
  {'fillStyle' : '#ff9966', 'text' : 'UI/UX'},
  {'fillStyle' : '#cc3366', 'text' : 'Data Modeling'},
  {'fillStyle' : '#ff9999', 'text' : 'CSS'},
  {'fillStyle' : '#993366', 'text' : 'Tech News'},
  {'fillStyle' : '#3399ff', 'text' : 'Storytelling'},
  {'fillStyle' : '#663399', 'text' : 'Accessibility'}
            ],
        'fillStyle'   : '#e770df',
        'textFontFamily' : 'Georgia',
        'lineWidth'   : 3,
        // Specify the animation to use.
        animation: {
          type: "spinToStop",
          duration: 3, // Duration in seconds.
          spins: 4, // Number of complete spins.
          callbackFinished: alertPrize
        }
      });

// Vars used by the code in this page to do power controls.
var wheelPower = 0;
var wheelSpinning = false;

// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
function powerSelected(powerLevel) {
  // Ensure that power can't be changed while wheel is spinning.
  if (wheelSpinning == false) {
    document.getElementById("spin_button").className = "clickable";
  }
}

// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
function startSpin() {
//alert('startspin');
  // Ensure that spinning can't be clicked again while already running.
  if (wheelSpinning == false) {
    // Based on the power level selected adjust the number of spins for the wheel, the more times is has
    // to rotate with the duration of the animation the quicker the wheel spins.
    if (wheelPower == 1) {
      theWheel.animation.spins = 3;
    } else if (wheelPower == 2) {
      theWheel.animation.spins = 8;
    } else if (wheelPower == 3) {
      theWheel.animation.spins = 15;
    }

    // Disable the spin button so can't click again while wheel is spinning.
    document.getElementById("spin_button").src = "spin_off.png";
    document.getElementById("spin_button").className = "";

    // Begin the spin animation by calling startAnimation on the wheel object.
    theWheel.startAnimation();


    // Set to true so that power can't be changed and spin button re-enabled during
    // the current animation. The user will have to reset before spinning again.
    wheelSpinning = true;

  }
}

// -------------------------------------------------------
// Function for reset button.
// -------------------------------------------------------
function resetWheel() {
  theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
  theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
  theWheel.draw(); // Call draw to render changes to the wheel.

  document.getElementById("pw1").className = ""; // Remove all colours from the power level indicators.
  document.getElementById("pw2").className = "";
  document.getElementById("pw3").className = "";

  wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}

// -------------------------------------------------------
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
// note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
// -------------------------------------------------------
function alertPrize(indicatedSegment) {
  // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
  //alert("Your topic is " + indicatedSegment.text);
  swal("Your topic is " + indicatedSegment.text, "", "success");
}

function changeColours()
{
  // Change colours as desired by accessing the segment via the segments array
  // of the wheel object (note first array position is 1 not 0).
  var temp = theWheel.segments[1].fillStyle;
  var temp2 = theWheel.segments[5].fillStyle;
  theWheel.segments[1].fillStyle = theWheel.segments[2].fillStyle;
  theWheel.segments[2].fillStyle = theWheel.segments[3].fillStyle;
  theWheel.segments[3].fillStyle = theWheel.segments[4].fillStyle;

  theWheel.segments[5].fillStyle = theWheel.segments[6].fillStyle;
  theWheel.segments[6].fillStyle = theWheel.segments[7].fillStyle;
  theWheel.segments[7].fillStyle = theWheel.segments[8].fillStyle;

  theWheel.segments[8].fillStyle = temp2;
  theWheel.segments[4].fillStyle = temp;

  // The draw method of the wheel object must be called
  // in order for the changes to be rendered.
  theWheel.draw();
  wheelSpinning = false; 
}