

/**************************************************************

	Script		: Rounded Corners
	Version		: 2.0
	Authors		: Samuel Birch
	Desc		: Image based rounded corners for divs and images
	Licence		: Open Source MIT Licence

**************************************************************/

var RoundedCorners = new Class({
							  
	getOptions: function(){
		return {
			radius: 20,
			cls: 'box',
			overlay: false,
			bottomCorner: 20,
			bottomCornerWidth: 20,
			bottomCornerHeight: 20,
			topCorner: 20,
			topCornerWidth: 20,
			topCornerHeight: 20
		};
	},

    setOptionsValue: function(name, parent, options) {
        if (options[name] == undefined) { 
	        if (options[parent]) {
	            options[name] = options[parent];
	        } else if (options['radius']) {
	            options[name]= options['radius'];
	        }
	    }
    },

	initialize: function(className, options){
	    //Backward compatibility.
	    this.setOptionsValue('topCornerWidth','topCorner', options);
	    this.setOptionsValue('topCornerHeight','topCorner', options);
	    this.setOptionsValue('bottomCornerWidth','bottomCorner', options);
	    this.setOptionsValue('bottomCornerHeight','bottomCorner', options);
	    
		this.setOptions(this.getOptions(), options);
		
		this.boxes = $$(className);
		
		this.boxes.each(function(el){
				this.setup(el);
		}, this);
		
		
	},
	
	setup: function(el){
		
		var container = new Element('div').setStyles({
			position: 'relative',
			width: el.getStyle('width').toInt()+el.getStyle('paddingLeft').toInt()+el.getStyle('paddingRight').toInt()+'px',
			height: el.getStyle('height').toInt()+el.getStyle('paddingTop').toInt()+el.getStyle('paddingBottom').toInt()+'px',
			margin: el.getStyle('margin')
		}).injectBefore(el).adopt(el);
		
		el.setStyles({
			position: 'absolute',
			top: '0px',
			left: '0px',
			margin: '0px',
			border: 'none',
			background: 'none',
			zIndex: 2
		});
		
		var cornerContainer = new Element('div').setStyles({
			position: 'absolute',
			top: '0px',
			left: '0px',
			zIndex: 1
		}).injectAfter(el);
		
		if(this.options.overlay){
			cornerContainer.setStyle('zIndex', 3);
		}
		
		var num = 0;
		
		//top
		var topLeft = new Element('div').addClass(this.options.cls+'TopLeft').addClass(this.options.cls+'Float').setStyles({
			width: this.options.topCornerWidth+'px',
			height: this.options.topCornerHeight+'px'
		}).injectInside(cornerContainer);
		
		var top = new Element('div').addClass(this.options.cls+'Top').addClass(this.options.cls+'Float').setStyles({
			width: container.getStyle('width').toInt()-(this.options.topCornerWidth*2)+'px'
		}).injectInside(cornerContainer);
		top.setStyle('height', (this.options.topCornerHeight-top.getStyle('borderTopWidth').toInt())+'px');
		
		var topRight = new Element('div').addClass(this.options.cls+'TopRight').addClass(this.options.cls+'Float').setStyles({
			width: this.options.topCornerWidth+'px',
			height: this.options.topCornerHeight+'px'
		}).injectInside(cornerContainer);
		
		//middle
		num = container.getStyle('height').toInt()-(this.options.topCornerHeight+this.options.bottomCornerHeight);
		if(num < 0){num=0}
		
		var middleLeft = new Element('div').addClass(this.options.cls+'MiddleLeft').addClass(this.options.cls+'Float').setStyles({
			height: num+'px'
		}).injectInside(cornerContainer);
		middleLeft.setStyle('width', (this.options.topCornerWidth-middleLeft.getStyle('borderLeftWidth').toInt())+'px');
		
		var middle = new Element('div').addClass(this.options.cls+'Middle').addClass(this.options.cls+'Float').setStyles({
			width: container.getStyle('width').toInt()-(this.options.topCornerWidth+this.options.bottomCornerWidth)+'px',
			height: num+'px'
		}).injectInside(cornerContainer);
		
		var middleRight = new Element('div').addClass(this.options.cls+'MiddleRight').addClass(this.options.cls+'Float').setStyles({
			height: num+'px'
		}).injectInside(cornerContainer);
		middleRight.setStyle('width', (this.options.radius-middleRight.getStyle('borderRightWidth').toInt())+'px');
		
		//bottom
		var bottomLeft = new Element('div').addClass(this.options.cls+'BottomLeft').addClass(this.options.cls+'Float').setStyles({
			width: this.options.bottomCornerWidth+'px',
			height: this.options.bottomCornerHeight+'px'
		}).injectInside(cornerContainer);
		
		var bottom = new Element('div').addClass(this.options.cls+'Bottom').addClass(this.options.cls+'Float').setStyles({
			width: container.getStyle('width').toInt()-(this.options.bottomCornerWidth*2)+'px'
		}).injectInside(cornerContainer);
		bottom.setStyle('height', (this.options.bottomCornerHeight-bottom.getStyle('borderBottomWidth').toInt())+'px');
		
		var bottomRight = new Element('div').addClass(this.options.cls+'BottomRight').addClass(this.options.cls+'Float').setStyles({
			width: this.options.bottomCornerWidth+'px',
			height: this.options.bottomCornerHeight+'px'
		}).injectInside(cornerContainer);
		
	},
	
	resize: function(){
		
		this.boxes.each(function(el){
			var par = el.getParent();
			par.setStyle('height', el.getStyle('height').toInt()+el.getStyle('paddingTop').toInt()+el.getStyle('paddingBottom').toInt()+'px');

			var num = par.getStyle('height').toInt()-(this.options.radius*2);
			if(num < 0){num=0}
			
			var els = el.getNext().getElements('div');
			
			els[3].setStyle('height',num+'px');
			els[4].setStyle('height',num+'px');
			els[5].setStyle('height',num+'px');
		}, this);

	}

});

RoundedCorners.implement(new Events);
RoundedCorners.implement(new Options);

/*************************************************************/

