$(function() {
		//our 4 items	
	var $listItems 	= $('#rm_container > ul > li'),
		totalItems		= $listItems.length,
		
		//the controls
		$rm_next		= $('#rm_next'),
		$rm_prev		= $('#rm_prev'),

		//the masks and corners of the slider
		$rm_mask_left	= $('#rm_mask_left'),
		$rm_mask_right	= $('#rm_mask_right'),
		$rm_corner_left	= $('#rm_corner_left'),
		$rm_corner_right= $('#rm_corner_right'),
		
		//check if the browser is <= IE8
		ieLte8			= ($.browser.msie && parseInt($.browser.version) <= 8),
		
		RotateImageMenu	= (function() {
				//difference of animation time between the items
			var	timeDiff			= 300,
				//time between each image animation (slideshow)
				slideshowTime		= 3000,
				slideshowInterval,	
				//checks if the images are rotating
				isRotating			= false,
				//how many images completed each slideshow iteration
				completed			= 0,
				/*
				all our images have 310 of width and 465 of height.
				this could / should be dynamically calculated 
				if we would have different image sizes.
				
				we will set the rotation origin at 
				x = width/2 and y = height*2
				*/
				origin			= ['76px', '460px'],
				init				= function() {
					configure();
					initEventsHandler();
				},
				//initialize some events
				initEventsHandler	= function() {
					/*
					next and previous arrows:
					we will stop the slideshow if active,
					and rotate each items images.
					1 	rotate right
					-1 	rotate left
					*/
					$rm_next.bind('click', function(e) {
						stopSlideshow();
						rotateImages(1);
						return false;
					});
					$rm_prev.bind('click', function(e) {
						stopSlideshow();
						rotateImages(-1);
						return false;
					});
				},
				/*
				rotates each items images.
				we set a delay between each item animation
				*/
				rotateImages		= function(dir) {
					//if the animation is in progress return
					if(isRotating) return false;
					
					isRotating = true;
					
					$listItems.each(function(i) {
						var $item 				= $(this),
							/*
							the delay calculation.
							if rotation is to the right, 
							then the first item to rotate is the first one,
							otherwise the last one
							*/
							interval			= (dir === 1) ? i * timeDiff : (totalItems - 1 - i) * timeDiff;
						
						setTimeout(function() {
								//the images associated to this item
							var	$otherImages		= $('#' + $item.data('images')).children('img'),
								totalOtherImages	= $otherImages.length;
								
								//the current one
								$img				= $item.children('img:last'),
								//keep track of each items current image
								current				= $item.data('current');
								//out of bounds 
								if(current > totalOtherImages - 1)
									current = 0;
								else if(current < 0)
									current = totalOtherImages - 1;
								
								//the next image to show and its initial rotation (depends on dir)
								var otherRotation	= (dir === 1) ? '-30deg' : '30deg',
									$other			= $otherImages.eq(current).clone();
									
								(dir === 1) ? ++current : --current;
								
								//prepend the next image to the <li>
								$item.data('current', current).prepend($other);
								
								//the final rotation for the current image 
								var rotateTo		= (dir === 1) ? '80deg' : '-80deg';
								
                $img.fadeOut(1200, function(){
									$(this).remove();
									++completed;
									if(completed === 3) {
										completed = 0;
										isRotating = false;
									}
								});

						}, interval );	
					});
					
				},
				//set initial rotations
				configure			= function() {
					hideMaskCorners();
					
					$listItems.each(function(i) {
						//the initial current is 1 
						//since we already showing the first image
						var $item = $(this).data('current', 1);
					});
				},
				//hides the masks and corners
				hideMaskCorners		= function() {
					$rm_mask_left.hide();
					$rm_mask_right.hide();
					$rm_corner_left.hide();
					$rm_corner_right.hide();
				},
				startSlideshow		= function() {
					clearInterval(slideshowInterval);
					rotateImages(1);
					slideshowInterval	= setInterval(function() {
						rotateImages(1);
					}, slideshowTime);
				},
				stopSlideshow		= function() {
					clearInterval(slideshowInterval);
				};
			
			return {init : init};
		})();
		
	RotateImageMenu.init();
});