gyorgyf@0: var Application = {
gyorgyf@0:   init: function() {
gyorgyf@0:     this.canvas = document.getElementById('canvas');
gyorgyf@0:     this.marker = document.getElementById('marker');
gyorgyf@0:     this.label = document.getElementById('label');
gyorgyf@0: 
gyorgyf@0:     this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
gyorgyf@0:     this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
gyorgyf@0:     this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
gyorgyf@0:     
mgeorgi@6:     this.request("/moods.csv", this.loadMoods.bind(this));
mgeorgi@6:     this.request("/colors.txt", this.loadColors.bind(this));
gyorgyf@0:   },
gyorgyf@0: 
mgeorgi@6:   loadMoods: function(text) {
gyorgyf@0:     this.moods = [];
gyorgyf@0: 
gyorgyf@0:     var lines = text.split("\n");
mgeorgi@6:     
mgeorgi@6:     for (var i = 1; i < lines.length; i++) {
mgeorgi@6:       var row = lines[i].split(",");
mgeorgi@6:       var mood = {
mgeorgi@6:         label: row[1], 
mgeorgi@6:         x: Number(row[3]), 
mgeorgi@6:         y: Number(row[5])
mgeorgi@6:       };
mgeorgi@6: 
mgeorgi@6:       // var div = document.createElement('div');
mgeorgi@6:       // this.canvas.appendChild(div);
mgeorgi@6:       // div.style.position = 'absolute';
mgeorgi@6:       // div.style.left = mood.x * 320 + 'px';
mgeorgi@6:       // div.style.top = mood.y * 320 + 'px';
mgeorgi@6:       // div.innerHTML = mood.label;
mgeorgi@6:       
mgeorgi@6:       this.moods.push(mood);
mgeorgi@6:     }
mgeorgi@6:   },
mgeorgi@6: 
mgeorgi@6:   loadColors: function(text) {
mgeorgi@6:     this.colors = {};
mgeorgi@6: 
mgeorgi@6:     var lines = text.split("\n");
gyorgyf@0: 
gyorgyf@0:     for (var i = 1; i < lines.length; i++) {
mgeorgi@6:       var row = lines[i].split("\t");
mgeorgi@6:       this.colors[row[0]] = row[2];
gyorgyf@0:     }
gyorgyf@0:   },
gyorgyf@0:   
gyorgyf@0:   request: function(url, callback) {
gyorgyf@0:     var request = new XMLHttpRequest();
gyorgyf@0:     request.onreadystatechange = function() {
mgeorgi@6:       if (callback) {
mgeorgi@6:         callback(request.responseText);
mgeorgi@6:       }
gyorgyf@0:     }.bind(this);
gyorgyf@0:     request.open("GET", url);
gyorgyf@0:     request.send(null);
gyorgyf@0:   },
gyorgyf@0: 
gyorgyf@0:   onMouseDown: function(event) {
gyorgyf@0:     this.mouseDown = true;
gyorgyf@0:     this.setMarker(event.pageX, event.pageY);
gyorgyf@0:   },
gyorgyf@0: 
gyorgyf@0:   onMouseMove: function(event) {
gyorgyf@0:     if (this.mouseDown) {
gyorgyf@0:       this.setMarker(event.pageX, event.pageY);
gyorgyf@0:     }
gyorgyf@0:   },
gyorgyf@0: 
gyorgyf@0:   onMouseUp: function(event) {
gyorgyf@0:     this.mouseDown = false;
gyorgyf@0:     this.setMarker(event.pageX, event.pageY);
gyorgyf@0:   },
gyorgyf@0: 
mgeorgi@6:   setMarker: function(pageX, pageY) {
mgeorgi@6:     this.marker.style.left = pageX + 'px';
mgeorgi@6:     this.marker.style.top = pageY + 'px';
gyorgyf@0:     
mgeorgi@6:     var x = pageX / 320;
mgeorgi@6:     var y = 1 - pageY / 320;
mgeorgi@6:     
mgeorgi@6:     var mood = this.findMood(x, y);
mgeorgi@6: 
mgeorgi@6:     if (mood != this.mood) {
mgeorgi@6:       this.marker.innerHTML = mood.label;
mgeorgi@6:       this.mood = mood;
mgeorgi@6:       this.canvas.style.backgroundColor = '#' + this.colors[mood.label];
mgeorgi@6:       this.request("/mood?x=" + x + "&y=" + y);
mgeorgi@6:     }
mgeorgi@6:   },
mgeorgi@6: 
mgeorgi@6:   findMood: function(x, y) {
mgeorgi@6:     var distance = 1;
mgeorgi@6:     var index = null;
gyorgyf@0:     
gyorgyf@0:     for (var i = 0; i < this.moods.length; i++) {
gyorgyf@0:       var mood = this.moods[i];
mgeorgi@6:       var dx = Math.abs(mood.x - x);
mgeorgi@6:       var dy = Math.abs(mood.y - y);
mgeorgi@6:       var d = Math.sqrt(dx * dx + dy * dy);
gyorgyf@0: 
mgeorgi@6:       if (d < distance) {
mgeorgi@6:         distance = d;
mgeorgi@6:         index = i;
gyorgyf@0:       }
gyorgyf@0:     }
gyorgyf@0: 
mgeorgi@6:     return this.moods[index];
gyorgyf@0:   }
gyorgyf@0: };