<div data-section-id="{{ section.id }}" data-section-type="image-slideshow " class="fxInElement fadeIn fullScreenSlider slickSlider overlayFX space_top_header">

  	
  	{% if section.settings.custom_big_img == blank %}
      	{%assign main_image = 'main-image-custom-html.jpg' | asset_url %}
  		{%assign main_image_new = 'main-image-custom-html.jpg' | asset_url %}
      {%else%}
  		  {% if settings.image_loading_type == 'lazy' %}
          	{%assign main_image = section.settings.custom_big_img.src | img_url:"100x" %}
  			{%assign main_image_new = section.settings.custom_big_img.src | img_url:"" %}	
          {% else %}
        	{%assign main_image = section.settings.custom_big_img.src | img_url:"" %}
  			{%assign main_image_new = section.settings.custom_big_img.src | img_url:"" %}
          {% endif %}
      	
      {% endif %}
  {% if section.settings.logo_img == blank %}
      	{%assign logo_img = 'fastlane_logo.png' | asset_url %}
      {%else%}
      	{%assign logo_img = section.settings.logo_img.src | img_url:"" %}
      {% endif %}

  	<div class="big_image_content_box {% if settings.image_loading_type == 'lazy' %}lazyloadimagebg blur-up{% endif %}" data-bg="{{ main_image_new }}" style="background-image:url('{{ main_image }}');">
      			
      		
      		{% assign hex2rgb_r = '' %}
            {% assign hex2rgb_g = '' %}
            {% assign hex2rgb_b = '' %}	
              {% if section.settings.custom_big_bg_colors != 'rgba(0,0,0,0)' and section.settings.custom_big_bg_colors != '' %}

                  {% assign hex2rgb_hex = section.settings.custom_big_bg_colors %}
                      {% include 'hex2rgb' %}
              {% endif %}
      		{% assign box_opactiys = section.settings.custom_big_bg_opacitys %}
      			<div class="MainImageHtmlWrap" style="color:{{section.settings.custom_Html_Txt_colors}}; {%if section.settings.custom_big_img_box_bg %} background-color:rgba({{ hex2rgb_r  }},{{ hex2rgb_g  }},{{ hex2rgb_b  }},{{ box_opactiys }});{% endif %}">
                  <div>
                    <img src="{{ logo_img }}">
                  </div>
                  <div>
                    <h{{section.settings.heading_tag}} style="font-weight: {{section.settings.font_weight_id}}; color: {{section.settings.title_text_color}};">{{section.settings.title_box}}</h{{section.settings.heading_tag}}>
                  </div>
                  <div style="color:{{section.settings.content_color}}; font-size: {{section.settings.content_font_size}};">
                    {{section.settings.content_id}}
                  </div>
                  <div class="form_heading" style="color:{{section.settings.form_heading_color}};">
                    {{section.settings.email_form}}
                  </div>
                  {{section.settings.custom_CustomHtmlForm}}
      			</div>
      		
      </div>
</div>
{% if section.settings.custom_desktop_image_big == true %}
	
<script>
  	$(window).bind("load resize scroll touchmove",function(e){
      if (window.innerWidth > 740) {
        
		var $t = $('#shopify-section-{{ section.id }} .big_image_content_box');
                 
        var topPos = $t.offset().top;
        var winHeight = $(window).height();
        var heightToUpdate = $(window).height() - topPos;
         {% if settings.footer_band_enable %}
              heightToUpdate = heightToUpdate - 15;
        {% else %}
              heightToUpdate = heightToUpdate;
        {% endif %}
		if(heightToUpdate > 200){
          $t.css('height',heightToUpdate+'px');	
        }
      }
    });
</script>

{% endif %}



{% if section.settings.custom_mobile_image_big == true %}
	
<script>
  	$(window).bind("load resize scroll touchmove",function(e){
      if (window.innerWidth < 740) {
        
		var $t = $('#shopify-section-{{ section.id }} .big_image_content_box');
                 
        var topPos = $t.offset().top;
        var winHeight = $(window).height();
        var heightToUpdate = $(window).height() - topPos;
         {% if settings.footer_band_enable %}
              heightToUpdate = heightToUpdate - 15;
        {% else %}
              heightToUpdate = heightToUpdate;
        {% endif %}
		if(heightToUpdate > 200){
          $t.css('height',heightToUpdate+'px');	
        }
      }
    });
</script>

{% endif %}
{% schema %}
  {
    "name": "Main image custom Html",
    "settings": [
{
              	"type": "paragraph",
              	"content": "Video Tutorial FR : [Main Image by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/main-image)"
        },
			{
              "type":"image_picker",
              "id":"custom_big_img",
              "label":"Background image"
			},
			{
              "type":"image_picker",
              "id":"logo_img",
              "label":"Logo"
			},
			{
			  "type": "text",
			  "id": "title_box",
			  "label": "Title",
			  "default": "Tu veux vivre du E-Commerce ?"
			},
			{
			  "type": "select",
			  "id": "heading_tag",
			  "label": "Heading Tag",
			  "default": "2",
			  "options": [
					{
						"value": "1",
						"label": "H1"
					},
					{
						"value": "2",
						"label": "H2"
					},
					{
						"value": "3",
						"label": "H3"
					},
					{
						"value": "4",
						"label": "H4"
					},
					{
						"value": "5",
						"label": "H5"
					},
					{
						"value": "6",
						"label": "H6"
					}
				]
			},
			
			{
				"type": "select",
				"id": "font_weight_id",
				"label": "Font Weight",
				"default": "400",
				"options": [
                      {
                        "value": "300",
                        "label": "Lighter"
                      },
                      {
                        "value": "400",
                        "label": "Normal"
                      },
                      {
                        "value": "600",
                        "label": "Bold"
                      },
                      {
                        "value": "700",
                        "label": "Bolder"
                      }
                    ]				
			},
			{
				"type": "color",
				"id": "title_text_color",
				"label": "Title Color",
				"default": "#000"
			},
			{
				"type": "html",
				"id": "content_id",
				"label": "Content",
				"default": "<p>Inscris-toi dès maintenant pour recevoir une FORMATION COMPLÈTE GRATUITE dédiée à la Création et à l'Optimisation de ta boutique Shopify grâce au Thème Fastlane !</p>"
			},
			{
				"type":	"color",
				"id":	"content_color",
				"label": "Content Text Color",
				"default": "#000"
			},
			{
              "type": "text",
              "id": "content_font_size",
              "label": "Content Font Size",
              "default": "25px"
            },
			{
				"type": "text",
				"id": "email_form",
				"label": "Form Heading",
				"default": "Indique ton adresse mail ci-dessous"
			},
			{
				"type":	"color",
				"id":	"form_heading_color",
				"label": "Form Heading Color",
				"default": "#000"
			},
			{
			  "type":"html",
			  "id":"custom_CustomHtmlForm",
			  "label":"Add Custom Html",
			  "default":"<h4>Insère le Code HTML de ton Formulaire</h4>"
			},
			{
              "type": "color",
              "id": "custom_big_bg_colors",
              "label": "Html Background Color",
              "default": "#ffffff"
            },
			{
              "type": "select",
              "id": "custom_big_bg_opacitys",
              "label": "Opacity of Html Background Color",
              "default": ".6",
              "options": [
                {
                  "value": "0",
                  "label": "Transparent"
                },
                {
                  "value": ".1",
                  "label": "10%"
                },
                {
                  "value": ".2",
                  "label": "20%"
                },
                {
                  "value": ".3",
                  "label": "30%"
                },
                {
                  "value": ".4",
                  "label": "40%"
                },
                {
                  "value": ".5",
                  "label": "50%"
                },
                {
                  "value": ".6",
                  "label": "60%"
                },
                {
                  "value": ".7",
                  "label": "70%"
                },
                {
                  "value": ".8",
                  "label": "80%"
                },
                {
                  "value": ".9",
                  "label": "90%"
                },
                {
                  "value": "1",
                  "label": "100%"
                }
              ]
            },
			{
              "type":"checkbox",
              "id":"custom_big_img_box_bg",
              "label":"Box Background Color",
			  "default":true
			},
			{
              "type":"checkbox",
              "id":"custom_desktop_image_big",
              "label":"Desktop Full Height",
			  "info":"Only for top of the page",
			  "default":false
			},
			{
              "type":"checkbox",
              "id":"custom_mobile_image_big",
              "label":"Mobile Full Height",
			  "default":false
			}            
			
			 
		],
		"presets": [
            {
               "name": "Main image Custom Html",
               "category": "Image"
            }
  		]
  }
{% endschema %}

