var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);

var zCarousel = new Class({
	Implements: Options,
	options: {
		wrapper: 'wrapper', //id of wrapper
		container: 'container', //id of scroller
		items: '.item', //classname of contents of scroller
		navnext: 'navnext', //id of next button
		navprev: 'navprev', //id of previous button
		view: 6, //number of items in view
		steps: 5, //number of items to scroll
		speed: 500 //scroll duration in miliseconds
	},
	initialize: function(options){
		this.setOptions(options);
		
		options = this.options;
		
		move = this.move;
		
		var ImageW = new GetWidth($$(options.items)); //getwidth object of .image
		//if(DEBUG==1)console.log(ImageW.amount()+ ">" +options.view);
		if(ImageW.amount() > options.view){
			$(options.navnext).setStyle('display','block');
			$(options.navprev).setStyle('display','block');
		}

		this.duplicateContent($(options.container), options.items); // duplicate container content
		var ImageW = new GetWidth($$(options.items)); //reload getwidth object of .image
		
		totalwidth = (ImageW.amount()/3) * ImageW.single();
		stepsize = ImageW.single() * options.steps;
		contain = options.container;
		speed = options.speed;
		nav_next = options.navnext;
		nav_prev = options.navprev;
		
		$(options.wrapper).setStyles({overflow: 'hidden',width: (options.view * ImageW.single())-ImageW.margin()});
		
		$(options.container).setStyle('width', ImageW.total()); // set container width so the items fits horizontally
		
		navnextevent = function(){
			move("right");
		}
		navprevevent = function(){
			move("left");
		}
		naveventstop = function(event){
			event.stop();
		}
		
		$(nav_next).addEvent('click', naveventstop);
		$(nav_prev).addEvent('click', naveventstop);
		
		$(nav_next).addEvent('click', navnextevent);
		$(nav_prev).addEvent('click', navprevevent);	
	},
	duplicateContent: function(container, items){
		items = container.getElements(items);
		items.each(function(item, index){
			var copy = item.clone();
			container.grab(copy);
		});
		items.each(function(item, index){
			var copy = item.clone();
			container.grab(copy);
		});
	},
	move: function(modifier){
		//modifier: left or right
		var status = $(contain).getStyle('margin-left').toInt();

		var myFx = new Fx.Tween($(contain), {
		   onStart: function(){
						$(nav_next).removeEvent('click', navnextevent);
						$(nav_prev).removeEvent('click', navprevevent);
						},
		   duration: speed,
		   onComplete: function(){
						$(nav_next).addEvent('click', navnextevent);
						$(nav_prev).addEvent('click', navprevevent);
						}
		}); 
		
		if(modifier == "right"){
			if(status < -totalwidth){status += totalwidth}
			myFx.start('margin-left',status,status-stepsize); 
		} 
		else if(modifier == "left") {
			if(status > -totalwidth){status -= totalwidth}
			myFx.start('margin-left',status,status+stepsize);
		}
	}
});//end zCarousel class

var GetWidth = new Class({
	// get single or total width of given items
	initialize: function(items) {
		this.items = items.getStyles('width', 'margin-right');
	},
	single: function() {
		firstWidth = 0;
		firstItem = this.items[0];
		firstWidth += firstItem['width'].toInt();
		firstWidth += firstItem['margin-right'].toInt();
		return firstWidth;
	},
	margin: function() {
		firstMargin = 0;
		firstItem = this.items[0];	
		firstMargin += firstItem['margin-right'].toInt()
		return firstMargin;
	},
	total: function() {
		totalWidth = 0;
		this.items.each(function(item, index){	
			totalWidth += item['width'].toInt();
			totalWidth += item['margin-right'].toInt();
		});
		return totalWidth;
	},
	amount: function() {
		totalAmount = 0;
		this.items.each(function(item, index){	
			totalAmount ++
		});
		return totalAmount;
	}
});//end GetWidth class