MCarousel = Class.create(Abstract, {

	initialize: function(carousel, options) {

		//check if the carousel is hidden, then it should be hidden after initialization again.
		//but through the initialization process it must be visible so show it now
		var hideAfterInit = false;
		if($(carousel).up().getStyle('display') == 'none') {
			hideAfterInit = true;
			$(carousel).up().show();
		}

		this.options    = Object.extend({
			carousel:		carousel,
			prevButton: 	$(carousel).select('.cPrevButton')[0],
			nextButton: 	$(carousel).select('.cNextButton')[0],
			viewport:		$(carousel).select('.cViewport')[0],
			itemWidth:		$(carousel).select('.cItem')[0].getWidth(),
			position:		'start',
			currentStart:	0,
			resizeTimer:	0,
			type:			$($(carousel).id + '_type').value
		}, options || {});

		//items mit IDs versehen
		var items = $(carousel).select('.cItem');
		for(i=0; i<items.length; i++) {
			items[i].id = $(carousel).id+'_i'+i;
		}

		this.initViewport();
		this.initNavButtons();
		Event.observe(window, "resize", this.initResize.bind(this));

		//hide the carousel again if it was showed up only for initialization
		if(hideAfterInit == true) {
			$(this.options.carousel).up().hide();
		}
	},

	initResize: function(e) {
		this.options.resizeTimer = new Date().getTime() + 200;
		setTimeout(this.doResize.bind(this), 250);
	},

	doResize: function() {
		//check if the carousel is hidden, then it should be hidden after resize again.
		//but through the resize process it must be visible so show it now
		var hideAfterInit = false;
		if($(this.options.carousel).up().getStyle('display') == 'none') {
			var hideAfterInit = true;
			$(this.options.carousel).up().show();
		}

		var currentTime = new Date().getTime();
		if(currentTime > this.options.resizeTimer) {
			this.initViewport();
			var itemCount = this.getItemCountForViewport();
			this.loadContent(this.options.currentStart, itemCount, 'resize');
		}

		//hide the carousel again if it was showed up only for resize
		if(hideAfterInit == true) {
			$(this.options.carousel).up().hide();
		}
	},

	initViewport: function() {
		this.options.startItem = this.getItemCountForViewport();
		$(this.options.viewport).setStyle({'width' : ($(this.options.carousel).getWidth())+'px'});
	},

	initNavButtons: function() {
		//prev button
		this.options.prevButton.observe('click', this.onPrevButtonClick.bind(this));
		//next button
		this.options.nextButton.observe('click', this.onNextButtonClick.bind(this));
	},

	onPrevButtonClick: function(e) {
		if(this.options.position != 'start') {
			//$(this.options.viewport).update('<img style="margin-top: 90px;" src="/images/ajax-loader.gif"/>');
			var itemCount = this.getItemCountForViewport();
			this.loadContent(this.options.startItem, itemCount, 'prev');
		}
	},

	onNextButtonClick: function(e) {
		if(this.options.position != 'end') {
			//$(this.options.viewport).update('<img style="margin-top: 90px;" src="/images/ajax-loader.gif"/>');
			var itemCount = this.getItemCountForViewport();
			this.loadContent(this.options.startItem, itemCount, 'next');
		}
	},

	getItemCountForViewport: function() {
		return Math.floor(this.getViewportWidth() / this.options.itemWidth) + 1;
	},

	getViewportWidth: function() {
		return $(this.options.viewport).getWidth() - this.options.itemWidth;
	},

	loadContent: function(startItem, itemCount, mode) {
		this.options.currentStart = startItem;
		if(startItem < 0) {
			startItem = 0;
		}
		var url = 'ajax/carousel.php?action='+this.options.type+'&productId='+$('productId').value+'&start='+startItem+'&count='+itemCount+'&mode='+mode;
		new Ajax.Request(url, {
			method: 'get',
			onSuccess: this.updateViewport.bind(this)
		});
	},

	updateViewport: function(transport) {
		var response = transport.responseText.evalJSON(true);
		var items = $(this.options.carousel).select('.cItem');

		var mode = response[4];

		this.options.position = response[3];

		if(this.options.position == 'start') {
			$(this.options.prevButton).addClassName('cPrevButtonDisabled');
			$(this.options.nextButton).removeClassName('cNextButtonDisabled');
		} else if(this.options.position == 'end') {
			$(this.options.nextButton).addClassName('cNextButtonDisabled');
			$(this.options.prevButton).removeClassName('cPrevButtonDisabled');
		} else {
			$(this.options.prevButton).removeClassName('cPrevButtonDisabled');
			$(this.options.nextButton).removeClassName('cNextButtonDisabled');
		}

		if(mode == 'next') {
			var count = 0;
			for(i = this.getItemCountForViewport(); i >= 0; i--) {
				count++;
				if(response[5][i] != undefined) {
					var content = response[5][i];
				} else {
					var content = '';
				}
				setTimeout('$(\''+items[i].id+'\').update(\''+content+'\')', count *  30);
			}
		} else if(mode == 'prev') {
			var count = 0;
			for(i = 0; i <= this.getItemCountForViewport(); i++) {
				count++;
				if(response[5][i].length > 0) {
					var content = response[5][i];
				} else {
					var content = '';
				}
				setTimeout('$(\''+items[i].id+'\').update(\''+content+'\')', count *  30);
			}
		} else {
			var count = 0;
			for(i = this.getItemCountForViewport(); i >= 0; i--) {
				if(response[5][i] != undefined) {
					var content = response[5][i];
				} else {
					var content = '';
				}
//				$(items[i]).update(content);
				setTimeout('$(\''+items[i].id+'\').update(\''+content+'\')', 0);
			}
		}

		this.options.startItem = response[1];
	}
});

function selectCarousel(tab, carouselId) {
	//gehe 2 div nach oben und suche dort nach allen vorhandenen .carousel
	$(tab).up().up().select('.carousel').each(function(n) {
										$(n).up().hide();
									});
	$(carouselId).up().show();

	//ein div nach oben und alle tabs raussuchen und deaktivieren
	$(tab).up().select('.carouselTab').each( function(n) {
															$(n).removeClassName('carouselActiveTab');
														});
	$(tab).addClassName('carouselActiveTab');
}