var Album = { 
	/****  VARIABLES  ****/
	pictures		: '',		// pics array
	pics_number		: 0,		// number of pics
	view			: 0,		// pics we're seeing (1 = pics one to four, 2 = pics five to eight, etc.) 
	views_number	: 0,		// number of views in relation with the number of pics
	max_width		: 200,
	max_height		: 250,
	index			: 1,
	thread			: '',
	user			: '',
	rightMoveEnabled: true,
	leftMoveEnabled	: false,
	watermark		: wm,
	tp				: dir,
	
	// initialize the slideshow
	startup: function(usr,arr) {

		// get the pictures
		Album.pictures = arr;	
		Album.pics_number = Album.pictures.size();
		
		// get the user
		Album.user = usr; 
		
		// manage the horizontal scroll
		Album.view = 1;
		Album.views_number = Math.ceil(Album.pics_number / 3);
		// hide the left arrow and the right if we need it
		new Effect.Opacity('slideshow_left_arrow', {duration:0.2, from:1.0, to:0.3, fps:50});		
		if(Album.view == Album.views_number){
			//$('slideshow_right_arrow').style.display = 'none';
			new Effect.Opacity('slideshow_right_arrow', {duration:0.2, from:1.0, to:0.3, fps:50});
			Album.rightMoveEnabled = false;			
		}
		
		// start the slide
		Album.thread = new PeriodicalExecuter(Album.cycle, 5) // change image every 5 seconds 
	},
	
	// restart the slide if you stopped it
	restart: function(){
		Album.thread = new PeriodicalExecuter(Album.cycle, 5) // change image every 5 seconds
	},
	
	// stop the slide
	stop:function(){
		Album.thread.stop();
	}, 
	
	// thread that change the pictures
	cycle: function() { 			
		if(Album.index < Album.pics_number){}
		else{Album.index = 0;}
		
		Album.showPic(Album.pictures[Album.index]);
	},
	
	// display a specific pic and stop the slide (when you clik on a thumb)
	displayPic:function(pic){
		Album.stop();	
		Album.showPic(pic);	
		return false;
	},	
	
	// move the current view to the left
	moveLeft:function(){
		if(Album.leftMoveEnabled == true){
			new Effect.MoveBy('product-img-thumbs',0,207,{
				duration: 0.4,  
				transition: Effect.Transitions.sinoidal
			});
		
			// check if we need to display the button or not and we display automatically the right button
			Album.view --;
			
			if($('slideshow_right_arrow').style.display != 'block'){
				new Effect.Opacity('slideshow_right_arrow', {duration:0.2, from:0.3, to:1.0, fps:50});
				Album.rightMoveEnabled = true;
			}
					
			if(Album.view == 1){
				new Effect.Opacity('slideshow_left_arrow', {duration:0.2, from:1.0, to:0.3, fps:50});
				Album.leftMoveEnabled = false;
			}
		}
	},
	
	// move the current view to the right
	moveRight:function(){
		if(Album.rightMoveEnabled == true){
			new Effect.MoveBy('product-img-thumbs',0,-207,{
				duration: 0.4,  
				transition: Effect.Transitions.sinoidal
			});
			
			// check if we need to display the button or not and we display automatically the left button
			Album.view++; 
			
			if($('slideshow_left_arrow').style.display != 'block'){
				new Effect.Opacity('slideshow_left_arrow', {duration:0.2, from:0.3, to:1.0, fps:50});
				Album.leftMoveEnabled = true;
			}
			
			if(Album.view == Album.views_number){
				new Effect.Opacity('slideshow_right_arrow', {duration:0.2, from:1.0, to:0.3, fps:50});
				Album.rightMoveEnabled = false;
			}
		}
	},
	
	showPic:function(pic){
		new Effect.Fade('product-img-viewer',{ // the id of the div containing the photos 
			duration: 0.5, 
			fps: 50, 
			afterFinish: function(){
				
				// set the url to get the thumb
				var url = '/_source/modules/thumb/pictureViewer.thumb.php?pic='+pic+'&user='+Album.user+'&dir=users&height='+Album.max_height+'&width='+Album.max_width;
				(Album.watermark) ? url += '&tp='+Album.tp+'&wm' : null;
				
				// generate the bic picture with the watermark
				//var urlBig = '/_source/modules/thumb/pictureViewer.thumb.php?pic='+pic+'&user='+Album.user+'&dir=users';
				//(Album.watermark) ? urlBig += '&tp='+Album.tp+'&wm' : null;
				
				//new Ajax.Request(urlBig,{});
				
				// call the script to resize the picture
				new Ajax.Request(url, {
					method: 'get',
					onSuccess: function(answ){
						// get the name of the picture, without the extension
						var temp = pic.split('.');
						if (temp.length > 2) {
							var cleaned_name = temp.slice(0, temp.length - 1).join('.'); 
						} else {
							var cleaned_name = temp[0];
						}
						var type = temp[temp.length - 1];
						
						// change the src of the picture
						var src = "/upload_dir/users/"+cleaned_name+".w"+Album.max_width+".h"+Album.max_height;
						(Album.watermark) ? src += '.wm' : null;
						src += "."+type;
						//alert(src);
						$('main_product_picture').src = src;
						
						// change the lightbox link
						src = '/upload_dir/users/' + cleaned_name;
						(Album.watermark) ? src += '.wm' : null;
						src += "."+type;	
						$('main_product_picture_lightbox').href = src;
												
						// apply the appear effect
						new Effect.Appear('product-img-viewer', {
							duration: 0.5,
							fps: 50,
							queue:'end',
							afterFinish: function(){
								// increase the index
								Album.index++;
							}
						}) 
					}
				});   			      
			} // end afterfinish 
		})
	},
	
	
	// set a background color to the container of the pictures to fix a problem with the fade in / fade out in IE and Chrome
	setBGColor : function(){
		var color = '';
		$('product-img-viewer').ancestors().each(function(el,index){
			if(color == '' && $(el).getStyle('background-color') != 'transparent'){
				color = $(el).getStyle('background-color');
			}
		});
		
		// set a default color
		(color == '') ? color = '#fff' : null;
		
		// set the background color for the specific div
		$('product-img-viewer').style.backgroundColor = color;
	}
}