$(document).ready(function() {
	initImageGallery();
	initWorkingTriangle();
	initCabinetDoorScroller();
	initCabinetMaterialsScroller();
	initFaucetScroller();
	initCooktopScroller();
	initFridgeScroller();	
	initGlossary();
	initThickbox();
	initBalloons();
	initBudgetCalc();
	initCountertopCalc();
	initFlooringCalc();
});

function initImageGallery() {
	$('.imageGallery').find('.thumbnails').find('li > img').click(function(i) {
		$(this).parent().parent().parent().find('li').removeClass('selected');
		var med = $(this).attr('src').replace('small', 'med');
		var large = $(this).attr('src').replace('small', 'large');
		$('.imageGallery').find('.mainImage > img').eq(0).attr('src', med);
		$('.imageGallery').find('.mainImage > a').eq(0).attr('href', large);
		$(this).parent().addClass('selected');
	});
}

function initWorkingTriangle() {
	$('#workingTriangle').find('dt').hover(
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	).click(function() {
		$('#workingTriangle > .details').remove();
		$('#workingTriangle').find('dt').removeClass('selected');
		
		var details = $(document.createElement('div')).addClass('details');
		var largeImageSrc = $(this).find('img').attr('src').replace('small', 'large');
		var largeImage = $(document.createElement('img')).attr('width', '335').attr('height', '224')
		                                                 .attr('border', '0').attr('src', largeImageSrc)
														 .appendTo($(details));
		
		$(document.createElement('p')).html($(this).next('dd').html()).appendTo($(details));
		$(details).insertBefore($('#workingTriangle > dl'));
		
		$(this).addClass('selected');
	});
	$('#workingTriangle').find('dt').eq(0).click();
}

function initCabinetDoorScroller() {
	var container = $('#cabinetDoors').find('#doors');
	var scroller = $(container).find('.scroller');
	
	$(scroller).find('dt').hover(
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	).click(function() {
		$(container).find('.largeImage').remove();
		$(container).find('.desc').remove();
		$(scroller).find('dt').removeClass('selected');
		
		var desc = $(document.createElement('p')).addClass('desc').html($(this).next('dd').html()).appendTo($(container));
		
		var largeImageSrc = $(this).find('img').attr('src').replace('med', 'large');
		var largeImage = $(document.createElement('img')).attr('width', '164').attr('height', '258')
		                                                 .attr('border', '0').attr('src', largeImageSrc)
														 .addClass('largeImage')
														 .insertBefore($(scroller));
		
		$(this).addClass('selected');		
	});
	$(scroller).find('dt').eq(0).click();
	addScroller(scroller);
}

function initFaucetScroller() {
	var container = $('#sinksFaucets').find('#faucets');
	var scroller = $(container).find('.scroller');
	
	$(scroller).find('dt').hover(
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	).click(function() {
		$(container).find('.largeImage').remove();
		$(container).find('.desc').remove();
		$(scroller).find('dt').removeClass('selected');
		
		var desc = $(document.createElement('p')).addClass('desc').html($(this).next('dd').html()).appendTo($(container));
		
		var largeImageSrc = $(this).find('img').attr('src').replace('small', 'large').replace('.gif', '.jpg');
		var largeImage = $(document.createElement('img')).attr('width', '244').attr('height', '263')
		                                                 .attr('border', '0').attr('src', largeImageSrc)
														 .addClass('largeImage')
														 .insertBefore($(scroller));
		
		$(this).addClass('selected');		
	});
	$(scroller).find('dt').eq(0).click();
	addScroller(scroller);
}

function initCabinetMaterialsScroller() {
	var container = $('#cabinetDoors').find('#materials');
	var scroller = $(container).find('.scroller');
	addScroller(scroller);
}

function initCooktopScroller() {
	var container = $('#appliances').find('#cooktops');
	var scroller = $(container).find('.scroller');
	addScroller(scroller);
}

function initFridgeScroller() {
	var container = $('#appliances').find('#fridges');
	var scroller = $(container).find('.scroller');
	addScroller(scroller);
}

function addScroller(scroller) {
	var scrollArea = $(scroller).find('.scrollArea');
	var scrollContent = $(scroller).find('.scrollContent');
	
	var btnScrollLeft = $(document.createElement('span')).addClass('btnScrollLeft');
	var btnScrollRight = $(document.createElement('span')).addClass('btnScrollRight');
	
	var maxScrollLeft = $(scrollArea).width() - $(scrollContent).width();
	
	$(btnScrollLeft).click(function() {
		var scrollLeft = $(scrollContent).css('left');
		var newScrollLeft = Number(scrollLeft.replace('px', '')) + $(scrollArea).width();
		if (newScrollLeft >= 0) newScrollLeft = 0;
		if (newScrollLeft != scrollLeft) {
			$(scrollContent).animate({left: newScrollLeft}, 1000);
		}
	});
	$(btnScrollRight).click(function() {
		var scrollLeft = $(scrollContent).css('left');
		var newScrollLeft = Number(scrollLeft.replace('px', '')) - $(scrollArea).width();
		if (newScrollLeft < maxScrollLeft) newScrollLeft = maxScrollLeft;
		if (newScrollLeft != scrollLeft) {
			$(scrollContent).animate({left: newScrollLeft}, 1000);
		}
	});
	$(scrollArea).before(btnScrollLeft);
	$(scrollArea).after(btnScrollRight);
}

function initGlossary() {
	var glossary = $('#budgetWorkbook > #glossary');
	var letters = Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
	var index = $(document.createElement('div')).addClass('letters');
	
	var showTerms = function() {
		$(glossary).find('.definition').remove();
		$(glossary).find('.terms').remove();
		var letter = $(this).text().toLowerCase();
		var terms = $(document.createElement('ul')).addClass('terms');
		$(glossary).find('dt').each(function(i) {
			if ($(this).text().substring(0,1).toLowerCase() == letter) {
				var term = $(document.createElement('li')).addClass('term').html($(this).text());
				var definition = $(this).next().html();
				$(term).hover(
					function() {
						$(this).addClass('hover');
					},
					function() {
						$(this).removeClass('hover');
					}
				);
				$(term).click(function() { showDefinition(this, definition); });
				$(term).appendTo($(terms));
			}
		});
		$(terms).appendTo($(glossary));
		$(glossary).find('.term').eq(0).click();
	}
	
	var showDefinition = function(term, definition) {
		$(glossary).find('.terms > li').removeClass('selected');
		var width = $(glossary).width() - $(glossary).find('.terms').width() - 100;
		$(term).addClass('selected');
		$(glossary).find('.definition').remove();
		$(document.createElement('p')).css('width', width).addClass('definition').html('<strong>' + $(term).text() + '</strong><br/>' +definition).appendTo($(glossary));
	}
	
	for (var i = 0; i < letters.length; i++) {
		var hasTerms = false;
		$(glossary).find('dt').each(function(j) {
			if ($(this).text().substring(0, 1).toLowerCase() == letters[i].toLowerCase()) {
				hasTerms = true;
			}
		});
		var letter = $(document.createElement('span')).html((hasTerms ? '<strong>' + letters[i] + '</strong>' : letters[i]));
		if (hasTerms) {
			letter.click(showTerms);
			letter.hover(
				function() { 
					$(this).addClass('hover');	  
				},
				function() {
					$(this).removeClass('hover');
				}
			);
		}
		$(letter).appendTo($(index));
	}
	$(index).appendTo($(glossary));
	$(index).find('strong').eq(0).parent().click();
}

function initThickbox() {
	var closeTB = function() {
		$('.TBPopup').remove();
		$('.TBbackground').remove();
	}
	
	var centerBox = function() {
		var box = $('.TBPopup');
		
		var innerWidth = $(window).innerWidth();
		var innerHeight = $(window).innerHeight();
		var boxWidth = $(box).width();
		var boxHeight = $(box).height();
		
		$(box).css('top', $(window).scrollTop() + ((innerHeight - boxHeight - 40) / 2) + 'px');
		$(box).css('left', $(window).scrollLeft() + ((innerWidth - boxWidth - 40) / 2) + 'px');
	}

	$('a.thickbox').click(function() {
		var background = $(document.createElement('div')).addClass('TBbackground').css('height', $('#wrap').height() + 20);
		$(background).appendTo($('body')).click(closeTB);
		var thickbox = $(document.createElement('div')).addClass('TBPopup');
		var imageSrc = $(this).attr('href');
		var image = $(document.createElement('img')).attr('src', imageSrc);
		$(image).appendTo($(thickbox));
		$(thickbox).appendTo($('body')).click(closeTB);
		$(image).load(centerBox);
		centerBox();
		return false;   
	});
	
	$(window).scroll(centerBox);
	$(window).resize(centerBox);
}

function initBalloons() {
	$('.hotspot').click(function(e) {
		return false;
	});
	$('.hotspot').hoverIntent(
		function(e) {
			var title = $(this).attr('desc').split(':')[0];
			var desc = $.trim($(this).attr('desc').split(':')[1]);
			var content = '<p><strong>' + title + '</strong> <br/>' + desc + '</p>';
			var balloon = $(document.createElement('div')).addClass('balloon').html(content).appendTo($('body'));
			$(balloon).css('top', e.pageY - $(balloon).height() - 40).css('left', e.pageX - 40);
		},
		function(e) {
			$('.balloon').remove();
		}
	);
}

function initBudgetCalc() {
	var calcTotalAmount = function() {
		var totalAmount = 0;
		$('#budgetCalculator').find('table').find('input.amount').each(function() {
			totalAmount = totalAmount + Number($(this).val().replace(',', ''));
		});
		$('#budgetCalculator').find('table > tfoot').find('span.amount').html(addCommas(totalAmount));
	};
	var calcTotalPercentage = function() {
		var totalPercentage = 0;
		$('#budgetCalculator').find('table').find('input.percentage').each(function() {
			totalPercentage = totalPercentage + Number($(this).val());
		});
		$('#budgetCalculator').find('table > tfoot').find('span.percentage').html(totalPercentage);
		if (totalPercentage > 100) {
			var errorMsg = 'You must decrease one (or) more categories by ' + (totalPercentage - 100) + '% to compensate for the changes.';
			if (getUrlParam('langId') == '-16') {
				errorMsg = 'Vous devez diminuer une cat&#0233;gorie ou plus par ' + (totalPercentage - 100) + '% pour compenser les changements.';
			}
			$('#budgetCalculator').find('.errorMsg').html(replaceUnicodeEntities(errorMsg)).show();
		} else {
			$('#budgetCalculator').find('.errorMsg').hide();
		}
	};
	var resetAmounts = function() {
		var budget = Number($('#budgetCalculator').find('.start').find('input').val());
		if (isNaN(budget) || budget <= 0) {
			var errorMsg = 'Please enter a number';
			if (getUrlParam('langId') == '-16') {
				errorMsg = 'Veuillez inscrire un nombre';
			}
			alert(errorMsg);
		} else {
			$('#budgetCalculator').find('table > tbody > tr').each(function() {
				var percentage = Number($(this).find('input.percentage').attr('defaultVal'));
				var amount = Math.round((percentage/100) * budget);
				$(this).find('input.percentage').val(percentage);
				$(this).find('input.amount').val(addCommas(amount));
			});
			$('#budgetCalculator').find('.start').hide();
			$('#budgetCalculator').find('.budget').show();
			calcTotalAmount();
			calcTotalPercentage();
		}
	}
	$('#budgetCalculator').find('.btnContinue').click(resetAmounts);
	$('#budgetCalculator').find('input.percentage')
		// backup current value in case user enters a non-number
		.focus(function() {
			$(this).attr('previousVal', $(this).val());
		})
		.change(function() {
			if (isNaN(Number($(this).val()))) {
				// revert back to previous value if user entry is not a number
				$(this).val($(this).attr('previousVal'));
			} else {
				// calculate new amount
				$(this).val(Number($(this).val()));
				var budget = Number($('#budgetCalculator').find('.start').find('input').val());
				var amount = Math.round( ($(this).val()/100) * budget );
				$(this).parent().parent().find('input.amount').val( addCommas(amount) );
					
				calcTotalAmount();
				calcTotalPercentage();
			}
		});
	$('#budgetCalculator').find('.btnResetAllocation').click(function() {
		resetAmounts();
		return false;
	});
	$('#budgetCalculator').find('.btnStartOver').click(function() {
		$('#budgetCalculator').find('.budget').hide();
		$('#budgetCalculator').find('.start').show();
		return false;
	});
}

function initCountertopCalc() {
	$('#calcCountertop').find('#calc').find('.measurement').change(function() { 
		$('#results').hide();
	});
	
	$('#calcCountertop').find('#calc').find('.btnCalculate').click(function() {
		var grandTotal = 0;		
		var error = false;
		$('#calc').find('.section').each(function() {
			$(this).find('.measurement').removeClass('error');
			var length_ft = Number($(this).find('.length_ft').val());
			var length_in = Number($(this).find('.length_in').val());
			var width_ft = Number($(this).find('.width_ft').val());
			var width_in = Number($(this).find('.width_in').val());
			var length = (length_ft * 12) + length_in;
			var width = (width_ft * 12) + width_in;
			if (length > 0 && width > 0) {
				var total = length * width / 144;
				grandTotal = grandTotal + total;
			} else if (length > 0 || width > 0) {
				error = true;
				if (length == 0) {
					$(this).find('.measurement.length_ft').addClass('error');
					$(this).find('.measurement.length_in').addClass('error');
				} else {
					$(this).find('.measurement.width_ft').addClass('error');
					$(this).find('.measurement.width_in').addClass('error');
				}
			}
		});
		
		if (!error) {
			$('#calc').find('input[@name=grandTotal]').val(Math.ceil(grandTotal));
			$('#results').show();
		} else {
			var errorMsg = 'Please fill in all required fields.';
			if (getUrlParam('langId') == '-16') {
				errorMsg = 'Veuillez remplir tous les champs requis.';
			}
			alert(errorMsg);
		}
	});
	
	$('#calcCountertop').find('#calc').find('.btnReset').click(function() {
		$('#calc').find('input[@type=text]').val('');
		$('#results').hide(); 
	});
}

function initFlooringCalc() {
	$('#calcFlooring').find('#calc').find('.measurement').change(function() { 
		$('#results').hide();
	});
	
	$('#calcFlooring').find('#calc').find('.btnCalculate').click(function() {
		$('#calc').find('.measurement').removeClass('error');
		var length_ft = Number($('#calc').find('.length_ft').val());
		var length_in = Number($('#calc').find('.length_in').val());
		var width_ft = Number($('#calc').find('.width_ft').val());
		var width_in = Number($('#calc').find('.width_in').val());
		var length = (length_ft * 12) + length_in;
		var width = (width_ft * 12) + width_in;
		if (length > 0 && width > 0) {
			var total = length * width / 144;
			var totalY = total / 9;
			$('#grandTotal').html(Math.ceil(total));
			$('#grandTotalY').html(Math.round(totalY*100)/100);
			$('#results').show();
		} else if (length > 0 || width > 0) {
			if (length == 0) {
				$('#calc').find('.measurement.length_ft').addClass('error');
				$('#calc').find('.measurement.length_in').addClass('error');
			} else {
				$('#calc').find('.measurement.width_ft').addClass('error');
				$('#calc').find('.measurement.width_in').addClass('error');
			}
			var errorMsg = 'Please fill in all required fields.';
			if (getUrlParam('langId') == '-16') {
				errorMsg = 'Veuillez remplir tous les champs requis.';
			}
			alert(errorMsg);
		}
	});
	
	$('#calcFlooring').find('#calc').find('.btnReset').click(function() {
		$('#calc').find('input[@type=text]').val('');
		$('#results').hide(); 
	});
}

function addCommas(nStr) {
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

function getUrlParam (name) {
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	if( results == null ) return "";
	else  return results[1];
}

function replaceUnicodeEntities(str) {
	var matched = str.match(/&#([0-9]+);/g);
	if (matched) {
		for (var i = 0; i < matched.length; i++) {
			var r = String.fromCharCode(Number(matched[i].replace(/&#([0-9]+);/g, '$1')));
			//var r = String.fromCharCode(Number(matched[i].replace('&#', '').replace(';','')));
			str2 = str.replace(matched[i], r);
			str = str2;
		}
	}
	return str;
}