/**
 * Canvas object. Used to draw tracks on the Mars surface.
 * It implements browser dependent code, choosing the best available drawing facility.
 * Currently it uses VML on IE and JSGraphics on other browsers.
 */

/**
 * Draws a track on the GUI.
 */
function Canvas_drawTrack(track) {
	
	// if you can, use VML
	if(this.type=='VML') {
		var html='';
		for(var id in track.lines) {
			var line=track.lines[id];
			var p1=line.p1;
			var p2=line.p2;
			html+='<v:line style="position:absolute;top:0px;left:0px" id="line'+id+'" from="'+p1.x+'px,'+p1.y+'" to="'+p2.x+'px,'+p2.y+'"><v:stroke color="'+Canvas.permanentColor+'" weight="2"/></v:line>';	
		}
		var div=document.getElementById(this.drawDiv);
		div.innerHTML=html;
		this.mode=Canvas.modeSaved;
	// else use JSGraphics
	} else if(this.type=='JSGraphics') {
		this.drawCanvas.clear();
		this.drawCanvas.setColor(Canvas.permanentColor);
		this.drawCanvas.setStroke(1);
		for(var id in track.lines) {		
			var line=track.lines[id];
			var p1=line.p1;
			var p2=line.p2;
			this.drawCanvas.drawLine(p1.x,p1.y,p2.x,p2.y);
		}
		this.drawCanvas.paint();
		this.mode=Canvas.modeSaved;
	} else {
		alert('No graphic tool supported by your browser');
	}
}

function Canvas(type,drawDiv) {
	this.drawingTrack=new Track();
	this.type=type;
	this.drawDiv=drawDiv;
	this.mode=Canvas.modeIdle;
	if(type=='VML')
		this.originalShape=document.getElementById(drawDiv).innerHTML;
	else if(type=='JSGraphics')
		this.drawCanvas=new jsGraphics(drawDiv);
}

/**
 * Clears drawing space.
 */
function Canvas_clear() {
	this.drawingTrack=new Track();
	if(this.type=='VML') {
		document.getElementById(this.drawDiv).innerHTML=this.originalShape;
		this.mode=Canvas.modeIdle;
	} else if(this.type=='JSGraphics') {
		this.drawCanvas.clear();
		this.mode=Canvas.modeIdle;
	} else {
		alert('No graphic tool supported by your browser');
	}
}

/**
 * Click event. Draw lines if in drawing mode.
 */
function Canvas_click(evt) {
	
	if(this.mode==Canvas.modeIdle && this.drawingTrack) {
		// first line
		this.mode=Canvas.modeDrawing;
		var p=getPoint(evt);
		
		this.drawingTrack.startLine(p);
		
		this.drawLine(this.drawingTrack.lines.length-1,p,p);

	} else if(this.mode==Canvas.modeDrawing && this.drawingTrack) {
		
		// following lines
		enableButton('savetrackbutton');
		
		var p=getPoint(evt);
		var line=this.drawingTrack.endLine(p);
		this.drawingTrack.startLine(p);
		this.drawLine(this.drawingTrack.lines.length-1,line.p1,line.p2,true);
	}
}

/**
 * Mouse move event. Draw lines if in drawing mode.
 */
function Canvas_mouseMove(evt) {
	
	if(this.mode==Canvas.modeDrawing && this.drawingTrack) {
		
		
		var p=getPoint(evt);
		var line=this.drawingTrack.endLine(p);
		this.drawLine(this.drawingTrack.lines.length-1,line.p1,line.p2,true);
	}
}

function Canvas_save(name) {
	this.drawingTrack.name=name;
	var track=this.drawingTrack;
	this.clear();
	this.drawTrack(track);
	return track;
}

/**
 * Stops drawing. Save asked by user.
 */
function Canvas_preSave() {

	if(this.type=='VML' && this.drawingTrack) {
		var line=document.getElementById('line'+(this.drawingTrack.lines.length-1));
		line.to=line.from;
		var stroke=line.getElementsByTagName('stroke').item(0);
		stroke.color=Canvas.permanentColor;
		this.drawingTrack.removeLastLine();
		this.mode=Canvas.modePreSaved;
	} else if(this.type=='JSGraphics') {
		this.mode=Canvas.modePreSaved;
		this.drawingTrack.removeLastLine();
	} else {
		alert('No graphic tool supported by your browser');
	}
}

/**
 * Draws a new line.
 */
function Canvas_drawLine(id,p1,p2,moving) {
	if(this.type=='VML') {
		
		var div=document.getElementById(this.drawDiv);
		var line=document.getElementById('line'+id);
		
		if(line) {
			line.from=p1.x+'px,'+p1.y+'px';
			line.to=p2.x+'px,'+p2.y+'px';
		} else {
			div.innerHTML+='<v:line style="position:absolute;top:0px;left:0px" id="line'+id+'" from="'+p1.x+'px,'+p1.y+'" to="'+p2.x+'px,'+p2.y+'"><v:stroke color="'+Canvas.drawingColor+'" weight="2"/></v:line>';
			
			
		}
	} else if(this.type=='JSGraphics') {
		//if(!moving) {
			this.drawCanvas.clear();
			this.drawCanvas.setColor(Canvas.drawingColor);
			this.drawCanvas.setStroke(1);
			for(var id in this.drawingTrack.lines) {		
				var line=this.drawingTrack.lines[id];
				var p1=line.p1;
				var p2=line.p2;
				this.drawCanvas.drawLine(p1.x,p1.y,p2.x,p2.y);
			}
			this.drawCanvas.paint();
		//}
		
	} else {
		alert('No graphic tool supported by your browser');
	}
}


/* Drawing modes: idle (waiting user choice), drawing (user drawing lines), saved (path saved) */
Canvas.modeIdle=0;
Canvas.modeDrawing=1;
Canvas.modePreSaved=2;
Canvas.modeSaved=3;
Canvas.drawingColor='blue';
Canvas.permanentColor='yellow';

Canvas.prototype.drawTrack=Canvas_drawTrack;
Canvas.prototype.clear=Canvas_clear;
Canvas.prototype.click=Canvas_click;
Canvas.prototype.mouseMove=Canvas_mouseMove;
Canvas.prototype.drawLine=Canvas_drawLine;
Canvas.prototype.preSave=Canvas_preSave;
Canvas.prototype.save=Canvas_save;