jQuery(document).ready(function($) {
	
	// bind ColorPicker plugin to text inputs
	$('input[id^="arixwp_fontcolor"]').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val('#' + hex);
			$(el).ColorPickerHide();
			$(el).trigger('change');
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
		}
	})
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
	});
	
	// DYNAMIC GOOGLE FONTS PREVIEW
	
	var fontsLoaded   = new Array;
	
	$('select[id^="arixwp_font"],input[id^="arixwp_font"]').each(function() {
		
		var selectId      = this.id;
		var selectIdArray = selectId.split('_');
		var groupName     = selectIdArray[2];
				
		doChanges(this.id,this.value,groupName);
	});
	
	$('select[id^="arixwp_font"],input[id^="arixwp_font"]').live('change',function() {
		
		var selectId      = this.id;
		var selectIdArray = selectId.split('_');
		var groupName     = selectIdArray[2];
		if (groupName == 'fallback') {
			groupName = selectIdArray[3];
		}
				
		doChanges(this.id,this.value,groupName);	
	});
	
	function doChanges(iFormElement,iFormVal,iGroupName) {
		
		if (iFormVal == "Font+Family+" || iFormVal == "Fallback Font " || iFormVal == "Font Style " || iFormVal == "#" || iFormVal == "" ||
			iFormVal == "Font Size " || iFormVal == "Font Weight ") {
			return false;
		}
		
		if(iFormElement.match(/fontfamily_fallback/)) {
			changeFallBackFontFamily(iGroupName,iFormVal);
		} else if (iFormElement.match(/fontfamily/)) {
			loadFontFamily(iFormVal);
			changeWebFontFamily(iGroupName,iFormVal);
		} else if (iFormElement.match(/fontcolor/)) {
			changeFontColor(iGroupName,iFormVal);
		} else if (iFormElement.match(/fontstyle/)) {
			changeFontStyle(iGroupName,iFormVal);
		} else if (iFormElement.match(/fontsize/)) {
			changeFontSize(iGroupName,iFormVal);
		} else if (iFormElement.match(/fontweight/)) {
			changeFontWeight(iGroupName,iFormVal);
		} else {
			return false;
		}
	
	}
	
	function changeWebFontFamily(groupName,iValue) {
		$('#font_prev_' + groupName).css('font-family',"'" + iValue.replace(/\+/g," ") + "'");
	}
	
	function changeFallBackFontFamily(groupName,iValue) {
		$('#font_fallback_prev_' + groupName).css('font-family',iValue);
	}
	
	function changeFontColor(groupName,iValue) {
		$('#font_prev_' + groupName).css('color',iValue);
		$('#font_fallback_prev_' + groupName).css('color',iValue);
	}
	
	function changeFontStyle(groupName,iValue) {
		$('#font_prev_' + groupName).css('font-style',iValue);
		$('#font_fallback_prev_' + groupName).css('font-style',iValue);
	}
	
	function changeFontSize(groupName,iValue) {
		$('#font_prev_' + groupName).css('font-size',iValue);
		$('#font_fallback_prev_' + groupName).css('font-size',iValue);
	}
	
	function changeFontWeight(groupName,iValue) {
		$('#font_prev_' + groupName).css('font-weight',iValue);
		$('#font_fallback_prev_' + groupName).css('font-weight',iValue);
	}
	
	function loadFontFamily(iName) {
		
		if (fontsLoaded[iName] != 'loaded') {

			WebFont.load({
			   google: {
			     families: [iName]
			   }
			});
			
			fontsLoaded[iName] = 'loaded';
		}
	}
	
})(jQuery);