var debug = false;
var listAttrId = '#category-list';
var timeoutSet = null;
var timeoutWait = 5000;
// scrolling speeds
var scrollSpeed = 3000; // 3500 = slow, 1000 - fast
var fastClickSpeed = 150;
var manualScrollSpeed = 200;
// how wide a category item is
var itemWidth = null;
$(document).ready(function() {
// DEBUG setup
if(debug) setupDebug();
// setup format needs
setupSelectorFormatting();
// Add reset button
addButtons();
// add click events to scrolling items
addClickToAllCategories();
// sub-category link action
addClickSubCategory();
// multi-model family action
addClickMultiFamilyPagination();
// this starts the scrolling
resetBathroomSelector();
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
});
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// Main Application Functions
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
function setupSelectorFormatting()
{
// # set some specifc JavaScript App CSS needs
// Set the clipping window to be the same
var height = $('#clip-box li').outerHeight();
$('#clip-box').css('height', height);
$('#sub-category-list').css('height', height);
$('#product-list').css('height', height);
$('#product-list .product-group').css('height', height);
$('#description-list').css('height', height);
$('#final-tier').css('height', height);
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
//alert('height ['+height+']');
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
itemWidth = parseInt($(listAttrId + ' li').outerWidth()) + parseInt($(listAttrId + ' li').css('margin-right'));
}
function addButtons()
{
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// <==== SCROLL LEFT/RIGHT BUTTON ====>
// add HTML - container for arrows
// if an arrow should have no active state
$('#explore-by-bathroom').append('');
$('#explore-by-bathroom').append('');
// add click function
$('.bathroom-selector-arrow a').click(function() {
// stop the auto-scrolling animation
$(listAttrId + ' li.category:first').stop();
// stop auto-scrolling timeout (if any)
stopAutoScrollingTimeout();
// get the left position of the first item
var left = parseInt($(listAttrId + ' li:first').css('left'));
if(debug) alert('current left position of the first item: [' + left + ']');
// the clicked arrows id
var arrow_id = $(this).parent().attr('id');
if(debug) alert(arrow_id);
// scroll items based on the direction
switch(arrow_id){
case 'explore-by-bathroom-left-arrow':
// if there's currently a left hidden item, move it to the end
if(left <= -itemWidth) {
if(debug) alert("BUFFER - remove an item from the left side before animating.");
moveItemToEnd();
}
// scroll items left
scrollCategories({ direction:'left', cleanup:true, repeat:1, speed:manualScrollSpeed, expand:false });
// set a delay to start scrolling the items again
startAutoScrollingTimeout();
break;
case 'explore-by-bathroom-right-arrow':
// if there is no currently left hidden item, move one from the end
if( left == 0) {
if(debug) alert("NO BUFFER - add an item to the left side before animating.");
moveItemToFront(-itemWidth);
}
// scroll items right
scrollCategories({ direction:'right', cleanup:true, repeat:1, speed:manualScrollSpeed, expand:false });
// set a delay to start scrolling the items again
if(!debug) timeoutSet = setTimeout("resetBathroomSelector()", timeoutWait);
break;
}
return false;
});
// <==== START OVER BUTTON ====>
// add HTML - container is set to display none by default
$('#explore-by-bathroom').append('');
// add click function
$('#explore-by-bathroom-reset').click(function() {
// add click event back to the first item
addClickToCategory(listAttrId + ' li:first a');
// reset bathroom selector and start it scrolling again
resetBathroomSelector({ cleanup:true });
return false;
});
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
}
function scrollCategories(option)
{
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
option = typeof(option) != 'undefined' ? option : {};
// default values
option.width = typeof(option.width) != 'undefined' ? option.width : itemWidth;
option.speed = typeof(option.speed) != 'undefined' ? option.speed : scrollSpeed;
option.repeat = typeof(option.repeat) != 'undefined' ? option.repeat : true;
option.direction = typeof(option.direction) != 'undefined' ? option.direction : 'left';
option.cleanup = typeof(option.cleanup) != 'undefined' ? option.cleanup : false;
option.expand = typeof(option.expand) != 'undefined' ? option.expand : true;
// Scrolling the list right will set the dirMod to zero, otherwise negative 1
var dirMod = option.direction == 'right' ? 0 : -1;
// use a temporary speed and width variable. This will allow us to use 'clean up' once
var speed = option.speed;
var cleanup = option.cleanup;
if(cleanup){
if(debug) alert('cleanup');
var left = parseFloat($(listAttrId + ' li:first').css('left')); // left will always be negative or zero by design
// calculate the percentage for the speed to animate the remaining part an item
var percent = 0;
// if the direction is to the left, subtract the left value by the total width
if(option.direction == 'left')
percent = (option.width - Math.abs(left)) / option.width;
// if the direction is to the right, dividate the absolute value of the left position by the total width
if(option.direction == 'right')
percent = Math.abs(left) / option.width;
// set speed to clean-up speed
speed = option.speed * percent;
// turn off clean-up
option.cleanup = false;
}
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// make adjustments for right moving scrolling
if(option.direction == 'right' && !cleanup && option.repeat === true) {
moveItemToFront(-option.width);
}
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
if(debug) alert('width [' + option.width + ']\noption.speed [' + option.speed + ']\nspeed [' + speed + ']\nrepeat [' + option.repeat + ']\ndirection [' + option.direction + ']\ncleanup [' + option.cleanup + ']\nleft (current position):[' + $(listAttrId + ' li:first').css('left') + ']\nleft (end position):[' + (dirMod*option.width) + ']\n');
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// ANIMATE ::START::
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
$(listAttrId + ' li.category:first').animate({
left: (dirMod*option.width)
}, {
duration: speed,
easing: 'linear', // linear or swing
step: function( now, fx ){
// move all other list element items, other than the first
$(listAttrId + ' li:gt(0)').css("left", now);
},
complete: function( now, fx ){
// A) Test if repeat is an integer
index = parseInt(option.repeat);
// B) if repeat is boolean true or an integer greater than 1, just keep scrolling
if(option.repeat === true || (index && index > 1)) {
// decriment repeat counter if it's an integer
if(index && index > 1){
option.repeat--;
}
// move the first item to the end if scrolling left
if(option.direction == 'left') {
moveItemToEnd();
}
// repeat scroll
scrollCategories(option);
}
// C) Scrolling has reached it's final location
else if(index && index == 1) {
if(debug) alert('last movement reached');
// clean up BUFFER items - What's a BUFFER item? It's an item that is hidden to the front of the selector
// Why are BUFFER items important? The code expects the first item to be the first visable item that's perfectly left aligned.
// If there's a BUFFER item, the left align item is no longer the first item, but likely the second item, behind a hidden "buffer" item.
// We need to detect if there's a hidden item and move it to the back.
if(bufferItemExists()) {
moveItemToEnd();
}
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// EXPAND CATEGORY
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
if(option.expand) {
if(debug) alert('Expand sub-categories and/or products');
// hide arrow buttons and show "start over" button
$('.bathroom-selector-arrow').css('display','none');
$('#explore-by-bathroom-reset').css('display', 'block');
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// hide all category LI elements except the first (which is the 'clicked' item)
$(listAttrId + ' li:gt(0)').css('display', 'none');
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// Get the id of the current category. This is used to find the category description, sub-categories,
// and products lists that are associated with this item.
var id = $(listAttrId + ' li:first a').attr('id');
// check to see if this item has a sub-category
var subCategory = $('#sub-category-'+id);
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
//alert('subCategory.length[' + subCategory.length + '] > 0\nid [' + id + ']');
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
if(subCategory.length > 0){
// This item has a sub-category. Make the appropriate sub-category
// block visable and then animate the whole sub-category black into place.
subCategory.css('display', 'block');
// make the description text visable
$('#description-list').css('display', 'block');
$('#description-'+id).css('display', 'block');
animateSubCategory();
} else {
// animate just the product list product list
// make the description text visable
$('#description-list').css('display', 'block');
$('#description-'+id).css('display', 'block');
// add a click-through link to the discription (if one does not exist)
if($('#description-' + id + ' .click-through').length == 0){
if(debug) alert('#description-'+id);
$('#description-'+id).append('
View recommended products');
// add click event for the new click-through link
$('#description-'+id+' .click-through a').bind('click', clickThoughEvent);
}
//animateProductList();
animateFinalTier();
}
} else {
// set a pause timer to start scrolling list again
}
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
//
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
//*/
}
}
});
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// ANIMATE ::END::
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
}
function addClickToAllCategories()
{
// add a click event for selecting a category
$(listAttrId + ' a.category-link').bind('click.select', function(){
if(debug) alert('function call - addClickToAllCategories()');
if(debug) alert('auto-scroll[STOP], timeouts[STOP]');
// stop the auto-scrolling animation
$(listAttrId + ' li.category:first').stop();
// stop auto-scrolling timeout (if any)
stopAutoScrollingTimeout();
// remove THIS items click event
removeClickFromCategory(this);
if(debug) alert('remove - click event for this item');
// get the parent's ID
var index = getCategoryIndexById($(this).parent().attr('id'));
if(debug) alert('parent index[' + index + ']');
// reposition the first item because it was clicked
if(index == 0) {
if(debug) alert('Move first item back to the front');
scrollCategories({ speed:fastClickSpeed, cleanup:true, direction:'right', repeat:1 }); // This is the first item, move it back to the front
}
// scroll through each item until the clicked item is first
else {
if(debug) alert('scroll through items until item is in the front');
scrollCategories({ speed:fastClickSpeed, cleanup:true, repeat:index }); // This is the first item, move it back to the front
}
// stop link following
return false;
});
// add a click event to just prevent returns
$(listAttrId + ' a.category-link').bind('click.nogo', function() { return false; });
}
function addClickToCategory(category)
{
// bind the category click event as the first event
$(category).bindFirst('click.select', function(){
// stop the auto-scrolling animation
$(listAttrId + ' li.category:first').stop();
// remove THIS items click event
removeClickFromCategory(this);
// get the parent's ID
var index = getCategoryIndexById($(this).parent().attr('id'));
/**/
// move the clicked item to the front of the list
if(index == 0) {
// the first item was clicked, move it back to the front
scrollCategories({ speed:100, direction:'right', repeat:1 }); // This is the first item, move it back to the front
} else {
// scroll through each item until the clicked item is first
scrollCategories({ speed:100, repeat:index }); // This is the first item, move it back to the front
}
//*/
// stop link following
return false;
});
// set the link curser to auto to return link cursor to normal
$(category).css('cursor', 'pointer');
}
function addClickSubCategory()
{
$('#sub-category-list a').click(function() {
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// # update the list to show which item was clicked
// remove any previously 'selected' class tags
$('#sub-category-list li.selected').removeClass('selected');
// add 'selected' to clicked items parent element
$(this).parent().addClass('selected')
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// # hide category description (if shown)
$('#description-list div').css('display', 'none');
$('#description-list').css('display', 'none');
// # update the product lists
// hide all product lists
$('#select-bath-type').css('display', 'none');
$('#product-list .product-group.active').css('display', 'none').removeClass('active');
$('#product-list .product-group.active').removeClass('active');
// make the appropriate product list visable, hiding previous lists
var id = $(this).attr('id');
$('#product-list-'+id).css('display', 'block');
$('#product-list-'+id).addClass('active');
// stop link following
return false;
});
}
function clickThoughEvent()
{
// get the id of this category from the clicked (this) event's href value (remove the hash character)
var id = $(this).attr('href').substring(1);
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
if(debug) alert('clickThroughEvent\n' + id);
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// hide all the description containers
$('#description-list').css('display','none');
$('#description-list div').css('display','none');
// show this categories product list
$('#product-list-' + id).css('display', 'block');
$('#product-list-' + id).addClass('active');
return false;
}
function addClickMultiFamilyPagination()
{
$('#product-list .extra-pages a').click(function() {
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
var id = $('#product-list .product-group.active').attr('id');
// count the number of pages
var pages = $('#' + id + ' .model-families li').length;
// current page
var page = $(this).html();
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
//alert('$(\'#product-list .product-group.active\').attr(\'id\') [' + id + ']\n' + '$(#' + id + ' .model-families li\').length [' + pages + ']\n' + 'clicked page [' + page + ']\n');
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// #update pagination
// remove active class from all pages
$('#' + id + ' .extra-pages li.active').removeClass('active');
// add 'active' class to current page
$(this).parent().addClass('active');
// #update model family item
// hide all model family ads
$('#' + id + ' .model-families li').css('display', 'none');
// show current page add
$('#' + id + ' .model-families li:eq(' + (page-1) + ')').css('display', 'block');
// stop link following
return false;
});
}
function removeClickFromCategory(category)
{
// unbind 'click.select' events for this category (there should be only one)
$(category).unbind('click.select');
// set the link curser to default for less visual cue as a link
$(category).css('cursor', 'default');
}
/************************************************************************************************
* animateSubCategory() - This method will move the sub-category container (block/div) into place
* so that it is lined up next to the category image. This whole container is animated.
*
* The container has all of the possible sub-category lists. All sub-categorise are hidden by
* CSS "display:none". This appropriate sub-category is made visable prior to this function
* being called, in the scrollCategories() function.
************************************************************************************************/
function animateSubCategory()
{
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
var subCategoryList = $('#sub-category-list');
var width = $(listAttrId + ' li').outerWidth();
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// slide out the sub-category list if present
subCategoryList.animate({
left: width // width of a list item w/o margin
}, {
duration: 100, // speed 100
easing: 'linear', // linear or swing
step: function( now, fx ){
// nothing to do each stop
},
complete: function( now, fx ){
// set the z-index to be higher than the list items
var zIndex = $('#category-list').css('z-index') + 1;
subCategoryList.css('z-index', zIndex);
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
animateFinalTier(zIndex, true);
//animateProductList(zIndex, true);
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
}
});
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
}
function animateProductList(zIndex, subCategoryList)
{
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// default values
zIndex = typeof(zIndex) != 'undefined' ? zIndex : $('#category-list').css('z-index') + 1;
subCategoryList = typeof(subCategoryList) != 'undefined' ? true : false ; // assume no subCategories (false) if not variable is not set
var productList = $('#explore-by-bathroom #product-list');
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// set the stopping location of the product list
if(subCategoryList){
var widthTT = 364;
// make the notification to select a sub-category visable
$('#select-bath-type').css('display', 'block');
productList.css('width', '63.6em');
} else{
var widthTT = 172; // 364 - 192 = 172px
productList.css('width', '82.8em');
// 'turn on' the product listing because there are no sub-category links to trigger it
var id = $(listAttrId + ' li:first a').attr('id');
//alert('id ['+id+']');
$('#product-list-' + id).css('display', 'block');
$('#product-list-' + id).addClass('active');
}
// add multi-model family pagination
//addMultiFamilyPagination(id);
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// slide out the bath type selection reminder if there's a sub-category
productList.animate({
left: widthTT, // size should be double the full width of a given item (364px = 182 + 182 = 364)
top: 0
}, {
duration: 500, // speed 100
easing: 'linear', // linear or swing
step: function( now, fx ){
// nothing to do each stop
},
complete: function( now, fx ){
// set the z-index to be higher than the list items
productList.css('z-index', zIndex);
}
});
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
}
function animateFinalTier(zIndex, subCategoryList)
{
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// default values
zIndex = typeof(zIndex) != 'undefined' ? zIndex : $('#category-list').css('z-index') + 1;
subCategoryList = typeof(subCategoryList) != 'undefined' ? true : false ; // assume no subCategories (false) if not variable is not set
var container = $('#explore-by-bathroom #final-tier');
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// set the stopping location of the product list
if(subCategoryList){
var widthTT = 364;
container.css('width', '63.6em');
} else{
var widthTT = 172; // 364 - 192 = 172px
container.css('width', '82.8em');
// 'turn on' the product listing because there are no sub-category links to trigger it
//var id = $(listAttrId + ' li:first a').attr('id');
//alert('id ['+id+']');
//$('#product-list-' + id).css('display', 'block');
//$('#product-list-' + id).addClass('active');
}
// add multi-model family pagination
//addMultiFamilyPagination(id);
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// slide out the bath type selection reminder if there's a sub-category
container.animate({
left: widthTT, // size should be double the full width of a given item (364px = 182 + 182 = 364)
top: 0
}, {
duration: 500, // speed 100
easing: 'linear', // linear or swing
step: function( now, fx ){
// nothing to do each stop
},
complete: function( now, fx ){
// set the z-index to be higher than the list items
container.css('z-index', zIndex);
}
});
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
}
function resetBathroomSelector(option)
{
// hide all sub-categories, rest z-index, remove .selected sub-category classes
$('#sub-category-list ul').css('display', 'none');
$('#sub-category-list').css('left', '-20em');
$('#sub-category-list').css('z-index', '5');
$('#sub-category-list li.selected').removeClass('selected');
// hide the final tier container
$('#final-tier').css('left', '-100em');
$('#final-tier').css('z-index', '5');
// reset the discription list to hide all descriptions and the list container
$('#description-list').css('display', 'none');
$('#description-list div').css('display', 'none');
// hide all product groups
$('#select-bath-type').css('display', 'none');
$('product-list-extra-pages').css('display', 'none');
$('#product-list .product-group').css('display', 'none');
// reset all model family category items
$('#product-list .model-families li').css('display', 'block');
//.model-families li
$('#product-list').css('left', '-100em');
$('#product-list').css('z-index', '5');
$('#product-list .product-group.active').removeClass('active');
// reset all model family paginations
$('#product-list .extra-pages li.active').removeClass('active');
// get all .extra-pages and loop through and turn on the first page.
// jQuery isn't liking the CSS code to target '.extra-pages li:first' as it
// is also applying ':first' to the first ".extra-page" item also.
$('#product-list .extra-pages').each(function(){
$('li:first', this).addClass('active');
});
//$('#product-list-cabin .extra-pages li:first').addClass('active');
// ::DEBUG:: _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
//$('#product-list-kid-bath').css('display', 'block');
// ::DEBUG:: _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
// hide extra pages
$('#product-list-extra-pages ul').css('display', 'none');
// hide reset button
$('#explore-by-bathroom-reset').css('display', 'none');
// show scroll arrows
$('.bathroom-selector-arrow').css('display','block');
// Show all Category list items
$(listAttrId + ' li').css('display', 'block');
//*/
// start the scrolling animation
scrollCategories(option);
}
function bufferItemExists() {
var left = parseInt($(listAttrId + ' li:first').css('left'));
if(left <= -itemWidth) {
if(debug) alert('buffer item EXISTS');
return true;
} else {
if(debug) alert('buffer item DOES NOT exist');
return false;
}
}
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// Utility Functions
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
function setupDebug()
{
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
// create a display box for testing
if(debug) $('body').prepend('');
if(debug) $('#testOutput').html('X Pos:
');
// ::DEBUG:: -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
}
function stopAutoScrollingTimeout()
{
if(timeoutSet){
clearTimeout(timeoutSet);
timeoutSet = null;
}
}
function startAutoScrollingTimeout()
{
if(!debug) timeoutSet = setTimeout("resetBathroomSelector()", timeoutWait);
}
function moveItemToEnd()
{
if(debug) alert('function call - moveItemToEnd()');
if(debug) alert('1. DETACH first item');
// 1. DETACH first item
var detach = $(listAttrId + ' li:first').detach();
if(debug) alert('2. APPEND DETACHED item to end of the list');
// 2. APPEND DETACHED item to end of the list
$(listAttrId).append(detach);
if(debug) alert('3. REPOSITION list to the start (set left on first item to zero)');
// 3. REPOSITION list to the start
$(listAttrId + ' li').css('left', '0');
}
function moveItemToFront(left)
{
if(debug) alert('function call - moveItemToFront(left)');
if(debug) alert('1. DETACH last item');
// 1. DETACH last item
var detach = $(listAttrId + ' li:last').detach();
if(debug) alert('2. PREPEND DETACHED item to front of the list');
// 2. PREPEND DETACHED item to front of the list
$(listAttrId).prepend(detach);
if(debug) alert('3. SET LEFT to negative width (to hide item)');
if(debug) alert('left: ' + left);
// 3. SET LEFT to negative width (to hide item?)
$(listAttrId + ' li').css('left', left);
}
/*
Loop through the list elements until a matching ID is found and return it's position.
jQuery function "$('li').index(parent)" did not work or was used properly. At some point,
it started returning a much higher index value for some items, possibly due to how the
list element kept changing.
*/
function getCategoryIndexById(id)
{
var returnVal = 0;
var i = 0;
var test = $(listAttrId + ' li.category').each(function(index) {
if($(this).attr('id') == id){
// save the return value, needed ecause jQuery each() loop doesn't bubble up a return value
returnVal = i;
// great the each() loop instantly.
return false;
}
i++;
});
return returnVal;
}
function htmlentities(str)
{
return String(str).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
}
// [name] is the name of the event "click", "mouseover", ..
// same as you'd pass it to bind()
// [fn] is the handler function
$.fn.bindFirst = function(name, fn) {
// bind as you normally would
// don't want to miss out on any jQuery magic
this.bind(name, fn);
// Thanks to a comment by @Martin, adding support for
// namespaced events too.
var handlers = this.data('events')[name.split('.')[0]];
// take out the handler we just inserted from the end
var handler = handlers.pop();
// move it at the beginning
handlers.splice(0, 0, handler);
};
