/*
Script: PBBDock.js
	Contains <PBBDatePicker>

Author:
	Pokemon_JOJO, <http://www.mibhouse.org/pokemon_jojo>

License:
	MIT-style license.

*/

/*
Class: PBBDock
	A tiny but strong "mac" dock menu

Arguments:
	options - see Options below

Options:
	opacity - opacity of the dock
	size - the size of icons. an Object with min/max properties.
	moveDuration - duration of the dock transition when scrolling (defaults to 500 ms)
	moveEffect - transitions, to be used when moving

*/
var PBBDock = new Class({

	options: {
		opacity: 0.9,
		size: {'min': 32, 'max': 128},
		moveDuration: 500,
		moveEffect: Fx.Transitions.backOut
	},

	initialize: function(dock, options){
		this.setOptions(options);
		
		// The Dock Div
		this.dock = dock;
		this.dock.setStyles({
			'position': 'absolute',
			'z-index': 10000,
			'left': 0,
			'bottom': -window.getSize().scroll.y,
			'opacity': this.options.opacity,
			'display': 'inline',
			'white-space': 'nowrap'		
		})
		.addEvent('mouseleave', function() {
			this.perodical = null;
		}.bind(this));
		// The Legend
		this.legend = new Element('div', {
			'class': 'dock-legend',
			'styles': {
                        'position': 'absolute',
                        'text-align': 'center'		
			}
		}).injectAfter(this.dock);
		// All icons
		this.icons = $ES('img',this.dock);
		this.icons.each(function(el){
			el.setStyles({
			   width: this.options.size.min,
			   height: this.options.size.min,
			   opacity: 0.7
			})
			.addClass('dock-icon')
			.addEvent('mouseenter', function() {
				el.setStyle('opacity', 1);				
			}.bind(this))
			.addEvent('mouseout', function() {
				el.setStyle('opacity', 0.7);
			}.bind(this));
		}.bind(this));
		this.iconSize = this.options.size.min;

		// Windows Event
		window.addEvent('mousemove', function(el) {			
			this.mouseX = new Event(el).client.x;
			this.iconOver = (el.target) ? el.target : ((el.srcElement) ? el.srcElement : null);
			if(!this.perodical && this.iconOver)
				this.perodical = this.resize.periodical(20,this);
		}.bind(this))
		addEvent('scroll', this.move.bind(this));
	},

	resize: function(){
		var coordIcon = this.iconOver.getCoordinates();
		var coordLegend = this.legend.getCoordinates();
		this.legend.setStyles({
			top: coordIcon.top - coordLegend.height,
			left: coordIcon.left + coordIcon.width / 2 - coordLegend.width / 2
		});
		
		this.icons.each(function(icon){
			if(this.iconOver && this.iconOver.getProperty('class') == 'dock-icon') {
				this.iconSizeNew = Math.max((this.iconSize*Math.cos(((icon.getLeft() + icon.getStyle('width').toInt()/2) - this.mouseX) / this.options.size.max)),this.options.size.min);
				this.iconSize = Math.min(this.options.size.max,this.iconSize + 1);
			}
			else {
				this.iconSizeNew = Math.max(icon.getStyle('width').toInt() - this.icons.length,this.options.size.min);
				this.iconSize = Math.max(this.iconSize - 1,this.options.size.min);
			}
			icon.setStyles({
				width: this.iconSizeNew,
				height: this.iconSizeNew
			});
		}.bind(this));

		if(this.iconOver && this.iconOver.getProperty('class') == 'dock-icon')
			this.legend.setHTML(this.iconOver.getProperty('alt')).setStyle('opacity', 1);
		else
			this.legend.setStyle('opacity', 0);
	},
	
	move: function() {
		if(this.MoveDock)
			this.MoveDock.stop();			
		this.MoveDock = this.dock.effects({
			duration: this.options.moveDuration,
			transition: this.options.moveEffect
		}).start({
			'bottom': -window.getSize().scroll.y
		});
	}
});
PBBDock.implement(new Events, new Options);