var paginas_interacties_areaedit = 103;
var interacties_link_interactie = 104;

function interactie_area_edit( field, bestands_id ) {
	goto_ajax('index.php?id='+paginas_interacties_areaedit+'&bestands_id='+bestands_id+'&fid='+field.get('id') );
}

function interactie_link_edit( field, interactie_id ) {
	goto_ajax('index.php?id='+interacties_link_interactie+'&interactie_id='+interactie_id+'&fid='+field.get('id') );
}

function interactie_link_reset( fieldObj ) {
	var field = fieldObj.get('id');
	$(field+'_label').set('html', 'Afbeelding / tekst (<em>geen interactie</em>)');
	$(field).set('value', '');
	//disable 'clear' button
	$(field+'_clearbutton').set('disabled','disabled');
}

function item_link( field, name ) {
	var value = 0;
	var label = '';
	$$('input').each( function(item) {
		if(item.name == name && item.checked){
			value = item.get('value');
			label = $('label_item_'+value).get('html');
		}
	});
	$(field+'_label').set('html', '<em>Interactie:</em> '+label);
	$(field).set('value', value);
	$(field+'_clearbutton').erase('disabled');
}

var AreaEdit = new Class({
	clicked: false,
	pointSize: 2,
	points: [],
	field: false,
	
	initialize: function( field ) {
		this.field = $(field);
		
		var value = this.field.get('value');
		if( !value ) return;
		var values = value.split('|');

		switch( values[0] ) {
			case 'rect':
				var coords = values[1].split( ',' );
				this.setMarker( coords[0], coords[1] );
				this.setMarker( coords[0], coords[3] );
				this.setMarker( coords[2], coords[3] );
				this.setMarker( coords[2], coords[1] );
				break;
			case 'poly':
				var coords = values[1].split( ',' );
				for( var i=0; i<coords.length; i+=2 ) {
					this.setMarker( coords[i], coords[i+1] );
				}
				break;
		}
	},
	
	create: function( imgsrc, width, height, color ) {
		var element = new Element( 'div' );
		
		this.src = imgsrc;
		this.width = width.toInt();
		this.height = height.toInt();
		this.canvas = new Element( 'canvas', {
				width: this.width,
				height: this.height
			}).addEvents( {
				'click': function( e ) {
					this.click( e );
				}.bind(this)				
			}).inject( element );

		this.cv2d = this.canvas.getContext("2d");
		this.cv2d.fillStyle = color;
		this.cv2d.strokeStyle = color;

		this.imgElement = new Image();
		this.imgElement.src = this.src;

		return element;
	},

	click: function( event ) {
		var pos = this.canvas.getPosition();
		var clickX = event.client.x - pos.x;
		var clickY = event.client.y - pos.y;

		if( !this.clicked ) {
			this.clear();
		} 
		
		this.clicked = true;		
		this.setMarker( clickX, clickY );
		this.draw();
	},

	clear: function() {
		this.points = $A([]);
		this.draw();
	},

	save: function() {
		var str = '';		
		this.points.each( function(p) { 
			if( str ) str += ',';
			str += p.x + ',' + p.y;
		} );
		this.field.set( 'value', 'poly|' + str );
	},

	draw: function() {
		this.drawBackground();
		
		for( var i=0; i<this.points.length; i++ ) {
			// teken punt
			this.cv2d.beginPath();
			this.cv2d.arc(this.points[i].x, this.points[i].y, this.pointSize, 0, Math.PI*2, true);
			this.cv2d.closePath();
			this.cv2d.fill();
			
			// teken lijn naar volgende punt
			var j = i+1;
			if( j>=this.points.length ) {
				j=0;
			}
			
		//this.cv2d.strokeStyle = "black";
/*			this.cv2d.beginPath();
			this.cv2d.moveTo( this.points[i].x, this.points[i].y );
			this.cv2d.lineWidth = 2;
			this.cv2d.lineTo(this.points[j].x, this.points[j].y);
			this.cv2d.stroke();
			
		this.cv2d.strokeStyle = "white";
*/		
			this.cv2d.beginPath();
			this.cv2d.moveTo( this.points[i].x, this.points[i].y );
			this.cv2d.lineWidth = 1;
			this.cv2d.lineTo(this.points[j].x, this.points[j].y);
			this.cv2d.stroke();
			
			this.cv2d.closePath();	
		}
	},

	setMarker: function( pointX, pointY ) {
		this.points.push( { x: pointX.toInt(), y: pointY.toInt() } );
	},

	drawBackground: function( ) {
		this.cv2d.drawImage(this.imgElement, 0, 0, this.width.toInt(), this.height.toInt());
	}
});