var TechnoSlide = new Class({
	Implements: [Events, Options],
	options : {
		'selected' : 0,
		'gap' : {
			'top' : -2,
			'left': 6
		},
		'step' : 485,
		'buttons' : {
			'nextPic' : null,
			'prevPic' : null
		},
		'knob' : false
	},
	
	initialize : function(element, options) {
		this.setOptions(options);
		this.wrapper = element.getFirst('div.slider_wrapper');
		this.overflow = this.wrapper.getFirst('div.overflow');
		this.previous = this.wrapper.getFirst('a.previous');
		this.next = this.wrapper.getFirst('a.next');
		this.ul = this.overflow.getFirst('ul');
		this.selected = this.options.selected;
		
		
		this.items = this.ul.getElements('a');
		if ($chk(this.items[this.selected])){
			var left = (Display.getX(this.items[this.selected])-Display.getX(this.overflow))-parseInt(this.options.gap.left);
			if (this.options.knob) {
				this.leftK = 0;
				this.knob = new Element('div', {
					'class' : 'slider_knob',
					'styles' : {
						'left' : left.toString()+"px",
						'top' : parseInt(this.options.gap.top)+'px'
					}
				}).inject(this.overflow);
			}
			this.leftK = left;
		}
		this.leftUl = (this.ul.getStyle('left') == 'auto') ? 0 : parseInt(this.ul.getStyle('left').split("px")[0]);
		this.setPoints = {'left' : this.leftUl, 'right' : this.getListSize()};
		
		this.items.each(function(element, index){
			element.addEvent('click', function(e, index, element){
				this.select(index, element);
				if (e != null)
					e.stop();
			}.bindWithEvent(this, [index, element]))
		}.bind(this));
		
		this.next.addEvent('click', function(e){
			this.showNext();
			e.stop();
		}.bindWithEvent(this));
		
		this.previous.addEvent('click', function(e){
			this.showPrevious();
			e.stop();
		}.bindWithEvent(this));
		
		if (this.options.buttons.nextPic != null) {
			this.options.buttons.nextPic.addEvent('click', function(e){
				this.fireNext();
				e.stop();
			}.bindWithEvent(this));
		}
		if (this.options.buttons.prevPic != null) {
			this.options.buttons.prevPic.addEvent('click', function(e){
				this.firePrevious();
				e.stop();
			}.bindWithEvent(this));
		}
	},
	
	select : function(index, element) {
		if (!$chk(this.items[index]))
			return;
		var left = (Display.getX(this.items[index])-Display.getX(this.overflow))-parseInt(this.options.gap.left);
		
		if (Display.getX(this.items[index]) < Display.getX(this.overflow) || ((left+parseInt(this.items[index].getSize().x)) > (Display.getX(this.overflow)+parseInt(this.overflow.getStyle('width').split("px")[0]))))
			return;
		this.fireEvent('select', [index, element]);
		this.selected = index;
		if ($chk(this.knob)) {
			var morph = new Fx.Morph(this.knob, {
				onComplete:function(){
					this.fireEvent('selected', [index, element]);
					this.leftK = left;
				}.bind(this)
			});
			morph.start({'left' : left.toString()+"px"});
		}
	},
	
	showNext : function(){
		var old = {'ul':this.leftUl};
		if ($chk(this.knob))
			old[k] = this.leftK;
		var widthAvailable = this.overflow.getSize().x; 
		if (this.getListSize() < widthAvailable)
			return;
		if ((this.getListSize()-(Math.abs(old.ul)+Math.abs(this.options.step))) < widthAvailable){
			var step = (this.getListSize()-widthAvailable)-Math.abs(old.ul);
			if ($chk(this.knob))
				this.leftK = old.k-step;
			
			this.leftUl = old.ul-step;
		}
		else {
			this.leftUl = old.ul-this.options.step;
			if ($chk(this.knob))
				this.leftK = old.k-this.options.step;
		}
		var morph = new Fx.Morph(this.ul);
		morph.start({'left':(this.leftUl).toString()+"px"});
		if ($chk(this.knob)) {
			var morphK = new Fx.Morph(this.knob);
			morphK.start({'left':(this.leftK).toString()+"px"});
		}
		
	},
	
	showPrevious : function(){
		var old = {'ul':this.leftUl};
		if ($chk(this.knob))
			old[k] = this.leftK;
		if (old.ul+this.options.step > this.setPoints.left){
			this.leftUl = this.setPoints.left;
			/*this.leftK = 0;*/
		}
		else {
			this.leftUl = old.ul+this.options.step;
			if ($chk(this.knob))
				this.leftK = old.k+this.options.step;
		}
		var morph = new Fx.Morph(this.ul);
		morph.start({'left':(this.leftUl).toString()+"px"});
		if ($chk(this.knob)) {
			var morphK = new Fx.Morph(this.knob);
			morphK.start({'left':(this.leftK).toString()+"px"});
		}
	},
	
	getListSize : function(){
		var size = 0;
		this.items.each(function(element, index){
			size += parseInt(element.getParent().getStyle('width').split("px")[0]);
			size += parseInt(element.getParent().getStyle('margin-left').split("px")[0]);
			size += parseInt(element.getParent().getStyle('margin-right').split("px")[0]);
			size += parseInt(element.getParent().getStyle('padding-left').split("px")[0]);
			size += parseInt(element.getParent().getStyle('padding-right').split("px")[0]);
		}.bind(this));
		return size;
	},
	
	fireNext : function(){
		var next = parseInt(this.selected)+1;
		if (!$chk(this.items[next]))
			return;
		this.items[next].fireEvent('click');
	},
	
	firePrevious : function(){
		var prev = parseInt(this.selected)-1;
		if (!$chk(this.items[prev]))
			return;
		this.items[prev].fireEvent('click');
	}
});