/**
 * This file contains the main JavaScript functionality for the fonts plugin.
 * 
 * @author Pix & Hue
 */

jQuery(document).ready(function($) {

	// ----------------- Font Control Anmiation ----------------- //
	$('.rilee-font-type-title').on('click', function() {
		if($(this).parent().next().hasClass('customize-control-select')) {

			//Identify the Font Control Variables
			var triangle_icon = $(this).next();
			var font_family = $(this).parent().next();
			var font_size = font_family.next();
			var tablet_font_size = font_size.next();
			var mobile_font_size = tablet_font_size.next();
			var letter_spacing = mobile_font_size.next();
			var line_height = letter_spacing.next();
			var text_transform = line_height.next();

			//Toggle CSS Class to Show/Hide Font Controls
			var font_control_array = [triangle_icon, font_family, font_size, tablet_font_size, mobile_font_size, letter_spacing, line_height, text_transform];

			$(font_control_array).toggleClass('rilee-fonts-font-control-active');
			$(font_family).toggleClass('rilee-fonts-font-control-first-active');
			$(text_transform).toggleClass('rilee-fonts-font-control-last-active');

		} else if($(this).parent().next().hasClass('customize-control-slider')) { 

			//Identify the Accent Control Variables
			var triangle_icon = $(this).next();
			var accent_height = $(this).parent().next();
			var accent_mobile_height = accent_height.next();
			var accent_position = accent_mobile_height.next();
			var accent_position_mobile = accent_position.next();

			var accent_array = [triangle_icon, accent_height, accent_mobile_height, accent_position, accent_position_mobile];
			$(accent_array).toggleClass('rilee-fonts-font-control-active');
			$(accent_position_mobile).toggleClass('rilee-fonts-font-control-last-active');
		}
	});

	// ----------------- Create the Font Control Sliders ----------------- //
	var rilee_fonts_sliders = Array();
	$('.rilee-fonts-slider').each(function(i, the_slider) {
		
		//Set the Variables
		var the_input = $(this).next();
		var the_input_value = the_input.val();
		var the_input_label = $(this).prev().find('.rilee-fonts-value');
		var minimum = 0; 
		var maxmium = 100;
		var increment = .5;

		if(the_input.hasClass('rilee_letter_spacing') || the_input.hasClass('rilee_line_height')) {
			maxmium = 8;
			increment = .1;
		} 
		
		//Generate the Slider 
		rilee_fonts_sliders[i] = $(the_slider).slider({
			min: minimum,
			max: maxmium,
			step: increment,
			value: the_input_value,
			slide: function( event, ui ) {
				the_input.val(ui.value).change();
				the_input_label.text(ui.value).change();
			}	
		});
	});	
});	