function validateEmail(email) {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
}

function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}

function loadAllImages() {
  var images = document.querySelectorAll('img[data-src]' );
  for (var i = 0; i < images.length; i++) {
    ImageLoader.load(images[i], {load: true, mode: 'fit'});
  }
}

function loadAllImages2() {
	$.each($('img[data-src]'),function(k,v) {
		ImageLoader.load(v, {
			load: true,
			mode: 'fill'
		});
		setTimeout(function(){
			$('img[data-src]:nth-child('+k+')').addClass('summary-thumbnail-image loaded');
		},250);
	})
}

function formError(node, error) {
	$(node).siblings('.cpr-modal-field-error').text(error);
	$(node).parents('.cpr-modal-field-wrapper').addClass('invalid');
}

function handleBars(html) {
	var user=JSON.parse(sessionStorage.user);
	html=replaceAll(html,'{{fname}}',user.fname);
	html=replaceAll(html,'{{lname}}',user.lname);
	html=replaceAll(html,'{{email}}',user.email);
	html=replaceAll(html,'{{phone}}',user.phone);

	return html; 
}
function swap(token,content,subject) {
	return replaceAll(subject,token,content);
}

function showAccountButton() {
	$('.main-nav>ul li:last-child').remove();
	$('.main-nav>ul').append(handleBars('<li class="folder-collection folder">	<a aria-haspopup="true" href="/my-account" onclick="return false;">Hi, {{fname}}</a>  	<div class="subnav">    	<ul>        	<li class="external-link">            	<a class="cpr-no-update" href="/my-account">My Account</a>          	</li>          	<li class="external-link">            	<a href="/wishlist">Wishlist</a>          	</li>          	<li class="external-link">            	<a href="javascript:cpr.logout()">Logout</a>          	</li>        </ul>  	</div></li>'));
}

var cpr={

updateAccount: function() {

	$('.cpr-working').css({display:'inline'});
	/* local validation */
	var fname=$('.cpr-form #cpr-login-fname').val().trim();
	var lname=$('.cpr-form #cpr-login-lname').val().trim();

	var pw=$('.cpr-form #cpr-login-password').val().trim();
	var pw2=$('.cpr-form #cpr-login-password-confirm').val().trim();

	var err=0;

	if(fname=='') {
		err++;
		$('.cpr-form #cpr-login-fname').parents('.cpr-modal-field-wrapper').addClass('invalid');
	}
	if(lname=='') {
		err++;
		$('.cpr-form #cpr-login-lname').parents('.cpr-modal-field-wrapper').addClass('invalid');
	}
	if(pw !== pw2) {
		err++;
		$('.cpr-form #cpr-login-password-confirm').parents('.cpr-modal-field-wrapper').addClass('invalid');
	}

	if(err<1) {

		var data={
			uid: user.id,
			fname: fname,
			lname: lname,
			pw: pw
		};
		

		$.ajax({
			url:apiBase+'/user/update',
			data:data,
			dataType:'json',
			type:'post'
		}).done(function(response) {
			$('.cpr-update-success').css({display:'block'});
			$('.cpr-working').css({display:'none'});
			sessionStorage.setItem('user',JSON.stringify(response.user));
			user=response.user;
			$('a[href="/my-account"]:not(.cpr-no-update)').text('Hi, '+response.user.fname);
		}).fail(function(response) {
			$('.cpr-update-error').css({display:'block'});
			$('.cpr-working').css({display:'none'});
		});

	}
	

},

showLogin: function() {
	$('#cpr-modal-body').empty();
	$('#cpr-modal-body').append('<span class="cpr-modal-close-button cpr-modal-close">×</span><div class="cpr-modal-title">Log In</div><div class="cpr-modal-field-wrapper">	<input id="cpr-login-email" type="text" placeholder="Email*" class="cpr-modal-field">	<div class="cpr-modal-field-error">This field is required</div></div><div class="cpr-modal-field-wrapper">	<input id="cpr-login-password" type="password" placeholder="Password*" class="cpr-modal-field">	<div class="cpr-modal-field-error">This field is required</div></div><div class="cpr-modal-button-bar">	<button onclick="javascript:cpr.login();" class="cpr-button">Login</button>	<button class="cpr-button cpr-button-white cpr-modal-close">Cancel</button></div><div class="cpr-modal-text">Don&apos;t have an account?</div><div class="cpr-modal-text"><a href="javascript:cpr.showCreateAccount();">Create an Account</a></div>');
	$('body').addClass('cpr-show-modal');
},


login: function() {
	var err=0;
	var email=$('#cpr-login-email').val().trim();
	if(!validateEmail(email)) {
		formError('#cpr-login-email','Must be a valid email address');
		err++;
	}
	if(email=='') {
		formError('#cpr-login-email','Email is required')
		err++;
	}
	var pw=$('#cpr-login-password').val().trim();
	if(pw=='') {
		formError('#cpr-login-password','Password is required');
		err++;
	}
	if(err>0) {
		return false;
	}
	var data={
		email:email,
		password:pw
	};
	
	$.ajax({
		url:apiBase+'/users/login',
		data:data,
		dataType:'json',
		type:'post'

	}).done(function(response){
		sessionStorage.user=JSON.stringify(response.user);
		var uid=response.user.id;
		sessionStorage.loggedin='true';
		showAccountButton();
		$('body').removeClass('cpr-show-modal');
		window.location.reload();
	}).fail(function(response){
		sessionStorage.removeItem('loggedin');
		sessionStorage.removeItem('user');
		$('#cpr-modal-body').empty().append(swap('{{email}}',email,swap('{{message}}',response.responseJSON.message,'<span class="cpr-modal-close-button cpr-modal-close">×</span><div class="cpr-modal-title">Uh oh!</div><div class="cpr-modal-text">{{message}}</div><div class="cpr-modal-button-bar cpr-button-option-2">	<button class="cpr-button cpr-modal-close">Cancel</button>	<button onclick="javascript:cpr.showLogin();" class="cpr-button cpr-button-blue">Login</button></div><div class="cpr-modal-text">Forgot your password?</div><div class="cpr-modal-text"><a href="javascript:cpr.showReset();" class="cpr-modal-reset" data-email="{{email}}">Reset My Password</a></div>')));
	});
},

logout:function() {
	var user=JSON.parse(sessionStorage.user);
	var data={
		token:user.token,
		id:user.id
	};
	$.ajax({
		url:apiBase+'/users/logout',
		data:data,
		dataType:'json',
		type:'post'
	}).done(function(response){
		console.log(response);
	}).always(function(){
		sessionStorage.removeItem('loggedin');
		sessionStorage.removeItem('user');
		window.location.reload();
	});
},
showReset(email) {
	email=email||'';
	$('#cpr-modal-body').empty();
	$('#cpr-modal-body').append(swap('{{email}}',email,'<span class="cpr-modal-close-button cpr-modal-close">×</span><div class="cpr-modal-title">Reset Password</div><div class="cpr-modal-text">Enter your email below and click Reset Password:</div><div class="cpr-modal-field-wrapper">	<input id="cpr-reset-email" type="text" placeholder="Email*" class="cpr-modal-field" value="{{email}}">	<div class="cpr-modal-field-error">This field is required</div></div><div class="cpr-modal-button-bar">	<button class="cpr-button cpr-button-white cpr-modal-close">Cancel</button>	<button onclick="javascript:cpr.resetPassword();" class="cpr-button cpr-button-blue">Reset Password</button></div><div class="cpr-modal-text">Don&apos;t have an account?</div><div class="cpr-modal-text"><a href="javascript:cpr.showCreateAccount();">Create an Account</a></div>'));
	$('body').addClass('cpr-show-modal');
},

resetPassword() {
	console.log('reset password');
	var data={
		email:$('#cpr-reset-email').val().trim()
	}
	$.ajax({
		url:apiBase+'/users/forgotpassword',
		data:data,
		dataType:'json',
		type:'post'
	}).done(function(response){
		console.log(response);
	}).always(function(){
		sessionStorage.clear();
		//window.location.reload();
	});
},

showCreateAccount: function() {
	$('#cpr-modal-body').empty();
	$('#cpr-modal-body').append('<span class="cpr-modal-close-button cpr-modal-close">×</span><div class="cpr-modal-title">Create an Account</div><div class="cpr-col-2">	<div class="cpr-modal-field-wrapper">		<input id="cpr-login-fname" type="text" placeholder="First Name*" class="cpr-modal-field">		<div class="cpr-modal-field-error">This field is required</div>	</div>	<div class="cpr-modal-field-wrapper">		<input id="cpr-login-lname" type="text" placeholder="Last Name*" class="cpr-modal-field">		<div class="cpr-modal-field-error">This field is required</div>	</div></div><div class="cpr-modal-field-wrapper">	<input id="cpr-login-email" type="email" placeholder="Email*" class="cpr-modal-field">	<div class="cpr-modal-field-error">This field is required</div></div><div class="cpr-modal-field-wrapper">	<input id="cpr-login-password" type="password" placeholder="Password*" class="cpr-modal-field">	<div class="cpr-modal-field-error">This field is required</div></div><div class="cpr-modal-field-wrapper">	<input id="cpr-login-password-confirm" type="password" placeholder="Confirm Password*" class="cpr-modal-field">	<div class="cpr-modal-field-error">This field is required and must match Password</div></div><div class="cpr-modal-button-bar">	<button class="cpr-button cpr-button-white cpr-modal-close">Cancel</button>	<button onclick="javascript:cpr.createAccount();" class="cpr-button cpr-button-blue">Create Account</button></div><div class="cpr-modal-text">Already have an account?</div><div class="cpr-modal-text"><a href="javascript:cpr.showLogin();">Login</a></div>');
	$('body').addClass('cpr-show-modal');
},

showAccountRequired: function() {
	$('#cpr-modal-body').empty();
	$('#cpr-modal-body').append('<span class="cpr-modal-close-button cpr-modal-close">×</span><div class="cpr-modal-title">Bundles Account Required</div><div class="cpr-modal-text">To save items to your wishlist, you must create a Bundles account.</div><div class="cpr-modal-button-bar cpr-button-option-2">	<button class="cpr-button cpr-button-white cpr-modal-close">Cancel</button>	<button onclick="javascript:cpr.showCreateAccount();" class="cpr-button cpr-button-blue">Create an Account</button></div><div class="cpr-modal-text">Already have an account?</div><div class="cpr-modal-text"><a href="javascript:cpr.showLogin();">Login</a></div>');
	$('body').addClass('cpr-show-modal');
},


createAccount: function() {
	var err=0;
	var fname=$('#cpr-login-fname').val().trim();
	if(fname=='') {
		formError('#cpr-login-fname','First Name is required');
		err++;
	}
	var lname=$('#cpr-login-lname').val().trim();
	if(lname=='') {
		formError('#cpr-login-lname','Last Name is required');
		err++;
	}
	var email=$('#cpr-login-email').val().trim();
	if(!validateEmail(email)) {
		formError('#cpr-login-email','Must be a valid email address');
		err++;
	}
	if(email=='') {
		formError('#cpr-login-email','Email is required');
		err++;
	}
	var pw=$('#cpr-login-password').val().trim();
	if(pw.length < 6) {
		formError('#cpr-login-password','Password must be at least 6 characters');
		err++;
	}
	if(pw=='') {
		formError('#cpr-login-password','Password is required');
		err++;
	}
	var pwc=$('#cpr-login-password-confirm').val().trim();
	if(pw!==pwc) {
		formError('#cpr-login-password-confirm','Confirm Password must match Password');
		err++;
	}
	if(pwc=='') {
		formError('#cpr-login-password-confirm','Confirm Password is required');
		err++;
	}
	if(err>0) {
		return false;
	}
	console.log('create account');
	var data={
		fname: fname,
		lname: lname,
		email: email,
		password: pw
	};
	$.ajax({
		url:apiBase+'/users/create',
		data:data,
		dataType:'json',
		type:'post'
	}).done(function(response){
		console.log(response);
		$('#cpr-modal-body').empty().append('<div class="cpr-modal-title">Almost Done!</div><div class="cpr-modal-text">'+response.message+'</div><div class="cpr-modal-button-bar"><button class="cpr-button cpr-button-blue cpr-modal-close">Got it!</button></div>');
	}).fail(function(response) {
		console.log(response);
		$('#cpr-modal-body').empty().append(swap('{{email}}',email,swap('{{message}}',response.responseJSON.message,'')));
	}).always(function(){
		//sessionStorage.clear();
		//window.location.reload();
	});

},
getWishlist: function() {

	if(user && sessionStorage.loggedin) {
		$.ajax({
			url:apiBase+'/favorites',
			data:{
				uid:user.id
			},
			dataType:'json',
			type:'post'
		}).done(function(response) {
			console.log(response);
			$.each(response.favorites,function(k,v) {
				$('img[data-image-id="'+v.image_id+'"]').parents('.margin-wrapper').find('.cpr-fave').addClass('cpr-fave-on');
			});
		});
	}


},

showWishlist: function() {

	if(user && sessionStorage.loggedin) {
		$.ajax({
			url:apiBase+'/favorites',
			data:{
				uid:user.id
			},
			dataType:'json',
			type:'post'
		}).done(function(response) {
			console.log(response);
			$('.cpr-form').append('<div class="cpr-modal-title">Your Wishlist</div><div class="cpr-wishlist"></div>');
			$.each(response.favorites,function(k,v) {
				$('.cpr-wishlist').append('<div class="cpr-row"><div class="cpr-field"><img src="'+v.image_url+'"></div><div class="cpr-field">'+v.name+'</div>');
			});
			$('.cpr-form').append('<button onclick="javascript:cpr.showSubmitWishlist()" class="cpr-button">Submit Wishlist</button>');
		});
	}

},

showSubmitSuccess: function() {
	$('#cpr-modal-body').empty();
	$('#cpr-modal-body').append('<span class="cpr-modal-close-button cpr-modal-close">×</span><div class="cpr-modal-title">Wishlist Submitted</div><div style="margin-top:30px;" class="cpr-modal-text">Thank you! Your wishlist has been successfully submitted. We&apos;ll get back to you within 48 hours.</div><div class="cpr-modal-button-bar cpr-button-option-2">	<button class="cpr-button cpr-button-white cpr-modal-close">Close</button></div>');
},

showSubmitWishlist: function() {
	$('#cpr-modal-body').empty();
	$('#cpr-modal-body').append('<span class="cpr-modal-close-button cpr-modal-close">×</span><div class="cpr-modal-title">Submit Your Wishlist</div><div class="cpr-modal-text" style="margin-bottom:30px;">Fill out this form to send your wishlist and associated information to our gifting consultants.  We&apos;ll get back to you within 48 hours.</div><div class="cpr-wishlist-form"><div class="cpr-col-2">	<div class="cpr-modal-field-wrapper">		<input id="cpr-submit-fname" type="text" placeholder="First Name*" class="cpr-modal-field">		<div class="cpr-modal-field-error">This field is required</div>	</div>	<div class="cpr-modal-field-wrapper">		<input id="cpr-submit-lname" type="text" placeholder="Last Name*" class="cpr-modal-field">		<div class="cpr-modal-field-error">This field is required</div>	</div></div><div class="cpr-modal-field-wrapper">	<input id="cpr-submit-email" type="email" placeholder="Email*" class="cpr-modal-field">	<div class="cpr-modal-field-error">This field is required</div></div><div class="cpr-modal-field-wrapper">	<input id="cpr-submit-phone" type="text" placeholder="Phone" class="cpr-modal-field"></div><div class="cpr-modal-field-wrapper">	<input id="cpr-submit-how" type="text" placeholder="How did you hear about us?" class="cpr-modal-field"></div><div class="cpr-modal-field-wrapper">	<label class="cpr-modal-label">Gifting Date</label>	<input id="cpr-submit-date" type="date" placeholder="Gifting Date" class="cpr-modal-field"></div><div class="cpr-modal-field-wrapper">	<input id="cpr-submit-location" type="text" placeholder="Gifting Location" class="cpr-modal-field"></div><div class="cpr-modal-field-wrapper">	<input id="cpr-submit-quantity" type="text" placeholder="Quantity" class="cpr-modal-field"></div><div class="cpr-modal-field-wrapper">	<input id="cpr-submit-budget" type="text" placeholder="Budget (if known)" class="cpr-modal-field"></div><div class="cpr-modal-field-wrapper">	<input id="cpr-submit-theme" type="text" placeholder="Color / Style / Theme" class="cpr-modal-field"></div><div class="cpr-modal-field-wrapper">	<textarea id="cpr-submit-about" placeholder="Tell Us About Your Gifting Needs*" class="cpr-modal-field"></textarea>	<div class="cpr-modal-field-error">This field is required</div></div><div class="cpr-modal-button-bar">	<button onclick="javascript:cpr.submitWishlist();" class="cpr-button cpr-button-blue">Submit Wishlist <span class="fa fa-gear fa-spin cpr-working"></span></button></div></div>');
	$('#cpr-submit-fname').val(user.fname);
	$('#cpr-submit-lname').val(user.lname);
	$('#cpr-submit-email').val(user.email);
	$('body').addClass('cpr-show-modal');
},

submitWishlist: function() {

	$('span.fa.fa-gear.fa-spin.cpr-working').css({display:'inline'});
	var fname=$('#cpr-submit-fname').val().trim();
	var lname=$('#cpr-submit-lname').val().trim();
	var email=$('#cpr-submit-email').val().trim();
	var phone=$('#cpr-submit-phone').val().trim();
	var how=$('#cpr-submit-how').val().trim();
	var date=$('#cpr-submit-date').val().trim();
	var location=$('#cpr-submit-location').val().trim();
	var quantity=$('#cpr-submit-quantity').val().trim();
	var budget=$('#cpr-submit-budget').val().trim();
	var theme=$('#cpr-submit-theme').val().trim();
	var about=$('#cpr-submit-about').val().trim();

	var err=0;
	if(fname=='') {
		err++;
		$('#cpr-submit-fname').parents('.cpr-modal-field-wrapper').addClass('invalid');
	}
	if(lname=='') {
		err++;
		$('#cpr-submit-lname').parents('.cpr-modal-field-wrapper').addClass('invalid');
	}
	if(about=='') {
		err++;
		$('#cpr-submit-about').parents('.cpr-modal-field-wrapper').addClass('invalid');
	}

	if(err<1) {
		var data={
			fname:fname,
			lname:lname,
			email:email,
			phone:phone,
			how:how,
			date:date,
			location:location,
			quantity:quantity,
			budget:budget,
			theme:theme,
			about:about,
			uid:user.id
		}

		$.ajax({
			url:apiBase+'wishlist/submit',
			data:data,
			dataType:'json',
			method:'post'
		}).done(function(response) {
			cpr.showSubmitSuccess();
		});
	}




}




}


var apiBase='https://bundles.cprdigital.com/';
var user=JSON.parse(sessionStorage.getItem('user'));
if(user && sessionStorage.loggedin) {
	showAccountButton();
}
$('.main-nav ul').append();

/* adding wishlist icon to catalog items */
$('#collection-5c0077be70a6ad22e335196d .slide .margin-wrapper').append('<span class="cpr-fave fa fa-heart"></span>');


/* adding classes to blocks */

$('#block-3c3c101795003a174ba7, #block-458c4701680b83b6861e, #block-08214b18efe835167061, #block-yui_3_17_2_1_1648765915229_51731').addClass('cpr-vessels cpr-gallery active');
$('#block-27a2517945d9620576f9, #block-3828cc6e23821c3b49cf, #block-9795d9d77c387da568c7').addClass('cpr-snacks cpr-gallery');
$('#block-d006cb62a10c14b09ef8, #block-bbb6b71b6743c8c64e1a, #block-d38962adc0a7b6c0788f').addClass('cpr-hydration cpr-gallery');
$('#block-d5cd79253042805a6871, #block-32dffe0b4661f5f07804, #block-yui_3_17_2_1_1610744734502_26777').addClass('cpr-altitude cpr-gallery');
$('#block-27e53156d44cea680286, #block-aff7f67546876861f84a, #block-4347d653ac3681c0df6d').addClass('cpr-souvenirs cpr-gallery');
$('#block-6756d17233ca7f11a64f, #block-f2bf6c4c3541ab0da69c, #block-47d479b5f739e70541df').addClass('cpr-relax cpr-gallery');
$('#block-yui_3_17_2_1_1612970932066_29374, #block-yui_3_17_2_1_1573172498115_24154, #block-yui_3_17_2_1_1612970932066_30226').addClass('cpr-local cpr-gallery');
$('#block-yui_3_17_2_1_1613339003466_37488, #block-yui_3_17_2_1_1612970932066_28774, #block-yui_3_17_2_1_1573172498115_24626').addClass('cpr-colorado cpr-gallery');
$('#block-253a7915a24a5976543e, #block-yui_3_17_2_1_1572816811385_22416, #block-06b9c52e98d373795112, #block-aca24298c76db7867fdf').addClass('cpr-packaging cpr-gallery');

$('#block-yui_3_17_2_1_1684794601700_159690, #block-yui_3_17_2_1_1684794601700_159057, #block-yui_3_17_2_1_1684794601700_156342').addClass('cpr-wedding cpr-gallery');
$('#block-yui_3_17_2_1_1684794601700_151656, #block-yui_3_17_2_1_1684794601700_151028, #block-yui_3_17_2_1_1684794601700_145234').addClass('cpr-readymade cpr-gallery');
$('#block-yui_3_17_2_1_1684794601700_155455, #block-yui_3_17_2_1_1684794601700_154823, #block-yui_3_17_2_1_1684794601700_152621').addClass('cpr-apparel cpr-gallery');





/* Managing the switcher */
$('.cpr-sidebar-item').click(function() {
	
	$('.active').removeClass('active');
	$(this).addClass('active');
	if($(this).is('.cpr-vessels')) {
		$('.sqs-block.cpr-vessels').addClass('active');
	} else if($(this).is('.cpr-snacks')) {
		$('.sqs-block.cpr-snacks').addClass('active');
	} else if($(this).is('.cpr-hydration')) {
		$('.sqs-block.cpr-hydration').addClass('active');
	} else if($(this).is('.cpr-altitude')) {
		$('.sqs-block.cpr-altitude').addClass('active');
	} else if($(this).is('.cpr-souvenirs')) {
		$('.sqs-block.cpr-souvenirs').addClass('active');
	} else if($(this).is('.cpr-relax')) {
		$('.sqs-block.cpr-relax').addClass('active');
	} else if($(this).is('.cpr-local')) {
		$('.sqs-block.cpr-local').addClass('active');
	} else if($(this).is('.cpr-colorado')) {
		$('.sqs-block.cpr-colorado').addClass('active');
	} else if($(this).is('.cpr-packaging')) {
		$('.sqs-block.cpr-packaging').addClass('active');
	} else if($(this).is('.cpr-wedding')) {
		$('.sqs-block.cpr-wedding').addClass('active');
	} else if($(this).is('.cpr-apparel')) {
		$('.sqs-block.cpr-apparel').addClass('active');
	} else if($(this).is('.cpr-readymade')) {
		$('.sqs-block.cpr-readymade').addClass('active');
	}
	loadAllImages();
});

/* Close modals */
$('body').on('click','.cpr-modal-close',function() {
	$('body').removeClass('cpr-show-modal');
});


/* Handle wishlist clicks */
$('body').on('click','.cpr-fave',function(){
		if(!sessionStorage.getItem('loggedin')) {
			console.log('show account required');
			cpr.showAccountRequired();
			return false;
		}
		var imageid;

		imageid=$(this).parents('.margin-wrapper').find('img').attr('data-image-id');
		imageurl=$(this).parents('.margin-wrapper').find('img').attr('src');
		itemname=$(this).parents('.margin-wrapper').find('.image-slide-title').text();
		console.log('Item:'+itemname,'Imageurl:'+imageurl);

		var user=JSON.parse(sessionStorage.getItem('user'));
		var data={
			userid: user.id,
			imageid: imageid,
			imageurl: imageurl,
			name: itemname
		}
		var that=this;
		if($(this).hasClass('cpr-fave-on')) {
			data.fave='0';
		} else {
			data.fave='1';
		}
		$.ajax({
			url:apiBase+'favorites/toggle',
			method:'post',
			data:data,
			dataType:'json'
		}).done(function(response) {
			if(data.fave == '0') {
				$(that).removeClass('cpr-fave-on');
			} else {
				$(that).addClass('cpr-fave-on');
			}
		});
	});