/**
Script: Slideshow.Push.Dock.js
	Slideshow.Dock - Push extension with auto hiding thumbnails for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
Dependencies:
	Slideshow.
	Mootools 1.2 More: Fx.Elements.
*/

Slideshow.Dock = new Class({
	Extends: Slideshow,
	
/**
Constructor: initialize
	Creates an instance of the Slideshow class.

Arguments:
	element - (element) The wrapper element.
	data - (array or object) The images and optional thumbnails, captions and links for the show.
	options - (object) The options below.

Syntax:
	var myShow = new Slideshow.Dock(element, data, options);
*/
	initialize: function(el, data, options){	
		options.overlap = true;		
		options.replace = [/(\.[^\.]+)$/, '$1'];
		this.parent(el, data, options);
		this._thumbnailsStyles();
		this._dock();
		this._redefineMousemoveZone();	
	},
	
/**
Private method: show
	Does the slideshow effect.
*/
	_show: function(fast){
		var images = [this.image, ((this.counter % 2) ? this.a : this.b)];
		if (!this.image.retrieve('fx'))
			this.image.store('fx', new Fx.Elements(images, {'duration': this.options.duration, 'link': 'cancel', 'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'transition': this.options.transition }));
		this.image.set('styles', {'left': 'auto', 'right': 'auto' }).setStyle(this.direction, this.width);
		var values = {'0': {}, '1': {} };
		values['0'][this.direction] = [this.width, 0];
		values['1'][this.direction] = [0, -this.width];
		if (images[1].getStyle(this.direction) == 'auto'){
			var width = this.width - images[1].width;	
			images[1].set('styles', {'left': 'auto', 'right': 'auto' }).setStyle(this.direction, width);		 
			values['1'][this.direction] = [width, -this.width];
		}
		if (fast){
		 	for (var prop in values)
		 		values[prop][this.direction] = values[prop][this.direction][1];			
			this.image.retrieve('fx').cancel().set(values);
		} 
		else
			this.image.retrieve('fx').start(values);
	},
	
/**
Private method: thumbnails
	Builds the optional thumbnails element, adds interactivity.
	This method can safely be removed if the thumbnails option is not enabled.
*/
	_thumbnailsStyles: function(){
		if (this.slideshow.retrieve('thumbnails'))
		{
			this.slideshow.retrieve('thumbnails').getElements('ul li a img').each(function(img, i){
				img.setStyles(this.options.thumbsStyles)
			}.bind(this));
		}
	},

/**
Private method: redefineControllerZone
	Redefine the mousemove event for the controller apparition
*/	
	_redefineMousemoveZone: function() 
	{
		var mousemove = function(e){
			if (this.slideshow.retrieve('controller'))
			{
				// Controller
				var controller = this.slideshow.retrieve('controller').getCoordinates();
				if (e.client.x > controller.left && e.client.x < controller.right && e.client.y > controller.top && e.client.y < controller.bottom)
					this.slideshow.retrieve('controller').fireEvent('show');
				else
					this.slideshow.retrieve('controller').fireEvent('hide');
			}
			if (this.slideshow.retrieve('dockWrapper'))
			{
				// Dock
				var dockWrapper = this.slideshow.retrieve('dockWrapper').getCoordinates();
				if (e.client.x > dockWrapper.left && e.client.x < dockWrapper.right && e.client.y > dockWrapper.top && e.client.y < dockWrapper.bottom)
					this.slideshow.retrieve('dockWrapper').fireEvent('show');
				else
					this.slideshow.retrieve('dockWrapper').fireEvent('hide');
			}
		}.bind(this);
		this.events.mousemove.push(mousemove);
		document.addEvents({'mousemove': mousemove});
	},	

/**
Private method: show
	Does the slideshow effect.
*/
	_dock: function(){
		this.timeoutID = null;
		this.classes.dockWrapper = 'dockWrapper';
		if (this.options.thumbnails && this.slideshow.retrieve('thumbnails'))
		{
			var thumbnails = this.slideshow.retrieve('thumbnails');
			var dockWrapper = new Element('div', {id: 'dockWrapper'});
			var dockheight = this.options.thumbsStyles.height + 10 + this.options.dockOpenMarginTop;
			dockWrapper.setStyles({'width': this.width, 'height': dockheight, 'top': this.height-dockheight});
			dockWrapper.wraps(thumbnails);	
			this.slideshow.store('dockWrapper', dockWrapper);
			// Tween
			var dock = new Fx.Tween(thumbnails, { duration: this.options.dockDuration, transition:Fx.Transitions.Quad.easeOut });
			dock.set('margin-top', dockWrapper.getStyle('height').toInt());
			// Functions
			var showThumbnails = function(){
				dock.start("margin-top", (this.options.dockOpenMarginTop ? this.options.dockOpenMarginTop : 0));
			}.bind(this);
			var hideThumbnails = function(){
				dock.start("margin-top", dockWrapper.getStyle('height').toInt());
			}.bind(this);
			// Initialize to close
			dockWrapper.addEvent('show', showThumbnails);
			dockWrapper.addEvent('hide', hideThumbnails);
		}
	}

});