/*============================================================
	Content Carousel
	
	new ContentCarouselClass('#bannerContainer', {options});
	
	Options:
		width: 		width of banner (default: to container's outer width)
		height:		height of banner (default: container's outer height)
		panelClass: class name of banner panels (default: 'ccPanel')
		delayTime:	time to delay on each panel in seconds, not used for continuous slides (default: 5)
		transitionTime: time for one panel to transition in seconds (default: 1)
		transitionType: style of transition, 'step' or 'continuous' (default: 'step')
		direction:  direction of transition, 'horizontal' or 'vertical' (default: 'horizontal')

	<div id="bannerContainer">
		<div class="ccPanel">
			Any html content here.
		</div>
		<div class="ccPanel">
			HTML content for the next panel.
		</div>	
	</div>
	
	
============================================================*/
function ContentCarouselClass(container_name, optionObj) {


	this.container_name = container_name;
	this.container = $(container_name);
	
	this.option = {
		height: this.container.outerHeight(),
		width: this.container.outerWidth(),
		panelClass: 'ccPanel',
		delayTime: 5,
		transitionTime: 1,
		transitionType: 'step', // 'step'|'continuous'
		direction: 'horizontal', // 'horizontal'|'vertical'
		showControl: true
	};
	$.extend(this.option, optionObj);
	
	this.slideCount;
	this.slideCurrent = 0;
	this.slideRotateIID = -1;
	this.height = this.option.height;
	this.width = this.option.width;
	
	/*===================================================
		Build Carousel
	===================================================*/
	
	this.buildCarousel = function() {
		var i, ilen;
		
		this.container.css({'position':'relative','overflow':'hidden','height':this.height,'width':this.width});
		$('.'+this.option.panelClass+':first', this.container).clone().appendTo(this.container);
		this.panelContainer = $('<div id="'+container_name+'_pane"></div>')
									.css({'position':'relative','overflow':'hidden'})
									.prependTo(this.container);
		this.$panels = $('.'+this.option.panelClass, this.container)
									.css({'position':'absolute','overflow':'hidden','height':this.height,'width':this.width})
									.appendTo(this.panelContainer);
		this.slideCount = this.$panels.length;
		this.correctPanelsForPadding();
		
		if (this.option.showControl) {
			this.controls = $('<div id="'+container_name.substr(1)+'_controls"></div>')
										.css({'position':'absolute','left':(this.width /2)-((this.$panels.length-1) * 9),'bottom':0,'overflow':'hidden','height':18,'width':(this.$panels.length-1) * 18,'background':'#FFFFFF','text-align':'center'})
										.addClass('roundtop8')
										.hover(function(){$(this).css('opacity',1)}, function(){$(this).css('opacity',0.7)});
			for (i = 0, ilen = this.slideCount; i < ilen; i++) {
				$('<div class="control control_'+i+'"></div>')
					.data('index',i)
					.css({'width':12,'height':12,'margin':3,'float':'left','background':'#74B900','cursor':'pointer'})
					.addClass('rounded6')
					.hover(function(){$(this).css('background','#9DF001')}, function(){$(this).css('background','#74B900')})
					.bind('click',{cc:this},function(e){ e.data.cc.nextSlide($(this).data('index')); })
					.appendTo(this.controls);
			}
		}
		
		if (this.option.direction == 'vertical') {
			this.panelContainer.width(this.width).height(this.height * this.slideCount);
			this.$panels.each(function(i){ $(this).css({'top':i*$(this).outerHeight(), 'left':0}); });
		} else {
			this.panelContainer.width(this.width * this.slideCount).height(this.height);
			this.$panels.each(function(i){ $(this).css({'top':0, 'left':i*$(this).outerWidth()}); });
		}

		if (this.option.transitionType == 'step') {
			this.startStepTimer();
			this.container
				.bind('mouseenter', {carousel:this}, function(e){ e.data.carousel.stopStepTimer(); })
				.bind('mouseleave', {carousel:this}, function(e){ e.data.carousel.startStepTimer(); });
		} else {
			this.startContinuousSlide(true);
			this.container
				.bind('mouseenter', {carousel:this}, function(e){ e.data.carousel.pauseContinuousSlide(); })
				.bind('mouseleave', {carousel:this}, function(e){ e.data.carousel.startContinuousSlide(false); });
		}
		
		this.setControls();
			
	}
	
	this.correctPanelsForPadding = function(){
		this.$panels.each(function(){
			var $this = $(this);
			$this.css({
				'width':(parseInt($this.css('width')) - parseInt($this.css('padding-left')) - parseInt($this.css('padding-right'))),
				'height':(parseInt($this.css('height')) - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom')))
			  });
		});
	};
	
	/*===================================================
		Step Slide Functions
	===================================================*/
	
	this.nextSlide = function(newID) {
		if (newID === undefined) { 
			this.slideCurrent++; 
		} else {
			this.slideCurrent = newID;
		}
		//this.slideCurrent++;
		var slideOld;
		
		if (this.option.direction == 'vertical') {
			if (this.slideCurrent >= this.slideCount) {
				this.slideCurrent = 1;
				this.panelContainer.css('margin-top',0);
			}
		} else {
			if (this.slideCurrent >= this.slideCount) {
				this.slideCurrent = 1;
				this.panelContainer.css({ 'margin-left':0 });
			}
		}
		var ss = this;
		if (this.option.direction == 'vertical') {
			this.panelContainer.animate({ marginTop: ( -1 * this.slideCurrent * this.height) }, this.option.transitionTime * 1000, 'linear', function(){ ss.setControls(); } );
		} else {
			this.panelContainer.animate({ marginLeft: ( -1 * this.slideCurrent * this.width) }, this.option.transitionTime * 1000, 'linear', function(){ ss.setControls(); } );
		}
		
		this.startStepTimer();
		
	}
	
	this.startStepTimer = function(){
		clearInterval(this.slideRotateIID);
		var ss = this;
		this.slideRotateIID = setInterval(function(){ss.nextSlide()}, (this.option.transitionTime + this.option.delayTime) * 1000);
	};
	
	this.stopStepTimer = function(){
		clearInterval(this.slideRotateIID);
	};
	
	/*===================================================
		Continuous Slide Functions
	===================================================*/		
	
	this.startContinuousSlide = function(fromstart) {
		var span, ratio;
		var ss = this;
		var $last  = $('.'+this.option.panelClass+':last', this.container);
		if(fromstart == undefined || fromstart == null) { fromstart = false; }
		
		if (this.option.direction == 'vertical') {
			span = parseInt($last.css('top'));
			if (fromstart) { 
				ratio = 1; 
				this.panelContainer.css( 'margin-top', 0 );
			} else { 
				ratio = Math.abs((span + parseInt(this.panelContainer.css('margin-top'))) / span); 
			}
			this.panelContainer.animate( {	'margin-top': ( -1 * parseInt($last.css('top')) ) }, 
											this.option.transitionTime * 1000 * ratio * this.slideCount, 
											'linear', 
											function(){ ss.startContinuousSlide(true); } );
		} else {
			span = parseInt($last.css('left'));
			if (fromstart) { 
				ratio = 1; 
				this.panelContainer.css( 'margin-left', 0 );
			} else {
				ratio = Math.abs((span + parseInt(this.panelContainer.css('margin-left'))) / span); 
			}
			this.panelContainer.animate( { 	marginLeft: ( -1 * parseInt($last.css('left')) ) }, 
											this.option.transitionTime * 1000 * ratio * this.slideCount, 
											'linear', 
											function(){	ss.startContinuousSlide(true); } );
		}
		
	};
	
	this.pauseContinuousSlide = function() {
		this.panelContainer.stop();
	};
	
	/*===================================================
		Controls Functions
	===================================================*/
	this.clearControls = function(){
		if (!this.option.showControl) { return; }
		$(container_name+'_controls div.control')
			.removeClass('selected')
			.css('background','#74B900');
	};
	
	this.setControls = function(){
		if (!this.option.showControl) { return; }
		this.clearControls();
		$(container_name+'_controls div.control_'+this.slideCurrent)
			.addClass('selected')
			.css('background','#9DF001');
	};
	
	/*===================================================
		Fire it up
	===================================================*/

	this.buildCarousel();

}