var Slider = new Class({
		Implements: Options,
		options: {
			images: new Array(),
			container: new Element('div'),
			indicator: new Element('span'),
			lng:0,
			time:5,
			rgt_button: null,
			lft_button: null
		},

		initialize: function( options )	{
			
			document.ondragstart = function () { return false; }; 
			
			this.setOptions(options);
			
			this.arrow = this.options.indicator[0];
			this.arrow.setStyle('width',0);
			this.images = this.options.images;
			this.images_cont = this.options.container;
			
			this.container = $(this.options.container);
			
			this.positions = new Array();
			
			this.index = 0;
			this.max_idx = this.images.length-1;

			this.size = 0;
			this.lng = this.options.lng;
			
			this.lastimgsize = 0;

			var arrow_lng = -200 + this.arrow.getSize().x;
			var arrow_tween = ['-200 14', arrow_lng+' 14'];

			// animacja przesunięcia
			this.posChange = new Fx.Tween( this.images_cont, { property: 'left', duration:400, transition: Fx.Transitions.Cubic.easeOut } );

			// kontrola czasu
			this.perChange = new Fx.Tween( this.arrow, { property: 'background-position', duration:(this.options.time*1000),
				onComplete: function() {
					this.move( null, '1' );
					this.perChange.start('-200 14', arrow_lng+' 14');
				}.bind(this)
			});

			/* od prawej do lewej - z podziałem na strony */
			var sidx = 0;
			var insize = 0;
			this.images.each( function( img,i)	{
					this.size += img.getStyle('width').toInt()+10.0;
//					console.log( insize, this.size, Math.ceil(this.size/this.lng) );
					if ( Math.ceil(this.size/this.lng) > sidx ) {
						if ( sidx == 0 )
							this.positions[sidx] = 0;
						else
							this.positions[sidx] = -this.size + 5 + img.getStyle('width').toInt();
						sidx++;
						insize = sidx * this.lng;
					}
				//	this.lastimgsize = -this.size;//img.getStyle('width').toInt()+5.0;
					this.max_idx = sidx-1;
			}.bind(this));
			this.images_cont.setStyle('width',this.size);

			// ustalenie pozycji pierwszej fotki.
			// dlugosc maski
			this.startx = this.positions[0];
			this.images_cont.setStyle( 'left', this.startx );

			
			this.content_drag = new Drag(this.container,{
				limit:{
					x:[-this.size+this.lng, 0],
					y:[0,0],
					snap:10
				},
				onSnap: function(el){
					this.dragged = 1;
				}.bind(this),
				onComplete: this.drag.bind(this)
			});
			this.dragged = 0;
			
			this.images.each( function( img,i)	{
					img.removeEvents('click');
					img.addEvent( 'click', this.showLarger.bind(this) );
			}.bind(this) );
			
			this.setEvents();
		},
		
		setEvents:function()	{
			var arrow_lng = -200 + this.arrow.getSize().x;
			var arrow_tween = ['-200 14', arrow_lng+' 14'];
			
			this.container.removeEvents('mouseenter');
			this.container.removeEvents('mouseleave');
			this.container.removeEvents('mousedown');
			
			$(this.options.rgt_button).removeEvents('mouseenter');
			$(this.options.rgt_button).removeEvents('mouseleave');
			$(this.options.rgt_button).removeEvents('click');
			$(this.options.lft_button).removeEvents('mouseenter');
			$(this.options.lft_button).removeEvents('mouseleave');
			$(this.options.lft_button).removeEvents('click');

			if ( this.size > this.lng ) {
				this.container.addEvent('mouseenter', this.perChange.pause.bind(this.perChange) );
				this.container.addEvent('mouseleave', this.perChange.start.bind(this.perChange, arrow_tween) );
				this.container.addEvent('mousedown', function() { this.dragged = 0; }.bind(this) );
	
				$(this.options.rgt_button).addEvent('mouseenter', this.perChange.pause.bind(this.perChange) );
				$(this.options.rgt_button).addEvent('mouseleave', this.perChange.start.bind(this.perChange, arrow_tween) );
				$(this.options.lft_button).addEvent('mouseenter', this.perChange.pause.bind(this.perChange) );
				$(this.options.lft_button).addEvent('mouseleave', this.perChange.start.bind(this.perChange, arrow_tween) );

				$(this.options.lft_button).addEvent('click', this.move.bindWithEvent(this, '-1') );
				$(this.options.rgt_button).addEvent('click', this.move.bindWithEvent(this, '1') );
				this.content_drag.detach();
				this.content_drag.attach();
				
				this.perChange.start('-200 14',arrow_lng+' 14');

				
				$(this.options.lft_button).fade('show');
				$(this.options.rgt_button).fade('show');
				
				
			} else {
				$(this.options.lft_button).fade('hide');
				$(this.options.rgt_button).fade('hide');
				this.content_drag.detach();
			}
		},
		
		stopEvents:function()	{
			
			this.perChange.pause();
			
		},
		
		
		showLarger:function( ev ) {
			if ( !this.dragged ) {
//				console.log('dupa');
			} else {
				ev.stop();
			}
			
		},
		
		drag:function (ev) {
			//znalezienie najblizszego zdjecia i przesunięcie
			var d = this.container.getStyle('left').toInt();
			//d = d.substring(0, d.lastIndexOf('px'));
			var c = 1000000;
			var s = 0; var np = 0;
			this.positions.each( function(pos,i)	{
				if ( c > Math.abs(d-pos)  ) {
					s = i;
					c = Math.abs(d-pos);
					np = pos;
				}
				
			}.bind(this));
				
			this.index = s;
			//this.posChange.start( np );
		},
		
		move: function(ev, dir)	{
			if (ev) {
				ev.stop();
			}
			this.posChange.cancel();
			this.index += dir.toInt();
			this.index = ( ( this.index > this.max_idx) ? 0 : ( ( this.index < 0 ) ? this.max_idx : this.index ));
			this.posChange.start( this.positions[ this.index ] );
			return false;
		}

});