// -----------------------------------------------------------------------------------
// 
// This page coded by Oliver Finsterbusch
// http://www.informatizarte.com
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated frameworks copyright their respective owners
//
// -----------------------------------------------------------------------------------
// --- version date: 15/03/2010 ------------------------------------------------------



/* ShowThumb Class
------------------------------------------------------------*/
var ShowTumb = new Class({
	Implements: Chain,
	initialize: function(rsp,id,width,aclass){
		this.photoNum	= rsp.photoset.photo.length;
		this.rsp 		= rsp;
		this.container  = id;
		this.width      = width;
		this.aclass     = aclass;
		this.flechas 	= true;
		speed 			= 2;
		if (this.photoNum*(75+4) <= this.width) {
			this.flechas = false;
			this.container.setStyle('margin-left','15px');
		}
		
		// Se the contanier
		this.container.setStyle('width',this.width+'px');
		this.container.setStyle('float','left');
		this.container.setStyle('margin-bottom','15px');
		
		if (this.flechas) {
		var left = new Element('a', {
			'title': 'desplazar a la izquierda',
			'styles': {
		        'float': 'left',
		        'width': '15px',
		        'height': '75px',
		        'cursor': 'pointer'
		    },
			'events': {
		    	mouseover: function(){
	    		this.si=setInterval(function(){
	    			l = parseInt(div.style.left);
					w = parseInt(div1.style.width);
					z = parseInt(div.style.width);
					if (z > w) {
						if (l < 0) {
							div.style.left = (l+speed)+'px';
						}else {
							clearInterval(this.si);
						}
					} else {
						clearInterval(this.si);
					}
	    		},20)
				},
				mouseout: function(){
					clearInterval(this.si);
				},
				mousedown: function(){
					speed = 6;
				},
				mouseup: function(){
					speed = 2;
				}
			}
		}).injectInside(this.container);
		var il = new Element('img', {
			'styles': {
		        'margin-top': '25px',
		        'margin-right': '2px',
		        'width': '13px',
		        'height': '25px'
		    },
			'alt': 'izquierda',
			'border': '0',
			'src': 'http://www.museoreinasofia.es/images/scroll-left.gif',
			'events': {
				mouseover: function(){
		    		this.src='http://www.museoreinasofia.es/images/scroll-left-red.gif'
				},
				mouseout: function(){
					this.src='http://www.museoreinasofia.es/images/scroll-left.gif'
				}
			}
		}).injectInside(left);
		}
		var div1 = new Element('div').injectInside(id);
		div1.setStyle('overflow','hidden');
		div1.setStyle('width',(width-30)+'px');
		div1.setStyle('height','75px');
		div1.setStyle('float','left');
		div1.setStyle('position','relative');
		
		var div = new Element('div').injectInside(div1);
		div.setStyle('height','75px');
		div.setStyle('width',((79*this.photoNum) + 2) + 'px');
		div.setStyle('position','absolute');
		div.setStyle('left','0px');
		if (this.flechas) {
		right = new Element('a', {
			'title': 'desplazar a la derecha',
			'styles': {
		        'float': 'left',
		        'width': '15px',
		        'height': '75px',
		        'cursor': 'pointer'
		    },
			'events': {
				mouseover: function(){
		    		this.si=setInterval(function(){
		    			l = parseInt(div.style.left);
						w = parseInt(div1.style.width);
						z = parseInt(div.style.width);
						if (z > w) {
							if ((l >= (-1)*(z-w))) {
								div.style.left = (l-speed)+'px';
							} else {
								clearInterval(this.si);
							}
						} else {
							clearInterval(this.si);
						}
		    		},20);
				},
				mouseout: function(){
					clearInterval(this.si);
				},
				mousedown: function(){
					speed = 6;
				},
				mouseup: function(){
					speed = 2;
				}
			}
		}).injectInside(id);
		var ir = new Element('img', {
			'styles': {
		        'margin-top': '25px',
		        'margin-left': '2px',
		        'width': '13px',
		        'height': '25px'
		    },
			'alt': 'derecha',
			'border': '0',
			'src': 'http://www.museoreinasofia.es/images/scroll-right.gif',
			'events': {
				mouseover: function(){
		    		this.src='http://www.museoreinasofia.es/images/scroll-right-red.gif'
				},
				mouseout: function(){
					this.src='http://www.museoreinasofia.es/images/scroll-right.gif'
				}
			}
		}).injectInside(right);
		}
		var thumbLink = {};
		var thumbImage = {};
		
		// Loop through photos to generate gallery
		rsp.photoset.photo.each(function(value, key) {
			
			// Create links to large photos
			//http://www.flickr.com/photos/'+rsp.photoset.owner+'/'+value.id+'/in/set-'+rsp.photoset.id+'/
			thumbLink[key] = new Element('a', {
				'href': 'http://static.flickr.com/'+value.server+'/'+value.id+'_'+value.secret+'.jpg',
				'title': value.title,
				'class': this.aclass,
				'events': {
					mouseover: function(){
						this.fade(0.5);
					},
					mouseout: function(){
						this.fade(1);
					}
				}
			}).injectInside(div);
			thumbLink[key].setStyle('margin-left', '2px');
			thumbLink[key].setStyle('margin-right', '2px');
			thumbLink[key].setStyle('cursor', 'url(zoomin.cur), pointer');
			// 
			thumbImage[key] = new Element('img', {
				'height': '75',
				'width': '75',
				'alt': value.title,
				'border': '0',
				'src': 'http://static.flickr.com/'+value.server+'/'+value.id+'_'+value.secret+'_s.jpg'
			}).injectInside(thumbLink[key]);
		},this);
	}
});