/**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */


( function( $ ) {

	// Site title and description.
	wp.customize( 'blogname', function( value ) {
		value.bind( function( to ) {
			$( '.site-title a' ).text( to );
		} );
	} );
	wp.customize( 'blogdescription', function( value ) {
		value.bind( function( to ) {
			$( '.site-description' ).text( to );
		} );
	} );
	


	// Header Color.
	// 	wp.customize( 'top_header_background_color', function( value ) {
	// 	value.bind( function( to ) {
	// 		$( '#site-header' ).css( {
	// 			'background':to
	// 		});
	// 	} );
	// } );

	//Header text color.
	// wp.customize( 'header_textcolor', function( value ) {
	// 	value.bind( function( to ) {
	// 		if ( 'blank' === to ) {
	// 			$( '.site-title a, .site-description' ).css( {
	// 				'clip': 'rect(1px, 1px, 1px, 1px)',
	// 				'position': 'absolute'
	// 			} );
	// 		} else {
	// 			$( '.site-title a, .site-description' ).css( {
	// 				'clip': 'auto',
	// 				'position': 'relative'
	// 			} );
	// 			$( '.site-title a, .site-description' ).css( {
	// 				'color': to
	// 			} );
	// 		}
	// 	} );
	// } );
} )( jQuery );

// Gallery 

Fancybox.bind("[data-fancybox]", {
    buttons: [
    "slideShow",
    "thumbs",
    "fullScreen",
    "close"
  ],
  loop: false,
  protect: true
}); 


// Gallery image popup

$(function () {
    "use strict";
    
    $(".popup img").click(function () {
        var $src = $(this).attr("src");
        $(".show").fadeIn();
        $(".img-show img").attr("src", $src);
    });
    
    $("span, .overlay").click(function () {
        $(".show").fadeOut();
    });
    
});

// gallery tab

jQuery(document).ready(function($) {
    // Initially show all items
    $('.gallery-item').show();

    // Handle tab click event
    $('.gallery-tab').on('click', function(e) {
        e.preventDefault(); // Prevent default behavior

        var termId = $(this).data('term-id'); // Get the term ID from the clicked tab

        // Remove active class from all tabs and add it to the clicked one
        $('.gallery-tab').removeClass('active');
        $(this).addClass('active');

        // If "All" is clicked (assuming termId 0 for "All")
        if (termId === 0) {
            $('.gallery-item').show(); // Show all items
        } else {
            // Hide all items, then show only items that match the selected category
            $('.gallery-item').hide();
            $('.category-' + termId).show();
        }
    });
});

// 
// Gallery image popup with zoom effect
$(function () {
    "use strict";

    $(".popup img").click(function () {
        var $src = $(this).attr("src");
        
        $(".show").fadeIn();
        $(".img-show img").attr("src", $src);
        
        // Add zoom effect to the popup image
        $(".img-show img").addClass("img-zoom");

        // Remove the zoom effect after the animation ends
        $(".img-show img").on("animationend", function() {
            $(this).removeClass("img-zoom");
        });
    });
    
    $("span, .overlay").click(function () {
        $(".show").fadeOut();
    });
});

// Gallery tab with zoom effect
jQuery(document).ready(function($) {
    // Initially show all items with zoom effect
    $('.gallery-item').show().addClass("img-zoom");

    // Handle tab click event
    $('.gallery-tab').on('click', function(e) {
        e.preventDefault(); // Prevent default behavior

        var termId = $(this).data('term-id'); // Get the term ID from the clicked tab

        // Remove active class from all tabs and add it to the clicked one
        $('.gallery-tab').removeClass('active');
        $(this).addClass('active');

        // If "All" is clicked (assuming termId 0 for "All")
        if (termId === 0) {
            $('.gallery-item').show().addClass("img-zoom"); // Show all items
        } else {
            // Hide all items, then show only items that match the selected category with zoom effect
            $('.gallery-item').hide();
            $('.category-' + termId).show().addClass("img-zoom");
        }

        // Remove zoom class after animation for retriggering
        $('.gallery-item').on("animationend", function() {
            $(this).removeClass("img-zoom");
        });
    });
});

// ********** end **********

// // Skill Progress Bar 

document.querySelectorAll('.progressbar-container').forEach(progressbarContainer => {
    const totalWidth = parseInt(getComputedStyle(progressbarContainer).width);  // Get total width of container
    const volumeElements = progressbarContainer.querySelectorAll('.volume'); // Get all volume elements
    const skillQuantities = progressbarContainer.querySelectorAll('.skill-quantity'); // Get all skill quantity elements

    // Resize the volume boxes based on their percentage values
    volumeElements.forEach(element => {
        // Find the percentage value for this skill (assumes the value is within a sibling element)
        const vol = parseInt(element.closest('.skill-box').previousElementSibling.innerText.trim());

        // Set the width of the volume element based on the percentage
        element.style.width = `${vol}%`;

        // Apply special styles for volume > 85%
        if (vol > 85) {
            element.style.backgroundColor = "green"; // Change color to green if above 85%
            element.closest('.skill-box').style.boxShadow = "0 0 5px 2px rgba(0, 255, 0, 0.2)"; // Apply a subtle green box shadow
        } else {
            element.style.backgroundColor = "#4CAF50"; // Default color for progress
            element.closest('.skill-box').style.boxShadow = "none"; // Remove box shadow for lower percentages
        }
    });

    // Adjust the position of the skill quantity percentage text
    skillQuantities.forEach(element => {
        let val = parseInt(element.innerText.trim()); // Get the percentage value
        if (val === 100) {
            val -= 0.4; // Slightly reduce the value if it's 100% to avoid overflow
        }
        
        const textWidth = parseInt(getComputedStyle(element).width) / 2; // Calculate the width of the text for centering
        const position = totalWidth - textWidth - (val * totalWidth / 100); // Calculate the position of the pointer
        
        // Position the pointer
        element.style.right = `${position}px`;
    });
});

// ********** end **********