// Feb 11 2009 Eric Bennett <eric@jaze.com.au>
// Single Carousel functions
// Large single display carousel function with seperate strip based control panel
// docs @ http://docs.bluetree7.com.au/Site/Docs/Page/3975
Aurora.Carousel = new Class({
	Implements: Options,
	options: {
		transitionInterval: 1000,
		wrapTag: "wrap",
		carouselTag: "carousel",
		frameWidth: 800,
		frameHeight: 600,
		thumbWidth: 70,
		selectedTag: "selected",
		thumbnails: "thumbnails",
		itemTag: "#thumbnails li",
		framesTag: "#carousel li",
		thumbTag: ["thumbnail/","_thumb"],
		controlTag: "control",
		thumbRowLength: 15,
		nextTag: "next",
		prevTag: "previous"
	},
	initialize: function( options ) {
		this.setOptions( options );
		this.carousel = $(this.options.carouselTag);
		this.controlpanel = $(this.options.controlTag);
		this.wrapper = $(this.options.wrapTag);
		this.photoframe = $(this.options.photoTag);
		this.thumbnails = $$(this.options.itemTag);
		this.thumbs = $(this.options.thumbnails);
		this.cpanelWidth = this.options.thumbWidth * this.options.thumbRowLength
		this.set_blank_frames();
		this.currentSlide = 0;
		this.next = $(this.options.nextTag);
		this.prev = $(this.options.prevTag);
		this.itemWidth = this.options.frameWidth;
		this.maxMargin = this.itemWidth * 3;
		this.position = 0;
		this.animation = new Fx.Tween(this.carousel, {duration: this.options.transitionInterval });
		this.bind_events();
		this.bind_navbuttons();
		this.set_frame(0);
		this.setStyles();
	},
	setStyles: function() {
		// Set the appropriate styles.
		cpanelStyles = new Hash({
		width: this.cpanelWidth
		});
		thumbStyles = new Hash({
		});
		wrapperStyles = new Hash({
			clear: 'left',
			height: this.options.frameHeight, 
			width: this.options.frameWidth,
			display: 'block',
			overflow: 'hidden',
			position: 'relative'
		});
		carouselStyles = new Hash({
			width: this.itemWidth * this.photoframes.length,
			margin: 0,
			padding: 0,
			position: 'absolute',
			top: 0,
			left: 0
		});
		photoframesStyles = new Hash({
			height: this.options.frameHeight,
			width: this.options.frameWidth,
			margin: 0,
			padding: 0,
			float: 'left',
			display: 'inline'
		});
		thumbnailsStyles = new Hash({
			height: this.thumbnails.getFirst('img').getHeight(),
			width: this.thumbnails.getFirst('img').getWidth(),
			float: 'left'
		});
		thumbStyles.extend(this.thumbs.getStyles()).getClean();
		thumbStyles = thumbStyles.getClean();
		cpanelStyles.extend(this.controlpanel.getStyles()).getClean();
		cpanelStyles = cpanelStyles.getClean();
		wrapperStyles.extend(this.wrapper.getStyles());
		wrapperStyles = wrapperStyles.getClean();
		carouselStyles.extend(this.carousel.getStyles());
		carouselStyles = carouselStyles.getClean();
		photoframesStyles.extend(this.photoframes.getStyles());
		photoframesStyles = photoframesStyles.getClean();
		thumbnailsStyles.extend(this.thumbnails.getStyles());
		thumbnailsStyles = thumbnailsStyles.getClean();
		this.thumbs.setStyles(thumbStyles);	
		this.controlpanel.setStyles(cpanelStyles); 	
		this.wrapper.setStyles(wrapperStyles);
		this.carousel.setStyles(carouselStyles);
		this.photoframes.setStyles(photoframesStyles);
		this.thumbnails.setStyles(thumbnailsStyles);
	},
	set_blank_frames: function() {
	// Set blank frames for the main windows
		this.thumbnails.each(function(element) {
			this.framewrapper = new Element('li');
			this.frame = new Element('img');
			this.framewrapper.grab(this.frame);
			this.carousel.grab(this.framewrapper, 'bottom');	
		}.bind(this));	
		this.photoframes = $$(this.options.framesTag);
	},
	bind_events: function() {
	// Bind the events to the thumbnail controls
		this.thumbnails.each(function(element,index) {
			element.removeEvents();
			element.addEvent('click', function(event) {
				event.stop();	
				this.thumbnails.removeClass('selected');
				this.thumbnails[index].addClass('selected');
				this.set_frame(index);
			}.bind(this));
		}.bind(this));
	},
	bind_navbuttons: function() {
	// Bind events to the nav controls
	// 	
		this.next.removeEvents();
		this.next.addEvent('click', function(event) {
			event.stop;
			this.slide_next();
		}.bind(this));
		this.prev.removeEvents();
		this.prev.addEvent('click', function(event) {
			event.stop;
			this.slide_prev();
		}.bind(this));
	},
	slide_next: function() {
		offset = this.currentSlide + 1;
		if ( offset > this.thumbnails.length - 1) {
			offset = 0;			
		}
			windowNext = this.process_thumbnail(this.thumbnails[offset].getFirst('img').get('src'));
			this.photoframes[offset].getFirst('img').set('src',windowNext);
			this.slide_to_frame(offset);
	},
	slide_to_frame: function(frame) {
		this.photoframes.setStyle('display','none');
		this.photoframes[this.currentSlide].setStyle('display','block');
		this.photoframes[frame].setStyle('display','block');
		if ( frame <= this.currentSlide ) { 
		this.animation.start('left',-this.itemWidth,0);
		} else {
		this.animation.start('left',0,-this.itemWidth);
		}
		this.currentSlide = frame; 
	},
	slide_prev: function() {
		offset = this.currentSlide - 1;
		if (offset < 0) {
		offset = this.thumbnails.length - 1;
		}
		prev = this.process_thumbnail(this.thumbnails[offset].getFirst('img').get('src'));
		this.photoframes[offset].getFirst('img').set('src',prev);
		this.slide_to_frame(offset);
	},
	process_thumbnail: function(thumb) {
	// Returns the full name of the image from the thumbnail 
	// name by applying regexes
		if (this.options.thumbTag.constructor == Array) {
		this.options.thumbTag.each(function(ttag) {
			regex = new RegExp(ttag, "i");
			thumb = thumb.replace(regex, '');
		});
		} else {
			regex = new RegExp(this.options.thumbTag, "i");
			thumb = thumb.replace(regex, '');
		}
		return thumb;
	},
	set_frame: function(slide,which) {
		current = this.process_thumbnail(this.thumbnails[slide].getFirst('img').get('src'))
		this.photoframes[slide].getFirst('img').set('src',current);
		if ( slide != this.currentSlide) this.slide_to_frame(slide);
	}
});
window.addEvent('domready', function()
{
Aurora._carousel = new Aurora.Carousel({});
});