// Available teams
const teams = [ 'wingl', 'musclel', 'stringl', 'cavity', 'stringr', 'muscler', 'wingr' ]

// Steps to finish
const max_steps = 42

// Animation duration in ms
const move_duration = 15000


let prev_step       = 0
let step	    = 0;
let map             = Snap('#left-bits');
let wingr           = map.select('#wingr');
let wingrbbox       = wingr.getBBox();
let wingl           = map.select('#wingl');
let winglbbox       = wingl.getBBox();
let musclel         = map.select('#musclel');
let musclelbbox     = musclel.getBBox();
let muscler         = map.select('#muscler');
let musclerbbox     = muscler.getBBox();
let stringl         = map.select('#stringl');
let stringlbbox     = stringl.getBBox();
let stringr         = map.select('#stringr');
let stringrbbox     = stringr.getBBox();
let cavity          = map.select('#cavity');
let cavitybbox      = cavity.getBBox();

// Assign a team for this browser
let team = teams[rInt(0, teams.length - 1)]

// Score keeps number of steps per team
let Score = {}

let resetScore = function() {
    Score = {}
    teams.forEach(function(t, i) {
	Score[t] = { pas: 0 }
    })
}
resetScore() // Populate Score hash

let reportScore = function() {
    teams.forEach(function(t, i) {
	$('#pas-' + t).text(Score[t]['pas'])
    })
}

let updateScore = function(team, step) {
    Score[team]['pas'] = Score[team]['pas'] + step;
}

// Handle devicemotion: move team along path
let moveRequested = function() {

    // Each team gets a path and moves on it
    teams.forEach(function(t, i) {
	t_path = map.select('#path' + parseInt(1 + i))
	console.log('## team', t, 'takes', t_path.attr('id'))
	
	// How many steps to play? The more steps the slower.
	// Note that more steps than available pixels on the path will break...
	pas       = parseInt($('#pas-' + t).text())
	if (pas > max_steps) {
	    pas = 0
	    console.log('!! team', t, 'finished!')
	}
	// Calculate moving distance
	length    = Snap.path.getTotalLength(t_path)
	step_l    = Math.floor(length / max_steps)
	console.log('  each step is', step_l, 'pixels')
	if (pas == 0 || Score[t]['pas'] > pas) {
	    Score[t]['pas'] = pas + 1
	    // Advance one step
	    move(step_l * pas, step_l * Score[t]['pas'], t, t_path)
	    reportScore()
	    console.log('  pas', Score[t]['pas'], '/', max_steps)    
//	    $('#pas-max-' + t).text((step_l * Score[t]['pas']) + ' / ' + length)
	    $('#pas-max-' + t).css('width', (step_l * Score[t]['pas'] * 100) / length + '%').css('background', '#cccc').text(length + 'px')
	}
    })

//    console.log('Score:', Score)
}


function angle(n) {
    return rInt(-n, n);
}

function rInt(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

// SVG transform for each team
function teamTransform(team, point) {
    var transform;
    switch(team) {
    case 'wingr':
	transform = 'translate(' + point.x + ',' + point.y + ') '
	break;
    case 'muscler':
	transform = 'translate(' + point.x + ',' + point.y + ') rotate(' + (point.alpha - 360)+ ', ' + musclerbbox.cx + ', ' + musclerbbox.cy + ')'
	break;
    case 'stringr':
	transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+stringrbbox.cx+', '+stringrbbox.cy+')'
	break;
    case 'cavity':
	transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+cavitybbox.cx+', '+cavitybbox.cy+')'
	break;
    case 'stringl':
	transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+stringlbbox.cx+', '+stringlbbox.cy+')'
	break;
    case 'musclel':
	transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+musclelbbox.cx+', '+musclelbbox.cy+')'
	break;
    case 'wingl':
	transform = 'translate(' + x + ',' + y + ')'
	break;
    }
//    console.log(team, 'transform', transform)
    return transform
}

// Execute a move
function move(from, to, team, path) {
    Snap.animate(from, to, function(val) {
	// Move to this point on path
	toPoint = Snap.path.getPointAtLength(path, val)
	x = toPoint.x; y = toPoint.y
	// Execute SVG transform according to team
	eval(team).transform(teamTransform(team, toPoint))
    }, move_duration, mina.easeout)
}

$(document).ready(function() {
    // Each team gets a path and moves on it
    teams.forEach(function(t, i) {
//	if (t == team) {
	t_path = map.select('#path' + parseInt(1 + i))
	console.log('## team', t, 'takes', t_path.attr('id'))

	pas       = parseInt($('#pas-' + t).text())
	if (pas > max_steps) {
	    pas = 0
	    console.log('!! team', t, 'finished!')
	}
	Score[t]['pas'] = pas
	reportScore()
	console.log('  pas', pas, '/', max_steps)

	length    = Snap.path.getTotalLength(t_path)
	steps     = Math.floor(length / max_steps)
	console.log('  each step is', steps, 'pixels')
//	$('#pas-max-' + t).text(steps * pas + ' / ' + length)
	$('#pas-max-' + t).text((steps * pas * 100) / length + '%')

	move(steps * pas, length, t, t_path)
//	}
    })

    console.log('------------------------------------------------------------')
    console.log('-*- ', teams.length, 'playing. Your team is ', team)

    // Keep score
    resetScore()
    teams.forEach(function(t) {
	var dt = $('<dt>').text(t)
	var dd = $('<dd>').attr('id', 'pas-' + t).text(Score[t]['pas'])
	var de = $('<dd>').attr('id', 'pas-max-' + t).css('display', 'block')
	$('#score').append(dt).append(dd).append(de)
    })

    // Listen to moves
    document.addEventListener("requestMove", moveRequested, false);

})