var viappMenu = {
    el: null,
    controller: null,
    angle: 0,
    startAngle: 0,
    slices: Math.PI/6,  // 12 slices
    originX: 160,
    originY: 160,
    values: [
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
        '<img style="width: 15px;" src="img/icons/viapp.png" />',
    ],

    handleEvent: function (e) {
        if (e.type == 'touchstart') {
            this.rotateStart(e);
        } else if (e.type == 'touchmove') {
            this.rotateMove(e);
        } else if (e.type == 'touchend') {
            this.rotateStop(e);
        }
    },

    init: function() {
        this.el = document.getElementById('viapp-options');
        this.controller = document.getElementById('viapp-menu');
        this.fillMenu();
        this.el.style.webkitTransitionDuration = '0';
        
        this.controller.addEventListener('touchstart', this, false);
    },

    fillMenu: function () {
        var menuHtml = '';
        for (i in this.values) {
            menuHtml += '<li>' + this.values[i] + '</li>';
        }

        this.el.innerHTML = menuHtml;

        console.log(this.el.childNodes);

        this.configOptions();
    },

    configOptions: function () {
        for (i in this.el.childNodes) {
            var option = this.el.childNodes[i];
            var degree = (360 / this.el.childNodes.length) * i;
            option.style.setProperty('transform', 'rotate(' + degree + 'deg)'); // Normal
            option.style.setProperty('-webkit-transform', 'rotate(' + degree + 'deg)'); // Chrome, Safari and Opera
            option.style.setProperty('-ms-transform', 'rotate(' + degree + 'deg)'); // IE9+
        }
    },
    
    rotateStart: function(e) {
        e.preventDefault();
        
        this.el.style.webkitTransitionDuration = '0';

        var startX = e.touches[0].pageX - this.originX;
        var startY = e.touches[0].pageY - this.originY;
        this.startAngle = Math.atan2(startY, startX) - this.angle;
        
        this.controller.addEventListener('touchmove', this, false);
        this.controller.addEventListener('touchend', this, false);
    },
    
    rotateMove: function(e) {
        var dx = e.touches[0].pageX - this.originX;
        var dy = e.touches[0].pageY - this.originY;
        this.angle = Math.atan2(dy, dx) - this.startAngle;

        this.el.style.webkitTransform = 'rotateZ(' + this.angle + 'rad)';
    },
    
    rotateStop: function(e) {
        this.controller.removeEventListener('touchmove', this, false);
        this.controller.removeEventListener('touchend', this, false);
        
        if( this.angle%this.slices ) {
            this.angle = Math.round(this.angle/this.slices) * this.slices;
            this.el.style.webkitTransitionDuration = '150ms';
            this.el.style.webkitTransform = 'rotateZ(' + this.angle + 'rad)';
        }
    },
};