var scrollGallery = new Class({
	
	Implements: [Events, Options],
  
	options: {
		'start': 0,
		'area': 250,
		position: null,
		n_photos : 0,
		'width_photo': 489,
		'margin_photo': 15,
		'width_photo_thumb': 79,
		'margin_photo_thumb': 8,
		'thumbarea': 'thumbarea',
		'imagearea': 'imagearea',
		'imageareaContent' : 'imageareaContent',
		'thumbareaContent' : 'thumbareaContent',
		'speed': 0.1,
		scrollimageareaFxObj:null,
		imageObj:  new Array(),
		scrollthumbareaFx: null
	},
  
	initialize: function(element,options){
		this.setOptions(options);		
		Scroller.implement(new Events, new Options);
		
		this.tumbObjs=null;
		this.imgObjs=null;
		
		//FX
		this.options.scrollimageareaFxObj = new Fx.Scroll(this.options.imagearea, {
			offset: {
				'x': 0,
				'y': 0
			} 
		});
		
		//init Thumb-Images
		if($(this.options.thumbarea)){
			this.options.scrollthumbareaFx = new Scroller($(this.options.thumbarea), {area: this.options.area, velocity: this.options.speed, direction: "x"});
			$(this.options.thumbarea).setStyle('overflow-x', 'hidden')
			// Thumb Events
			$(this.options.thumbarea).addEvent('mouseenter', this.options.scrollthumbareaFx.start.bind(this.options.scrollthumbareaFx));
			$(this.options.thumbarea).addEvent('mouseleave', this.options.scrollthumbareaFx.stop.bind(this.options.scrollthumbareaFx));

			// init tumbObjs
			this.tumbObjs = $(this.options.thumbarea).getElements('img');
			this.options.n_photos=this.tumbObjs.length;
			$(this.options.imageareaContent).setStyle('width',this.options.n_photos*(this.options.width_photo + this.options.margin_photo));
			$(this.options.thumbareaContent).setStyle('width',this.options.n_photos*(this.options.width_photo_thumb + this.options.margin_photo_thumb));
			
			Array.each(this.tumbObjs, function(imgObjekt, index){

				this.options.imageObj[index]=imgObjekt;
				imgObjekt.addEvent('click', function(index){
					this.options.position=index;
			
					
					$('flickr_counter').set('html',(index+1)+'/'+this.options.n_photos);
					
					this.options.scrollimageareaFxObj.toElement(this.imgObjs[index]);
			
				}.bind(this).pass(index));
			
				if(index==this.options.start){
					imgObjekt.fireEvent('click',this,10);//delay for safari
				}
			}.bind(this));
		}else{
			alert('Missing thumbarea');
		}
		//init Images
		if($(this.options.imagearea)){
			$(this.options.imagearea).setStyle('overflow', 'hidden');
			$(this.options.imagearea).setStyle('overflow-x', 'hidden');
			// init imgObjs
			this.imgObjs=$(this.options.imagearea).getElements('img');
		}else{
			alert('Missing imagearea');
		}
		
		
		//check
		if(this.imgObjs.length!=this.tumbObjs.length) alert("Error: The number of images do not match!");
		
		$('button_flick_left').addEvent('click', function(event){ 
		
		if (this.options.position>=1) 
		{
			this.options.imageObj[this.options.position-1].fireEvent('click');
	
		}
		else
		{
			this.options.imageObj[this.options.n_photos-1].fireEvent('click');
		}
		 }.bind(this));
		 
		 
		 $('button_flick_right').addEvent('click', function(event){ 
		 if (this.options.position<(this.options.n_photos-1)) 
		 {
			this.options.imageObj[this.options.position+1].fireEvent('click');
		 }
		 else
		 {
			this.options.imageObj[0].fireEvent('click');
		 }
		 }.bind(this));

	}
	
	
});
		

// Manager
var FlickrManager = {
	
	api_key: "44df4b12a47ed13c312510fe2d1effe1",
	box_photo_number: 6,
	box_photo_per_line: 3,
	box_photoset_id: '72157627605710418',
	
	init: function(){
		// Local Variable
		var host = window.location.host;
		var rand = Math.floor(10000 * Math.random());
		// Box
		if($$('.pictures_gallery_box_content') && $$('.pictures_gallery_box_content').length > 0){
			var link_php_flickr_box ='http://'+host+'/fileadmin/web/php/flickr/flickr_cntr.php?type=flickr_box&photoset_id='+FlickrManager.box_photoset_id+'&photo_number='+FlickrManager.box_photo_number+'&photo_per_line='+FlickrManager.box_photo_per_line+'&rand='+rand;
			var req_flickr = new Request({   
				url: link_php_flickr_box,     
				method: 'get',    
				onComplete: function(response) { 
					$$('.pictures_gallery_box_content').each(function(box){
						$(box).set('html',response);	
						Mediabox.scanPage();	
					});
				}
			}).send();
		}
		
		// Scroll Gallery
		if($('flickr_photoset_ids')){
			var flickrSetListId = null;
			if($('flickr_photoset_ids')){
				flickrSetListId = $('flickr_photoset_ids').get('value').split(",");
			}
			var flickrSetListText = null;
			if($('flickr_photoset_decriptions')){
				flickrSetListText = $('flickr_photoset_decriptions').get('html').split("###SEPARATOR###");
			}
			var slide_set = new noobSlide({
				box: $('flickset_box_set_mask'),
				items: $$('#flickset_box_set_mask div'),
				size: 516,
				interval: 1000,
				startItem: 0,
				addButtons: {
					previous: $('button_flickr_set_left'),
					next: $('button_flickr_set_right')
				},
				onWalk: function(currentItem,currentHandle){
					if ($('flick_gallery')) {
						$('flick_gallery').empty();
						var link_php_flickr_gallery = 'http://'+host+'/fileadmin/web/php/flickr/flickr_cntr.php?type=flickr_gallery&photoset_id='+flickrSetListId[this.currentIndex]+'&rand='+rand;
						var req_flickr = new Request({   
							url: link_php_flickr_gallery,     
							method: 'get',    
							onComplete: function(response){  		
								$('flick_gallery').set('html',response);
								$('button_flick_left').removeEvents('click');
								var scrollGalleryObj = new scrollGallery();
								Mediabox.scanPage();		
							}
						}).send();	
					}
				}
			});	
		}
	}
	
};


// Mootools DOM ready
window.addEvent('domready', function(){
		FlickrManager.init();
	}
);