function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		elm['on' + evType] = fn;
	}
}



/*
Copyright 2007 by orange8 interactive ag
all rights reserved
www.orange8.com
Realized by matthias jaeggli (matthias [ D_O_T ] jaeggli [ A_T ] orange8 [ D_O_T ] com)

hslider slides a inner container inside an outer container horizontally. outer container has to have his overflow set to hidden
*/

function Hslider(slidesContainer, options){

	//------------ don't change anything below this line, unless you are sure, what you are doing --------------------------------
	
	//overrideable values DON'T CHANGE THEM HERE, override them throught options
	this.slideWidth 			= options.slideWidth? options.slideWidth 						: 170; 		//px width of a single Slide-element
	this.effectDuration 		= options.effectDuration? options.effectDuration 				: 680; 		//time in ms (will be rounded to next Intervall-increment)
	this.autoSliding			= options.autoSliding? options.autoSliding 						: false; 	//slides automatically if true
	this.autoslideIntervall 	= options.autoslideIntervall? options.autoslideIntervall 		: 10000; 	//intervall that an autoslide-action performs
	this.autoSlideDirection 	= options.autoSlideDirection? options.autoSlideDirection 		: "next";	//autoSlide direction at start
	this.updateIntervall 		= options.updateIntervall? options.updateIntervall 				: 40; 		//time in ms (40ms = 25fps)
	this.numberOfSlides 		= options.numberOfSlides? options.numberOfSlides 				: 6; 		//total numbers of slides inside the slide-container
	this.numberOfVisibleSlides 	= options.numberOfVisibleSlides? options.numberOfVisibleSlides 	: 3; 		//visible slides at a time
		
	//internal vars
	this.slider = null;
	this.shiftTimer = null;
	this.autoTimer = null;
	this.nextButton = null;
	this.prevButton = null;
	
	//actual values (for sliding actions)
	this.aIsSliding = false;
	this.aPosition = 0; //actual shift position in px
	this.aShiftPosition = 0;
	
	//Construct
	if(slidesContainer && $(slidesContainer)){
		this.slider = $(slidesContainer);
		if($(this.slider).style.left){
			this.aShiftPosition = Math.round(Math.abs(parseInt($(this.slider).style.left.replace(/px/gi, "")) / this.slideWidth));
		}
		else{
			this.aShiftPosition = 0;
		}
		
		if(this.autoSliding){
			this.autoTimer = setTimeout(function(){this.autoSlide(true);}.bind(this), this.autoslideIntervall);
			addEvent(this.slider, "mouseover", function(){ this.stopAutoSlide(); }.bind(this));
			addEvent(this.slider, "mouseout", function(){ this.autoSlide(); }.bind(this));
		}
		
		this.nextButton = $(this.slider.id+"_next");
		this.prevButton = $(this.slider.id+"_prev");
	}
	
	//slides to the next element in given direction
	this.slide = function(direction){
		var validSlide = false;
		if(this.checkConfig && !this.aIsSliding){
			switch(direction){
				case "next":
					if(this.aShiftPosition+this.numberOfVisibleSlides < this.numberOfSlides){
						validSlide = true;
					}
					break;
				case "prev":
					if(this.aShiftPosition > 0){
						validSlide = true;
					}
					break;
				default:
					break;
			}
		}
		if(validSlide){
			this.aIsSliding = true;
			this.shiftTimer = setTimeout(function(){this.shift(direction);}.bind(this), this.updateIntervall);
		}
	}
	
	//slides periodicaly automaticaly
	this.autoSlide = function(slideIt){
		if(this.checkConfig && !this.aIsSliding){
			if(slideIt){
				this.slide(this.autoSlideDirection);
			}
			this.autoTimer = setTimeout(function(){this.autoSlide(true);}.bind(this), this.autoslideIntervall);
		}
	}	
	
	//stops autosliding
	this.stopAutoSlide = function(){
		if(this.autoTimer) clearTimeout(this.autoTimer);
	}
		
	//pauses every sliding action
	this.pauseSliding = function(){
		alert("not supported yet");
	}
	
	//this resume sliding
	this.unpauseSliding = function(){
		alert("not supported yet");
	}
	
	//shifts pixelwise
	//doesn't look performant, but it is! look closer ;)
	this.shift = function(direction){
		if(this.checkConfig){
			if(!this.aIsSliding){
				//not sliding at the time
			}
			else{			
				if(this.aPosition<this.slideWidth){
					var shiftWidth = Math.round((this.slideWidth*this.updateIntervall)/this.effectDuration);
					//todo, nice sinus modifier
					this.aPosition += shiftWidth ;
					this.aPosition = this.aPosition>this.slideWidth? this.slideWidth : this.aPosition;
					switch(direction){
						case "next":
							$(this.slider).style.left = "-"+(this.aShiftPosition*this.slideWidth+this.aPosition)+"px";
							break;
						case "prev":
							$(this.slider).style.left = "-"+(this.aShiftPosition*this.slideWidth-this.aPosition)+"px";
							break;
						default:
							break;
					}
					this.shiftTimer = setTimeout(function(){this.shift(direction);}.bind(this), this.updateIntervall);	
				}
				else{
					//slided to next slide, RESET values for a new one				
					switch(direction){
						case "next":
							this.aShiftPosition ++;
							break;
						case "prev":					
							this.aShiftPosition --;
							break;
						default:
							break;
					}
					this.aIsSliding = false;
					clearTimeout(this.shiftTimer);					
					this.updateSliderElements();
				}
			}
		}	
	}
	
	//checks the configuration
	this.checkConfig = function(){
		if(!this.slider){ return false }
		if(!this.autoslideIntervall-this.effectDuration > 1){ return false }
		if(this.numberOfSlides == 0 || this.numberOfVisibleSlides == 0){ return false }
		return true;
	}	
	
	//adjusts the sliding position, accordingly the slide-width
	this.adjustPosition = function(){
		$(this.slider).style.left = "-"+(this.aShiftPosition*this.slideWidth)+"px";
		this.aPosition = 0;
	}
	
	//updates the next and the previous button
	this.updateSliderElements = function(){
		this.adjustPosition();
		if(this.nextButton){
			if(this.aShiftPosition+this.numberOfVisibleSlides == this.numberOfSlides){	
				$(this.nextButton).className += " inactive"; 
				this.autoSlideDirection = "prev";
			}
			else{ 
				$(this.nextButton).className = this.nextButton.className.replace(/ inactive/gi, ""); 
			}
		}
		if(this.prevButton){
			if(this.aShiftPosition == 0){ 
				$(this.prevButton).className += " inactive";				
				this.autoSlideDirection = "next";
			}
			else{ 
				$(this.prevButton).className = this.prevButton.className.replace(/ inactive/gi, ""); 
			}
		}
	}
}