/**
 * klasse waarmee afbeeldingen afgeronde hoekjes kunnen krijgen
 *
 * vereisten:
 * - afbeelding moet in een relatief gepositioneerd element staan
 * - afbeelding moet class="rounded" hebben
 * - de achtergrond moet een egale kleur hebben aangezien er plaatjes gebruikt worden om de rondingen te maken
 */
var RoundedCorners = new Class({

	Implements: [Options, Events],

	/**
	 * opties
	 */
	options: {
		'templateFolder': '',		//pad naar template map
		'radius': '5'
	},

	/**
	 * cart object initialiseren
	 */
	initialize: function(options)
	{
		//opties instellen
		this.setOptions(options);

		$$('.rounded').each(function(el){
			this.roundCorners(el);
		}, this);

	},

	roundCorners: function(el)
	{
		//positie van afbeelding bepalen
		var imagePosition = el.getCoordinates(el.getOffsetParent());

		//grootte van de afbeelding ophalen
		var imageSize = el.getSize();

		//links boven
		new Element('div').setStyles({
			'background-image': 'url(' + this.options.templateFolder + 'images/rounded_corners.png)',
			'background-repeat': 'no-repeat',
			'background-position': ' top left',
			'width': this.options.radius + 'px',
			'height': this.options.radius + 'px',
			'position': 'absolute',
			'z-index': '2'
		}).inject(el, 'before').setPosition({x: imagePosition['left'], y: imagePosition['top']});

		//rechts boven
		new Element('div').setStyles({
			'background-image': 'url(' + this.options.templateFolder + 'images/rounded_corners.png)',
			'background-repeat': 'no-repeat',
			'background-position': ' top right',
			'width': this.options.radius + 'px',
			'height': this.options.radius + 'px',
			'position': 'absolute',
			'z-index': '2'
		}).inject(el, 'before').setPosition({x: imagePosition['left'] + imageSize.x - this.options.radius, y: imagePosition['top']});

		//links onder
		new Element('div').setStyles({
			'background-image': 'url(' + this.options.templateFolder + 'images/rounded_corners.png)',
			'background-repeat': 'no-repeat',
			'background-position': ' bottom left',
			'width': this.options.radius + 'px', //configutabel maken
			'height': this.options.radius + 'px', //configurabel maken
			'position': 'absolute',
			'z-index': '2'
		}).inject(el, 'before').setPosition({x: imagePosition['left'], y: imagePosition['top'] +  imageSize.y - this.options.radius});

		//rechts onder
		new Element('div').setStyles({
			'background-image': 'url(' + this.options.templateFolder + 'images/rounded_corners.png)',
			'background-repeat': 'no-repeat',
			'background-position': ' bottom right',
			'width': this.options.radius + 'px', //configutabel maken
			'height': this.options.radius + 'px', //configurabel maken
			'position': 'absolute',
			'z-index': '2'
		}).inject(el, 'before').setPosition({x: imagePosition['left'] + imageSize.x - this.options.radius, y: imagePosition['top'] +  imageSize.y - this.options.radius});
	}
});
window.addEvent('domready', function(){

	var rounded = new RoundedCorners({
		'templateFolder': templateFolder
	});
});