if (!cx) var cx = {};
if (!cx.controls) cx.controls = {};
cx.controls.PagingSlider = Class.create();
cx.controls.PagingSlider.prototype = {
	
	classname: 'cx.controls.PagingSlider',
		
	width: 495,
	height: 330,
	items: [],
	tbHeight: 50,
	target: null,
	currentIndex: 0,
	scrollItems: 1,
	duration: 0.8,
			
	initialize : function (config){
		
		this.width = config.width ? config.width : this.width;
		this.height = config.height ? config.height : this.height;
		this.tbHeight = config.tbHeight ? config.tbHeight : this.tbHeight;
		
		this.scrollWidth = config.scrollWidth ? config.scrollWidth : this.width;
		this.scrollHeight = config.scrollHeight ? config.scrollHeight : this.height;
		
		this.items = config.items ? config.items : this.items;
		this.target = config.target ? config.target : this.target;
		
		this.scrollItems = config.scrollItems ? config.scrollItems :  this.scrollItems;
		this.duration = config.duration ? config.duration :  this.duration;
		
		this.wrapper = document.createElement('div');
		this.wrapper.style.height = this.height+"px";
		//this.wrapper.style.position = "relative";
		
		this.currentIndex = 0;
		
		this.pagesTotal = Math.ceil(this.items.length / this.scrollItems);
		this.currentPage = 1;
		
		this.render();
	},
	
	render: function() {
		
		this.viewPort = document.createElement('div');
		this.viewPort.style.width = this.width+"px";
		this.viewPort.style.height = this.height+"px";
		this.viewPort.style.overflow = "hidden";
		
		var tb = document.createElement('div');
		tb.style.width = this.width+"px";
		tb.style.height = this.tbHeight+"px";
				
		var navLeft = document.createElement('img');
		navLeft.src = "/_custom/default/_com/gfx/icons/pagearrow_left.gif";
		navLeft.style.cssFloat = "left";
		navLeft.style.styleFloat = "left";
		navLeft.style.cursor = "pointer";
		navLeft.style.display = "none";
		Event.observe(navLeft, 'click', this.navLeft.bind(this));
		
		var navRight = document.createElement('img');
		navRight.src = "/_custom/default/_com/gfx/icons/pagearrow_right.gif";
		navRight.style.cssFloat = "right";
		navRight.style.styleFloat = "right";
		navRight.style.cursor = "pointer";	
		Event.observe(navRight, 'click', this.navRight.bind(this));
		
		var navSpacer = document.createElement('div');
		navSpacer.id = "pageInfo";
		navSpacer.style.marginLeft = Math.ceil(this.width*4/5) + "px";		
		
		if (this.items.length > this.scrollItems) {
			
			tb.appendChild(navLeft);
			tb.appendChild(navRight);
			tb.appendChild(navSpacer);
		}
		
		this.btnLeft = navLeft;
		this.btnRight = navRight;
		this.pageInfo = navSpacer;
		this.updatePageInfo(0);
				
		var fullWidth = this.pagesTotal * this.width;
		for (var i=0;i<this.items.length;i++) {
			var item = this.items[i];
			
			if (item) {
				
				item.style.cssFloat = "left";
				item.style.styleFloat = "left";
				item.style.height = this.height+"px";
				item.style.width = Math.ceil(this.width/this.scrollItems)+"px";
				this.wrapper.appendChild(item);
			}
		}
		this.wrapper.style.width = fullWidth+"px";
		this.viewPort.appendChild(this.wrapper);

		this.target.insert(this.viewPort);
		this.target.insert(tb);
	},
	
	navLeft: function() {

		this.currentIndex -= this.scrollItems;
		if (this.currentIndex < 0) this.currentIndex = 0;
		this.moveTo(this.items[this.currentIndex], this.duration);
		this.updateNavButtons();
		this.updatePageInfo(-1);
	},
	
	navRight: function() {
		
		this.currentIndex += this.scrollItems;
		if (this.currentIndex >= this.items.length) this.currentIndex = this.items.length-1;
		this.moveTo(this.items[this.currentIndex], this.duration);
		this.updateNavButtons();
		this.updatePageInfo(1);
	},
	
	updateNavButtons: function() {
				
		if (this.currentIndex == 0) {
			this.btnLeft.style.display = "none";
		}
		else this.btnLeft.style.display = "inline";
		
		if (this.items.length-this.scrollItems > this.currentIndex) {
			this.btnRight.style.display = "inline";
		}
		else this.btnRight.style.display = "none"; 
	},
	
	moveTo: function(element, duration){
		
		this.current = element;
		Position.prepare();
		var containerOffset = Position.cumulativeOffset(this.viewPort),
		elementOffset = Position.cumulativeOffset(element);
		this.scrolling 	= new Effect.SmoothScroll(this.viewPort, {duration:duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
		return false;
	},
	
	setIndex: function(index) {
		
		if (index < 0) return;
		var oldIndex = this.currentIndex
		this.currentIndex = ((index+1)*this.scrollItems)-1;
		this.moveTo(this.items[this.currentIndex], this.duration);
		this.updatePageInfo(index);
		this.updateNavButtons();
	},
	
	updatePageInfo: function(direction) {
		
		this.currentPage += direction;
		
		if (location.href.split("/")[3] == "it") {
			var pageLabel = "pagina ";
		}
		else {
			var pageLabel = "Seite ";			
		}
		
		this.pageInfo.innerHTML = pageLabel + this.currentPage + " | " + this.pagesTotal;
	}
}

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
	initialize: function(element) {
		this.element = $(element);

		var options = Object.extend({
			x:    0,
			y:    0,
			mode: 'absolute'
		} , arguments[1] || {}  );
		this.start(options);
	},
	setup: function() {
		if (this.options.continuous && !this.element._ext ) {
			this.element.cleanWhitespace();
			this.element._ext=true;
			this.element.appendChild(this.element.firstChild);
		}
   
		this.originalLeft=this.element.scrollLeft;
		this.originalTop=this.element.scrollTop;
   
		if(this.options.mode == 'absolute') {
			this.options.x -= this.originalLeft;
			this.options.y -= this.originalTop;
		} 
	},
	update: function(position) {

		this.element.scrollLeft = this.options.x * position + this.originalLeft;
		this.element.scrollTop  = this.options.y * position + this.originalTop;
	}
});