added media upload controls for theme options

css/theme-options.css

@@ -202,6 +202,28 @@
 	font-style: normal;
 }
 
+#ar2-theme-options .media-upload img {
+    display: block;
+    margin: 0 0 1em;
+    width: 50%;
+    border: 1px solid #F5F5F5;
+    height: auto;
+    border-radius: 3px;
+    padding: 1em;
+}
+#ar2-theme-options .media-upload input[type=text] {
+    display: none;
+}
+#ar2-theme-options .media-upload-remove {
+    color: #FF0000;
+    margin-left: 1em;
+}
+#ar2-theme-options .media-upload-remove:hover {
+    color: #FFF;
+    background: #FF0000;
+    margin-left: 1em;
+}
+
 .ie8 #ar2-theme-options .switch {
 	margin: 0;
 }

js/theme-options.js

@@ -4,6 +4,8 @@ var ar2Admin;
 ar2Admin = {
 
 	init : function() {
+
+		var curMediaUploadId;
 
 		$( '.form-table input, .form-table select' ).live( 'change', function() {
 			window.onbeforeunload = function() {
@@ -43,6 +45,48 @@ ar2Admin = {
 
 		$( '#ar2-theme-options' ).tabs();
 
+		$( '.media-upload-add' ).click( function() {
+
+			curMediaUploadId = $( this ).attr( 'data-upload-field' );
+
+			if ( ar2Admin_l10n.isNewMediaManager ) {
+				var sendAttachmentBackup = wp.media.editor.send.attachment;
+
+				wp.media.editor.send.attachment = function( props, attachment ) {
+					$( '#media-upload-' + curMediaUploadId ).val( attachment.url );
+					$( '#media-upload-img-' + curMediaUploadId ).attr( 'src', attachment.url );
+
+					wp.media.editor.send.attachment = sendAttachmentBackup;
+				}
+				wp.media.editor.open( curMediaUploadId );
+			} else {
+				tb_show( ar2Admin_l10n.uploadMediaTitle, 'media-upload.php?referer=ar2-theme-options&type=image&TB_iframe=true&post_id=0', false );
+			}
+
+			return false;
+		} );
+
+		$( '.media-upload-remove' ).click( function() {
+
+			var id = $( this ).attr( 'data-upload-field' );
+			$( '#media-upload-' + id ).val( null );
+			$( '#media-upload-img-' + id ).attr( 'src', null );
+			return false;
+
+		} );
+
+		if ( !ar2Admin_l10n.isNewMediaManager ) {
+			window.send_to_editor = function( html ) {
+				var imageUrl = $( 'img', html ).attr( 'src' );
+
+				$( '#media-upload-' + curMediaUploadId ).val( imageUrl );
+				$( '#media-upload-img-' + curMediaUploadId ).attr( 'src', imageUrl );
+
+				tb_remove();
+				curMediaUploadId = null;
+			}
+		}
+
 	},
 
 	initTokenInput : function( input ) {

library/admin/admin.php

@@ -190,14 +190,13 @@ function ar2_theme_options_default_fields() {
 			'description'		=> __( 'Check this to allow the theme to automatically retrieve the first attached image from the post as featured image when no image is specified.', 'ar2' )
 		),
 
-		/* Layouts */
+		/* Overall Design */
 		'layout' => array (
 			'type'			=> 'dropdown',
 			'title'			=> __( 'No of Columns', 'ar2' ),
 			'section'		=> 'ar2_design_overall',
 			'options'		=> $ar2_styles->get_layouts(),
-		),
-
+		),	
 
 		/* Import / Export Options */
 		'import_theme_options' => array (
@@ -358,6 +357,15 @@ function ar2_theme_options_enqueue_scripts( $hook_suffix ) {
 	global $wp_styles;
 
 	$current = isset( $_GET[ 'opt_type' ] ) ? esc_attr( $_GET['opt_type'] ) : '';
+
+	// for media uploading functionality.
+	if ( function_exists( 'wp_enqueue_media' ) ) {
+		wp_enqueue_media();
+	} else {
+		wp_enqueue_script( 'thickbox' );
+		wp_enqueue_style( 'thickbox' );
+		wp_enqueue_script( 'media-upload' );
+	}
 
 	wp_enqueue_style( 'ar2-theme-options', get_template_directory_uri() . '/css/theme-options.css', null, '2011-07-29' );
 
@@ -385,15 +393,17 @@ function ar2_theme_options_localize_vars() {
 	$current = isset( $_GET[ 'opt_type' ] ) ? esc_attr( $_GET['opt_type'] ) : '';
 
 	$_vars = array (
-		'changedConfirmation'	=> __( 'If you have made any changes in the fields without submitting, all changes will be lost.', 'ar2' )
-	);
-
-	$_vars = array_merge( $_vars, array (
+		'changedConfirmation'	=> __( 'If you have made any changes in the fields without submitting, all changes will be lost.', 'ar2' ),
 		'ajaxurl'				=> admin_url( 'admin-ajax.php' ),
 		'hintText'				=> __( 'Start by entering a term here.', 'ar2' ),
 		'noResultsText'			=> __( 'No results.', 'ar2' ),
 		'searchingText'			=> __( 'Searching...', 'ar2' ),
-	) );
+		'uploadMediaTitle'		=> __( 'Upload Media', 'ar2' ),
+		'isNewMediaManager'		=> false,
+	);
+
+	if ( function_exists( 'wp_enqueue_media' ) )
+		$_vars[ 'isNewMediaManager' ] = true;
 
 	$_fields = ar2_theme_options_default_fields();
 
@@ -842,6 +852,15 @@ function ar2_theme_options_render_field( $args = array() ) {
 			}
 			echo '</div>';
 		break;
+
+		case 'media-upload' :
+			echo '<div class="media-upload">';
+			echo '<p><img id="media-upload-img-' . $id . '" src="' . $value . '" alt="" /></p>';
+			echo ar2_form_input( 'ar2_theme_options[' . $id . ']', $value, 'id="media-upload-' . $id . '"' );
+			echo '<input type="button" data-upload-field="' . $id . '" class="button media-upload-add" value="' . __( 'Add Image', 'ar2' ) . '" />';
+			echo '<a href="#" data-upload-field="' . $id . '" class="media-upload-remove">' . __( 'Remove', 'ar2' ) . '</a>';
+			echo '</div>';
+		break;
 
 		case 'input' :
 			echo ar2_form_input( 'ar2_theme_options[' . $id . ']', $value, $extras );