{% comment %} product notification {% endcomment %}
{%- assign ntCollection = collections[settings.notify_collection] -%}
{%- if settings.show_notification and ntCollection.products.size > 0 -%}
{%- assign colections = ntCollection.products -%}
{%- assign randomNumber = "now" | date: "%N" | modulo: colections.size | plus: 0 -%}
{%- assign fake_location = settings.notify_location | replace: ' | ', '|' | replace: ' |', '|' | replace: '| ', '|' | split: '|' -%}
<div id="prodNotify" class="customized{% if settings.hide_notification_mb %} small--hide{% endif %}">
  <a class="closeNotify" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
  <a href="{{ntCollection.products[randomNumber].url}}" class="imgLink"><img class="pImg lazyload" data-src="{{ntCollection.products[randomNumber] | img_url: 'small'}}" alt="{{ntCollection.products[randomNumber].title}}" /></a>
  <div class="details">
    {%- if settings.notify_msg != blank -%}<p class="msg">{{settings.notify_msg}}</p>{%- endif -%}
    <p class="pname"><a href="{{ntCollection.products[randomNumber].url}}">{{ntCollection.products[randomNumber].title}}</a></p>
    <p class="timelocation">{%- if settings.fake_time -%}<span class="time">10</span> {{settings.time_msg}} {%- endif -%}{%- if settings.notify_location != blank -%}{{settings.location_msg}} <span class="location">{{ fake_location[3] }}</span>{%- endif -%}</p>
  </div>
</div>

<script type="lazyload2" defer="defer">
	$(document).ready(function(){      	
      /*if ((typeof Shopify) === 'undefined') { Shopify = {}; }
      Shopify.pnProduct = function(handle, callback) {
        $.ajax({ url: '/products/' + handle + '.js', dataType: 'json', success: function(data){ callback(data); }, cache:true, timeout: {{settings.notify_display | plus: 700}} });
      };
      function productNotify(){
      	var productsArray = {{ colections | map:'handle' | json }},
            curproductIndex = Math.floor((Math.random() * productsArray.length - 1) + 1);
        	$('#prodNotify').removeClass("active");
            setTimeout(function(){
              Shopify.pnProduct(productsArray[curproductIndex],function(data){
                var fakeTimeOrder = Math.floor((Math.random() * 60) + 1),
                    {%- if settings.notify_location != blank -%}fklocations = {{ fake_location | json }},rand = Math.floor(Math.random() *{{fake_location.size}}),{% endif %}
                    pimg = data.featured_image,
                    pimg_path = pimg.replace(/(\.[^\.]*$|$)/, '_small' + '$&');
                $('#prodNotify .pname').html(data.title).attr('href','/collections/{{ntCollection.handle}}'+data.url);
                $('#prodNotify .imgLink').attr('href','/collections/{{ntCollection.handle}}'+data.url);
                $('#prodNotify img').attr( { src:pimg_path, alt:data.title } );
                $('#prodNotify .time').html(fakeTimeOrder);
                {%- if settings.notify_location != blank -%}$('#prodNotify .location').html(fklocations[rand]);{%- endif -%}
                $('#prodNotify').addClass("active");
              	});
              }, {{settings.notify_display}});
      }
      setInterval(productNotify, {{ settings.notify_display | plus: settings.notify_delay | plus: 200}});
      productNotify();
      $('.closeNotify').click(function(){ $('#prodNotify').remove(); });*/
          
          if ((typeof Shopify) === 'undefined') { Shopify = {}; }
			Shopify.pnProduct = function(handle, callback) {
				$.ajax({ url: '/products/' + handle + '.js', dataType: 'json', success: function(data){ callback(data); }, cache:true, timeout: {{settings.notify_display | plus: 700}} });
			};
    		function productNotify(){
                var productsArray = {{ colections | map:'handle' | json }},
                	curproductIndex = Math.floor((Math.random() * productsArray.length - 1) + 1);
      			$('#prodNotify').removeClass("active");
				setTimeout(function(){
            		Shopify.pnProduct(productsArray[curproductIndex],function(data){
						var fakeTimeOrder = Math.floor((Math.random() * 60) + 1),
                            {%- if settings.notify_location != blank -%}fklocations = {{ fake_location | json }},rand = Math.floor(Math.random() *{{fake_location.size}}),{% endif %}
                            pimg = data.featured_image,
             	 			pimg_path = pimg.replace(/(\.[^\.]*$|$)/, '_small' + '$&');
						$('#prodNotify .pname a').html(data.title).attr('href','/collections/{{ntCollection.handle}}'+data.url);
                        $('#prodNotify .imgLink').attr('href','/collections/{{ntCollection.handle}}'+data.url);
                        $('#prodNotify img').attr( { src:pimg_path, alt:data.title } );
                        $('#prodNotify .time').html(fakeTimeOrder);
                        {%- if settings.notify_location != blank -%}$('#prodNotify .location').html(fklocations[rand]);{%- endif -%}
                        $('#prodNotify').addClass("active");
					});
				}, {{settings.notify_display}});
			}
			setInterval(productNotify, {{ settings.notify_display | plus: settings.notify_delay | plus: 200}});
            productNotify();
            $('.closeNotify').click(function(){ $('#prodNotify').remove(); });
	});
</script>
<style type="text/css">
{%- if settings.show_notification -%}
#prodNotify { color:{{settings.pnp_boxbg_txt}}; width:auto; max-width:320px; text-align:left; padding: 10px; border-radius: 5px; background: #f8f8fa;  visibility:visible; opacity:1; position:fixed; left:10px; bottom:-200px; z-index:999; background-color:{{settings.pnp_boxbg}}; box-shadow: 0 0 4px 0 rgba({{settings.pnp_boxbg_txt}},0.4); box-shadow: 0 0 4px 0 rgba(0,0,0,0.4); -ms-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
#prodNotify img { float:left; max-width:80px; max-height:80px; width:auto; }
#prodNotify .details { margin:0 0 0 80px; padding:5px; }
#prodNotify a { color:{{settings.pnp_boxbg_txt}}; }
#prodNotify .closeNotify { width:20px; height:20px; text-align:center; position:absolute; top:-10px; right:-10px; background:#fff; color: {{settings.pnp_boxbg_txt}}; line-height: 20px; border-radius: 100%; }
#prodNotify .closeNotify i { font-size: 20px; }
#prodNotify .closeNotify .ad { font-size:10px;}
#prodNotify p { font-size: 14px; line-height:1.2; margin:0 0 5px; color:lighten({{settings.pnp_boxbg_txt}},40%);}
#prodNotify .msg { color:{{settings.pnp_boxbg_txt}};}
#prodNotify .timelocation { color:{{settings.pnp_boxbg_txt}};}
#prodNotify .msg { margin-right:15px; }
#prodNotify .pname { font-size: 15px; margin-bottom:15px; font-weight: 600;}
#prodNotify.active { visibility:visible; opacity:1; bottom:10px;}
{%- endif -%}
</style>
{% endif %}