$(document).ready(function() {
	var currentPosition = 0;
	var slideWidth = 960;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	
	// Remove scrollbar in JS
	$('#header-features-items').css('overflow', 'hidden');

	// Wrap all .slides with #slideInner div
	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, 'opacity': '0'});

	// Insert left and right arrow controls in the DOM
	$('#header-features')
		.prepend('<span class="control" id="leftControl"></span>')
		.append('<span class="control" id="rightControl"></span>');

	// Hide left arrow control on first load
	manageControls(currentPosition);
	
	// Create event listeners for .controls clicks
	$('.control').bind('click', function() {
		var lastPosition = currentPosition;
		// Determine new position
		currentPosition = ($(this).attr('id') == 'rightControl')
			? currentPosition + 1 : currentPosition - 1;

		// Hide / show controls
		manageControls(currentPosition);
		// Move slideInner using margin-left
		
		$('#slideInner div.slide:eq(' + lastPosition + ')').animate({opacity: 0}, 250);
		$('#slideInner div.slide:eq(' + currentPosition + ')').css({opacity: 0}).animate({opacity: 1}, 1000);
		$('#slideInner').animate({'marginLeft' : slideWidth * (-currentPosition)}, 500);
	});

	$('div.scroll').each(function(i) {
		var self = this;
		$(this)
			.data('position', 0)
			.data('length', $('p', this).length)
			.prepend('<div style="position:absolute;width:0px;height:0px;"><div style="margin:0px 0px 0px 428px;width:25px;height:13px;"><img id="upScroll" src="http://revelcellars.com/wp-content/themes/revel/images/arrow-up.gif" style="cursor:pointer;display:none;" /></div></div>')
			.prepend('<div style="position:absolute;width:0px;height:0px;"><div style="margin:114px 0px 0px 428px;width:25px;height:13px;"><img id="downScroll" src="http://revelcellars.com/wp-content/themes/revel/images/arrow-down.gif" style="cursor:pointer;" /></div></div>')
		;
		
		$('p:gt(0)', this).hide();
		
		$('img#upScroll', this).click(function() {
			var position = $(self).data('position');
			$('img#downScroll', self).show();
			if (position == 1) {
				$('img#upScroll', self).hide();
			}
			$('p:eq(' + position + ')', self)[$.browser.msie ? 'hide' : 'fadeOut']();
			position--;
			$('p:eq(' + position + ')', self)[$.browser.msie ? 'show' : 'fadeIn']();
			$(self).data('position', position);
		});
		
		$('img#downScroll', this).click(function() {
			var position = $(self).data('position');
			$('img#upScroll', self).show();
			if (position + 1 == $(self).data('length') - 1) {
				$('img#downScroll', self).hide();
			}
			$('p:eq(' + position + ')', self)[$.browser.msie ? 'hide' : 'fadeOut']();
			position++;
			$('p:eq(' + position + ')', self)[$.browser.msie ? 'show' : 'fadeIn']();
			$(self).data('position', position);
		});
	});
	
	// manageControls: Hides and shows controls depending on currentPosition
	function manageControls(position) {
		// Hide left arrow if position is first slide
		if (position == 0) {
			$('#leftControl').hide();
		} else {
			$('#leftControl').show();
		}
		// Hide right arrow if position is last slide
		if (position == numberOfSlides - 1) {
			$('#rightControl').hide();
		} else {
			$('#rightControl').show();
		}
	}
	
	// Close features
	$('#closeControl a').bind('click', function() {
		$('#header-features').css({'display' : 'none'});
		$('#slideInner').css({'opacity': '0'});
	});
	
	$('.featureTrigger').bind('click', function() {
		// Determine new position
		currentPosition = Number(this.id.substr(7)) - 1;

		$('#header-features').css({'display' : 'block'});

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

});