packagesOverview.js

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

var $flightWrap,
	$flightSlider,
	cardWidth,
	cardsWidth,
	cardsTotal,
	overviewHeight,
	elPos = 0,
	hotelName,
	hotelImg,
	mobileWidth = matchMedia('only screen and (max-device-width: 600px)').matches,
	tabletPortrait = matchMedia('only screen and (min-device-width: 600px) and (max-device-width: 992px)').matches,
	desktopWidth = matchMedia('only screen and (min-device-width: 992px)').matches;

var MyHammer = function(element, customOptions) {
  var defaultOptions, options;
  if (customOptions == null) {
    customOptions = {};
  }
  defaultOptions = {
    transform_always_block: true,
    transform_min_scale: 1,
    drag_block_horizontal: true,
    drag_block_vertical: false,
    drag_min_distance: 0
  };
  options = $.extend(defaultOptions, customOptions);
  return Hammer(element, options);
};

var setCanvasHeight = function(elements) {
	$('#canvas').css('height', Math.max(elements));
}

var setSliderHeight = function() {
	var cardHeight = $('.flinfo').outerHeight() + 20;
	$('.flights').css('height',cardHeight);
}

var toggleActivePill = function(e) {
	e.preventDefault();
	$('.pills__active').attr('class','');
	$(this).addClass('pills__active');
	$flightWrap.addClass('flights--toggle');
	setTimeout(function() {
		$flightSlider.css('-webkit-transform', 'translate3d(0,0,0)');
	}, 500);
	setTimeout(function() {
		$flightWrap.attr('class','flights');
	}, 1000);
}

var toggleClassSelection = function() {
	var activeOptionClass = 'flinfo__option--selected',
		activeCardClass = 'flinfo--selected',
		$option = $('.flinfo__option');
	$option.removeClass(activeOptionClass);
	$(this).addClass(activeOptionClass);
	$('.flinfo').removeClass(activeCardClass);
	$(this).parents('.flinfo').addClass(activeCardClass);
}

var setLeftPositions = function() {
	var leftPos = 0;
	$('.flights').find('.flinfo').each(function() {
		$(this).css('left',leftPos + 'px');
		leftPos += (cardWidth + 10);
	});
}

var confirmFlight = function(e) {
	e.preventDefault();
	$('.canvas__wrap').attr('class','canvas__wrap');
	$('#packagesOptionsFlightsDepart')[0].classList.add('pkg-selection--updated');
	setTimeout(function() {
		$('.pkg-inner-content')[0].classList.remove('pkg-inner-content--visible');
	}, 1000);
	setCanvasHeight(overviewHeight);
}

var updateProfile = function(el) {

	hotelName = $(el).find('.pkg-option__title').text();
	hotelImg = $(el).find('.pkg-option__thumb').css('background-image');

	$('.pkg-profile__hero').css('background-image', hotelImg);
	$('.pkg-profile__title').text(hotelName);

}

var closeProfile = function() {
	$('.inner-canvas__wrap')[0].classList.remove('inner-canvas__wrap--profiles');
	$('#profile')[0].classList.remove('pkg-inner-content--visible');
	setCanvasHeight(optionsHeight,overviewHeight);
}

var revealContent = function(e) {
	e.preventDefault();
	$(this).remove();
	$('.pkg-profile__extra').show();
	setCanvasHeight(profileHeight);
}

var moveElement = function(el,increment) {
    elPos += increment;
    el.css('-webkit-transform', 'translate3d(' + elPos + '%,0,0)');
}


// Docready

jQuery(function($) {

	var overviewHeight = $('#overview').outerHeight(),
		profileHeight = $('#profile').outerHeight(),
		listHeight = $('#options').outerHeight(),
		$innerCanvasWrap = $('.inner-canvas__wrap'),
		cardWidth = $('.flinfo').outerWidth(),
		$canvasWrap = $('.canvas__wrap');

	// Init
	// -----------------------------------------------------

	// Set initial canvas height, defined by package overview height

	if (mobileWidth) {
		console.log("Running mobile stuff");
		setCanvasHeight(overviewHeight);
		$('.wot-footer').hide();
	}

	if (tabletPortrait) {
		console.log("Running tablet stuff");

		var deviceHeight = $(document).height(),
			headerHeight = $('.wot-header').outerHeight(),
			tabsHeight = $('.wot-tabs').outerHeight();

		$('.canvas').css('height',deviceHeight - (headerHeight+tabsHeight) + 'px');
		$('.pkg-overview').css('height',deviceHeight - (headerHeight+tabsHeight) + 'px');
		$('.wot-footer').hide();
	}

	if (desktopWidth) {
		console.log("Running desktop stuff");
		setCanvasHeight(listHeight,overviewHeight);
	}


	// Events
	// -----------------------------------------------------

	// Back arrow on list pages

	$('#back-button').click(function() {
		moveElement($canvasWrap,100);
	});

	// Back arrow on second pages pages

	$('.content-arrow').click(function() {

		if (mobileWidth) {
			$('.canvas__wrap')[0].classList.remove('canvas__wrap--third');
			$('.pkg-inner-content')[0].classList.remove('pkg-inner-content--visible');
		}

		if (desktopWidth) {
			$('.inner-canvas__wrap')[0].classList.remove('inner-canvas__wrap--profiles');
			setTimeout(function() {
				$('.pkg-inner-content')[0].classList.remove('pkg-inner-content--visible');
			}, 1000);
		}

		setCanvasHeight(optionsHeight,overviewHeight);

	});

	// Hotel tab stuff

	$('.pkg-tabs a').click(function(e) {
		e.preventDefault();
		var selectedTab = $(this).attr('href');
		$('.pkg-tabs__active').removeClass('pkg-tabs__active');
		$(this).parent('li').addClass('pkg-tabs__active');
		$('.pkg-list__group--active')[0].classList.remove('pkg-list__group--active');
		$(selectedTab)[0].classList.add('pkg-list__group--active');
	});

	// Confirm hotel selection

	$('.room__action').click(function(e) {
		var	hotelName = $('.pkg-profile__title').text()
			hotelImg = $('.pkg-profile__hero').css('background-image');
		e.preventDefault();
		if (mobileWidth) {
			moveElement($canvasWrap,200);
		};
		$('#packagesOptionsHotels')[0].classList.add('pkg-selection--updated');
		$(this).find('#status').text('Staying here');
		if (mobileWidth) {
			setTimeout(function() {
				$('.pkg-inner-content')[0].classList.remove('pkg-inner-content--visible');
			}, 1000);
		}
		$('#pkg-hotel-name').text(hotelName);
		$('#pkg-hotel-img').css('background-image', hotelImg);

		$('.pkg-option--confirmed').removeClass('pkg-option--confirmed');
		$('.pkg-option--selected').addClass('pkg-option--confirmed');
		if (mobileWidth) {
			setCanvasHeight(overviewHeight);
		}
		else {
			// Find height of the options with new content in it
			var optionsHeight = $('#options').outerHeight();
			setCanvasHeight(optionsHeight,overviewHeight);
		}
	});

	$('#more-content').click(revealContent);


	$('.pkg-option').click(function() {

		updateProfile(this);

		if (mobileWidth) {
			setCanvasHeight(profileHeight);
			moveElement($canvasWrap,-100);
		}

		if (tabletPortrait) {
			moveElement($innerCanvasWrap,-100);
		}

		if (desktopWidth) {
			$innerCanvasWrap.addClass('inner-canvas__wrap--profiles');
			setCanvasHeight(overviewHeight);
		}

	});


	$('.pkg-profile__back').click(function() {
		moveElement($innerCanvasWrap,100);
	});

	$('.pkg-profile__close').click(function() {
		$innerCanvasWrap.removeClass('inner-canvas__wrap--profiles');
	});

	// Clicking a selection in the package overview
	
	$('.pkg-selection').click(function() {

		// overviewHeight = $('#overview').outerHeight(); 

		if (mobileWidth) {

			// Shift canvas to the right to display option list on mobile view
			$('body').addClass('inner-page');
			moveElement($canvasWrap,-100);

		}

		// Load appropriate option list

		var content = $(this).attr('id');
		$('#options').load('/components/packagesOptions/' + content + '.html', function(response, status, xhr) {

			// console.log($('.flinfo').outerWidth());

			// Declare flight slider for hammer
			// flightSlider = MyHammer($('#flights-slider').get(0));

			var position = 0,
				dragStartPosition = 0,
				cardsTotal = $('.flinfo').length,
				cardWidth = $('.flinfo').outerWidth(),
				cardsWidth = (cardWidth * cardsTotal),
				optionsHeight = $('#options').outerHeight(),
				$flightWrap = $('.flights'),
				$flightSlider = $('.flights__slider')
				$canvasWrap = $('.canvas__wrap');

			console.log('Card width is ',cardWidth);

			// Flight slider
	
			setLeftPositions();

			if (mobileWidth) {
				// Set height of the parent canvas by finding the height of the options
				setCanvasHeight(optionsHeight);
			}

			if (tabletWidth) {
				setCanvasHeight(documentHeight);
			}

			if (desktopWidth) {
				setCanvasHeight(optionsHeight,overviewHeight);
			};
			
			// flightSlider.on("dragstart", function(event) {
			// 	dragStartPosition = position;
		 //    });

		 //    flightSlider.on("drag", function(event) {
			// 	var direction =event.gesture.direction,
			// 		adjustment = Math.floor(event.gesture.distance);
			// 	if ((_ref = event.gesture.direction) !== 'left' && _ref !== 'right') {
			// 	  return;
			// 	}
			// 	if (position >= 0 && direction === 'right') {
			// 	  return;
			// 	}
			// 	if (position <= ((cardsWidth - cardWidth) * -1) && direction === 'left') {
			// 		return;
			// 	}
			// 	if(direction === 'left') {
			// 		adjustment = adjustment * -1;
			// 	}
			// 	position = dragStartPosition + adjustment;
			// 	$flightSlider.css('-webkit-transform', 'translate3d(' + position + 'px,0,0)');
		 //    });
			
			// flightSlider.on("dragend", function(event) {
			// 	dragStartPosition = position;
		 //    });	

			$('.pills').on('click','a', toggleActivePill);

			$('.flinfo__option').on('click',this,toggleClassSelection);

			$('.confirm-flight').on('click',this, confirmFlight);

			// Clicking a hotel option

			$('.pkg-option').click( function() {

				updateProfile();

				if (mobileWidth) {
					setCanvasHeight(profileHeight);
					moveElement($canvasWrap,-100);
				}

				if (tabletPortrait) {
					moveElement($innerCanvasWrap,-100);
				}

				if (desktopWidth) {
					moveElement($innerCanvasWrap,-100);
					setCanvasHeight(profileHeight,overviewHeight);
				}

			});

			
		});


	});


});