window.addEvent('domready', function(){

	var allSlideImages = $$('#slides ul li a.slide-image');

	// now get the image or lot ids and extra info
	allSlideImages.each(function(e){
		idArray = e.get('id').split('-');
		id = idArray[1];
		type = idArray[0];
		crop = idArray[2].replace(/_/g, ' ');
		var args = '?id=' + id + '&type=' + type + '&crop=' + crop;


		var imageRequest = new Request({
			url: 'generateCarouselImages.php' + args,
			method: 'get',

			onComplete: function(responseText, responseXML) {
				imageElement = new Element('img', {
					'src': responseText
				})
				e.grab(imageElement);
			}


		}).send();
	});


	// request the preview images
	// find the slots in the first rank of the carousel
	var allPreviewImages = $$('#preview-groups ul li a');

	
	// now get the image or lot ids and extra info
	allPreviewImages.each(function(e){
		idArray = e.get('id').split('-');
		id = idArray[1];
		type = idArray[0];
		crop = idArray[2];
		var args = '?id=' + id + '&type=' + type + '&crop=' + crop;


		var imageRequest = new Request({
			url: 'generateCarouselImages.php' + args,
			method: 'get',

			onComplete: function(responseText, responseXML) {
				imageElement = new Element('img', {
					'src': responseText
				})
				e.grab(imageElement);
			}
			

		}).send();
	});

	

});



var carouselExt = {
	init: function(panels, nextController, previousController, eventType, offset) {
		if ($chk($$(panels))) {
			carouselExt = new CarouselExt({
				nextController : nextController,
				previousController : previousController,
				panels : panels,
				eventType : eventType,
				offset: offset
			});
		}
	}
}

CarouselExt = new Class ({
	Implements: [Options],

	options: {
		nextController : null,
		previousController : null,
		panels : 'panels',
		eventType : 'click',
		offset: '840px'
	},

	nextController : null,
	previousController : null,
	panels : null,
	slides : null,
	currentContentSlide: null,
	contentSlideId: 'slides',
	currentPanel : 0,
	offset: '840px',
	effectProperty : 'left',

	initialize: function(options) {
		this.setOptions(options);
		this.nextController = $$(this.options.nextController);
		this.previousController = $$(this.options.previousController);
		this.panels = $$(this.options.panels);
		
		// establish the first slide in the content slides
		//this.currentContentSlide = $$('#' + this.contentSlideId + 'ul li');
		this.currentContentSlide = $$('#slides ul li')[0];
		
		this.run();
	},

	run: function() {
		this.slides = new Array();
		if (this.panels) {

			// Initialize the toggle events
			this.panels.each(function(el,key) {
				var slideE = null;
				slideE = new Fx.Tween(el);				
				this.slides.include(slideE);
				
			}.bindWithEvent(this));
			

			// add events to the previews in the preview groups to trigger a change in the main slide content
			var previews = this.panels.getElements('li a');
			var self = this;
			previews.each(function(p){
				p.addEvent('click', function(ev){
					ev.stop();
					// fade out the current slide and show the one with the same id as the one clicked

					// get the current slides id
					var currentContentSlide = self.currentContentSlide;
					currentContentSlide.addClass('hidden');

					// get the id of the one clicked
					var id = this.get('id').split('-')[1];
					var currentSelector = '#slides ul li[id*=' + id + ']';
					$$(currentSelector)[0].removeClass('hidden');
					self.currentContentSlide = $$(currentSelector)[0];
					
				});
			});
			

			// get the offset
			var offset = this.options.offset;

			// Adds onClick events to each controller.
			this.nextController.addEvent(this.options.eventType, function(e) {
				e.stop();
				if (this.lock) {
					return;
				}
				var nextPanel = this.currentPanel + 1;
				if (nextPanel >= this.slides.length) {
					nextPanel = 0;
				}
				this.slides[this.currentPanel].onComplete = function() {
					this.lock = false;
				}.bindWithEvent(this);
				this.lock = true;
				this.slides[this.currentPanel].start(this.effectProperty, '0', '-' + offset);
				this.slides[nextPanel].start(this.effectProperty, offset, '0');
				this.currentPanel = nextPanel;
			}.bindWithEvent(this));

			this.previousController.addEvent(this.options.eventType, function(e) {
				e.stop();
				if (this.lock) {
					return;
				}
				var previousPanel = this.currentPanel - 1;
				if (previousPanel < 0) {
					previousPanel = this.slides.length - 1;
				}
				this.slides[this.currentPanel].onComplete = function() {
					this.lock = false;
				}.bindWithEvent(this);
				this.lock = true;
				this.slides[this.currentPanel].start(this.effectProperty, '0', offset);
				this.slides[previousPanel].start(this.effectProperty, '-' + offset, '0');
				this.currentPanel = previousPanel;
			}.bindWithEvent(this));
		}
	}
});