pysteve/www/htdocs/js/steve_stv.js - steve - Git at Google

 /* WARNING: This script contains Voodoo! */
 /*
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
 */

 var candidates = []
 var statements = []
 var seconds_txt = []
 var ballotNames = []
 var ballotChars = []
 var chars;
 var fading = false
 var seats = 0;
 var maxnum = 9999

 // Make copies for reset
 var candidates_copy = []
 var chars_copy = []

 var failover = null;
 var tb = ""


 // Set transfer data during drag'n'drop
 function dragVote(ev) {
     ev.dataTransfer.setData("Text", ev.target.getAttribute("data"));
     failover = ev.target.getAttribute("data")
     if (ballotNames.indexOf(failover) == -1) {
         document.getElementById('candidates').style.backgroundImage = "url(/images/dragright.png)"
         document.getElementById('candidates').style.backgroundRepeat = "no-repeat"
     } else {
         document.getElementById('candidates').style.backgroundImage = "url(/images/dragleft.png)"
         document.getElementById('candidates').style.backgroundRepeat = "no-repeat"
     }
 }

 var source, dest

 function cancel(ev) {
     ev.preventDefault()
 }

 function resetList() {
     candidates = []
     chars = []
     for (i in candidates_copy) candidates.push(candidates_copy[i])
     for (i in chars_copy) chars.push(chars_copy[i])
     ballotNames = []
     ballotChars = []
     shuffleCandidates();

     drawCandidates()
     fading = false
     document.getElementById('ballot').innerHTML = '<img src="/images/target.png" style="margin-left: 100px;" ondrop="event.preventDefault(); dropCandidate(event);"/>';
     drawList();
 }

 // Did we drop a vote on top of another?
 function dropVote(ev, parent) {

     //ev.preventDefault();
     if (parent || fading) return;

     // Get who we dragged and who we dropped it on
     source = ev.dataTransfer.getData("Text");
     dest = parent ? ev.target.parentNode.getAttribute("data") : ev.target.getAttribute("data")
     if (dest == "UPPER") { dest = ballotNames[0]}
     if (dest == "LOWER") { dest = ballotNames[ballotNames.length -1] }
     if (candidates.indexOf(dest) != -1) {
         alert("Back to school!")
     }

     // If we didn't drag this onto ourselves, let's initiate the fade-out and swap
     if (source != dest) {
         fadeOut(1, "ballot");
     }

 }

 function dropComplete(z) {
     if (fading) {
         return;
     }
     // Get array indices
     var sid = ballotNames.indexOf(source);
     var did = ballotNames.indexOf(dest)

     // Splice!
     if (sid >= 0 && did >= 0) {
         ballotNames.splice(did, 0, ballotNames.splice(sid, 1)[0])
         ballotChars.splice(did, 0, ballotChars.splice(sid, 1)[0])
     } else {
         //alert(source + ":" + dest)
     }
     //ev.preventDefault();
     // Redraw and carry on

     drawList()
     fadeIn(0, z, Math.random())
 }


 // A little shuffle, so we don't all get the same order at first
 function shuffleCandidates() {
     for (var i = 0; i < candidates.length; i++) {

         // Pick some numbers
         var sid = parseInt(Math.random()*candidates.length-0.01);
         var did = parseInt(Math.random()*candidates.length-0.01);

         // Splice!
         if (sid >= 0 && did >= 0) {
             candidates.splice(did, 0, candidates.splice(sid, 1)[0])
             chars.splice(did, 0, chars.splice(sid, 1)[0])
         }
     }
 }


 function drawCandidates() {
     var box = document.getElementById('candidates')
     box.innerHTML = "<h3>Candidates:</h3>"
     for (i in candidates) {
         var name = candidates[i]
         var char = chars[i]
         // Add element and set drag'n'drop + data
         var outer = document.createElement('div')
         var inner = document.createElement('span')
         inner.style.fontFamily = "monospace"
         inner.innerHTML = char + ": " + name;
         inner.setAttribute("ondrop", "dropCandidate(event, true)")
         outer.setAttribute("class", "ballotbox_clist")
         outer.setAttribute("id", name)
         outer.setAttribute("data", name)
         inner.setAttribute("data", name)
         inner.setAttribute("draggable", "false")
         outer.setAttribute("draggable", "true")
         outer.setAttribute("ondragstart", "dragVote(event)")
         outer.appendChild(inner)
         // if it's a super long name, like a data blob, don't tooltip it
         if (name.length > 32) outer.setAttribute("title", "Drag to move the candidate to the ballot box")
         else outer.setAttribute("title", "Drag to move "  + name + " to the ballot box")
         outer.setAttribute("ondrop", "dropCandidate(event, false)")
         outer.setAttribute("ondragover", "event.preventDefault();")
         outer.setAttribute("ondragend", "event.preventDefault();")
         outer.setAttribute("ondragenter", "event.preventDefault();")

         // Does the candidate have a statement? if so, put it on there
         if (statements[char]) {
             var statement = document.createElement('div')
             statement.setAttribute("class", "statement_marker")
             // if it's a super long name, like a data blob, don't tooltip it
             if (name.length > 32) statement.setAttribute("title", "Click to read the candidate's statement")
             else statement.setAttribute("title", "Click to read " + name + "'s statement")
             statement.setAttribute("onclick", "location.hash='#statement_"+char+"';")
             statement.innerHTML = "<a href='#statement_"+char+"'>Statement</a>"

             outer.appendChild(statement)

             var popup = document.createElement("div")
             popup.setAttribute("class", "modal")
             popup.setAttribute("id", "statement_" + char)
             popup.setAttribute("aria-hidden", "true")

             var popupd = document.createElement("div")
             popupd.setAttribute("class", "modal-dialog")
             popup.appendChild(popupd)

             var popuph = document.createElement("div")
             popuph.setAttribute("class", "modal-header")
             popuph.innerHTML = '<h2>Statement from ' + name + '</h2><a href="#close" class="btn-close" aria-hidden="true">&#xd7;</a>'

             var popupb = document.createElement("div")
             popupb.setAttribute("class", "modal-body")
             popupb.innerHTML = '<pre>' + (statements[char] ? statements[char] : "This candidate has not prepared a statement") +'</pre>'

             var popupf = document.createElement("div")
             popupf.setAttribute("class", "modal-footer")
             popupf.innerHTML = '<a href="#close" class="btn">Close statement</a>'

             popupd.appendChild(popuph)
             popupd.appendChild(popupb)
             popupd.appendChild(popupf)

             document.getElementsByTagName('body')[0].appendChild(popup)
         }

         // Does the candidate have a nomination and/or seconds? if so, put it on there
         if (seconds_txt[char]) {
             var seconds = document.createElement('div')
             seconds.setAttribute("class", "statement_marker")
             seconds.style.float = 'right'
             seconds.style.marginRight = '4px'
             seconds.setAttribute("title", "Click to read " + name + "'s nomination and/or seconds")
             seconds.innerHTML = "<a href='#seconds_"+char+"'>2nds</a>"

             outer.appendChild(seconds)

             var popup = document.createElement("div")
             popup.setAttribute("class", "modal")
             popup.setAttribute("id", "seconds_" + char)
             popup.setAttribute("aria-hidden", "true")

             var popupd = document.createElement("div")
             popupd.setAttribute("class", "modal-dialog")
             popup.appendChild(popupd)

             var popuph = document.createElement("div")
             popuph.setAttribute("class", "modal-header")
             popuph.innerHTML = '<h2>Nomination/Seconds for ' + name + '</h2><a href="#close" class="btn-close" aria-hidden="true">&#xd7;</a>'

             var popupb = document.createElement("div")
             popupb.setAttribute("class", "modal-body")
             popupb.innerHTML = '<pre>' + (seconds_txt[char] ? seconds_txt[char] : "This candidate does not have a nomination statement") +'</pre>'

             var popupf = document.createElement("div")
             popupf.setAttribute("class", "modal-footer")
             popupf.innerHTML = '<a href="#close" class="btn">Close window</a>'

             popupd.appendChild(popuph)
             popupd.appendChild(popupb)
             popupd.appendChild(popupf)

             document.getElementsByTagName('body')[0].appendChild(popup)
         }
         box.appendChild(outer)

     }
     document.getElementById('ballotbox').style.height = box.offsetHeight + "px"
 }

 // Did we drop a vote on top of another?
 function dropCandidate(ev) {
     if (ev.preventDefault) ev.preventDefault();
     if (ballotNames.length >= maxnum) {
         return; // MNTV lockout
     }
     source = ev.dataTransfer ? ev.dataTransfer.getData("Text") : tb;
     source = source ? source : tb
     dest = ev.target.getAttribute("data")
     dest = dest ? dest : "LOWER"
     if (dest == source) { // touch fixes
         dest = "LOWER"
     }
     var z = 0;
     if (dest == "UPPER") { dest = ballotNames[0]; z = 0}
     if (dest == "LOWER") { dest = ballotNames[ballotNames.length -1]; z = 1;}
     if (dest && candidates.indexOf(dest) != -1) {
         return;
     }
     if (ballotNames.indexOf(source) == -1 && candidates.indexOf(source) != -1) {
         var x = ballotNames.indexOf(dest)
         x += z
         if (ballotNames.indexOf(dest) != -1) {
             ballotNames.splice(x,0,source);
             ballotChars.splice(x,0,chars[candidates.indexOf(source)]);
         } else {
             ballotNames.push(source)
             ballotChars.push(chars[candidates.indexOf(source)])
         }
         chars.splice(candidates.indexOf(source), 1)
         candidates.splice(candidates.indexOf(source), 1)

         fadeIn(0, "ballot", Math.random())
         //ev.preventDefault()
         drawCandidates();
         drawList();

     }

 }

 // Did we drop a vote on top of another?
 function dropBack(ev) {
     ev.preventDefault();
     source = ev.dataTransfer.getData("Text");
     dest = ev.target.getAttribute("data")

     if (dest == "UPPER") { dest = ballotNames[0]}
     if (dest == "LOWER") { dest = ballotNames[ballotNames.length -1] }

     if ((!dest || candidates.indexOf(dest) != -1) && ballotNames.indexOf(source) != -1) {

         candidates.push(source)
         chars.push(ballotChars[ballotNames.indexOf(source)])
         ballotChars.splice(ballotNames.indexOf(source), 1)
         ballotNames.splice(ballotNames.indexOf(source), 1)
         drawList();
         drawCandidates();
         fadeIn(0, "candidates", Math.random())

     } else {
         dest = null
         source = null
     }
 }

 function showLines(ev) {
     source = ev.dataTransfer.getData("Text");
     source = source ? source : failover;
     ev.preventDefault();
     if (ev.target && ev.target.getAttribute) {
         var above = false
         dest = ev.target.getAttribute("data")
         var odest = dest;
         var override = false
         if (dest == "UPPER") { dest = ballotNames[0]; override = true; above = true;}
         if (dest == "LOWER") { dest = ballotNames[ballotNames.length-1]; override = true; above= false; }
         for (i=0;i< document.getElementById('ballot').childNodes.length;i++) {
             var el = document.getElementById('ballot').childNodes[i]
             el.style.borderTop = ""
             el.style.borderBottom = ""
         }
         document.getElementById('UPPER').style.borderTop = "none"
         document.getElementById('LOWER').style.borderBottom = "none"
         document.getElementById('UPPER').style.borderBottom = "none"
         document.getElementById('LOWER').style.borderTop = "none"
         if (ballotNames.indexOf(dest) != -1 && dest != source) {
             a = ballotNames.indexOf(source);
             b = ballotNames.indexOf(dest);

             override = false
             if (a != -1 && !override) {

                 if (a > b) {
                     above = true;
                 } else {
                     above = false;
                 }
             } else {
                 b--;
                 if (b == -1) {
                     above = false;
                 } if (b == ballotNames.length-1) {
                     above = false;
                 }
             }

             if (((a == -1 || above == true) && odest != "UPPER") || odest == "LOWER") {
                 document.getElementById(odest).style.borderTop = "16px solid #0AF";
             } else {
                 document.getElementById(odest).style.borderBottom = "16px solid #0AF";
             }
         }
     }

 }

 function insertAfter(newNode, referenceNode) {
     referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
 }

 function insertBefore(newNode, referenceNode) {
     referenceNode.parentNode.insertBefore(newNode, referenceNode);
 }

 function drawList() {
     // Remove drag helper
     document.getElementById('candidates').style.background = "";

     // Fetch ballot master and clear it
     var ballot = document.getElementById('ballot')
     ballot.innerHTML = ""
     var s = 0;

     // For each nominee, do...
     for (i in ballotNames) {
         s++;
         var el = ballotNames[i];
         var outer = document.createElement('li');
         // Set style
         outer.setAttribute("class", "ballotbox")

         var no = document.createElement('div');
         no.setAttribute("class", "ballotNumber")
         no.innerHTML = (s)


         // Above/below cutaway line? If so, draw it
         if (s == seats) {
             outer.style.borderBottom = "1px solid #A00"
         }
         if (s == seats+1) {
             outer.style.borderTop = "1px solid #A00"
         }

         // 'grey out' people below cutaway line
         if (s > seats) {
             outer.style.opacity = "0.75"
         }

         // Add element and set drag'n'drop + data
         var inner = document.createElement('span')
         inner.style.left = "35px"
         inner.style.maxWidth = "300px"
         inner.style.maxHeight = "60px"
         inner.style.overflow = "hidden"
         inner.innerHTML = ballotChars[i] + ": " + el;
         inner.setAttribute("ondrop", "dropVote(event, true)")
         outer.setAttribute("id", el)
         outer.setAttribute("data", el)
         inner.setAttribute("data", el)
         outer.setAttribute("draggable", "true")
         outer.setAttribute("ondragstart", "dragVote(event)")
         outer.setAttribute("ondragenter", "showLines(event)")
         outer.appendChild(no)
         outer.appendChild(inner)
         outer.setAttribute("title", "Drag to move "  + el + " up or down on the list")
         outer.setAttribute("ondrop", "dropVote(event, false)")


         if (el == source) {
             outer.style.opacity = "0"
         }

         // Add to box
         ballot.appendChild(outer)
     }

     // Drop upper and lower filler boxes, so people can drag to the top/bottom of the list as well
     if (!document.getElementById('UPPER')) {
         var d = document.createElement('div');
         d.setAttribute("class", "fillerbox")
         d.setAttribute("data", "UPPER");
         d.setAttribute("id", "UPPER");
         d.setAttribute("ondragenter", "showLines(event)")
         d.setAttribute("ondrop", "dropVote(event, false)")
         insertBefore(d, ballot);

         var d = document.createElement('div');
         d.setAttribute("class", "fillerbox")
         d.setAttribute("id", "LOWER")
         d.setAttribute("data", "LOWER");
         d.setAttribute("ondrop", "dropVote(event, false)")
         d.setAttribute("ondragenter", "showLines(event)")
         insertAfter(d, ballot);
     }

     // Clear any bad lines
     document.getElementById('UPPER').style.borderTop = "none"
     document.getElementById('LOWER').style.borderBottom = "none"
     document.getElementById('UPPER').style.borderBottom = "none"
     document.getElementById('LOWER').style.borderTop = "none"
 }

 // Fade in/out maneuvres
 function fadeOut(x) {
     if (source) {
         if (!x) {
             x = 1
         }
         if (fading) {
             return;
         }
         x -= 0.1
         document.getElementById(source).setAttribute("class", "ballotSelected")
         document.getElementById(source).style.opacity = String(x)
         if (x > 0) {
             window.setTimeout(function() { fadeOut(x)}, 20)
         } else {
             dropComplete("candidates");
         }
     }
 }

 var gz = 0;
 function fadeIn(x, y, z) {
     if (source) {
         if (x == 0) {
             gz = z;
         }
         if (z != gz) {
             return;
         }
         x += 0.1
         if (x >= 1) {
             x = 1
         }
         document.getElementById(source).style.opacity = String(x)


         document.getElementById(source).setAttribute("class", "ballotSelected")
         if (x < 1) {
             fading = true
             window.setTimeout(function() { fadeIn(x, y, z)}, 25)

         } else {
              window.setTimeout(function() {fading = false }, 250)
             if (y == "ballot") {
                 document.getElementById(source).setAttribute("class", "ballotbox")

             } else {
                 document.getElementById(source).setAttribute("class", "ballotbox_clist")

             }
             source = null
             drawList();


         }
     }
 }

 var step = -1

 function loadIssue(election, issue, uid, callback) {

     var messages = ["Herding cats...", "Shaving yaks...", "Shooing some cows away...", "Fetching election data...", "Loading issues..."]
     if (!election || !uid) {
         var l = document.location.search.substr(1).split("/");
         election = l[0];
         issue = l.length > 1 ? l[l.length-2] : "";
         uid = l.length > 2 ? l[l.length-1] : "";
     }
     if (step == -1) {
         getJSON("/steve/voter/view/" + election + "/" + issue + "?uid=" + uid, [election, issue, uid], callback)
     }

     var obj = document.getElementById('preloader');
     step++;
     if (!election_data && obj) {
         if (step % 2 == 1) obj.innerHTML = messages[parseInt(Math.random()*messages.length-0.01)]
     } else if (obj && (step % 2 == 1)) {
         obj.innerHTML = "Ready..!"
     }
     if (step % 2 == 1) {
         obj.style.transform = "translate(0,0)"
     } else if (obj) {
         obj.style.transform = "translate(0,-500%)"
     }
     if (!election_data|| (step % 2 == 0) ) {
         window.setTimeout(loadElection, 750, election, uid, callback);
     }
 }

 function makeLetter(num) {
     var x = "A".charCodeAt(0)
     while (num > 25) {
         x += 1
         num -= 25
     }
     var letter = String.fromCharCode(x) + String.fromCharCode("A".charCodeAt(0) + num)
     return letter
 }

 function displayIssueSTV(code, response, state) {
     initTouch()
     chars = []  // Corresponding STV letters, in same order as nominees
     for (var z = 0; z <= 100; z++) {
         chars.push(makeLetter(z))
     }
     election_data = response
     if (code != 200) {
         document.getElementById('preloaderWrapper').innerHTML = "<h1>Could not load issue:</h1><h2>" + response.message + "</h2>";
     } else {
         candidates = []
         seconds_txt = []
         statements = {}
         var m = response.issue.type.match(/(\d+)/);
         if (m) {
             seats = parseInt(m[1])
             if (response.issue.type.match(/mntv/) || response.issue.type.match(/fic/)) {
                 maxnum = seats
             }
         }
         for (c in response.issue.candidates) {
             var candidate = response.issue.candidates[c];
             candidates.push(candidate.name);
             statements[chars[c]] = candidate.statement;
             seconds_txt[chars[c]] = candidate.seconds_txt; // don't use .seconds, that's for arrays!
         }
         document.getElementById('cnum').innerHTML = candidates.length
         document.getElementById('snum').innerHTML = seats
         while (chars.length > candidates.length) chars.splice(-1,1)

         for (i in candidates) candidates_copy.push(candidates[i])
         for (i in chars) chars_copy.push(chars[i])


         var obj = document.getElementById('preloaderWrapper')
         obj.innerHTML = ""
         obj.setAttribute("style", "min-width: 100%; min-height: 400px;")
         obj.setAttribute("id", "ballotWrapper")


         var c = document.createElement('div')
         c.setAttribute("id", "candidates")
         c.setAttribute("ondragover", "event.preventDefault();")
         c.setAttribute("ondragenter", "event.preventDefault();")
         c.setAttribute("ondragend", "event.preventDefault();")
         c.setAttribute("ondrop", "dropBack(event);")
         obj.appendChild(c)

         var b = document.createElement('div')
         b.setAttribute("id", "ballotbox")
         b.setAttribute("ondragover", "event.preventDefault();")
         b.setAttribute("ondragenter", "event.preventDefault();")
         b.setAttribute("ondragend", "event.preventDefault();")
         b.setAttribute("ondrop", "dropCandidate(event);")
         b.innerHTML = "<font color='red'><h3>Drag candidates over here:</h3</font>"

         var l = document.createElement('ol')
         l.setAttribute("id", "ballot")
         b.appendChild(l)
         obj.appendChild(b)
         l.innerHTML = "<img src='/images/target.png'/>"


         var stvdiv = document.createElement('div')
         stvdiv.setAttribute("id", "stv")
         b.appendChild(stvdiv)

         var vote = document.createElement('input')
         vote.setAttribute("type", "button")
         vote.setAttribute("class", "btn-green")
         vote.setAttribute("value", "Cast votes")
         vote.setAttribute("onclick", "castVotes();")

         var reset = document.createElement('input')
         reset.setAttribute("type", "button")
         reset.setAttribute("class", "btn-red")
         reset.setAttribute("value", "Reset")
         reset.setAttribute("onclick", "resetList();")


         stvdiv.appendChild(vote)
         stvdiv.appendChild(reset)

         stvdiv.appendChild(document.createElement('br'))
         stvdiv.appendChild(document.createElement('br'))


         shuffleCandidates();
         drawCandidates();

         document.getElementById('title').innerHTML = response.issue.title
         document.title = response.issue.title + " - Apache STeVe"

     }

 }

 function castVotes(args) {
     var l = document.location.search.substr(1).split("/");
     election = l[0];
     issue = l.length > 1 ? l[l.length-2] : "";
     uid = l.length > 2 ? l[l.length-1] : "";
     var v = ballotChars.join(" ")
     if (v == "") {
         v = "-"
     }
     postREST("/steve/voter/vote/" + election + "/" + issue, {
         uid: uid,
         vote: v
         },
         undefined,
         castVotesCallback,
         null)
 }

 function castVotesCallback(code, response, state) {
     if (code != 200) {
         alert(response.message)
     } else {
         document.getElementById('votebox').innerHTML = "<h2>Your vote has been registered!</h2><p style='text-align:center;'><big>Should you reconsider, you can always reload this page and vote again.<br/><br/><a href=\"javascript:void(location.href='election.html'+document.location.search);\">Back to election front page</a></big></p>"
     }
 }


 function touchHandler(event) {
     var touch = event.changedTouches[0];
     for (var i in event.changedTouches) {
         if (event.changedTouches[i].target && event.changedTouches[i].target.getAttribute ) {
             touch = event.changedTouches[i]
             break
         }
     }
     if (!touch.target || !touch.target.getAttribute || !touch.target.getAttribute("data")) {
         return
     }

     if (event.type == 'touchstart') {
         dragVote(touch)
     }
     if (event.type == 'touchend' || event.type == 'touchcancel') {
         tb = touch.target.getAttribute('data')
         dropCandidate(touch)
     }
     event.preventDefault();
 }

 function initTouch() {
     document.addEventListener("touchstart", touchHandler, true);
     document.addEventListener("touchmove", touchHandler, true);
     document.addEventListener("touchend", touchHandler, true);
     document.addEventListener("touchcancel", touchHandler, true);
 }
	/* WARNING: This script contains Voodoo! */
	/*
	Licensed to the Apache Software Foundation (ASF) under one or more
	contributor license agreements. See the NOTICE file distributed with
	this work for additional information regarding copyright ownership.
	The ASF licenses this file to You under the Apache License, Version 2.0
	(the "License"); you may not use this file except in compliance with
	the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	*/

	var candidates = []
	var statements = []
	var seconds_txt = []
	var ballotNames = []
	var ballotChars = []
	var chars;
	var fading = false
	var seats = 0;
	var maxnum = 9999

	// Make copies for reset
	var candidates_copy = []
	var chars_copy = []

	var failover = null;
	var tb = ""


	// Set transfer data during drag'n'drop
	function dragVote(ev) {
	ev.dataTransfer.setData("Text", ev.target.getAttribute("data"));
	failover = ev.target.getAttribute("data")
	if (ballotNames.indexOf(failover) == -1) {
	document.getElementById('candidates').style.backgroundImage = "url(/images/dragright.png)"
	document.getElementById('candidates').style.backgroundRepeat = "no-repeat"
	} else {
	document.getElementById('candidates').style.backgroundImage = "url(/images/dragleft.png)"
	document.getElementById('candidates').style.backgroundRepeat = "no-repeat"
	}
	}

	var source, dest

	function cancel(ev) {
	ev.preventDefault()
	}

	function resetList() {
	candidates = []
	chars = []
	for (i in candidates_copy) candidates.push(candidates_copy[i])
	for (i in chars_copy) chars.push(chars_copy[i])
	ballotNames = []
	ballotChars = []
	shuffleCandidates();

	drawCandidates()
	fading = false
	document.getElementById('ballot').innerHTML = '<img src="/images/target.png" style="margin-left: 100px;" ondrop="event.preventDefault(); dropCandidate(event);"/>';
	drawList();
	}

	// Did we drop a vote on top of another?
	function dropVote(ev, parent) {

	//ev.preventDefault();
	if (parent \|\| fading) return;

	// Get who we dragged and who we dropped it on
	source = ev.dataTransfer.getData("Text");
	dest = parent ? ev.target.parentNode.getAttribute("data") : ev.target.getAttribute("data")
	if (dest == "UPPER") { dest = ballotNames[0]}
	if (dest == "LOWER") { dest = ballotNames[ballotNames.length -1] }
	if (candidates.indexOf(dest) != -1) {
	alert("Back to school!")
	}

	// If we didn't drag this onto ourselves, let's initiate the fade-out and swap
	if (source != dest) {
	fadeOut(1, "ballot");
	}

	}

	function dropComplete(z) {
	if (fading) {
	return;
	}
	// Get array indices
	var sid = ballotNames.indexOf(source);
	var did = ballotNames.indexOf(dest)

	// Splice!
	if (sid >= 0 && did >= 0) {
	ballotNames.splice(did, 0, ballotNames.splice(sid, 1)[0])
	ballotChars.splice(did, 0, ballotChars.splice(sid, 1)[0])
	} else {
	//alert(source + ":" + dest)
	}
	//ev.preventDefault();
	// Redraw and carry on

	drawList()
	fadeIn(0, z, Math.random())
	}


	// A little shuffle, so we don't all get the same order at first
	function shuffleCandidates() {
	for (var i = 0; i < candidates.length; i++) {

	// Pick some numbers
	var sid = parseInt(Math.random()*candidates.length-0.01);
	var did = parseInt(Math.random()*candidates.length-0.01);

	// Splice!
	if (sid >= 0 && did >= 0) {
	candidates.splice(did, 0, candidates.splice(sid, 1)[0])
	chars.splice(did, 0, chars.splice(sid, 1)[0])
	}
	}
	}


	function drawCandidates() {
	var box = document.getElementById('candidates')
	box.innerHTML = "<h3>Candidates:</h3>"
	for (i in candidates) {
	var name = candidates[i]
	var char = chars[i]
	// Add element and set drag'n'drop + data
	var outer = document.createElement('div')
	var inner = document.createElement('span')
	inner.style.fontFamily = "monospace"
	inner.innerHTML = char + ": " + name;
	inner.setAttribute("ondrop", "dropCandidate(event, true)")
	outer.setAttribute("class", "ballotbox_clist")
	outer.setAttribute("id", name)
	outer.setAttribute("data", name)
	inner.setAttribute("data", name)
	inner.setAttribute("draggable", "false")
	outer.setAttribute("draggable", "true")
	outer.setAttribute("ondragstart", "dragVote(event)")
	outer.appendChild(inner)
	// if it's a super long name, like a data blob, don't tooltip it
	if (name.length > 32) outer.setAttribute("title", "Drag to move the candidate to the ballot box")
	else outer.setAttribute("title", "Drag to move " + name + " to the ballot box")
	outer.setAttribute("ondrop", "dropCandidate(event, false)")
	outer.setAttribute("ondragover", "event.preventDefault();")
	outer.setAttribute("ondragend", "event.preventDefault();")
	outer.setAttribute("ondragenter", "event.preventDefault();")

	// Does the candidate have a statement? if so, put it on there
	if (statements[char]) {
	var statement = document.createElement('div')
	statement.setAttribute("class", "statement_marker")
	// if it's a super long name, like a data blob, don't tooltip it
	if (name.length > 32) statement.setAttribute("title", "Click to read the candidate's statement")
	else statement.setAttribute("title", "Click to read " + name + "'s statement")
	statement.setAttribute("onclick", "location.hash='#statement_"+char+"';")
	statement.innerHTML = "<a href='#statement_"+char+"'>Statement</a>"

	outer.appendChild(statement)

	var popup = document.createElement("div")
	popup.setAttribute("class", "modal")
	popup.setAttribute("id", "statement_" + char)
	popup.setAttribute("aria-hidden", "true")

	var popupd = document.createElement("div")
	popupd.setAttribute("class", "modal-dialog")
	popup.appendChild(popupd)

	var popuph = document.createElement("div")
	popuph.setAttribute("class", "modal-header")
	popuph.innerHTML = '<h2>Statement from ' + name + '</h2><a href="#close" class="btn-close" aria-hidden="true">×</a>'

	var popupb = document.createElement("div")
	popupb.setAttribute("class", "modal-body")
	popupb.innerHTML = '<pre>' + (statements[char] ? statements[char] : "This candidate has not prepared a statement") +'</pre>'

	var popupf = document.createElement("div")
	popupf.setAttribute("class", "modal-footer")
	popupf.innerHTML = '<a href="#close" class="btn">Close statement</a>'

	popupd.appendChild(popuph)
	popupd.appendChild(popupb)
	popupd.appendChild(popupf)

	document.getElementsByTagName('body')[0].appendChild(popup)
	}

	// Does the candidate have a nomination and/or seconds? if so, put it on there
	if (seconds_txt[char]) {
	var seconds = document.createElement('div')
	seconds.setAttribute("class", "statement_marker")
	seconds.style.float = 'right'
	seconds.style.marginRight = '4px'
	seconds.setAttribute("title", "Click to read " + name + "'s nomination and/or seconds")
	seconds.innerHTML = "<a href='#seconds_"+char+"'>2nds</a>"

	outer.appendChild(seconds)

	var popup = document.createElement("div")
	popup.setAttribute("class", "modal")
	popup.setAttribute("id", "seconds_" + char)
	popup.setAttribute("aria-hidden", "true")

	var popupd = document.createElement("div")
	popupd.setAttribute("class", "modal-dialog")
	popup.appendChild(popupd)

	var popuph = document.createElement("div")
	popuph.setAttribute("class", "modal-header")
	popuph.innerHTML = '<h2>Nomination/Seconds for ' + name + '</h2><a href="#close" class="btn-close" aria-hidden="true">×</a>'

	var popupb = document.createElement("div")
	popupb.setAttribute("class", "modal-body")
	popupb.innerHTML = '<pre>' + (seconds_txt[char] ? seconds_txt[char] : "This candidate does not have a nomination statement") +'</pre>'

	var popupf = document.createElement("div")
	popupf.setAttribute("class", "modal-footer")
	popupf.innerHTML = '<a href="#close" class="btn">Close window</a>'

	popupd.appendChild(popuph)
	popupd.appendChild(popupb)
	popupd.appendChild(popupf)

	document.getElementsByTagName('body')[0].appendChild(popup)
	}
	box.appendChild(outer)

	}
	document.getElementById('ballotbox').style.height = box.offsetHeight + "px"
	}

	// Did we drop a vote on top of another?
	function dropCandidate(ev) {
	if (ev.preventDefault) ev.preventDefault();
	if (ballotNames.length >= maxnum) {
	return; // MNTV lockout
	}
	source = ev.dataTransfer ? ev.dataTransfer.getData("Text") : tb;
	source = source ? source : tb
	dest = ev.target.getAttribute("data")
	dest = dest ? dest : "LOWER"
	if (dest == source) { // touch fixes
	dest = "LOWER"
	}
	var z = 0;
	if (dest == "UPPER") { dest = ballotNames[0]; z = 0}
	if (dest == "LOWER") { dest = ballotNames[ballotNames.length -1]; z = 1;}
	if (dest && candidates.indexOf(dest) != -1) {
	return;
	}
	if (ballotNames.indexOf(source) == -1 && candidates.indexOf(source) != -1) {
	var x = ballotNames.indexOf(dest)
	x += z
	if (ballotNames.indexOf(dest) != -1) {
	ballotNames.splice(x,0,source);
	ballotChars.splice(x,0,chars[candidates.indexOf(source)]);
	} else {
	ballotNames.push(source)
	ballotChars.push(chars[candidates.indexOf(source)])
	}
	chars.splice(candidates.indexOf(source), 1)
	candidates.splice(candidates.indexOf(source), 1)

	fadeIn(0, "ballot", Math.random())
	//ev.preventDefault()
	drawCandidates();
	drawList();

	}

	}

	// Did we drop a vote on top of another?
	function dropBack(ev) {
	ev.preventDefault();
	source = ev.dataTransfer.getData("Text");
	dest = ev.target.getAttribute("data")

	if (dest == "UPPER") { dest = ballotNames[0]}
	if (dest == "LOWER") { dest = ballotNames[ballotNames.length -1] }

	if ((!dest \|\| candidates.indexOf(dest) != -1) && ballotNames.indexOf(source) != -1) {

	candidates.push(source)
	chars.push(ballotChars[ballotNames.indexOf(source)])
	ballotChars.splice(ballotNames.indexOf(source), 1)
	ballotNames.splice(ballotNames.indexOf(source), 1)
	drawList();
	drawCandidates();
	fadeIn(0, "candidates", Math.random())

	} else {
	dest = null
	source = null
	}
	}

	function showLines(ev) {
	source = ev.dataTransfer.getData("Text");
	source = source ? source : failover;
	ev.preventDefault();
	if (ev.target && ev.target.getAttribute) {
	var above = false
	dest = ev.target.getAttribute("data")
	var odest = dest;
	var override = false
	if (dest == "UPPER") { dest = ballotNames[0]; override = true; above = true;}
	if (dest == "LOWER") { dest = ballotNames[ballotNames.length-1]; override = true; above= false; }
	for (i=0;i< document.getElementById('ballot').childNodes.length;i++) {
	var el = document.getElementById('ballot').childNodes[i]
	el.style.borderTop = ""
	el.style.borderBottom = ""
	}
	document.getElementById('UPPER').style.borderTop = "none"
	document.getElementById('LOWER').style.borderBottom = "none"
	document.getElementById('UPPER').style.borderBottom = "none"
	document.getElementById('LOWER').style.borderTop = "none"
	if (ballotNames.indexOf(dest) != -1 && dest != source) {
	a = ballotNames.indexOf(source);
	b = ballotNames.indexOf(dest);

	override = false
	if (a != -1 && !override) {

	if (a > b) {
	above = true;
	} else {
	above = false;
	}
	} else {
	b--;
	if (b == -1) {
	above = false;
	} if (b == ballotNames.length-1) {
	above = false;
	}
	}

	if (((a == -1 \|\| above == true) && odest != "UPPER") \|\| odest == "LOWER") {
	document.getElementById(odest).style.borderTop = "16px solid #0AF";
	} else {
	document.getElementById(odest).style.borderBottom = "16px solid #0AF";
	}
	}
	}

	}

	function insertAfter(newNode, referenceNode) {
	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
	}

	function insertBefore(newNode, referenceNode) {
	referenceNode.parentNode.insertBefore(newNode, referenceNode);
	}

	function drawList() {
	// Remove drag helper
	document.getElementById('candidates').style.background = "";

	// Fetch ballot master and clear it
	var ballot = document.getElementById('ballot')
	ballot.innerHTML = ""
	var s = 0;

	// For each nominee, do...
	for (i in ballotNames) {
	s++;
	var el = ballotNames[i];
	var outer = document.createElement('li');
	// Set style
	outer.setAttribute("class", "ballotbox")

	var no = document.createElement('div');
	no.setAttribute("class", "ballotNumber")
	no.innerHTML = (s)


	// Above/below cutaway line? If so, draw it
	if (s == seats) {
	outer.style.borderBottom = "1px solid #A00"
	}
	if (s == seats+1) {
	outer.style.borderTop = "1px solid #A00"
	}

	// 'grey out' people below cutaway line
	if (s > seats) {
	outer.style.opacity = "0.75"
	}

	// Add element and set drag'n'drop + data
	var inner = document.createElement('span')
	inner.style.left = "35px"
	inner.style.maxWidth = "300px"
	inner.style.maxHeight = "60px"
	inner.style.overflow = "hidden"
	inner.innerHTML = ballotChars[i] + ": " + el;
	inner.setAttribute("ondrop", "dropVote(event, true)")
	outer.setAttribute("id", el)
	outer.setAttribute("data", el)
	inner.setAttribute("data", el)
	outer.setAttribute("draggable", "true")
	outer.setAttribute("ondragstart", "dragVote(event)")
	outer.setAttribute("ondragenter", "showLines(event)")
	outer.appendChild(no)
	outer.appendChild(inner)
	outer.setAttribute("title", "Drag to move " + el + " up or down on the list")
	outer.setAttribute("ondrop", "dropVote(event, false)")


	if (el == source) {
	outer.style.opacity = "0"
	}

	// Add to box
	ballot.appendChild(outer)
	}

	// Drop upper and lower filler boxes, so people can drag to the top/bottom of the list as well
	if (!document.getElementById('UPPER')) {
	var d = document.createElement('div');
	d.setAttribute("class", "fillerbox")
	d.setAttribute("data", "UPPER");
	d.setAttribute("id", "UPPER");
	d.setAttribute("ondragenter", "showLines(event)")
	d.setAttribute("ondrop", "dropVote(event, false)")
	insertBefore(d, ballot);

	var d = document.createElement('div');
	d.setAttribute("class", "fillerbox")
	d.setAttribute("id", "LOWER")
	d.setAttribute("data", "LOWER");
	d.setAttribute("ondrop", "dropVote(event, false)")
	d.setAttribute("ondragenter", "showLines(event)")
	insertAfter(d, ballot);
	}

	// Clear any bad lines
	document.getElementById('UPPER').style.borderTop = "none"
	document.getElementById('LOWER').style.borderBottom = "none"
	document.getElementById('UPPER').style.borderBottom = "none"
	document.getElementById('LOWER').style.borderTop = "none"
	}

	// Fade in/out maneuvres
	function fadeOut(x) {
	if (source) {
	if (!x) {
	x = 1
	}
	if (fading) {
	return;
	}
	x -= 0.1
	document.getElementById(source).setAttribute("class", "ballotSelected")
	document.getElementById(source).style.opacity = String(x)
	if (x > 0) {
	window.setTimeout(function() { fadeOut(x)}, 20)
	} else {
	dropComplete("candidates");
	}
	}
	}

	var gz = 0;
	function fadeIn(x, y, z) {
	if (source) {
	if (x == 0) {
	gz = z;
	}
	if (z != gz) {
	return;
	}
	x += 0.1
	if (x >= 1) {
	x = 1
	}
	document.getElementById(source).style.opacity = String(x)


	document.getElementById(source).setAttribute("class", "ballotSelected")
	if (x < 1) {
	fading = true
	window.setTimeout(function() { fadeIn(x, y, z)}, 25)

	} else {
	window.setTimeout(function() {fading = false }, 250)
	if (y == "ballot") {
	document.getElementById(source).setAttribute("class", "ballotbox")

	} else {
	document.getElementById(source).setAttribute("class", "ballotbox_clist")

	}
	source = null
	drawList();


	}
	}
	}

	var step = -1

	function loadIssue(election, issue, uid, callback) {

	var messages = ["Herding cats...", "Shaving yaks...", "Shooing some cows away...", "Fetching election data...", "Loading issues..."]
	if (!election \|\| !uid) {
	var l = document.location.search.substr(1).split("/");
	election = l[0];
	issue = l.length > 1 ? l[l.length-2] : "";
	uid = l.length > 2 ? l[l.length-1] : "";
	}
	if (step == -1) {
	getJSON("/steve/voter/view/" + election + "/" + issue + "?uid=" + uid, [election, issue, uid], callback)
	}

	var obj = document.getElementById('preloader');
	step++;
	if (!election_data && obj) {
	if (step % 2 == 1) obj.innerHTML = messages[parseInt(Math.random()*messages.length-0.01)]
	} else if (obj && (step % 2 == 1)) {
	obj.innerHTML = "Ready..!"
	}
	if (step % 2 == 1) {
	obj.style.transform = "translate(0,0)"
	} else if (obj) {
	obj.style.transform = "translate(0,-500%)"
	}
	if (!election_data\|\| (step % 2 == 0) ) {
	window.setTimeout(loadElection, 750, election, uid, callback);
	}
	}

	function makeLetter(num) {
	var x = "A".charCodeAt(0)
	while (num > 25) {
	x += 1
	num -= 25
	}
	var letter = String.fromCharCode(x) + String.fromCharCode("A".charCodeAt(0) + num)
	return letter
	}

	function displayIssueSTV(code, response, state) {
	initTouch()
	chars = [] // Corresponding STV letters, in same order as nominees
	for (var z = 0; z <= 100; z++) {
	chars.push(makeLetter(z))
	}
	election_data = response
	if (code != 200) {
	document.getElementById('preloaderWrapper').innerHTML = "<h1>Could not load issue:</h1><h2>" + response.message + "</h2>";
	} else {
	candidates = []
	seconds_txt = []
	statements = {}
	var m = response.issue.type.match(/(\d+)/);
	if (m) {
	seats = parseInt(m[1])
	if (response.issue.type.match(/mntv/) \|\| response.issue.type.match(/fic/)) {
	maxnum = seats
	}
	}
	for (c in response.issue.candidates) {
	var candidate = response.issue.candidates[c];
	candidates.push(candidate.name);
	statements[chars[c]] = candidate.statement;
	seconds_txt[chars[c]] = candidate.seconds_txt; // don't use .seconds, that's for arrays!
	}
	document.getElementById('cnum').innerHTML = candidates.length
	document.getElementById('snum').innerHTML = seats
	while (chars.length > candidates.length) chars.splice(-1,1)

	for (i in candidates) candidates_copy.push(candidates[i])
	for (i in chars) chars_copy.push(chars[i])


	var obj = document.getElementById('preloaderWrapper')
	obj.innerHTML = ""
	obj.setAttribute("style", "min-width: 100%; min-height: 400px;")
	obj.setAttribute("id", "ballotWrapper")


	var c = document.createElement('div')
	c.setAttribute("id", "candidates")
	c.setAttribute("ondragover", "event.preventDefault();")
	c.setAttribute("ondragenter", "event.preventDefault();")
	c.setAttribute("ondragend", "event.preventDefault();")
	c.setAttribute("ondrop", "dropBack(event);")
	obj.appendChild(c)

	var b = document.createElement('div')
	b.setAttribute("id", "ballotbox")
	b.setAttribute("ondragover", "event.preventDefault();")
	b.setAttribute("ondragenter", "event.preventDefault();")
	b.setAttribute("ondragend", "event.preventDefault();")
	b.setAttribute("ondrop", "dropCandidate(event);")
	b.innerHTML = "<font color='red'><h3>Drag candidates over here:</h3</font>"

	var l = document.createElement('ol')
	l.setAttribute("id", "ballot")
	b.appendChild(l)
	obj.appendChild(b)
	l.innerHTML = "<img src='/images/target.png'/>"


	var stvdiv = document.createElement('div')
	stvdiv.setAttribute("id", "stv")
	b.appendChild(stvdiv)

	var vote = document.createElement('input')
	vote.setAttribute("type", "button")
	vote.setAttribute("class", "btn-green")
	vote.setAttribute("value", "Cast votes")
	vote.setAttribute("onclick", "castVotes();")

	var reset = document.createElement('input')
	reset.setAttribute("type", "button")
	reset.setAttribute("class", "btn-red")
	reset.setAttribute("value", "Reset")
	reset.setAttribute("onclick", "resetList();")


	stvdiv.appendChild(vote)
	stvdiv.appendChild(reset)

	stvdiv.appendChild(document.createElement('br'))
	stvdiv.appendChild(document.createElement('br'))


	shuffleCandidates();
	drawCandidates();

	document.getElementById('title').innerHTML = response.issue.title
	document.title = response.issue.title + " - Apache STeVe"

	}

	}

	function castVotes(args) {
	var l = document.location.search.substr(1).split("/");
	election = l[0];
	issue = l.length > 1 ? l[l.length-2] : "";
	uid = l.length > 2 ? l[l.length-1] : "";
	var v = ballotChars.join(" ")
	if (v == "") {
	v = "-"
	}
	postREST("/steve/voter/vote/" + election + "/" + issue, {
	uid: uid,
	vote: v
	},
	undefined,
	castVotesCallback,
	null)
	}

	function castVotesCallback(code, response, state) {
	if (code != 200) {
	alert(response.message)
	} else {
	document.getElementById('votebox').innerHTML = "<h2>Your vote has been registered!</h2><p style='text-align:center;'><big>Should you reconsider, you can always reload this page and vote again.<br/><br/><a href=\"javascript:void(location.href='election.html'+document.location.search);\">Back to election front page</a></big></p>"
	}
	}


	function touchHandler(event) {
	var touch = event.changedTouches[0];
	for (var i in event.changedTouches) {
	if (event.changedTouches[i].target && event.changedTouches[i].target.getAttribute ) {
	touch = event.changedTouches[i]
	break
	}
	}
	if (!touch.target \|\| !touch.target.getAttribute \|\| !touch.target.getAttribute("data")) {
	return
	}

	if (event.type == 'touchstart') {
	dragVote(touch)
	}
	if (event.type == 'touchend' \|\| event.type == 'touchcancel') {
	tb = touch.target.getAttribute('data')
	dropCandidate(touch)
	}
	event.preventDefault();
	}

	function initTouch() {
	document.addEventListener("touchstart", touchHandler, true);
	document.addEventListener("touchmove", touchHandler, true);
	document.addEventListener("touchend", touchHandler, true);
	document.addEventListener("touchcancel", touchHandler, true);
	}