/*
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: 200
		},
		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.get('fontSize')) ? Cookie.get('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.set('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());

var contentFont;
window.addEvent('domready', function() {
	// initialize font class and set up change events
	contentFont = new Font($('content'), [11, 12, 14], {cookie: {path: '/', duration: 365}});
	$('decreaseFontSize').addEvent('click', function(){
		contentFont.decrease();
	});
	$('increaseFontSize').addEvent('click', function(){
		contentFont.increase();
	});
});