$(document).ready(function(){

	$('div#carousel').each(function(){
	
		var $carousel = $(this);
		var data = {
			animspeed: 400,
			containerWidth: $carousel.width(),
			slideWidth: $carousel.find('img:first').width(),
			slideHeight: $carousel.find('img:first').height(),
			slidecount: 0,
			arrSlides: [],
			slowswitch: false
		}
		
		var active = {
			left: '',
			middle: '',
			right: ''
		}
		
		var css = {
			left: {
				'left': 0,
				'width': (data.slideWidth * .7),
				'height': (data.slideHeight * .7),
				'top': '50px',
				'opacity': .6
			},
			middle: {
				'left': (data.containerWidth * .5) - (data.slideWidth * .5),
				'width': data.slideWidth,
				'height': data.slideHeight,
				'top': '0px',
				'opacity': 1
			},
			right: {
				'left': (data.containerWidth) - (data.slideWidth * .7),
				'width': (data.slideWidth * .7),
				'height': (data.slideHeight * .7),
				'top': '50px',
				'opacity': .6
			},
			hidden: {
				'left': '-1000px', 
				'top': '-1000px',
				'opacity': 1
			}
		}
		
		$carousel.find('img').each(function(n){
			var $this = $(this);
			
			$this.attr('id','slide-'+n);
			
			var id = $this.attr('id');
			var title = $this.attr('title');
			
			$this.attr('title','');
			
			var $li = $('<li><a title="'+ title +'" href="#' + id + '"></a></li>');
			if(n==0) $li.addClass('active'); 
			
			data.arrSlides.push(id);
			$('ul#slide-control').append($li);
		});
		
		data.slidecount = data.arrSlides.length - 1;
		
		function initialSetup(){
			
			$('ul#slide-control li').find('a').bind('click',function(){
				var href = $(this).attr('href').replace('#','');
				buttonClick(href);
				return false;
			});	
			
			setToolTips($('ul#slide-control li').find('a'));
			
			// right
			$carousel.find('img#'+ data.arrSlides[1]).css(css.right).unbind('click').bind('click',function(){rotateLeft(); $(this).unbind('click');}).addClass('zindex80');

			// middle
			$carousel.find('img#'+ data.arrSlides[0]).css(css.middle).addClass('zindex90');

			// left
			$carousel.find('img#'+ data.arrSlides[data.slidecount]).css(css.left).unbind('click').bind('click',function(){rotateRight(); $(this).unbind('click');}).addClass('zindex80');
			
			// set actives
			active.right = data.arrSlides[1];
			active.middle = data.arrSlides[0];
			active.left = data.arrSlides[data.slidecount];
		};
		
		
		function rotateLeft(){
			// right - to Middle
			var right = active.right;
			updateButtons(right);
			$carousel.find('img#'+ right).removeClass().addClass('zindex90').animate(css.middle, data.animspeed, function(){
				active.middle = right;
			});
			
			// middle - to Left
			var middle = active.middle;
			$carousel.find('img#'+ middle).unbind('click').removeClass().addClass('zindex80').animate(css.left, data.animspeed, function(){
				active.left = middle;
				$(this).bind('click', function(){rotateRight(); $(this).unbind('click');});
			});

			// left hidden
			var left = active.left;
			$carousel.find('img#'+ left).animate({'opacity':0}, data.animspeed, function(){ $(this).css(css.hidden)}).removeClass();
			
			// new right
			var slidepos = $.inArray(active.right, data.arrSlides);
			if (slidepos == data.slidecount) {
				// we are at the end of the array
				$carousel.find('img#'+ data.arrSlides[0]).unbind('click').css(css.right).css('opacity',0).removeClass().addClass('zindex80').animate({'opacity':.6}, data.animspeed, function(){
					active.right = data.arrSlides[0];
					$(this).bind('click',function(){rotateLeft(); $(this).unbind('click');});
				});
			} else {
				$carousel.find('img#'+ data.arrSlides[slidepos+1]).unbind('click').css(css.right).css('opacity',0).removeClass().addClass('zindex80').animate({'opacity':.6}, data.animspeed, function(){
					active.right = data.arrSlides[slidepos+1];	
					$(this).bind('click',function(){rotateLeft(); $(this).unbind('click');});
				});
			}
		}
		
		function rotateRight(){
			// left - to Middle
			var left = active.left;
			updateButtons(left);
			$carousel.find('img#'+ left).removeClass().addClass('zindex90').animate(css.middle, data.animspeed, function(){
				active.middle = left;
			});
			
			// middle - to right
			var middle = active.middle;
			$carousel.find('img#'+ middle).unbind('click').removeClass().addClass('zindex80').animate(css.right, data.animspeed, function(){
				active.right = middle;
				$(this).bind('click',function(){rotateLeft(); $(this).unbind('click');});
			});

			// right hidden 
			var right = active.right;
			$carousel.find('img#'+ right).animate({'opacity':0}, data.animspeed, function(){ $(this).css(css.hidden)}).removeClass();
			
			// new left
			var slidepos = $.inArray(active.left, data.arrSlides);
			if (slidepos == 0) {
				// we are at the end of the array
				$carousel.find('img#'+ data.arrSlides[data.slidecount]).unbind('click').css(css.left).css('opacity',0).removeClass().addClass('zindex80').animate({'opacity':.6}, data.animspeed, function(){
					active.left = data.arrSlides[data.slidecount];
					$(this).bind('click', function(){rotateRight(); $(this).unbind('click');});
				});
			} else {
				$carousel.find('img#'+ data.arrSlides[slidepos-1]).unbind('click').css(css.left).css('opacity',0).removeClass().addClass('zindex80').animate({'opacity':.6}, data.animspeed, function(){
					active.left = data.arrSlides[slidepos-1];	
					$(this).bind('click', function(){rotateRight(); $(this).unbind('click');});
				});
			}
		}
		
		function buttonClick(id){
			var c = $.inArray(active.middle, data.arrSlides);
			var t = $.inArray(id, data.arrSlides);

			if (c!=t && !data.slowswitch){
				
				updateButtons(id)				
				data.slowswitch = true;
				$carousel.animate({'top':'250px','opacity':0}, data.animspeed * .7, function(){
					// hide the current slides
					$carousel.find('img#'+ active.left +', img#'+ active.middle +', img#'+ active.right).unbind('click').removeClass().css(css.hidden);
					
					// right
					var right = t+1;
					if (right>data.slidecount) right = 0
					$carousel.find('img#'+ data.arrSlides[right]).css(css.right).unbind('click').bind('click',function(){rotateLeft(); $(this).unbind('click');}).addClass('zindex80');
					
					// middle
					var middle = t;
					$carousel.find('img#'+ data.arrSlides[middle]).css(css.middle).addClass('zindex90');
					
					// left
					var left = t-1
					if (left<0) left = data.slidecount
					$carousel.find('img#'+ data.arrSlides[left]).css(css.left).addClass('zindex80').unbind('click').bind('click',function(){rotateRight(); $(this).unbind('click');}).addClass('zindex80');
					
					active.right = data.arrSlides[right];
					active.middle = data.arrSlides[middle];
					active.left = data.arrSlides[left];
					
					
					$carousel.animate({'top':'-150px','opacity':1}, data.animspeed * .7, function(){
						data.slowswitch = false;
					 });
				});
			}
			
		};
		
		function updateButtons(id){
			$('ul#slide-control').find('li').removeClass('active').each(function(){
				var href = $(this).find('a').attr('href').replace('#',''); 
				if (href== id) $(this).addClass('active');									   
			});
		};
		
		function setToolTips($targets){
			
			var ShowTooltip = function(e){
				var $tooltip = $(this).next('span.tooltip');
				$tooltip.fadeIn(80).css({
					 	'margin-left': $tooltip.width() * .5 * -1 + 'px'
					 })
				return false;
			}
			
			var HideTooltip = function(e){
				$(this).next('span.tooltip').fadeOut(80);
			}
			
			// Replace default tooltips
			// 
			
			$targets.each(function(){
				 var $this = $(this);
				 var $span = $('<span/>');
				 
				 $span.addClass('tooltip')
					.css({'display':'none', 'position':'absolute'})
					.html($this.attr('title'));
				 $this.after($span).attr('title', '');
			}).hover(ShowTooltip, HideTooltip);
		}
		
		
		// wait for all images to load in the carousel, then start it:
		$(window).load(function(){
			if (jQuery.browser.version < "8.0" && jQuery.browser.msie) {
				// do not start the carousel, handle the page on load
			} else {
				// disable text select
				$carousel.find('img').disableTextSelect();
				initialSetup();
			}
					
		});
	
	});
});