/*	==========================================================

	Class: 		Fader - For the product listing page
	Use:		Performs operations on the product grid
	Version:	v1
	By:			Dave Calvert

	Params: 	dimensions, should be an array of objects
				for example:
				
				{ 
					open: { 
								width:'100px', 
								height:'200px' 
							}, 
					closed: { 
								width:'10px', 
								height:'10px' 
							} 
				}

========================================================	*/

var imageGalleryNavigation = Class.create();
imageGalleryNavigation.prototype = {
	
	initialize: function (dimensions) {
	
		if ( dimensions == '' || dimensions == 'undefined' ) {
			
			alert('imageGalleryNavigation has no dimensions!');
			return false;
			
		} else {
			
			this.dimensions = dimensions;
			
			if ( $('gallery-navigation') ) {
			
				
				new Effect.Parallel(
				[ 
					new Effect.Morph($('gallery-navigation-start'), { style:'height:'+this.dimensions.closed.height, sync: true }),
					new Effect.Morph($('gallery-navigation-container'),	{ style: 'width:'+this.dimensions.closed.width, sync: true }),
					new Effect.Morph($('gallery-navigation-end'), { style:'height:'+this.dimensions.closed.height, sync: true })
//					new Effect.Morph($('gallery-navigation-container'), { style:'height:'+this.dimensions.closed.height, sync: true }) 
				],
				{ duration: 0.5, queue: {scope: 'image-gallery-nav', position: 'start'}, afterFinish:this.setup() });
			
				// Set the initial size
//				new Effect.Grow( $('gallery-navigation-container'),	{ 	duration:0.5, direction:'top-left',  ); 
				
			} else {
				
				return false;	
			
			}
			
		}
	
		
	
	},
	
	shrinkEnd: function() {
	},
	
	setup: function (k,v) {

		$('gallery-navigation-container').setStyle('overflow:hidden');
		
		this.setPagination();
		// Attach observers
		Event.observe($('gallery-navigation-container'),'mouseenter',this.open.bindAsEventListener(this));
		Event.observe($('gallery-navigation-container'),'mouseleave',this.close.bindAsEventListener(this));
		Event.observe($('paginationPrevButton'),'click',this.triggerSlide.bindAsEventListener(this));
		Event.observe($('paginationNextButton'),'click',this.triggerSlide.bindAsEventListener(this));		
		
	},
	
	setPagination: function() {
		$('paginationPrevButton').fade({ from: 1, to: 0.1, duration: 0.5 });
		if(parseInt($('gallery-navigation-scroller').getStyle('left')) > 0) {
			$('paginationPrevButton').appear({ duration: 0.5, from: 0.1, to: 1 });
		}
		
		if(parseInt($('gallery-navigation-scroller').getStyle('left')) <= -70) {
			$('paginationNextButton').fade({ duration: 0.5, from: 1, to: 0.1 });
		}
	},
	
	catchClick: function(k) {
		Event.stop(k);
	},
	
	
	
	triggerSlide: function(k) {
		
		var id = Event.element(k).identify();
		if(id != "paginationPrevButton" && id != "paginationNextButton") {
			var element = $(id).up(0);
		} else {
			var element = $(id);	
		}
		
		if(element.identify() == "paginationPrevButton") {
			new Effect.Move($('gallery-navigation-scroller'), { x: 70, y: 0, mode: 'relative', queue: {scope: 'image-gallery-slide', position: 'front'},
				beforeStart: function() {
					if((parseInt($('gallery-navigation-scroller').getStyle('left')) + 70) <= -70) {
						Event.stopObserving($('paginationNextButton'));
						Event.stopObserving($('paginationPrevButton'));
						Event.observe($('paginationNextButton'),'click',this.catchClick.bindAsEventListener(this));
						Event.observe($('paginationPrevButton'),'click',this.triggerSlide.bindAsEventListener(this));
					}
					if((parseInt($('gallery-navigation-scroller').getStyle('left')) + 70) >= 0) {
						Event.stopObserving($('paginationNextButton'));
						Event.stopObserving($('paginationPrevButton'));
						Event.observe($('paginationPrevButton'),'click',this.catchClick.bindAsEventListener(this));
						Event.observe($('paginationNextButton'),'click',this.triggerSlide.bindAsEventListener(this));
					}
				}.bind(this),
				afterFinish: function() {
					if(parseInt($('gallery-navigation-scroller').getStyle('left')) <= -70) {
							$('paginationNextButton').fade({ from: 1, to: 0.1, duration: 0.5 });
							$('paginationPrevButton').appear({ from: 0.1, to: 1, duration: 0.5 });
					}
					
					if(parseInt($('gallery-navigation-scroller').getStyle('left')) >= 0) {
							$('paginationPrevButton').fade({ from: 1, to: 0.1, duration: 0.5 });
							$('paginationNextButton').appear({ from: 0.1, to: 1, duration: 0.5 });
					}
				}.bind(this)
			});
		}
		
		if(element.identify() == "paginationNextButton") {
			new Effect.Move($('gallery-navigation-scroller'), { x: -70, y: 0, mode: 'relative', queue: {scope: 'image-gallery-slide', position: 'front'},
				beforeStart: function() {
						if((parseInt($('gallery-navigation-scroller').getStyle('left')) + -70) <= -70) {
							Event.stopObserving($('paginationNextButton'));
							Event.stopObserving($('paginationPrevButton'));
							Event.observe($('paginationNextButton'),'click',this.catchClick.bindAsEventListener(this));
							Event.observe($('paginationPrevButton'),'click',this.triggerSlide.bindAsEventListener(this));
						}
						if((parseInt($('gallery-navigation-scroller').getStyle('left')) + -70) >= 0) {
							Event.stopObserving($('paginationNextButton'));
							Event.stopObserving($('paginationPrevButton'));
							Event.observe($('paginationNextButton'),'click',this.catchClick.bindAsEventListener(this));
							Event.observe($('paginationPrevButton'),'click',this.triggerSlide.bindAsEventListener(this));
						}
				}.bind(this),
				afterFinish: function() {
					if(parseInt($('gallery-navigation-scroller').getStyle('left')) <= -70) {
							$('paginationNextButton').fade({ from: 1, to: 0.1, duration: 0.5 });
							$('paginationPrevButton').appear({ from: 0.1, to: 1, duration: 0.5 });
					}
					
					if(parseInt($('gallery-navigation-scroller').getStyle('left')) >= 0) {
							$('paginationPrevButton').fade({ from: 1, to: 0.1, duration: 0.5 });
							
							$('paginationNextButton').appear({ from: 0.1, to: 1, duration: 0.5 });
					}
				}.bind(this)
			});
		}
	},
	
	stopSlide: function() {
		
	},
	
	open: function () {
		
		this.emptyQueue('image-gallery-nav');
		
		/*new Effect.Morph($('gallery-navigation-container'), 
				{ 	style:'height:'+this.dimensions.open.height,
					afterFinish:this._open_width(),
					duration:0.5, 
					beforeStart:this.growEnd(),
					queue:{scope:'image-gallery-nav', position:'front'}
				} );/**/
		
		
		
		new Effect.Parallel(
 		[ 
			new Effect.Morph($('gallery-navigation-start'), { style:'height:'+this.dimensions.open.height, sync: true }),
			new Effect.Morph($('gallery-navigation-end'), { style:'height:'+this.dimensions.open.height, sync: true }),
			new Effect.Morph($('gallery-navigation-container'), { style:'height:'+this.dimensions.open.height, sync: true }) 
 		], 
		{ duration: 0.5, afterFinish: this._open_width(), queue: {scope: 'image-gallery-nav', position: 'front'} });
		
	},
	
	_open_width: function () {
		
		this.emptyQueue('image-gallery-nav');
		
		new Effect.Morph($('gallery-navigation-container'),{ style:'width:'+this.dimensions.open.width, duration:0.5, queue:{scope:'image-gallery-nav', position: 'end'},
			afterFinish: function() {		   
				if($$('#gallery-navigation-scroller div').length >= 6) {
					$('gallery-navigation-container').addClassName('show');
				}
			}
		});
		
	},
	
	close: function () {
		
		this.emptyQueue('image-gallery-nav');
		
		new Effect.Morph($('gallery-navigation-container'), 
				{ 	style:'width:'+this.dimensions.closed.width,
					afterFinish:this._close_width(),
					duration:0.5, 
					queue:{scope:'image-gallery-nav', position:'front'}
				} );
		
	},
	
	_close_width: function () {
		
		this.emptyQueue('image-gallery-nav');
		
		new Effect.Parallel(
 		[ 
			new Effect.Morph($('gallery-navigation-start'), { style:'height:'+this.dimensions.closed.height, sync: true }),
			new Effect.Morph($('gallery-navigation-end'), { style:'height:'+this.dimensions.closed.height, sync: true }),
			new Effect.Morph($('gallery-navigation-container'), { style:'height:'+this.dimensions.closed.height, sync: true }) 
 		], 
		{ duration: 0.5, queue: {scope: 'image-gallery-nav', position: 'end'}, beforeStart: function() { $('gallery-navigation-container').removeClassName('show'); } });
	
	},
	
	emptyQueue: function (queueName) {
	
		Effect.Queues.get(queueName).invoke('cancel');
	
	},
	
	getElementFromEvent: function (evt) {
		
		return Event.element(evt);
		
	},
	
	setQueueName: function (str) {
	
		return str.toString();
	
	}
	
};