(function() {

  var fullCircle = 360,

      Demo = function() {

        // utility class

        var EUtil = function() {

          this.getSize = function(m /* integer */) {

            var w = document.body.clientWidth, h = document.body.clientHeight, s;

            s = Math.max(Math.min(Math.min(w,h) - m - 96, 640), 199);

            return (s%2 !== 0)?s:(s-1);

          }

​

          this.setStyle = function(elStyles) {

            /*

        elStyles is an array

        [

          [element_1, {property_1_1: value_1_1, property_1_2: value_1_2}], 

          [element_2, {property_2_1: value_2_1}]

        ]

        */

            var t, len = elStyles.length,

                prefixed = {'property': ['transform'], 'value': ['linear-gradient']}, 

                prefixList = ['-webkit-', '-moz', '-o-'], l = prefixList.length;

            for(var i = 0; i < len; i++) {

              for(var p in elStyles[i][1]) {

                if(prefixed['property'][0].indexOf(p) != -1) { /* check if the property needs to be prefixed */

                  for(var j = 0; j < l; j++)

                    elStyles[i][0].style[prefixList[j] + p] = elStyles[i][1][p];

                }

                if(elStyles[i][1][p].indexOf(prefixed['value'][0]) != -1) { /* check if the value needs to be prefixed */

                  t = 90 - parseInt(elStyles[i][1][p].split(prefixed['value'][0]+'(')[1].split('deg')[0], 10);

                  t = prefixed['value'][0] + '(' + t + 'deg' + elStyles[i][1][p].split('deg')[1];

                  for(var j = 0; j < l; j++)

                    elStyles[i][0].style[p] = prefixList[j] + t;

                }

                elStyles[i][0].style[p] = elStyles[i][1][p]; /* just set styles, no prefixes */

              }

            }

          };

        };

​

        // angle class

        var Angle = function(angleValue, u, r) {

          var value = angleValue, 

              selected = (angleValue === 0)?true:false, 

              el = document.createElement('li'); /* this is a dot on the circle */

          el.setAttribute('class', 'angle centre-me round');

          this.isSelected = function()  { return selected; };

          this.select = function()      { selected = true; el.classList.add('selected'); };

          this.unselect = function()    { selected = false; el.classList.remove('selected'); };

          this.getValue = function()    { return value; };

          this.getElement = function()  { return el; };

          this.isMajor = function()     { return value%15 === 0; };

          this.isSec = function()       { return value > 180; };

          if(this.isMajor()) el.classList.add('major');

          if(this.isSec()) el.classList.add('sec');

          if(this.isSelected()) el.classList.add('selected');

          if(el.dataset) el.dataset.angle = value;

          else el.setAttribute('data-angle', value);

          u.setStyle([[el, {'transform': 'rotate(' + value + 'deg) translate(' + r + 'px)'}]]);

        };

​

        var AngleCircle = function() {

          var angles = [], currentAngle, 

              getSensitivity = function(size) {

                if(size < 240) return 15; /* every 15° for smallest screen */

                if(size < 320) return 10; /* every 10° */

                if(size < 480) return 6;

                if(size < 560) return 5;

                return 3;

              }

​

          this.createCircle = function(parent, u) {

            var parentStyle = window.getComputedStyle(parent, null), 

                margin = parseInt(parentStyle.marginTop.split('px')[0], 10) + 36, 

                size = u.getSize(margin), r = size/2, s = getSensitivity(size), 

                listWrap = parent.querySelector('.angles');

            u.setStyle([[parent, {'width': size + 'px', 'height': size + 'px'}]]);

            listWrap.innerHTML = '';

            listWrap = parent.removeChild(listWrap);

            for(var i = 0; i < fullCircle/s; i++) {

              currentAngle = new Angle(i*s, u, r);

              angles.push(currentAngle);

              listWrap.appendChild(currentAngle.getElement());

            }

            parent.appendChild(listWrap);

          };

​

          this.getSelected = function() {

            var len = angles.length;

            for(var i = 0; i < len; i++)

              if(angles[i].isSelected()) return angles[i];

            console.log('error, no angle selected :(');

            return null;

          };

​

          this.getAngle = function(angleValue) {

            var len = angles.length;

            for(var i = 0; i < len; i++) 

              if(angles[i].getValue() == angleValue) return angles[i];

            console.log('error, no angle with such value :(');

            return null;

          };

​

          this.select = function(angleValue) {

            var len = angles.length, selectedAngle = this.getSelected();

            if(angleValue == selectedAngle.getValue()) {

              console.log('already selected :)');

              return -1;

            }

            this.getAngle(angleValue).select();

            selectedAngle.unselect();

          };

        };

​

        this.init = function() {

          var u = new EUtil(), wrap = document.querySelector('.outer-wrap'), 

              box = wrap.querySelector('.box'), 

              codeEl = document.querySelector('.grad-code'), 

              codetxt = 'linear-gradient(0deg, deeppink, yellow, lime)', 

              gradLine = document.querySelector('.grad-line'), 

              gradStart = document.querySelector('.grad-start'), 

              gradEnd = document.querySelector('.grad-end'), 

              angleCircle = new AngleCircle(), currentAngle = 0;

​

          angleCircle.createCircle(wrap, u);

          u.setStyle([[gradLine, {'transform': 'rotate(0)'}], 

                      [gradStart, {'transform': 'rotate(0)', 'left': '-10%', 'right': '50%', 'top': '65%'}], 

                      [gradEnd, {'transform': 'rotate(0)', 'left': '50%', 'right': '-10%', 'top': '35%'}], 

                      [box, {'backgroundImage': codetxt}]]);

          codeEl.innerHTML = codetxt;

          if(gradLine.classList.contains('rev')) gradLine.classList.remove('rev');

​

          wrap.addEventListener('click', function(e) {

            var t = e.target, a, dif;

            if(t.classList.contains('angle')) {

              if(t.dataset) a = parseInt(t.dataset.angle, 10);

              else a = parseInt(t.getAttribute('data-angle'), 10);

              if(angleCircle.select(a) == -1) return;

              dif = a - currentAngle%360;

              currentAngle += (Math.abs(dif) > 180) ? (Math.abs(dif) - 360)*Math.abs(dif)/dif : dif;

              codetxt = 'linear-gradient(' + currentAngle + 'deg, deeppink, yellow, lime)';

              u.setStyle([[gradLine, {'transform': 'rotate(' + currentAngle + 'deg)'}], 

                          [gradStart, {'transform': 'rotate(' + currentAngle + 'deg)'}], 

                          [gradEnd, {'transform': 'rotate(' + currentAngle + 'deg)'}], 

                          [box, {'backgroundImage': codetxt}]]);

              codetxt = 'linear-gradient(' + ((currentAngle%360>=0)?(currentAngle%360):(360+currentAngle%360)) + 'deg, deeppink, yellow, lime)';

              codeEl.innerHTML = codetxt;

              if(a > 90 && a < 270) gradLine.classList.add('rev');

              else gradLine.classList.remove('rev');

              if(a >= 0 && a < 90)

                u.setStyle([[gradStart, {'left': '-10%', 'right': '50%', 'top': '65%'}], 

                            [gradEnd, {'left': '50%', 'right': '-10%', 'top': '35%'}]]);

              if(a >= 90 && a < 180)

                u.setStyle([[gradStart, {'left': '-10%', 'right': '50%', 'top': '35%'}], 

                            [gradEnd, {'left': '50%', 'right': '-10%', 'top': '65%'}]]);

              if(a >= 180 && a < 270)

                u.setStyle([[gradStart, {'left': '50%', 'right': '-10%', 'top': '35%'}], 

                            [gradEnd, {'left': '-10%', 'right': '50%', 'top': '65%'}]]);

              if(a >= 270 && a < 360)

                u.setStyle([[gradStart, {'left': '50%', 'right': '-10%', 'top': '65%'}], 

                            [gradEnd, {'left': '-10%', 'right': '50%', 'top': '35%'}]]);

​

            }

          }, false);

        };

      }

​

  var d = new Demo();

  d.init();

  window.addEventListener('resize', function(e) { d.init(); }, false);

}());