var ftDivSlider = Class.create({
	initialize: function(container,duration,size,start,mediaRootPath) {
		// initialize settings
		this.container = $(container);
		this.slider = this.container.down('div');
		this.animation = false;
		this.mediaRootPath = mediaRootPath;
		
		// default options
		this.options = $H({
			size:3,
			start:1,
			duration:0.5
		});
		
		// override default options
		if(size!=undefined && size!=null && size!='') this.options.update($H({size:size}));
		if(duration!=undefined && duration!=null && duration!='') this.options.update($H({duration:duration}));
		if(start!=undefined && start!=null && start!='') this.options.update($H({start:start}));
	},
	create: function() {
		var owner = this;
		var sliderWidth = 0;
		
		this.arrElements = $$('#'+this.container.id+' .ftDivSlider .item');
		this.width = this.arrElements[0].getWidth();
		this.height = this.arrElements[0].getHeight();

		// if needed correct start value
		if(this.options.get('start')<1) this.options.update($H({start:1}));
		else if(this.options.get('start')>this.arrElements.length) this.options.update($H({start:this.arrElements.length}));
		
		// if needed correct size value
		if(this.options.get('size')<1) this.options.update($H({size:1}));
		else if(this.options.get('size')>this.arrElements.length) this.options.update($H({size:this.arrElements.length}));
		
		// remember selected item
		this.selected = this.options.get('start');
		
		this.arrElements.each(function(element) {
			//element.setStyle({float:'left'});
			sliderWidth += element.getWidth()+1;
			Event.observe(element,'click',owner.setCurrent.bind(owner,element),false);
		});
		
		// set styles
		this.container.setStyle({
/*								width:(this.width*this.options.get('size'))+'px',
								height:this.height+'px',
								float:'left', */
								overflow:'hidden',
								display:'inline'
								
								});
		this.slider.setStyle({
							 width:sliderWidth+'px'
							 });
		
		// slide to the starting item
		
		if(this.options.get('start')>1) {
			var maxLeft = (this.arrElements.length-this.options.get('size'))*this.width*-1;
			var offset = (this.options.get('start')-1)*this.width*-1;
				offset = offset>maxLeft?offset:maxLeft;
			
			new Effect.Move(this.slider,{
										x:offset,
										mode:'relative',
										duration:this.options.get('duration'),
										beforeStart:function() {
											owner.animation = true;
										},
										afterFinish:function(effect) {
											owner.animation = false;
										}
										});
		} 
		
		this.arrElements[this.selected-1].addClassName('ftDivSliderSelect');	
		
		// add the arrows
		new Insertion.Before(this.container,
			"<div id='"+this.container.id+"Left' style='float:left;'>" +
			"<img src='"+this.mediaRootPath+"module/backend/web/image/arrowLeft.png' onclick='"+this.container.id+".right();'>"+
			"</div>"
		);
		new Insertion.After(this.container,
			"<div id='"+this.container.id+"Right' style='float:left;'>"+
			"<img src='"+this.mediaRootPath+"module/backend/web/image/arrowRight.png' onclick='"+this.container.id+".left();'>"+
			"</div>"
			//"<div style='clear:both;'></div>"
		);
		
	},
	move: function(direction) {
		if(this.animation) return;
		
		var owner = this;
		
		
		if(direction=='left') {

			// limit the sliding to the left
			var maxLeft = (this.arrElements.length-this.options.get('size'))*this.width;
			//alert('maxleft:'+maxLeft);
			//alert('position:'+parseInt(this.slider.getStyle('left')));
			if(isNaN(parseInt(this.slider.getStyle('left'))))
			{
				intLeft=0;
			} 
			else
			{
				intLeft=parseInt(this.slider.getStyle('left'));
			}
			//alert('intLeft:'+intLeft);
			if(intLeft>-maxLeft) {
				new Effect.Move(this.slider,{
											x:-this.width,
											mode:'relative',
											duration:this.options.get('duration'),
											beforeStart:function() {
												owner.animation = true;
											},
											afterFinish:function(effect) {
												owner.animation = false;
											}
											});
			}
		} else if(direction=='right') {
			// limit the sliding to the right
			if(parseInt(this.slider.getStyle('left'))<0) {
				new Effect.Move(this.slider,{
											x:this.width,
											mode:'relative',
											duration:this.options.get('duration'),
											beforeStart:function() {
												owner.animation = true;
											},
											afterFinish:function(effect) {
												owner.animation = false;
											}
											});
			}
		}
	},
	setCurrent: function(element) {
		// get the clicked element
		var current = this.arrElements.indexOf(element);
		// change the selection (css)
		this.arrElements[this.selected-1].removeClassName('ftDivSliderSelect');
		this.arrElements[current].addClassName('ftDivSliderSelect');
		// update the selection
		this.selected = current+1;
	}
});

ftDivSlider.addMethods({
	left: function() {
		this.move('left');
	},
	right: function() {
		this.move('right');
	},
	init: function(area) {
		this.create(area);
	}
});