/**
 * klasse waarmee afbeeldingen afgeronde hoekjes krijgen
 *
 * [Prototype versie 1.6]
 *
 * vereisten:
 * - afbeelding moet in een relatief gepositioneerd element staan
 * - de achtergrond moet bij voorkeur een egale kleur hebben aangezien er plaatjes gebruikt worden om de rondingen te maken
 */
var RoundedCorners = Class.create(UI.Options, Element, {

	/**
	 * opties
	 */
	options: {
		'image': '',				//pad naar afbeelding met afgeronde hoekjes
		'radius': '5',				//gewenste radius van de hoek
		'targetClass': 'rounded'	//css class waarmee aangegeven wordt welke afbeeldingen afgerond moeten worden
	},

	/**
	 * rounded object instantiëren
	 */
	initialize: function(options)
	{
		//opties instellen
		this.setOptions(options);

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

	/**
	 * hoeken afronden
	 *
	 * @param el			afbeelding welke afgerond moet worden
	 */
	roundCorners: function(el)
	{
		//positie van afbeelding bepalen
		//var imagePosition = el.getCoordinates(el.getOffsetParent());
		var imagePosition = el.positionedOffset(el.getOffsetParent());
		
		//grootte van de afbeelding ophalen
		//var imageSize = el.getDimensions();
		var imageWidth = el.getWidth();
		var imageHeight = el.getHeight();

		//links boven
		var leftTop = new Element('div').setStyle({
			'background': 'url(' + this.options.image + ') no-repeat top left',
			'width': this.options.radius + 'px',
			'height': this.options.radius + 'px',
			'position': 'absolute',
			'z-index': '2',
			'top': imagePosition.top + 'px',
			'left': imagePosition.left + 'px'
		});
		Element.insert(el, {'before': leftTop});

		//rechts boven
		var rightTop = new Element('div').setStyle({
			'background': 'url(' + this.options.image + ') no-repeat top right',
			'width': this.options.radius + 'px',
			'height': this.options.radius + 'px',
			'position': 'absolute',
			'z-index': '2',
			'top': imagePosition.top + 'px',
			'left': imagePosition.left + imageWidth - this.options.radius + 'px'
		});
		Element.insert(el, {'before': rightTop});

		//links onder
		var leftBottom = new Element('div').setStyle({
			'background': 'url(' + this.options.image + ') no-repeat bottom left',
			'width': this.options.radius + 'px',
			'height': this.options.radius + 'px',
			'position': 'absolute',
			'z-index': '2',
			'top': imagePosition.top +  imageHeight - this.options.radius + 'px',
			'left': imagePosition.left + 'px'
		});
		Element.insert(el, {'before': leftBottom});

		//rechts onder
		var rightBottom = new Element('div').setStyle({
			'background': 'url(' + this.options.image + ') no-repeat bottom right',
			'width': this.options.radius + 'px',
			'height': this.options.radius + 'px',
			'position': 'absolute',
			'z-index': '2',
			'top': imagePosition.top +  imageHeight - this.options.radius + 'px',
			'left': imagePosition.left + imageWidth - this.options.radius + 'px'
		});
		Element.insert(el, {'before':rightBottom});
	}
});
Event.observe(window, 'load', function() {
	var rounded = new RoundedCorners({
		'radius': '4',
		'image': '/images/corner_4px.png',
		'targetClass': 'rounded'
	});
});