gyorgyf@0: var Application = {
mgeorgi@16:   moods: [
mgeorgi@16:     ['power',0.69,0.71,0.79,1],
mgeorgi@16:     ['bright',0.81,0.55,0.67,2],
mgeorgi@16:     ['brutal',0.23,0.7,0.45,3],
mgeorgi@16:     ['confused',0.28,0.63,0.41,4],
mgeorgi@16:     ['rock',0.57,0.44,0.52,5],
mgeorgi@16:     ['serious',0.51,0.38,0.52,6],
mgeorgi@16:     ['relaxed',0.75,0.17,0.57,7],
mgeorgi@16:     ['calm',0.72,0.33,0.67,8],
mgeorgi@16:     ['dark',0.46,0.41,0.48,9],
mgeorgi@16:     ['dirty',0.26,0.49,0.46,10],
mgeorgi@16:     ['energy',0.78,0.74,0.74,11],
mgeorgi@16:     ['fun',0.92,0.78,0.73,12],
mgeorgi@16:     ['aggressive',0.51,0.6,0.57,13],
mgeorgi@16:     ['scary',0.28,0.71,0.33,14],
mgeorgi@16:     ['positive',0.88,0.57,0.65,15],
mgeorgi@16:     ['sad',0.08,0.39,0.31,16]
mgeorgi@16:   ],
mgeorgi@16:  
gyorgyf@0:   init: function() {
mgeorgi@20:     this.is_touch_device = 'ontouchstart' in document.documentElement;
gyorgyf@0:     this.canvas = document.getElementById('canvas');
gyorgyf@0:     this.label = document.getElementById('label');
mgeorgi@16:     this.draw();
mgeorgi@25:     this.lastClick = new Date();
gyorgyf@0: 
mgeorgi@20:     if (this.is_touch_device) {
mgeorgi@20:       this.canvas.addEventListener('touchstart', function(event) {
mgeorgi@20:         Application.onMouseUp(event.targetTouches[0]);
mgeorgi@20:       });
mgeorgi@20:     }
mgeorgi@20:     else {
mgeorgi@20:       this.canvas.addEventListener('click', function(event) {
mgeorgi@20:         Application.onMouseUp(event);
mgeorgi@20:       });
mgeorgi@20:     }
gyorgyf@0:   },
gyorgyf@0: 
mgeorgi@6:   tl: { r: 200, g: 0, b: 0 },
mgeorgi@6:   tr: { r: 200, g: 150, b: 0 },
mgeorgi@6:   bl: { r: 0, g: 50, b: 100 },
mgeorgi@6:   br: { r: 200, g: 230, b: 80 },
mgeorgi@6:   
mgeorgi@6:   interpolateColor: function(a, b, x) {
mgeorgi@6:     return {
mgeorgi@6:       r: Math.floor(a.r + (b.r - a.r) * x),
mgeorgi@6:       g: Math.floor(a.g + (b.g - a.g) * x),
mgeorgi@6:       b: Math.floor(a.b + (b.b - a.b) * x)
mgeorgi@6:     };
mgeorgi@6:   },
mgeorgi@6: 
mgeorgi@10:   draw: function() {
mgeorgi@6:     var step = 20;
mgeorgi@6:     var ctx = this.canvas.getContext("2d");  
mgeorgi@6:     ctx.clearRect(0, 0, 320, 320);
mgeorgi@6: 
mgeorgi@18:     var list = [];
mgeorgi@18: 
mgeorgi@6:     for (var y = 0; y < 320; y += step) {
mgeorgi@6:       var left = this.interpolateColor(this.tl, this.bl, y / 320);
mgeorgi@6:       var right = this.interpolateColor(this.tr, this.br, y / 320);
mgeorgi@6:       for (var x = 0; x < 320; x += step) {
mgeorgi@6:         var color = this.interpolateColor(left, right, x / 320);
mgeorgi@6:         ctx.fillStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
mgeorgi@6:         ctx.fillRect(x, y, step, step);
mgeorgi@6:       }
mgeorgi@6:     }
mgeorgi@10: 
mgeorgi@10:     ctx.beginPath();
mgeorgi@6:     ctx.strokeStyle = "rgb(0,0,0)";
mgeorgi@6:     ctx.moveTo(0, 160);
mgeorgi@6:     ctx.lineTo(320, 160);
mgeorgi@6:     ctx.stroke();
mgeorgi@6:     
mgeorgi@6:     ctx.fillStyle = "rgb(0,0,0)";
mgeorgi@6:     ctx.beginPath();
mgeorgi@6:     ctx.moveTo(320, 160);
mgeorgi@6:     ctx.lineTo(310, 150);
mgeorgi@6:     ctx.lineTo(310, 170);
mgeorgi@6:     ctx.fill();
mgeorgi@6: 
mgeorgi@6:     ctx.strokeStyle = "rgb(0,0,0)";
mgeorgi@6:     ctx.moveTo(160, 320);
mgeorgi@6:     ctx.lineTo(160, 0);
mgeorgi@6:     ctx.stroke();
mgeorgi@6:     
mgeorgi@6:     ctx.fillStyle = "rgb(0,0,0)";
mgeorgi@6:     ctx.beginPath();
mgeorgi@6:     ctx.moveTo(160, 0);
mgeorgi@6:     ctx.lineTo(150, 10);
mgeorgi@6:     ctx.lineTo(170, 10);
mgeorgi@6:     ctx.fill();
mgeorgi@6: 
mgeorgi@6:     ctx.font = "16px Arial";
mgeorgi@6:     ctx.fillText("Valence", 200, 158);  
mgeorgi@6:     
mgeorgi@6:     ctx.save();
mgeorgi@6:     ctx.translate(158, 120);
mgeorgi@6:     ctx.rotate(Math.PI * 1.5);
mgeorgi@6:     ctx.font = "16px Arial";
mgeorgi@6:     ctx.fillText("Arousal", 0, 0);  
mgeorgi@6:     ctx.restore();
mgeorgi@10:  
mgeorgi@10:     if (this.marker) {
mgeorgi@10:       ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
mgeorgi@10:       ctx.beginPath();
mgeorgi@10:       ctx.arc(this.marker.x, this.marker.y, 20, 0, Math.PI*2, true); 
mgeorgi@10:       ctx.fill();
mgeorgi@10:     }
mgeorgi@6:   },
mgeorgi@6:  
gyorgyf@0:   request: function(url, callback) {
gyorgyf@0:     var request = new XMLHttpRequest();
gyorgyf@0:     request.open("GET", url);
gyorgyf@0:     request.send(null);
gyorgyf@0:   },
gyorgyf@0: 
mgeorgi@10:   onMouseUp: function(event) {
mgeorgi@25:     if ((new Date() - this.lastClick) > 1000) {
mgeorgi@25:       this.setMarker(event);
mgeorgi@25:       this.sendPosition(event);
mgeorgi@25:       this.draw();
mgeorgi@25:       this.lastClick = new Date();
mgeorgi@25:     }
gyorgyf@0:   },
gyorgyf@0: 
mgeorgi@10:   sendPosition: function(event) {
mgeorgi@10:     var x = event.pageX / 320;
mgeorgi@10:     var y = 1 - event.pageY / 320;
gyorgyf@0: 
mgeorgi@11:     this.request("/moodconductor/mood?x=" + x + "&y=" + y);
gyorgyf@0:   },
gyorgyf@0: 
mgeorgi@10:   setMarker: function(event) {
mgeorgi@10:     this.marker = {
mgeorgi@10:       x: event.pageX,
mgeorgi@10:       y: event.pageY
mgeorgi@10:     };
mgeorgi@6: 
mgeorgi@10:     var x = event.pageX / 320;
mgeorgi@10:     var y = 1 - event.pageY / 320;
gyorgyf@0: 
mgeorgi@16:     this.label.innerHTML = this.findMood(x, y);
gyorgyf@0:   },
gyorgyf@0: 
gyorgyf@0:   findMood: function(x, y) {
gyorgyf@0:     var distance = 1;
gyorgyf@0:     var index = null;
gyorgyf@0:     
gyorgyf@0:     for (var i = 0; i < this.moods.length; i++) {
gyorgyf@0:       var mood = this.moods[i];
mgeorgi@16:       var dx = Math.abs(mood[1] - x);
mgeorgi@16:       var dy = Math.abs(mood[2] - y);
gyorgyf@0:       var d = Math.sqrt(dx * dx + dy * dy);
gyorgyf@0: 
gyorgyf@0:       if (d < distance) {
gyorgyf@0:         distance = d;
gyorgyf@0:         index = i;
gyorgyf@0:       }
gyorgyf@0:     }
gyorgyf@0: 
mgeorgi@16:     return this.moods[index][0];
gyorgyf@0:   }
gyorgyf@0: };