Changeset 847712

Timestamp:

01/29/2014 03:04:25 PM (12 years ago)

Author:

mihaivalentin

Message:

0.28

• Images are responsive by default. They will resize nicely on lower resolution devices
• Their size can be now chosen according to predefined presets or just typed in manually
• Freely scalable: you can get past the responsive restriction set by your theme
• A better UI, lots of bugfixes and usability improvements

Location:

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk

Files:

• imagepro.php (modified) (6 diffs)
• languages/imagepro.pot (added)
• readme.txt (modified) (6 diffs)
• screenshot-1.jpg (modified) (previous)
• screenshot-2.jpg (modified) (previous)
• screenshot-6.jpg (modified) (previous)
• src/base.php (modified) (1 diff)
• src/editor.php (modified) (2 diffs)
• src/folder.php (modified) (1 diff)
• src/js/dragdropupload.js (modified) (3 diffs)
• src/js/editor.js (modified) (1 diff)
• src/js/folder.js (modified) (1 diff)
• src/js/helper (deleted)
• src/js/impro.js (modified) (1 diff)
• src/request/deleteattachment.php (modified) (1 diff)
• src/request/getimages.php (modified) (1 diff)
• src/request/upload.php (modified) (2 diffs)
• src/requirements.php (modified) (2 diffs)
• src/thumbs.php (modified) (1 diff)
• src/view/css/editor.css (modified) (2 diffs)
• src/view/css/folder.css (modified) (5 diffs)
• src/view/editor.php (modified) (2 diffs)
• src/view/folder.php (modified) (3 diffs)
• src/view/img/add.png (deleted)
• src/view/img/delete.gif (deleted)
• src/view/img/delete.png (deleted)
• src/view/img/gear.png (deleted)
• src/view/img/grey.gif (deleted)
• src/view/img/import.png (deleted)
• src/view/img/import2.png (deleted)
• src/view/img/importmenu.png (deleted)
• src/view/img/library.png (deleted)
• src/view/img/link.png (deleted)
• src/view/img/open.png (deleted)
• src/view/img/resize.png (deleted)

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/imagepro.php

@@ -5 +5 @@
 Description: WordPress media & images management done right!
 Author: Mihai Valentin
-Version: 0.27
+Version: 0.28
 Author URI: http://www.mihaivalentin.com/
 */
@@ -25 +25 @@
 */
 
-/* initialize internationalization */
-load_plugin_textdomain('imagepro', false, basename(dirname( __FILE__ )) . '/languages');
-
 /* load external components */
 require_once('src/thumb/phpthumb.class.php');
@@ -43 +40 @@
 
 class impro {
-    
+
+    /* holding the version of the plugin */
+    private static $version;
+
     /**
      * Initializes the Image Pro plugin
@@ -64 +64 @@
             impro_thumbs::init();           
         }
+
+        /* get version */
+        if (!function_exists('get_plugin_data')) {
+            require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
+        }
+        if (function_exists('get_plugin_data')) {
+            $pluginData = get_plugin_data(__FILE__, false, false);
+            self::$version = $pluginData['Version'];
+        } else {
+            self::$version = md5(file_get_contents(__FILE__));
+        }
+
+        /* initialize internationalization */
+        load_plugin_textdomain('imagepro', false, basename(dirname( __FILE__ )) . '/languages');
     }
     
@@ -79 +93 @@
      */
     public static function do_scripts() {
-        echo impro_base::js("/src/js/helper/scroll/jquery.scrollTo.js");
-        echo impro_base::js("/src/js/helper/augment.js");
         echo impro_base::js("/src/js/impro.js");
         echo impro_base::inlinejs('impro.url = "' . impro::url() . '";');   // set url to javascript
@@ -90 +102 @@
     public static function path() {return WP_PLUGIN_DIR.'/'.dirname(plugin_basename( __FILE__ ));}
     public static function url() {return WP_PLUGIN_URL.'/'.dirname(plugin_basename( __FILE__ ));}
+
+    /* gets the version of the plugin */
+    public static function getVersion() { return self::$version; }
 }
 

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/readme.txt

@@ -5 +5 @@
 Requires at least: 3.0.0
 Tested up to: 3.8
-Stable tag: 0.27
+Stable tag: 0.28
 
 Upload, resize, add, change images instantly. Manage your media collection with ease and use it for any post or page. A new way of managing content!
 
 == Description ==
+
+NEW: 0.28 version brings the following new features:
+
+*   images are responsive by default. They will resize nicely on lower resolution devices
+*   their size can be now chosen according to predefined presets or just typed in manually
+*   freely scalable: you can get past the responsive restriction set by your theme
+*   a better UI, lots of bugfixes and usability improvements
 
 Check out the 2 minute video presentation of this plugin:
@@ -32 +39 @@
 - Apache 2.2.1.4
 - WordPress 3.2.1 (should work on any WordPress >= 3.0)
-- Firefox >= 5 or Chrome >= 20 or Internet Explorer >= 10
+- Firefox >= 10 or Chrome >= 26 or Internet Explorer >= 10
 
 Installation steps:
@@ -43 +50 @@
 4. Go to any post or page and start using it
 
-If you encounter issues with this plugin, please use the "DBG" link from the "Available Images" panel in the post editor. This will provide deubugging information, which you can send back to me for troubleshooting.
+If you encounter issues with this plugin, please use the "DBG" link from the "Available Images" panel in the post editor. This will provide debugging information, which you can send back to me for troubleshooting.
 
 == Arbitrary section ==
@@ -49 +56 @@
 In case of experiencing problems, make sure you adhere to the installation requirements.
 If the problem still persists, take a look at /imagepro/logs/impro.log and see if there are any errors or warnings reported
-If nothing helps, please use the "DBG" link from the "Available Images" panel in the post editor. This will provide deubugging information, which you can send back to me for troubleshooting.
+If nothing helps, please use the "DBG" link from the "Available Images" panel in the post editor. This will provide debugging information, which you can send back to me for troubleshooting.
 
-Many thanks to phpThumb, TinyMCE Advanced Image Resize Helper Plugin, KLogger
+Many thanks to phpThumb and KLogger
 
 == Screenshots ==
@@ -63 +70 @@
 
 == Changelog ==
+
+= 0.28 =
+* Images are responsive by default. They will resize nicely on lower resolution devices
+* Their size can be now chosen according to predefined presets or just typed in manually
+* Freely scalable: you can get past the responsive restriction set by your theme
+* A better UI, lots of bugfixes and usability improvements
 
 = 0.27 =
@@ -119 +132 @@
 == Upgrade Notice ==
 
+= 0.28 =
+Recommended update. Lots of improvements in various areas.
+
 = 0.14 =
 Please update! This plugin is now compatible with WordPress 3.3. 

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/base.php

@@ -7 +7 @@
     
     
-    public static function css($path) {return '<link rel="stylesheet" type="text/css" href="'.impro::url().$path.'" />';}
-    public static function js($path) {return '<script type="text/javascript" language="javascript" src="'.impro::url().$path.'"></script>';}
+    public static function css($path) {return '<link rel="stylesheet" type="text/css" href="'.impro::url().$path.'?version=' . impro::getVersion().'" />';}
+    public static function js($path) {return '<script type="text/javascript" language="javascript" src="'.impro::url().$path.'?version=' . impro::getVersion().'"></script>';}
     public static function inlinejs($js) {return '<script type="text/javascript" language="javascript">'.$js.'</script>';}
     

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/editor.php

@@ -12 +12 @@
             add_meta_box('impro_editor_box', __('Selected image', 'imagepro'), array('impro_editor','do_output'), get_post_type($post->ID), 'side', 'high');
         }
-        
-        add_filter("mce_external_plugins", array('impro_editor', 'do_mce_plugin'));
-        add_filter("tiny_mce_before_init", array('impro_editor', 'do_mce_init'));
-        
     }
     public static function do_output() {
@@ -27 +23 @@
             'enableTinyMCE' => __("You must enable the visual editor from your User Profile in order for Image Pro plugin to work", 'imagepro'),
             'differentDomain' => __("This image is from a different remote domain. To be able to resize it, upload the image on this domain!", 'imagepro'),
-            'convertToImagePro' => __("This image was inserted through the normal WordPress picture upload. Would you like Image Pro plugin to take care of it's resize and become awesome?", 'imagepro')
+            'convertToImagePro' => __("This image was inserted through the normal WordPress picture upload. Would you like Image Pro plugin to take care of it's resize and become awesome?", 'imagepro'),
+            'uploadNew' => __("Upload files", 'imagepro')
         )));
         
         echo impro_base::js("/src/js/editor.js");
     }
-    public static function do_mce_plugin($plugin_array) {
-        $plugin_array['advimagescale'] = impro::url() . '/src/js/helper/tinymce_advanced_scale_plugin/editor_plugin_src.js';
-        return $plugin_array;
-    }
-    public static function do_mce_init($init) {
-        $init['advimagescale_resize_callback'] = 'impro.editor.onMCEResize';
-        return $init;
-    }
+
+    public static function list_thumbnail_sizes() {
+        global $_wp_additional_image_sizes;
+        $sizes = array();
+        foreach (get_intermediate_image_sizes() as $s) {
+            $sizes[$s] = array(0, 0);
+            if (in_array($s, array('thumbnail', 'medium', 'large'))) {
+                $sizes[$s][0] = get_option($s . '_size_w');
+                $sizes[$s][1] = get_option($s . '_size_h');
+            } else {
+                if (isset($_wp_additional_image_sizes) && isset($_wp_additional_image_sizes[$s]))
+                    $sizes[$s] = array($_wp_additional_image_sizes[$s]['width'], $_wp_additional_image_sizes[$s]['height'],);
+            }
+        }
+
+        $finalSizes = array();
+        foreach($sizes as $name => $attrs) {
+            if (intval($attrs[0]) >= 30 && intval($attrs[1]) >= 30) {
+                $finalSizes[$name] = array(intval($attrs[0]), intval($attrs[1]));
+            }
+        }
+
+        return $finalSizes;
+    }
 }

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/folder.php

@@ -26 +26 @@
             'popupOpenError' => __("The pop-up window containing the attachment could not be opened! Make sure you do not have a popup-blocker active!", 'imagepro'),
             'attachmentLink' => __('The box below contains the full link of the attachment. You can press CTRL + C (or Command + C on Mac) to copy it to the clipboard.\n\nPress OK or Cancel to continue.', 'imagepro'),
-            'deleteAttachmentConfirmation' => __('Are you sure you want to delete this attachment?\n\nBE AWARE THAT IF IT IS ADDED TO ANOTHER POST, REMOVING IT WILL REMOVE IT FROM THERE TOO!', 'imagepro'),
-            'noImageSelected' => __('Please select an image in the list below first!', 'imagepro')
+            'deleteAttachmentConfirmation' => __("Are you sure you want to delete this attachment?\n\nBE AWARE THAT IF IT IS ADDED TO ANOTHER POST, REMOVING IT WILL REMOVE IT FROM THERE TOO!\n\nHowever, if you would like to recover it, you can at any time restore it from the \"Trash\".", 'imagepro')
         )));
         

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/js/dragdropupload.js

@@ -1 +1 @@
 impro.DragDropUpload = function() {
     return {
-        onProgress : function(e, fileName) {
-        },
-        onComplete : function(e, fileName) {
-        },
-        onDropFile : function(e, fileName) {
-        },
+        onCompleted: function(e, files, filesSucceeded, filesFailed) {},
+        onProgress : function(e, file, i, currentFileProgress, totalProgress) {},
+        onDropFiles : function(e, files) {},
+
         url : "",
-        mousein_class : "vdragover",
+        mouseOverClass : "vdragover",
 
         init : function(id, options) {
             this._el = document.getElementById(id);
             this.el = jQuery(this._el);
-            this.el.bind("dragover", jQuery.proxy(this._over, this)).bind(
-                    "dragenter", function() {
-                        return false;
-                    }).bind('dragleave', jQuery.proxy(this._leave, this)).bind(
-                    "drop", jQuery.proxy(this._drop, this))
+            this.el.bind("dragover", jQuery.proxy(this._over, this))
+                .bind("dragenter", function() { return false; })
+                .bind('dragleave', jQuery.proxy(this._leave, this))
+                .bind("drop", jQuery.proxy(this._drop, this));
 
             this.blockDocumentDrop();
@@ -24 +21 @@
         },
         blockDocumentDrop : function() {
-            jQuery(document).bind('dragenter', function(e) {
-                return false;
-            }).bind('dragleave', function(e) {
-                return false;
-            }).bind('dragover', jQuery.proxy(function(e) {
-                var dt = e.originalEvent.dataTransfer;
-                if (!dt) {
-                    return;
-                }
-                dt.dropEffect = 'none';
-                return false;
-            }, this));
+            jQuery(document)
+                .bind('dragenter', function(e) { return false; })
+                .bind('dragleave', function(e) { return false; })
+                .bind('dragover', jQuery.proxy(function(e) {
+                    var dt = e.originalEvent.dataTransfer;
+                    if (!dt) {
+                        return;
+                    }
+                    dt.dropEffect = 'none';
+                    return false;
+                }, this));
         },
         hideHighlight : function() {
-            this.el.removeClass(this.mousein_class);
-            return;
+            this.el.removeClass(this.mouseOverClass);
         },
         _leave : function(e) {
@@ -46 +41 @@
         _over : function(e) {
             var dt = e.originalEvent.dataTransfer;
-            if (!dt)
+            if (!dt
+                || (dt.types.contains && !dt.types.contains("Files"))
+                || (dt.types.indexOf && dt.types.indexOf("Files") == -1)
+            ) {
                 return;
-            // FF
-            if (dt.types.contains && !dt.types.contains("Files"))
-                return;
-            // Chrome
-            if (dt.types.indexOf && dt.types.indexOf("Files") == -1)
-                return;
+            }
 
-            if (jQuery.browser.webkit)
-                dt.dropEffect = 'copy';
+            dt.dropEffect = 'copy';
 
-            this.el.addClass(this.mousein_class);
+            this.el.addClass(this.mouseOverClass);
 
             return false;
         },
         _drop : function(e) {
-            // debugger;
-            // alert('test');
-
-            // jQuery(e.originalTarget).parents('li')
-
             var dt = e.originalEvent.dataTransfer;
-            if (!dt && !dt.files)
+            if (!dt && !dt.files) {
                 return;
+            }
 
             this.hideHighlight();
 
-            var files = dt.files;
-            for ( var i = 0; i < files.length; i++) {
-                var file = files[i];
-                this.onDropFile(e, file.fileName);
-                this.upload(file);
-            }
-            return false;
+            if ('function' === typeof this.onDropFiles) {
+                this.onDropFiles.call(this, e, dt.files);
+            }
+            this.uploadMultipleFiles(dt.files);
+
+            return false;
         },
 
-        upload : function(file) {
-            var xhr = new XMLHttpRequest();
-            xhr.upload.addEventListener("progress", jQuery.proxy(function(e) {
-                this.onProgress(e, file);
-            }, this), false);
-            xhr.onload = jQuery.proxy(function(e) {
-                this.onComplete(e, file);
-            }, this);
-            xhr.open('POST', this.url + "?name=" + (file.fileName || file.name), true);
-            xhr.send(file);
-        }
+        uploadMultipleFiles: function(files) {
+            var that = this,
+                i = 0,
+                filesFailed = [],
+                filesSucceeded = [];
+
+            /**
+             * uploads a single file and triggers load, error and progress events
+             * @param file the File object to upload
+             * @param load triggered on success
+             * @param error triggered on error
+             * @param progress triggered on progress
+             */
+            var uploadSingleFile = function(file, load, error, progress) {
+                var xhr = new XMLHttpRequest();
+                /* register progress event */
+                xhr.addEventListener("progress", jQuery.proxy(function(e) {
+                    if ('function' === typeof progress) {
+                        progress.call(this, e, file);
+                    }
+                }, that), false);
+                /* register successful event */
+                xhr.addEventListener("load", jQuery.proxy(function(e) {
+                    /* increase the number of files processed with 1 */
+                    i++;
+                    if ('function' === typeof load) {
+                        load.call(this, e, file);
+                    }
+                }, that), false);
+                /* register error event */
+                xhr.addEventListener("error", jQuery.proxy(function(e) {
+                    /* increase the number of files processed with 1 */
+                    i++;
+                    if ('function' === typeof error) {
+                        error.call(this, e, file);
+                    }
+                }, that), false);
+                /* perform upload */
+                xhr.open('POST', that.url + "?name=" + file.name, true);
+                xhr.send(file);
+            };
+
+            /**
+             * call the onCompleted function to notify of completion
+             * this method will provide the event of the last file
+             * and all the files, the files that succeeded and
+             * the files that failed
+             * @param e
+             * @param file
+             */
+            var finished = function(e, file) {
+                if ('function' === typeof that.onCompleted) {
+                    that.onCompleted.call(that, e, files, filesSucceeded, filesFailed);
+                }
+            };
+
+            /**
+             * called when a file has been successfully uploaded
+             * @param e
+             * @param file
+             */
+            var individualLoad = function(e, file) {
+                /* the server returned data, but is it correct? was the file uploaded successfully? */
+                var response = e.target.response;
+                try {
+                    response = JSON.parse(e.target.response);
+                } catch(e) {}
+
+                /* if upload was successful */
+                if ('object' === typeof response && response['ok'] === true) {
+                    filesSucceeded.push(file);
+                    if (i === files.length) {
+                        finished(e, file);
+                    } else {
+                        uploadSingleFile(files[i], individualLoad, individualError, individualProgress);
+                    }
+                } else {
+                    individualError(e, file, e.target.status, response);
+                }
+            };
+
+            /**
+             * called when a file has failed uploading (server error, not upload code error)
+             * @param e
+             * @param file
+             * @param httpStatus
+             * @param httpResponse
+             */
+            var individualError = function(e, file, httpStatus, httpResponse) {
+                filesFailed.push(file);
+                filesFailed[filesFailed.length - 1].httpStatus = httpStatus;
+                filesFailed[filesFailed.length - 1].httpResponse = httpResponse;
+                if (i === files.length) {
+                    finished(e, file);
+                } else {
+                    uploadSingleFile(files[i], individualLoad, individualError, individualProgress);
+                }
+            };
+
+            /**
+             * called when a progress event occurs for a file
+             * @param e
+             * @param file
+             */
+            var individualProgress = function(e, file) {
+                if ('function' === typeof that.onProgress) {
+                    var currentFileProgress = Math.round((e.loaded / e.total) * 100);
+                    var totalProgress = Math.round((i / files.length) * 100) + Math.round(currentFileProgress * (1 / files.length));
+                    that.onProgress(e, file, i, currentFileProgress, totalProgress);
+                }
+            };
+
+            /* start uploading the first file */
+            uploadSingleFile(files[i], individualLoad, individualError, individualProgress);
+        }
     };
 };

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/js/editor.js

@@ -1 @@
-/* Folder namespace */
-impro.editor = {};
-
-impro.editor.minie10 = navigator.userAgent.indexOf('MSIE 10') > 0 || (navigator.userAgent.indexOf('Trident') > 0 && /rv:[0-9][0-9]/.test(navigator.userAgent));
-
-/* init the editor support */
-impro.editor.init = function() {
-
-    /* set a reference to the image editor */
-    impro.editor.$editor = jQuery('#impro_editor');
-    
-    /* start with the editor closed */
-    jQuery('#impro_editor_box').addClass('closed').find('.handlediv').hide();
-        
-    /* init events */
-    impro.editor.initEvents();
-    
-    /* if the visual editor is enabled in the user preferences */
-    if (jQuery('#edButtonPreview').size() > 0 || jQuery('#content-tmce').size() > 0) {
-        /* hook up the switchEditors to find out when the editor is changed */
-        /* TODO: This does not work for WordPress 3.2 */
-        try {
-            switchEditors.old_go = switchEditors.go;
-            switchEditors.go = function(id, mode) {
-                switchEditors.old_go(id, mode);
-                impro.editor.onSwitchEditor(id, mode);
-            };
-        } catch(ex) {}
-        
-        /* tinyMCE will start initialization soon */
-        var tinymce_timer = setInterval(function() {
-            if (window.tinymce && window.tinymce.getInstanceById('content')) {
-                clearInterval(tinymce_timer);
-                
-                /* prevent the user opening the image settings panel */
-                jQuery('#impro_editor_box').find('.hndle').unbind('click');
-                
-                /* initialize the editor */
-                impro.editor.onEditorInit(window.tinymce.getInstanceById('content'));
-            }
-        }, 300);
-    } else {
-        impro.err(imageproEditorL10N.enableTinyMce);
-    }
-};
-
-/* get TinyMCE */
-impro.editor.getTinyMCE = function() {
-    return tinymce.getInstanceById('content');
-};
-
-/* fires when tinymce is initialized */
-impro.editor.onEditorInit = function(editor) {
-    /* now waiting for the iframe inside to render the post and have the body */
-    var timer = setInterval(function() {
-        var body = jQuery(window.tinymce.getInstanceById('content').contentAreaContainer).find('iframe').contents().find('body');
-        if (body.size() > 0) {
-            clearInterval(timer);
-            
-            /* link the click event to tiny mce */
-            impro.editor.setTinyMCEInteractions(body, window.tinymce.getInstanceById('content'));
-            
-            /* if we're on Chrome or Safari, try to simulate the resize handles */
-            if (window.tinymce.isWebKit) {
-                impro.editor.fakeImageResize();
-            }
-        }
-    }, 300);
-};
-
-/* set the onclick event on the editor */
-impro.editor.setTinyMCEInteractions = function(body, editor) {  
-    
-    /* register drop event to catch drops */
-    setInterval(function() {
-        /* because the ondrop event is not at all reliable
-         * not to say about it's cross browser support,
-         * I used a interval checking (polling) */
-        var body = editor.dom.doc.body;
-        var thumbs = jQuery(body).find('img[src*="\\/thumb\\/phpThumb\\.php"]');
-        
-        if (thumbs.size() > 0) {
-            thumbs.each(function(i) {
-                /* get source image */
-                var thumb_w = jQuery(this).width();
-                var thumb_h = jQuery(this).height();
-                
-                var src = jQuery(this).attr('src');
-                var pic_src;
-                
-                /* get picture source */
-                var match = /\/thumb\/phpThumb\.php\?.*?&src=([^&]*)&?/i.exec(src);
-                if (match != null) {
-                    pic_src = match[1];
-                }
-                
-                /* apply picture source and dimensions */
-                if (pic_src) {
-                    jQuery(this).attr('src', pic_src).attr('data-mce-src', pic_src).attr('_mce_src', pic_src);
-                    jQuery(this).attr('width', thumb_w).attr('data-mce-width', thumb_w).attr('_mce_width', thumb_w).width(thumb_w);
-                    jQuery(this).attr('height', thumb_h).attr('data-mce-height', thumb_h).attr('_mce_height', thumb_h).height(thumb_h);
-
-                    /* open the editor, for the last one
-                    in theory, it should be JUST one, but if the user is fast enough
-                    to drag more, we should only open the editor for one, in order
-                    not to slow down the UI
-                    we open the editor by simulating a mouseup on the image */
-                    if (thumbs.length - 1 === i) {
-                        var outerThis = this;
-                        setTimeout(function() {
-                            jQuery(outerThis).trigger(impro.editor.minie10 ? 'mousedown' : 'click');
-                        }, 100);
+(function($) {
+
+    /* the minimum width and height to which images can be resized */
+    var MIN_W = 30;
+    var MIN_H = 30;
+
+    /* references to jQuery elements */
+    var $editor, $imgSize, $imgW, $imgH, $imgMaxW;
+    var $clickedImage;
+
+    /* the maximum width imposed by the current theme, if applicable */
+    var themeMaxWidth;
+
+    var init = function() {
+        /* set a reference to the image editor and other elements */
+        $editor = $('#impro_editor');
+        $imgSize = $('#impro-editor-size');
+        $imgW = $('#impro-editor-w');
+        $imgH = $('#impro-editor-h');
+        $imgMaxW = $('#impro-editor-maxwidth');
+
+        /* start with the editor closed */
+        $('#impro_editor_box').addClass('closed').find('.handlediv').hide();
+
+        /* init events */
+        initEvents();
+
+        /* if the visual editor is enabled in the user preferences */
+        if ($('#edButtonPreview').size() > 0 || $('#content-tmce').size() > 0) {
+            /* hook up the switchEditors to find out when the editor is changed */
+            /* TODO: This does not work for WordPress 3.2 */
+            try {
+                switchEditors.old_go = switchEditors.go;
+                switchEditors.go = function(id, mode) {
+                    switchEditors.old_go(id, mode);
+                    onSwitchEditor(id, mode);
+                };
+            } catch(ex) {}
+
+            /* tinyMCE will start initialization soon */
+            var tinymceInitTimer = setInterval(function() {
+                if (window.tinymce && window.tinymce.getInstanceById('content')) {
+                    clearInterval(tinymceInitTimer);
+
+                    /* prevent the user opening the image settings panel */
+                    $('#impro_editor_box').find('.hndle').unbind('click');
+
+                    /* initialize the editor */
+                    onEditorInit(window.tinymce.getInstanceById('content'));
+                }
+            }, 300);
+        } else {
+            impro.err(imageproEditorL10N.enableTinyMce);
+        }
+    };
+
+    var getTinyMCE = function() {
+        return tinymce.getInstanceById('content');
+    };
+
+    var onEditorInit = function(editor) {
+        /* now waiting for the iframe inside to render the post and have the body */
+        var timer = setInterval(function() {
+            var $body = $(getTinyMCE().contentAreaContainer).find('iframe').contents().find('body');
+            if ($body.length) {
+                clearInterval(timer);
+
+                /* link the click event to tiny mce */
+                setTinyMCEInteractions($body, getTinyMCE());
+
+                /* if we are re on Chrome or Safari, try to simulate the resize handles */
+                if (window.tinymce.isWebKit) {
+                    impro.fakeImageResize();
+                }
+            }
+        }, 300);
+    };
+
+    var setTinyMCEInteractions = function(body, editor) {
+
+        /* get max width for images, if set by the WordPress theme */
+        themeMaxWidth = getThemeMaxWidth(body);
+        if ('number' !== typeof themeMaxWidth) {
+            /* if the theme is not responsive, the responsiveness checkbox should be hidden */
+            $('#impro-editor-maxwidth-container').hide();
+        } else {
+            $('#impro-editor-maxwidth-info').html($('#impro-editor-maxwidth-info').html().replace('%maxwidth%', themeMaxWidth));
+        }
+
+        /* register drop event to catch drops */
+        setInterval(function() {
+            /* because the ondrop event is not at all reliable
+             * not to say about its cross browser support,
+             * I used a interval checking (polling) */
+            var body = editor.dom.doc.body;
+            var thumbs = $(body).find('img[src*="\\/thumb\\/phpThumb\\.php"]');
+
+            if (thumbs.size() > 0) {
+                thumbs.each(function(i) {
+                    /* get source image */
+                    var thumb_w = $(this).width();
+                    var thumb_h = $(this).height();
+
+                    var src = $(this).attr('src');
+                    var pic_src;
+
+                    /* get picture source */
+                    var match = /\/thumb\/phpThumb\.php\?.*?&src=([^&]*)&?/i.exec(src);
+                    if (match != null) {
+                        pic_src = match[1];
                     }
-                }
-            });
-        }
-    }, 800);
-        
-    /* set the click event on body, then limit by images */
-    body.bind(impro.editor.minie10 ? 'mousedown' : 'click', function(ev) {
-        var target = jQuery(ev.target);
-        /* only process image clicks */
-        if (target.is('img')) {
-            impro.editor.showEditor(target);
-        } else {
-            jQuery('#impro_editor_box').addClass('closed');
-        }
-        return true;
-    });
-};
-
-/* this is triggered when the picture is resized */
-impro.editor.onMCEResize = function(ed, img) {
-    
-};
-
-/* show the editor and populate the fields */
-impro.editor.showEditor = function(target) {
-    
-    var current_src = jQuery(target).attr('src');
-    var current_domain = document.location.protocol + '//' + document.location.host;
-    
-    /* if the image begins with http://my.domain/, it was uploaded with classic wordpress upload. ask for migrating to image pro */
-    if (current_src.indexOf(current_domain + '/') == 0) {
-        if (confirm(imageproEditorL10N.convertToImagePro)) {
-            var new_src = current_src.replace(current_domain, '');
-            jQuery(target).attr('src', new_src).attr('data-mce-src', new_src).attr('_mce_src', new_src);
-            impro.editor.showEditor(target);
-        }
-        return;
-    }
-    
-    /* if does not begin with /, it means it's from an external domain */
-    if (current_src[0] != "/") {
-        impro.err(imageproEditorL10N.differentDomain);
-        return;
-    }
-    
-    /* open the editor panel */
-    jQuery('#impro_editor_box').removeClass('closed');
-    
-    /* remember the clicked image (currently in editor) */
-    impro.editor.$clickedImage = target;
-    
-    /* parse clicked image's path */
-    var path = impro.editor.parseUrl(target.attr('src'));
-    
-    /* remember the old source */
-    impro.editor.$clickedImage.get(0).old_src = target.attr('src');
-    
-    /* show thumb image */
-    path['w'] = 50;
-    path['h'] = 50;
-    path['zc'] = 0; 
-    var url = impro.editor.createThumbUrl(path);
-    impro.editor.$editor.find('.thumb').attr('src', url);
-    
-    /* set alt and title */
-    jQuery('.impro_alt').val(target.attr('alt'));
-    jQuery('.impro_title').val(target.attr('title'));
-    
-    /* set align mode */
-    var align = "alignnone";
-    if (target.hasClass('alignleft')) {
-        align = "alignleft";
-    } else if (target.hasClass('aligncenter')) {
-        align = "aligncenter";
-    } else if (target.hasClass('alignright')) {
-        align = "alignright";
-    }
-    jQuery('.impro_align').val(align);
-    
-    /* set link */
-    if (impro.editor.$clickedImage.parent().is('a[href]')) {
-        jQuery('.impro_link').attr('checked', 'checked');
-    } else {
-        jQuery('.impro_link').removeAttr('checked');
-    }
-};
-
-/* change a given img element to what is contained in props */ 
-impro.editor.resize = function(el, props) {
-    if (!jQuery(el).is('img')) {    /* el must be an img tag */
-        return null;
-    }
-    
-    if (!(el instanceof jQuery)) {  /* make the element jQuery if not already */
-        el = jQuery(el);
-    }
-    
-    var el_dom = el.get(0); /* also keep a DOM reference */
-    
-    var current_props = impro.editor.parseUrl(el.attr('src'));  /* get the current properties */
-    
-    /* if we could not extract properties from the source, get them from the image tag properties */
-    if (!current_props['w']) {
-        current_props['w'] = el_dom.width || el.width();
-    }
-    if (!current_props['h']) {
-        current_props['h'] = el_dom.height || el.height();
-    }
-    
-    /* copy properties */
-    if (props['src']) {
-        current_props['src'] = props['src'];
-    }
-    if (props['w']) {
-        current_props['w'] = props['w'];
-    }
-    if (props['h']) {
-        current_props['h'] = props['h'];
-    }
-    if (props['zc']) {
-        current_props['zc'] = props['zc'];
-    }
-    
-    var url = impro.editor.createThumbUrl(current_props);
-    
-    /* set preview */
-    el.attr('src', props['src']);
-    el.attr('width', props['w']);
-    el.attr('height', props['h']);
-    
-    /* save */
-    el.attr('_mce_src', props['src']);
-    el.attr('_mce_width', props['w']);
-    el.attr('_mce_height', props['h']);
-    el.attr('data-mce-src', props['src']);
-    el.attr('data-mce-width', props['w']);
-    el.attr('data-mce-height', props['h']);
-};
-
-impro.editor.initEvents = function() {
-    var changeProps = function() {
-        /* preview */
-        impro.editor.$clickedImage.attr('alt', jQuery('.impro_alt').val());
-        impro.editor.$clickedImage.attr('title', jQuery('.impro_title').val());
-        impro.editor.$clickedImage.removeClass('alignnone').removeClass('alignleft').removeClass('aligncenter').removeClass('alignright').addClass(jQuery('.impro_align').val());
-        
-        /* save */
-        impro.editor.$clickedImage.attr('_mce_alt', jQuery('.impro_alt').val());
-        impro.editor.$clickedImage.attr('_mce_title', jQuery('.impro_title').val());
-        impro.editor.$clickedImage.attr('_mce_class', impro.editor.$clickedImage.attr('class'));
-    };
-    
-    jQuery('.impro_align, .impro_alt, .impro_title').change(changeProps).keyup(changeProps);
-    
-    jQuery('.impro_link').click(function() {
-        if (jQuery(this).is(':checked')) {
-            tinyMCE.activeEditor.execCommand('mceInsertLink', false, { href: impro.editor.$clickedImage.attr('src'), target: '_blank' });
-        } else {
-            tinyMCE.activeEditor.execCommand('mceInsertLink', false, '');
-        }       
-    });
-    
-    jQuery('.impro_choose').click(function() {
-        jQuery('#impro_folder_box #vimg-list').addClass('impro_choosebg');
-        jQuery.scrollTo('#impro_folder_box',800);
-        impro.editor.$chosen = impro.editor.$clickedImage;
-    });
-};
-
-impro.editor.createThumbUrl = function(params) {
-    var path = impro.url + '/src/thumb/phpThumb.php?';
-    var tmp = [];
-    for (var p in params) {
-        if (['w','h','src','zc','q'].indexOf(p) === -1) {
-            continue;
-        }
-        if (params.hasOwnProperty(p)) {
-            tmp.push(p+'='+params[p]);
-        }
-    }
-    return path + tmp.join('&');
-}
-
-/* fires when the editor is changed */
-impro.editor.onSwitchEditor = function(id, mode) {
-    
-};
-
-impro.editor.parseUrl = function(url) {
-    var path = {};
-    
-    /* if begins with http(s?):// protocol */
-    var is_http = /^https?:\/\/$/i.test(url);
-    /* if contains phpThumb.php */
-    var is_thumb = url.indexOf('/src/thumb/phpThumb.php') !== -1;
-    
-    if (is_thumb) {
-        path['thumb'] = true;
-        
-        url.split('?')[1].split('&').forEach(function(v){
-            var tmp = v.split('=');
-            
-            /* we have the width, height, quality and zoom-crop */
-            if (tmp[0] === 'w' || tmp[0] === 'h' || tmp[0] === 'q' || tmp[0] === 'zc') {
-                tmp[1] = parseInt(tmp[1], 10);
-                /* not a numeric value, don't consider */
-                if (isNaN(tmp[1])) {
-                    return;
-                }
-            }
-            
-            path[tmp[0]] = tmp[1];
-        });
-        
-        path['url'] = url;
-    } else {
-        path['thumb'] = false;
-        path['url'] = url;
-        path['src'] = path['url'];
-    }
-    
-    return path;
-};
-
-impro.editor.fakeImageResize = function () {
-    var editor = tinyMCE.editors[0];
-    var dom = editor.dom;
-    var selection = editor.selection;
-    var VK = tinyMCE.VK;
-    var settings = editor.settings;
-    
-    var selectedElmX, selectedElmY, selectedElm, selectedElmGhost, selectedHandle, startX, startY, startW, startH, ratio,
-        resizeHandles, width, height, rootDocument = document, editableDoc = editor.getDoc();
-
-    if (settings.webkit_fake_resize === true) {
-        alert('It seems that you are on a WebKit Browser (Chrome / Safari) '+
-              'and your configuration has webkit_fake_resize = true.' +
-              "\n\n" +
-              "Please turn it off for the Image Pro Plugin to function correctly under WebKit browsers.\n\n" + 
-              "Contact us for more information!");
-        return;
-    }
-    
-    /*if (!settings.object_resizing || settings.webkit_fake_resize === false) {
-        return;
-    }*/
-
-    // Try disabling object resizing if WebKit implements resizing in the future
-    try {
-        editor.getDoc().execCommand("enableObjectResizing", false, false);
-    } catch (ex) {
-        // Ignore
-    }
-
-    // Details about each resize handle how to scale etc
-    resizeHandles = {
-        // Name: x multiplier, y multiplier, delta size x, delta size y
-        n: [.5, 0, 0, -1],
-        e: [1, .5, 1, 0],
-        s: [.5, 1, 0, 1],
-        w: [0, .5, -1, 0],
-        nw: [0, 0, -1, -1],
-        ne: [1, 0, 1, -1],
-        se: [1, 1, 1, 1],
-        sw : [0, 1, -1, 1]
-    };
-
-    function resizeElement(e) {
-        var deltaX, deltaY;
-
-        // Calc new width/height
-        deltaX = e.screenX - startX;
-        deltaY = e.screenY - startY;
-
-        // Calc new size
-        width = deltaX * selectedHandle[2] + startW;
-        height = deltaY * selectedHandle[3] + startH;
-
-        // Never scale down lower than 5 pixels
-        width = width < 5 ? 5 : width;
-        height = height < 5 ? 5 : height;
-
-        // Constrain proportions when modifier key is pressed or if the nw, ne, sw, se corners are moved on an image
-        if (VK.modifierPressed(e) || (selectedElm.nodeName == "IMG" && selectedHandle[2] * selectedHandle[3] !== 0)) {
-            width = Math.round(height / ratio);
-            height = Math.round(width * ratio);
-        }
-
-        // Update ghost size
-        dom.setStyles(selectedElmGhost, {
-            width: width,
-            height: height
-        });
-
-        // Update ghost X position if needed
-        if (selectedHandle[2] < 0 && selectedElmGhost.clientWidth <= width) {
-            dom.setStyle(selectedElmGhost, 'left', selectedElmX + (startW - width));
-        }
-
-        // Update ghost Y position if needed
-        if (selectedHandle[3] < 0 && selectedElmGhost.clientHeight <= height) {
-            dom.setStyle(selectedElmGhost, 'top', selectedElmY + (startH - height));
-        }
-    }
-
-    function endResize() {
-        function setSizeProp(name, value) {
-            if (value) {
-                // Resize by using style or attribute
-                /*if (selectedElm.style[name] || !editor.schema.isValid(selectedElm.nodeName.toLowerCase(), name)) {*/
-                if (selectedElm.style[name] || !editor.schema.isValidChild(selectedElm.nodeName.toLowerCase(), name)) {
-                    dom.setStyle(selectedElm, name, value);
-                } else {
-                    dom.setAttrib(selectedElm, name, value);
-                }
-            }
-        }
-
-        // Set width/height properties
-        setSizeProp('width', width);
-        setSizeProp('height', height);
-        dom.setAttrib(selectedElm, 'data-mce-width', width);
-        dom.setAttrib(selectedElm, 'data-mce-height', height);
-        dom.setAttrib(selectedElm, 'width', width);
-        dom.setAttrib(selectedElm, 'height', height);
-
-        dom.unbind(editableDoc, 'mousemove', resizeElement);
-        dom.unbind(editableDoc, 'mouseup', endResize);
-
-        if (rootDocument != editableDoc) {
-            dom.unbind(rootDocument, 'mousemove', resizeElement);
-            dom.unbind(rootDocument, 'mouseup', endResize);
-        }
-
-        // Remove ghost and update resize handle positions
-        dom.remove(selectedElmGhost);
-        showResizeRect(selectedElm);
-    }
-
-    function showResizeRect(targetElm) {
-        var position, targetWidth, targetHeight;
-
-        hideResizeRect();
-
-        // Get position and size of target
-        position = dom.getPos(targetElm);
-        selectedElmX = position.x;
-        selectedElmY = position.y;
-        targetWidth = targetElm.offsetWidth;
-        targetHeight = targetElm.offsetHeight;
-
-        // Reset width/height if user selects a new image/table
-        if (selectedElm != targetElm) {
-            selectedElm = targetElm;
-            width = height = 0;
-        }
-
-        tinymce.each(resizeHandles, function(handle, name) {
-            var handleElm;
-
-            // Get existing or render resize handle
-            handleElm = dom.get('mceResizeHandle' + name);
-            if (!handleElm) {
-                handleElm = dom.add(editableDoc.documentElement, 'div', {
-                    id: 'mceResizeHandle' + name,
-                    'class': 'mceResizeHandle',
-                    style: 'cursor:' + name + '-resize; margin:0; padding:0'
-                });
-
-                dom.bind(handleElm, 'mousedown', function(e) {
-                    e.preventDefault();
-
-                    endResize();
-
-                    startX = e.screenX;
-                    startY = e.screenY;
-                    startW = selectedElm.clientWidth;
-                    startH = selectedElm.clientHeight;
-                    ratio = startH / startW;
-                    selectedHandle = handle;
-
-                    selectedElmGhost = selectedElm.cloneNode(true);
-                    dom.addClass(selectedElmGhost, 'mceClonedResizable');
-                    dom.setStyles(selectedElmGhost, {
-                        left: selectedElmX,
-                        top: selectedElmY,
-                        margin: 0
-                    });
-
-                    editableDoc.documentElement.appendChild(selectedElmGhost);
-
-                    dom.bind(editableDoc, 'mousemove', resizeElement);
-                    dom.bind(editableDoc, 'mouseup', endResize);
-
-                    if (rootDocument != editableDoc) {
-                        dom.bind(rootDocument, 'mousemove', resizeElement);
-                        dom.bind(rootDocument, 'mouseup', endResize);
-                    }
-                });
-            } else {
-                dom.show(handleElm);
-            }
-
-            // Position element
-            dom.setStyles(handleElm, {
-                left: (targetWidth * handle[0] + selectedElmX) - (handleElm.offsetWidth / 2),
-                top: (targetHeight * handle[1] + selectedElmY) - (handleElm.offsetHeight / 2)
-            });
-        });
-
-        // Only add resize rectangle on WebKit and only on images
-        if (!tinymce.isOpera && selectedElm.nodeName == "IMG") {
-            selectedElm.setAttribute('data-mce-selected', '1');
-        }
-    }
-
-    function hideResizeRect() {
-        if (selectedElm) {
-            selectedElm.removeAttribute('data-mce-selected');
-        }
-
-        for (var name in resizeHandles) {
-            dom.hide('mceResizeHandle' + name);
-        }
-    }
-
-    // Add CSS for resize handles, cloned element and selected
-    var css = '.mceResizeHandle {' +
-        'position: absolute;' +
-        'border: 1px solid black;' +
-        'background: #FFF;' +
-        'width: 5px;' +
-        'height: 5px;' +
-        'z-index: 10000' +
-    '}' +
-    '.mceResizeHandle:hover {' +
-        'background: #000' +
-    '}' +
-    'img[data-mce-selected] {' +
-        'outline: 1px solid black' +
-    '}' +
-    'img.mceClonedResizable, table.mceClonedResizable {' +
-        'position: absolute;' +
-        'outline: 1px dashed black;' +
-        'opacity: .5;' +
-        'z-index: 10000' +
-    '}';
-    
-    var el = editor.getDoc().createElement('style');
-    el.innerHTML = css;
-    editor.getDoc().getElementsByTagName('head')[0].appendChild(el);
-
-    function updateResizeRect() {
-        var controlElm = dom.getParent(selection.getNode(), 'table,img');
-
-        // Remove data-mce-selected from all elements since they might have been copied using Ctrl+c/v
-        tinymce.each(dom.select('img[data-mce-selected]'), function(img) {
-            img.removeAttribute('data-mce-selected');
-        });
-
-        if (controlElm) {
-            showResizeRect(controlElm);
-        } else {
-            hideResizeRect();
-        }
-    }
-
-    // Show/hide resize rect when image is selected
-    editor.onNodeChange.add(updateResizeRect);
-
-    // Fixes WebKit quirk where it returns IMG on getNode if caret is after last image in container
-    dom.bind(editableDoc, 'selectionchange', updateResizeRect);
-
-    // Remove the internal attribute when serializing the DOM
-    editor.serializer.addAttributeFilter('data-mce-selected', function(nodes, name) {
-        var i = nodes.length;
-
-        while (i--) {
-            nodes[i].attr(name, null);
-        }
-    });
-};
+
+                    /* apply picture source and dimensions */
+                    if (pic_src) {
+                        $(this).attr('src', pic_src).attr('data-mce-src', pic_src).attr('_mce_src', pic_src);
+                        $(this).attr('width', thumb_w).attr('data-mce-width', thumb_w).attr('_mce_width', thumb_w);
+                        $(this).attr('height', thumb_h).attr('data-mce-height', thumb_h).attr('_mce_height', thumb_h);
+
+                        /* open the editor, for the last one
+                         in theory, it should be JUST one, but if the user is fast enough
+                         to drag more, we should only open the editor for one, in order
+                         not to slow down the UI
+                         we open the editor by simulating a mouseup on the image */
+                        if (thumbs.length - 1 === i) {
+                            var outerThis = this;
+                            setTimeout(function() {
+                                $(outerThis).trigger(impro.minIE10 ? 'mousedown' : 'click');
+                            }, 100);
+                        }
+                    }
+                });
+            }
+        }, 300);
+
+        /* set the click event on body, then limit by images */
+        body.bind(impro.minIE10 ? 'mousedown' : 'click', function(ev) {
+            var target = $(ev.target);
+            /* only process image clicks */
+            if (target.is('img')) {
+                showEditor(target);
+            } else {
+                closeEditor();
+            }
+            return true;
+        });
+    };
+
+    var openEditor = function() {
+        $('#impro_editor_box').removeClass('closed');
+    };
+
+    var closeEditor = function() {
+        $('#impro_editor_box').addClass('closed');
+    };
+
+    /**
+     * populates the editor in the right with the properties of the currently selected image
+     * @param target the clicked image, as a jQuery element
+     */
+    var showEditor = function(target) {
+
+        var currentSrc = $(target).attr('src');
+        var currentDomain = document.location.protocol + '//' + document.location.host;
+
+        /* if the image begins with http://my.domain/, it was uploaded with classic wordpress upload,
+        or it was just moved around the document so it got a http:// at the beginning */
+        if (0 === currentSrc.indexOf(currentDomain + '/')) {
+            currentSrc = currentSrc.replace(currentDomain, '');
+            target.attr('src', currentSrc).attr('data-mce-src', currentSrc).attr('_mce_src', currentSrc);
+        }
+
+        /* if does not begin with /, it means it is from an external domain */
+        if (currentSrc[0] != "/") {
+            impro.err(imageproEditorL10N.differentDomain);
+            return;
+        }
+
+        /* open the editor panel */
+        openEditor();
+
+        /* remember the clicked image (currently in editor) */
+        $clickedImage = target;
+
+        /* remove the inline styles */
+        $clickedImage.css('width', '');
+        $clickedImage.css('height', '');
+        $clickedImage.removeAttr('data-mce-style');
+
+        /* remember the old source */
+        $clickedImage.data('oldSrc', target.attr('src'));
+
+        /* show thumb image in the panel to the right */
+        $('#impro-preview').css({
+            'background-image': 'url("' + target.attr('src') + '")'
+        });
+
+        /* set alt and title */
+        $('.impro_alt').val(target.attr('alt'));
+        $('.impro_title').val(target.attr('title'));
+
+        /* set align mode */
+        var align = "alignnone";
+        if (target.hasClass('alignleft')) {
+            align = "alignleft";
+        } else if (target.hasClass('aligncenter')) {
+            align = "aligncenter";
+        } else if (target.hasClass('alignright')) {
+            align = "alignright";
+        }
+        $('.impro_align').val(align);
+
+        /* set link */
+        if ($clickedImage.parent().is('a[href]')) {
+            $('.impro_link').attr('checked', 'checked');
+        } else {
+            $('.impro_link').removeAttr('checked');
+        }
+
+        /* decide if responsivness checkbox should be displayed */
+        var hasInlineMaxWidthNone = /max-width\s*:\s*none/.test(target[0].style.cssText);
+
+        /* if this image has a responsiveness setting attached */
+        if (hasInlineMaxWidthNone || 'number' === typeof themeMaxWidth) {
+            $('#impro-editor-maxwidth').show();
+            if (hasInlineMaxWidthNone) {
+                $('#impro-editor-maxwidth').attr('checked', 'checked');
+            } else {
+                $('#impro-editor-maxwidth').removeAttr('checked');
+            }
+        } else {
+            $('#impro-editor-maxwidth').hide();
+        }
+
+        /* set the size preset */
+        selectCorrectPreset($clickedImage.attr('width'), $clickedImage.attr('height'));
+
+        /* set the height and width */
+        $imgW.val($clickedImage.attr('width'));
+        $imgH.val($clickedImage.attr('height'));
+    };
+
+    /* updates the image preset select box with the correct setting depending on the image size */
+    var selectCorrectPreset = function(w, h) {
+        /* set the size preset */
+        var fullWidth = $clickedImage[0].naturalWidth;
+        var fullHeight = $clickedImage[0].naturalHeight;
+
+        /* the value to select at the end */
+        var valueToSelect;
+
+        /* if the image is the full size */
+        if (fullWidth == w && fullHeight == h) {
+            valueToSelect = '__full';
+        }
+
+        /* if not yet chosen */
+        if (!valueToSelect) {
+            /* search among the presets */
+            $imgSize.find('option[data-preset-width]').each(function() {
+                var presetWidth = parseInt($(this).attr('data-preset-width'), 10);
+                if (presetWidth == w) {
+                    valueToSelect = $(this).attr('value');
+                    return false;
+                }
+            });
+        }
+
+        /* if not yet chosen */
+        if (!valueToSelect) {
+            if ('number' === typeof themeMaxWidth && w == themeMaxWidth && !$imgMaxW.is(':checked')) {
+                valueToSelect = '__full';
+            }
+        }
+
+        /* if not yet chosen */
+        if (!valueToSelect) {
+            valueToSelect = '__custom';
+        }
+
+        /* apply the selected value */
+        $imgSize.val(valueToSelect);
+    }
+
+    /**
+     * gets the current WordPress theme max-width, as set by its CSS stylesheets
+     * @param $tinyMCEBody the reference to the jQuery body element tag inside the TinyMCE iframe
+     * @returns {number|undefined} the maximum width recommended by the theme, or undefined if not defined
+     */
+    var getThemeMaxWidth = function($tinyMCEBody) {
+        var tempImgMaxWidthTest = $('<img />').appendTo($tinyMCEBody);
+        var tempMaxWidth = tempImgMaxWidthTest.css('max-width');
+        tempImgMaxWidthTest.remove();
+        tempImgMaxWidthTest = null;
+
+        if ('string' === typeof tempMaxWidth) {
+            /* if it is given as pixels (eg. 474px), return it */
+            if (tempMaxWidth.indexOf('px') > -1) {
+                tempMaxWidth = parseInt(tempMaxWidth, 10);
+                if (!isNaN(tempMaxWidth)) {
+                    return tempMaxWidth;
+                }
+            } else if (tempMaxWidth.indexOf('%') > -1) {    /* if it is given as percent */
+                /* look for a pixel value on its parent body */
+                tempMaxWidth = $tinyMCEBody.css('max-width');
+                /* if it is defined in pixels, return it */
+                if ('string' === typeof tempMaxWidth && tempMaxWidth.indexOf('px') > -1) {
+                    tempMaxWidth = parseInt(tempMaxWidth, 10);
+                    if (!isNaN(tempMaxWidth)) {
+                        return tempMaxWidth;
+                    }
+                }
+            }
+        }
+    };
+
+    var getPresetSizeFor = function(presetId) {
+        var fullWidth = $clickedImage[0].naturalWidth;
+        var fullHeight = $clickedImage[0].naturalHeight;
+        var proportion = fullWidth / fullHeight;
+
+        if ('__full' === presetId) {
+            return {
+                width: fullWidth,
+                height: fullHeight
+            };
+        } else if ('__custom' === presetId) {
+            return {
+                width: parseInt($clickedImage.attr('width'), 10),
+                height: parseInt($clickedImage.attr('height'), 10)
+            };
+        } else {
+            var $opt = $imgSize.find('option[value="' + presetId + '"]');
+            return {
+                width: parseInt($opt.attr('data-preset-width'), 10),
+                height: Math.round(parseInt($opt.attr('data-preset-width'), 10) / proportion)
+            }
+        }
+    };
+
+    var setImageSize = function(newWidth, newHeight) {
+        /* set image dimensions */
+        $clickedImage.attr('width', newWidth).attr('data-mce-width', newWidth).attr('_mce_width', newWidth);
+        $clickedImage.attr('height', newHeight).attr('data-mce-height', newHeight).attr('_mce_height', newHeight);
+
+        /* clear old inline styles, as they interfere with responsiveness */
+        $clickedImage.css('width', '');
+        $clickedImage.css('height', '');
+
+        /* update the resizing rectangle to match the new image dimension */
+        if (window.tinymce.isWebKit) {
+            impro.updateResizeRect();
+        }
+    };
+
+    /**
+     * This function is triggered when any UI event that changes
+     * a property of the image occurs from the Image Editor panel
+     * in the right, and inside this function, action is taken
+     * depending of the input field that changed. At the end, the
+     * selected image in the post editor is updated with the new
+     * settings
+     */
+    var updateImageSettings = function() {
+        /* get the current width and height of the image */
+        var newWidth = parseInt($clickedImage.attr('width'), 10);
+        var newHeight = parseInt($clickedImage.attr('height'), 10);
+        /* get the full width and height (the original size) of the image */
+        var fullWidth = $clickedImage[0].naturalWidth;
+        var fullHeight = $clickedImage[0].naturalHeight;
+        /* the max-width value of the image */
+        var maxWidth;
+        /* compute the proportion between the width and the height of the image */
+        var proportion = fullWidth / fullHeight;
+
+        /* if we are changing the size preset */
+        if (this.is($imgSize)) {
+            /* get the preset size object */
+            var presetSize = getPresetSizeFor($imgSize.val());
+            newWidth = presetSize.width;
+            newHeight = presetSize.height;
+
+            /* if the responsiveness checkbox is checked */
+            if ($imgMaxW.is(':checked')) {
+                maxWidth = 'none';
+            } else {
+                maxWidth = '';
+                /* resize to max-width */
+                if ('number' === typeof themeMaxWidth && newWidth > themeMaxWidth) {
+                    newWidth = themeMaxWidth;
+                    newHeight = parseInt(newWidth / proportion, 10);
+                }
+            }
+        }
+
+        /* if we are toggling the responsiveness checkbox */
+        if (this.is($imgMaxW)) {
+            if ($imgMaxW.is(':checked')) {
+                maxWidth = 'none';
+                /* get the width from the manual size input */
+                /* if it is full size or other size (except custom), take it from the dropdown */
+                if ('__custom' !== $imgSize.val()) {
+                    /* get the preset size object */
+                    var presetSize = getPresetSizeFor($imgSize.val());
+                    newWidth = presetSize.width;
+                    newHeight = presetSize.height;
+                } else {
+                    newWidth = $imgW.val();
+                    newHeight = parseInt(newWidth / proportion, 10);
+                }
+            } else {
+                maxWidth = '';
+                /* resize to max-width */
+                if ('number' === typeof themeMaxWidth && newWidth > themeMaxWidth) {
+                    newWidth = themeMaxWidth;
+                    newHeight = parseInt(newWidth / proportion, 10);
+                }
+            }
+        }
+
+        /* if we are changing the size manually */
+        if (this.is($imgW) || this.is($imgH)) {
+            if (this.is($imgW)) {
+                newWidth = parseInt(this.val(), 10);
+                if (!isNaN(newWidth)) {
+                    newHeight = parseInt(newWidth / proportion);
+                }
+            } else if (this.is($imgH)) {
+                newHeight = parseInt(this.val(), 10);
+                if (!isNaN(newHeight)) {
+                    newWidth = parseInt(newHeight * proportion);
+                }
+            }
+
+            /* any action on the custom fields should change the size dropdown to custom */
+            if ('__custom' !== $imgSize.val()) {
+                $imgSize.val('__custom');
+            }
+        }
+
+        /* set image dimensions */
+        if (newWidth && newHeight) {
+
+            /* if it is too small, just add an error class */
+            if (newWidth < MIN_W || newHeight < MIN_H) {
+                $imgW.add($imgH).addClass('impro-editor-wh-error');
+                return;
+            } else if ('number' === typeof themeMaxWidth && themeMaxWidth < newWidth && !$imgMaxW.is(':checked')) {
+                $imgW.add($imgH).addClass('impro-editor-wh-error');
+                return;
+            } else {
+                $imgW.add($imgH).removeClass('impro-editor-wh-error');
+            }
+
+            /* change image size */
+            setImageSize(newWidth, newHeight);
+
+            /* update the width/height inputs */
+            $imgW.val(newWidth);
+            $imgH.val(newHeight);
+        }
+        /* set the max-width */
+        if ('none' === maxWidth || '' === maxWidth) {
+            $clickedImage.css('max-width', maxWidth);
+            /* also remove it from data-mce-style, as it transmits it further and we do not need it */
+            if ('' === maxWidth) {
+                var dataMCEStyle = $clickedImage.attr('data-mce-style');
+                if ('string' === typeof dataMCEStyle) {
+                    dataMCEStyle = dataMCEStyle.replace(/max-width\s*:\s*none\s*;?/g, '');
+                    $clickedImage.attr('data-mce-style', dataMCEStyle);
+                }
+            }
+        }
+    };
+
+    var initEvents = function() {
+
+        $imgSize.bind('change', function(ev) {
+            updateImageSettings.call($(this));
+        });
+
+        $imgMaxW.bind('change', function(ev) {
+            updateImageSettings.call($(this));
+        });
+
+        $imgW.add($imgH).bind('keyup change', function(ev) {
+            updateImageSettings.call($(this));
+            ev.stopImmediatePropagation(); /* keyup and change are bound. we only need one to get it */
+        });
+
+        /* there is no consistent and 100% correct way to be notified on the image's resize. that's why we use polling */
+        var tInterval = 0;
+        tInterval = setInterval(function() {
+            if ($clickedImage && $clickedImage.length) {
+                /* do not refresh manual size inputs while user is making changes (is in focus there) */
+                if ($imgW.is(':focus') || $imgH.is(':focus')) {
+                    return;
+                }
+
+                if (!$clickedImage[0].parentNode) {
+                    closeEditor();
+                }
+
+                /* get previous size data */
+                var prevW = $clickedImage.data('prevW');
+                var prevH = $clickedImage.data('prevH');
+                var currentW = $clickedImage.width();
+                var currentH = $clickedImage.height();
+
+                /* DeMorgan Law. if no size previously or different sizes, update UI and image data size cache */
+                if (((prevW !== undefined && prevH !== undefined) && (prevW !== currentW || prevH !== currentH)) || (!(prevW !== undefined && prevH !== undefined))) {
+                    /* >0 is used to not intercept the images that are just being added, until they get loaded */
+                    /* prevent resizing to very small images - disabled for the moment because of a bug
+                    if ((currentW < MIN_W || currentH < MIN_H) && (currentW > 0 || currentH > 0)) {
+                        var fullWidth = $clickedImage[0].naturalWidth;
+                        var fullHeight = $clickedImage[0].naturalHeight;
+                        var proportion = fullWidth / fullHeight;
+
+                        if (currentW < currentH) {
+                            currentW = MIN_W + 20;
+                            currentH = currentW / proportion;
+                        } else {
+                            currentH = MIN_H + 20;
+                            currentW = currentH * proportion;
+                        }
+
+                        setImageSize(currentW, currentH);
+
+                        alert('You cannot resize an image to a size smaller than ' + MIN_W + 'x' + MIN_H + ' pixels!');
+                    }
+                    //*/
+
+                    /* round values */
+                    currentW = Math.round(currentW);
+                    currentH = Math.round(currentH);
+
+                    /* set custom sizes */
+                    $imgW.val(currentW);
+                    $imgH.val(currentH);
+                    $clickedImage.data('prevW', currentW);
+                    $clickedImage.data('prevH', currentH);
+
+                    /* set the size preset */
+                    selectCorrectPreset(currentW, currentH);
+                }
+            }
+        }, 200);
+
+
+
+
+        var changeProps = function(ev) {
+            /* preview */
+            $clickedImage.attr('alt', $('.impro_alt').val());
+            $clickedImage.attr('title', $('.impro_title').val());
+            $clickedImage.removeClass('alignnone alignleft aligncenter alignright').addClass($('.impro_align').val());
+
+            /* save */
+            $clickedImage.attr('_mce_alt', $('.impro_alt').val());
+            $clickedImage.attr('_mce_title', $('.impro_title').val());
+            $clickedImage.attr('_mce_class', $clickedImage.attr('class'));
+
+            ev.stopImmediatePropagation();
+        };
+
+        $('.impro_align, .impro_alt, .impro_title').bind('change keyup', changeProps);
+
+        $('.impro_link').click(function() {
+            if ($(this).is(':checked')) {
+                tinyMCE.activeEditor.execCommand('mceInsertLink', false, { href: $clickedImage.attr('src'), target: '_blank' });
+            } else {
+                tinyMCE.activeEditor.execCommand('mceInsertLink', false, '');
+            }
+        });
+    };
+
+    var onSwitchEditor = function(id, mode) {
+
+    };
+
+    /* public methods */
+    $.extend(this, {
+        init: init,
+        getTinyMCE: getTinyMCE
+    });
+}).call(impro.editor = {}, jQuery);
 
 jQuery(function() {

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/js/folder.js

@@ -1 @@
-/* Folder namespace */
-impro.folder = {toolbar:{}};
-
-/* init folder view */
-impro.folder.init = function() {
-    impro.folder.loadImages();
-    
-    impro.folder.initEvents();
-};
-
-/* add to editor action */
-impro.folder.toolbar.add = function(li) {
-    var content = null;
-    var ext = li.attr('data-ext').toLowerCase();
-    var id  = li.attr('data-attachment-id');
-    
-    var addContent = function(ct) {
-        impro.editor.getTinyMCE().execCommand('mceInsertContent',false, ct);
-    };
-    
-    /* if we add an image */
-    if (['jpg','jpeg','gif','png'].indexOf(ext) !== -1) {
-        var src = li.find('img').attr('src');
-        content = '<img src="' + src + '" />';
-        addContent(content);
-    } else {    /* for any other extension, default is link, but we can easily override */
-        jQuery.getJSON(impro.url + '/src/request/getattachmentdata.php?id=' + id, function(json) {  /* get all the data of the attachment */
-            if (impro.folder.custom && typeof impro.folder.custom['extension_' + ext] === 'function') { /* if user defined a custom function, use it */
-                content = impro.folder.custom['extension_' + ext].call(this, json, li);
-            } else {    /* if not, just make a link */
-                content = ' <a href="' + json.attachment_url + '" target="_blank">' + json.post_title + '</a> ';
-            }
-            addContent(content);
-        });
-    }   
-    
-    return false;
-};
-
-/* edit in library */
-impro.folder.toolbar.library = function(li) {
-    var content = null; 
-    var att_id = li.attr('data-attachment-id');
-
-    content = impro.admin_url + 'media.php?attachment_id=' + att_id + '&action=edit';   /* build media edit link */
-    
-    jQuery('#vimg-toolbar a[data-action=library]').attr('href', content).attr('target', '_blank');  /* set link */
-    
-    return true;    /* return true, such that the href link will be used */
-}
-
-/* open */
-impro.folder.toolbar.open = function(li) {
-    var content = null; 
-    var id = li.attr('data-attachment-id');
-
-    jQuery.getJSON(impro.url + '/src/request/getattachmentdata.php?id=' + id, function(json) {  /* get all the data of the attachment */
-        var result = window.open(json.attachment_url, 'op');
-        if (!result) {
-            impro.err(imageproFolderL10N.popupOpenError);
-        }
-    }); 
-    
-    return false;
-};
-
-/* show link */
-impro.folder.toolbar.link = function(li) {
-    var content = null; 
-    var id = li.attr('data-attachment-id');
-
-    jQuery.getJSON(impro.url + '/src/request/getattachmentdata.php?id=' + id, function(json) {  /* get all the data of the attachment */
-        prompt(imageproFolderL10N.attachmentLink, json.attachment_url);
-    }); 
-    
-    return false;
-};
-
-/* delete */
-impro.folder.toolbar.remove = function(li) {
-    if (confirm(imageproFolderL10N.deleteAttachmentConfirmation)) {
-        jQuery.post(impro.url + '/src/request/deleteattachment.php', {
-            id: li.attr('data-attachment-id'),
-            _ajax_nonce: impro.nonce.deleteNonce
-        }, function(data) {
-            if (data.ok) {
-                impro.info(data.data.msg);
-                impro.folder.loadImages();
-            } else {
-                impro.err(data.data.msg);
-            }
-        });
-    }
-    return false;
-};
-
-/* init the events */
-impro.folder.initEvents = function() {
-    
-    var timerID = 0;
-    
-    /* searching text event */
-    jQuery('#vimg-search').keyup(function(ev) {
-        if (ev.which && (/[a-zA-Z0-9 \.,;-_]/.test(String.fromCharCode(ev.which)) || ev.which === 8)) {
-            clearTimeout(timerID);      
-            timerID = setTimeout(function() {
-                impro.folder.loadImages();
-            }, 500);
-        }
-    });
-    
-    var changeFileType = function(e) {
-        impro.folder.loadImages();
-    };
-
-    jQuery('#vimg-dbg').click(function(ev) {
-        jQuery('#vimg-dbg-content').show().find('textarea').load(impro.url + '/src/request/dbg.php?rnd='+Math.random(), {},  function(t) {
-            jQuery('#vimg-dbg-content textarea').val(t);
-        });
-        return false;
+(function($){
+    /* add to post handlers. add here additional functionality for generating HTML in TinyMCE for  custom extensions */
+    var addToPostHandlers = {};
+
+    /* the toolset object contains actions to be taken when the actions of a thumbnail are being used */
+    var toolset = {
+        add: function(li, attachmentId) {
+            var ext = li.attr('data-ext').toLowerCase();
+
+            var addContent = function(ct) {
+                impro.editor.getTinyMCE().execCommand('mceInsertContent',false, ct);
+            };
+
+            /* if we add an image */
+            if (['jpg','jpeg','gif','png'].indexOf(ext) !== -1) {
+                var $img = li.find('img');
+                var src = $img.attr('src');
+                content = '<img src="' + src + '" />';
+                addContent(content);
+
+                /* add animation of content */
+                // TODO put it exactly over the image :D
+                var contentIfr = $(impro.editor.getTinyMCE().contentAreaContainer);
+                var $imgClone = $img.clone();
+                $imgClone.css({
+                    position: 'absolute',
+                    top: $img.offset().top,
+                    left: $img.offset().left,
+                    'z-index': 10000
+                }).appendTo('body').animate({
+                        top: contentIfr.offset().top + contentIfr.height() / 2,
+                        left: contentIfr.offset().left + contentIfr.width() / 2,
+                        opacity: 0.5
+                    }, 1000, function() {
+                        $(this).remove();
+                    });
+
+            } else {    /* for any other extension, default is link, but we can easily override */
+                $.getJSON(impro.url + '/src/request/getattachmentdata.php?id=' + attachmentId, function(json) { /* get all the data of the attachment */
+                    if (addToPostHandlers && typeof addToPostHandlers['extension_' + ext] === 'function') { /* if user defined a custom function, use it */
+                        content = addToPostHandlers['extension_' + ext].call(this, json, li);
+                    } else {    /* if not, just make a link */
+                        content = ' <a href="' + json.attachment_url + '" target="_blank">' + json.post_title + '</a> ';
+                    }
+                    addContent(content);
+                });
+            }
+
+            return false;
+        },
+        library: function(li, attachmentId) {
+            var content;
+            content = impro.admin_url + 'media.php?attachment_id=' + attachmentId + '&action=edit'; /* build media edit link */
+
+            $('#vimg-toolset [data-action=library]').attr('href', content).attr('target', '_blank');    /* set link */
+
+            return true;    /* return true, such that the href link will be used */
+        },
+        open: function(li, attachmentId) {
+            var content;
+
+            $.getJSON(impro.url + '/src/request/getattachmentdata.php?id=' + attachmentId, function(json) { /* get all the data of the attachment */
+                var result = window.open(json.attachment_url, 'op');
+                if (!result) {
+                    impro.err(imageproFolderL10N.popupOpenError);
+                }
+            });
+
+            return false;
+        },
+        link: function(li, attachmentId) {
+            var content;
+
+            $.getJSON(impro.url + '/src/request/getattachmentdata.php?id=' + attachmentId, function(json) { /* get all the data of the attachment */
+                prompt(imageproFolderL10N.attachmentLink, json.attachment_url);
+            });
+
+            return false;
+        },
+        remove: function(li, attachmentId) {
+            if (confirm(imageproFolderL10N.deleteAttachmentConfirmation)) {
+                $.post(impro.url + '/src/request/deleteattachment.php', {
+                    id: attachmentId,
+                    _ajax_nonce: impro.nonce.deleteNonce
+                }, function(data) {
+                    if (data.ok) {
+                        loadImages();
+                    } else {
+                        impro.err(data.data.msg);
+                    }
+                });
+            }
+            return false;
+        }
+    };
+
+    var init = function() {
+        loadImages();
+        $('#vimg-toolbar-filter').appendTo($('#impro_folder_box .hndle')).show();
+        initEvents();
+    };
+
+    var initEvents = function() {
+        var timerID = 0; /* reference for timer, used for event buffering for searching */
+        /* searching text event. the event is buffered so requests are delayed until user finishes typing */
+        $('#vimg-search').bind('keyup', function(ev) {
+            if (ev.which && (/[a-zA-Z0-9 \.,;-_]/.test(String.fromCharCode(ev.which)) || ev.which === 8)) {
+                clearTimeout(timerID);
+                timerID = setTimeout(function() {
+                    loadImages();
+                }, 500);
+            }
+        });
+
+        /* selecting a certain file type */
+        $('#vimg-filetype').bind('change keyup', function(ev) {
+            loadImages();
+        });
+
+        /* since the filter toolbar is in the header of the panel, any click should not pass through, as it may collapse it */
+        $('#vimg-toolbar-filter').bind('click', false);
+
+        /* the debug log */
+        $('#vimg-dbg').bind('click', function(ev) {
+            $('#vimg-dbg-content').show().find('textarea').load(impro.url + '/src/request/dbg.php?rnd='+Math.random(), {},  function(t) {
+                $('#vimg-dbg-content textarea').val(t);
+            });
+            return false;
+        });
+
+        /* when any button from the toolset is clicked */
+        $('#vimg-toolset').delegate('[data-action]', 'click', function(ev) {
+            var $li = $(this).closest('li[data-attachment-id]');
+            return toolset[$(this).attr('data-action')].call(this, $li, $li.attr('data-attachment-id'));
+        });
+
+        /* when the file upload field in the list changes, start file upload */
+        $('#vimg-list').delegate('input[type="file"]', 'change', function(ev) {
+            if (this.files && this.files.length) {
+                ddu.uploadMultipleFiles(this.files);
+                try {
+                    this.reset();
+                } catch(e) {}
+            }
+        });
+
+        /* display the toolset */
+        $('#vimg-list')
+            .delegate('li[data-attachment-id]', 'mouseenter', function(ev) {
+                $('#vimg-toolset').appendTo(this);
+            })
+            .delegate('li[data-attachment-id]', 'mouseleave', function(ev) {
+                $('#vimg-toolset').appendTo('body');
+            });
+
+        /* when an image is double clicked, it is automatically added to content */
+        $('#vimg-list').delegate('li[data-attachment-id] img', 'dblclick', function(ev) {
+            var $li = $(this).closest('li[data-attachment-id]');
+            return toolset['add'].call(this, $li, $li.attr('data-attachment-id'));
+        });
+
+        /* this event is used for blocking the dragging of non-image files to the editor */
+        $('#vimg-list').bind('mousedown', function(ev) {
+            var target = $(ev.target);
+
+            if (target.is('img')) { /* if began dragging an image */
+                target = target.closest('li');  /* get its li parent */
+            } else {
+                return false;
+            }
+
+            var ext = target.attr('data-ext');  /* get extension */
+
+            if (ext && ['jpg', 'jpeg', 'gif', 'png'].indexOf(ext) === -1) { /* if not image */
+                /* stop dragging */
+                ev.stopPropagation();
+                ev.preventDefault();
+                setTimeout(function() { /* it seems that showing an alert box immidiately makes the dragged image load. so we time out a bit */
+                    //impro.err('You can only drag images over the editor! For other file types, click "Add to editor".');
+                }, 500);
+                return false;
+            }
+        });
+    };
+
+    var loadImages = function() {
+        $.ajax(impro.url + '/src/request/getimages.php', {
+            cache: false,
+            data: {
+                filetype: $('#vimg-filetype').val(),
+                search: $('#vimg-search').val(),
+                sort: $('#vimg-sort').val()
+            },
+            dataType: 'json',
+            type: 'GET',
+            success: function(data, status, xhr) {
+                var html = "";
+
+                if (data.ok) {
+                    /* build the "Upload" button */
+                    html += '<li id="vupload"><input type="file" multiple /><div><span>+</span>' + imageproEditorL10N.uploadNew + '</div>';
+                    html += '</li>';
+
+                    /* build the HTML structure for the images from the server */
+                    for(var i = 0; i < data.data.length; i++) {
+                        html += '<li data-attachment-id="' + data.data[i].id + '" data-url="' + data.data[i].thumb + '" data-ext="' + data.data[i].ext + '">';
+                        html += '<img data-lazy-src="' + data.data[i].thumb + '" />';
+                        html += '<span>' + data.data[i].name + '</span>';
+                        html += '</li>';
+                    }
+
+                    /* recover the toolset in case of deleting elements */
+                    var $toolset = $('#vimg-list #vimg-toolset');
+                    if ($toolset.length) {
+                        $toolset.appendTo('body');
+                    }
+
+                    /* render the images */
+                    $('#vimg-list ul').empty().append(html);
+                }
+
+                /* set up the lazy load of images on scroll*/
+                lazyscroll();
+                $('#vimg-list').scroll();
+            },
+            error: function() {
+
+            }
+        });
+    };
+
+    var lazyscroll = function() {
+        var lazyscroll_timers = [];
+        $('#vimg-list').scroll(function() {
+            for(var i=0;i<lazyscroll_timers.length;i++) {
+                clearTimeout(lazyscroll_timers[i]);
+            }
+
+            lazyscroll_timers.push(setTimeout(function() {
+                var scrollTop = $('#vimg-list').scrollTop();
+                var containerTop = Math.round($('#vimg-list').offset().top);
+
+                /* if there are any images in the list */
+                if ($('#vimg-list img:eq(0)').size() > 0) {
+                    var firstImageTop = Math.round($('#vimg-list img:eq(0)').offset().top);
+
+                    var j = 0;
+                    $('#vimg-list img[data-lazy-src]').each(function(i) {
+                        var _currentImageTop = $(this).offset().top;
+                        if (_currentImageTop - containerTop > 0 || $(this).not(':visible')) {
+                            var _el = $(this);
+                            setTimeout(function() {
+                                _el.attr('src',_el.attr('data-lazy-src')).removeAttr('data-lazy-src');
+                            }, j++ * 20);
+
+                            if (j == 26) {
+                                return false;
+                            }
+                        }
+                    });
+                }
+
+            }, 500));
+        });
+    };
+
+    var ddu = new impro.DragDropUpload();
+    ddu.init('vimg-list', {
+        url: impro.url + '/src/request/upload.php',
+        onProgress: function(e, file, i, currentFileProgress, totalProgress) {
+            /* show progress */
+            $('#vimg-progress-wrapper').show();
+            $('#vimg-progress').show().width(totalProgress + '%');
+        },
+        onCompleted: function(e, files, filesSucceeded, filesFailed) {
+            /* hide progress, but a bit later to allow the animation to complete */
+            setTimeout(function() {
+                $('#vimg-progress-wrapper').hide();
+                $('#vimg-progress').width('0%');
+            }, 500);
+
+            /* get the target - in this case de XMLHttpRequest */
+            var target = e.target || e.originalTarget || e.currentTarget;
+
+            /* if we have files that failed uploading */
+            if (0 !== filesFailed.length) {
+                var errContent = "";
+
+                errContent += "<div style='margin: 15px;'>";
+                errContent += "<p style='margin-top: 0;'><strong>";
+
+                if (filesFailed.length === files.length) {
+                    errContent += "There was a general error and no files could be uploaded!";
+                } else {
+                    errContent += "" + filesFailed.length + " files of the total of " + files.length + " failed!";
+                }
+
+                errContent += "</strong></p>";
+
+                errContent += "<p>Please check out the list below for error messages</p>";
+
+                errContent += "<div style='height: 250px; overflow: auto;'>";
+                errContent += "<table cellspacing='0' cellpadding='3' border='0'>";
+
+                errContent += "<tr>";
+                errContent += "<td style='font-weight: bold; width: 110px; border: 1px solid #ddd;'>";
+                errContent += "Filename";
+                errContent += "</td>";
+                errContent += "<td style='font-weight: bold; width: 255px; border: 1px solid #ddd;'>";
+                errContent += "Error";
+                errContent += "</td>";
+                errContent += "</tr>";
+
+                for (var i = 0; i < filesFailed.length; i++) {
+                    var httpErrStr = ('object' === typeof filesFailed[i].httpResponse ? filesFailed[i].httpResponse.data.str : ('string' === typeof filesFailed[i].httpResponse ? "" : ""));
+                    errContent += "<tr>";
+                    errContent += "<td style='border: 1px solid #ddd;'>";
+                    errContent += filesFailed[i].name;
+                    errContent += "</td>";
+                    errContent += "<td style='border: 1px solid #ddd;'>";
+                    errContent += "Status: " + filesFailed[i].httpStatus + ", " + httpErrStr;
+                    errContent += "</td>";
+                    errContent += "</tr>";
+                }
+
+                errContent += "</table>"
+                errContent += "</div>";
+                errContent += "</div>";
+
+                $(errContent).dialog({
+                    title: 'File upload error',
+                    modal: true,
+                    draggable: false,
+                    resizable: false,
+                    width: '400px',
+                    dialogClass: 'wp-dialog',
+                    buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ]
+                });
+            }
+
+            /* load images on the server */
+            loadImages();
+        }
     });
-    
-    jQuery('#vimg-filetype').change(changeFileType).keyup(changeFileType);
-        
-    /* when a toolbar button is clicked */
-    jQuery('#vimg-toolbar').click(function(ev) {
-        if (!jQuery(ev.target).is('a[data-action]')) {  /* if not clicked on a link, do nothing */
-            return false;
-        }
-        
-        if (jQuery('#vimg-list').find('.impro_folder_selected').size() !== 1) { /* if no image is selected */
-            impro.err(imageproFolderL10N.noImageSelected);
-            return false;
-        }
-        
-        /* run the action on the toolbar */
-        return impro.folder.toolbar[jQuery(ev.target).attr('data-action')].call(this, jQuery('#vimg-list').find('.impro_folder_selected'));
-    });
-    
-    /* when an image is clicked */
-    jQuery('#vimg-list').click(function(ev) {
-        var target = jQuery(ev.target);
-        
-        if (ev.target === this) {   /* if clicked exactly on vimg-list, do nothing */
-            return false;
-        }
-        
-        if (!target.is('li')) { /* if not clicked on the list item, get the list item */
-            target = target.parents('li');          
-        }
-        
-        /* select the clicked image */
-        jQuery('#vimg-list li').removeClass('impro_folder_selected');
-        target.addClass('impro_folder_selected');
-        
-        var liimg = target.find('img');
-        var src = liimg.attr('src');
-        
-        /* if "Select another picture" was previously clicked */
-        if (impro.editor.$chosen) {
-            /* get the width and height of the currently selected image */
-            var old_width = impro.editor.$chosen.width();
-            var old_height = impro.editor.$chosen.height();
-            
-            /* parse the url of the new replacement image */
-            var props = impro.editor.parseUrl(src);
-            
-            /* get the width and height of the new replacement image */
-            var new_width = liimg.width();
-            var new_height = liimg.height();
-            var new_ratio = new_width / new_height;
-            
-            /* set the width and height to the old one such that proportion is kept */
-            props['w'] = old_width;
-            props['h'] = parseInt(old_width / new_ratio);
-            
-            /* resize img element if necessary */
-            impro.editor.$chosen.attr('width', props['w']).attr('_mce_width', props['w']).attr('data-mce-width', props['w']);
-            impro.editor.$chosen.attr('height', props['h']).attr('_mce_height', props['h']).attr('data-mce-height', props['h']);
-            
-            /* build the thumb and resize it */
-            impro.editor.resize(impro.editor.$chosen, props );
-            
-            /* make advanced scale plugin forget the previous dimensions */
-            impro.editor.$chosen.removeAttr('mce_advimageresize_id');
-            
-            /* simulate a click event to the image */
-            impro.editor.showEditor(impro.editor.$chosen);
-
-            /* clean up */
-            impro.editor.$chosen = null;
-            jQuery('#vimg-list').removeClass('impro_choosebg');
-            jQuery.scrollTo('#titlediv', 800);
-        }
-        
-        
-    });
-    
-    /* this event is used for blocking the dragging of non-image files to the editor */
-    jQuery('#vimg-list').mousedown(function(ev) {
-        var target = jQuery(ev.target);
-        
-        if (target.is('img')) { /* if began dragging an image */
-            target = target.parents('li');  /* get it's li parent */
-        } else {
-            return false;
-        }
-        
-        var ext = target.attr('data-ext');  /* get extension */
-        
-        if (ext && ['jpg', 'jpeg', 'gif', 'png'].indexOf(ext) === -1) { /* if not image */      
-            /* stop dragging */
-            ev.stopPropagation();
-            ev.preventDefault();
-            setTimeout(function() { /* it seems that showing an alert box immidiately makes the dragged image load. so we time out a bit */
-                //impro.err('You can only drag images over the editor! For other file types, click "Add to editor".');
-            }, 500);
-            return false;
-        }
-    });
-};
-
-/* load images in the folder view */
-impro.folder.loadImages = function() {
-    jQuery('#vimg-list ul').load(impro.url + '/src/request/getimages.php?filetype='+jQuery('#vimg-filetype').val()+'&search='+jQuery('#vimg-search').val()+'&sort='+jQuery('#vimg-sort').val()+'&rnd='+Math.random(), function() {
-        /* set up the lazy load of images on scroll*/
-        impro.folder.lazyscroll();
-        jQuery('#vimg-list').scroll();
-    });
-};
-
-/* lazy load of images */
-impro.folder.lazyscroll = function() {
-    impro.folder.lazyscroll_timers = [];    
-    jQuery('#vimg-list').scroll(function() {
-        for(var i=0;i<impro.folder.lazyscroll_timers.length;i++) {
-            clearTimeout(impro.folder.lazyscroll_timers[i]);
-        }
-        
-        impro.folder.lazyscroll_timers.push(setTimeout(function() {
-            var scrollTop = jQuery('#vimg-list').scrollTop();
-            var containerTop = Math.round(jQuery('#vimg-list').offset().top);
-            
-            /* if there are any images in the list */
-            if (jQuery('#vimg-list img:eq(0)').size() > 0) {
-                var firstImageTop = Math.round(jQuery('#vimg-list img:eq(0)').offset().top);
-                
-                var j = 0;
-                jQuery('#vimg-list img[data-lazy-src]').each(function(i) {
-                    var _currentImageTop = jQuery(this).offset().top;
-                    if (_currentImageTop - containerTop > 0) {
-                        
-                        var _el = jQuery(this);
-                        setTimeout(function() {
-                            _el.attr('src',_el.attr('data-lazy-src')).removeAttr('data-lazy-src');
-                        }, j++*20);
-                        
-                        if (j==26) return false;
-                    }
-                });
-            }
-            
-        },500));
-    });
-};
-
-/* init drag and drop */
-impro.folder.ddu = new impro.DragDropUpload();
-impro.folder.ddu.init('vimg-list', {
-    url: impro.url+'/src/request/upload.php',
-    onProgress: function(e, f) {
-        /* show progress */
-        jQuery('#vimg-progress-wrapper').show();
-        jQuery('#vimg-progress').show().width(Math.round((e.position * 100) / e.totalSize)+'%');
-    },
-    onComplete: function( ev ){
-        /* get the target - in this case de XMLHttpRequest */
-        var target = ev.target || ev.originalTarget || ev.currentTarget;
-        
-        /* try to parse the server response. exceptions may be thrown, or result may be null */
-        var result;
-        try {
-            result = jQuery.parseJSON(target.responseText);
-        } catch(e) {}
-        if (!result) {
-            impro.err("Cannot get response after file upload!");
-            return;
-        }
-        
-        /* server-side handled error */
-        if (!result['ok']) {
-            impro.err(result['data']['str']);
-            return;
-        }
-        
-        /* hide progress */
-        jQuery('#vimg-progress-wrapper').hide();
-        jQuery('#vimg-progress').hide();
-        
-        /* load images on the server */
-        impro.folder.loadImages();
-    },
-    onDropFile: function(e, fn) {
-        
-    }
-});
-
-jQuery(function() {
+
+    /* public methods */
+    $.extend(this, {
+        init: init
+    });
+}).call(impro.folder = {}, jQuery);
+
+jQuery(function($) {
     impro.folder.init();
 });

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/js/impro.js

@@ -1 @@
-/* Image Pro namespace */
-var impro = {};
-
-impro.nonce = {};
-
-impro.err = function(str) {
-    alert(str);
-};
-
-impro.info = function(str) {
-    alert(str);
-};
+(function($) {
+    /* the nonce security token */
+    var nonce = {};
+
+    /* whether the browser is minimum IE10 (IE10, IE11, etc) */
+    var minIE10 = navigator.userAgent.indexOf('MSIE 10') > 0 || (navigator.userAgent.indexOf('Trident') > 0 && /rv:[0-9][0-9]/.test(navigator.userAgent));
+
+    /* error message */
+    var err = function(str) {
+        alert(str);
+    };
+
+    /* info message */
+    var info = function(str) {
+        alert(str);
+    };
+
+    var fakeImageResize = function () {
+        var editor = tinyMCE.editors[0];
+        var dom = editor.dom;
+        var selection = editor.selection;
+        var VK = tinyMCE.VK;
+        var settings = editor.settings;
+
+        var selectedElmX, selectedElmY, selectedElm, selectedElmGhost, selectedHandle, startX, startY, startW, startH, ratio,
+            resizeHandles, width, height, rootDocument = document, editableDoc = editor.getDoc();
+
+        if (settings.webkit_fake_resize === true) {
+            alert('It seems that you are on a WebKit Browser (Chrome / Safari) '+
+                'and your configuration has webkit_fake_resize = true.' +
+                "\n\n" +
+                "Please turn it off for the Image Pro Plugin to function correctly under WebKit browsers.\n\n" +
+                "Contact us for more information!");
+            return;
+        }
+
+        /*if (!settings.object_resizing || settings.webkit_fake_resize === false) {
+         return;
+         }*/
+
+        // Try disabling object resizing if WebKit implements resizing in the future
+        try {
+            editor.getDoc().execCommand("enableObjectResizing", false, false);
+        } catch (ex) {
+            // Ignore
+        }
+
+        // Details about each resize handle how to scale etc
+        resizeHandles = {
+            // Name: x multiplier, y multiplier, delta size x, delta size y
+            n: [.5, 0, 0, -1],
+            e: [1, .5, 1, 0],
+            s: [.5, 1, 0, 1],
+            w: [0, .5, -1, 0],
+            nw: [0, 0, -1, -1],
+            ne: [1, 0, 1, -1],
+            se: [1, 1, 1, 1],
+            sw : [0, 1, -1, 1]
+        };
+
+        function resizeElement(e) {
+            var deltaX, deltaY;
+
+            // Calc new width/height
+            deltaX = e.screenX - startX;
+            deltaY = e.screenY - startY;
+
+            // Calc new size
+            width = deltaX * selectedHandle[2] + startW;
+            height = deltaY * selectedHandle[3] + startH;
+
+            // Never scale down lower than 5 pixels
+            width = width < 5 ? 5 : width;
+            height = height < 5 ? 5 : height;
+
+            // Constrain proportions when modifier key is pressed or if the nw, ne, sw, se corners are moved on an image
+            if (VK.modifierPressed(e) || (selectedElm.nodeName == "IMG" && selectedHandle[2] * selectedHandle[3] !== 0)) {
+                width = Math.round(height / ratio);
+                height = Math.round(width * ratio);
+            }
+
+            // Update ghost size
+            dom.setStyles(selectedElmGhost, {
+                width: width,
+                height: height
+            });
+
+            // Update ghost X position if needed
+            if (selectedHandle[2] < 0 && selectedElmGhost.clientWidth <= width) {
+                dom.setStyle(selectedElmGhost, 'left', selectedElmX + (startW - width));
+            }
+
+            // Update ghost Y position if needed
+            if (selectedHandle[3] < 0 && selectedElmGhost.clientHeight <= height) {
+                dom.setStyle(selectedElmGhost, 'top', selectedElmY + (startH - height));
+            }
+        }
+
+        function endResize() {
+            /* IMAGEPRO - it is unknown why sometimes width and height come with zero values here. however, we skip this case */
+            if (width === 0 || height === 0) {
+                return;
+            }
+
+            // Set width/height properties
+            dom.setAttrib(selectedElm, 'data-mce-width', width);
+            dom.setAttrib(selectedElm, 'data-mce-height', height);
+            dom.setAttrib(selectedElm, 'width', width);
+            dom.setAttrib(selectedElm, 'height', height);
+
+            dom.unbind(editableDoc, 'mousemove', resizeElement);
+            dom.unbind(editableDoc, 'mouseup', endResize);
+
+            if (rootDocument != editableDoc) {
+                dom.unbind(rootDocument, 'mousemove', resizeElement);
+                dom.unbind(rootDocument, 'mouseup', endResize);
+            }
+
+            // Remove ghost and update resize handle positions
+            dom.remove(selectedElmGhost);
+            showResizeRect(selectedElm);
+        }
+
+        function showResizeRect(targetElm) {
+            var position, targetWidth, targetHeight;
+
+            hideResizeRect();
+
+            // Get position and size of target
+            position = dom.getPos(targetElm);
+            selectedElmX = position.x;
+            selectedElmY = position.y;
+            targetWidth = targetElm.offsetWidth;
+            targetHeight = targetElm.offsetHeight;
+
+            // Reset width/height if user selects a new image/table
+            if (selectedElm != targetElm) {
+                selectedElm = targetElm;
+                width = height = 0;
+            }
+
+            tinymce.each(resizeHandles, function(handle, name) {
+                var handleElm;
+
+                // Get existing or render resize handle
+                handleElm = dom.get('mceResizeHandle' + name);
+                if (!handleElm) {
+                    handleElm = dom.add(editableDoc.documentElement, 'div', {
+                        id: 'mceResizeHandle' + name,
+                        'class': 'mceResizeHandle',
+                        style: 'cursor:' + name + '-resize; margin:0; padding:0'
+                    });
+
+                    dom.bind(handleElm, 'mousedown', function(e) {
+                        e.preventDefault();
+
+                        endResize();
+
+                        startX = e.screenX;
+                        startY = e.screenY;
+                        startW = selectedElm.clientWidth;
+                        startH = selectedElm.clientHeight;
+                        ratio = startH / startW;
+                        selectedHandle = handle;
+
+                        selectedElmGhost = selectedElm.cloneNode(true);
+                        dom.addClass(selectedElmGhost, 'mceClonedResizable');
+                        dom.setStyles(selectedElmGhost, {
+                            left: selectedElmX,
+                            top: selectedElmY,
+                            margin: 0
+                        });
+
+                        editableDoc.documentElement.appendChild(selectedElmGhost);
+
+                        dom.bind(editableDoc, 'mousemove', resizeElement);
+                        dom.bind(editableDoc, 'mouseup', endResize);
+
+                        if (rootDocument != editableDoc) {
+                            dom.bind(rootDocument, 'mousemove', resizeElement);
+                            dom.bind(rootDocument, 'mouseup', endResize);
+                        }
+                    });
+                } else {
+                    dom.show(handleElm);
+                }
+
+                // Position element
+                dom.setStyles(handleElm, {
+                    left: (targetWidth * handle[0] + selectedElmX) - (handleElm.offsetWidth / 2),
+                    top: (targetHeight * handle[1] + selectedElmY) - (handleElm.offsetHeight / 2)
+                });
+            });
+
+            // Only add resize rectangle on WebKit and only on images
+            if (!tinymce.isOpera && selectedElm.nodeName == "IMG") {
+                selectedElm.setAttribute('data-mce-selected', '1');
+            }
+        }
+
+        function hideResizeRect() {
+            if (selectedElm) {
+                selectedElm.removeAttribute('data-mce-selected');
+            }
+
+            for (var name in resizeHandles) {
+                dom.hide('mceResizeHandle' + name);
+            }
+        }
+
+        // Add CSS for resize handles, cloned element and selected
+        var css = '.mceResizeHandle {' +
+            'position: absolute;' +
+            'border: 1px solid black;' +
+            'background: #FFF;' +
+            'width: 5px;' +
+            'height: 5px;' +
+            'z-index: 10000' +
+            '}' +
+            '.mceResizeHandle:hover {' +
+            'background: #000' +
+            '}' +
+            'img[data-mce-selected] {' +
+            'outline: 1px solid black' +
+            '}' +
+            'img.mceClonedResizable, table.mceClonedResizable {' +
+            'position: absolute;' +
+            'outline: 1px dashed black;' +
+            'opacity: .5;' +
+            'z-index: 10000' +
+            '}';
+
+        var el = editor.getDoc().createElement('style');
+        el.innerHTML = css;
+        editor.getDoc().getElementsByTagName('head')[0].appendChild(el);
+
+        function updateResizeRect() {
+            var controlElm = dom.getParent(selection.getNode(), 'table,img');
+
+            // Remove data-mce-selected from all elements since they might have been copied using Ctrl+c/v
+            tinymce.each(dom.select('img[data-mce-selected]'), function(img) {
+                img.removeAttribute('data-mce-selected');
+            });
+
+            if (controlElm) {
+                showResizeRect(controlElm);
+            } else {
+                hideResizeRect();
+            }
+        }
+
+        // Show/hide resize rect when image is selected
+        editor.onNodeChange.add(updateResizeRect);
+
+        // Fixes WebKit quirk where it returns IMG on getNode if caret is after last image in container
+        dom.bind(editableDoc, 'selectionchange', updateResizeRect);
+
+        // Remove the internal attribute when serializing the DOM
+        editor.serializer.addAttributeFilter('data-mce-selected', function(nodes, name) {
+            var i = nodes.length;
+
+            while (i--) {
+                nodes[i].attr(name, null);
+            }
+        });
+
+        /* IMAGEPRO - extracted a private method to public to be able to refresh the handles */
+        impro.updateResizeRect = updateResizeRect;
+    };
+
+    var createThumbUrl = function(params) {
+        var path = impro.url + '/src/thumb/phpThumb.php?';
+        var tmp = [];
+        for (var p in params) {
+            if (['w','h','src','zc','q'].indexOf(p) === -1) {
+                continue;
+            }
+            if (params.hasOwnProperty(p)) {
+                tmp.push(p+'='+params[p]);
+            }
+        }
+        return path + tmp.join('&');
+    };
+
+    var parseUrl = function(url) {
+        var path = {};
+
+        /* if begins with http(s?):// protocol */
+        var is_http = /^https?:\/\/$/i.test(url);
+        /* if contains phpThumb.php */
+        var is_thumb = url.indexOf('/src/thumb/phpThumb.php') !== -1;
+
+        if (is_thumb) {
+            path['thumb'] = true;
+
+            url.split('?')[1].split('&').forEach(function(v){
+                var tmp = v.split('=');
+
+                /* we have the width, height, quality and zoom-crop */
+                if (tmp[0] === 'w' || tmp[0] === 'h' || tmp[0] === 'q' || tmp[0] === 'zc') {
+                    tmp[1] = parseInt(tmp[1], 10);
+                    /* not a numeric value, don't consider */
+                    if (isNaN(tmp[1])) {
+                        return;
+                    }
+                }
+
+                path[tmp[0]] = tmp[1];
+            });
+
+            path['url'] = url;
+        } else {
+            path['thumb'] = false;
+            path['url'] = url;
+            path['src'] = path['url'];
+        }
+
+        return path;
+    };
+
+    /* public methods */
+    $.extend(this, {
+        nonce: nonce,
+        err: err,
+        info: info,
+        minIE10: minIE10,
+        fakeImageResize: fakeImageResize
+    });
+}).call(window.impro = {}, jQuery);

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/request/deleteattachment.php

@@ -25 +25 @@
     impro_base::err(array('msg' => __('There was an error removing the attachment. Please try again later.', 'imagepro')));
 } else {
-    impro_base::ok(array('msg' => __('The attachment has been removed successfully. However, if you would like to recover it, you can at any time restore it from the "Trash".', 'imagepro')));
+    impro_base::ok(array());
 }

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/request/getimages.php

@@ -42 +42 @@
         "id" => $id,
         "name" => $name,
-        "size" => $size,
+        //"size" => $size, // not needed for now
         "ext" => $ext,
-        "url" => $url,
-        "thumb" => $thumb 
+        //"url" => $url, // not needed for now
+        "thumb" => $thumb
     );
     
 endwhile;
 
-foreach($attachments as $f):
-?>
-<li data-attachment-id="<?php echo $f['id']?>" data-url="<?php echo $f['thumb']?>" data-ext="<?php echo $f['ext']?>">
-    <img data-lazy-src="<?php echo $f['thumb']?>" />
-    <span><?php echo $f['name']?></span>
-</li>
-<?php endforeach?>
+/* output as json */
+header('Content-Type: application/json');
+echo json_encode(array(
+    'ok' => true,
+    'data' => $attachments
+));
+exit;

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/request/upload.php

@@ -21 +21 @@
 }
 
-/* write the file in the coresponding location */
+/* write the file in the corresponding location */
 $upload = wp_upload_bits($_GET['name'], NULL, $contents, NULL);
 
 /* if we have an upload error */
-if ($upload['error'] !==false) {
+if ($upload['error'] !== false) {
     impro_log::LogError("Error uploading " . $_GET['name'] . ". " . $upload['error']);
     impro_base::err(array(
@@ -52 +52 @@
     impro_log::LogError("Error uploading " . $_GET['name'] . ". The file was uploaded succesfuly but the attachment could not be added to the posts table");
     impro_base::err(array(
-        'str' => __("The file was uploaded succesfuly but the attachment could not be added to the posts table", 'imagepro')
+        'str' => __("The file was uploaded succesfully but the attachment could not be added to the posts table", 'imagepro')
     ));
 }

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/requirements.php

@@ -88 +88 @@
             echo __('<div class="error">
                 <strong>ImagePro plugin cannot run on this browser!</strong><br/>
-                ImagePro currently supports Firefox, Chrome, Safari.<br/>
-                The plugin is currently <strong>NOT WORKING</strong>. Use one of the 3 browsers above to use it!
+                ImagePro currently supports Internet Explorer 10+, Firefox, Chrome, Safari.<br/>
+                The plugin is currently <strong>NOT WORKING</strong>. Use one of the browsers suggested!
             </div>', 'imagepro');
         }
@@ -112 +112 @@
             $limit = intval(sqrt($limit / 4));  // 4 = r g b a
             
-            echo __('<div class="error">
+            echo sprintf(__('<div class="error">
                 <strong>Low memory limit!</strong>
                 ImagePro requires memory to perform image resizing. <br/>
-                Large images such as 2600x2000 pixels will not be resized. You will only be able to resize pictures of maximum resolution '.$limit.'x'.$limit.'. Please increase your memory limit!
-            </div>', 'imagepro');
+                Large images such as 2600x2000 pixels will not be resized. You will only be able to resize pictures of maximum resolution %sx%s. Please increase your memory limit!
+            </div>', 'imagepro'), $limit, $limit);
         }
     }

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/thumbs.php

@@ -73 +73 @@
         /* find images that seem to need resizing */
         preg_match_all('%<img [^>]*src=\\\\?[\'"]/[^>]*>%si', $content, $result, PREG_PATTERN_ORDER);
-        
+
         impro_log::LogInfo("When saving post id = " . $post_ID . ", " . count($result[0]) . " thumbnails will require processing");
         

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/view/css/editor.css

@@ -1 @@
-#impro_editor {
-    
-}
-
-#vimg-toolbar {
-    float: left;
-}
-
-#vimg-toolbar-filter {
-    float: right;
-}
-
-#vimg-search {
-    width: 80px;
-}
-
-#impro_editor .thumb {
-    border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    margin-top: 5px;
-}
-
-.impro_right {
-    float: right;
-    margin-top: 5px;
-    width: 200px;
-}
-
-.impro_right .impro_alt, .impro_right .impro_title {
+#impro_editor .impro_alt, #impro_editor .impro_title {
     margin-top: 6px;
     margin-bottom: 10px;
     width: 97%; 
-}
-
-.impro_wide {
-    float: none;
-    clear: both;
-}
-
-.impro_width, .impro_height {
-    width: 45px;
-    float: float;
-}
-
-label[for=impro_width], label[for=impro_height] {
-    display: inline-block;
-    position: relative;
-    top: -3px;
-    width: 42px;
-}
-
-.impro_resize_cont {
-    float: right;
-    width: 95px;
-}
-
-.impro_size_cont {
-    float: left;
-}
-
-.impro_resize_label {
-    display: inline-block;
-    margin-top: 6px;
-}
-
-.impro_cancel {
-    float: left;
-}
-
-.impro_preview {
-    float: right;
-}
-
-.impro_choose {
-    width: 176px;
 }
 
@@ -81 +9 @@
 }
 
-.impro_info {
-    color: #666;
-    line-height: 1.3em;
-    margin-top: 5px;
-    text-align: justify;
-    padding-right: 10px;
+.impro-editor-wh-error {
+    background: #ee5555 !important;
 }
 
-.impro_choosebg {
-    background: #0A0B0B;
-    border-radius: 7px;
-    -moz-border-radius: 7px;
-    -webkit-border-radius: 7px;
+#impro-preview {
+    width: 100%;
+    height: 70px;
+    background-size: cover;
+    background-position: center center;
+    margin-top: 5px;
+
+    -webkit-box-shadow: inset 3px -3px 33px -4px rgba(0,0,0,0.83);
+    -moz-box-shadow: inset 3px -3px 33px -4px rgba(0,0,0,0.83);
+    box-shadow: inset 3px -3px 33px -4px rgba(0,0,0,0.83);
 }
 
-.impro_choosebg li {
-    cursor: pointer;
+#impro-editor-maxwidth-info {
+    background: #E4F2FF;
+    padding: 10px;
+    border-radius: 3px;
+    margin-left: 23px;
+    margin-top: 10px;
 }
+
+.impro-control-group {
+    margin-bottom: 5px;
+}
+
+#impro-editor-maxwidth-container {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 1px;
+}
+
+#impro-editor-w, #impro-editor-h {
+    display: inline-block;
+    width: 65px;
+}
+
+#impro_editor_box .inside {
+    margin-top: 12px;
+}
+
+#impro_editor > .impro-control-group:first-child {
+    margin-top: 5px;
+}

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/view/css/folder.css

@@ +1 @@
+#impro_folder_box.closed #vimg-toolbar-filter {
+    display: none !important;
+}
+
+#vimg-toolbar-filter {
+    float: right;
+    font-size: 12px;
+    margin-top: -3px;
+}
+
+#vimg-toolbar-filter input[type="text"],
+#vimg-toolbar-filter select {
+    height: 23px;
+    font-size: 12px;
+    padding-top: 0;
+}
+
+#vimg-search {
+    width: 80px;
+}
+
 #vimg-list {
     height: 300px;
     overflow-y: scroll;
     overflow-x: visible;
-    padding-top: 5px;
+    padding-bottom: 55px;
+    transition: background 0.5s;
+    -webkit-transition: background 0.5s;
 }
 
@@ -11 +34 @@
 #vimg-list ul li {
     float: left;
-    padding: 5px;
-    width: 80px;
+    padding: 10px;
+    width: 82px;
     height: 100px;
-    border: 1px solid transparent;
     position: relative;
-}
+    border-radius: 4px;
+}
+
 #vimg-list ul li:hover {
-    background: #FAFCA5;
-    border: 1px solid #E1DC4F;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
+    background: #efefef;
 }
 
@@ -34 +54 @@
 }
 
-#vimg-list ul li[data-ext=png] img, #vimg-list ul li[data-ext=gif] img, #vimg-list ul li[data-ext=jpg] img, #vimg-list ul li[data-ext=jpeg] img {
+#vimg-list ul li[data-ext="png"] img, #vimg-list ul li[data-ext="gif"] img, #vimg-list ul li[data-ext="jpg"] img, #vimg-list ul li[data-ext="jpeg"] img {
     cursor: move;
 }
 
 #vimg-list li img {
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
+    border-radius: 4px;
+    border: 1px solid rgba(222, 222, 222, 0.8);
 }
 
@@ -49 +68 @@
 
 .vdragover {
-    background: #ddd;
-}
-.vdragover li { border: 1px solid #ddd !important; }
-
-#impro_menu_container {
     background: #eee;
-    border: 1px solid #ccc;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    padding: 10px;
-    position: absolute;
-}
-
-.impro_folder_selected {
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    border: 1px solid #B0CBDA !important;
-    background: #EEF5F8 !important; 
-}
-
-#vimg-toolbar ul li {
-    float: left;    
-}
-
-#vimg-toolbar ul li a[data-action] {
-    background: none no-repeat scroll 5px center #EEEEEE;
-    border: 1px solid #999999;
-    color: #333333;
-    display: block;
-    margin-right: 6px;
-    padding: 3px 8px 3px 25px;
-    text-decoration: none;
-    border-left: 1px solid #dddddd;
-    border-top: 1px solid #dddddd;
-}
-
-#vimg-toolbar ul li a[data-action]:hover {
-    background-color: #dddddd;
-}
-
-#vimg-toolbar ul li a[data-action=add] {
-    background-image: url(../img/add.png);
-}
-
-#vimg-toolbar ul li a[data-action=library] {
-    background-image: url(../img/library.png);
-}
-
-#vimg-toolbar ul li a[data-action=open] {
-    background-image: url(../img/open.png);
-}
-
-#vimg-toolbar ul li a[data-action=link] {
-    background-image: url(../img/link.png);
-}
-
-#vimg-toolbar ul li a[data-action=remove] {
-    background-image: url(../img/delete.png);
 }
 
@@ -118 +78 @@
     display: none;
 }
+
+@-webkit-keyframes progress-bar-stripes {
+    from {
+        background-position: 40px 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+@keyframes progress-bar-stripes {
+    from {
+        background-position: 40px 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+#vimg-progress-wrapper {
+    height: 20px;
+    margin-bottom: 20px;
+    overflow: hidden;
+    background-color: #F5F5F5;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+#vimg-progress {
+    float: left;
+    width: 0;
+    height: 100%;
+    font-size: 12px;
+    line-height: 20px;
+    color: #FFF;
+    text-align: center;
+    background-color: #428BCA;
+    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    -webkit-transition: width .6s ease;
+    transition: width .6s ease;
+
+    background-size: 40px 40px;
+    background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.15) 25%,rgba(0, 0, 0, 0) 25%,rgba(0, 0, 0, 0) 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0));
+
+    -webkit-animation: progress-bar-stripes 2s linear infinite;
+    animation: progress-bar-stripes 2s linear infinite;
+}
+
+#vupload {
+    cursor: pointer !important;
+    position: relative;
+}
+
+#vupload input[type="file"] {
+    opacity: 0.01;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    cursor: pointer;
+}
+
+#vupload div {
+    width: 50px;
+    margin: 0 auto;
+    text-align: center;
+    color: #888 !important;
+}
+
+#vupload div span {
+    display: block !important;
+    background: #fff !important;
+    border: 2px solid #0fabfc;
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 40px !important;
+    font-size: 24px !important;
+    font-weight: bold !important;
+    color: #0fabfc !important;
+    text-align: center !important;
+    line-height: 35px !important;
+    margin: 0 auto !important;
+}
+
+#vupload:hover {
+    background: #fff !important;
+}
+
+#vupload:hover div {
+    color: #444 !important;
+}
+
+#vupload:hover div span {
+    color: #0C70A3 !important;
+    border: 2px solid #0C70A3 !important;
+}
+
+#vimg-toolset {
+    border-radius: 4px;
+    height: 100px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 73px;
+    z-index: 2;
+    display: none;
+}
+
+#vimg-list #vimg-toolset {
+    display: block;
+}
+
+#vimg-toolset > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: #efefef;
+    border-radius: 4px;
+    padding: 8px;
+}
+
+#vimg-toolset > div > a {
+    cursor: pointer;
+    text-decoration: none;
+    display: block;
+    color: #656565;
+    padding-bottom: 4px;
+    padding-left: 20px;
+    font-size: 11px;
+    background-repeat: no-repeat;
+}
+
+#vimg-toolset > div > a:hover {
+    color: #050505 !important;
+    text-decoration: underline;
+}
+
+
+
+#vimg-toolset #vimg-toolset-delete {
+    background: #C00;
+    color: #FFF;
+    font-size: 16px;
+    font-weight: bold;
+    border-radius: 16px;
+    width: 16px;
+    height: 16px;
+    text-align: center;
+    line-height: 14px;
+    right: -7px;
+    top: -80px;
+    position: absolute;
+    padding-left: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+#vimg-toolset > div > #vimg-toolset-delete:hover {
+    background: #e00 !important;
+    color: #fff !important;
+    text-decoration: none !important;
+}
+
+#vimg-toolset #vimg-toolset-add {
+    background-position: 1px 1px;
+    background-size: 14px 14px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8ElEQVQ4T2NkwAQ6QKFkIHYFYnGo9AsgvRuI5wDxNWQtjEgcNiC7D4gzgJgZi8Egob9APBWIS4D4N0gAZgBI8xaorTj0ogjvBPL8gPgXzICZQE4aMTqR1EwDsrNBBugC8QUgZsJiAMyC/1jkQN7RAymYDMQ5OGzHZwBIy0SQAlCoapJpwBWQAZ+AmBfJAOSYwWYusnc+gRR/AWJuMg34TKkXroIMACWeQjLDoAdkgDYQXwRibKkPXyz8ASUBmIIJQE4+iQmpB6i+FGYAK5ADSspuRBqyA6jOF4j/UC0zIVsMy84g1yhBJe4C6V1AjJGdAVgPMQjJK3mLAAAAAElFTkSuQmCC');
+}
+
+#vimg-toolset #vimg-toolset-edit {
+    background-position: 0px 1px;
+    background-size: 16px 16px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAFTElEQVR4Xu2dsU7bUBSGjVSJFYZKbLHUCrYmUiuYgA4VG2GoGKFSCyMdCnkLVKkwQisVRtShbIhWKm+QsCF1CE8Ab+ByAdOQOMn1tc+5xz4/K7F9z/99PrYPIRkJ8KM6gRHV1aP4AAIolwACQADlCSgvHx0AAihPQHn56AAQQHkCystHB4AAyhNQXj46AARQnoDy8tEBIIDyBJSXjw4AAZQnoLx8dAAIoDwB5eWjA0AA5QkoLx8dgFiAq6urqHV+fnuUsFIJwjAUlbmoxRCzYN/994ODaLPRCK6vrx+O/XFjI/i8vS0mdzELYadDfEAD/8P6euJRVldWgm/7+yKyF7EIYhbsux8EP16MFAkgQM562MCXJAEEyFGANPClSAABchLABb4ECSBADgJkge9bAgiQUYA84PuUAAJkEKDdbkfPp6Yy7KF3U+6nAwiQEV+eHcBHJ4AAGQUwmxdZAgiQUgAz2x8fH+/JragSQIAUAsSz/V8nJ0GtViuFBBDAUoDOM3xsbCzglODr3l7wbnWVhBXJTi0zLczLkto7pwRL9Xrw4+iIhBXJTgtD1mKhg67tXBLMz80Fv09PSViR7NQi10K8xObGjkMCytkABOijog38eFNqCf5eXJC9kwgCJAiQBj61BJQ3gGbtEKBLABf4VBJQw4cAOcLPWwIO+BCgQ4AsZ373VSTrPQEXfAhwTy5P+Fk7ASd8CED0hxxXCbjhqxeA4sx3vRz4gK9aAA74tp3AvI5q1j9s4qbyMZATvo0EwyBR/l6dAD7gS5ZAlQA+4UuVQI0AEuDHEvi64Uu6lKgQAPD730WUXgDAH3wLWWoBAH/480NpBQD84fBLOwgCfDv4pRQA8O3hl04AwE8Hv1QCAH56+KURAPDd4JdCAMB3h194AQA/G/xCCwD42eEXVgDAzwd+IQUA/PzgF04AwM8XfqEEAPz84RdGAMCngV8IAQCfDr54AQCfFr5oAQCfHr5YAQCfB75IAQCfD744AQCfF74oAQCfH74YAQDfD3wRAgC+P/jeBaD4vH3XOCX9u5ZrDS7bef+/AAkdQCt87x0gNtanBJrhexHgz9lZVH3xIuj+zH0fEmiH70WAt8vLUfvy8vbj1n1KAPh3/Zf9HuDJ6GhkDlytVr1JAPj/bxdZBTDt/83CwsPRfUgA+I+fFVgF+LS1Fe3s7j5aAacEgN/7oMgqwMvp6ajVavWsgkMCwE+eErAJYL5t6+nERN9ZBaUEgN9/RMQmgM1jHoUEgD94PsgmwPu1tejg8HDotDJPCQB/aNx8j4HPJiejy5vnf5ufPCQAfJukmeYAzWYzejUzY7ei+1dlkQDw7aNmuQR82dmJNhsN+1VlkADw08XMIoAZ//48Pk63MgcJAD99xCwCxOPf9Mu728LmcgD4bumSC9A9/nVb5mAJzD59fd6+az1StiMXIGn861p8v07guj9sx/AU0G/86xo+JHBNLnk70g4wbPzrWgrllym7rqmo25EKYDP+tQ3OnPn1xcXAwH89P0+6bts1leF1pEHajn+TgqxUKsFSvR7Mzc7eQu9+91AZwpdQA6kAaca/5ts24zPcAA/DkHRtEsKXsAaykG3Gv51neK1WI1uLhKClroEs9KTxr7mOm7PbnOm4jstQgkwAM/5t3rz7JwaO67gM4N2rIBPAPALixk0m9M5VkQkgv3Ss0CQAAZR7AAEggPIElJePDgABlCegvHx0AAigPAHl5aMDQADlCSgvHx0AAihPQHn56AAQQHkCystHB4AAyhNQXj46AARQnoDy8tEBIIDyBJSXjw4AAZQnoLz8fxiAE645as90AAAAAElFTkSuQmCC');
+}
+
+#vimg-toolset #vimg-toolset-link {
+    background-size: 16px 16px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC70lEQVRYR+2XX4QWURjGdy0RsUR0ka66yLJEiVKKiGVvyhKb2JQipUSUKCU2XW021qbsKqVI3USRIkWKRF111VVESikioufHOXq9zX7nzMw3a5fv5TEz5ztzzm+e8+c9X3fXHI/uOc7X1QGsO0IdB+eLgxsEukNaIr2TLknfc+BnY4jHBHLYwXzU83bpVQqyacArAtgzAwQODkgvWkE2CejhcO2T1C8tCFBJyKYAJwWwzzhzU/d7pV/SaulBmI9U+RmcfF7kZBOA4+rooOlsOsD9MWV9un8sLQ1lX3VdKX32kO0G3KYO7ibg4s8M9UtpYShgZR9qGvCNOlgVOnmq6+aiYTNlfAwfRbyW1jQN+EUdLA6dMOeuJgBxcG2o80TXLU0DRgeZS7i3SWKDZvjuuM5P6vmcKSv8oHbPQWDYmHFil3Q8ALDFLDMwlI+a50e631rkdrsB6YOVSeaIcJQx1DhEeDjmKhs2W9B/URVwnVoakhZJ76XLEvsZgTMWjqFldbL/DQdFkJZwVKoC6AFoh3S1UWJOFcHdD4DWoSRcFUCfIWgjLgg75yjHuQMSWQP3bLBiB6XCYbUVyzjo4T6oISY3K5Sh887tVNlvKYKTPXiH+XhespnF8f97zAX0iX9aTewPAGd0PWV6wLkIN2PHuT/kAHq462p8d3CgV9dvDo4FMSWxatleakUKkBMJQxvDwlHWI5ENmGO3pSNSXBAM44ladHo5BfhWdUjqBKff9cE52y/JfoXEUd6u8JxcnORPAf5QC+x1xGnpbKLFZ/qd/x/EQ4kNuFakAK2DKUd8hmCLmahFp5dTgCOqw4SPUXhm04/HpAumHvscuTVrK2n1ESlA3r0msZfFuKgbFkMMD5eVIXKdzQFkpd6QOKnEuKcb5hg5ecQ5l5Uh2glIW0WQvo/s9JULR70cB2N7QN6SOMXMClxZwAh1VDec95ZLZApWanZuLeNeVcCyfdSqX2aIa3VU9eUOYFXn4nsdB+s6+Bd5CZIpwD7uTAAAAABJRU5ErkJggg==');
+}
+
+#vimg-toolset #vimg-toolset-open {
+    background-position: 0px 1px;
+    background-size: 16px 16px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA0ElEQVQ4T2NkoBAwUqifAWTAf0oMgRlArkv+k2pAF9C1KUA8C4grQK5HN0AJKLgdiBuAeDkWr30GivEAMYjmw2YAyORUIH4FxIpA/A3NEJAL8oB4AjYXsAIFnwOxMFRTPpCeRCCAUbzgAlS8G0nDQyBbBYj/QL3kCaRDgPgxkhoUA2qAEs1oNoIC6jAQ7wNidiC+DcT2UJeClKIYsB4oEEDAySDpC0BsC8Rf0A14AhSQJsIAkJKdQOwDxL9JTQfo5sO9QKTFmMrITcJwkyg2AAB2fTIFnoZD8QAAAABJRU5ErkJggg==');
+}

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/view/editor.php

@@ +1 @@
+<div id="impro-preview"></div>
 <div id="impro_editor">
-<img class="thumb" />
 
-<div class="impro_right">
-    <label><?php _e('Alternative text:', 'imagepro')?>
-    <input type="text" class="impro_alt" />
-    </label>
-    
-    <label><?php _e('Title text:', 'imagepro')?>
-    <input type="text" class="impro_title" />
-    </label>
-    
+    <div class="impro-control-group">
+        <label><?php _e('Image size preset', 'imagepro') ?></label>
+        <select id="impro-editor-size">
+            <optgroup label="Wordpress defined">
+                <option value="__full"><?php _e('Full size', 'imagepro') ?></option>
+                <?php
+                $thumbnailSizes = @self::list_thumbnail_sizes();
+                foreach($thumbnailSizes as $name => $attrs):
+                    ?><option value="<?php echo addslashes($name) ?>" data-preset-width="<?php echo $attrs[0]?>" data-preset-height="<?php echo $attrs[1]?>"><?php echo ucfirst(htmlentities($name)) ?> (<?php echo $attrs[0]?>x<?php echo $attrs[1]?>)</option><?php
+                endforeach;
+                ?>
+            </optgroup>
+            <optgroup label="User defined">
+                <option value="__custom" selected="selected"><?php _e('Custom size', 'imagepro') ?></option>
+            </optgroup>
+        </select>
+    </div>
+
+    <div class="impro-control-group">
+        <label><?php _e('Manually change image size', 'imagepro') ?></label><br/>
+        <input id="impro-editor-w" type="number" />
+        <?php _e('width', 'imagepro') ?> x
+        <input id="impro-editor-h" type="number" />
+        <?php _e('height', 'imagepro') ?>
+    </div>
+
+    <div id="impro-editor-maxwidth-container">
+        <label><input id="impro-editor-maxwidth" type="checkbox" /> <?php _e('Override size restriction', 'imagepro') ?></label>
+        <br/>
+        <div id="impro-editor-maxwidth-info">
+<?php _e('The current WordPress theme allows images up to %maxwidth% pixels in width.<br/> Use the option above to disable this restriction for the current image. However, the image will not be responsive anymore.', 'imagepro') ?>
+        </div>
+    </div>
+
+    <hr/>
+
     <label><?php _e('Align:', 'imagepro')?>
     <select class="impro_align">
@@ -25 +52 @@
     <?php _e('Open the full picture on click', 'imagepro')?>    
     </label>
-    
-    <br/><br/>
-    <input type="button" class="button-primary impro_choose" value="<?php _e('Select another picture', 'imagepro')?>" />
-    <br/>
-    <div class="impro_info"><?php _e('Select a new image from the "Available images" panel to replace the current one', 'imagepro')?></div>
-</div>
+
+    <hr/>
+
+    <label><?php _e('Alternative text:', 'imagepro')?>
+        <input type="text" class="impro_alt" />
+    </label>
+
+    <label><?php _e('Title text:', 'imagepro')?>
+        <input type="text" class="impro_title" />
+    </label>
 
 <div class="clear"></div>

image-pro-wordpress-image-media-management-and-resizing-done-right/trunk/src/view/folder.php

@@ -1 @@
-<div id="vimg-progress-wrapper" style="border: 1px solid #069; display: none;">
-    <div id="vimg-progress" style="width: 0; height: 22px; background: #08b; display: none;"></div>
+<div id="vimg-progress-wrapper" style="display: none;">
+    <div id="vimg-progress"></div>
 </div>
 
-<div id="vimg-toolbar">
-    <ul>
-        <li><a data-action="add" href="#"><?php _e('Add to editor', 'imagepro')?></a></li>
-        <li><a data-action="library" href="#"><?php _e('Edit in library', 'imagepro')?></a></li>
-        <li><a data-action="open" href="#"><?php _e('Open', 'imagepro')?></a></li>
-        <li><a data-action="link" href="#"><?php _e('Show link', 'imagepro')?></a></li>
-        <li><a data-action="remove" href="#"><?php _e('Delete', 'imagepro')?></a></li>
-    </ul>   
+<div id="vimg-toolset">
+    <div>
+        <a data-action="remove" id="vimg-toolset-delete">&ndash;</a>
+
+        <a data-action="add" id="vimg-toolset-add"><?php _e('Add to post', 'imagepro') ?></a>
+        <a data-action="library" id="vimg-toolset-edit"><?php _e('Edit', 'imagepro') ?></a>
+        <a data-action="open" id="vimg-toolset-open"><?php _e('Open', 'imagepro') ?></a>
+        <a data-action="link" id="vimg-toolset-link"><?php _e('Get link', 'imagepro') ?></a>
+    </div>
 </div>
 
-<div id="vimg-toolbar-filter">
-    <label for="vimg-filetype"><?php _e('Show', 'imagepro')?></label>
+<div id="vimg-toolbar-filter" style="display: none;">
+    <label for="vimg-filetype"><?php _e('Show', 'imagepro')?>&nbsp;</label>
     <select id="vimg-filetype">
         <option value="" style="font-weight: bold;"><?php _e('All files', 'imagepro')?></option>
@@ -23 +24 @@
     </select>
     
-    <label for="vimg-search"><?php _e('Search', 'imagepro')?></label>
+    <label for="vimg-search">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php _e('Search', 'imagepro')?></label>
     <input type="text" id="vimg-search" />
 
@@ -32 +33 @@
 
 <div id="vimg-dbg-content">
-    Copy &amp; paste the contents of the textarea below when submitting a support request at <a target="_blank" href="http://www.mihaivalentin.com/about-me/#contact">http://www.mihaivalentin.com/about-me/#contact</a><br/>The information will be used only for troubleshooting purposes and may reveal some information about your WordPress setup.
+    <?php _e('Copy &amp; paste the contents of the textarea below when submitting a support request at <a target="_blank" href="http://www.mihaivalentin.com/about-me/#contact">http://www.mihaivalentin.com/about-me/#contact</a><br/>The information will be used only for troubleshooting purposes and may reveal some information about your WordPress setup.', 'imagepro') ?>
     <textarea style="width: 100%; height: 500px;">