/*
Script: SlidingFontResizer.js
	Contains <SlidingFontResizer>

License:
	MIT-style license.

Copyright:
	copyright (c) 2008 Vashira Ravipanich, <http://vashira.com>
	
Version:
	0.1 alpha
	
Note:
	Built on top of an exelence mootools framework.
	Read more about mootools on http://mootools.net/
*/
 
 /*
Class: SlidingFontResizer
	Create a slider control which re-sizing font in target area
	
Arguments:
	element - the target element to be a slider
	options - see Options below
	
Options:
	minSize - the minimum font size (pixel)
	maxSize - the maximum font size (pixel)
	targetArea - the area which need to be controled font-size
	showValuePanel - does value panel show. default to false.
	
  */
 var SlidingFontResizer = new Class({
	options: {
		minSize: 10, 
		maxSize: 24,
		targetArea: document.body, 
		showValuePanel: false
	}, 
	
	initialize: function(el, options) {
		this.element = $(el);
		this.setOptions(options);
		
		// TODO: Main function
		this.initialValues();
		this.initialResizerControl();
	}, 
	
	initialValues: function() {
		// Obtain original font-size from target area
		this.originalSize = $(this.options.targetArea).getStyle('font-size').toInt(); 
		
		// Validate minimum/maximum size
		if(this.options.minSize > this.originalSize)
			this.options.minSize = this.originalSize;
		if(this.options.maxSize <= this.options.minSize)
			alert('maxSize must be greater than minSize'); // TODO: show friendly error message
		
		this.totalSteps = this.options.maxSize - this.options.minSize;
		this.originalStep = this.originalSize - this.options.minSize; // TODO: validate original > min
	}, 
	
	initialResizerControl: function() {
		// Prepare Area and Knob
		var sliderArea = new Element('div', {
			'class': 'SFRArea'
		});
		var sliderKnob = new Element('div', {
			'class': 'SFRKnob'
		});
		var knobImage = new Element('img', {
			'src': './images/slider_knob.gif'
		});

		// Replace this.element with resizer control
		knobImage.injectInside(sliderKnob);
		sliderKnob.injectInside(sliderArea);
		this.element.replaceWith(sliderArea);
		
		// Create resizer control
		var mainSlider = new Slider(sliderArea, sliderKnob, {
			steps: this.totalSteps,
			onComplete: this.onChangeSizeStep.bind(this)
		}).set(this.originalStep);
		
		// Create Value Panel
		if(this.options.showValuePanel) {
			this.valueArea = new Element('p', {
				'class': 'SFRValue'
			});
			this.valueArea.injectAfter(sliderArea);
		}
		
		// Persist sliderArea for further tooltip update
		this.sliderArea = sliderArea;
		
		// Update current status
		this.updateStatus(this.originalSize);
	}, 
	
	onChangeSizeStep: function(step) {
		var stepValue = step.toInt();
		if(this.originalStep == stepValue)
			return;
			
		var previousValue = this.options.minSize + this.originalStep;
		var currentValue = this.options.minSize + stepValue;
	
		var changeSizeFx = new Fx.Styles($(this.options.targetArea), {duration: 100, transition: Fx.Transitions.linear });
		changeSizeFx.start({
			'font-size': [previousValue, currentValue], 
			'opacity': [1, 0.5]
		});
		var changeOpacFx = new Fx.Style($(this.options.targetArea), 'opacity',{duration:500});
		changeOpacFx.start(0.5, 1);

		// Update value area
		this.updateStatus(currentValue);
		
		// Update previous value
		this.originalStep = stepValue; 
	}, 
	
	updateStatus: function(currentSize) {
		var status = 'Current Size: ' + currentSize + ' px';
		
		if(this.options.showValuePanel)
			this.valueArea.setHTML(status);
		
		this.sliderArea.setProperty('title', status);
	}
 });
 
 SlidingFontResizer.implement(new Options, new Events);