//-/////////////////////////////////////////////////////////////////////////////
//-                                                                           //
//-              This file is part of the Buildbotics firmware.               //
//-                                                                           //
//-                Copyright (c) 2015 - 2018, Buildbotics LLC                 //
//-                           All rights reserved.                            //
//-                                                                           //
//-   This file ("the software") is free software: you can redistribute it    //
//-   and/or modify it under the terms of the GNU General Public License,     //
//-    version 2 as published by the Free Software Foundation. You should     //
//-    have received a copy of the GNU General Public License, version 2      //
//-   along with the software. If not, see <http://www.gnu.org/licenses/>.    //
//-                                                                           //
//-   The software is distributed in the hope that it will be useful, but     //
//-        WITHOUT ANY WARRANTY; without even the implied warranty of         //
//-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU      //
//-             Lesser General Public License for more details.               //
//-                                                                           //
//-     You should have received a copy of the GNU Lesser General Public      //
//-              License along with the software.  If not, see                //
//-                     <http://www.gnu.org/licenses/>.                       //
//-                                                                           //
//-              For information regarding this software email:               //
//-                "Joseph Coffland" <joseph@buildbotics.com>                 //
//-                                                                           //
//-/////////////////////////////////////////////////////////////////////////////

script#axis-control-template(type="text/x-template")
  svg(xmlns="http://www.w3.org/2000/svg",
    xmlns:xlink="http://www.w3.org/1999/xlink",
    width="100%", viewBox="0 0 300 300")
    defs
      lineargradient#red
        stop(offset="0", stop-color="#d26969")
        stop(offset="1", stop-color="#ff7f7f")

      lineargradient#green
        stop(offset="0", stop-color="#69d269")
        stop(offset="1", stop-color="#7fff7f")

      lineargradient#blue
        stop(offset="0", stop-color="#6969d2")
        stop(offset="1", stop-color="#7f7fff")

      lineargradient#orange
        stop(offset="0", stop-color="#d29d69")
        stop(offset="1", stop-color="#ffbf7f")

      lineargradient#cyan
        stop(offset="0", stop-color="#69d2d2")
        stop(offset="1", stop-color="#7fffff")

      lineargradient#purple
        stop(offset="0", stop-color="#d269d2")
        stop(offset="1", stop-color="#ff7fff")


      each color in 'red green blue orange cyan purple'.split(' ')
        lineargradient(xlink:href="#" + color, id=color + "-1",
          gradientunits="userSpaceOnUse", gradienttransform="rotate(180 7 5)",
          x1="0", y1="0", x2="15", y2="10")

        lineargradient(xlink:href="#" + color, id=color + "-2",
          gradientunits="userSpaceOnUse", x1="10", y1="10", x2="40", y2="40")


      filter#shadow(x="-50%" y="-50%" width="200%" height="200%")
        feOffset(in="SourceAlpha", dx="3", dy="3")
        feComponentTransfer
          feFuncR(type="discrete", tableValues="0.05")
          feFuncG(type="discrete", tableValues="0.05")
          feFuncB(type="discrete", tableValues="0.05")
        feGaussianBlur(result="shadow", stdDeviation="5")
        feBlend(in="SourceGraphic", in2="shadow", mode="normal")

      path#pie-1(d="M107,0 83,0 0,83 0,107A107,107 0 0 0 107,0Z")
      path#pie-2(d="M83,0 59,0 0,59 0,83A83,83 0 0 0 83,0Z")
      path#pie-3(d="M59,0 35,0 0,35 0,59A59,59 0 0 0 59,0Z")
      path#pie-4(d="M35,0 0,0 0,35A35,35 0 0 0 35,0Z")

      path#arrow(d="M-16,9 0,9 0,17 17,0 0,-17 0,-9 -16,-9 -16,9Z")

      circle#centrebutton(cx="0",cy="0",r="15",fill="green")


    g(transform="scale(1.0, 1.0)")
      // 100% ring
      g.ring(fill="#9f9f9f", filter="url(#shadow)")
        use.button(xlink:href="#pie-1", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 3, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-1", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 3, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 3, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-1",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="21", transform="rotate(22 125 125)") {{text(3)}}
          text(x="125", y="21", transform="rotate(-22 125 125)") {{text(3)}}
          use.button(xlink:href="#pie-1", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-1", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 3, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)")

      // 50% ring
      g.ring(fill="#c5c5c5", filter="url(#shadow)")
        use.button(xlink:href="#pie-2", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 2, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 2, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-2", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 2, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 2, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 2, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 2, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-2",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="48") {{text(2)}}
          use.button(xlink:href="#pie-2", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-2", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 2, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 2, -1)", @touchend.prevent="release(1)")


      // 25% ring
      g.ring(fill="#e2e2e2", filter="url(#shadow)")
        use.button(xlink:href="#pie-3", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 1, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 1, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-3", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 1, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 1, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 1, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 1, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-3",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="69") {{text(1)}}
          use.button(xlink:href="#pie-3", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-3", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 1, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 1, -1)", @touchend.prevent="release(1)")


      // 10% ring
      g.ring(fill="#f7f7f7", filter="url(#shadow)")
        use.button(xlink:href="#pie-4", v-if="enabled[0]",
          transform="translate(134 121) rotate(-45)",
          @mousedown="jog(0, 0, 1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 0, 1)", @touchend.prevent="release(0)")

        use.button(xlink:href="#pie-4", v-if="enabled[0]",
          transform="translate(115 121) rotate(135)",
          @mousedown="jog(0, 0, -1)", @mouseup="release(0)",
          @touchstart.prevent="jog(0, 0, -1)", @touchend.prevent="release(0)")

        g.button(v-if="enabled[1]",
          @mousedown="jog(1, 0, 1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 0, 1)", @touchend.prevent="release(1)")
          use.button(xlink:href="#pie-4",
            transform="translate(124 111) rotate(-135)")
          text(x="125", y="91") {{text(0)}}
          use.button(xlink:href="#pie-4", fill="transparent",
            transform="translate(124 111) rotate(-135)")

        use.button(xlink:href="#pie-4", v-if="enabled[1]",
          transform="translate(124 130) rotate(45)",
          @mousedown="jog(1, 0, -1)", @mouseup="release(1)",
          @touchstart.prevent="jog(1, 0, -1)", @touchend.prevent="release(1)")


      // +A
      g.button.arrow(v-if="enabled[0]", transform="translate(230 120)",
        @mousedown="jog(0, 3, 1)", @mouseup="release(0)",
        @touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)")
        use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)")
        text(x="-12", y="5", font-size="14", textLength="21") +{{axes[0]}}


      // -A
      g.button.arrow(v-if="enabled[0]", transform="translate(20 120)",
        @mousedown="jog(0, 3, -1)", @mouseup="release(0)",
        @touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)")
        use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)",
          transform="rotate(180)")
        text(x="-8", y="5", font-size="14", textLength="16") -{{axes[0]}}


      // +B
      g.button.arrow(v-if="enabled[1]", transform="translate(125, 18)",
        @mousedown="jog(1, 3, 1)", @mouseup="release(1)",
        @touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)")
        use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
          transform="rotate(-90)")
        text(x="-8", y="5", font-size="12", textLength="16") +{{axes[1]}}


      // -B
      g.button.arrow(v-if="enabled[1]", transform="translate(125, 225)",
        @mousedown="jog(1, 3, -1)", @mouseup="release(1)",
        @touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)")
        use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
          transform="rotate(90)")
        text(x="-7", y="5", font-size="12", textLength="14") -{{axes[1]}}

      // Return to zero button
      g.button.cicle(@mouseup="back2zero(0,1)",transform="translate(124,121)")
        use(xlink:href="#centrebutton")
        text(x="-12",y="3",font-size="9") {{axes[0]}}0{{axes[1]}}0