$(document).ready(function() {
	$('#banner-anim').cycle({
            fx: 'scrollHorz', // what transition we want to use
			timeout: 8500, //milliseconds between transitions
			speed: 1000, //speed of each transition
			easing: 'easeInSine', 
			pause: 1, //turn on pause when someone mouseovers the banner
			next:   '#banner-anim-right', 
		    prev:   '#banner-anim-left'

        });
	
		if($("#basic").children().size()==5){
			var transforms = [// the scale and x,y translations of items from left to right in the carousel
					'translate(-20px,10px) scale(.70)',
					'translate(80px,15px) scale(.8,.80)',
					'translate(250px,-25px) scale(1)',
					'translate(420px,15px) scale(.8,.80)',
					'translate(510px,10px) scale(.70)'
				];
			var skews = [// the skewing of items from left to right in the carousel
						'skew(10deg, 1deg)		rotate(10deg)',
						'skew(10deg, 2deg)		rotate(10deg)',
						'skew(0, 0) 			rotate(0deg)',
						'skew(-10deg, -2deg)	rotate(-10deg)',
						'skew(-10deg, -1deg)	rotate(-10deg)'						 
						 ];		
			var zIndices = [ // the layering of items from left to right in the carousel
					'0',
					'5',
					'10',
					'5',
					'0'
				];
			
			//weirdly skewing alters heights in Internet Ignorer so we have a different set of mask Y coordinates for MSIE
			
			if($.browser.msie){
				var maskPositionY = [// the black cover Y position for items in the carousel from left to right
						270,
						266,
						311,
						266,
						270
					];
				var maskPositionX = [// the black cover X position for items in the carousel from left to right
					4,
					5,
					0,
					-10,
					-8
				];
			}else{
				var maskPositionY = [// the black cover Y position for items in the carousel from left to right
						269,
						265,
						311,
						265,
						269
					];
				var maskPositionX = [// the black cover X position for items in the carousel from left to right
					4,
					5,
					0,
					-5,
					-4
				];
			}

			var opacity = [// the opacity of the images in the carousel from left to right
					'.25',
					'.95',
					'1',
					'.95',
					'.25'
				];
		}else{
			var transforms = [// the scale and x,y translations of items from left to right in the carousel
					'translate(80px,15px) scale(.8,.80)',
					'translate(250px,-25px) scale(1)',
					'translate(420px,15px) scale(.8,.80)'
				];
			var skews = [// the skewing of items from left to right in the carousel
						'skew(10deg, 2deg)		rotate(10deg)',
						'skew(0, 0) 			rotate(0deg)',
						'skew(-10deg, -2deg)	rotate(-10deg)'					 
						 ];		
			var zIndices = [ // the layering of items from left to right in the carousel
					'5',
					'10',
					'5'
				];
			
			//weirdly skewing alters heights in Internet Ignorer so we have a different set of mask Y coordinates for MSIE
			
			if($.browser.msie){
				var maskPositionY = [// the black cover Y position for items in the carousel from left to right
						266,
						311,
						266
					];
				var maskPositionX = [// the black cover X position for items in the carousel from left to right
					5,
					0,
					-10
				];
			}else{
				var maskPositionY = [// the black cover Y position for items in the carousel from left to right
						265,
						311,
						265
					];
				var maskPositionX = [// the black cover X position for items in the carousel from left to right
					5,
					0,
					-5
				];
			}

			var opacity = [// the opacity of the images in the carousel from left to right
					'.95',
					'1',
					'.95'
				];
			}
			
			$('#basic .square').each(function(i) {
				//reflect the image
				$(this).find('img').reflect({height:30});
				
				// set initial translations, layering and opacity
				$(this).css({transform: transforms[i], 'z-index':zIndices[i], 'opacity':opacity[i] });
				
				// we ONLY skew the image so reflections and masks are unaffected...
				$(this).children('.img').css({transform: skews[i],'padding':'60px 0 0 0'});
				
				//now position the mask (as opposed to fixing it's position with css) so that we can animate it later
				$(this).children('.mask').css({'top': (maskPositionY[i]+"px"), left:(maskPositionX[i]+"px")});
			});
			
			
			function rotateImages(){
				$('#basic .square').each(function(i) {
					// animate each object to the next position in the arrays...
					$(this).animate({ transform: transforms[i], 'z-index':zIndices[i], 'opacity':opacity[i] });
					$(this).children('.img').animate({transform: skews[i]});
					$(this).children('.mask').animate({'top': (maskPositionY[i]+"px"), left:(maskPositionX[i]+"px")});
				});
			}
			
			$('#left').click(function(e){
			    //good practice to hault any click actions left by the htmlers
				e.preventDefault();
				
				// remove the last item from the carousel and add it to the start
				var lastItem = $('#basic .square:last-child');
				$('#basic .square:last-child').remove();
				$('#basic').prepend(lastItem);
				
				//make it tiny and fade in during the rotateImages function so it doesn't "jump" into place
				$('#basic .square:first-child').css({'opacity':0, 'transform':'scale(.10)' });
				
				// move all to their new positions...
				rotateImages();
			});
			
			$('#right').click(function(e){
				//good practice to hault any click actions left by the htmlers
				e.preventDefault();

				// remove the first item from the carousel and add it to the end
				var firstItem = $('#basic .square:first-child');
				$('#basic .square:first-child').remove();
				$('#basic').append(firstItem);
				
				
				// immediately move the fourth item straight up a z-index level so we don't see any flicker when the item is added
				$('#basic .square:nth-child(4)').css({'z-index':1 });
				
				//make it tiny and fade in during the rotateImages function so it doesn't "jump" into place
				$('#basic .square:last-child').css({'opacity':0, 'transform':'scale(.10)', 'z-index':0 });
				
				// move all to their new positions...
			    rotateImages();
			});

		});