/* Create a closure to maintain scope of the '$'
   and remain compatible with other frameworks.  */
(function($) {
	
	//same as $(document).ready();
	$(function() {
		$('#first').delay(400).fadeIn(800,function() {
			$('#first img').fadeIn(100);
			$('#second').fadeIn(400, function() {
				$('#third').fadeIn(300, function() {
					// top
					imageSlider(0, 800,'#third img', 'slideInner', '#thirdControl', 'control', 'leftControl', 'rightControl');
					
					$('a').fadeIn(100);
				});
			});
		});
	});
	
	
	function imageSlider(currentPosition, slideWidth, slides, slideInner, controlDOM, controlClass, controlLeft, controlRight) {
		// var currentPosition = 0;
		// 		  var slideWidth = 940;
		var slides = $(slides);
	  var numberOfSlides = slides.length;

		slides
		  .wrapAll('<div id="'+ slideInner +'"></div>')
		  // Float left to display horizontally, readjust .slides width
		  .css({
		    'float' : 'left',
		    'width' : slideWidth
		  });

		//Set #slideInner width equal to total width of all slides
		$('#'+ slideInner).css('width', slideWidth * numberOfSlides);

		if (numberOfSlides>1) {
			// Insert left and right arrow controls in the DOM
		  $(controlDOM)
		    .prepend('<span class="'+ controlClass +'" id="'+ controlLeft +'">&laquo;</span>')
		    .append('<span class="'+ controlClass +'" id="'+ controlRight +'">&raquo;</span>');

			// Hide left arrow control on first load
			manageControls(currentPosition,numberOfSlides,"#"+ controlLeft,"#"+ controlRight);

			// Create event listeners for .controls clicks
			$('.'+ controlClass)
				.bind('click', function(){
					// Determine new position
					currentPosition = ($(this).attr('id')==controlRight)
					? currentPosition+1 : currentPosition-1;

					// Hide / show controls
					manageControls(currentPosition,numberOfSlides,"#"+ controlLeft,"#"+ controlRight);
					// Move slideInner using margin-left
					$('#'+ slideInner).animate({
						'marginLeft' : slideWidth*(-currentPosition)
					});
				});
		};
	}


	// manageControls: Hides and shows controls depending on currentPosition
	function manageControls(position, numberOfSlides, lcontrol, rcontrol){
		// Hide left arrow if position is first slide
		if(position==0){ $(lcontrol).hide() }
		else{ $(lcontrol).show() }

		// Hide right arrow if position is last slide
		if (lcontrol=="#leftControlBottom") {
			if(position==numberOfSlides-4){ $(rcontrol).hide() }
			else{ $(rcontrol).show() }
		}
		else{ 
			if(position==numberOfSlides-1){ $(rcontrol).hide() }
			else{ $(rcontrol).show() }
		}
	}
	
})(jQuery);