var data = {
	      '1.jpg': { caption: '' }, 
	      '2.jpg': { caption: '' }, 
	      '3.jpg': { caption: '' },
	      '4.jpg': { caption: '' }, 
	      '5.jpg': { caption: '' }
		  };
	

	  
window.addEvent('domready', function(){
var myShow = new mooSizer('supersize', data,{
		controller: false,
		hu: 'php/photos/thumbnailsbig/', 							// Folder of the images
		hut: 'php/photos/thumbnails/', 							// Folder of the images		
		thumbnails: false,
		startwidth:9,
		startheight: 5.052631578947368,
		minsize: 0.5,	
		bgElemento: '',
		captions: false,
		center: true,
		classes: [],
		delay: 5000,
		duration: 1000,
		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,
		titles: false,
		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),



//************************************ 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(){});