/*============================================================
	Carousel with Links
============================================================*/
function CarouselClass(container_name, slideArray, altArray, linkArray, optionObj) {

	this.slideCount;
	this.slideCurrent = 0;
	this.slideLast = 0;
	this.slideImage = slideArray;
	this.slideAlt = altArray;
	this.slideCount = this.slideImage.length;
	this.slideLink = linkArray;
	this.container_name = container_name;
	this.container = $(container_name);
	this.imageContainer;
	this.imagesLoaded = 0;
		
	this.height = this.container.height();
	this.width = this.container.width();
	
	this.option = {
		height: this.container.height(),
		width: this.container.width(),
		delayTime:5,
		transitionTime:1,
		transitionType:'step',
		padding:0,
		direction:'vertical',
		target:'_blank'
	};
	$.extend(this.option, optionObj);
	
	this.slideTransitionTime = this.option.transitionTime; // seconds
	this.slideDelayTime = this.option.delayTime; // seconds
	this.slideRotateIID = -1;
	this.height = this.option.height;
	this.width = this.option.width;


	this.buildCarousel = function() {
		
		var i, ilen;
		var lastImage = '';
		var lastText = '';
		
		this.container.html('');
		this.imageContainer = $('<div class="carouselContainer"></div>').css({'position':'relative','overflow':'hidden','height':this.height,'width':this.width}).prependTo(this.container);
		
		this.imagePane = $('<div class="carouselPane"></div>').appendTo(this.imageContainer);
		if (this.option.direction == 'vertical') {
			this.imagePane.css('width',this.width);
		} else {
			this.imagePane.css('height',this.height);
		}
		
		//Add slides
		var htmlArray = [];
		
		for (i=0; i<this.slideCount; i++) {
			htmlArray.push('<div id="'+this.container_name.replace('#','')+'_'+i+'" class="carouselImage">');
			if (this.slideLink[i] !== '') { htmlArray.push('<a href="' + this.slideLink[i] + '" target="' + this.option.target + '">'); }
			htmlArray.push('<img src="' + this.slideImage[i] + '" alt="' + this.slideAlt[i] + '" title="' + this.slideAlt[i] + '" border="0" />');
			if (this.slideLink[i] !== '') { htmlArray.push('</a>'); }
			htmlArray.push('</div>');
		}
		
		//Add slides again so they wrap
		for (i=0; i<this.slideCount; i++) {
			htmlArray.push('<div id="'+this.container_name.replace('#','')+'_'+(this.slideCount+i)+'" class="carouselImage">');
			if (this.slideLink[i] !== '') { htmlArray.push('<a href="' + this.slideLink[i] + '" target="' + this.option.target + '">'); }
			htmlArray.push('<img src="' + this.slideImage[i] + '" alt="' + this.slideAlt[i] + '" title="' + this.slideAlt[i] + '" border="0" />');
			if (this.slideLink[i] !== '') { htmlArray.push('</a>'); }
			htmlArray.push('</div>');
		}
		
		//And again cause the content could be really tall!
		for (i=0; i<this.slideCount; i++) {
			htmlArray.push('<div id="'+this.container_name.replace('#','')+'_'+(this.slideCount+this.slideCount+i)+'" class="carouselImage">');
			if (this.slideLink[i] !== '') { htmlArray.push('<a href="' + this.slideLink[i] + '" target="' + this.option.target + '">'); }
			htmlArray.push('<img src="' + this.slideImage[i] + '" alt="' + this.slideAlt[i] + '" title="' + this.slideAlt[i] + '" border="0" />');
			if (this.slideLink[i] !== '') { htmlArray.push('</a>'); }
			htmlArray.push('</div>');
		}
		
		this.imagesLoaded = 0;
		this.imagePane.html(htmlArray.join(''));
		
		$('.carouselImage img').bind('load', {carousel:this}, function(e){ 
			e.data.carousel.imagesLoaded++; 
			if (e.data.carousel.imagesLoaded == e.data.carousel.slideCount * 3) {
				e.data.carousel.imagesReady();	
			};
		});	

	}
	
	this.imagesReady = function() {
		
		var $lastImage;
		var offsetTop = 0;
		var offsetLeft = 0;
		var $container;
		
		$('div.carouselImage', this.container).css({'padding':'0','margin':'0'});
		$('div.carouselImage img', this.container).css({'display':'block','padding':'0','margin':'0'});
		
		if (this.option.direction == 'vertical') {
			//this.imagePane.css('width',this.width);
			$('div.carouselImage', this.container).css({'width':this.width, 'padding-top':this.option.padding });
		} else {
			//this.imagePane.css('height',this.height);
			$('div.carouselImage', this.container).css({'float':'left', 'height':this.height, 'padding-left':this.option.padding});
		}
		
		for (i = 0, ilen = this.slideCount*3; i<ilen; i++) {
			
			$container = $('#'+this.container_name.replace('#','')+'_'+i);
			$image = $('img', $container);
			
			if (this.option.direction == 'vertical') {
				$container.data('top',offsetTop);
				$image.css('margin-left',((this.width - $image.outerWidth())/2)+'px' );
				offsetTop = offsetTop + $container.outerHeight();
			} else {
				$container.data('left',offsetLeft + ($container.outerWidth()/2));
				$image.css('margin-top',((this.height - $image.outerHeight())/2)+'px' );
				offsetLeft = offsetLeft + $container.outerWidth();
			}
			
		}
		
		if (this.option.direction == 'vertical') {
			this.imagePane.css('height',offsetTop);
		} else {
			this.imagePane.css('width',offsetLeft);
		}

		if (this.option.direction != 'vertical') {
			this.slideCurrent = Math.floor(this.slideCount/2);
			this.imagePane.css({ 'margin-left': ( (this.width/2) - $('#'+this.container_name.replace('#','')+'_'+this.slideCurrent).data('left')) });
		}

		if (this.option.transitionType == 'step') {
			var ss = this;
			this.slideRotateIID = setInterval(function(){ss.nextSlide()}, (this.slideTransitionTime + this.slideDelayTime) * 1000);
		} else {
			this.fullSlide();
			
			$('.carouselContainer', this.container)
				.bind('mouseenter', {carousel:this}, function(e){ e.data.carousel.fullSlidePause(); })
				.bind('mouseleave', {carousel:this}, function(e){ e.data.carousel.fullSlideRestart(); });
			
		}
			
	}
	
	this.nextSlide = function() {
		
		clearInterval(this.slideRotateIID);
		this.slideLast = this.slideCurrent;
		this.slideCurrent++;
		var slideOld;
		
		if (this.option.direction == 'vertical') {
			if (this.slideCurrent > this.slideCount) {
				this.slideCurrent = 1;
				this.imagePane.css('margin-top',0);
			}
		} else {
			if (this.slideCurrent > this.slideCount + Math.floor(this.slideCount/2)) {
				this.slideCurrent = Math.floor(this.slideCount/2);
				this.imagePane.css({ 'margin-left': ( (this.width/2) - $('#'+this.container_name.replace('#','')+'_'+this.slideCurrent).data('left')) });
				this.slideCurrent++;
			}
		}
		
		if (this.option.direction == 'vertical') {
			this.imagePane.animate({ 	marginTop: ( -1 * $('#'+this.container_name.replace('#','')+'_'+this.slideCurrent).data('top')) }, 
										this.slideTransitionTime * 1000, 
										'linear' );
		} else {
			this.imagePane.animate({ 	marginLeft: ( (this.width/2) - $('#'+this.container_name.replace('#','')+'_'+this.slideCurrent).data('left')) }, 
										this.slideTransitionTime * 1000, 
										'linear' );
		}
		
		var ss = this;
		this.slideRotateIID = setInterval(function(){ss.nextSlide()}, (this.slideTransitionTime + this.slideDelayTime) * 1000);
		
	}
	
	this.fullSlide = function() {
		
		var ss = this;
		var $first = $('#'+this.container_name.replace('#','')+'_0');
		var $last  = $('#'+this.container_name.replace('#','')+'_'+this.slideCount);
		
		// Reset
		if (this.option.direction == 'vertical') {
			this.imagePane.css({ 'margin-top': 0 });
			this.imagePane.animate(	{ marginTop: ( -1 * $last.data('top')) }, 
									this.slideTransitionTime * 1000, 
									'linear', 
									function(){ ss.fullSlide(); } );
		} else {
			this.imagePane.css({ 'margin-left':  -1 * $first.data('left') });
			this.imagePane.animate(	{ marginLeft: ( -1 * $last.data('left')) }, 
									this.slideTransitionTime * 1000, 
									'linear', 
									function(){	ss.fullSlide(); }  );
		}
		
	}
	
	this.fullSlidePause = function() {
		this.imagePane.stop();
	}
	
	this.fullSlideRestart = function() {
		var span, ratio;
		var ss = this;
		var $first = $('#'+this.container_name.replace('#','')+'_0');
		var $last  = $('#'+this.container_name.replace('#','')+'_'+this.slideCount);
		
		if (this.option.direction == 'vertical') {
			span = $last.data('top') - $first.data('top');
			ratio = Math.abs((span + parseInt(this.imagePane.css('margin-top'))) / span);
			this.imagePane.animate(	{ 'margin-top': ( -1 * $last.data('top')) }, 
									this.slideTransitionTime * 1000 * ratio, 
									'linear', 
									function(){ ss.fullSlide(); } );
		} else {
			span = $last.data('left') - $first.data('left');
			ratio = Math.abs((span + parseInt(this.imagePane.css('margin-left'))) / span);
			this.imagePane.animate(	{ marginLeft: ( -1 * $last.data('left')) }, 
									this.slideTransitionTime * 1000 * ratio, 
									'linear', 
									function(){	ss.fullSlide(); }  );
		}
		
	}


	this.buildCarousel();

}