var CarrouselHandler = new Class({
	
	domain: window.location.hostname,
	ajaxURL: 'http://' + window.location.hostname + '/ajax.php/data/getRandomAssociation',
	associationURL: '/vereinsuebersicht/verein/',
	thumbDir: '/uploads/images/thumbnails/',
	thumbDirPrefix: '../../',
	
	visibleAssociations: '',
	carrouselElements: '',
	carrouselElementContainer: '',
	associationElementClone: '',	
	leftElement: '',
	rightElement: '',
	activeElement: '',
	leftBuffer: '',
	rightBuffer: '',
	isActive: false,
	
	initialize: function(carrouselElementClass) {
	
		this.leftArrow = $('carrouselLeftArrow');
		this.rightArrow = $('carrouselRightArrow');
		this.carrouselElementClass = carrouselElementClass;
		this.carrouselElementContainer = $$('div#carrouselWrapper div.contentWrapper div.content')[0];
		this.carrouselWidth = this.carrouselElementContainer.getStyle('width').toString().toInt();
		
		this.carrouselDataInserter = new CarrouselDataInserter({
			domain: this.domain,
			ajaxURL: this.ajaxURL,
			associationURL: this.associationURL,
			thumbDir: this.thumbDir,
			thumbDirPrefix: this.thumbDirPrefix,
			onRequestCompleteLeft: function() {
				this.afterRequestCompleteLeft();
			}.bind(this),
			onRequestCompleteRight: function() {
				this.afterRequestCompleteRight();
			}.bind(this)
		});
		
		this.parseElements();
		this.setBuffer();
		
		//add events
		this.addEvents();
		
	},
	
	addEvents: function() {
		
		this.leftArrow.addEvent('click', function(event){
			if (!this.isActive) {
				this.isActive = true;
				this.tweenLeft();
			}
		}.bind(this));
		this.rightArrow.addEvent('click', function(event){
			if (!this.isActive) {
				this.isActive = true;
				this.tweenRight();
			}
		}.bind(this));
		
	},
	
	parseElements: function() {
		
		//preparation
		this.carrouselElements = $$(this.carrouselElementClass);
		this.carrouselElementWidth = this.carrouselElements[0].getStyle('width').toString().toInt();
		
		//go through elements and reference important ones
		numberElements = this.carrouselElements.length;
		counter = 1;
		this.visibleAssociations = new Array();
		this.carrouselElements.each(function(el) {
			this.visibleAssociations.extend([el.getAttribute('id').match(/\d+/)[0]]); //store IDs to avoid double associations
			if (counter == 1) {
				this.leftElement = el;
				//clone an element to have a template for new association elements
				this.associationElementClone = el.clone();
			}
			if ((numberElements/2).ceil() == counter) {
				this.activeElement = el;
			}
			if (counter == numberElements) {
				this.rightElement = el;
			}
			counter++;
		}.bind(this));
		
		this.isActive = false;
		
	},
	
	setBuffer: function() {
		
		this.leftBuffer = $('carrouselLeftBuffer');
		this.rightBuffer = $('carrouselRightBuffer');
		
	},
	
	tweenLeft: function() {
		
		//minimize right element, will be destroyed
		var tweenRightElement = new Fx.Tween(this.rightElement, {
	    	property: 'width'
	    });
		tweenRightElement.start(0);
		
		//maximize left buffer, will be filled with new data
		var tweenLeftBuffer = new Fx.Tween(this.leftBuffer, {
	    	property: 'width',
	    	onComplete: function() {
	    		this.afterTweenLeft();
	    	}.bind(this)
	    });
		tweenLeftBuffer.start(this.carrouselElementWidth);
		
	},
	
	afterTweenLeft: function() {
		
		//add new association-data in left buffer
		this.carrouselDataInserter.setVisibleAssociations(this.visibleAssociations);
		this.carrouselDataInserter.setAssociationElementClone(this.associationElementClone);
		this.carrouselDataInserter.insertAssociationData('left', this.leftBuffer);					
		
	},
	
	afterRequestCompleteLeft: function() {
		
		//destroy left element
		this.rightElement.destroy();	
		
		//add new left buffer
		newBuffer = new Element('div', {'id': 'carrouselLeftBuffer'});
		newBuffer.innerHTML = ' ';
		this.carrouselElementContainer.grab(newBuffer, 'top');
		
		this.setBuffer();		
		this.parseElements();
		
	},
	
	tweenRight: function() {
		
		//minimize left element, will be destroyed
		var tweenLeftElement = new Fx.Tween(this.leftElement, {
	    	property: 'width'
	    });
		tweenLeftElement.start(0);
		
		//maximize right buffer, will be filled with new data
		var tweenRightBuffer = new Fx.Tween(this.rightBuffer, {
	    	property: 'width',
	    	onComplete: function() {
	    		this.afterTweenRight();
	    	}.bind(this)
	    });
		tweenRightBuffer.start(this.carrouselElementWidth);
		
	},
	
	afterTweenRight: function() {
		
		//add new association-data in right buffer
	    this.carrouselDataInserter.setVisibleAssociations(this.visibleAssociations);
		this.carrouselDataInserter.setAssociationElementClone(this.associationElementClone);
		this.carrouselDataInserter.insertAssociationData('right', this.rightBuffer);					
			
	},
	
	afterRequestCompleteRight: function() {
		
		//destroy left element
		this.leftElement.destroy();
		
		//add new right buffer
		newBuffer = new Element('div', {'id': 'carrouselRightBuffer'});
		newBuffer.innerHTML = ' ';
		this.carrouselElementContainer.grab(newBuffer, 'bottom');
		
		this.setBuffer();		
		this.parseElements();
		
	}
	
});

var CarrouselDataInserter = new Class({
	
	Implements: [Events, Options],
	
	options: {
		/*
		onRequestCompleteLeft: $empty,
		onRequestCompleteRight: $empty,
		*/
		domain: null,
		ajaxURL: null,
		associationURL: null,
		thumbDir: null,
		thumbDirPrefix: null
	},
	
	initialize: function(options) {
		this.setOptions(options);
	},
	
	setVisibleAssociations: function(visibleAssociations) {
		this.visibleAssociations = visibleAssociations;
	},
	
	setAssociationElementClone: function(associationElementClone) {
		this.associationElementClone = associationElementClone;
	},
	
	insertAssociationData: function(type, target) {
		
		var jsonRequest = new Request.JSON({url: this.options.ajaxURL, 
			onSuccess: function(data) {
			
				//name
				this.associationElementClone.getElement('td.text').innerHTML = data.name;				
				//image
				oldImg = this.associationElementClone.getElement('img.contentImage');
				oldImgSRC = oldImg.src;				
				oldImg.src = this.options.thumbDirPrefix + data.company + this.options.thumbDir + data.image;
				oldImg.alt = data.nameAlt;				
				//link
				this.associationElementClone.getElement('a').href = this.options.associationURL + data.id + '/' + data.nameSlug;
			    
				//add new element
				target.empty();
				target.innerHTML = this.associationElementClone.innerHTML;
				target.setProperty('id', 'carrouselAssociation' + data.id);
				target.addClass('carrouselElement');				
				
				if (type == 'left') {
					this.fireEvent('requestCompleteLeft');
				}
				if (type == 'right') {
					this.fireEvent('requestCompleteRight');
				}
				
			}.bind(this)
		}).get({'domain': this.options.domain, 'visibleAssociations': this.visibleAssociations});
		
	}
	
});

window.addEvent('domready', function() {
	new CarrouselHandler('.carrouselElement');
});