/*

Script: Font.js

	Contains a class for manipulating font sizes



License:

	MIT-style license.



Author:

	Adam Fisher

*/



/*

Class: Font

	Class to manipulate Font sizes. Inherits properties from both Fx.Style and Cookie



Arguments:

	els - the element(s) to apply the font change to. (can be a single element, 'myElement', $('myElement') or an array of elements eg. [$('element1'), $('element2')] or $$(a))

	sizes - an array of possible sizes for the font (integers). eg [11, 14, 18]

	options - object of options for the Font class



Options:

	useCookie - specify whether or not the class should save a cookie containing the users preference; true by default

	cookie - object of options for the Cookie. Inherits from Cookie.js

	start - index of the sizes array that should be used when the page loads (the default font size); cookie value will take higher precedent; defaults to 1

	fx - object containing options for the transition. Inherits from Fx.Base



Example:

	var contentChange = new Font('myElement', [11, 14, 18], {useCookie: false, fx: {wait: false}});

	contentChange.increase();//will change the font size of myElement to the next size up in the sizes array



Notes:

	units - The transition uses units of px by default, but em or pt can be used by specifying eg. fx: {unit: 'pt'} in the options argument

	

Limitations:

	At present, the script supports only 1 instance of the font class with cookies enabled. If you want more than one element to have a font change applied with cookie functionality, then you must apply a single instance to multiple elements



Dependancies:

	MooTools V1.1+ (preferably V1.11+)

	

	Modules:

		- Elements.js

		- Cookie.js

		with their dependancies

		

		Additionally, you probably want to grab (optional)

		- Window.DomReady.js (to initialize Font class ondomready)

		- Element.Selectors.js (grab elements by CSS selectors to pass to the Font instance)

*/



var Font = new Class({

	options: {
		useCookie: true,
		start: 1,
		fx: {
			duration: 300,
			unit: 'pt'
		},
		cookie: {
			path: '/',
			duration: 365
		}
	},

	initialize: function(els, sizes, options){

		this.setOptions(options);

		function sortArray(a, b){return a - b;}

		this.els = $(els) ? [$(els)] : $$(els);

		this.sizes = sizes.sort(sortArray);

		this.current = (this.options.useCookie && Cookie.read('fontSize')) ? Cookie.read('fontSize').toInt() : this.options.start;

		this.fx = new Fx.Elements(this.els, this.options.fx);

		this.fx.set(this.makeObj());

	},



	/*

	Property: change

		changes the current index of the sizes array and transitions to the new size (used internally)

	

	Arguments:

		by - integer, current index of sizes array is changed by this amount, and font size is transitioned to new value if it exists



	Example:

		(start code)

		var fontChange = new Font([$('myElement'), $('anotherElement')], [11, 14, 18, 21]);

		fontChange.change(-2); //steps down font size of 'myElement' and 'anotherElement' by 2 in the sizes array

		(end)

	*/



	change: function(by){

		if (!this.sizes[this.current + by] || this.fx.timer){return;}

		this.current = this.current + by;

		this.fx.start(this.makeObj());

		if (this.options.useCookie) {Cookie.write('fontSize', this.current, this.options.cookie);}

	},



	/*

	Property: increase

		Increases the font size by one 'step' (as specified in the sizes array)



	Example:

		(start code)

		var fontChange = new Font('myElement', [11, 14, 18, 21]);

		fontChange.increase(); //steps up font size of 'myElement'

		(end)

	*/



	increase: function() {

		this.change(1);

	},



	/*

	Property: decrease

		See increase - decreases the font size by one 'step' (as specified in the sizes array)

	*/



	decrease: function() {

		this.change(-1);

	},



	/*

	Property: max

		transitions the font size to the maximum value in the array



	Example:

		(start code)

		var fontChange = new Font('myElement', [11, 14, 18, 21]);

		fontChange.max(); //steps up font size of 'myElement' to 21px (or other unit specified in options.fx)

		(end)

	*/



	max: function() {

		this.change((this.sizes.length - 1) - this.current);

	},



	/*

	Property: min

		See max - transitions the font size to the minimum value in the array

	*/



	min: function() {

		this.change(-this.current);

	},



	/*

	Property: set

		transitions the font size to a specified value in the array

	

	Arguments:

		value - the index of the value you would like to transition to



	Example:

		(start code)

		var fontChange = new Font('myElement', [11, 14, 18, 21]);

		fontChange.set(2); //transitions the font size of myElement to 18px

		(end)

	*/



	set: function(value) {

		this.change(value - this.current);

	},



	makeObj: function() {

		var o = {};

		this.els.each(function(el, i){

			o[i] = {fontSize: this.sizes[this.current]};

		}.bind(this));

		return o;

	}

});



Font.implement(new Options());