// PHC- Start Month Function
(function($) {

    "use strict";
    $(document).ready(function() {

        if ($(".vps-slider-annually").length > 0) {
        
            let $this = $(".vps-slider-annually");
            let sliderplans = [];
            
            // Title
            sliderplans[0] = [yearproducts[0].name, yearproducts[1].name, yearproducts[2].name, yearproducts[3].name, yearproducts[4].name];
            // Price
            sliderplans[1] = [yearproducts[0].price, yearproducts[1].price, yearproducts[2].price, yearproducts[3].price, yearproducts[4].price];
            // Description
            sliderplans[2] = [yearproducts[0].desc, yearproducts[1].desc, yearproducts[2].desc, yearproducts[3].desc, yearproducts[4].desc];
            
            // Ram
            sliderplans[3] = [yearproducts[0].ram, yearproducts[1].ram, yearproducts[2].ram, yearproducts[3].ram, yearproducts[4].ram];
            // Processor
            sliderplans[4] = [yearproducts[0].processor, yearproducts[1].processor, yearproducts[2].processor, yearproducts[3].processor, yearproducts[4].processor];
            // Storage
            sliderplans[5] = [yearproducts[0].storage, yearproducts[1].storage, yearproducts[2].storage, yearproducts[3].storage, yearproducts[4].storage];
            
            // Bandwidth
            sliderplans[6] = [yearproducts[0].bandwidth, yearproducts[1].bandwidth, yearproducts[2].bandwidth, yearproducts[3].bandwidth, yearproducts[4].bandwidth];
            // sites
            sliderplans[7] = [yearproducts[0].sites, yearproducts[1].sites, yearproducts[2].sites, yearproducts[3].sites, yearproducts[4].sites];
            // Databases
            sliderplans[8] = [yearproducts[0].databases, yearproducts[1].databases, yearproducts[2].databases, yearproducts[3].databases, yearproducts[4].databases];
            
            // Setup
            sliderplans[9] = [yearproducts[0].setup, yearproducts[1].setup, yearproducts[2].setup, yearproducts[3].setup, yearproducts[4].setup];
            
            // ip one
            sliderplans[10] = [yearproducts[0].migration, yearproducts[1].migration, yearproducts[2].migration, yearproducts[3].migration, yearproducts[4].migration];
            
            // ip two
            sliderplans[11] = [yearproducts[0].ssl, yearproducts[1].ssl, yearproducts[2].ssl, yearproducts[3].ssl, yearproducts[4].ssl];
            
            let urlClass = [yearproducts[0].urlclass, yearproducts[1].urlclass, yearproducts[2].urlclass, yearproducts[3].urlclass, yearproducts[4].urlclass];
            let currentplan = 1;

            $this.xsslide('single', sliderplans, currentplan, 'xs', 'horizontal');
            $this.slider({

                animate: true,
                slide: function( event, ui ) {

                    // Title
                    $('.slider-container .title').html(sliderplans[0][ui.value-1]);
                    // Price
                    $('.slider-container .price').html(sliderplans[1][ui.value-1]);
                    // Description
                    $('.slider-container .desc').html(sliderplans[2][ui.value-1]);

                    // Ram
                    $('.vps-pricing-list .ram').html(sliderplans[3][ui.value-1]);
                    // Processor
                    $('.vps-pricing-list .processor').html(sliderplans[4][ui.value-1]);
                    // Storage
                    $('.vps-pricing-list .storage').html(sliderplans[5][ui.value-1]);

                    // Bandwidth
                    $('.vps-pricing-list .bandwidth').html(sliderplans[6][ui.value-1]);
                    // sites
                    $('.vps-pricing-list .sites').html(sliderplans[7][ui.value-1]);
                    // Databases
                    $('.vps-pricing-list .databases').html(sliderplans[8][ui.value-1]);

                    // sites
                    $('.vps-pricing-list .sites').html(sliderplans[9][ui.value-1]);
                    // Migration
                    $('.vps-pricing-list .migration').html(sliderplans[10][ui.value-1]);
                    // SSL
                    $('.vps-pricing-list .ssl').html(sliderplans[11][ui.value-1]);

                    // Buttons
                    $('.slider-btns').attr('href', urilink[ui.value-1]);

                },
                change: function( event, ui ) {

                    // Title
                    $('.slider-container .title').html(sliderplans[0][ui.value-1]);
                    // Price
                    $('.slider-container .price').html(sliderplans[1][ui.value-1]);
                    // Description
                    $('.slider-container .desc').html(sliderplans[2][ui.value-1]);

                    // Ram
                    $('.vps-pricing-list .ram').html(sliderplans[3][ui.value-1]);
                    // Processor
                    $('.vps-pricing-list .processor').html(sliderplans[4][ui.value-1]);
                    // Storage
                    $('.vps-pricing-list .storage').html(sliderplans[5][ui.value-1]);

                    // Bandwidth
                    $('.vps-pricing-list .bandwidth').html(sliderplans[6][ui.value-1]);
                    // sites
                    $('.vps-pricing-list .sites').html(sliderplans[7][ui.value-1]);
                    // Databases
                    $('.vps-pricing-list .databases').html(sliderplans[8][ui.value-1]);

                    // Steup
                    $('.vps-pricing-list .setup').html(sliderplans[9][ui.value-1]);
                    // Migration
                    $('.vps-pricing-list .migration').html(sliderplans[10][ui.value-1]);
                    // SSL
                    $('.vps-pricing-list .ssl').html(sliderplans[11][ui.value-1]);

                    // Buttons
                    $('.slider-btns').attr('href', urlClass[ui.value-1]);

                }
            });
        }
        
        $('.slider-tigger-annually').click(function() {
            var value= parseInt(this.id.slice(5)) + 1;
            $('.vps-slider-annually').slider('value', value);
            if (!$(this).hasClass('current')) {
                $(this).addClass('current');
                $(this).nextAll().removeClass('current');
                $(this).prevAll().removeClass('current');
            } else {
                $(this).removeClass('current');
            }
        });
    
    });

})(jQuery);