jQuery( document ).ready( function( $ ){
	var wpctp_upload, data_value = {}, element_id, element_name, element_label, input_id, img_id, widget_id,icon_type,select_icon;
    $( this ).delegate( '#wpctp-upload', 'click', function(){
		input_id = $( this ).attr( 'data-id' ) + '-input';
		img_id = $( this ).attr( 'data-id' ) + '-img';
		if( wpctp_upload ) {
			wpctp_upload.open();
			return;
		}
		wpctp_upload = wp.media.frames.file_frame = wp.media({
			title: 'Choose an image',
			button: { text: 'Choose image' },
			multiple: false,
			library : { type : 'image' }
		});
		wpctp_upload.on( 'select', function() {
			attachment = wpctp_upload.state().get( 'selection' ).first().toJSON();
			$( input_id ).val( attachment.id );
			$( img_id ).attr( 'src', attachment.url );
		});
		wpctp_upload.open();
	});
    $( this ).delegate( '#wpctp-service-icon', 'click', function(){
		icon_type = $( '#service_icon_type' ).val();
		if( icon_type == '#service_icon_image' ){
			$('#wpctp-service-icon i').removeClass(select_icon);
			if( wpctp_upload ) {
				wpctp_upload.open();
				return;
			}
			wpctp_upload = wp.media.frames.file_frame = wp.media({
				title: 'Choose an image',
				button: { text: 'Choose image' },
				multiple: false,
				library : { type : 'image' }
			});
			wpctp_upload.on( 'select', function() {
				attachment = wpctp_upload.state().get( 'selection' ).first().toJSON();
				$('input#service_icon_image').val( attachment.id );
				$('#wpctp-service-icon i').remove();
				$('#wpctp-service-icon img').remove();
				$('#wpctp-service-icon span').before( '<img src="' + attachment.url + '" width="50" />' );
			});
			wpctp_upload.open();
		}else{
			$('div' + icon_type).show();
		}
	});
	$( '#service_icon i.fa' ).click(function(){
		select_icon = $(this).attr('class');
		$('#service_icon i.fa').removeClass('selected');
		$(this).addClass('selected');
	});
	$( this ).delegate( '#cancel', 'click', function(){
		$('div' + icon_type).hide();
	});
	$( this ).delegate( '#use-it', 'click', function(){
		$('input#service_icon').val( select_icon );
		$('div' + icon_type).hide();
		$('#wpctp-service-icon i').remove();
		$('#wpctp-service-icon img').remove();
		$('#wpctp-service-icon span').before( '<i class="' + select_icon + '"></i>' );
	});
	$( '.change-image' ).click(function(e) {
		e.preventDefault();
		data_id = $( this ).attr( 'data-id' );
		if( wpctp_upload ) {
			wpctp_upload.open();
			return;
		}
		wpctp_upload = wp.media.frames.file_frame = wp.media({
			title: 'Choose an image',
			button: { text: 'Choose image' },
			multiple: false
		});
		wpctp_upload.on( 'select', function() {
			attachment = wpctp_upload.state().get( 'selection' ).first().toJSON();
			$( '#' + data_id + '_preview' ).empty();
			$( '#' + data_id ).val( attachment.url );
			$( '#' + data_id + '_preview' ).append( '<img src="' + attachment.url + '" />' );
		});
		wpctp_upload.open();
	});
	$( '.clear-value' ).click(function(e) {
		e.preventDefault();
		data_id = $( this ).attr( 'data-id' );
		$( '#' + data_id ).val( '' );
	});
	$( this ).delegate( 'select.wpctp-font', 'change', function(){
		data_value = {};
		element_id = $( this ).attr( 'id' );
		element_name = $( this ).parent().attr( 'id' );
		element_label = $( 'label#' + element_id + ' #label' ).text();
		data_value.family = $( this ).val();
		$( 'label#' + element_id ).css({'opacity':.5,'background-image':'url(' + $( this ).attr( "data-loading" ) + ')','background-repeat':'no-repeat','background-position':'center center'});
		$( 'input#' + element_id ).val('');
		$.ajax({
			url		: wpctp['ajaxurl'],
			type	: 'post',
			data	: {
						action	: 'googlefont',
						key		: element_name,
						field	: { label : element_label },
						value	: $( this ).val(),
					},
			success	: function(data){
				//console.log(data);
				$( 'label#' + element_id ).html(data);
				$( 'label#' + element_id ).css({'opacity':'','background-image':'','background-repeat':'','background-position':''});
				$( 'input#' + element_id ).val(JSON.stringify(data_value));
			}
		});
	});
	$( this ).delegate( 'input.wpctp-font-checkbox', 'change', function(){
		data_value.variants = new Array();
		$( 'label#' + element_id ).find('.wpctp-font-variant:checked').each(function(){
			data_value.variants.push($(this).val());
			$( 'input#' + element_id ).val(JSON.stringify(data_value));
		});
		data_value.subsets = new Array();
		$( 'label#' + element_id ).find('.wpctp-font-subset:checked').each(function(){
			data_value.subsets.push($(this).val());
			$( 'input#' + element_id ).val(JSON.stringify(data_value));
		});
	});
 	wpctp_color_picker();	 
	function wpctp_color_picker() {
		if( $( '.wpctp-color-picker' ).length ){
			Color.prototype.toString = function() {
				if (this._alpha < 1) {
					return this.toCSS('rgba', this._alpha).replace(/\s+/g, '');
				}
				var hex = parseInt(this._color, 10).toString(16);
				if (this.error) return '';
				if (hex.length < 6) {
					for (var i = 6 - hex.length - 1; i >= 0; i--) {
						hex = '0' + hex;
					}
				}
				return '#' + hex;
			};
			$('.wpctp-color-picker').each(function( index ) {
				var $control = $(this),
					value = $control.val().replace(/\s+/g, ''),
					alpha_val = 100,
					$alpha, $alpha_output;
				if (value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)) {
					alpha_val = parseFloat(value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)[1]) * 100;
				}
				$control.wpColorPicker({
					clear: function(event, ui) {
						$alpha.val(100);
						$alpha_output.val(100 + '%');
					}
				});
				$('<div class="wpctp-alpha-wrap" style="display:none;">' + '<label>Alpha: <output class="rangevalue">' + alpha_val + '%</output></label>' + '<input type="range" min="1" max="100" value="' + alpha_val + '" name="alpha" class="wpctp-alpha-field">' + '</div>').appendTo($control.parents('.wp-picker-container:first').addClass('.wpctp-color-picker-group').find('.wp-picker-holder')); 
				
				$alpha = $control.parents('.wp-picker-container:first').find('.wpctp-alpha-field');
				$alpha_output = $control.parents('.wp-picker-container:first').find('.wpctp-alpha-wrap output')
				$alpha.bind('change keyup', function() {
					var alpha_val = parseFloat($alpha.val()),
						iris = $control.data('a8cIris'),
						color_picker = $control.data('wpWpColorPicker');
					$alpha_output.val($alpha.val() + '%');
					iris._color._alpha = alpha_val / 100.0;
					$control.val(iris._color.toString());
					color_picker.toggler.css({
						backgroundColor: $control.val()
					});
				}).val(alpha_val).trigger('change');
			});
		}
	}
});