Kinetic.ConnectPoint = function(config){
	Kinetic.Group.call(this, config);
	this.data = config.data;
	
	this.createConnectPoint();
}
	
Kinetic.ConnectPoint.prototype = {
	createConnectPoint: function(){
		var thisObject = this;
		
		// label
		var width = exerciseSettings.startPointWidth;
		
		if (this.data.type == 'endPoint'){
			width = exerciseSettings.endPointWidth;
		}
		
		if (width === undefined){
			width = 200;
		}
		
		if (this.data.content != ''){
			this.label = new Kinetic.Text({
				'x': 0,
				'y': 0,
				'text': this.data.content,
				'fontSize': 11,
				'fontFamily': 'Arial',
				'fill': '#000000',
				'width': width
			});
			this.add(this.label);
		}
		
		// media
		if (this.data.mediaelementId > 0){
			// align right
			var mediaWidth = this.data.mediaVO.mediaFile.width;
			
			for (var i = 0; i < this.data.mediaVO.parameters.length; i++){
				var key = this.data.mediaVO.parameters[i].key;
				
				if (key == 'sizex'){
					mediaWidth = this.data.mediaVO.parameters[i].value;
				}
			}
			
			this.data.mediaVO.x = width - mediaWidth - 10;
			
			// create media
			this.media = new Kinetic.Media({
				'mediaData': this.data.mediaVO,
				'parent': this 
			});
		}
		
		// circle
		this.circle = new Kinetic.Circle({
			'x': 4,
			'radius': 8,
			'fill': {
				'start': {
					'x': 0,
					'y': 0,
					'radius': 0
				},
				'end': {
					'x': 1,
					'y': 1,
					'radius': 15
				},
				'colorStops': [0, '#FFFFFF', 1, '#AAAAAA']
			},
			'stroke': '#000000',
			'strokeWidth': 1,
			'shadow': {
				'color': '#C0C0C0',
				'blur': 3,
				'offset': [0, 3],
				'alpha': 0.5
			}
		});
		this.add(this.circle);
		
		// horizontal align
		if (this.data.type == 'startPoint'){
			var circleX = parseInt(width) + 20;
			this.circle.setX(circleX);
		} else {
			if (this.data.content != ''){
				this.label.setX(22);
			} else {
				this.media.setX(22);
			}
		}
		
		// vertical align circle
		var labelHeight = 0;
		
		if (this.data.content != ''){
			labelHeight = this.getHeight();
		} else if (this.data.mediaelementId > 0){
			labelHeight = this.media.getHeight(); 
		}
		
		var circleY = labelHeight / 2 - 2;
		this.circle.setY(circleY);
		
		
		if (this.data.type == 'startPoint'){
			// dragLine
			this.dragLine = new Kinetic.Line({
				'points': [0, 0],
				'stroke': '#000000',
				'strokeWidth': 2
			});
			this.add(this.dragLine);
			
			// dragCircleStart
			this.dragCircleStart = new Kinetic.Circle({
				'x': this.circle.getX(),
				'y': this.circle.getY(),
				'radius': 6,
				'fill': '#000000'
			});
			this.add(this.dragCircleStart);
			
			// dragCircleEnd
			this.dragCircleEnd = new Kinetic.Circle({
				'x': this.circle.getX(),
				'y': this.circle.getY(),
				'radius': 6,
				'fill': '#000000'
			});
			this.add(this.dragCircleEnd);
		}
		
		
		// hitzone 2
		this.hitzone2 = new Kinetic.Rect({
			'x': this.circle.getX() - 18,
			'y': this.circle.getY() - 18,
			'width': 36,
			'height': 36,
			'fill': '#00FF00',
			'opacity': 0,
			'draggable': true
		});
		this.add(this.hitzone2);
		
		if (this.data.type != 'startPoint'){
			this.hitzone2.setDraggable(false);
		}
		
		// hitzone 1
		this.hitzone1 = new Kinetic.Rect({
			'x': this.circle.getX() - 18,
			'y': this.circle.getY() - 18,
			'width': 36,
			'height': 36,
			'fill': '#00FF00',
			'opacity': 0,
			'draggable': true
		});
		this.add(this.hitzone1);
		
		if (this.data.type != 'startPoint'){
			this.hitzone1.setDraggable(false);
		}
	},
	
	getAbsoluteHitzonePosition: function(){
		var endPointX = this.hitzone1.getX();
		var endPointY = this.hitzone1.getY();
		
		if (this.activeHitzone == 2){
			var endPointX = this.hitzone2.getX();
			var endPointY = this.hitzone2.getY();
		}
		
		endPointX += this.getX();
		endPointY += this.getY();
		
		endPointX += this.getParent().getX();
		endPointY += this.getParent().getY();
		
		endPointX += this.getLayer().getX();
		endPointY += this.getLayer().getY();
		
		return {
			'x': endPointX,
			'y': endPointY
		}
	},
	
	getAbsolutePosition: function(){
		var endPointX = this.getX();
		var endPointY = this.getY();
		
		endPointX += this.getParent().getX();
		endPointY += this.getParent().getY();
		
		endPointX += this.getLayer().getX();
		endPointY += this.getLayer().getY();
		
		return {
			'x': endPointX,
			'y': endPointY
		}
	},
	
	snapToPosition: function(x, y){
		this.dragCircleEnd.setX(x);
		this.dragCircleEnd.setY(y);
		
		if (this.activeHitzone == 1){
			this.hitzone1.setX(x - 18);
			this.hitzone1.setY(y - 18);
		} else {
			this.hitzone2.setX(x - 18);
			this.hitzone2.setY(y - 18);
		}
		
		this.dragLine.setPoints([this.dragCircleStart.getX(), this.dragCircleStart.getY(), x, y]);
		
		this.getLayer().draw();
	},
	
	getStartPosition: function(){
		var x = this.circle.getX();
		var y = this.circle.getY();
		
		return {
			'x': x,
			'y': y
		}
	},
	
	getHeight: function(){
		var itemHeight;
		
		if (this.data.mediaelementId > 0){
			itemHeight = this.media.getHeight();
		} else {
			itemHeight = this.label.getHeight();
		}
		
		return itemHeight;
	},
	
	resetInactiveHitzone: function(){
		if (this.activeHitzone == 1){
			this.hitzone2.setX(this.circle.getX() - 18);
			this.hitzone2.setY(this.circle.getY() - 18);
		} else {
			this.hitzone1.setX(this.circle.getX() - 18);
			this.hitzone1.setY(this.circle.getY() - 18);
		}
	},
	
	setCorrect: function(){
		this.dragLine.setStroke('#319d1c');
		this.dragCircleStart.setFill('#319d1c');
		this.dragCircleEnd.setFill('#319d1c');
	},
	
	setWrong: function(){
		this.dragLine.setDashArray([5, 5]);
		this.dragLine.setStroke('#d50000');
		this.dragCircleStart.setFill('#d50000');
		this.dragCircleEnd.setFill('#d50000');
		
		var connectTo = this.data.connectTo;
		var endPoints = this.getParent().getParent().endPoints;
		
		var x = 0;
		var y = 0;
		var endHZ = null;
		
		for (var i = 0; i < endPoints.length; i++){
			if (connectTo == endPoints[i].data.id){
				endHZ = endPoints[i].getAbsoluteHitzonePosition();
				x = endHZ.x + (36 / 2) - this.getAbsolutePosition().x;
				y = endHZ.y + (36 / 2) - this.getAbsolutePosition().y;
				break;
			}
		}
		
		this.newLine = new Kinetic.Line({
			'points': [this.circle.getX(), this.circle.getY(), x, y],
			'stroke': '#0000FF',
			'strokeWidth': 2
		});
		this.add(this.newLine);
		
		this.dragCircleEnd.setX(x);
		this.dragCircleEnd.setY(y);
		this.dragCircleEnd.setFill('#0000FF');
		this.dragCircleStart.setFill('#0000FF');
	},
	
	setForgot: function(){
		var connectTo = this.data.connectTo;
		var endPoints = this.getParent().getParent().endPoints;
		
		var x = 0;
		var y = 0;
		var endHZ = null;
		
		for (var i = 0; i < endPoints.length; i++){
			if (connectTo == endPoints[i].data.id){
				endHZ = endPoints[i].getAbsoluteHitzonePosition();
				x = endHZ.x + (36 / 2) - this.getAbsolutePosition().x;
				y = endHZ.y + (36 / 2) - this.getAbsolutePosition().y;
				break;
			}
		}
		
		this.newLine = new Kinetic.Line({
			'points': [this.circle.getX(), this.circle.getY(), x, y],
			'stroke': '#0000FF',
			'strokeWidth': 2
		});
		this.add(this.newLine);
		
		this.dragCircleEnd.setX(x);
		this.dragCircleEnd.setY(y);
		this.dragCircleEnd.setFill('#0000FF');
		this.dragCircleStart.setFill('#0000FF');
	}
}

Kinetic.Util.extend(Kinetic.ConnectPoint, Kinetic.Group);