/*
Script: Size.js
	Contains the Size Class.

License:
	MIT-style license.

Copyright:
	copyright (c) Klaas Moerman, <http://www.klaasmoerman.be>
*/

/*
Class: Size
	A Mootools extension class to handle height and widths relative to the window, and to deal with percentages and pixels at the same time.

Arguments:
	Element elements -  the id of the element, or the element itself.
	Object size - The relative width (x) and height (y) of the element (in percentages).
	Object options - Optional, see Options below.

Options:
	boolean track - Reapply on resize or not. True by default.
	Object diff - Values to substract form the relative width (x) and height (y) (in px).
	Object min - The minimum width (x) and height (y) (in px).
	Object max - The maximum width (x) and height (y) (in px).

Example:
	>new Size('container', {x: 90, y: 80}, {diff: {x: 5, y: 10}, min: {x: 200, y: 400});
	
	Resizes the 'container' element. Width: 90%-5px, with a minimum of 200px. Height: 80%-10px, with a minimum of 400px.
*/

var Size = new Class({
	
	options: {
		track: true,
		diff: {x: 0, y: 0},
		min: {x: 0, y: 0},
		max: {x: -1, y: -1}
	},
	
	initialize: function(el,size,options) {
		this.el = $(el);
		this.size = size;
		this.setOptions(options);
		this.set();
		if (this.options.track) this.track();
	},
	
	set: function() {
		if ($chk(this.size.x)) {
			var width = Math.max(this.size.x / 100 * window.getWidth() - this.options.diff.x, this.options.min.x);
			if(this.options.max.x != -1) width = Math.min(width, this.max.x);
			this.el.setStyle('width', width);
		}
		
		if ($chk(this.size.y)) {
			var height = Math.max(this.size.y / 100 * window.getHeight() - this.options.diff.y, this.options.min.y);
			if(this.options.max.y != -1) height = Math.min(height, this.max.y);
			this.el.setStyle('height', height);
		}
	},
	
	track: function() {
		window.addEvent('resize', this.set.bind(this));
	}
	
});

Size.implement(new Options);

/*
Class: Element
	Custom class to allow all of its methods to be used with any DOM element via the dollar function <http://docs.mootools.net/Native/Element.js#$>. See Mootools' Element Class <http://docs.mootools.net/Native/Element.js>.
*/

Element.extend({
	
	/*
	Property: size
		Applies a <Size> to the Element and sets the Element as the container; This is a shortcut for <Size>.
	
	Arguments:
		Object size - The relative width (x) and height (y) of the element (in percentages).
		Object options - Optional, see Options below.

	Options:
		boolean track - Reapply on resize or not. True by default.
		Object diff - Values to substract form the relative width (x) and height (y) (in px).
		Object min - The minimum width (x) and height (y) (in px).
		Object max - The maximum width (x) and height (y) (in px).

	Example:
		>$('container).size({x: 90, y: 80}, {diff: {x: 5, y: 10}, min: {x: 200, y: 400});

		Resizes the 'container' element. Width: 90%-5px, with a minimum of 200px. Height: 80%-10px, with a minimum of 400px.
	*/
	
	size: function(size, options) {
		return new Size(this, size, options);
	}

});