/* google api load */
google.setOnLoadCallback(function() {
	/* mootools secure */
	(function($){
		/* dom ready event */
		window.addEvent('domready', function() {
/* ########## */
/**
 * Class slidingBox
 * realized with mootools 1.2.4
 * @author Markus Brunner <markus.brunner(at)netformic(dot)de>
 */
var slidingBox = new Class({
	Implements: [Events,Options,Chain],
	slidingBox: null,
	navigation: null,
	contentElements: null,
	navigationElements: null,
	currentIter: 0,
	currentObjIter: 0,
	nextObjIter: 1,
	chainingObj: null,
	slidingTransition: null,
	slidingTransitionNext: null,
	cancelled: false,
	options: {
		startingClass: 'sliding-box',
		startingClassWithPrefix: '',
		navigationClass: 'sliding-navigation',
		navigationClassWithPrefix: '',
		contentClass: 'sliding-content-element',
		contentClassWithPrefix: '',
		slidingBoxWidth: '234px',
		slidingBoxHeight: '168px',
		disableNavigation: false,
		slideTime: 1000,
		startAdditionalDelayTime: 1000,
		delayTime: 3000,
		maxIter: 50
	},
	initialize: function(options){
		// set options
		this.setOptions(options);
		
		// set classNames for selection
		this.options.startingClassWithPrefix = '.'+this.options.startingClass;
		this.options.navigationClassWithPrefix = '.'+this.options.navigationClass;
		this.options.contentClassWithPrefix = '.'+this.options.contentClass;
		
		// get elements
		this.slidingBox = $$(this.options.startingClassWithPrefix);	
		this.navigation = $$(this.options.startingClassWithPrefix+' > '+this.options.navigationClassWithPrefix);		
		this.contentElements = $$(this.options.startingClassWithPrefix+' > '+this.options.contentClassWithPrefix);
		
		if(this.contentElements.length > 1) {			
			// set sliding box css options
			this.slidingBox.setStyles({
				'position':'relative',
				'overflow':'hidden',
				'width':this.options.slidingBoxWidth,
				'height':this.options.slidingBoxHeight
			});

			// insert clickable navigation numbers
			if(this.options.disableNavigation !== true) {
				this.initNavigation();
			}

			// start sliding
			(function(){ 
				this.doSlideAction();	
			}).delay(this.options.startAdditionalDelayTime,this);
		}
	},
	initNavigation: function(){
		// set navigation
		var navigationHTML = '';
		for(i=0; i<this.contentElements.length; i++){
			navigationHTML += '<span>'+(i+1)+'</span>';
		}
		this.navigation.setStyles({
			'position':'absolute',
			'z-index':1,
			'cursor':'pointer'
		});
		this.navigation.set('html', navigationHTML);
		
		// get navigation elements
		this.navigationElements =  $$(this.options.startingClassWithPrefix+' > '+this.options.navigationClassWithPrefix+' > span');
		
		// do slide to clicked entry
		this.navigationElements.each(function(item, index){
			item.addEvent('click', (function(){
				// stop Fx-Tweens
				if(typeof this.obj.slidingTransition == 'object') {
					this.obj.slidingTransitionNext.cancel();
				} 
				if(typeof this.obj.slidingTransition == 'object') {
					this.obj.slidingTransitionNext.cancel();
				}
				this.obj.cancelled = true;
				
				// set all boxes out of viewport
				this.obj.contentElements.setStyle('left','-'+this.obj.options.slidingBoxWidth);
				
				// set clicked element visible
				this.obj.contentElements.setStyle('left','-'+this.obj.options.slidingBoxWidth);
				this.obj.contentElements[index].setStyle('left','0px');
				
				// set active number
				this.obj.navigationElements.removeClass('active');
				this.obj.navigationElements[index].addClass('active');
				
				// set actual currentObjIter
				this.obj.currentObjIter = index;
				
			}).bind({obj:this.obj, currentObjIter:this.currentObjIter, nextObjIter:this.nextObjIter, contentElements:this.contentElements, options:this.options}));
		},{obj:this, currentObjIter:this.currentObjIter, nextObjIter:this.nextObjIter, contentElements:this.contentElements, options:this.options});
	},
	doSlideAction: function() {
		if(this.currentIter < this.options.maxIter && this.cancelled === false) {
			// determine current layer
			if(!$defined(this.contentElements[this.currentObjIter])) {
				this.currentObjIter = 0;
			}
			
			// determine next layer
			if(!$defined(this.contentElements[this.nextObjIter])) {
				this.nextObjIter = 0;
			}
			
			// do slide for specific step
			this.doSlideActionStep(this.currentObjIter, this.nextObjIter);
		}
	},
	doSlideActionStep: function(currentStep, nextStep){
		// get default settings for current boxes
		for(i=0; i<this.contentElements.length; i++){
			if(i != currentStep) {
				this.contentElements[i].setStyles({
					'position':'absolute',
					'left':'-'+this.options.slidingBoxWidth,
					'top':'0px',
					'display':'block'
				});
			}
		}
		
		// do slide transition
		this.slidingTransition = new Fx.Tween(this.contentElements[currentStep], {duration: this.options.slideTime});
		this.slidingTransitionNext = new Fx.Tween(this.contentElements[nextStep], {duration: this.options.slideTime, onStart: (function(){
			// start sliding of currentElement
			this.slidingTransition.start('left','0px',this.options.slidingBoxWidth);
			// set actual navigation
			if(this.options.disableNavigation !== true) {
				this.navigationElements.removeClass('active');
				if($defined(this.navigationElements[nextStep])) {
					this.navigationElements[nextStep].addClass('active');
				}
			}
		}).bind(this), onComplete: (function(){
			if(this.cancelled === false){
				this.slidingTransition = null;
				this.slidingTransitionNext = null;
				this.doSlideAction();
			}
		}).bind(this)});
		
		// delayed start for disabled navigation
		(function(){ 
			if(this.cancelled !== true) {
				this.slidingTransitionNext.start('left','-'+this.options.slidingBoxWidth,'0px');
			}
		}).delay(this.options.delayTime,this);
		
		// increase iterators
		this.currentIter = this.currentIter+1;
		this.currentObjIter = currentStep+1;
		this.nextObjIter = nextStep+1;
	},
	complete: function(){
		 this.fireEvent('complete');
	}
});
/**
 * initialization
 */
var mySlidingBox = new slidingBox({
	startingClass: 'sliding-box',
	navigationClass: 'sliding-navigation',
	contentClass: 'sliding-content-element',
	slidingBoxWidth: '234px',
	slidingBoxHeight: '168px',
	disableNavigation: false,
	slideTime: 3000,
	startAdditionalDelayTime: 1000,
	delayTime: 7000,
	maxIter: 50
});
/* ########## */
		});
	})(document.id);
});