jQuery(document).ready(function($){
    'use strict';
	
	var customize = wp.customize;
	
	/*banner tpl*/
	function cactus_banner_tpl(){
		
		var html = '';
			$('#customize-control-cactus-banner .repeater-fields > li').each(function(index, element) {
               
			var title = $(this).find( 'input[data-field="title"]').val();
			var subtitle  = $(this).find( 'input[data-field="subtitle"]').val();
			var image  = $(this).find( 'input[data-field="image"]').parents('.repeater-field-image').find('img').attr('src');
			var btn_text  = $(this).find( 'input[data-field="btn_text"]').val();
			var btn_link = $(this).find( 'input[data-field="btn_link"]').val();
			
			
			html += '<div class="cactus-slider-item">';
			if(image !='' && typeof image!='undefined'){
				html += '<img src="'+image+'" alt="'+title+'">';
			}
				html += '<div class="cactus-slider-caption-wrap">';
				html += '<div class="cactus-slider-caption">';
				html += '<div class="cactus-slider-caption-inner">';
				html += '<h2 class="cactus-slider-title">'+title+'</h2>';
				html += '<p class="cactus-slider-desc">'+subtitle+'</p>';
				html += '<div class="cactus-action"> <a href="'+btn_link+'"><span class="cactus-btn primary">'+btn_text+'</span></a> </div>';
				html += '</div>';
				html += '</div>';
				html += '</div>';
				html += '</div>';
		
			
            });
			customize.previewer.send('banner_selective', html);
		
		}
	wp.customize( 'cactus[banner]', function( value ) {
		value.bind( function( to ) {
			cactus_banner_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-banner .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_banner_tpl();
	});
	
	$(document).on('click','#customize-control-cactus-banner .remove-button',function(){
		cactus_banner_tpl();
		var row = $(this).parents('li.repeater-row').data('row');
		customize.previewer.send('remove_banner_image', row);
	});
	/*service tpl*/
	function cactus_service_tpl(){
		
		var html = '';
		var columns = $('#customize-control-cactus-columns_works').find('select').val();
			$('#customize-control-cactus-service .repeater-fields > li').each(function(index, element) {
               
			var icon_type = $(this).find( 'select[data-field="icon_type"]').val();
			var icon  = $(this).find( 'input[data-field="icon"]').val();
			var image  = $(this).find( 'input[data-field="image"]').parents('.repeater-field-image').find('img').attr('src');
			var title  = $(this).find( 'input[data-field="title"]').val();
			var text  = $(this).find( 'textarea[data-field="text"]').val();
			var title_link = $(this).find( 'input[data-field="title_link"]').val();
			
			if( typeof icon_type == 'undefined' ){
				icon_type = 'icon';
			}
			
			if(icon !==''){
				icon  = icon.replace('fa ','');
				icon  = icon.replace('fa-','');
			}
			
		    title = '<h4>'+title+'</h4>';
			
			if(title_link !='' )
				title = '<a href="'+title_link+'" target="_blank">'+title+'</a>';
			
      		html += '<li><div class="cactus-feature-item">';
            
             if(icon_type == 'image'){
			   if(image !='' && typeof image!='undefined'){
				  html += '<div class="cactus-feature-figure"><img src="'+image+'" alt=""></div>';
			   }
			 }else{
				html += '<div class="cactus-feature-figure"><i class="fa fa-'+icon+'" style="font-size: 50px;"></i></div>';
			 }
            
            html += '<div class="cactus-feature-caption">'+title+'<p>'+text+'</p></div></div></li>';
		
			
            });
			customize.previewer.send('service_selective', html);
		
		}
	wp.customize( 'cactus[service]', function( value ) {
		value.bind( function( to ) {
			cactus_service_tpl();
		} );
	} );
	
	wp.customize( 'cactus[service]', function( value ) {
		value.bind( function( to ) {
			cactus_service_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-service .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_service_tpl();	
	});
	
	$(document).on('click','#customize-control-cactus-service .remove-button',function(){
		cactus_service_tpl();
		var row = $(this).parents('li.repeater-row').data('row');
		customize.previewer.send('remove_service_image', row);
	});
	
	
	/* works tpl*/
	function cactus_works_tpl(){
		
		var html = '';
		var items = '';
		var tags = [];
		var columns = $('#customize-control-cactus-columns_works').find('select').val();
		var worksID = 'works-'+Math.ceil(Math.random()*10);
		$('#customize-control-cactus-works .repeater-fields > li').each(function(index, element) {
		   
		var title = $(this).find( 'input[data-field="title"]').val();
		var image  = $(this).find( 'input[data-field="image"]').parents('.repeater-field-image').find('img').attr('src');
		var link  = $(this).find( 'input[data-field="link"]').val();
		var tag  = $(this).find( 'input[data-field="tag"]').val();
		var cssClass = '';;
		if( tag != ''){
			var slug = tag.toLowerCase().replace(' ','-');
			cssClass = 'group-'+slug;
			tags[slug] = '<li><a href="javascript:;" data-filter=".'+cssClass+'">'+tag+'</a></li>';
		}
	
		items += '<li id="cactus-works-'+index+'" class="element-item '+cssClass+'">';
		items += '<div class="cactus-gallery-item"><img src="'+image+'" alt="'+title+'">';
		items += '<div class="cactus-overlay">';
		items += '<div class="cactus-overlay-content">';
		items += '<div>';
		items += '<h4><a href="'+link+'">'+title+'</a></h4>';
		items += '<a href="'+image+'" rel="prettyPhoto"><i class="fa fa-search-plus"></i></a> </div>';
		items += '</div>';
		items += '</div>';
		items += '</div>';
		items += '</li>';
		});
	
		if( tags ){
		html += '<nav class="cactus-portfolio-filter">';
		html += '<ul>';
		html += '<li class="active"><a href="javascript:;" data-filter="*">All</a></li>';
		var x;
		for (x in tags)
		{
			html += tags[x];
		}
	
		html += '</ul>';
		html += '</nav>';
		}
		html += '<ul class="cactus-portfolio-list cactus-list-md-'+columns+' cactus-list-sm-2 full" id="'+worksID+'">';
		html += items;
		html += '</ul>';
		
				customize.previewer.send('works_selective', {html:html,id:worksID});
	}
		
	wp.customize( 'cactus[works]', function( value ) {
		value.bind( function( to ) {
			cactus_works_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-works .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_works_tpl();
	});
	
	$(document).on('click','#customize-control-cactus-works .remove-button',function(){
		cactus_works_tpl();
		var row = $(this).parents('li.repeater-row').data('row');
		customize.previewer.send('remove_works_image', row);
	});
	
	/* team tpl*/
	function cactus_team_tpl(){
		
		var html = '';
		var items = '';
		var tags = [];
		var columns = $('#customize-control-cactus-columns_team').find('select').val();

		$('#customize-control-cactus-team .repeater-fields > li').each(function(index, element) {
		   
		var name = $(this).find( 'input[data-field="name"]').val();
		var avatar  = $(this).find( 'input[data-field="avatar"]').parents('.repeater-field-image').find('img').attr('src');
		var byline  = $(this).find( 'input[data-field="byline"]').val();
		var link  = $(this).find( 'input[data-field="link"]').val();
        html += '<li>';
        html += '<div class="cactus-team-item"><img src="'+avatar+'" alt="'+name+'">';
        if(link){
        	html += '<a href="'+link+'">';
         }
		 
        html += '<div class="cactus-overlay">';
        html += '<div class="cactus-overlay-content">';
        html += '<div class="cactus-team-vcard">';
        html += '<h4 class="cactus-team-name">'+name+'</h4>';
        html += '<p class="cactus-team-title">'+byline+'</p>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        if( link !=''){
        	html += '</a>';
         }
        html += '</div>';
        html += '</li>';
		
	});

			customize.previewer.send('team_selective', html);
		
		}
		
	wp.customize( 'cactus[team]', function( value ) {
		value.bind( function( to ) {
			cactus_team_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-team .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_team_tpl();
	});
	
	$(document).on('click','#customize-control-cactus-team .remove-button',function(){
		cactus_team_tpl();
		var row = $(this).parents('li.repeater-row').data('row');
		customize.previewer.send('remove_team_image', row);
	});
	
	/*counter tpl*/
	function cactus_counter_tpl(){
		
		var html = '';
			$('#customize-control-cactus-counter .repeater-fields > li').each(function(index, element) {
            
			var title  = $(this).find( 'input[data-field="title"]').val();
			var icon   = $(this).find( 'input[data-field="icon"]').val();
			var number = $(this).find( 'input[data-field="number"]').val();
			
			if(icon !==''){
				icon  = icon.replace('fa ','');
				icon  = icon.replace('fa-','');
			}

			html += '<li>';
			html += '<div class="cactus-counter-item">';
			html += '<div class="cactus-counter-figure"> <i class="fa fa-'+icon+'" style="font-size: 50px;"></i> </div>';
			html += '<div class="cactus-counter-num counter">'+number+'</div>';
			html += '<h4 class="cactus-counter-title">'+title+'</h4>';
			html += '</div>';
			html += '</li>';
		
			
            });
			customize.previewer.send('counter_selective', html);
		
		}
	wp.customize( 'cactus[counter]', function( value ) {
		value.bind( function( to ) {
			cactus_counter_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-counter .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_counter_tpl();	
	});
	
	
	/* testimonial tpl*/
	function cactus_testimonial_tpl(){
		
		var html = '';
		
		$('#customize-control-cactus-testimonial .repeater-fields > li').each(function(index, element) {
		   
		var name = $(this).find( 'input[data-field="name"]').val();
		var avatar  = $(this).find( 'input[data-field="avatar"]').parents('.repeater-field-image').find('img').attr('src');
		var byline  = $(this).find( 'input[data-field="byline"]').val();
		var text  = $(this).find( 'textarea[data-field="text"]').val();
		
		html += '<div class="cactus-testimonial-item">';
		html += '<div class="cactus-testimonial-content">'+text+'</div>';
		html += '<div class="cactus-testimonial-figure"><img src="'+avatar+'" alt="'+name+'"> </div>';
		html += '<div class="cactus-testimonial-vcard">';
		html += '<h4 class="cactus-testimonial-name">'+name+'</h4>';
		html += '<p class="cactus-testimonial-title">'+byline+'</p>';
		html += '</div>';
		html += '</div>';
		
	});

			customize.previewer.send('testimonial_selective', html);
		
		}
		
	wp.customize( 'cactus[testimonial]', function( value ) {
		value.bind( function( to ) {
			cactus_testimonial_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-testimonial .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_testimonial_tpl();
	});
	
	$(document).on('click','#customize-control-cactus-testimonial .remove-button',function(){
		cactus_testimonial_tpl();
		var row = $(this).parents('li.repeater-row').data('row');
		customize.previewer.send('remove_testimonial_image', row);
	});
	
	
	/* clients tpl */
	function cactus_clients_tpl(){
		
		var html = '';

		$('#customize-control-cactus-clients .repeater-fields > li').each(function(index, element) {
		   
		var image  = $(this).find( 'input[data-field="image"]').parents('.repeater-field-image').find('img').attr('src');
		var title  = $(this).find( 'input[data-field="title"]').val();
		var link  = $(this).find( 'input[data-field="link"]').val();

        html += '<div class="cactus-client-item"> <a href="'+link+'"><img src="'+image+'" alt="'+title+'" /></a> </div>';
      
		
	});
		customize.previewer.send('clients_selective', html);
		
	}
		
	wp.customize( 'cactus[clients]', function( value ) {
		value.bind( function( to ) {
			cactus_clients_tpl();
		} );
	} );
	
	
	wp.customize( 'cactus[columns_works]', function( value ) {
		value.bind( function( to ) {
			customize.previewer.send('columns_works', to);
		} );
	} );
				
	
	$(document).on('click','#customize-control-cactus-clients .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_clients_tpl();
	});
	
	$(document).on('click','#customize-control-cactus-clients .remove-button',function(){
		cactus_clients_tpl();
		var row = $(this).parents('li.repeater-row').data('row');
		customize.previewer.send('remove_clients_image', row);
	});
	
	
	/* pricing tpl*/
	function cactus_pricing_tpl(){
		
		var html = '';
		$('#customize-control-cactus-pricing .repeater-fields > li').each(function(index, element) {
		   
		var featured = $(this).find( 'input[data-field="featured"]').val();
		var icon = $(this).find( 'input[data-field="icon"]').val();
		var image  = $(this).find( 'input[data-field="image"]').parents('.repeater-field-image').find('img').attr('src');
		var title  = $(this).find( 'input[data-field="title"]').val();
		var currency  = $(this).find( 'input[data-field="currency"]').val();
		var price  = $(this).find( 'input[data-field="price"]').val();
		var unit  = $(this).find( 'input[data-field="unit"]').val();
		var features  = $(this).find( 'textarea[data-field="features"]').val();
		var button_text  = $(this).find( 'input[data-field="button_text"]').val();
		var button_link  = $(this).find( 'input[data-field="button_link"]').val();
		var button_target  = $(this).find( 'input[data-field="button_target"]').val();
		
		var css_class = '';
		var button_class = 'cactus-dark';
		if(featured=='1' || featured=='on'){
			css_class = 'cactus-featured';
			button_class = '';
			}
		
		icon  = icon.replace('fa-','');
		icon  = icon.replace('fa ','');
		var icon_str = '';
		var unit_str = '';
		
		if( image !='' && typeof image !='undefined')
			icon_str = '<img src="'+image+'" alt="" />';
		else
			icon_str = ' <i class="fa fa-'+icon+'"></i>';
			
		if(unit!='')
			unit_str = '/ '+unit;
			
		html += '<li>';
        html += '<div class="cactus-pricing-item '+css_class+'">';
        html += '<div class="cactus-pricing-header">';
        html += '<div class="cactus-pricing-icon">';
        html += icon_str;
        html += '</div>';
        html += '<h4 class="cactus-pricing-title">';
        html += title;
        html += '</h4>';
        html += '</div>';
        html += '<div class="cactus-pricing-tag">';
        html += '<span class="cactus-currency">'+currency+'</span>';
        html += '<span class="cactus-price">'+price+'</span>';
        html += '<span class="cactus-unit">'+unit_str+'</span>';
        html += '</div>';
        html += '<div class="cactus-pricing-features">';
        html += '<ul class="cactus-pricing-list">';
		
		  if( features ){
			 var features_array = features.split("\n");
			  $.each( features_array, function(index,value){
				   html += '<li>'+value+'</li>';
				  } );
		  }
                
        html += '</ul>';
        html += '</div>';
        html += '<div class="cactus-action">';
        html += '<a href="'+button_link+'" target="'+button_target+'" ><span class="cactus-btn primary cactus-btn-sm '+button_class+'">'+button_text+'</span></a>';
        html += '</div>';
        html += '</div>';
        html += '</li>';
		
	});
	
			customize.previewer.send('pricing_selective', html);
		
		}
		
	wp.customize( 'cactus[pricing]', function( value ) {
		value.bind( function( to ) {
			cactus_pricing_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-pricing .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_pricing_tpl();
	});
	
	$(document).on('click','#customize-control-cactus-pricing .remove-button',function(){
		cactus_pricing_tpl();
		var row = $(this).parents('li.repeater-row').data('row');
		customize.previewer.send('remove_pricing_image', row);
	});
	
	/*footer icons tpl*/
	function cactus_footer_icons_tpl(){
		
		var html = '';
			$('#customize-control-cactus-footer_icons .repeater-fields > li').each(function(index, element) {
            
			var title  = $(this).find( 'input[data-field="title"]').val();
			var icon   = $(this).find( 'input[data-field="icon"]').val();
			var link = $(this).find( 'input[data-field="link"]').val();
			
			if(icon !==''){
				icon  = icon.replace('fa ','');
				icon  = icon.replace('fa-','');
			}
			if(icon !='')
				html += '<li><a href="'+link+'" title="'+title+'" target="_blank"><i class="fa fa-'+icon+'"></i></a></li>';
		    });
			customize.previewer.send('footer_icons_selective', html);
		
		}
	wp.customize( 'cactus[footer_icons]', function( value ) {
		value.bind( function( to ) {
			cactus_footer_icons_tpl();
		} );
	} );
	
	$(document).on('click','#customize-control-cactus-footer_icons .repeater-row-remove',function(){
		$(this).parents('li.repeater-row').remove();
		cactus_footer_icons_tpl();	
	});
	
	
	
	var cactus_customize_scroller = function ( $ ) {
    'use strict';

    $( function () {
        var customize = wp.customize;

        $('ul[id*="frontpage-sections"] .accordion-section').not('.panel-meta').each( function () {
            $( this ).on( 'click', function() {
                var section = $( this ).attr('aria-owns').split( '_' ).pop();
                customize.previewer.send('clicked-customizer-section', section);
            });
        });
		
		$( '#accordion-section-panel-footer' ).on( 'click', function() {
                customize.previewer.send('clicked-customizer-footer', '.site-footer');
            });
			
	$( '#accordion-section-title_tagline' ).on( 'click', function() {
                customize.previewer.send('clicked-customizer-title_tagline', '.header-wrap');
            });
				
			
			
    } );
};

cactus_customize_scroller( jQuery );

});