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

	initialize: function( options )	{
		
		document.ondragstart = function () { return false; }; 
		
		this.setOptions(options);
		
		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;

		this.stepper = this.move.periodical( 6000, this, [null, 1]  );

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

		if ( this.options.time != 0 ) {
			this.arrow = this.options.indicator[0];
			this.arrow.setStyle('width',0);
			
			var arrow_lng = -200 + this.arrow.getSize().x;
			var arrow_tween = ['-200 14', arrow_lng+' 14'];

			// 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 = 1;
		this.positions[0] = 0;
		var insize = 0;
		this.images.each( function( img,i)	{
				this.size += img.getStyle('width').toInt()+0.0; // sumowanie rozmiaru
				if ( ( insize + img.getStyle('width').toInt()+0.0 ) > this.lng ) {
					this.positions[sidx] = -this.size + 0 + img.getStyle('width').toInt();
					sidx++;
					insize = 0;
				}
				insize += img.getStyle('width').toInt()+0.0;
			//	this.lastimgsize = -this.size;//img.getStyle('width').toInt()+5.0;
				this.max_idx = sidx-1;
		}.bind(this));
		this.images_cont.setStyle('width',this.size + 100.0 );

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

		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()	{
		if ( this.options.time != 0 ) {
			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');
		
		this.container.removeEvents('mouseenter');
		this.container.removeEvents('mouseleave');
		
		if ( this.size > this.lng ) {
			// mouse over out
			if ( this.options.time != 0 ) {
				this.container.addEvent('mouseenter', this.showArrows.bind(this) );
				this.container.addEvent('mouseleave', this.hideArrows.bindWithEvent(this) );
	
				$(this.options.lft_button).addEvent('mouseleave', this.hideArrows.bindWithEvent(this) );
				$(this.options.rgt_button).addEvent('mouseleave', this.hideArrows.bindWithEvent(this) );
			}

			this.container.addEvent('mousedown', function() { this.dragged = 0; }.bind(this) );


			/*
			this.container.addEvent('mouseenter', this.perChange.pause.bind(this.perChange) );
			this.container.addEvent('mouseleave', this.perChange.start.bind(this.perChange, arrow_tween) );
			
			$(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('hide');
			$(this.options.rgt_button).fade('show');

			/* przesuniecie do konkretnej pozycji */
			this.options.numbers.each( function( num, i )	{
				num.addEvent('click', this.move.bindWithEvent(this, ['1',i] ) );
			}.bind(this) );
			
		} else {
			$(this.options.lft_button).fade('hide');
			$(this.options.rgt_button).fade('hide');
			//this.content_drag.detach();
		}
		$(this.options.lft_button).setStyle('display', 'block');
		$(this.options.rgt_button).setStyle('display', 'block');
	},
	
	stopEvents:function()	{
		this.perChange.pause();
	},
	
	showLarger:function( ev ) {
		if ( !this.dragged ) {
		} 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, indx)	{
		if (ev) {
			ev.stop();
			$clear(this.stepper);
		}
		if ( indx == this.index ) return false;
		this.posChange.cancel();
		if ( indx != null ) {
			this.index = indx;
		} else {
			this.index += dir.toInt();
			this.index = ( ( this.index > this.max_idx) ? 0 : ( ( this.index < 0 ) ? this.max_idx : this.index ));
		}
		//this.index = ( ( this.index >= this.max_idx) ? this.max_idx : ( ( this.index <= 0 ) ? 0 : this.index ));
		this.showArrows();
		this.posChange.start( this.positions[ this.index ] );
		
		// ustalenie pozycji
		this.options.numbers.each( function(el, i){
			el.removeClass('selected');
		}.bind(this));
		this.options.numbers[this.index].addClass('selected');

		return false;
	},
	
	showArrows: function()	{
		if ( this.index >= this.max_idx) {
			$(this.options.lft_button).fade('show');
//				$(this.options.rgt_button).fade('hide');
		} else if ( this.index <= 0 ) {
//				$(this.options.lft_button).fade('hide');
			$(this.options.rgt_button).fade('show');
		} else {
			$(this.options.lft_button).fade('show');
			$(this.options.rgt_button).fade('show');
		}
	},
	
	hideArrows: function(ev)	{
		if ( ev.relatedTarget && ( ev.relatedTarget.id == 'nxt' || ev.relatedTarget.id == 'prv' ) ) {
			
		} else {
			$(this.options.rgt_button).fade('hide');
			$(this.options.lft_button).fade('hide');
		}
	}

});