var scrollGalleryObj = new scrollGallery();

  
//ContentDiv fliegt ein
   var slideInFx = new Fx.Tween('content', {
				duration: 1000,
				unit: '%',
				transition: Fx.Transitions.Quart.easeInOut,
				link: 'chain'
				}); 
			slideInFx.start('top',-4000,10);
			
	
//MenuAnimationen
			
		$('photography').addEvents({
    mouseenter: function(){
      // Always sets the duration of the tween to 1000 ms and a bouncing transition
      // And then tweens the height of the element
      this.set('tween', {
        duration: 300,
        transition: Fx.Transitions.easeOut // This could have been also 'bounce:out'
      }).tween('width', '500px');
    },
    mouseleave: function(){
      // Resets the tween and changes the element back to its original size
      this.set('tween', {duration: 800}).tween('width', '120px');
    }
	});
	
	$('screenprinting').addEvents({
    mouseenter: function(){
      // Always sets the duration of the tween to 1000 ms and a bouncing transition
      // And then tweens the height of the element
      this.set('tween', {
       duration: 300,
        transition: Fx.Transitions.easeOut // This could have been also 'bounce:out'
      }).tween('width', '320px');
    },
    mouseleave: function(){
      // Resets the tween and changes the element back to its original size
      this.set('tween', {duration: 800}).tween('width', '135px');
    }
	});
	
	$('info').addEvents({
    mouseenter: function(){
      // Always sets the duration of the tween to 1000 ms and a bouncing transition
      // And then tweens the height of the element
      this.set('tween', {
        duration: 300,
        transition: Fx.Transitions.easeOut // This could have been also 'bounce:out'
      }).tween('width', '220px');
    },
    mouseleave: function(){
      // Resets the tween and changes the element back to its original size
      this.set('tween', {duration: 800}).tween('width', '50px');
    }
	});
	
//ScrollAnimation	
	var myScroller = new Scroller('container');
	myScroller.start();
	
	
	var scroll = new Scroller('container', {area: 50, velocity: 5, fps: 20});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));

scroll.start();
  });
			

/*
--- 
description: scrollGallery

authors: 
- Benedikt Morschheuser (http://software.bmo-design.de)

license:
- MIT-style license

requires: 
- core/1.2.4: '*'
- more/1.2.4: 'Fx.Scroll'
- Scroller.js by Valerio Proietti

provides: [scrollGallery]

...
*/

//galleryscroll settings redone
			var scrollGallery = new Class({
	
	Implements: [Events, Options],
  
	options: {
		'start': 0,
        'area': 50,
		'thumbarea': 'thumbarea',
		'imagearea': 'imagearea',
		'speed': 0.1
        /* Events...*/
	},
  
	initialize: function(element,options){
		this.setOptions(options);		
		Scroller.implement(new Events, new Options);
		
		this.tumbObjs=null;
		this.imgObjs=null;
		
		//FX
		this.scrollimageareaFx = new Fx.Scroll(this.options.imagearea, {
			offset: {
				'x': 0,
				'y': 0
			} 
		});
        //init Thumb-Images
		if($(this.options.thumbarea)){
			this.scrollthumbareaFx = new Scroller($(this.options.thumbarea), {area: this.options.area, velocity: this.options.speed, direction: "x"});
			//$(this.options.thumbarea).setStyle('overflow', 'hidden');
			$(this.options.thumbarea).setStyle('overflow-x', 'auto')
			// Thumb Events
			
			//folgendes funktioniert nicht, scrollt nur in eine richtung!
			//$(this.options.thumbarea).addEvent('mouseenter', this.scrollthumbareaFx.start.bind(this.scrollthumbareaFx));
			//$(this.options.thumbarea).addEvent('mouseleave', this.scrollthumbareaFx.stop.bind(this.scrollthumbareaFx));
			
			// init tumbObjs
			this.tumbObjs = $(this.options.thumbarea).getElements('img');
			$each(this.tumbObjs, function(imgObjekt, index){
				imgObjekt.addEvent('click', function(index){	
					this.scrollimageareaFx.toElement(this.imgObjs[index]);
				}.bind(this,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!");
	}
    
});