update colorpicker script to WordPress 3.5

http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

Author: Jose Pardilla

fancybox.php

@@ -418,11 +418,11 @@ function mfbfw_admin_menu() {
 
 function mfbfw_admin_styles() {
 	wp_enqueue_style( 'fancybox-admin', FBFW_URL . 'css/fancybox-admin.css', false, FBFW_VERSION ); // Load custom CSS for Admin Page
-	wp_enqueue_style( 'farbtastic' );
+	wp_enqueue_style( 'wp-color-picker' );
 }
 
 function mfbfw_admin_scripts() {
-	wp_enqueue_script( 'fancybox-admin', FBFW_URL . 'js/admin.js', array('jquery', 'farbtastic'), FBFW_VERSION ); // Load specific JS for Admin Page
+	wp_enqueue_script( 'fancybox-admin', FBFW_URL . 'js/admin.js', array('jquery', 'wp-color-picker'), FBFW_VERSION ); // Load specific JS for Admin Page
 }
 
 

js/admin.js

@@ -86,7 +86,7 @@ jQuery(function (){
 	});
 
 
-	// Color Picker
+	/* Color Picker
 	var $color_inputs = jQuery("input.mfbfw_colorpicker");
 	$color_inputs.each(function () {
 		var $input = jQuery(this);
@@ -96,6 +96,9 @@ jQuery(function (){
 			jQuery($pickerId).animate({opacity: "toggle", height: "toggle"}, 500)
 		});
 	});
+	*/
+
+	jQuery('.mfbfw_colorpicker').wpColorPicker();
 
 })
 

lib/admin-tab-appearance.php

@@ -18,9 +18,7 @@
 									<div id="borderColorBlock">
 
 										<label for="borderColor">
-											<input type="text" name="mfbfw[borderColor]" id="borderColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['borderColor'] ?>" size="7" maxlength="7" />
-											<?php _e('HTML color of the border (default: #BBBBBB)', 'mfbfw'); ?>
-											<div id="borderColor_picker" class="color-picker" style="display:none"></div>
+											<input type="text" name="mfbfw[borderColor]" id="borderColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['borderColor'] ?>" size="7" maxlength="7" data-default-color="#BBBBBB" />
 										</label><br /><br />
 
 									</div>
@@ -74,11 +72,8 @@
 								<fieldset>
 
 									<label for="paddingColor">
-										<input type="text" name="mfbfw[paddingColor]" id="paddingColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['paddingColor'] ?>" size="7" maxlength="7" />
-										<?php _e('Padding HTML color (default: #FFFFFF)', 'mfbfw'); ?>
-										<div id="paddingColor_picker" class="color-picker" style="display:none"></div>
+										<input type="text" name="mfbfw[paddingColor]" id="paddingColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['paddingColor'] ?>" size="7" maxlength="7" data-default-color="#FFFFFF" />
 									</label><br />
-
 									<small><em><?php _e('(This should be left on #FFFFFF (white) if you want to display anything other than images, like inline or framed content)', 'mfbfw'); ?></em></small><br /><br />
 
 									<label for="padding">
@@ -113,9 +108,7 @@
 									<div id="overlayBlock">
 
 										<label for="overlayColor">
-											<input type="text" name="mfbfw[overlayColor]" id="overlayColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['overlayColor']; ?>" size="7" maxlength="7" />
-											<?php _e('Overlay HTML color (default: #000000)', 'mfbfw'); ?>
-											<div id="overlayColor_picker" class="color-picker" style="display:none"></div>
+											<input type="text" name="mfbfw[overlayColor]" id="overlayColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['overlayColor']; ?>" size="7" maxlength="7" data-default-color="#000000" />
 										</label><br /><br />
 
 										<label for="overlayOpacity">
@@ -199,11 +192,8 @@
 										<div id="titleColorBlock">
 
 											<label for="titleColor">
-												<input type="text" name="mfbfw[titleColor]" id="titleColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['titleColor']; ?>" size="7" maxlength="7" />
-												<?php _e('Title text color (default: #333333)', 'mfbfw'); ?>
-												<div id="titleColor_picker" class="color-picker" style="display:none"></div>
+												<input type="text" name="mfbfw[titleColor]" id="titleColor" class="mfbfw_colorpicker" value="<?php echo $mfbfw['titleColor']; ?>" size="7" maxlength="7" data-default-color="#333333" />
 											</label><br />
-
 											<small><em><?php _e('(Should contrast with the padding color set above)', 'mfbfw'); ?></em></small><br /><br />
 
 										</div>