// Init Crap
	//------------------------------------------------
	var canvas = document.getElementById("canvas");
	var width = 800;
	var height = 150;
	var dots = [];
	
	var listeners = []
	var globalMouseOver = false
	var pointerX =0
	var pointerY=0
	var padding =10
	var maxX = 870
	var minX = 400
	var image =""
	var doneLoading=false
	var image_src = "http://tei-conf.org/10/logo/lib/conf-info.jpg"

	// Track mouse movement:
	if(canvas){
		
	}
	var pointerX = 0, pointerY = 0
	function mousemove(event) { 
//		pointerX = Event.pointerX(event)-padding
		pointerY = Event.pointerY(event)-padding
		mouseEventManager.mouseMove()
	}
	
	///////////////////////////////////
	// Mouse events
	///////////////////////////////////
	function doubleclick(event) {
		mouseEventManager.doubleClick()
	}
	function clickLength() {
		return releaseFrame-clickFrame
	}
	function mousedown(event) {
		mouseEventManager.mouseDown()
	}
	function mouseup() {
		mouseEventManager.mouseUp()
	}

	////////////////////
	// MouseEventManager
	////////////////////


	var MouseEventManager = Class.create({
		initialize: function(_name, _listeners, _mouseDownX, _mouseDownY, _dragging) {
		name = _name
		this.listeners = _listeners
		this.mouseDownX = _mouseDownX
		this.mouseDownY = _mouseDownY
		this.dragging = _dragging
		},
		listeners: [],

		init: function(){
		},
		addListener: function(Object){
			listeners[listeners.length] = Object;
		},
		removeListener: function(){
		},	
		mouseMove: function(){
			listeners.each(function(object){
				object.mouseMove()
			})	
		},
		mouseDown: function(){
			this.mouseDownX = pointerX
			this.mouseDownY = pointerY
			var dragging=false
			listeners.each(function(object){
				object.mouseDown()
				if(object.dragging){dragging=true}
			})	
			if(!dragging){
				checkDragDot()
			}			
		},
		mouseDrag: function(){
			listeners.each(function(object){
				object.mouseDrag()
			})	
		},
		mouseUp: function(){
			// tell all listeners to mouseUp 
			listeners.each(function(object){
				object.mouseUp()
			})
		},
		doubleClick: function(){
			listeners.each(function(object){
				object.doubleClick()
			})		
		},
	});

	var mouseEventManager = new MouseEventManager("hi", listeners, 0, 0, false)
	mouseEventManager.init()

	var LetterPos = new Array((0,0));
	//T
	LetterPos[0] = new Array(0,0);
	LetterPos[1] = new Array(90,0);
	LetterPos[2] = new Array(60,0);
	LetterPos[3] = new Array(60,115);
	//E
	LetterPos[4] = new Array(190,0);
	LetterPos[5] = new Array(145,0);
	LetterPos[6] = new Array(145,45);
	LetterPos[7] = new Array(160,45);
	LetterPos[8] = new Array(110,45);
	LetterPos[9] = new Array(110,115);
	LetterPos[10] = new Array(190,115);
	//I
	LetterPos[11] = new Array(230,0);
	LetterPos[12] = new Array(280,0);
	LetterPos[13] = new Array(253,0);
	LetterPos[14] = new Array(253,115);
	LetterPos[15] = new Array(230,115);
	LetterPos[16] = new Array(280,115);
	//1
	LetterPos[17] = new Array(378,0);
	LetterPos[18] = new Array(395,0);
	LetterPos[19] = new Array(395,115);
	//0
	LetterPos[20] = new Array(435,0);
	LetterPos[21] = new Array(520,0);
	LetterPos[22] = new Array(520,115);
	LetterPos[23] = new Array(435,115);
	LetterPos[24] = new Array(435,0);
	LetterPos[25] = new Array(339,0);
	
	function draw(){
		clear();
	
		pointerX = xMousePos
		if(doneLoading){
			try {
				canvas.drawImage(image,503,80)
			} catch(e) {
				console.log(e)
			}
		}
			
		
		dots.each(function(object) { 
				object.draw()
			}
		)
			lineWidth(24)
			strokeStyle("#000000")
			canvas.lineCap = 'square'
			for(var i=1;i<dots.length;i++){
				if(i!=4 && i!=11 && i!=17 && i!=20 && i!=25){
					beginPath()
					// moveTo(dots[i].pos[0]+12, dots[i].pos[1]+12)
					// lineTo(dots[i-1].pos[0]+12, dots[i-1].pos[1]+12)	
					moveTo((dots[i].pos[0]+12)*0.9, dots[i].pos[1]+12)
					lineTo((dots[i-1].pos[0]+12)*0.9, dots[i-1].pos[1]+12)	
					stroke()	
				}
			}
			drawApostrophe(dots[dots.length-1].pos)
	}
	function drawApostrophe(pos){
	    canvas.save()
		fillStyle = this.color
		translate(pos[0]*0.9,pos[1])
		beginPath()
		moveTo(0,0)
		lineTo(24,0)
		lineTo(24,33)
		lineTo(6,42)
		lineTo(2,34)
		lineTo(13,27)
		lineTo(13,24)
		lineTo(0,24)
		lineTo(0,0)
		fill()
		canvas.restore()
	}
	function checkDragDot(){
		var dist=width
		var dragDot
		dragDot=dots[22]
		/*dots.each(function(object) { 
				var distNow = pointToPointDist(pointerX, 0, object.pos[0],0)
				if(distNow<dist){
					dist=distNow
					dragDot = object
				}
			}
		)*/
		if(dragDot){
				dots.each(function(object) { 
					if(object.pos[0]>=dragDot.pos[0]-5 && object.pos[0]<=dragDot.pos[0]+5){
						object.startDragging()
					}
				}
			)
		}
	}
	
	
	function loadImage() {
		image = new Image()
		image.src = image_src
		image.onload = function(resp) {
		doneLoading = true
		}
	}
	
	
	
	function init(){
		canvas = document.getElementById('canvas').getContext('2d')
      if (canvas) {
		for(var i=0;i<LetterPos.length;i++){		
			var dot = new Dot(LetterPos[i])
			dots.push(dot)
		}
		$('canvas').observe('mousemove', mousemove)
		$('canvas').observe('mousedown', mousedown)
		$('canvas').observe('mouseup', mouseup)
		$('canvas').observe('dblclick', doubleclick)
		dots.each(function(object) { 
				object.makeSpringy()
			}
		)
		loadImage()
	  	//draw();
			new PeriodicalExecuter(draw, 0.025);
		//setInterval(draw,30);
		}
	}	
	var Dot = Class.create({
	  initialize: function(pos) {
	  this.pos = new Array(pos[0], pos[1])
	  mouseEventManager.addListener(this)	
	},
	pos: "",
	w:24,
	h:24,
	color:"#333",
	dragging:false,
	dragX:0,
	dragY:0,
	dotLeft:"",
	dotRight:"",
	relLeft:0,
	relRight:0,
	dotSame:"",

	draw: function(){
		if(this.dragging){
			this.drag()
		}else{
			this.spring()
		}		
	},
	makeSpringy: function(pos){
		var springLeft
		var springRight
		var springSame
		var lastXLeft = 0
		var lastXRight = width
		pos = this.pos
		
		dots.each(function(object) { 
				if(object.pos[0]< pos[0] && object.pos[0]>lastXLeft){
					springLeft = object
					lastXLeft = object.pos[0]
				}else if(object.pos[0]> pos[0] && object.pos[0]<lastXRight){
					springRight = object
					lastXRight = object.pos[0]
				}else if(object.pos[0]==pos[0]){
					springSame = object
				}
			}
		)
		this.dotLeft = springLeft
		this.dotRight = springRight		
		this.relLeft = Math.abs((this.pos[0]-lastXLeft)/(lastXRight-lastXLeft))
		this.dotSame = springSame		
	},
	spring: function(){
			var posOld = new Array(this.pos[0], this.pos[1])			
				var leftX = 0
				var rightX = width
				if(this.dotLeft){leftX = this.dotLeft.pos[0]}
				if(this.dotRight){rightX = this.dotRight.pos[0]}				
				this.pos[0] = leftX + (rightX-leftX)*this.relLeft
			if(this.pos[0]>maxX){this.pos[0] = posOld[0]}
	},
	drag: function(){
		var nextDragX = pointerX-this.w/2-this.dragX
		if(nextDragX<maxX && nextDragX>minX){
			this.pos[0] = nextDragX		
		}
	},
	shape: function(){
	  canvas.save()
		fillStyle = this.color
		translate(this.pos[0],this.pos[1])
		rect(0,0,this.w,this.h)
		canvas.restore()
	},	
	startDragging: function(){
		this.dragging=true
		this.dragX = pointerX-this.pos[0]-this.w/2
	},
	// events
	mouseDown: function(){		
		// if(pointerX>this.pos[0] && pointerX<this.pos[0]+this.w){
		// 		this.startDragging()
		// 	}		
		// 	// if(pointerX>this.pos[0] && pointerY>this.pos[1] && pointerX<this.pos[0]+this.w  && pointerY<this.pos[1]+this.h){
		// 	this.dragging=true
		// 	this.dragX = pointerX-this.pos[0]-this.w/2
		// 	this.dragY = pointerY- this.pos[1]-this.h/2
		// }
	},
	mouseUp: function(){
		this.dragging=false
	},
	mouseMove:function(){
		
	}
	});

	// ------ general math helper functions ---------------------------------------------------------------------------
	function pointToLineDist(x, y, x0, y0, x1, y1) {
	    //returns the shortest distance possible between a given point and a line defined by two endpoints
	    dx = x1 - x0
	    dy = y1 - y0
	    if (dx == 0 && dy == 0) {return 0}
	    length = pointToPointDist(x0,y0,x1,y1)
	    norm_dx = dx / length
	    norm_dy = dy / length
	    return Math.abs(norm_dx*(y0-y) - norm_dy*(x0-x))
	}

	function pointToPointDist(x0, y0, x1, y1) {
	    //returns the distance between two given points
	    return Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0))
	}


	function heading2D(x,y){
		angle =Math.atan2(-y,x)
		return -1*angle
	}