// Init Page $(function(){ // Subcategory Page if( $(".itemCatalog").length ) { CompareSelectInit(); } // Compare Page if( $(".compare-table").length ) { CompareTableInit(); } }); // Compare Subcategory Scripts compareSelect = { 'on': false, selected: [], data: [], noticeHeightTimeout: false, noticeFadeTimeout: false, ignoreScroll: false, }; function CompareSelectToggle(toggleOn) { if( toggleOn ) { // Setup Products var $select = $("
"); $(".itemCatalog .itemWrapper .item").append($select); // Setup Selection Bar var $bar = $("
"); var $container = $("
"); $container.append("
Sorry, you may compare up to four watches at a time.
"); $container.append("
x
"); $container.append("
x
"); $container.append("
x
"); $container.append("
x
"); $container.append("
Compare WatchesClear AllComparing 0
"); $bar.append($container ); $("body").append($bar); // Refresh Select Bar with any previous selection CompareSelectRefresh(); // Start $(".compare-select-toggle").addClass("on"); $(".compare-select-toggle .btn").addClass("toggled"); setCookie("compare", "1"); var doScroll = false; var scrollTarget = 0; // Checkbox on screen check var $compareSelectCheckbox = $(".itemCatalog .itemWrapper .compare-select-checkbox"); if ($compareSelectCheckbox.length) { var checkboxTop = $compareSelectCheckbox.offset().top; } var windowHeight = $(window).height(); var windHeightPart = (windowHeight*.6); var windowBottom = $(window).scrollTop() + windowHeight; var windowMid = $(window).scrollTop() + windHeightPart; if( checkboxTop > windowMid ) { doScroll = true; scrollTarget = checkboxTop-windHeightPart+10; } // Override scroll check if( compareSelect['ignoreScroll'] ) { doScroll = false; compareSelect['ignoreScroll'] = false; } if( doScroll ) { // Scroll down to first checkbox $("html, body").animate( { 'scrollTop': scrollTarget },{ 'duration': 250, 'complete': function() { window.setTimeout(function(){ $(".compare-select-checkbox").css( { 'opacity': 1, 'transform': 'translateY(0)', } ); },0); } } ); } else { // Fade in immediately $(".compare-select-checkbox").css( { 'opacity': 1, 'transform': 'translateY(0)', } ); } } else { // Cleanup Products $(".compare-select-checkbox").remove(); $(".compare-select-bar").remove(); // Close $(".compare-select-toggle .btn").removeClass("toggled"); $(".compare-select-toggle").removeClass("on"); setCookie("compare", ""); } compareSelect['on'] = toggleOn; } function CompareSelectAdd(id) { var index = compareSelect['selected'].indexOf(id); if( index === -1 ) { compareSelect['selected'].push(id); } CompareSelectRefresh(); SetCompareCookie(); } function CompareSelectRemove(id) { var index = compareSelect['selected'].indexOf(id); if( index !== -1 ) { compareSelect['selected'].splice(index,1); } CompareSelectRefresh(); SetCompareCookie(); } function SetCompareCookie() { for( var i = 0; i < 4; i++ ) { var key = "compare"+i; var value = ""; if( i < compareSelect['selected'].length ) { value = compareSelect['selected'][i]; } setCookie(key, value); } } function GetCompareCookie() { var comparing = []; for( var i = 0; i < 4; i++ ) { var key = "compare"+i; var value = parseInt(getCookie(key),10); if( value ) { comparing.push(value); } } return comparing; } function CompareSelectRefresh() { // Update Compare select item boxes for( var i = 0; i < 4; i++ ) { var $selectedBox = $(".compare-select-item-"+i); if( i < compareSelect['selected'].length ) { $selectedBox.addClass('selected'); var id = compareSelect['selected'][i]; $selectedBox.data('selected-id', id); if( !compareSelect['data'][id] ) { var $product = $(".itemCatalog input[name='id'][value='"+id+"']").parents('.itemWrapper'); var image = $product.find('.itemimage img').prop('src'); var name = $product.find("h2 a").html(); compareSelect['data'][id] = { 'Id': id, 'Image': image, 'NameLong': name, } } $selectedBox.find('.compare-select-item-bg').css({'background-image':'url('+compareSelect['data'][id]['Image']+')'}); $selectedBox.find('.compare-select-description').html(compareSelect['data'][id]['NameLong']); } else { $selectedBox.removeClass('selected'); $selectedBox.find('.compare-select-item-bg').css({'background-image':''}); $selectedBox.find('.compare-select-description').text(""); } } // Update compare button style if( compareSelect['selected'].length > 1 ) { $(".compare-select-button .btn").addClass('enabled'); $(".compare-select-button .btn").removeClass('disabled'); } else { $(".compare-select-button .btn").addClass('disabled'); $(".compare-select-button .btn").removeClass('enabled'); } // Update Mobile "Comparing X Items" text $(".compare-select-button-mobile").html("Comparing "+compareSelect['selected'].length+"/4 Items"); // Update selected checkboxes $(".compare-select-checkbox input").prop('checked',''); $(".compare-select-checkbox span").html("Add to Compare"); $(".compare-select-checkbox").removeClass("comparing"); for( var i = 0; i < compareSelect['selected'].length; i++ ) { var id = compareSelect['selected'][i]; var $id = $(".itemWrapper input[name='id'][value='"+id+"']"); if( $id.length ) { var $item_wrapper = $id.parents('.itemWrapper'); var $checkboxWrapper = $item_wrapper.find(".compare-select-checkbox"); $checkboxWrapper.find('input').prop('checked','checked'); $checkboxWrapper.find('span').html("Comparing"); $checkboxWrapper.addClass("comparing"); } } if( compareSelect['selected'].length ) { $(".compare-select-bar").removeClass('hide'); } else { $(".compare-select-bar").addClass('hide'); } } function CompareSelectInit() { // Inject Compare Button var $button = $("
Compare Watches
"); $(".itemCatalog").prepend($button); $button.click(function() { CompareSelectToggle( !compareSelect['on'] ); }); compareSelect['selected'] = GetCompareCookie(); // Bind Hooks $(".itemCatalog").on("change", ".compare-select-checkbox input", function() { var $this = $(this); var checked = $this.is(":checked") var $wrapper = $this.parents(".itemWrapper"); var id = parseInt($wrapper.find("input[name='id']").val(),10); if( checked ) { if( compareSelect['selected'].length == 4 ) { // Limit compare count to 4, prevent notice from firing multiple times $(".compare-notice").css({'height': '1.25em'}); $(".compare-notice").css({'opacity': '1'}); clearTimeout(compareSelect['noticeHeightTimeout']); clearTimeout(compareSelect['noticeFadeTimeout']); compareSelect['noticeHeightTimeout'] = window.setTimeout(function() { $(".compare-notice").css({'opacity': '0'}); compareSelect['noticeFadeTimeout'] = window.setTimeout(function() { $(".compare-notice").css({'height': '0'}); },200); },3000); $this.prop('checked',''); return; } CompareSelectAdd(id); } else { CompareSelectRemove(id); } }); $("body").on("click", ".compare-select-item-remove", function() { var $this = $(this); var $selectedBox = $this.parents(".compare-select-item"); var id = $selectedBox.data('selected-id'); CompareSelectRemove(id); }); $("body").on("click", ".compare-select-clear", function() { while( compareSelect['selected'].length ) { CompareSelectRemove( compareSelect['selected'][0] ); } CompareSelectToggle(false); }); $("body").on("click", ".compare-select-button .btn.enabled", function() { window.location = "/compare"; }); if( getCookie("compare") ) { compareSelect['ignoreScroll'] = true; $button.click(); } } // Compare Page Scripts compareTable = { 'stickyToggleStart': 0, 'stickyToggleEnd': 0, } function StickyScrollUpdate() { var $window = $(window); compareTable['tableWidth'] = $(".compare-table-element").outerWidth(); compareTable['stickyToggleStart'] = $(".compare-data-PriceRegular").offset().top - $(".compare-sticky-row").height(); compareTable['stickyToggleEnd'] = $(".compare-table table").offset().top + $(".compare-table").height() - $(".compare-sticky-row").height(); compareTable['offset'] = $(".compare-table table").offset(); $(".compare-sticky-row").css({'width':compareTable['tableWidth']}); $(".compare-sticky-title .column-0").css({'width': $(".compare-image-row .column-0").outerWidth() }); $(".compare-sticky-title .column-1").css({'width': $(".compare-image-row .column-1").outerWidth() }); $(".compare-sticky-title .column-2").css({'width': $(".compare-image-row .column-2").outerWidth() }); $(".compare-sticky-title .column-3").css({'width': $(".compare-image-row .column-3").outerWidth() }); var $stickyRow = $(".compare-sticky-row"); var scrollTop = $window.scrollTop()+$("#pagewrapper").scrollTop(); var scrollLeft = $window.scrollLeft(); if( scrollTop > compareTable['stickyToggleStart'] && scrollTop < compareTable['stickyToggleEnd'] ) { $(".compare-sticky-row").removeClass("hide"); } else { $(".compare-sticky-row").addClass("hide"); } var offset = (scrollLeft*-1)+compareTable['offset'].left; var left = 0; if( scrollLeft ) { left = (scrollLeft*-1)+compareTable['offset'].left; } else { left = compareTable['offset'].left; } $(".compare-sticky-row").css('transform', 'translateX('+left+'px)' ); } function RefreshCompareTable() { RefreshCompareTableMobile(); return; compareList = GetCompareCookie(); products_visible = show_count; var $cartRow = $(".compare-cart-row"); var $stickyRow = $(".compare-sticky-row"); /* if( compareTable['tableWidth'] > $(window).width() ) { $("body").css({'width':compareTable['tableWidth']}); } else { $("body").css({'width':''}); } */ compareTable['columnWidth'] = [ $cartRow.find(".column-0").outerWidth(), $cartRow.find(".column-1").outerWidth(), $cartRow.find(".column-2").outerWidth(), $cartRow.find(".column-3").outerWidth() ]; compareTable['offset'] = $(".compare-table table").offset(); $(".compare-sticky-row table").css({ width: $(".compare-table table").outerWidth() }) if( $(window).width() < 1150 ) { $(".compare-table-above").css('width',$(".compare-table table").outerWidth()); } else { $(".compare-table-above").css('width',""); } $(".compare-sticky-title .column-0").css({width: compareTable['columnWidth'][0]}); $(".compare-sticky-title .column-1").css({width: compareTable['columnWidth'][1]}); $(".compare-sticky-title .column-2").css({width: compareTable['columnWidth'][2]}); $(".compare-sticky-title .column-3").css({width: compareTable['columnWidth'][3]}); //UpdateCompareTableCookie(); SetupHoverBorders(); StickyScrollUpdate(); } function UpdateCompareTableCookie() { var counter = 0; for( var i = 0; i < compareTable['hide'].length; i++ ) { if( !compareTable['hide'][i] ) { $pid = $(".column-"+i+" input[name='id']"); if( $pid.length ) { setCookie("compare"+counter,$pid.val()); } else { setCookie("compare"+counter,""); } counter++; } } } function RemoveCompareItem(id) { compare_list = GetCompareCookie(); for( var i = 0; i < 4; i++ ) { if( compare_list[i] == id ) { compare_list.splice(i, 1); } } for( var i = 0; i < 4; i++ ) { var key = "compare"+i; if( compare_list[i] ) { value = compare_list[i]; } else { value = ""; } setCookie(key,value); } if( compare_list.length == 0 ) { window.history.back(); } } function CompareTableRemoveCallback() { var $this = $(this); var $column = $this.parents("td"); var column_number = $column.data('column'); var $id = $(".column-"+column_number+" input[name='id']"); var id = $id.val(); $(".column-"+column_number).remove(); RemoveCompareItem(id); RefreshCompareTable(); return; } function CompareTableBack() { window.history.back(); } function CompareTableInit() { $(".compare-table").on("mouseenter","td",CompareTableHover); $(".compare-table").on("mouseleave",CompareTableHover); $(window).scroll(StickyScrollUpdate); $("#pagewrapper").scroll(StickyScrollUpdate); $(window).resize(RefreshCompareTable); $(".compare-table-remove").click(CompareTableRemoveCallback); $(".compare-table-close button").click(function() { setCookie("compare",""); setCookie("compare0",""); setCookie("compare1",""); setCookie("compare2",""); setCookie("compare3",""); CompareTableBack() }); $(".fa-chevron-left").click(CompareTableBack); $(".compare-back-desktop span").click(CompareTableBack); RefreshCompareTable(); } function RefreshCompareTableBorders() { var $cartRow = $(".compare-cart-row"); for( var i = 0; i < 4; i++ ) { var $column = $cartRow.find(".column-"+i); if( $column.length ) { var width = $cartRow.find(".column-"+i).outerWidth(); var left = $cartRow.find(".column-"+i).position().left; $(".compare-border-top.column-"+i).css({ left: left+"px", width: width+"px", }); $(".compare-border-bottom.column-"+i).css({ left: left+"px", width: width+"px", }); $(".compare-border-left.column-"+i).css({ left: left+"px", }); $(".compare-border-right.column-"+i).css({ left: (left+width)+"px", }); } } } function CompareTableHover() { var $this = $(this); var column_number = ( $this.length ? $this.data('column') : -1 ); for( var i = 0; i < 4; i++ ) { if( i == column_number ) { $(".compare-table").addClass('hover-column-'+i); } else { $(".compare-table").removeClass('hover-column-'+i); } } } function RefreshCompareTableMobile() { // Set css count on body compare_list = GetCompareCookie(); var compare_count = compare_list.length; for( var i = 1; i <= 4; i++ ) { if( i == compare_count ) { $("body").addClass('col'+i); } else { $("body").removeClass('col'+i); } } // Update compare count displte amount $(".compare-count").html("Comparing "+compare_count+" Items"); $(".compare-table").removeClass (function (index, className) { return (className.match (/(^|\s)col\d+/g) || []).join(' '); }).addClass('col'+compare_count); RefreshCompareTableBorders(); StickyScrollUpdate(); }