/*

ANDRES LEMONK:


--------------- INSTRUCTIONS ---------------


Files to change (if you need to)

1. slideshow.js >> Change the settings from line: 53 to line 65
2. lemonk_cs.css >> it commented and clear.
3. fotos.php >> List of images , change it depending of what you need


--------------- ADVANCE ---------------

Lemonk made some changes in order to leave the thumbnails limit and the way it behavies updatable on reize on the screen.


On MooTools we used the variables on two ways, in order to be accessible when we need them.


GLOBALLY
Globally you can use this.options.lemonk_window_size; eich is a variable declare when we create at te beggining the mooSizer, when the "domready EVENT" is fire.
var myShow = new mooSizer('supersize', data,{
		controller: true,
	
	
ON EVENTS
For the scroll event of the thumbs

thumbnails.set('events', {
'scroll': function(n, fast){

				
Inside the function that is going to run on the scroll event:
//thumbnails.store('lemonk_window_size', LemonkWidth);

Then we use it or bring it:
//thumbnails.retrieve('lemonk_window_size') 
	
*/


window.addEvent('domready', function(){
var myShow = new mooSizer('supersize', data,{
		
		
		hu: 'php/photos/', 							// Folder of the images
		hut: 'php/photos/thumbnails/', 							// Folder of the images		
		
		controller: false, 						// show controller: true 
		thumbnails: true, 						// show thumbnails: true
		
		//Proportion of the standart image size: width and height
		startwidth:9,
		startheight: 5.052631578947368,
		minsize: 0.5,	
		
		captions: false,							// Display captions = true, Hide captions = false
		delay: 5000, 							// Delay of the slideshow from one pic to another
		duration: 500, 							// Delay of the transition
		
		thumbs_position: 'vertical', 			// To change the thumbs direction > vertical or horizontal
		bgElemento: '',
		
		
		
		height_mask_percentage: 80,
		
		width_mask_percentage: 82,
		
		
		center: true,
		classes: [],
		
		fast: false,
		height: false,
		href: '',
		linked: false,
		loader: {'animate': ['css/loader-#.png', 12]},
		loop: true,
		match: /\?slide=(\d+)$/,
		overlap: true,
		paused: false,
		properties: ['href', 'rel', 'rev', 'title'],
		random: false,
		replace: [/(\.[^\.]+)$/, '$1'],
		resize: 'width',
		slide: 0,
		firs_time: 1, //By Andres Lemonk
		lemonk_window_size: 1112, // The system will read this variable automatically on resize. the star value its just a random number
		titles: true,
		transition: function(p){return -(Math.cos(Math.PI * p) - 1) / 2;}
		});
});



//fotos iniciales
var mooSizer = new Class({
	Implements: [Chain,Events, Options],
	


initialize: function(el, data, options){	




     this.setOptions(options); 
	this.slideshow = $(el);
		if (!this.slideshow) 
			return;
		this.slideshow.set('styles', {'display': 'block', 'position': 'relative', 'z-index': 0});
		var match = window.location.href.match(this.options.match);
		this.slide = (this.options.match && match) ? match[1].toInt() : this.options.slide;
		this.counter = this.delay = this.transition = 0;
		this.direction = 'left';
		this.paused = false;
		if (!this.options.overlap)
			this.options.duration *= 2;
		var anchor = this.slideshow.getElement('a') || new Element('a');
		if (!this.options.href)
			this.options.href = anchor.get('href') || '';
		if (this.options.hu.length && !this.options.hu.test(/\/$/)) 
			this.options.hu += '/';
		if (this.options.fast === true)
			this.options.fast = 2;
		// styles
		var keys = ['slideshow', 'first', 'prev', 'play', 'pause', 'next', 'last', 'images', 'captions', 'controller', 'thumbnails', 'hidden', 'visible', 'inactive', 'active', 'loader'];
		var values = keys.map(function(key, i){
			return this.options.classes[i] || key;
		}, this);
		this.classes = values.associate(keys);
		this.classes.get = function(){
			var str = '.' + this.slideshow;
			for (var i = 0, l = arguments.length; i < l; i++)
				str += ('-' + this[arguments[i]]);
			return str;
		}.bind(this.classes);
		// data	
		if (!data){
			this.options.hu = '';
			data = {};
			var thumbnails = this.slideshow.getElements(this.classes.get('thumbnails') + ' img');
			this.slideshow.getElements(this.classes.get('images') + ' img').each(function(img, i){
				var src = img.get('src');
				var caption = $pick(img.get('alt'), img.get('title'), '');
				var parent = img.getParent();
				var properties = (parent.get('tag') == 'a') ? parent.getProperties : {};
				var href = img.getParent().get('href') || '';
				var thumbnail = (thumbnails[i]) ? thumbnails[i].get('src') : '';
				data[src] = {'caption': caption, 'href': href, 'thumbnail': thumbnail};
			});
		}
		var loaded = this.load(data);
		if (!loaded)
			return; 
		// events
		this.events = $H({'keydown': [], 'keyup': [], 'mousemove': []});
		var keyup = function(e){
			switch(e.key){
				case 'left': 
					this.prev(e.shift); break;
				case 'right': 
					this.next(e.shift); break;
				case 'p': 
					this.pause(); break;
			}
		}.bind(this);		
		this.events.keyup.push(keyup);
		document.addEvent('keyup', keyup);
		// required elements
		var el = this.slideshow.getElement(this.classes.get('images'));
		var images = (el) ? el.empty() : new Element('div', {'class': this.classes.get('images').substr(1)}).inject(this.slideshow);
		
		var div = images.getSize();
		this.height = this.options.height || div.y;
		this.width = this.options.width || div.x;
//		var clientsize		= window.getSize();
		var clientsize		= document.getElementById('cate').getSize();

		//Define image ratio & minimum dimensions
		var minwidth		= this.options.minsize*(this.options.startwidth);
		var minheight		= this.options.minsize*(this.options.startheight);
		var ratio			= this.options.startheightt/this.options.startwidth;	

		var browserwidth	= clientsize.x;
		var browserheight	= clientsize.y;	

	if ((browserheight < minheight) && (browserwidth < minwidth))
		{
		
		this.height = minheight;
		this.width = minwidth;

		}else{
			if (browserheight > browserwidth){
				imageheight = browserheight;
				this.height = browserheight;				
				imagewidth = browserheight/ratio;			
				this.width = imagewidth;

			if (browserwidth > imagewidth){	
				imagewidth = browserwidth; 		
				this.height = imageheight;				
				imageheight = browserwidth * ratio; 	
				this.width = browserwidth;
				}
			}	
		
			if (browserwidth >= browserheight){
				imagewidth = browserwidth; 
				this.width = browserwidth;	
				imageheight = browserwidth * ratio; 
				this.height = imageheight;
	
			if (browserheight > imageheight){
				imageheight = browserheight;
				this.height = browserheight;				
				imagewidth = browserheight/ratio;
				this.width = imagewidth;	
				}
			}
		}
		
		//APLICA PROPIEDADES A LA IMAGEN
		images.set({'styles': {
				   'display': 'block',
				   'overflow': 'hidden',
				   'position': 'relative',
				   'height': this.height,				   
				   'width': this.width
				   }});		

		this.slideshow.store('images', images);
		
		
///////////////llama a la funcion _resize CUANDO CAMBIA EL TAMAÑO DE LA PANTALLA PERO IGUAL MENTE PUEDE QUEDAR DESACTIVADO//////////
		window.addEvent('resize',function(img){
										  this._preload();
									
										//  this._thumbnails();
										  }.bind(this));		
//		window.addEvent('resizer',function(){this._thumbnails();}.bind(this));		

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		this.a = this.image = this.slideshow.getElement('img') || new Element('img');
		if (Browser.Engine.trident && Browser.Engine.version > 4)
			this.a.style.msInterpolationMode = 'bicubic';
		this.a.set('styles', {'display': 'none', 'position': 'absolute', 'zIndex': 1});
		this.b = this.a.clone();
		[this.a, this.b].each(function(img){
			anchor.clone().cloneEvents(anchor).grab(img).inject(images);
		});
		
		// optional elements
		
		if (this.options.captions)
 			this._captions();
		if (this.options.controller)
			this._controller();
		if (this.options.loader)
 			this._loader();
		if (this.options.thumbnails)
			this._thumbnails();
		// begin show
		
		this._preload();
	
		},
		
	go: function(n, direction){
		if ((this.slide - 1 + this.data.images.length) % this.data.images.length == n || $time() < this.transition)
			return;		
		$clear(this.timer);
		this.delay = 0;		
		this.direction = (direction) ? direction : ((n < this.slide) ? 'right' : 'left');
		this.slide = n;
		if (this.preloader) 
			this.preloader = this.preloader.destroy();
		this._preload(this.options.fast == 2 || (this.options.fast == 1 && this.paused));
	},
	first: function(){
		this.prev(true); 
	},
	prev: function(first){
		var n = 0;
		if (!first){
			if (this.options.random){
				
				// if it's a random show get the previous slide from the showed array

				if (this.showed.i < 2)
					return;
				this.showed.i -= 2;
				n = this.showed.array[this.showed.i];
			}
			else
				n = (this.slide - 2 + this.data.images.length) % this.data.images.length;									
		}
		this.go(n, 'right');
	},
	pause: function(p){
		if ($chk(p))
			this.paused = (p) ? false : true;
		if (this.paused){
			this.paused = false;
			this.delay = this.transition = 0;		
			this.timer = this._preload.delay(100, this);
			[this.a, this.b].each(function(img){
				['morph', 'tween'].each(function(p){
					if (this.retrieve(p)) this.get(p).resume();
				}, img);
			});
			if (this.options.controller)
				this.slideshow.getElement('.' + this.classes.pause).removeClass(this.classes.play);
		} 
		else {
			this.paused = true;
			this.delay = Number.MAX_VALUE;
			this.transition = 0;
			$clear(this.timer);
			[this.a, this.b].each(function(img){
				['morph', 'tween'].each(function(p){
					if (this.retrieve(p)) this.get(p).pause();
				}, img);
			});
			if (this.options.controller)
				this.slideshow.getElement('.' + this.classes.pause).addClass(this.classes.play);
		}
	},
	next: function(last){
		var n = (last) ? this.data.images.length - 1 : this.slide;
		this.go(n, 'left');
	},
	last: function(){
		this.next(true); 
	},
	

	load: function(data){
		this.firstrun = true;
		this.showed = {'array': [], 'i': 0};
		if ($type(data) == 'array'){
			this.options.captions = false;			
			data = new Array(data.length).associate(data.map(function(image, i){ return image + '?' + i })); 
		}
		this.data = {'images': [], 'captions': [], 'hrefs': [], 'thumbnails': []};
		for (var image in data){
			var obj = data[image] || {};
			var caption = (obj.caption) ? obj.caption.trim() : '';
			var href = (obj.href) ? obj.href.trim() : ((this.options.linked) ? this.options.hu + image : this.options.href);
			var thumbnail = (obj.thumbnail) ? obj.thumbnail.trim() : image.replace(this.options.replace[0], this.options.replace[1]);
			this.data.images.push(image);
			this.data.captions.push(caption);
			this.data.hrefs.push(href);
			this.data.thumbnails.push(thumbnail);
		}
		if (this.options.random)
			this.slide = $random(0, this.data.images.length - 1);
		
		// only run when data is loaded dynamically into an existing slideshow instance
		
		if (this.options.thumbnails && this.slideshow.retrieve('thumbnails'))
			this._thumbnails();
		if (this.slideshow.retrieve('images')){
			[this.a, this.b].each(function(img){
				['morph', 'tween'].each(function(p){
					if (this.retrieve(p)) this.get(p).cancel();
				}, img);
			});
			this.slide = this.transition = 0;
			this.go(0);		
		}
		return this.data.images.length;
	},
	destroy: function(p){
		this.events.each(function(array, e){
			array.each(function(fn){ document.removeEvent(e, fn); });
		});
		this.pause(1);
		if (this.options.loader)
			$clear(this.slideshow.retrieve('loader').retrieve('timer'));		
		if (this.options.thumbnails)
			$clear(this.slideshow.retrieve('thumbnails').retrieve('timer'));
		this.slideshow.uid = Native.UID++;
		if (p)
			this.slideshow[p]();
	},
	
	
	
	_preload: function(fast){
		
		if (!this.preloader)
		 	this.preloader = new Asset.image(this.options.hu + this.data.images[this.slide], {'onload': function(){
				this.store('loaded', true);
			}});	
		if (this.preloader){


		this.height = this.options.startheight;
		this.width = this.options.startwidth;
		var minwidth		= this.width;
		var minheight		= this.height;
		var ratio			= this.height/this.width;	
		var clientsize		= window.getSize();
		var browserwidth	= clientsize.x;
		var browserheight	= clientsize.y;	


if ((browserheight < minheight) && (browserwidth < minwidth)){

				

									this.image.set('styles', {
					   											'height': minheight, 
																'width': minwidth, 
																'zIndex': this.counter
								 							 });
		
			}else{


				if (browserheight >= browserwidth){
									//alert('ato mas q ancho');
					
												imageheight = browserheight;
												imagewidth = browserheight/ratio;									
												this.image.set('styles', {
					   														'height': imageheight, 
																			'width': imagewidth, 
																			'zIndex': this.counter
								 										 });

					if (browserwidth > imagewidth){						
													imagewidth = browserwidth;													
													imageheight = browserwidth * ratio;								
													this.image.set('styles', {
																   				'height': imageheight,
																				'width': imagewidth,
																				'zIndex': this.counter
																			  });					
													}
												}
				if (browserwidth >= browserheight){
								//	alert('ancho mas q alto');							
					
													imagewidth = browserwidth;														
													imageheight = browserwidth * ratio;		
												//	alert(browserwidth);
												//	alert(ratio);													
													this.image.set('styles', {
																   				'height': imageheight,
																				'width': imagewidth,
																				'zIndex': this.counter
																			   });																					
					if (browserheight > imageheight){
//									alert(browserwidth);
//									alert(browserheight);
						
														imageheight = browserheight;		
														imagewidth = browserheight/ratio;
														this.image.set('styles', {
																	   				'height': imageheight, 
																					'width': imagewidth, 
																					'zIndex': this.counter
																				  });																																					
														}
													}
			};	

//var divs = thumbnails.getCoordinates();
//thumbnails.store('limit', (div[size] + div[props[0]] - limit));


};
			

		if (this.preloader.retrieve('loaded') && $time() > this.delay && $time() > this.transition){
			if (this.stopped){				
				if (this.options.captions)
					this.slideshow.retrieve('captions').get('morph').cancel().start(this.classes.get('captions', 'hidden'));
				this.pause(1);
				if (this.end)
					this.fireEvent('end');
				this.stopped = this.end = false;
				return;				
			}					
this.image = (this.counter % 2) ? this.b : this.a;




this.image.set('styles', {'display': 'block', 'height': 'auto', 'visibility': 'hidden', 'width': 'auto', 'zIndex': this.counter});
			
			

			
			
			
			
			
			['src', 'height', 'width'].each(function(prop){
				this.image.set(prop, this.preloader.get(prop));
			}, this);
			this._resize(this.image);
			this._center(this.image);
			var anchor = this.image.getParent();
			if (this.data.hrefs[this.slide])
				anchor.set('href', this.data.hrefs[this.slide]);			
			else
				anchor.erase('href');
			var text = (this.data.captions[this.slide])
				? this.data.captions[this.slide].replace(/<.+?>/gm, '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "'") 
				: '';
			this.image.set('alt', text);		
			if (this.options.titles)
				anchor.set('title', text);
			if (this.options.loader)
				this.slideshow.retrieve('loader').fireEvent('hide');
			if (this.options.captions)
				this.slideshow.retrieve('captions').fireEvent('update', fast);				
			if (this.options.thumbnails)
				this.slideshow.retrieve('thumbnails').fireEvent('update', fast); 			
			this._show(fast);
			this._loaded();
		} 
		else {
			if ($time() > this.delay && this.options.loader)
				this.slideshow.retrieve('loader').fireEvent('show');
			this.timer = (this.paused && this.preloader.retrieve('loaded')) ? null : this._preload.delay(100, this, fast); 
		}
	},
	_show: function(fast){
		if (!this.image.retrieve('morph')){
			var options = (this.options.overlap) ? {'duration': this.options.duration, 'link': 'cancel'} : {'duration': this.options.duration / 2, 'link': 'chain'};
			$$(this.a, this.b).set('morph', $merge(options, {'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'transition': this.options.transition}));
		}
		var hidden = this.classes.get('images', ((this.direction == 'left') ? 'next' : 'prev'));
		var visible = this.classes.get('images', 'visible');
		var img = (this.counter % 2) ? this.a : this.b;
		if (fast){			
			img.get('morph').cancel().set(hidden);
			this.image.get('morph').cancel().set(visible); 			
		} 
		else {
			if (this.options.overlap){
				img.get('morph').set(visible);
				this.image.get('morph').set(hidden).start(visible);
			} 
			else	{
				var fn = function(hidden, visible){
					this.image.get('morph').set(hidden).start(visible);
				}.pass([hidden, visible], this);
				hidden = this.classes.get('images', ((this.direction == 'left') ? 'prev' : 'next'));
				img.get('morph').set(visible).start(hidden).chain(fn);
			}
		}
	},
	
	_loaded: function(){
		this.counter++;
		this.delay = (this.paused) ? Number.MAX_VALUE : $time() + this.options.duration + this.options.delay;
		this.direction = 'left';
		this.transition = (this.options.fast == 2 || (this.options.fast == 1 && this.paused)) ? 0 : $time() + this.options.duration;			
		if (this.slide + 1 == this.data.images.length && !this.options.loop && !this.options.random)
			this.stopped = this.end = true;			
		if (this.options.random){
			this.showed.i++;
			if (this.showed.i >= this.showed.array.length){
				var n = this.slide;
				if (this.showed.array.getLast() != n) this.showed.array.push(n);
				while (this.slide == n)
					this.slide = $random(0, this.data.images.length - 1);				
			}
			else
				this.slide = this.showed.array[this.showed.i];
		}
		else
			this.slide = (this.slide + 1) % this.data.images.length;
		if (this.image.getStyle('visibility') != 'visible')
			(function(){ this.image.setStyle('visibility', 'visible'); }).delay(1, this);			
		if (this.preloader) 
			this.preloader = this.preloader.destroy();
		this._preload();
	},
	_center: function(img){
		},
	
					
	
	
//FUNCION QUE CAMBIA DE TAMAÑO CUANDO HACE LA TRANSICION
	_resize: function(img){	
	
		d = document.getElementById('cate');
		d.style.width="100%";
		d.style.height="100%";
		if (this.options.resize){
		this.height = this.options.startheight;
		this.width = this.options.startwidth;					
		var minwidth		= this.width;
		var minheight		= this.height;
		var ratio			= this.height/this.width;	
		var clientsize		= document.getElementById('cate').getSize();
		var browserwidth	= clientsize.x;
		var browserheight	= clientsize.y;	

if ((browserheight < minheight) && (browserwidth < minwidth)){

									this.image.set('styles', {
					   											'height': minheight, 
																'width': minwidth, 
																'zIndex': this.counter
								 							 });
		}else{
				if (browserheight > browserwidth){
												imageheight = browserheight;
												imagewidth = browserheight/ratio;									
												this.image.set('styles', {
					   														'height': browserheight, 
																			'width': imagewidth, 
																			'zIndex': this.counter
								 										 });

					if (browserwidth > imagewidth){						
													imagewidth = browserwidth;													
													imageheight = browserwidth * ratio;								
													this.image.set('styles', {
																   				'height': imageheight,
																				'width': browserwidth,
																				'zIndex': this.counter
																			  });					
													}
												}
				if (browserwidth >= browserheight){
													imagewidth = browserwidth;														
													imageheight = browserwidth * ratio;		
													this.image.set('styles', {
																   				'height': imageheight,
																				'width': browserwidth,
																				'zIndex': this.counter
																			   });																					
					if (browserheight > imageheight){
														imageheight = browserheight;		
														imagewidth = browserheight/ratio;
														this.image.set('styles', {
																	   				'height': browserheight, 
																					'width': browserwidth, 
																					'zIndex': this.counter
																				  });																																					
														}
													}
				};	
															


	}
	
	
	},
	
	
	_start: function(){	this.fireEvent('start');},
	
	
	_complete: function(){
		if (this.firstrun && this.options.paused){
			this.firstrun = false;
			this.pause(1);
		}
		this.fireEvent('complete');
	},
	
	
	
	_captions: function(){
 		if (this.options.captions === true) 
 			this.options.captions = {};
		var el = this.slideshow.getElement(this.classes.get('captions'));
		var captions = (el) ? el.empty() : new Element('div', {'class': this.classes.get('captions').substr(1)}).inject(this.slideshow);
		captions.set({
			'events': {
				'update': function(fast){	
					var captions = this.slideshow.retrieve('captions');
					var empty = (this.data.captions[this.slide] === '');
					if (fast){
						var p = (empty) ? 'hidden' : 'visible';
						captions.set('html', this.data.captions[this.slide]).get('morph').cancel().set(this.classes.get('captions', p));
					}
					else {
						var fn = (empty) ? $empty : function(n){
							this.slideshow.retrieve('captions').set('html', this.data.captions[n]).morph(this.classes.get('captions', 'visible'))
						}.pass(this.slide, this);		
						captions.get('morph').cancel().start(this.classes.get('captions', 'hidden')).chain(fn);
					}
				}.bind(this)
			},
			'morph': $merge(this.options.captions, {'link': 'chain'})
		});
		this.slideshow.store('captions', captions);
	},
	
	
	
	_controller: function(){
 		if (this.options.controller === true)
 			this.options.controller = {};
		var el = this.slideshow.getElement(this.classes.get('controller'));
		var controller = (el) ? el.empty() : new Element('div', {'class': this.classes.get('controller').substr(1)}).inject(this.slideshow);
		
		$H({'first': 'Shift + Leftwards Arrow', 'prev': 'Leftwards Arrow', 'pause': 'P', 'next': 'Rightwards Arrow', 'last': 'Shift + Rightwards Arrow'}).each(function(accesskey, action){
			var div_son = new Element('div', {
				'class': (action == 'pause' && this.options.paused) ? this.classes.play + ' ' + this.classes[action] : this.classes[action]
			}).inject(controller);
			var a = this.slideshow.retrieve(action, new Element('a', {
				'title': ((action == 'pause') ? this.classes.play.capitalize() + ' / ' : '') + this.classes[action].capitalize() + ' [' + accesskey + ']'				
			}).inject(div_son));
			a.set('events', {
				'click': function(action){this[action]();}.pass(action, this),
				'mouseenter': function(active){this.addClass(active);}.pass(this.classes.active, a),
				'mouseleave': function(active){this.removeClass(active);}.pass(this.classes.active, a)
			});		
		}, this);
		controller.set({
			'events': {
				'hide': function(hidden){  
					if (!this.retrieve('hidden'))
						this.store('hidden', true).morph(hidden);
				}.pass(this.classes.get('controller', 'hidden'), controller),
				'show': function(visible){  
					if (this.retrieve('hidden'))
						this.store('hidden', false).morph(visible);
				}.pass(this.classes.get('controller', 'visible'), controller)
			},
			'morph': $merge(this.options.controller, {'link': 'cancel'})
		}).store('hidden', false);
		var keydown = function(e){
			if (['left', 'right', 'p'].contains(e.key)){
				var controller = this.slideshow.retrieve('controller');
				if (controller.retrieve('hidden'))
					controller.get('morph').set(this.classes.get('controller', 'visible')); 			
				switch(e.key){
					case 'left': 
						this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseenter'); break;
					case 'right':
						this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseenter'); break;
					default:
						this.slideshow.retrieve('pause').fireEvent('mouseenter'); break;
				}
			}
		}.bind(this);
		this.events.keydown.push(keydown);
		var keyup = function(e){
			if (['left', 'right', 'p'].contains(e.key)){
				var controller = this.slideshow.retrieve('controller');
				if (controller.retrieve('hidden'))
					controller.store('hidden', false).fireEvent('hide'); 
				switch(e.key){
					case 'left': 
						this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseleave'); break;
					case 'right': 
						this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseleave'); break;
					default:
						this.slideshow.retrieve('pause').fireEvent('mouseleave'); break;
				}
			}
		}.bind(this);
		this.events.keyup.push(keyup);
		var mousemove = function(e){
			var images = this.slideshow.retrieve('images').getCoordinates();
			if (e.page.x > images.left && e.page.x < images.right && e.page.y > images.top && e.page.y < images.bottom)
				this.slideshow.retrieve('controller').fireEvent('show');
			else
				this.slideshow.retrieve('controller').fireEvent('hide');
		}.bind(this);
		this.events.mousemove.push(mousemove);
		document.addEvents({'keydown': keydown, 'keyup': keyup, 'mousemove': mousemove});
		this.slideshow.retrieve('controller', controller).fireEvent('hide');
	},
	
	
	
	_loader: function(){
 		if (this.options.loader === true) 
 			this.options.loader = {};
		var loader = new Element('div', {
			'class': this.classes.get('loader').substr(1),				
			'morph': $merge(this.options.loader, {'link': 'cancel'})
		}).store('hidden', false).store('i', 1).inject(this.slideshow.retrieve('images'));
		if (this.options.loader.animate){
			for (var i = 0; i < this.options.loader.animate[1]; i++)
				img = new Asset.image(this.options.loader.animate[0].replace(/#/, i));
			if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
				loader.setStyle('backgroundImage', 'none');					
		}
		loader.set('events', {
			'animate': function(){  
				var loader = this.slideshow.retrieve('loader');				
				var i = (loader.retrieve('i').toInt() + 1) % this.options.loader.animate[1];
				loader.store('i', i);
				var img = this.options.loader.animate[0].replace(/#/, i);
				if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
					loader.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img + '", sizingMethod="scale")';
				else 
					loader.setStyle('backgroundImage', 'url(' + img + ')');
			}.bind(this),
			'hide': function(){  
				var loader = this.slideshow.retrieve('loader');
				if (!loader.retrieve('hidden')){
					loader.store('hidden', true).morph(this.classes.get('loader', 'hidden'));
					if (this.options.loader.animate)
						$clear(loader.retrieve('timer'));					
				}
			}.bind(this),
			'show': function(){  
				var loader = this.slideshow.retrieve('loader');
				if (loader.retrieve('hidden')){
					loader.store('hidden', false).morph(this.classes.get('loader', 'visible'));
					if (this.options.loader.animate)
						loader.store('timer', function(){this.fireEvent('animate');}.periodical(50, loader));
				}
			}.bind(this)
		});
		this.slideshow.retrieve('loader', loader).fireEvent('hide');
	},
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	_thumbnailsresize: function(){		//alert('entre');

	
	},
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	_thumbnails: function(){
		
		
		
		
		




if (this.options.thumbnails === true) 

// ONLY CALLED 1 TIME beacuse of the first_time variable ANDRES LEMONK: This is to calcultate the browser window size, in order to refresh and obtain allways the differente window size to refresh the settings for THUMBNAILS	




if(this.options.firs_time === 1){

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
// TO DETECT IF THE BROWSER IS IE OR NOT< IN ORDER TO FIXE THE BUG OF addEventHandler for the reize of the window	
	
	var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();




	
	
	
	
	
	
	
	
	
	
	
	
	
	
  var LemonkWidth = 0, LemonkHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    LemonkWidth = window.innerWidth;
    LemonkHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    LemonkWidth = document.documentElement.clientWidth;
    LemonkHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    LemonkWidth = document.body.clientWidth;
    LemonkHeight = document.body.clientHeight;
  }


// ANDRES LEMONK: We have to multiple the LemonkWidth or LemonkHeight for 0.02 and then minus the LemonkWidth or LemonkHeight to get the width and heigth od the MASK DIV, wich is div[size]
// So 	LemonkWidth - (Math.round(LemonkWidth*0.02)) = div[size]
							
	LemonkWidth = (LemonkWidth - (Math.round(LemonkWidth*0.02))) * (this.options.width_mask_percentage * 0.01 );	
	LemonkHeight = (LemonkHeight - (Math.round(LemonkHeight*0.02))) * (this.options.height_mask_percentage * 0.01 );	 // Not sure if we need the height for something
		
	
		
		
this.options.firs_time = 0;

	}






var el = this.slideshow.getElement(this.classes.get('thumbnails'));

var thumbnails = (el) ? el.empty() : new Element('div', {'class': this.classes.get('thumbnails').substr(1)}).inject(this.slideshow);

thumbnails.setStyle('overflow', 'hidden');


var ul = new Element('ul', {'tween': {'link': 'cancel'}}).inject(thumbnails);



//You can add an id to hte objecto to manipulate them later, not used at this time, leave it, for knowledge
ul.setAttribute("id","cosota");
thumbnails.setAttribute("id","cosita");




// LEMONK : TO RUN THE EVENTE SCROLL WICH RE-SET THE SCROLLING SETTING WITH THE NEW SCREEN SIZE ON RESIZE of the thumbs





	
	


if(BrowserDetect.browser === "Explorer"){
	
	//For IE
	function doSomething() {
     thumbnails.fireEvent('scroll', 1);
	};

	var resizeTimer = null;
	window.onresize = OnResizeDocument;

	function OnResizeDocument () {
          if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
        };
	
	}



else{
	
	
//For All browsers
window.addEventListener("resize", function(){
	
	thumbnails.fireEvent('scroll', 1);				   
							   
							},false);	
	
	
	};










	

this.data.thumbnails.each(function(thumbnail, i){


			var li = new Element('li').inject(ul);

			var a = new Element('a', {

				'events': {


					// ANDRES LEMONK:  The event to change the big image, jus change the word below to any of the following options:
					//mouseleave	 >> RollOut - When the user roll over the thumbnails, an then when he leaves it the event is fire.
					//mouseenter	 >> RollOver
					//click 		 >> CLICK
					
					
					'click': function(i){ 

						this.go(i); 

						return false; 

					}.pass(i, this),

					 'mouseenter': function(i){ 

                      this.go(i); 

                      return false; 

                      }.pass(i, this),



//************************************ CONTAR LA CANTIDAD DE FOTOS****************************************					

					'loaded': function(){

						this.data.thumbnails.pop();

							

						if (!this.data.thumbnails.length){

							

							var div = thumbnails.getCoordinates();

						//	alert(div);

							var props = thumbnails.retrieve('props');

							

							var  limit = 0,

								 pos = props[1],

								 size = props[2];	

					

							thumbnails.getElements('li').each(function(li){	

																	  

								var li = li.getCoordinates();		

							

								if (li[pos] > limit) limit = li[pos];

							}, this);					



							//ANDRES LEMONK  :  To variables that are generated at the begingin of the loading, we need then for later on the EVENTS so, we store it king od globally for following use
							thumbnails.store('update_1div', div[props[0]] );
							thumbnails.store('update_2limit',  limit);
							
							
						}

					}.bind(this)

				},

				'href': this.options.hu + this.data.images[i],

				'morph': $merge(this.options.thumbnails, {'link': 'cancel'})

			}).inject(li);

			if (this.data.captions[i] && this.options.titles)

				a.set('title', this.data.captions[i].replace(/<.+?>/gm, '').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "'"));

			var img = new Asset.image(this.options.hut + thumbnail, {

				'onload': function(){this.fireEvent('loaded');}.bind(a) 

			}).inject(a);

		}, this);




//ANDRES LEMONK, the next if is comparing with the variable thumbs_position, wich ahs to be changed, if you wan the thumbnails vertical or horizontal.

if(this.options.thumbs_position === 'vertical'){









	var lemonk_calculate_window_size = function(){	
	
	// ANDRES LEMONK: This is to calcultate the browser window size, in order to refresh and obtain allways the differente window size to refresh the settings for THUMBNAILS				
		
  var LemonkWidth = 0, LemonkHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    LemonkWidth = window.innerWidth;
    LemonkHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    LemonkWidth = document.documentElement.clientWidth;
    LemonkHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    LemonkWidth = document.body.clientWidth;
    LemonkHeight = document.body.clientHeight;
  }


// ANDRES LEMONK: We have to multiple the LemonkWidth or LemonkHeight for 0.02 and then minus the LemonkWidth or LemonkHeight to get the width and heigth od the MASK DIV, wich is div[size]
// So 	LemonkWidth - (Math.round(LemonkWidth*0.02)) = div[size]
							
	LemonkWidth = (LemonkWidth - (Math.round(LemonkWidth*0.02))) * (this.options.width_mask_percentage * 0.01 );		
	LemonkHeight = (LemonkHeight - (Math.round(LemonkHeight*0.02))) * (this.options.height_mask_percentage * 0.01 );	 // Not sure if we need the height for something
		
		return LemonkHeight;
		
}.bind(this);
	
	
	}

else {
	
	
	
	
	var lemonk_calculate_window_size = function(){	
	
	// ANDRES LEMONK: This is to calcultate the browser window size, in order to refresh and obtain allways the differente window size to refresh the settings for THUMBNAILS				
		
  var LemonkWidth = 0, LemonkHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    LemonkWidth = window.innerWidth;
    LemonkHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    LemonkWidth = document.documentElement.clientWidth;
    LemonkHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    LemonkWidth = document.body.clientWidth;
    LemonkHeight = document.body.clientHeight;
  }


// ANDRES LEMONK: We have to multiple the LemonkWidth or LemonkHeight for 0.02 and then minus the LemonkWidth or LemonkHeight to get the width and heigth od the MASK DIV, wich is div[size]
// So 	LemonkWidth - (Math.round(LemonkWidth*0.02)) = div[size]
							
		LemonkWidth = (LemonkWidth - (Math.round(LemonkWidth*0.02))) * (this.options.width_mask_percentage * 0.01 );	
		LemonkHeight = (LemonkHeight - (Math.round(LemonkHeight*0.02))) * (this.options.height_mask_percentage * 0.01 );	 // Not sure if we need the height for something
		
		return LemonkWidth;
		
}.bind(this);
	
	
	
	
	}











thumbnails.set('events', {

			'scroll': function(n, fast){




	
	// Will run the function that calculates the actual window size, an will return the value.
	var LemonkWidth = lemonk_calculate_window_size();

	
	//ANDRES LEMONK : THE FOLLOWING CODE IS TO UPDATE EACH VALUE ANYTIME THE SCROLL EVENT IS FIRE, SO THE SIZE OF THE WINDOW WILL UPDATED AND THE LIMIT FOR SCROLLLING TOO.
	this.store('lemonk_window_size', LemonkWidth);
	
	
	
	thumbnails.store('limit', (this.retrieve('lemonk_window_size') + this.retrieve('update_1div') - this.retrieve('update_2limit') ));
							//BEFORE >> thumbnails.store('limit', (div[size] + div[props[0]] - limit));
							//Storing the limit value on thubmnail to later retrieve it inside an event
							
	
	
	
	
				var div = this.getCoordinates();

				

				var ul = this.getElement('ul').getPosition();

				var props = this.retrieve('props');

				var axis = props[3], delta, pos = props[0], size = props[2], value;	

//				alert(pos);

				var tween = this.getElement('ul').get('tween', {'property': pos});	

//				tween.setAttribute("id","lemonktween");

//				var teen = document.getElementById("lemonktween").set(value);

							

				if ($chk(n)){

					var li = this.getElements('li')[n].getCoordinates();

/*					 alert("tamaÒo pantalla "+div[size]);

					 alert("margen pantalla "+div[pos]);

					 alert("tamaÒo cajita li "+li[size]);

					 alert("posicion li actual "+li[pos]);	*/			 






	
					
//ANDRES LEMONK: alert(this.retrieve('lemonk_window_size')); BRING IT FOR USE OF THE WINDOW SIZE LEMONK
					delta = div[pos]+ (this.retrieve('lemonk_window_size') / 2) - (li[size] / 2) - li[pos];
/*					 alert("delta "+delta);				 					
					 alert("es el tamaÒo del UL menos la mascara negatica "+ul[axis]);*/

					
					value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);

			

				var ul = this.getElement('ul').getPosition();

				

					if (fast)	

						tween.set(value);

						

					else						 

						tween.start(value);

						

						

				}

				else{



					var area = div[props[2]]/ 3, page = this.retrieve('page'), velocity = -0.2;			

	

					if (page[axis] < (div[pos] + area))



					

						delta = (page[axis] - div[pos] - area) * velocity;





					else if (page[axis] > (div[pos] + thumbnails.retrieve('lemonk_window_size') - area))

						delta = (page[axis] - div[pos] - thumbnails.retrieve('lemonk_window_size') + area) * velocity;			

					if (delta){			

				
						value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);

						tween.set(value);

						

					}

				}				

			}.bind(thumbnails),

			

			'update': function(fast){

				var thumbnails = this.slideshow.retrieve('thumbnails');

				thumbnails.getElements('a').each(function(a, i){	

					if (i == this.slide){

						if (!a.retrieve('active', false)){

							//alert('numero de orden de foto '+i);

							//alert('link de la de foto '+a);

							a.store('active', true);

							var active = this.classes.get('thumbnails', 'active');							

							if (fast) a.get('morph').set(active);

							else a.morph(active);

						}

					} 

					else {

						if (a.retrieve('active', true)){

							a.store('active', false);

							var inactive = this.classes.get('thumbnails', 'inactive');						

							if (fast) a.get('morph').set(inactive);

							else a.morph(inactive);

						}

					}

				}, this);

				if (!thumbnails.retrieve('mouseover'))

					thumbnails.fireEvent('scroll', [this.slide, fast]);

			}.bind(this)

		})



var div = thumbnails.getCoordinates();





thumbnails.store('props', (div.height > div.width) ? ['top', 'bottom', 'height', 'y'] : ['left', 'right', 'width', 'x']);





var mousemove = function(e){

			var div = this.getCoordinates();

			if (e.page.x > div.left && e.page.x < div.right && e.page.y > div.top && e.page.y < div.bottom){

				this.store('page', e.page);			

				if (!this.retrieve('mouseover')){

					this.store('mouseover', true);

					this.store('timer', function(){this.fireEvent('scroll');}.periodical(50, this));

				}

			}

			else {

				if (this.retrieve('mouseover')){

					this.store('mouseover', false);				

					$clear(this.retrieve('timer'));

				}

			}

		}.bind(thumbnails);

this.events.mousemove.push(mousemove);

document.addEvent('mousemove', mousemove);

this.slideshow.store('thumbnails', thumbnails);

		

		
		
		
		
		}

		
		});

window.addEvent('domready', function(){});