$(document).ready(function(){
		//var currentPosition = 2;
		var slideWidth = 210;
		var slides = $('.calSlide');
		var numberOfSlides = slides.length;
		var currentPosition = parseInt($('#calStartElement').text());

		// Remove scrollbar in JS
		$('#calSlidesContainer').css('overflow', 'hidden');

		// Wrap all .calSlides with #calSlideInner div
		slides
		.wrapAll('<div id="calSlideInner"></div>')
		// Float left to display horizontally, readjust .slides width
		.css({
			'float' : 'left',
			'width' : slideWidth
			});

		// adjust other sizes to match the actuales slides
		$('#calSlideshow').css('width', slideWidth);
		$('#calSlidesContainer').css('width', slideWidth);


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

		// Hide left arrow control on first load and scroll to current position
		$('#calSlideInner').animate({
				'marginLeft' : slideWidth*(-currentPosition)
				}, 0);
		manageControls(currentPosition);
		$('.calControl').bind('click', clickSlider);

		// manageControls: Hides and Shows controls depending on currentPosition
		function clickSlider() {
			// Determine new position
			currentPosition = ($(this).hasClass('calRightControl')) ? currentPosition+1 : currentPosition-1;
			manageControls(currentPosition);
			// Move calSlideInner using margin-left
			$('#calSlideInner').animate({
					'marginLeft' : slideWidth*(-currentPosition)
					}, "normal");
			// Hide / show controls
		}

		function manageControls(position) {
			// Hide left arrow if position is first slide
			if (position == 0) { $('.calLeftControl').hide(); }
			else { $('.calLeftControl').show(); }
			// Hide right arrow if position is last slide
			if (position == numberOfSlides-1) { $('.calRightControl').fadeOut("fast"); }
			else { $('.calRightControl').fadeIn("fast"); }
		}	

});

/*

$(document).ready(function(){
		var currentPosition = 0;
		var slideWidth = 210;
		var slides = $('.calSlide');
		var numberOfSlides = slides.length;

		// Remove scrollbar in JS
		$('#calSlidesContainer').css('overflow', 'hidden');

		// Wrap all .calSlides with #calSlideInner div
		slides
		.wrapAll('<div id="calSlideInner"></div>')
		// Float left to display horizontally, readjust .slides width
		.css({
			'float' : 'left',
			'width' : slideWidth
			});

		// adjust other sizes to match the actuales slides
		$('#calSlideshow').css('width', slideWidth);
		$('#calSlidesContainer').css('width', slideWidth);

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

		// Hide left arrow control on first load
		manageControls(currentPosition);
		$('.calControl').bind('click', clickSlider);

		// manageControls: Hides and Shows controls depending on currentPosition
		function clickSlider() {
			// Determine new position
			currentPosition = ($(this).hasClass('calRightControl')) ? currentPosition+1 : currentPosition-1;
			manageControls(currentPosition);
			// Move calSlideInner using margin-left
			$('#calSlideInner').animate({
					'marginLeft' : slideWidth*(-currentPosition)
					}, "fast");
			// Hide / show controls
		}

		function manageControls(position) {
			// Hide left arrow if position is first slide
			if (position == 0) { $('.calLeftControl').hide(); }
			else { $('.calLeftControl').show(); }
			// Hide right arrow if position is last slide
			if (position == numberOfSlides-1) { $('.calRightControl').fadeOut("fast"); }
			else { $('.calRightControl').fadeIn("fast"); }
		}	

});

*/