Add new noam148 module because of search error

alex
1 parent f80d13c8
Showing 42 changed files with 2601 additions and 2 deletions Show diff stats
backend/components/noam148/docs/why.txt
backend/components/noam148/imagemanager/.gitignore
backend/components/noam148/imagemanager/LICENSE
backend/components/noam148/imagemanager/Module.php
backend/components/noam148/imagemanager/README.md
backend/components/noam148/imagemanager/assets/ImageManagerInputAsset.php
backend/components/noam148/imagemanager/assets/ImageManagerModuleAsset.php
backend/components/noam148/imagemanager/assets/source/css/cropper.min.css
backend/components/noam148/imagemanager/assets/source/css/imagemanager.input.css
backend/components/noam148/imagemanager/assets/source/css/imagemanager.module.css
backend/components/noam148/imagemanager/assets/source/img/img_no-image.png
backend/components/noam148/imagemanager/assets/source/js/cropper.min.js
backend/components/noam148/imagemanager/assets/source/js/script.imagemanager.input.js
backend/components/noam148/imagemanager/assets/source/js/script.imagemanager.module.js
backend/components/noam148/imagemanager/components/ImageManagerGetPath.php
backend/components/noam148/imagemanager/components/ImageManagerInputWidget.php
backend/components/noam148/imagemanager/composer.json
backend/components/noam148/imagemanager/controllers/DefaultController.php
backend/components/noam148/imagemanager/controllers/ManagerController.php
backend/components/noam148/imagemanager/docs/images/img_doc-image-manager-crop.jpg
+Пересоздал модуль, потому что в модели создавался вот такой запрос:
+
+SELECT * FROM ImageManager WHERE fileName LIKE '%I%' AND 'created' LIKE '%I%' ....
+
+В коре есть аналог, но он не заменил безболезненно noam
 \ No newline at end of file
+/nbproject
 \ No newline at end of file
+MIT License
+
+Copyright (c) 2016 noam148
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+<?php
+
+namespace backend\components\noam148\imagemanager;
+
+use Yii;
+use yii\base\UnknownClassException;
+use yii\base\InvalidConfigException;
+use yii\web\AssetManager;
+use backend\components\noam148\imagemanager\assets\ImageManagerModuleAsset;
+
+/**
+ * imagemanager module definition class
+ */
+class Module extends \yii\base\Module
+{
+
+	public $defaultRoute = 'manager';
+	//stylesheet for modal iframe
+	public $cssFiles = [];
+	//allowed Extensions for upload
+	public $allowedFileExtensions = ['jpg', 'jpeg', 'gif', 'png'];
+	//set assetPublishedUrl
+	public $assetPublishedUrl;
+
+	/**
+	 * @var bool|callable Variable that defines if the upload action will be available
+	 * This variable defaults to true, to enable uploading by default
+	 * It is also possible to give a callable function, in which case the function will be executed
+	 */
+	public $canUploadImage = true;
+
+	/**
+	 * @var bool|callable Variable that defines if the delete action will be available
+	 * This variable default to true, to enable removal if image
+	 * It is also possible to give a callable function, in which case the function will be executed
+	 */
+	public $canRemoveImage = true;
+
+	/**
+	 * @var bool|callable Variable that defines if blameable behavior is used.
+	 * This can be a boolean, or a callable function that returns a boolean
+	 */
+	public $setBlameableBehavior = false;
+
+	/**
+	 * @var bool|callable Variable that defines if the original image that was used to make the crop will be deleted after the cropped image has been saved
+	 * By default the original and the cropped image will both be saved, this function can also be a callable.
+	 */
+	public $deleteOriginalAfterEdit = false;
+
+	/**
+	 * @inheritdoc
+	 */
+	public function init()
+	{
+		parent::init();
+		//set language
+		if (!isset(Yii::$app->i18n->translations['imagemanager'])) {
+			Yii::$app->i18n->translations['imagemanager'] = [
+				'class' => 'yii\i18n\PhpMessageSource',
+				'sourceLanguage' => 'en',
+				'basePath' => '@noam148/imagemanager/messages'
+			];
+		}
+		//check extensions
+		$this->_checkExtensionsExists();
+		//check mediaPath isset
+		if (Yii::$app->imagemanager->mediaPath === null) {
+			throw new InvalidConfigException("Component param 'mediaPath' need to be set to a location");
+		}
+		//set asset path
+		$this->assetPublishedUrl = (new AssetManager)->getPublishedUrl("@vendor/noam148/yii2-image-manager/assets/source");
+
+		// Check if the canRemoveImage variable is callable
+		if (is_callable($this->canRemoveImage)) {
+			$this->canRemoveImage = call_user_func($this->canRemoveImage);
+		}
+
+		// Check if the canUploadImage variable is callable
+		if (is_callable($this->canUploadImage)) {
+			$this->canUploadImage = call_user_func($this->canUploadImage);
+		}
+
+		// Check if blameable behavior is callable
+		if (is_callable($this->setBlameableBehavior))
+			$this->setBlameableBehavior = call_user_func($this->setBlameableBehavior);
+
+		// Check if the Delete original after crop variable is callable
+		if (is_callable($this->deleteOriginalAfterEdit))
+			$this->deleteOriginalAfterEdit = call_user_func($this->deleteOriginalAfterEdit);
+
+		// Check if the variable configuration is correct in order for the module to function
+		$this->_checkVariableConfiguration();
+	}
+
+	/**
+	 * Check if extensions exists
+	 * @throws UnknownClassException Throw error if extension is not found
+	 */
+	private function _checkExtensionsExists()
+	{
+		//kartik file uploaded is installed
+		if (!class_exists('kartik\file\FileInput')) {
+			throw new UnknownClassException("Can't find: kartik\\file\FileInput. Install \"kartik-v/yii2-widget-fileinput\": \"@dev\"");
+		}
+		//check Yii imagine is installed
+		if (!class_exists('yii\imagine\Image')) {
+			throw new UnknownClassException("Can't find: yii\imagine\Image. Install \"yiisoft/yii2-imagine\": \"~2.0.0\"");
+		}
+	}
+
+	/**
+	 * Check if the module variables have the content that is expected
+	 * @throws InvalidConfigException
+	 */
+	private function _checkVariableConfiguration()
+	{
+		// Check if the canUploadImage is boolean
+		if (!is_bool($this->canUploadImage)) {
+			throw new InvalidConfigException('$canUploadImage variable only supports a boolean value, if you have a custom function you must return a boolean.');
+		}
+		// Check if the canRemoveImage is boolean
+		if (!is_bool($this->canRemoveImage)) {
+			throw new InvalidConfigException('$removeImageAllowed variable only supports a boolean value, if you have a custom function you must return a boolean.');
+		}
+		// Check if the setBlamableBehavior is boolean
+		if (!is_bool($this->setBlameableBehavior))
+			throw new InvalidConfigException('$setBlameableBehavior only supports a boolean value, if you have a custom function make sure that you return a boolean.');
+		// Check if the deleteOriginalAfterEdit is boolean
+		if (!is_bool($this->deleteOriginalAfterEdit))
+			throw new InvalidConfigException('$deleteOriginalAfterEdit only supports boolean value, if you have a custom function make sure that your return a boolean.');
+
+		// Check if the blameable behavior is set to true
+		if ($this->setBlameableBehavior) {
+			// Get the migration record
+			$mRecordMigrationRun = Yii::$app->db->createCommand('SELECT * FROM {{%migration}} WHERE `version` = \'m170223_113221_addBlameableBehavior\'')->queryOne();
+			if ($mRecordMigrationRun === false) {
+				throw new InvalidConfigException('Image Manager: You have not run the latest migration, see the documentation how to do this.');
+			}
+		}
+	}
+
+}
+Image manager for Yii2
+========================
+
+A Yii2 module/widget for upload, manage and cropping images
+
+Installation
+------------
+The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
+
+* Either run
+
+```
+php composer.phar require "noam148/yii2-image-manager" "*" 
+```
+or add
+
+```json
+"noam148/yii2-image-manager" : "*"
+```
+
+to the require section of your application's `composer.json` file.
+
+* Run the migrate to create the ImageManager table
+```
+yii migrate --migrationPath=@noam148/imagemanager/migrations
+```
+
+* Add a new component in `components` section of your application's configuration file, for example:
+
+```php
+'components' => [
+    'imagemanager' => [
+		'class' => 'noam148\imagemanager\components\ImageManagerGetPath',
+		//set media path (outside the web folder is possible)
+		'mediaPath' => '/path/where/to/store/images/media/imagemanager',
+		//path relative web folder to store the cache images
+		'cachePath' => 'assets/images',
+		//use filename (seo friendly) for resized images else use a hash
+		'useFilename' => true,
+		//show full url (for example in case of a API)
+		'absoluteUrl' => false,
+		'databaseComponent' => 'db' // The used database component by the image manager, this defaults to the Yii::$app->db component
+	],
+],
+```
+
+and in `modules` section, for example:
+
+```php
+'modules' => [
+	'imagemanager' => [
+		'class' => 'noam148\imagemanager\Module',
+		//set accces rules ()
+		'canUploadImage' => true,
+		'canRemoveImage' => function(){
+			return true;
+		},
+		'deleteOriginalAfterEdit' => false, // false: keep original image after edit. true: delete original image after edit
+		// Set if blameable behavior is used, if it is, callable function can also be used
+		'setBlameableBehavior' => false,
+		//add css files (to use in media manage selector iframe)
+		'cssFiles' => [
+			'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css',
+		],
+	],
+],
+```
+
+Usage
+-----
+To reach the imagemanager module go to:
+```
+http://www.example.com/imagemanager
+```
+![Image manager module](/docs/images/img_doc-image-manager.jpg)
+![Image manager module cropper](/docs/images/img_doc-image-manager-crop.jpg)
+
+To load the image picker see below (make sure you have a field in you table where the module can store 'id' of the ImageManager table):
+
+```php
+echo $form->field($model, 'ImageManager_id_avatar')->widget(\noam148\imagemanager\components\ImageManagerInputWidget::className(), [
+	'aspectRatio' => (16/9), //set the aspect ratio
+    'cropViewMode' => 1, //crop mode, option info: https://github.com/fengyuanchen/cropper/#viewmode
+	'showPreview' => true, //false to hide the preview
+	'showDeletePickedImageConfirm' => false, //on true show warning before detach image
+]);
+```
+![Image widget](/docs/images/img_doc-image-widget.jpg)
+![Image widget popup](/docs/images/img_doc-image-widget-popup.jpg)
+
+If you want to use a image:
+
+```php
+/*
+ * $ImageManager_id (id that is store in the ImageManager table)
+ * $width/$height width height of the image
+ * $thumbnailMode = "outbound" or "inset"
+ */
+\Yii::$app->imagemanager->getImagePath($ImageManager_id, $width, $height,$thumbnailMode)
+```
+
+Support CKEditor & TinyMce
+-----
+For using the filebrowser in CKEditor add the filebrowserImageBrowseUrl to the clientOptions of the CKEditor widget. I test it only for the CKEditor from 2amigOS but it need to work on other CKEditor widgets.
+
+```php
+use dosamigos\ckeditor\CKEditor;
+
+ echo $form->field($model, 'text')->widget(CKEditor::className(), [
+	'options' => ['rows' => 6],
+	'preset' => 'basic',
+	'clientOptions' => [
+		'filebrowserImageBrowseUrl' => yii\helpers\Url::to(['imagemanager/manager', 'view-mode'=>'iframe', 'select-type'=>'ckeditor']),
+	]
+]);
+```
+
+For using the filebrowser in TinyMce add the file_browser_callback to the clientOptions of the TinyMce widget. I test it only for the TinyMce from 2amigOS but it need to work on other TinyMce widgets. (don't forget add 'image' to your 'plugins' array)
+
+```php
+use dosamigos\tinymce\TinyMce;
+
+echo $form->field($model, 'text')->widget(TinyMce::className(), [
+	'options' => ['rows' => 6],
+	'language' => 'nl',
+	'clientOptions' => [
+		'file_browser_callback' => new yii\web\JsExpression("function(field_name, url, type, win) {
+			window.open('".yii\helpers\Url::to(['imagemanager/manager', 'view-mode'=>'iframe', 'select-type'=>'tinymce'])."&tag_name='+field_name,'','width=800,height=540 ,toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no');
+		}"),
+		'plugins' => [
+			"advlist autolink lists link charmap print preview anchor",
+			"searchreplace visualblocks code fullscreen",
+			"insertdatetime media table contextmenu paste image"
+		],
+		'toolbar' => "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
+	]
+]);
+```	
+
+**If you got questions, tips or feedback? Please, let me know!**
 \ No newline at end of file
+<?php
+
+namespace backend\components\noam148\imagemanager\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * ImageManagerInputAsset.
+ */
+class ImageManagerInputAsset extends AssetBundle
+{
+	public $sourcePath = '@vendor/noam148/yii2-image-manager/assets/source';
+	public $css = [
+		'css/imagemanager.input.css',
+	];
+	public $js = [
+		'js/script.imagemanager.input.js',
+	];
+	public $depends = [
+		'yii\web\JqueryAsset',
+		'yii\bootstrap\BootstrapPluginAsset',
+	];
+}
 \ No newline at end of file
+<?php
+
+namespace backend\components\noam148\imagemanager\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * ImageManagerModuleAsset.
+ */
+class ImageManagerModuleAsset extends AssetBundle
+{
+	public $sourcePath = '@vendor/noam148/yii2-image-manager/assets/source';
+	public $css = [
+		'css/cropper.min.css',
+		'css/imagemanager.module.css',
+	];
+	public $js = [
+		'js/cropper.min.js',
+		'js/script.imagemanager.module.js',
+	];
+	public $depends = [
+		'yii\web\JqueryAsset',
+		'yii\bootstrap\BootstrapPluginAsset',
+	];
+}
 \ No newline at end of file
+/*!
+ * Cropper v2.3.2
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2016 Fengyuan Chen and contributors
+ * Released under the MIT license
+ *
+ * Date: 2016-06-08T12:14:46.286Z
+ */.cropper-container{font-size:0;line-height:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr!important;-ms-touch-action:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.cropper-container img{display:block;width:100%;min-width:0!important;max-width:none!important;height:100%;min-height:0!important;max-height:none!important;image-orientation:0deg!important}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-wrap-box{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff;filter:alpha(opacity=0)}.cropper-dashed,.cropper-modal{opacity:.5;filter:alpha(opacity=50)}.cropper-modal{background-color:#000}.cropper-view-box{display:block;overflow:hidden;width:100%;height:100%;outline:#39f solid 1px;outline-color:rgba(51,153,255,.75)}.cropper-dashed{position:absolute;display:block;border:0 dashed #eee}.cropper-dashed.dashed-h{top:33.33333%;left:0;width:100%;height:33.33333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333%;width:33.33333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-center{position:absolute;top:50%;left:50%;display:block;width:0;height:0;opacity:.75;filter:alpha(opacity=75)}.cropper-center:after,.cropper-center:before{position:absolute;display:block;content:' ';background-color:#eee}.cropper-center:before{top:0;left:-3px;width:7px;height:1px}.cropper-center:after{top:-3px;left:0;width:1px;height:7px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;opacity:.1;filter:alpha(opacity=10)}.cropper-face{top:0;left:0;background-color:#fff}.cropper-line,.cropper-point{background-color:#39f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;opacity:.75;filter:alpha(opacity=75)}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1;filter:alpha(opacity=100)}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:' ';opacity:0;background-color:#39f;filter:alpha(opacity=0)}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75;filter:alpha(opacity=75)}}.cropper-invisible{opacity:0;filter:alpha(opacity=0)}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{position:absolute;display:block;width:0;height:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
 \ No newline at end of file
+#modal-imagemanager {
+    z-index: 999999;
+}
+
+#modal-imagemanager .modal-header h4 {
+    margin: 0;
+}
+
+#modal-imagemanager iframe {
+    border: none;
+    width: 100%;
+    min-height: 500px;
+}
+
+.image-manager-input {
+}
+
+.image-manager-input .image-wrapper {
+    margin-top: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    display: inline-block;
+    padding: 4px;
+    background: #FFF;
+}
+
+.image-manager-input .image-wrapper .img-preview {
+    background: #dadada;
+    max-width: 200px;
+    max-height: 200px;
+    height: auto;
+    line-height: 1.42857;
+}
 \ No newline at end of file
+/*CSS for module*/
+#module-imagemanager {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#module-imagemanager > .row {
+    margin: 0;
+}
+
+#module-imagemanager.tinymce,
+#module-imagemanager.ckeditor {
+    padding: 15px;
+}
+
+/*overview*/
+#module-imagemanager > .row .col-overview {
+    padding-left: 0;
+    padding-right: 0;
+    border-right: 1px solid #ddd;
+    height: 100%;
+    overflow: auto;
+}
+
+#module-imagemanager > .row .col-overview .item-overview {
+    max-height: 500px;
+    overflow: auto;
+}
+
+#module-imagemanager > .row .col-overview .item-overview .item {
+    position: relative;
+    overflow: hidden;
+    width: 128px;
+    height: 128px;
+    cursor: pointer;
+}
+
+#module-imagemanager > .row .col-overview .item-overview .item.selected {
+    background: #00ac24;
+}
+
+#module-imagemanager > .row .col-overview .item-overview .item .thumbnail {
+    margin-bottom: 0;
+}
+
+#module-imagemanager > .row .col-overview .item-overview .item .thumbnail img {
+    max-height: 118px;
+    background: #dadada;
+}
+
+#module-imagemanager > .row .col-overview .item-overview .item .thumbnail .filename {
+    background-color: rgba(255, 255, 255, 0.9);
+    position: absolute;
+    bottom: 4px;
+    left: 4px;
+    right: 4px;
+    max-height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 0 10px;
+}
+
+/*edit column*/
+#module-imagemanager > .row .col-image-editor {
+    padding-left: 0;
+    display: none;
+}
+
+/*cropper*/
+#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper {
+    max-height: 460px;
+}
+
+#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper img#image-cropper {
+    max-width: 100%;
+}
+
+/*options*/
+#module-imagemanager > .row .col-options {
+    padding-right: 0;
+}
+
+/*File upload*/
+#module-imagemanager > .row .col-options .file-input .form-control {
+    display: none;
+}
+
+#module-imagemanager > .row .col-options .form-group .file-input .input-group,
+#module-imagemanager > .row .col-options .form-group .file-input .input-group .input-group-btn {
+    float: left;
+}
+
+#module-imagemanager > .row .col-options .form-group .btn-add-flyleaf {
+    float: left;
+}
+
+/*details*/
+#module-imagemanager > .row .col-options .image-info {
+    margin-top: 10px;
+}
+
+#module-imagemanager > .row .col-options .image-info .thumbnail {
+    margin-bottom: 10px;
+}
+
+#module-imagemanager > .row .col-options .image-info .thumbnail img {
+    max-width: 100%;
+    background: #dadada;
+}
+
+#module-imagemanager > .row .col-options .image-info .edit-buttons {
+    margin-bottom: 10px;
+}
+
+#module-imagemanager > .row .col-options .image-info .details {
+}
+
+#module-imagemanager > .row .col-options .image-info .details .fileName {
+    font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+#module-imagemanager > .row .col-options .image-info .pick-image-item {
+    margin-top: 10px;
+}
+
+#module-imagemanager a.delete-image-item {
+    margin-top: 5px;
+}
 \ No newline at end of file
+/*!
+ * Cropper v2.3.2
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2016 Fengyuan Chen and contributors
+ * Released under the MIT license
+ *
+ * Date: 2016-06-08T12:14:46.286Z
+ */
+!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):jQuery)}(function(t){"use strict";function i(t){return"number"==typeof t&&!isNaN(t)}function e(t){return"undefined"==typeof t}function s(t,e){var s=[];return i(e)&&s.push(e),s.slice.apply(t,s)}function a(t,i){var e=s(arguments,2);return function(){return t.apply(i,e.concat(s(arguments)))}}function o(t){var i=t.match(/^(https?:)\/\/([^\:\/\?#]+):?(\d*)/i);return i&&(i[1]!==C.protocol||i[2]!==C.hostname||i[3]!==C.port)}function h(t){var i="timestamp="+(new Date).getTime();return t+(-1===t.indexOf("?")?"?":"&")+i}function n(t){return t?' crossOrigin="'+t+'"':""}function r(t,i){var e;return t.naturalWidth&&!mt?i(t.naturalWidth,t.naturalHeight):(e=document.createElement("img"),e.onload=function(){i(this.width,this.height)},void(e.src=t.src))}function p(t){var e=[],s=t.rotate,a=t.scaleX,o=t.scaleY;return i(a)&&i(o)&&e.push("scale("+a+","+o+")"),i(s)&&e.push("rotate("+s+"deg)"),e.length?e.join(" "):"none"}function c(t,i){var e,s,a=Ct(t.degree)%180,o=(a>90?180-a:a)*Math.PI/180,h=bt(o),n=Bt(o),r=t.width,p=t.height,c=t.aspectRatio;return i?(e=r/(n+h/c),s=e/c):(e=r*n+p*h,s=r*h+p*n),{width:e,height:s}}function l(e,s){var a,o,h,n=t("<canvas>")[0],r=n.getContext("2d"),p=0,l=0,d=s.naturalWidth,g=s.naturalHeight,u=s.rotate,f=s.scaleX,m=s.scaleY,v=i(f)&&i(m)&&(1!==f||1!==m),w=i(u)&&0!==u,x=w||v,C=d*Ct(f||1),b=g*Ct(m||1);return v&&(a=C/2,o=b/2),w&&(h=c({width:C,height:b,degree:u}),C=h.width,b=h.height,a=C/2,o=b/2),n.width=C,n.height=b,x&&(p=-d/2,l=-g/2,r.save(),r.translate(a,o)),v&&r.scale(f,m),w&&r.rotate(u*Math.PI/180),r.drawImage(e,$t(p),$t(l),$t(d),$t(g)),x&&r.restore(),n}function d(i){var e=i.length,s=0,a=0;return e&&(t.each(i,function(t,i){s+=i.pageX,a+=i.pageY}),s/=e,a/=e),{pageX:s,pageY:a}}function g(t,i,e){var s,a="";for(s=i,e+=i;e>s;s++)a+=Lt(t.getUint8(s));return a}function u(t){var i,e,s,a,o,h,n,r,p,c,l=new D(t),d=l.byteLength;if(255===l.getUint8(0)&&216===l.getUint8(1))for(p=2;d>p;){if(255===l.getUint8(p)&&225===l.getUint8(p+1)){n=p;break}p++}if(n&&(e=n+4,s=n+10,"Exif"===g(l,e,4)&&(h=l.getUint16(s),o=18761===h,(o||19789===h)&&42===l.getUint16(s+2,o)&&(a=l.getUint32(s+4,o),a>=8&&(r=s+a)))),r)for(d=l.getUint16(r,o),c=0;d>c;c++)if(p=r+12*c+2,274===l.getUint16(p,o)){p+=8,i=l.getUint16(p,o),mt&&l.setUint16(p,1,o);break}return i}function f(t){var i,e=t.replace(G,""),s=atob(e),a=s.length,o=new B(a),h=new y(o);for(i=0;a>i;i++)h[i]=s.charCodeAt(i);return o}function m(t){var i,e=new y(t),s=e.length,a="";for(i=0;s>i;i++)a+=Lt(e[i]);return"data:image/jpeg;base64,"+$(a)}function v(i,e){this.$element=t(i),this.options=t.extend({},v.DEFAULTS,t.isPlainObject(e)&&e),this.isLoaded=!1,this.isBuilt=!1,this.isCompleted=!1,this.isRotated=!1,this.isCropped=!1,this.isDisabled=!1,this.isReplaced=!1,this.isLimited=!1,this.wheeling=!1,this.isImg=!1,this.originalUrl="",this.canvas=null,this.cropBox=null,this.init()}var w=t(window),x=t(document),C=window.location,b=window.navigator,B=window.ArrayBuffer,y=window.Uint8Array,D=window.DataView,$=window.btoa,L="cropper",T="cropper-modal",X="cropper-hide",Y="cropper-hidden",k="cropper-invisible",M="cropper-move",W="cropper-crop",H="cropper-disabled",R="cropper-bg",z="mousedown touchstart pointerdown MSPointerDown",O="mousemove touchmove pointermove MSPointerMove",P="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",E="wheel mousewheel DOMMouseScroll",U="dblclick",I="load."+L,F="error."+L,j="resize."+L,A="build."+L,S="built."+L,N="cropstart."+L,_="cropmove."+L,q="cropend."+L,K="crop."+L,Z="zoom."+L,Q=/e|w|s|n|se|sw|ne|nw|all|crop|move|zoom/,V=/^data\:/,G=/^data\:([^\;]+)\;base64,/,J=/^data\:image\/jpeg.*;base64,/,tt="preview",it="action",et="e",st="w",at="s",ot="n",ht="se",nt="sw",rt="ne",pt="nw",ct="all",lt="crop",dt="move",gt="zoom",ut="none",ft=t.isFunction(t("<canvas>")[0].getContext),mt=b&&/(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(b.userAgent),vt=Number,wt=Math.min,xt=Math.max,Ct=Math.abs,bt=Math.sin,Bt=Math.cos,yt=Math.sqrt,Dt=Math.round,$t=Math.floor,Lt=String.fromCharCode;v.prototype={constructor:v,init:function(){var t,i=this.$element;if(i.is("img")){if(this.isImg=!0,this.originalUrl=t=i.attr("src"),!t)return;t=i.prop("src")}else i.is("canvas")&&ft&&(t=i[0].toDataURL());this.load(t)},trigger:function(i,e){var s=t.Event(i,e);return this.$element.trigger(s),s},load:function(i){var e,s,a=this.options,n=this.$element;if(i&&(n.one(A,a.build),!this.trigger(A).isDefaultPrevented())){if(this.url=i,this.image={},!a.checkOrientation||!B)return this.clone();if(e=t.proxy(this.read,this),V.test(i))return J.test(i)?e(f(i)):this.clone();s=new XMLHttpRequest,s.onerror=s.onabort=t.proxy(function(){this.clone()},this),s.onload=function(){e(this.response)},a.checkCrossOrigin&&o(i)&&n.prop("crossOrigin")&&(i=h(i)),s.open("get",i),s.responseType="arraybuffer",s.send()}},read:function(t){var i,e,s,a=this.options,o=u(t),h=this.image;if(o>1)switch(this.url=m(t),o){case 2:e=-1;break;case 3:i=-180;break;case 4:s=-1;break;case 5:i=90,s=-1;break;case 6:i=90;break;case 7:i=90,e=-1;break;case 8:i=-90}a.rotatable&&(h.rotate=i),a.scalable&&(h.scaleX=e,h.scaleY=s),this.clone()},clone:function(){var i,e,s=this.options,a=this.$element,r=this.url,p="";s.checkCrossOrigin&&o(r)&&(p=a.prop("crossOrigin"),p?i=r:(p="anonymous",i=h(r))),this.crossOrigin=p,this.crossOriginUrl=i,this.$clone=e=t("<img"+n(p)+' src="'+(i||r)+'">'),this.isImg?a[0].complete?this.start():a.one(I,t.proxy(this.start,this)):e.one(I,t.proxy(this.start,this)).one(F,t.proxy(this.stop,this)).addClass(X).insertAfter(a)},start:function(){var i=this.$element,e=this.$clone;this.isImg||(e.off(F,this.stop),i=e),r(i[0],t.proxy(function(i,e){t.extend(this.image,{naturalWidth:i,naturalHeight:e,aspectRatio:i/e}),this.isLoaded=!0,this.build()},this))},stop:function(){this.$clone.remove(),this.$clone=null},build:function(){var i,e,s,a=this.options,o=this.$element,h=this.$clone;this.isLoaded&&(this.isBuilt&&this.unbuild(),this.$container=o.parent(),this.$cropper=i=t(v.TEMPLATE),this.$canvas=i.find(".cropper-canvas").append(h),this.$dragBox=i.find(".cropper-drag-box"),this.$cropBox=e=i.find(".cropper-crop-box"),this.$viewBox=i.find(".cropper-view-box"),this.$face=s=e.find(".cropper-face"),o.addClass(Y).after(i),this.isImg||h.removeClass(X),this.initPreview(),this.bind(),a.aspectRatio=xt(0,a.aspectRatio)||NaN,a.viewMode=xt(0,wt(3,Dt(a.viewMode)))||0,a.autoCrop?(this.isCropped=!0,a.modal&&this.$dragBox.addClass(T)):e.addClass(Y),a.guides||e.find(".cropper-dashed").addClass(Y),a.center||e.find(".cropper-center").addClass(Y),a.cropBoxMovable&&s.addClass(M).data(it,ct),a.highlight||s.addClass(k),a.background&&i.addClass(R),a.cropBoxResizable||e.find(".cropper-line, .cropper-point").addClass(Y),this.setDragMode(a.dragMode),this.render(),this.isBuilt=!0,this.setData(a.data),o.one(S,a.built),setTimeout(t.proxy(function(){this.trigger(S),this.trigger(K,this.getData()),this.isCompleted=!0},this),0))},unbuild:function(){this.isBuilt&&(this.isBuilt=!1,this.isCompleted=!1,this.initialImage=null,this.initialCanvas=null,this.initialCropBox=null,this.container=null,this.canvas=null,this.cropBox=null,this.unbind(),this.resetPreview(),this.$preview=null,this.$viewBox=null,this.$cropBox=null,this.$dragBox=null,this.$canvas=null,this.$container=null,this.$cropper.remove(),this.$cropper=null)},render:function(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.isCropped&&this.renderCropBox()},initContainer:function(){var t=this.options,i=this.$element,e=this.$container,s=this.$cropper;s.addClass(Y),i.removeClass(Y),s.css(this.container={width:xt(e.width(),vt(t.minContainerWidth)||200),height:xt(e.height(),vt(t.minContainerHeight)||100)}),i.addClass(Y),s.removeClass(Y)},initCanvas:function(){var i,e=this.options.viewMode,s=this.container,a=s.width,o=s.height,h=this.image,n=h.naturalWidth,r=h.naturalHeight,p=90===Ct(h.rotate),c=p?r:n,l=p?n:r,d=c/l,g=a,u=o;o*d>a?3===e?g=o*d:u=a/d:3===e?u=a/d:g=o*d,i={naturalWidth:c,naturalHeight:l,aspectRatio:d,width:g,height:u},i.oldLeft=i.left=(a-g)/2,i.oldTop=i.top=(o-u)/2,this.canvas=i,this.isLimited=1===e||2===e,this.limitCanvas(!0,!0),this.initialImage=t.extend({},h),this.initialCanvas=t.extend({},i)},limitCanvas:function(t,i){var e,s,a,o,h=this.options,n=h.viewMode,r=this.container,p=r.width,c=r.height,l=this.canvas,d=l.aspectRatio,g=this.cropBox,u=this.isCropped&&g;t&&(e=vt(h.minCanvasWidth)||0,s=vt(h.minCanvasHeight)||0,n&&(n>1?(e=xt(e,p),s=xt(s,c),3===n&&(s*d>e?e=s*d:s=e/d)):e?e=xt(e,u?g.width:0):s?s=xt(s,u?g.height:0):u&&(e=g.width,s=g.height,s*d>e?e=s*d:s=e/d)),e&&s?s*d>e?s=e/d:e=s*d:e?s=e/d:s&&(e=s*d),l.minWidth=e,l.minHeight=s,l.maxWidth=1/0,l.maxHeight=1/0),i&&(n?(a=p-l.width,o=c-l.height,l.minLeft=wt(0,a),l.minTop=wt(0,o),l.maxLeft=xt(0,a),l.maxTop=xt(0,o),u&&this.isLimited&&(l.minLeft=wt(g.left,g.left+g.width-l.width),l.minTop=wt(g.top,g.top+g.height-l.height),l.maxLeft=g.left,l.maxTop=g.top,2===n&&(l.width>=p&&(l.minLeft=wt(0,a),l.maxLeft=xt(0,a)),l.height>=c&&(l.minTop=wt(0,o),l.maxTop=xt(0,o))))):(l.minLeft=-l.width,l.minTop=-l.height,l.maxLeft=p,l.maxTop=c))},renderCanvas:function(t){var i,e,s=this.canvas,a=this.image,o=a.rotate,h=a.naturalWidth,n=a.naturalHeight;this.isRotated&&(this.isRotated=!1,e=c({width:a.width,height:a.height,degree:o}),i=e.width/e.height,i!==s.aspectRatio&&(s.left-=(e.width-s.width)/2,s.top-=(e.height-s.height)/2,s.width=e.width,s.height=e.height,s.aspectRatio=i,s.naturalWidth=h,s.naturalHeight=n,o%180&&(e=c({width:h,height:n,degree:o}),s.naturalWidth=e.width,s.naturalHeight=e.height),this.limitCanvas(!0,!1))),(s.width>s.maxWidth||s.width<s.minWidth)&&(s.left=s.oldLeft),(s.height>s.maxHeight||s.height<s.minHeight)&&(s.top=s.oldTop),s.width=wt(xt(s.width,s.minWidth),s.maxWidth),s.height=wt(xt(s.height,s.minHeight),s.maxHeight),this.limitCanvas(!1,!0),s.oldLeft=s.left=wt(xt(s.left,s.minLeft),s.maxLeft),s.oldTop=s.top=wt(xt(s.top,s.minTop),s.maxTop),this.$canvas.css({width:s.width,height:s.height,left:s.left,top:s.top}),this.renderImage(),this.isCropped&&this.isLimited&&this.limitCropBox(!0,!0),t&&this.output()},renderImage:function(i){var e,s=this.canvas,a=this.image;a.rotate&&(e=c({width:s.width,height:s.height,degree:a.rotate,aspectRatio:a.aspectRatio},!0)),t.extend(a,e?{width:e.width,height:e.height,left:(s.width-e.width)/2,top:(s.height-e.height)/2}:{width:s.width,height:s.height,left:0,top:0}),this.$clone.css({width:a.width,height:a.height,marginLeft:a.left,marginTop:a.top,transform:p(a)}),i&&this.output()},initCropBox:function(){var i=this.options,e=this.canvas,s=i.aspectRatio,a=vt(i.autoCropArea)||.8,o={width:e.width,height:e.height};s&&(e.height*s>e.width?o.height=o.width/s:o.width=o.height*s),this.cropBox=o,this.limitCropBox(!0,!0),o.width=wt(xt(o.width,o.minWidth),o.maxWidth),o.height=wt(xt(o.height,o.minHeight),o.maxHeight),o.width=xt(o.minWidth,o.width*a),o.height=xt(o.minHeight,o.height*a),o.oldLeft=o.left=e.left+(e.width-o.width)/2,o.oldTop=o.top=e.top+(e.height-o.height)/2,this.initialCropBox=t.extend({},o)},limitCropBox:function(t,i){var e,s,a,o,h=this.options,n=h.aspectRatio,r=this.container,p=r.width,c=r.height,l=this.canvas,d=this.cropBox,g=this.isLimited;t&&(e=vt(h.minCropBoxWidth)||0,s=vt(h.minCropBoxHeight)||0,e=wt(e,p),s=wt(s,c),a=wt(p,g?l.width:p),o=wt(c,g?l.height:c),n&&(e&&s?s*n>e?s=e/n:e=s*n:e?s=e/n:s&&(e=s*n),o*n>a?o=a/n:a=o*n),d.minWidth=wt(e,a),d.minHeight=wt(s,o),d.maxWidth=a,d.maxHeight=o),i&&(g?(d.minLeft=xt(0,l.left),d.minTop=xt(0,l.top),d.maxLeft=wt(p,l.left+l.width)-d.width,d.maxTop=wt(c,l.top+l.height)-d.height):(d.minLeft=0,d.minTop=0,d.maxLeft=p-d.width,d.maxTop=c-d.height))},renderCropBox:function(){var t=this.options,i=this.container,e=i.width,s=i.height,a=this.cropBox;(a.width>a.maxWidth||a.width<a.minWidth)&&(a.left=a.oldLeft),(a.height>a.maxHeight||a.height<a.minHeight)&&(a.top=a.oldTop),a.width=wt(xt(a.width,a.minWidth),a.maxWidth),a.height=wt(xt(a.height,a.minHeight),a.maxHeight),this.limitCropBox(!1,!0),a.oldLeft=a.left=wt(xt(a.left,a.minLeft),a.maxLeft),a.oldTop=a.top=wt(xt(a.top,a.minTop),a.maxTop),t.movable&&t.cropBoxMovable&&this.$face.data(it,a.width===e&&a.height===s?dt:ct),this.$cropBox.css({width:a.width,height:a.height,left:a.left,top:a.top}),this.isCropped&&this.isLimited&&this.limitCanvas(!0,!0),this.isDisabled||this.output()},output:function(){this.preview(),this.isCompleted&&this.trigger(K,this.getData())},initPreview:function(){var i,e=n(this.crossOrigin),s=e?this.crossOriginUrl:this.url;this.$preview=t(this.options.preview),this.$clone2=i=t("<img"+e+' src="'+s+'">'),this.$viewBox.html(i),this.$preview.each(function(){var i=t(this);i.data(tt,{width:i.width(),height:i.height(),html:i.html()}),i.html("<img"+e+' src="'+s+'" style="display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;">')})},resetPreview:function(){this.$preview.each(function(){var i=t(this),e=i.data(tt);i.css({width:e.width,height:e.height}).html(e.html).removeData(tt)})},preview:function(){var i=this.image,e=this.canvas,s=this.cropBox,a=s.width,o=s.height,h=i.width,n=i.height,r=s.left-e.left-i.left,c=s.top-e.top-i.top;this.isCropped&&!this.isDisabled&&(this.$clone2.css({width:h,height:n,marginLeft:-r,marginTop:-c,transform:p(i)}),this.$preview.each(function(){var e=t(this),s=e.data(tt),l=s.width,d=s.height,g=l,u=d,f=1;a&&(f=l/a,u=o*f),o&&u>d&&(f=d/o,g=a*f,u=d),e.css({width:g,height:u}).find("img").css({width:h*f,height:n*f,marginLeft:-r*f,marginTop:-c*f,transform:p(i)})}))},bind:function(){var i=this.options,e=this.$element,s=this.$cropper;t.isFunction(i.cropstart)&&e.on(N,i.cropstart),t.isFunction(i.cropmove)&&e.on(_,i.cropmove),t.isFunction(i.cropend)&&e.on(q,i.cropend),t.isFunction(i.crop)&&e.on(K,i.crop),t.isFunction(i.zoom)&&e.on(Z,i.zoom),s.on(z,t.proxy(this.cropStart,this)),i.zoomable&&i.zoomOnWheel&&s.on(E,t.proxy(this.wheel,this)),i.toggleDragModeOnDblclick&&s.on(U,t.proxy(this.dblclick,this)),x.on(O,this._cropMove=a(this.cropMove,this)).on(P,this._cropEnd=a(this.cropEnd,this)),i.responsive&&w.on(j,this._resize=a(this.resize,this))},unbind:function(){var i=this.options,e=this.$element,s=this.$cropper;t.isFunction(i.cropstart)&&e.off(N,i.cropstart),t.isFunction(i.cropmove)&&e.off(_,i.cropmove),t.isFunction(i.cropend)&&e.off(q,i.cropend),t.isFunction(i.crop)&&e.off(K,i.crop),t.isFunction(i.zoom)&&e.off(Z,i.zoom),s.off(z,this.cropStart),i.zoomable&&i.zoomOnWheel&&s.off(E,this.wheel),i.toggleDragModeOnDblclick&&s.off(U,this.dblclick),x.off(O,this._cropMove).off(P,this._cropEnd),i.responsive&&w.off(j,this._resize)},resize:function(){var i,e,s,a=this.options.restore,o=this.$container,h=this.container;!this.isDisabled&&h&&(s=o.width()/h.width,1===s&&o.height()===h.height||(a&&(i=this.getCanvasData(),e=this.getCropBoxData()),this.render(),a&&(this.setCanvasData(t.each(i,function(t,e){i[t]=e*s})),this.setCropBoxData(t.each(e,function(t,i){e[t]=i*s})))))},dblclick:function(){this.isDisabled||(this.$dragBox.hasClass(W)?this.setDragMode(dt):this.setDragMode(lt))},wheel:function(i){var e=i.originalEvent||i,s=vt(this.options.wheelZoomRatio)||.1,a=1;this.isDisabled||(i.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout(t.proxy(function(){this.wheeling=!1},this),50),e.deltaY?a=e.deltaY>0?1:-1:e.wheelDelta?a=-e.wheelDelta/120:e.detail&&(a=e.detail>0?1:-1),this.zoom(-a*s,i)))},cropStart:function(i){var e,s,a=this.options,o=i.originalEvent,h=o&&o.touches,n=i;if(!this.isDisabled){if(h){if(e=h.length,e>1){if(!a.zoomable||!a.zoomOnTouch||2!==e)return;n=h[1],this.startX2=n.pageX,this.startY2=n.pageY,s=gt}n=h[0]}if(s=s||t(n.target).data(it),Q.test(s)){if(this.trigger(N,{originalEvent:o,action:s}).isDefaultPrevented())return;i.preventDefault(),this.action=s,this.cropping=!1,this.startX=n.pageX||o&&o.pageX,this.startY=n.pageY||o&&o.pageY,s===lt&&(this.cropping=!0,this.$dragBox.addClass(T))}}},cropMove:function(t){var i,e=this.options,s=t.originalEvent,a=s&&s.touches,o=t,h=this.action;if(!this.isDisabled){if(a){if(i=a.length,i>1){if(!e.zoomable||!e.zoomOnTouch||2!==i)return;o=a[1],this.endX2=o.pageX,this.endY2=o.pageY}o=a[0]}if(h){if(this.trigger(_,{originalEvent:s,action:h}).isDefaultPrevented())return;t.preventDefault(),this.endX=o.pageX||s&&s.pageX,this.endY=o.pageY||s&&s.pageY,this.change(o.shiftKey,h===gt?t:null)}}},cropEnd:function(t){var i=t.originalEvent,e=this.action;this.isDisabled||e&&(t.preventDefault(),this.cropping&&(this.cropping=!1,this.$dragBox.toggleClass(T,this.isCropped&&this.options.modal)),this.action="",this.trigger(q,{originalEvent:i,action:e}))},change:function(t,i){var e,s,a=this.options,o=a.aspectRatio,h=this.action,n=this.container,r=this.canvas,p=this.cropBox,c=p.width,l=p.height,d=p.left,g=p.top,u=d+c,f=g+l,m=0,v=0,w=n.width,x=n.height,C=!0;switch(!o&&t&&(o=c&&l?c/l:1),this.isLimited&&(m=p.minLeft,v=p.minTop,w=m+wt(n.width,r.left+r.width),x=v+wt(n.height,r.top+r.height)),s={x:this.endX-this.startX,y:this.endY-this.startY},o&&(s.X=s.y*o,s.Y=s.x/o),h){case ct:d+=s.x,g+=s.y;break;case et:if(s.x>=0&&(u>=w||o&&(v>=g||f>=x))){C=!1;break}c+=s.x,o&&(l=c/o,g-=s.Y/2),0>c&&(h=st,c=0);break;case ot:if(s.y<=0&&(v>=g||o&&(m>=d||u>=w))){C=!1;break}l-=s.y,g+=s.y,o&&(c=l*o,d+=s.X/2),0>l&&(h=at,l=0);break;case st:if(s.x<=0&&(m>=d||o&&(v>=g||f>=x))){C=!1;break}c-=s.x,d+=s.x,o&&(l=c/o,g+=s.Y/2),0>c&&(h=et,c=0);break;case at:if(s.y>=0&&(f>=x||o&&(m>=d||u>=w))){C=!1;break}l+=s.y,o&&(c=l*o,d-=s.X/2),0>l&&(h=ot,l=0);break;case rt:if(o){if(s.y<=0&&(v>=g||u>=w)){C=!1;break}l-=s.y,g+=s.y,c=l*o}else s.x>=0?w>u?c+=s.x:s.y<=0&&v>=g&&(C=!1):c+=s.x,s.y<=0?g>v&&(l-=s.y,g+=s.y):(l-=s.y,g+=s.y);0>c&&0>l?(h=nt,l=0,c=0):0>c?(h=pt,c=0):0>l&&(h=ht,l=0);break;case pt:if(o){if(s.y<=0&&(v>=g||m>=d)){C=!1;break}l-=s.y,g+=s.y,c=l*o,d+=s.X}else s.x<=0?d>m?(c-=s.x,d+=s.x):s.y<=0&&v>=g&&(C=!1):(c-=s.x,d+=s.x),s.y<=0?g>v&&(l-=s.y,g+=s.y):(l-=s.y,g+=s.y);0>c&&0>l?(h=ht,l=0,c=0):0>c?(h=rt,c=0):0>l&&(h=nt,l=0);break;case nt:if(o){if(s.x<=0&&(m>=d||f>=x)){C=!1;break}c-=s.x,d+=s.x,l=c/o}else s.x<=0?d>m?(c-=s.x,d+=s.x):s.y>=0&&f>=x&&(C=!1):(c-=s.x,d+=s.x),s.y>=0?x>f&&(l+=s.y):l+=s.y;0>c&&0>l?(h=rt,l=0,c=0):0>c?(h=ht,c=0):0>l&&(h=pt,l=0);break;case ht:if(o){if(s.x>=0&&(u>=w||f>=x)){C=!1;break}c+=s.x,l=c/o}else s.x>=0?w>u?c+=s.x:s.y>=0&&f>=x&&(C=!1):c+=s.x,s.y>=0?x>f&&(l+=s.y):l+=s.y;0>c&&0>l?(h=pt,l=0,c=0):0>c?(h=nt,c=0):0>l&&(h=rt,l=0);break;case dt:this.move(s.x,s.y),C=!1;break;case gt:this.zoom(function(t,i,e,s){var a=yt(t*t+i*i),o=yt(e*e+s*s);return(o-a)/a}(Ct(this.startX-this.startX2),Ct(this.startY-this.startY2),Ct(this.endX-this.endX2),Ct(this.endY-this.endY2)),i),this.startX2=this.endX2,this.startY2=this.endY2,C=!1;break;case lt:if(!s.x||!s.y){C=!1;break}e=this.$cropper.offset(),d=this.startX-e.left,g=this.startY-e.top,c=p.minWidth,l=p.minHeight,s.x>0?h=s.y>0?ht:rt:s.x<0&&(d-=c,h=s.y>0?nt:pt),s.y<0&&(g-=l),this.isCropped||(this.$cropBox.removeClass(Y),this.isCropped=!0,this.isLimited&&this.limitCropBox(!0,!0))}C&&(p.width=c,p.height=l,p.left=d,p.top=g,this.action=h,this.renderCropBox()),this.startX=this.endX,this.startY=this.endY},crop:function(){this.isBuilt&&!this.isDisabled&&(this.isCropped||(this.isCropped=!0,this.limitCropBox(!0,!0),this.options.modal&&this.$dragBox.addClass(T),this.$cropBox.removeClass(Y)),this.setCropBoxData(this.initialCropBox))},reset:function(){this.isBuilt&&!this.isDisabled&&(this.image=t.extend({},this.initialImage),this.canvas=t.extend({},this.initialCanvas),this.cropBox=t.extend({},this.initialCropBox),this.renderCanvas(),this.isCropped&&this.renderCropBox())},clear:function(){this.isCropped&&!this.isDisabled&&(t.extend(this.cropBox,{left:0,top:0,width:0,height:0}),this.isCropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),this.$dragBox.removeClass(T),this.$cropBox.addClass(Y))},replace:function(t,i){!this.isDisabled&&t&&(this.isImg&&this.$element.attr("src",t),i?(this.url=t,this.$clone.attr("src",t),this.isBuilt&&this.$preview.find("img").add(this.$clone2).attr("src",t)):(this.isImg&&(this.isReplaced=!0),this.options.data=null,this.load(t)))},enable:function(){this.isBuilt&&(this.isDisabled=!1,this.$cropper.removeClass(H))},disable:function(){this.isBuilt&&(this.isDisabled=!0,this.$cropper.addClass(H))},destroy:function(){var t=this.$element;this.isLoaded?(this.isImg&&this.isReplaced&&t.attr("src",this.originalUrl),this.unbuild(),t.removeClass(Y)):this.isImg?t.off(I,this.start):this.$clone&&this.$clone.remove(),t.removeData(L)},move:function(t,i){var s=this.canvas;this.moveTo(e(t)?t:s.left+vt(t),e(i)?i:s.top+vt(i))},moveTo:function(t,s){var a=this.canvas,o=!1;e(s)&&(s=t),t=vt(t),s=vt(s),this.isBuilt&&!this.isDisabled&&this.options.movable&&(i(t)&&(a.left=t,o=!0),i(s)&&(a.top=s,o=!0),o&&this.renderCanvas(!0))},zoom:function(t,i){var e=this.canvas;t=vt(t),t=0>t?1/(1-t):1+t,this.zoomTo(e.width*t/e.naturalWidth,i)},zoomTo:function(t,i){var e,s,a,o,h,n=this.options,r=this.canvas,p=r.width,c=r.height,l=r.naturalWidth,g=r.naturalHeight;if(t=vt(t),t>=0&&this.isBuilt&&!this.isDisabled&&n.zoomable){if(s=l*t,a=g*t,i&&(e=i.originalEvent),this.trigger(Z,{originalEvent:e,oldRatio:p/l,ratio:s/l}).isDefaultPrevented())return;e?(o=this.$cropper.offset(),h=e.touches?d(e.touches):{pageX:i.pageX||e.pageX||0,pageY:i.pageY||e.pageY||0},r.left-=(s-p)*((h.pageX-o.left-r.left)/p),r.top-=(a-c)*((h.pageY-o.top-r.top)/c)):(r.left-=(s-p)/2,r.top-=(a-c)/2),r.width=s,r.height=a,this.renderCanvas(!0)}},rotate:function(t){this.rotateTo((this.image.rotate||0)+vt(t))},rotateTo:function(t){t=vt(t),i(t)&&this.isBuilt&&!this.isDisabled&&this.options.rotatable&&(this.image.rotate=t%360,this.isRotated=!0,this.renderCanvas(!0))},scale:function(t,s){var a=this.image,o=!1;e(s)&&(s=t),t=vt(t),s=vt(s),this.isBuilt&&!this.isDisabled&&this.options.scalable&&(i(t)&&(a.scaleX=t,o=!0),i(s)&&(a.scaleY=s,o=!0),o&&this.renderImage(!0))},scaleX:function(t){var e=this.image.scaleY;this.scale(t,i(e)?e:1)},scaleY:function(t){var e=this.image.scaleX;this.scale(i(e)?e:1,t)},getData:function(i){var e,s,a=this.options,o=this.image,h=this.canvas,n=this.cropBox;return this.isBuilt&&this.isCropped?(s={x:n.left-h.left,y:n.top-h.top,width:n.width,height:n.height},e=o.width/o.naturalWidth,t.each(s,function(t,a){a/=e,s[t]=i?Dt(a):a})):s={x:0,y:0,width:0,height:0},a.rotatable&&(s.rotate=o.rotate||0),a.scalable&&(s.scaleX=o.scaleX||1,s.scaleY=o.scaleY||1),s},setData:function(e){var s,a,o,h=this.options,n=this.image,r=this.canvas,p={};t.isFunction(e)&&(e=e.call(this.element)),this.isBuilt&&!this.isDisabled&&t.isPlainObject(e)&&(h.rotatable&&i(e.rotate)&&e.rotate!==n.rotate&&(n.rotate=e.rotate,this.isRotated=s=!0),h.scalable&&(i(e.scaleX)&&e.scaleX!==n.scaleX&&(n.scaleX=e.scaleX,a=!0),i(e.scaleY)&&e.scaleY!==n.scaleY&&(n.scaleY=e.scaleY,a=!0)),s?this.renderCanvas():a&&this.renderImage(),o=n.width/n.naturalWidth,i(e.x)&&(p.left=e.x*o+r.left),i(e.y)&&(p.top=e.y*o+r.top),i(e.width)&&(p.width=e.width*o),i(e.height)&&(p.height=e.height*o),this.setCropBoxData(p))},getContainerData:function(){return this.isBuilt?this.container:{}},getImageData:function(){return this.isLoaded?this.image:{}},getCanvasData:function(){var i=this.canvas,e={};return this.isBuilt&&t.each(["left","top","width","height","naturalWidth","naturalHeight"],function(t,s){e[s]=i[s]}),e},setCanvasData:function(e){var s=this.canvas,a=s.aspectRatio;t.isFunction(e)&&(e=e.call(this.$element)),this.isBuilt&&!this.isDisabled&&t.isPlainObject(e)&&(i(e.left)&&(s.left=e.left),i(e.top)&&(s.top=e.top),i(e.width)?(s.width=e.width,s.height=e.width/a):i(e.height)&&(s.height=e.height,s.width=e.height*a),this.renderCanvas(!0))},getCropBoxData:function(){var t,i=this.cropBox;return this.isBuilt&&this.isCropped&&(t={left:i.left,top:i.top,width:i.width,height:i.height}),t||{}},setCropBoxData:function(e){var s,a,o=this.cropBox,h=this.options.aspectRatio;t.isFunction(e)&&(e=e.call(this.$element)),this.isBuilt&&this.isCropped&&!this.isDisabled&&t.isPlainObject(e)&&(i(e.left)&&(o.left=e.left),i(e.top)&&(o.top=e.top),i(e.width)&&(s=!0,o.width=e.width),i(e.height)&&(a=!0,o.height=e.height),h&&(s?o.height=o.width/h:a&&(o.width=o.height*h)),this.renderCropBox())},getCroppedCanvas:function(i){var e,s,a,o,h,n,r,p,c,d,g;return this.isBuilt&&ft?this.isCropped?(t.isPlainObject(i)||(i={}),g=this.getData(),e=g.width,s=g.height,p=e/s,t.isPlainObject(i)&&(h=i.width,n=i.height,h?(n=h/p,r=h/e):n&&(h=n*p,r=n/s)),a=$t(h||e),o=$t(n||s),c=t("<canvas>")[0],c.width=a,c.height=o,d=c.getContext("2d"),i.fillColor&&(d.fillStyle=i.fillColor,d.fillRect(0,0,a,o)),d.drawImage.apply(d,function(){var t,i,a,o,h,n,p=l(this.$clone[0],this.image),c=p.width,d=p.height,u=this.canvas,f=[p],m=g.x+u.naturalWidth*(Ct(g.scaleX||1)-1)/2,v=g.y+u.naturalHeight*(Ct(g.scaleY||1)-1)/2;return-e>=m||m>c?m=t=a=h=0:0>=m?(a=-m,m=0,t=h=wt(c,e+m)):c>=m&&(a=0,t=h=wt(e,c-m)),0>=t||-s>=v||v>d?v=i=o=n=0:0>=v?(o=-v,v=0,i=n=wt(d,s+v)):d>=v&&(o=0,i=n=wt(s,d-v)),f.push($t(m),$t(v),$t(t),$t(i)),r&&(a*=r,o*=r,h*=r,n*=r),h>0&&n>0&&f.push($t(a),$t(o),$t(h),$t(n)),f}.call(this)),c):l(this.$clone[0],this.image):void 0},setAspectRatio:function(t){var i=this.options;this.isDisabled||e(t)||(i.aspectRatio=xt(0,t)||NaN,this.isBuilt&&(this.initCropBox(),this.isCropped&&this.renderCropBox()))},setDragMode:function(t){var i,e,s=this.options;this.isLoaded&&!this.isDisabled&&(i=t===lt,e=s.movable&&t===dt,t=i||e?t:ut,this.$dragBox.data(it,t).toggleClass(W,i).toggleClass(M,e),s.cropBoxMovable||this.$face.data(it,t).toggleClass(W,i).toggleClass(M,e))}},v.DEFAULTS={viewMode:0,dragMode:"crop",aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,build:null,built:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},v.setDefaults=function(i){t.extend(v.DEFAULTS,i)},v.TEMPLATE='<div class="cropper-container"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-action="e"></span><span class="cropper-line line-n" data-action="n"></span><span class="cropper-line line-w" data-action="w"></span><span class="cropper-line line-s" data-action="s"></span><span class="cropper-point point-e" data-action="e"></span><span class="cropper-point point-n" data-action="n"></span><span class="cropper-point point-w" data-action="w"></span><span class="cropper-point point-s" data-action="s"></span><span class="cropper-point point-ne" data-action="ne"></span><span class="cropper-point point-nw" data-action="nw"></span><span class="cropper-point point-sw" data-action="sw"></span><span class="cropper-point point-se" data-action="se"></span></div></div>',v.other=t.fn.cropper,t.fn.cropper=function(i){var a,o=s(arguments,1);return this.each(function(){var e,s,h=t(this),n=h.data(L);if(!n){if(/destroy/.test(i))return;e=t.extend({},h.data(),t.isPlainObject(i)&&i),h.data(L,n=new v(this,e))}"string"==typeof i&&t.isFunction(s=n[i])&&(a=s.apply(n,o))}),e(a)?this:a},t.fn.cropper.Constructor=v,t.fn.cropper.setDefaults=v.setDefaults,t.fn.cropper.noConflict=function(){return t.fn.cropper=v.other,this}});
 \ No newline at end of file
+var imageManagerInput = {
+    baseUrl: null,
+    //language
+    message: null,
+    //init imageManagerInput
+    init: function () {
+        //create modal
+        imageManagerInput.initModal();
+    },
+    //creat image Manager modal
+    initModal: function () {
+        //check if modal not jet exists
+        if ($("#modal-imagemanager").length === 0) {
+            //set html modal in var
+            var sModalHtml = '<div tabindex="-1" role="dialog" class="fade modal" id="modal-imagemanager">';
+            sModalHtml += '<div class="modal-dialog modal-lg">';
+            sModalHtml += '<div class="modal-content">';
+            sModalHtml += '<div class="modal-header">';
+            sModalHtml += '<button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>';
+            sModalHtml += '<h4>Image manager</h4>';
+            sModalHtml += '</div>';
+            sModalHtml += '<div class="modal-body">';
+            sModalHtml += '<iframe src="#"></iframe>';
+            sModalHtml += '</div>';
+            sModalHtml += '</div>';
+            sModalHtml += '</div>';
+            sModalHtml += '</div>';
+            //prepend data to body
+            $('body').prepend(sModalHtml);
+        }
+    },
+    //open media manager modal
+    openModal: function (inputId, aspectRatio, cropViewMode) {
+        //get selected item
+        var iImageId = $("#" + inputId).val();
+        var srcImageIdQueryString = "";
+        if (iImageId !== "") {
+            srcImageIdQueryString = "&image-id=" + iImageId;
+        }
+        //create iframe url
+        var queryStringStartCharacter = ((imageManagerInput.baseUrl).indexOf('?') == -1) ? '?' : '&';
+        var imageManagerUrl = imageManagerInput.baseUrl + queryStringStartCharacter + "view-mode=iframe&input-id=" + inputId + "&aspect-ratio=" + aspectRatio + "&crop-view-mode=" + cropViewMode + srcImageIdQueryString;
+        //set iframe path
+        $("#modal-imagemanager iframe").attr("src", imageManagerUrl);
+        //set translation title for modal header
+        $("#modal-imagemanager .modal-dialog .modal-header h4").text(imageManagerInput.message.imageManager);
+        //open modal
+        $("#modal-imagemanager").modal("show");
+    },
+    //close media manager modal
+    closeModal: function () {
+        $("#modal-imagemanager").modal("hide");
+    },
+    //delete picked image
+    deletePickedImage: function (inputId) {
+        //remove value of the input field
+        var sFieldId = inputId;
+        var sFieldNameId = sFieldId + "_name";
+        var sImagePreviewId = sFieldId + "_image";
+        var bShowConfirm = JSON.parse($(".delete-selected-image[data-input-id='" + inputId + "']").data("show-delete-confirm"));
+        //show warning if bShowConfirm == true
+        if (bShowConfirm) {
+            if (confirm(imageManagerInput.message.detachWarningMessage) == false) {
+                return false;
+            }
+        }
+        //set input data
+        $('#' + sFieldId).val("");
+        $('#' + sFieldNameId).val("");
+        //trigger change
+        $('#' + sFieldId).trigger("change");
+        //hide image
+        $('#' + sImagePreviewId).attr("src", "").parent().addClass("hide");
+        //delete hide class
+        $(".delete-selected-image[data-input-id='" + inputId + "']").addClass("hide");
+    }
+};
+
+$(document).ready(function () {
+    //init Image manage
+    imageManagerInput.init();
+
+    //open media manager modal
+    $(document).on("click", ".open-modal-imagemanager", function () {
+        var aspectRatio = $(this).data("aspect-ratio");
+        var cropViewMode = $(this).data("crop-view-mode");
+        var inputId = $(this).data("input-id");
+        //open selector id
+        imageManagerInput.openModal(inputId, aspectRatio, cropViewMode);
+    });
+
+    //delete picked image
+    $(document).on("click", ".delete-selected-image", function () {
+        var inputId = $(this).data("input-id");
+        //open selector id
+        imageManagerInput.deletePickedImage(inputId);
+    });
+});
 \ No newline at end of file
+var imageManagerModule = {
+    //params for input selector
+    fieldId: null,
+    cropRatio: null,
+    cropViewMode: 1,
+    defaultImageId: null,
+    selectType: null,
+    //current selected image
+    selectedImage: null,
+    //language
+    message: null,
+    //init imageManager
+    init: function () {
+        //init cropper
+        $('#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper img#image-cropper').cropper({
+            viewMode: imageManagerModule.cropViewMode
+        });
+
+        //preselect image if image-id isset
+        if (imageManagerModule.defaultImageId !== "") {
+            imageManagerModule.selectImage(imageManagerModule.defaultImageId);
+        }
+
+        //set selected after pjax complete
+        $('#pjax-mediamanager').on('pjax:complete', function () {
+            if (imageManagerModule.selectedImage !== null) {
+                imageManagerModule.selectImage(imageManagerModule.selectedImage.id);
+            }
+        });
+    },
+    //filter result
+    filterImageResult: function (searchTerm) {
+        //set new url
+        var newUrl = window.queryStringParameter.set(window.location.href, "ImageManagerSearch[globalSearch]", searchTerm);
+        //set pjax
+        $.pjax({
+            url: newUrl,
+            container: "#pjax-mediamanager",
+            push: false,
+            replace: false,
+            timeout: 5000,
+            scrollTo: false
+        });
+    },
+    //select an image
+    selectImage: function (id) {
+        //set selected class
+        $("#module-imagemanager .item-overview .item").removeClass("selected");
+        $("#module-imagemanager .item-overview .item[data-key='" + id + "']").addClass("selected");
+        //get details
+        imageManagerModule.getDetails(id);
+    },
+    //pick the selected image
+    pickImage: function () {
+        //switch between select type
+        switch (imageManagerModule.selectType) {
+            //default widget selector
+            case "input":
+                //get id data
+                var sFieldId = imageManagerModule.fieldId;
+                var sFieldNameId = sFieldId + "_name";
+                var sFieldImageId = sFieldId + "_image";
+                //set input data
+                $('#' + sFieldId, window.parent.document).val(imageManagerModule.selectedImage.id);
+                $('#' + sFieldNameId, window.parent.document).val(imageManagerModule.selectedImage.fileName);
+                $('#' + sFieldImageId, window.parent.document).attr("src", imageManagerModule.selectedImage.image).parent().removeClass("hide");
+                //trigger change
+                parent.$('#' + sFieldId).trigger('change');
+                //show delete button
+                $(".delete-selected-image[data-input-id='" + sFieldId + "']", window.parent.document).removeClass("hide");
+                //close the modal
+                window.parent.imageManagerInput.closeModal();
+                break;
+            //CKEditor selector
+            case "ckeditor":
+            //TinyMCE Selector
+            case "tinymce":
+                //check if isset image
+                if (imageManagerModule.selectedImage !== null) {
+                    //call action by ajax
+                    $.ajax({
+                        url: imageManagerModule.baseUrl + "/get-original-image",
+                        type: "POST",
+                        data: {
+                            ImageManager_id: imageManagerModule.selectedImage.id,
+                            _csrf: $('meta[name=csrf-token]').prop('content')
+                        },
+                        dataType: "json",
+                        success: function (responseData, textStatus, jqXHR) {
+                            //set attributes for each selector
+                            if (imageManagerModule.selectType == "ckeditor") {
+                                var sField = window.queryStringParameter.get(window.location.href, "CKEditorFuncNum");
+                                window.top.opener.CKEDITOR.tools.callFunction(sField, responseData);
+                                window.self.close();
+                            } else if (imageManagerModule.selectType == "tinymce") {
+                                var sField = window.queryStringParameter.get(window.location.href, "tag_name");
+                                window.opener.document.getElementById(sField).value = responseData;
+                                window.close();
+                                window.opener.focus();
+                            }
+                        },
+                        error: function (jqXHR, textStatus, errorThrown) {
+                            alert("Error: can't get item");
+                        }
+                    });
+                } else {
+                    alert("Error: image can't picked");
+                }
+                break;
+        }
+
+
+    },
+    //delete the selected image
+    deleteSelectedImage: function () {
+        //confirm message
+        if (confirm(imageManagerModule.message.deleteMessage)) {
+            //close editor
+            imageManagerModule.editor.close();
+            //check if isset image
+            if (imageManagerModule.selectedImage !== null) {
+                //call action by ajax
+                $.ajax({
+                    url: imageManagerModule.baseUrl + "/delete",
+                    type: "POST",
+                    data: {
+                        ImageManager_id: imageManagerModule.selectedImage.id,
+                        _csrf: $('meta[name=csrf-token]').prop('content')
+                    },
+                    dataType: "json",
+                    success: function (responseData, textStatus, jqXHR) {
+                        //check if delete is true
+                        if (responseData.delete === true) {
+                            //delete item element
+                            $("#module-imagemanager .item-overview .item[data-key='" + imageManagerModule.selectedImage.id + "']").remove();
+                            //add hide class to info block
+                            $("#module-imagemanager .image-info").addClass("hide");
+                            //set selectedImage to null
+                            imageManagerModule.selectedImage = null;
+                            //close edit
+                        } else {
+                            alert("Error: item is not deleted");
+                        }
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        alert("Error: can't delete item");
+                    }
+                });
+            } else {
+                alert("Error: image can't delete, no image isset set");
+            }
+        }
+    },
+    //get image details
+    getDetails: function (id, pickAfterGetDetails) {
+        //set propertie if not set
+        pickAfterGetDetails = pickAfterGetDetails !== undefined ? pickAfterGetDetails : false;
+        //call action by ajax
+        $.ajax({
+            url: imageManagerModule.baseUrl + "/view",
+            type: "POST",
+            data: {
+                ImageManager_id: id,
+                _csrf: $('meta[name=csrf-token]').prop('content')
+            },
+            dataType: "json",
+            success: function (responseData, textStatus, jqXHR) {
+                //set imageManagerModule.selectedImage property
+                imageManagerModule.selectedImage = responseData;
+
+                //if need to pick image?
+                if (pickAfterGetDetails) {
+                    imageManagerModule.pickImage();
+                    //else set data
+                } else {
+                    //set text elements
+                    $("#module-imagemanager .image-info .fileName").text(responseData.fileName).attr("title", responseData.fileName);
+                    $("#module-imagemanager .image-info .created").text(responseData.created);
+                    $("#module-imagemanager .image-info .fileSize").text(responseData.fileSize);
+                    $("#module-imagemanager .image-info .dimensions .dimension-width").text(responseData.dimensionWidth);
+                    $("#module-imagemanager .image-info .dimensions .dimension-height").text(responseData.dimensionHeight);
+                    $("#module-imagemanager .image-info .thumbnail").html("<img src='" + responseData.image + "' alt='" + responseData.fileName + "'/>");
+                    //remove hide class
+                    $("#module-imagemanager .image-info").removeClass("hide");
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert("Can't view image. Error: " + jqXHR.responseText);
+            }
+        });
+    },
+    //upload file
+    uploadSuccess: function (uploadResponse) {
+        //close editor
+        imageManagerModule.editor.close();
+        //reload pjax container
+        $.pjax.reload('#pjax-mediamanager', {push: false, replace: false, timeout: 5000, scrollTo: false});
+    },
+    //editor functions
+    editor: {
+        //open editor block
+        open: function () {
+            //show editer / hide overview
+            $("#module-imagemanager > .row .col-image-editor").show();
+            $("#module-imagemanager > .row .col-overview").hide();
+        },
+        //close editor block
+        close: function () {
+            //show overview / hide editer
+            $("#module-imagemanager > .row .col-overview").show();
+            $("#module-imagemanager > .row .col-image-editor").hide();
+        },
+        //open cropper
+        openCropper: function () {
+            //check if isset image
+            if (imageManagerModule.selectedImage !== null) {
+                //call action by ajax
+                $.ajax({
+                    url: imageManagerModule.baseUrl + "/get-original-image",
+                    type: "POST",
+                    data: {
+                        ImageManager_id: imageManagerModule.selectedImage.id,
+                        _csrf: $('meta[name=csrf-token]').prop('content')
+                    },
+                    dataType: "json",
+                    success: function (responseData, textStatus, jqXHR) {
+                        //hide cropper
+                        $("#module-imagemanager > .row .col-image-cropper").css("visibility", "hidden");
+                        //set image in cropper
+                        $('#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper img#image-cropper').one('built.cropper', function () {
+                            //show cropper
+                            $("#module-imagemanager > .row .col-image-cropper").css("visibility", "visible");
+                        })
+                            .cropper('reset')
+                            .cropper('setAspectRatio', parseFloat(imageManagerModule.cropRatio))
+                            .cropper('replace', responseData);
+                        //open editor
+                        imageManagerModule.editor.open();
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        alert("Error: can't get item");
+                    }
+                });
+            } else {
+                alert("Error: image can't crop, no image isset set");
+            }
+        },
+        //apply crop
+        applyCrop: function (pickAfterCrop) {
+            //set propertie if not set
+            pickAfterCrop = pickAfterCrop !== undefined ? pickAfterCrop : false;
+            //check if isset image
+            if (imageManagerModule.selectedImage !== null) {
+                //set image in cropper
+                var oCropData = $('#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper img#image-cropper').cropper("getData");
+                //call action by ajax
+                $.ajax({
+                    url: imageManagerModule.baseUrl + "/crop",
+                    type: "POST",
+                    data: {
+                        ImageManager_id: imageManagerModule.selectedImage.id,
+                        CropData: oCropData,
+                        _csrf: $('meta[name=csrf-token]').prop('content')
+                    },
+                    dataType: "json",
+                    success: function (responseData, textStatus, jqXHR) {
+                        //set cropped image
+                        if (responseData !== null) {
+                            //if pickAfterCrop is true? select directly else
+                            if (pickAfterCrop) {
+                                imageManagerModule.getDetails(responseData, true);
+                                //else select the image only
+                            } else {
+                                //set new image
+                                imageManagerModule.selectImage(responseData);
+                                //reload pjax container
+                                $.pjax.reload('#pjax-mediamanager', {
+                                    push: false,
+                                    replace: false,
+                                    timeout: 5000,
+                                    scrollTo: false
+                                });
+                            }
+                        }
+                        //close editor
+                        imageManagerModule.editor.close();
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        alert("Error: item is not cropped");
+                    }
+                });
+            } else {
+                alert("Error: image can't crop, no image isset set");
+            }
+        }
+    }
+};
+
+$(document).ready(function () {
+    //init Image manage
+    imageManagerModule.init();
+    //on click select item (open view)
+    $(document).on("click", "#module-imagemanager .item-overview .item", function () {
+        //get id
+        var ImageManager_id = $(this).data("key");
+        //select image
+        imageManagerModule.selectImage(ImageManager_id);
+    });
+    //on click pick image
+    $(document).on("click", "#module-imagemanager .image-info .pick-image-item", function () {
+        imageManagerModule.pickImage();
+        return false;
+    });
+    //on click delete call "delete"
+    $(document).on("click", "#module-imagemanager .image-info .delete-image-item", function () {
+        imageManagerModule.deleteSelectedImage();
+        return false;
+    });
+    //on click crop call "crop"
+    $(document).on("click", "#module-imagemanager .image-info .crop-image-item", function () {
+        imageManagerModule.editor.openCropper();
+        return false;
+    });
+    //on click apply crop
+    $(document).on("click", "#module-imagemanager .image-cropper .apply-crop", function () {
+        imageManagerModule.editor.applyCrop();
+        return false;
+    });
+    //on click apply crop
+    $(document).on("click", "#module-imagemanager .image-cropper .apply-crop-select", function () {
+        imageManagerModule.editor.applyCrop(true);
+        return false;
+    });
+    //on click cancel crop
+    $(document).on("click", "#module-imagemanager .image-cropper .cancel-crop", function () {
+        imageManagerModule.editor.close();
+        return false;
+    });
+    //on keyup change set filter
+    $(document).on("keyup change", "#input-mediamanager-search", function () {
+        imageManagerModule.filterImageResult($(this).val());
+    });
+
+});
+
+/*
+ * return new get param to url
+ */
+window.queryStringParameter = {
+    get: function (uri, key) {
+        var reParam = new RegExp('(?:[\?&]|&amp;)' + key + '=([^&]+)', 'i');
+        var match = uri.match(reParam);
+        return (match && match.length > 1) ? match[1] : null;
+    },
+    set: function (uri, key, value) {
+        //replace brackets
+        var keyReplace = key.replace("[]", "").replace(/\[/g, "%5B").replace(/\]/g, "%5D");
+        //replace data
+        var re = new RegExp("([?&])" + keyReplace + "=.*?(&|$)", "i");
+        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
+        if (uri.match(re)) {
+            return uri.replace(re, '$1' + keyReplace + "=" + value + '$2');
+        }
+        else {
+            return uri + separator + keyReplace + "=" + value;
+        }
+    }
+};
 \ No newline at end of file
+<?php
+
+namespace backend\components\noam148\imagemanager\components;
+
+use Yii;
+use yii\base\Component;
+use backend\components\noam148\imagemanager\models\ImageManager;
+use yii\base\InvalidConfigException;
+use yii\db\Connection;
+
+class ImageManagerGetPath extends Component
+{
+
+	/**
+	 * @var null|string $mediaPath Folder path in which the images are stored
+	 */
+	public $mediaPath = null;
+
+	/**
+	 * @var string $cachePath cache path where store the resized images (relative from webroot (index.php))
+	 */
+	public $cachePath = "assets/imagemanager";
+
+	/**
+	 * @var boolean $useFilename use original filename in generated cache file
+	 */
+	public $useFilename = true;
+
+	/**
+	 * @var boolean $useFilename use original filename in generated cache file
+	 */
+	public $absoluteUrl = false;
+
+	/**
+	 * @var string The DB component name that the image model uses
+	 * This defaults to the default Yii DB component: Yii::$app->db
+	 * If this component is not set, the model will default to DB
+	 */
+	public $databaseComponent = 'db';
+
+	/**
+	 * Init set config
+	 */
+	public function init()
+	{
+		parent::init();
+		// initialize the compontent with the configuration loaded from config.php
+		\Yii::$app->set('imageresize', [
+			'class' => 'noam148\imageresize\ImageResize',
+			'cachePath' => $this->cachePath,
+			'useFilename' => $this->useFilename,
+			'absoluteUrl' => $this->absoluteUrl,
+		]);
+
+		if (is_callable($this->databaseComponent)) {
+			// The database component is callable, run the user function
+			$this->databaseComponent = call_user_func($this->databaseComponent);
+		}
+
+		// Check if the user input is correct
+		$this->_checkVariables();
+	}
+
+	/**
+	 * Get the path for the given ImageManager_id record
+	 * @param int $ImageManager_id ImageManager record for which the path needs to be generated
+	 * @param int $width Thumbnail image width
+	 * @param int $height Thumbnail image height
+	 * @param string $thumbnailMode Thumbnail mode
+	 * @return null|string Full path is returned when image is found, null if no image could be found
+	 */
+	public function getImagePath($ImageManager_id, $width = 400, $height = 400, $thumbnailMode = "outbound")
+	{
+		//default return
+		$return = null;
+		$mImageManager = ImageManager::findOne($ImageManager_id);
+
+		//check if not empty
+		if ($mImageManager !== null) {
+			//set crop mode
+			$mode = $thumbnailMode == "outbound" ? "outbound" : "inset";
+
+			$sMediaPath = null;
+			if ($this->mediaPath !== null) {
+				$sMediaPath = $this->mediaPath;
+			}
+
+			$sFileExtension = pathinfo($mImageManager->fileName, PATHINFO_EXTENSION);
+			//get image file path
+			$sImageFilePath = $sMediaPath . '/' . $mImageManager->id . '_' . $mImageManager->fileHash . '.' . $sFileExtension;
+			//check file exists
+			if (file_exists($sImageFilePath)) {
+				$return = \Yii::$app->imageresize->getUrl($sImageFilePath, $width, $height, $mode, null, $mImageManager->fileName);
+			} else {
+				$return = null; //isset(\Yii::$app->controller->module->assetPublishedUrl) ? \Yii::$app->controller->module->assetPublishedUrl. "/img/img_no-image.png" : null;
+			}
+		}
+		return $return;
+	}
+
+	/**
+	 * Check if the user configurable variables match the criteria
+	 * @throws InvalidConfigException
+	 */
+	private function _checkVariables()
+	{
+		// Check to make sure that the $databaseComponent is a string
+		if (!is_string($this->databaseComponent)) {
+			throw new InvalidConfigException("Image Manager Component - Init: Database component '$this->databaseComponent' is not a string");
+		}
+
+		// Check to make sure that the $databaseComponent object exists
+		if (Yii::$app->get($this->databaseComponent, false) === null) {
+			throw new InvalidConfigException("Image Manager Component - Init: Database component '$this->databaseComponent' does not exists in application configuration");
+		}
+
+		// Check to make sure that the $databaseComponent is a yii\db\Connection object
+		if (($databaseComponentClassName = get_class(Yii::$app->get($this->databaseComponent))) !== ($connectionClassName = Connection::className())) {
+			throw new InvalidConfigException("Image Manager Component - Init: Database component '$this->databaseComponent' is not of type '$connectionClassName' instead it is '$databaseComponentClassName'");
+		}
+	}
+
+}
+<?php
+
+namespace backend\components\noam148\imagemanager\components;
+
+use Yii;
+use yii\widgets\InputWidget;
+use yii\helpers\Html;
+use yii\helpers\Json;
+use yii\helpers\Url;
+use backend\components\noam148\imagemanager\models\ImageManager;
+use backend\components\noam148\imagemanager\assets\ImageManagerInputAsset;
+
+class ImageManagerInputWidget extends InputWidget
+{
+
+	/**
+	 * @var null|integer The aspect ratio the image needs to be cropped in (optional)
+	 */
+	public $aspectRatio = null; //option info: https://github.com/fengyuanchen/cropper/#aspectratio
+
+	/**
+	 * @var int Define the viewMode of the cropper
+	 */
+	public $cropViewMode = 1; //option info: https://github.com/fengyuanchen/cropper/#viewmode
+
+	/**
+	 * @var bool Show a preview of the image under the input
+	 */
+	public $showPreview = true;
+
+	/**
+	 * @var bool Show a confirmation message when de-linking a image from the input
+	 */
+	public $showDeletePickedImageConfirm = false;
+
+	/**
+	 * @inheritdoc
+	 */
+	public function init()
+	{
+		parent::init();
+		//set language
+		if (!isset(Yii::$app->i18n->translations['imagemanager'])) {
+			Yii::$app->i18n->translations['imagemanager'] = [
+				'class' => 'yii\i18n\PhpMessageSource',
+				'sourceLanguage' => 'en',
+				'basePath' => '@noam148/imagemanager/messages'
+			];
+		}
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function run()
+	{
+		//default
+		$ImageManager_id = null;
+		$mImageManager = null;
+		$sFieldId = null;
+		//start input group
+		$field = "<div class='image-manager-input'>";
+		$field .= "<div class='input-group'>";
+		//set input fields
+		if ($this->hasModel()) {
+			//get field id
+			$sFieldId = Html::getInputId($this->model, $this->attribute);
+			$sFieldNameId = $sFieldId . "_name";
+			//get attribute name
+			$sFieldAttributeName = Html::getAttributeName($this->attribute);
+			//get filename from selected file
+			$ImageManager_id = $this->model->{$sFieldAttributeName};
+			$ImageManager_fileName = null;
+			$mImageManager = ImageManager::findOne($ImageManager_id);
+			if ($mImageManager !== null) {
+				$ImageManager_fileName = $mImageManager->fileName;
+			}
+			//create field
+			$field .= Html::textInput($this->attribute, $ImageManager_fileName, ['class' => 'form-control', 'id' => $sFieldNameId, 'readonly' => true]);
+			$field .= Html::activeHiddenInput($this->model, $this->attribute, $this->options);
+		} else {
+			$field .= Html::textInput($this->name . "_name", null, ['readonly' => true]);
+			$field .= Html::hiddenInput($this->name, $this->value, $this->options);
+		}
+		//end input group
+		$sHideClass = $ImageManager_id === null ? 'hide' : '';
+		$field .= "<a href='#' class='input-group-addon btn btn-primary delete-selected-image " . $sHideClass . "' data-input-id='" . $sFieldId . "' data-show-delete-confirm='" . ($this->showDeletePickedImageConfirm ? "true" : "false") . "'><i class='glyphicon glyphicon-remove' aria-hidden='true'></i></a>";
+		$field .= "<a href='#' class='input-group-addon btn btn-primary open-modal-imagemanager' data-aspect-ratio='" . $this->aspectRatio . "' data-crop-view-mode='" . $this->cropViewMode . "' data-input-id='" . $sFieldId . "'>";
+		$field .= "<i class='glyphicon glyphicon-folder-open' aria-hidden='true'></i>";
+		$field .= "</a></div>";
+
+		//show preview if is true
+		if ($this->showPreview == true) {
+			$sHideClass = ($mImageManager == null) ? "hide" : "";
+			$sImageSource = isset($mImageManager->id) ? \Yii::$app->imagemanager->getImagePath($mImageManager->id, 500, 500, 'inset') : "";
+
+			$field .= '<div class="image-wrapper ' . $sHideClass . '">'
+				. '<img id="' . $sFieldId . '_image" alt="Thumbnail" class="img-responsive img-preview" src="' . $sImageSource . '">'
+				. '</div>';
+		}
+
+		//close image-manager-input div
+		$field .= "</div>";
+
+		echo $field;
+
+		$this->registerClientScript();
+	}
+
+	/**
+	 * Registers js Input
+	 */
+	public function registerClientScript()
+	{
+		$view = $this->getView();
+		ImageManagerInputAsset::register($view);
+
+		//set baseUrl from image manager
+		$sBaseUrl = Url::to(['/imagemanager/manager']);
+		//set base url
+		$view->registerJs("imageManagerInput.baseUrl = '" . $sBaseUrl . "';");
+		$view->registerJs("imageManagerInput.message = " . Json::encode([
+				'imageManager' => Yii::t('imagemanager', 'Image manager'),
+				'detachWarningMessage' => Yii::t('imagemanager', 'Are you sure you want to detach the image?'),
+			]) . ";");
+	}
+
+}
+{
+  "name": "noam148/yii2-image-manager",
+  "description": "A Yii2 module/widget for upload and cropping images",
+  "keywords": [
+    "yii2",
+    "extension",
+    "widget",
+    "module",
+    "image",
+    "upload",
+    "crop",
+    "manager"
+  ],
+  "homepage": "https://github.com/noam148/yii2-image-manager",
+  "type": "yii2-extension",
+  "license": "BSD-3-Clause",
+  "authors": [
+    {
+      "name": "Noam148",
+      "homepage": "https://github.com/noam148/"
+    }
+  ],
+  "require": {
+    "yiisoft/yii2": "*",
+    "noam148/yii2-image-resize": "*",
+    "kartik-v/yii2-widget-fileinput": "@dev"
+  },
+  "autoload": {
+    "psr-4": {
+      "noam148\\imagemanager\\": ""
+    }
+  }
+}
 \ No newline at end of file
+<?php
+
+namespace backend\components\noam148\imagemanager\controllers;
+
+use yii\web\Controller;
+
+/**
+ * Default controller for the `imagemanager` module
+ */
+class DefaultController extends Controller
+{
+	/**
+	 * Renders the index view for the module
+	 * @return string
+	 */
+	public function actionIndex()
+	{
+		return $this->render('index');
+	}
+}
+<?php
+
+namespace backend\components\noam148\imagemanager\controllers;
+
+use Yii;
+use backend\components\noam148\imagemanager\models\ImageManager;
+use backend\components\noam148\imagemanager\models\ImageManagerSearch;
+use backend\components\noam148\imagemanager\assets\ImageManagerModuleAsset;
+use yii\web\Response;
+use yii\web\Controller;
+use yii\web\NotFoundHttpException;
+use yii\base\ErrorException;
+use yii\filters\VerbFilter;
+use yii\helpers\Url;
+use yii\helpers\Json;
+use yii\helpers\BaseFileHelper;
+use yii\imagine\Image;
+use Imagine\Image\Box;
+use Imagine\Image\Palette\RGB;
+use Imagine\Image\Point;
+use backend\components\noam148\imagemanager\Module;
+
+/**
+ * Manager controller for the `imagemanager` module
+ * @property $module Module
+ */
+class ManagerController extends Controller
+{
+
+	/**
+	 * @inheritdoc
+	 */
+	public function behaviors()
+	{
+		return [
+			'verbs' => [
+				'class' => VerbFilter::className(),
+				'actions' => [
+					'delete' => ['POST'],
+				],
+			],
+		];
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function beforeAction($action)
+	{
+		//disable CSRF Validation
+		$this->enableCsrfValidation = false;
+		return parent::beforeAction($action);
+	}
+
+	/**
+	 * Lists all ImageManager models.
+	 * @return mixed
+	 */
+	public function actionIndex()
+	{
+		//set asset
+		ImageManagerModuleAsset::register($this->view);
+
+		//get iframe parameters
+		$viewMode = Yii::$app->request->get("view-mode", "page");
+		$selectType = Yii::$app->request->get("select-type", "input");
+		$inputFieldId = Yii::$app->request->get("input-id");
+		$cropAspectRatio = Yii::$app->request->get("aspect-ratio");
+		$cropViewMode = Yii::$app->request->get("crop-view-mode", 1);
+		$defaultImageId = Yii::$app->request->get("image-id");
+
+		//set blank layout if viewMode = iframe
+		if ($viewMode == "iframe") {
+			//set layout
+			$this->layout = "blank";
+
+			//set stylesheet for modal
+			$aCssFiles = \Yii::$app->controller->module->cssFiles;
+			if (is_array($aCssFiles) && count($aCssFiles) > 0) {
+				//if exists loop through files and add them to iframe mode
+				foreach ($aCssFiles AS $cssFile) {
+					//registrate file
+					$this->view->registerCssFile($cssFile, ['depends' => 'yii\bootstrap\BootstrapAsset']);
+				}
+			}
+		}
+
+		//set baseUrl from image manager
+		$sBaseUrl = Url::to(['/imagemanager/manager']);
+		//set base url
+		$this->view->registerJs("imageManagerModule.baseUrl = '" . $sBaseUrl . "';", 3);
+		$this->view->registerJs("imageManagerModule.defaultImageId = '" . $defaultImageId . "';", 3);
+		$this->view->registerJs("imageManagerModule.fieldId = '" . $inputFieldId . "';", 3);
+		$this->view->registerJs("imageManagerModule.cropRatio = '" . $cropAspectRatio . "';", 3);
+		$this->view->registerJs("imageManagerModule.cropViewMode = '" . $cropViewMode . "';", 3);
+		$this->view->registerJs("imageManagerModule.selectType = '" . $selectType . "';", 3);
+		$this->view->registerJs("imageManagerModule.message = " . Json::encode([
+				'deleteMessage' => Yii::t('imagemanager', 'Are you sure you want to delete this image?'),
+			]) . ";", 3);
+
+		$searchModel = new ImageManagerSearch();
+		#	die(var_dump(Yii::$app->request->queryParams));
+		$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
+
+		//render template
+		return $this->render(
+			'index', [
+			'searchModel' => $searchModel,
+			'dataProvider' => $dataProvider,
+			'viewMode' => $viewMode,
+			'selectType' => $selectType,
+		]);
+	}
+
+	/**
+	 * Creates a new ImageManager model.
+	 * If creation is successful, the browser will be redirected to the 'view' page.
+	 * @return mixed
+	 */
+	public function actionUpload()
+	{
+		//set response header
+		Yii::$app->getResponse()->format = Response::FORMAT_JSON;
+		// Check if the user is allowed to upload the image
+		if (Yii::$app->controller->module->canUploadImage == false) {
+			// Return the response array to prevent from the action being executed any further
+			return [];
+		}
+		// Create the transaction and set the success variable
+		$transaction = Yii::$app->db->beginTransaction();
+		$bSuccess = false;
+
+		//disable Csrf
+		Yii::$app->controller->enableCsrfValidation = false;
+		//return default
+		$return = $_FILES;
+		//set media path
+		$sMediaPath = \Yii::$app->imagemanager->mediaPath;
+		//create the folder
+		BaseFileHelper::createDirectory($sMediaPath);
+
+		//check file isset
+		if (isset($_FILES['imagemanagerFiles']['tmp_name'])) {
+			//loop through each uploaded file
+			foreach ($_FILES['imagemanagerFiles']['tmp_name'] AS $key => $sTempFile) {
+				//collect variables
+				$sFileName = $_FILES['imagemanagerFiles']['name'][$key];
+				$sFileExtension = pathinfo($sFileName, PATHINFO_EXTENSION);
+				$iErrorCode = $_FILES['imagemanagerFiles']['error'][$key];
+				//if uploaded file has no error code  than continue;
+				if ($iErrorCode == 0) {
+					//create a file record
+					$model = new ImageManager();
+					$model->fileName = str_replace("_", "-", $sFileName);
+					$model->fileHash = Yii::$app->getSecurity()->generateRandomString(32);
+					//if file is saved add record
+					if ($model->save()) {
+						//move file to dir
+						$sSaveFileName = $model->id . "_" . $model->fileHash . "." . $sFileExtension;
+						//move_uploaded_file($sTempFile, $sMediaPath."/".$sFileName);
+						//save with Imagine class
+						Image::getImagine()->open($sTempFile)->save($sMediaPath . "/" . $sSaveFileName);
+						$bSuccess = true;
+					}
+				}
+			}
+		}
+
+		if ($bSuccess) {
+			// The upload action went successful, save the transaction
+			$transaction->commit();
+		} else {
+			// There where problems during the upload, kill the transaction
+			$transaction->rollBack();
+		}
+
+		//echo return json encoded
+		return $return;
+	}
+
+	/**
+	 * Crop image and create new ImageManager model.
+	 * @return mixed
+	 */
+	public function actionCrop()
+	{
+		//return 
+		$return = null;
+		//disable Csrf
+		Yii::$app->controller->enableCsrfValidation = false;
+		//set response header
+		Yii::$app->getResponse()->format = Response::FORMAT_JSON;
+		//set media path
+		$sMediaPath = \Yii::$app->imagemanager->mediaPath;
+		//get post
+		$ImageManager_id = Yii::$app->request->post("ImageManager_id");
+		$aCropData = Yii::$app->request->post("CropData");
+		//get details
+		$modelOriginal = $this->findModel($ImageManager_id);
+		//check if path is not null
+		if ($modelOriginal->imagePathPrivate !== null && $aCropData !== null) {
+			//dimension
+			$iDimensionWidth = round($aCropData['width']);
+			$iDimensionHeight = round($aCropData['height']);
+			//collect variables
+			$sFileNameReplace = preg_replace("/_crop_\d+x\d+/", "", $modelOriginal->fileName);
+			$sFileName = pathinfo($sFileNameReplace, PATHINFO_FILENAME);
+			$sFileExtension = pathinfo($sFileNameReplace, PATHINFO_EXTENSION);
+			$sDisplayFileName = $sFileName . "_crop_" . $iDimensionWidth . "x" . $iDimensionHeight . "." . $sFileExtension;
+
+			//start transaction
+			$transaction = Yii::$app->db->beginTransaction();
+			$bCropSuccess = false;
+
+			//create a file record
+			$model = new ImageManager();
+			$model->fileName = $sDisplayFileName;
+			$model->fileHash = Yii::$app->getSecurity()->generateRandomString(32);
+			//if file is saved add record
+			if ($model->save()) {
+
+				//do crop in try catch
+				try {
+					// create file name
+					$sSaveFileName = $model->id . "_" . $model->fileHash . "." . $sFileExtension;
+
+					// get current/original image data
+					$imageOriginal = Image::getImagine()->open($modelOriginal->imagePathPrivate);
+					$imageOriginalSize = $imageOriginal->getSize();
+					$imageOriginalWidth = $imageOriginalSize->getWidth();
+					$imageOriginalHeight = $imageOriginalSize->getHeight();
+					$imageOriginalPositionX = 0;
+					$imageOriginalPositionY = 0;
+
+					// create/calculate a canvas size (if canvas is out of the box)
+					$imageCanvasWidth = $imageOriginalWidth;
+					$imageCanvasHeight = $imageOriginalHeight;
+
+					// update canvas width if X position of croparea is lower than 0
+					if ($aCropData['x'] < 0) {
+						//set x postion to Absolute value
+						$iAbsoluteXpos = abs($aCropData['x']);
+						//set x position of image
+						$imageOriginalPositionX = $iAbsoluteXpos;
+						//add x position to canvas size
+						$imageCanvasWidth += $iAbsoluteXpos;
+						//update canvas width if croparea is biger than original image
+						$iCropWidthWithoutAbsoluteXpos = ($aCropData['width'] - $iAbsoluteXpos);
+						if ($iCropWidthWithoutAbsoluteXpos > $imageOriginalWidth) {
+							//add ouside the box width
+							$imageCanvasWidth += ($iCropWidthWithoutAbsoluteXpos - $imageOriginalWidth);
+						}
+					} else {
+						// add if crop partly ouside image
+						$iCropWidthWithXpos = ($aCropData['width'] + $aCropData['x']);
+						if ($iCropWidthWithXpos > $imageOriginalWidth) {
+							//add ouside the box width
+							$imageCanvasWidth += ($iCropWidthWithXpos - $imageOriginalWidth);
+						}
+					}
+
+					// update canvas height if Y position of croparea is lower than 0
+					if ($aCropData['y'] < 0) {
+						//set y postion to Absolute value
+						$iAbsoluteYpos = abs($aCropData['y']);
+						//set y position of image
+						$imageOriginalPositionY = $iAbsoluteYpos;
+						//add y position to canvas size
+						$imageCanvasHeight += $iAbsoluteYpos;
+						//update canvas height if croparea is biger than original image
+						$iCropHeightWithoutAbsoluteYpos = ($aCropData['height'] - $iAbsoluteYpos);
+						if ($iCropHeightWithoutAbsoluteYpos > $imageOriginalHeight) {
+							//add ouside the box height
+							$imageCanvasHeight += ($iCropHeightWithoutAbsoluteYpos - $imageOriginalHeight);
+						}
+					} else {
+						// add if crop partly ouside image
+						$iCropHeightWithYpos = ($aCropData['height'] + $aCropData['y']);
+						if ($iCropHeightWithYpos > $imageOriginalHeight) {
+							//add ouside the box height
+							$imageCanvasHeight += ($iCropHeightWithYpos - $imageOriginalHeight);
+						}
+					}
+
+					// round values
+					$imageCanvasWidthRounded = round($imageCanvasWidth);
+					$imageCanvasHeightRounded = round($imageCanvasHeight);
+					$imageOriginalPositionXRounded = round($imageOriginalPositionX);
+					$imageOriginalPositionYRounded = round($imageOriginalPositionY);
+					$imageCropWidthRounded = round($aCropData['width']);
+					$imageCropHeightRounded = round($aCropData['height']);
+					// set postion to 0 if x or y is less than 0
+					$imageCropPositionXRounded = $aCropData['x'] < 0 ? 0 : round($aCropData['x']);
+					$imageCropPositionYRounded = $aCropData['y'] < 0 ? 0 : round($aCropData['y']);
+
+//                    echo "canvas: ". $imageCanvasWidth ." x ".$imageCanvasHeight ."<br />";
+//                    echo "img pos x: ". $imageOriginalPositionX ." y ".$imageOriginalPositionY ."<br />";
+//                    die();
+//                       
+					//todo: check if rotaded resize canvas (http://stackoverflow.com/questions/9971230/calculate-rotated-rectangle-size-from-known-bounding-box-coordinates)
+
+					// merge current image in canvas, crop image and save
+					$imagineRgb = new RGB();
+					$imagineColor = $imagineRgb->color('#FFF', 0);
+					// create image
+					Image::getImagine()->create(new Box($imageCanvasWidthRounded, $imageCanvasHeightRounded), $imagineColor)
+						->paste($imageOriginal, new Point($imageOriginalPositionXRounded, $imageOriginalPositionYRounded))
+						->crop(new Point($imageCropPositionXRounded, $imageCropPositionYRounded), new Box($imageCropWidthRounded, $imageCropHeightRounded))
+						->save($sMediaPath . "/" . $sSaveFileName);
+
+					//set boolean crop success to true
+					$bCropSuccess = true;
+
+					//set return id
+					$return = $model->id;
+
+					// Check if the original image must be delete
+					if ($this->module->deleteOriginalAfterEdit) {
+						$modelOriginal->delete();
+					}
+				} catch (ErrorException $e) {
+
+				}
+			}
+
+			//commit transaction if boolean is true
+			if ($bCropSuccess) {
+				$transaction->commit();
+			}
+		}
+
+		//echo return json encoded
+		return $return;
+	}
+
+	/**
+	 * Get view details
+	 * @return mixed
+	 */
+	public function actionView()
+	{
+		//disable Csrf
+		Yii::$app->controller->enableCsrfValidation = false;
+		//return default
+		$return = [];
+		//set response header
+		Yii::$app->getResponse()->format = Response::FORMAT_JSON;
+		//get post
+		$ImageManager_id = Yii::$app->request->post("ImageManager_id");
+		//get details
+		$model = $this->findModel($ImageManager_id);
+		//set return details
+		$return['id'] = $model->id;
+		$return['fileName'] = $model->fileName;
+		$return['created'] = Yii::$app->formatter->asDate($model->created);
+		$return['fileSize'] = $model->imageDetails['size'];
+		$return['dimensionWidth'] = $model->imageDetails['width'];
+		$return['dimensionHeight'] = $model->imageDetails['height'];
+		$return['image'] = \Yii::$app->imagemanager->getImagePath($model->id, 400, 400, "inset") . "?t=" . time();
+
+		//return json encoded
+		return $return;
+	}
+
+	/**
+	 * Get full image
+	 * @return mixed
+	 */
+	public function actionGetOriginalImage()
+	{
+		//disable Csrf
+		Yii::$app->controller->enableCsrfValidation = false;
+		//set response header
+		Yii::$app->getResponse()->format = Response::FORMAT_JSON;
+		//get post
+		$ImageManager_id = Yii::$app->request->post("ImageManager_id");
+		//get details
+		$model = $this->findModel($ImageManager_id);
+		//set return
+		$return = \Yii::$app->imagemanager->getImagePath($model->id, $model->imageDetails['width'], $model->imageDetails['height'], "inset");
+		//return json encoded
+		return $return;
+	}
+
+	/**
+	 * Deletes an existing ImageManager model.
+	 * If deletion is successful, the browser will be redirected to the 'index' page.
+	 * @return mixed
+	 */
+	public function actionDelete()
+	{
+		//return 
+		$return = ['delete' => false];
+		//set response header
+		Yii::$app->getResponse()->format = Response::FORMAT_JSON;
+
+		if (Yii::$app->controller->module->canRemoveImage == false) {
+			// User can not remove this image, return false status
+			return $return;
+		}
+
+		//get post
+		$ImageManager_id = Yii::$app->request->post("ImageManager_id");
+		//get details
+		$model = $this->findModel($ImageManager_id);
+
+		//delete record
+		if ($model->delete()) {
+			$return['delete'] = true;
+		}
+		return $return;
+	}
+
+	/**
+	 * Finds the ImageManager model based on its primary key value.
+	 * If the model is not found, a 404 HTTP exception will be thrown.
+	 * @param integer $id
+	 * @return ImageManager the loaded model
+	 * @throws NotFoundHttpException if the model cannot be found
+	 */
+	protected function findModel($id)
+	{
+		if (($model = ImageManager::findOne($id)) !== null) {
+			/* @var $model ImageManager */
+			// Get the module instance
+			$module = Module::getInstance();
+
+			// Check if the model belongs to this user
+			if ($module->setBlameableBehavior) {
+				// Check if the user and record ID match
+				if (Yii::$app->user->id != $model->createdBy) {
+					throw new NotFoundHttpException(Yii::t('imagemanager', 'The requested image does not exist.'));
+				}
+			}
+
+			return $model;
+		} else {
+			throw new NotFoundHttpException(Yii::t('imagemanager', 'The requested image does not exist.'));
+		}
+	}
+
+}
+<?php
+return [
+	'Are you sure you want to delete this image?' => 'Wollen Sie dieses Bild wirklich löschen?',
+	'Are you sure you want to detach the image?' => 'Wollen Sie dieses Bild wirklich lösen?',
+	'Cancel' => 'Annullieren',
+	'Created' => 'Erstellt',
+	'Crop' => 'Zuschneiden',
+	'Crop and select' => 'Zuschneiden und auswählen',
+	'Delete' => 'Löschen',
+	'File hash' => 'File hash',
+	'File name' => 'File Name',
+	'Modified' => 'Geändert',
+	'Search' => 'Suchen',
+	'Select' => 'Auswählen',
+	'Image manager' => 'Image manager',
+	'Upload' => 'Upload'
+];
+<?php
+return [
+	'Are you sure you want to delete this image?' => 'Are you sure you want to delete this image?',
+	'Are you sure you want to detach the image?' => 'Are you sure you want to detach the image?',
+	'Cancel' => 'Cancel',
+	'Created' => 'Created',
+	'Crop' => 'Crop',
+	'Crop and select' => 'Crop and select',
+	'Delete' => 'Delete',
+	'File hash' => 'File hash',
+	'File name' => 'File name',
+	'Modified' => 'Modified',
+	'Search' => 'Search',
+	'Select' => 'Select',
+	'Image manager' => 'Image manager',
+	'Upload' => 'Upload'
+];
+<?php
+return [
+	'Are you sure you want to delete this image?' => 'Voulez-vous vraiment effacer cet\'image?',
+	'Are you sure you want to detach the image?' => 'Voules-vous détacher cet\'image?',
+	'Cancel' => 'Annuler',
+	'Created' => 'Crée',
+	'Crop' => 'Ajuster',
+	'Crop and select' => 'Ajuster et sélectionner',
+	'Delete' => 'Effacer',
+	'File hash' => 'Hash du fichier',
+	'File name' => 'Nom du fichier',
+	'Modified' => 'Modifié',
+	'Search' => 'Rechercher',
+	'Select' => 'Sélectionner',
+	'Image manager' => 'Image manager',
+	'Upload' => 'Upload'
+];
+<?php
+return [
+	'Are you sure you want to delete this image?' => 'Vuole veramente cancellare questa immagine?',
+	'Are you sure you want to detach the image?' => 'Vuole distaccare questa immagine?',
+	'Cancel' => 'Cancellre',
+	'Created' => 'Creato',
+	'Crop' => 'Tagliare a formato',
+	'Crop and select' => 'Tagliare a formato e selezionare',
+	'Delete' => 'Cancellare',
+	'File hash' => 'File hash',
+	'File name' => 'Nome del file',
+	'Modified' => 'Modificato',
+	'Search' => 'Ricerca',
+	'Select' => 'Selezionare',
+	'Image manager' => 'Image manager',
+	'Upload' => 'Upload'
+];
+<?php
+return [
+	'Are you sure you want to delete this image?' => 'Weet je zeker dat je de afbeelding wilt verwijderen?',
+	'Are you sure you want to detach the image?' => 'Weet je zeker dat je de afbeelding wilt losmaken?',
+	'The requested image does not exist.' => 'De gevraagde afbeelding bestaat niet.',
+	'Cancel' => 'Annuleer',
+	'Created' => 'Aangemaakt',
+	'Created by' => 'Gemaakt door',
+	'Crop' => 'Bijsnijden',
+	'Crop and select' => 'Bijsnijden en selecteren',
+	'Delete' => 'Verwijderen',
+	'File hash' => 'Bestand hash',
+	'File name' => 'Bestandsnaam',
+	'Modified' => 'Gewijzigd',
+	'Modified by' => 'Gewijzigd door',
+	'Search' => 'Zoeken',
+	'Select' => 'Selecteer',
+	'Image manager' => 'Image manager',
+	'Upload' => 'Upload'
+];
 \ No newline at end of file
+<?php
+return [
+	'Are you sure you want to delete this image?' => 'Вы действительно хотите удалить изображение?',
+	'Are you sure you want to detach the image?' => 'Вы действительно хотите открепить изображение?',
+	'Cancel' => 'Отменить',
+	'Created' => 'Создано',
+	'Crop' => 'Обрезать',
+	'Crop and select' => 'Обрезать и выбрать',
+	'Delete' => 'Удалить',
+	'File hash' => 'Хеш файла',
+	'File name' => 'Имя файла',
+	'Modified' => 'Измененл',
+	'Search' => 'Поиск',
+	'Select' => 'Выбрать',
+	'Image manager' => 'Менеджер изображений',
+	'Upload' => 'Загрузить'
+];
 \ No newline at end of file
+<?php
+
+use yii\db\Migration;
+
+/**
+ * Handles the creation for table `ImageManager`.
+ */
+class m160622_085710_create_ImageManager_table extends Migration
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function up()
+	{
+		//ImageManager: create table
+		$this->createTable('ImageManager', [
+			'id' => $this->primaryKey(),
+			'fileName' => $this->string(128)->notNull(),
+			'fileHash' => $this->string(32)->notNull(),
+			'created' => $this->datetime()->notNull(),
+			'modified' => $this->datetime(),
+		]);
+
+		//ImageManager: alter id column
+		$this->alterColumn('ImageManager', 'id', 'INT(10) UNSIGNED NOT NULL AUTO_INCREMENT');
+
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function down()
+	{
+		$this->dropTable('ImageManager');
+	}
+}
 \ No newline at end of file
+<?php
+
+use yii\db\Migration;
+
+class m170223_113221_addBlameableBehavior extends Migration
+{
+	public function up()
+	{
+		$this->addColumn('ImageManager', 'createdBy', $this->integer(10)->unsigned()->null()->defaultValue(null));
+		$this->addColumn('ImageManager', 'modifiedBy', $this->integer(10)->unsigned()->null()->defaultValue(null));
+	}
+
+	public function down()
+	{
+		echo "m170223_113221_addBlameableBehavior cannot be reverted.\n";
+
+		return false;
+	}
+}
+<?php
+
+namespace backend\components\noam148\imagemanager\models;
+
+use backend\components\noam148\imagemanager\Module;
+use Yii;
+use yii\db\Expression;
+use yii\behaviors\TimestampBehavior;
+use yii\behaviors\BlameableBehavior;
+
+/**
+ * This is the model class for table "ImageManager".
+ *
+ * @property integer $id
+ * @property string $fileName
+ * @property string $fileHash
+ * @property string $created
+ * @property string $modified
+ * @property string $createdBy
+ * @property string $modifiedBy
+ */
+class ImageManager extends \yii\db\ActiveRecord
+{
+
+	/**
+	 * Set Created date to now
+	 */
+	public function behaviors()
+	{
+		$aBehaviors = [];
+
+		// Add the time stamp behavior
+		$aBehaviors[] = [
+			'class' => TimestampBehavior::className(),
+			'createdAtAttribute' => 'created',
+			'updatedAtAttribute' => 'modified',
+			'value' => new Expression('NOW()'),
+		];
+
+		// Get the imagemanager module from the application
+		$moduleImageManager = Yii::$app->getModule('imagemanager');
+		/* @var $moduleImageManager Module */
+		if ($moduleImageManager !== null) {
+			// Module has been loaded
+			if ($moduleImageManager->setBlameableBehavior) {
+				// Module has blame able behavior
+				$aBehaviors[] = [
+					'class' => BlameableBehavior::className(),
+					'createdByAttribute' => 'createdBy',
+					'updatedByAttribute' => 'modifiedBy',
+				];
+			}
+		}
+
+		return $aBehaviors;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public static function tableName()
+	{
+		return 'ImageManager';
+	}
+
+	/**
+	 * Get the DB component that the model uses
+	 * This function will throw error if object could not be found
+	 * The DB connection defaults to DB
+	 * @return null|object
+	 */
+	public static function getDb()
+	{
+		// Get the image manager object
+		$oImageManager = Yii::$app->get('imagemanager', false);
+
+		if ($oImageManager === null) {
+			// The image manager object has not been set
+			// The normal DB object will be returned, error will be thrown if not found
+			return Yii::$app->get('db');
+		}
+
+		// The image manager component has been loaded, the DB component that has been entered will be loaded
+		// By default this is the Yii::$app->db connection, the user can specify any other connection if needed
+		return Yii::$app->get($oImageManager->databaseComponent);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function rules()
+	{
+		return [
+			[['fileName', 'fileHash'], 'required'],
+			[['created', 'modified'], 'safe'],
+			[['fileName'], 'string', 'max' => 128],
+			[['fileHash'], 'string', 'max' => 32],
+		];
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function attributeLabels()
+	{
+		return [
+			'id' => Yii::t('imagemanager', 'ID'),
+			'fileName' => Yii::t('imagemanager', 'File Name'),
+			'fileHash' => Yii::t('imagemanager', 'File Hash'),
+			'created' => Yii::t('imagemanager', 'Created'),
+			'modified' => Yii::t('imagemanager', 'Modified'),
+			'createdBy' => Yii::t('imagemanager', 'Created by'),
+			'modifiedBy' => Yii::t('imagemanager', 'Modified by'),
+		];
+	}
+
+	public function afterDelete()
+	{
+		parent::afterDelete();
+
+		// Check if file exists
+		if (file_exists($this->getImagePathPrivate())) {
+			unlink($this->getImagePathPrivate());
+		}
+	}
+
+	/**
+	 * Get image path private
+	 * @return string|null If image file exists the path to the image, if file does not exists null
+	 */
+	public function getImagePathPrivate()
+	{
+		//set default return
+		$return = null;
+		//set media path
+		$sMediaPath = \Yii::$app->imagemanager->mediaPath;
+		$sFileExtension = pathinfo($this->fileName, PATHINFO_EXTENSION);
+		//get image file path
+		$sImageFilePath = $sMediaPath . '/' . $this->id . '_' . $this->fileHash . '.' . $sFileExtension;
+		//check file exists
+		if (file_exists($sImageFilePath)) {
+			$return = $sImageFilePath;
+		}
+		return $return;
+	}
+
+	/**
+	 * Get image data dimension/size
+	 * @return array The image sizes
+	 */
+	public function getImageDetails()
+	{
+		//set default return
+		$return = ['width' => 0, 'height' => 0, 'size' => 0];
+		//set media path
+		$sMediaPath = \Yii::$app->imagemanager->mediaPath;
+		$sFileExtension = pathinfo($this->fileName, PATHINFO_EXTENSION);
+		//get image file path
+		$sImageFilePath = $sMediaPath . '/' . $this->id . '_' . $this->fileHash . '.' . $sFileExtension;
+		//check file exists
+		if (file_exists($sImageFilePath)) {
+			$aImageDimension = getimagesize($sImageFilePath);
+			$return['width'] = isset($aImageDimension[0]) ? $aImageDimension[0] : 0;
+			$return['height'] = isset($aImageDimension[1]) ? $aImageDimension[1] : 0;
+			$return['size'] = Yii::$app->formatter->asShortSize(filesize($sImageFilePath), 2);
+		}
+		return $return;
+	}
+
+}
+<?php
+
+namespace backend\components\noam148\imagemanager\models;
+
+use Yii;
+use yii\base\Model;
+use yii\data\ActiveDataProvider;
+use backend\components\noam148\imagemanager\models\ImageManager;
+use backend\components\noam148\imagemanager\Module;
+
+/**
+ * ImageManagerSearch represents the model behind the search form about `common\modules\imagemanager\models\ImageManager`.
+ */
+class ImageManagerSearch extends ImageManager
+{
+	public $globalSearch;
+
+	/**
+	 * @inheritdoc
+	 */
+	public function rules()
+	{
+		return [
+			[['globalSearch'], 'safe'],
+		];
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function scenarios()
+	{
+		// bypass scenarios() implementation in the parent class
+		return Model::scenarios();
+	}
+
+	/**
+	 * Creates data provider instance with search query applied
+	 *
+	 * @param array $params
+	 *
+	 * @return ActiveDataProvider
+	 */
+	public function search($params)
+	{
+		$query = ImageManager::find();
+
+		// add conditions that should always apply here
+
+		$dataProvider = new ActiveDataProvider([
+			'query' => $query,
+			'pagination' => [
+				'pagesize' => 100,
+			],
+			'sort' => ['defaultOrder' => ['created' => SORT_DESC]]
+		]);
+
+		$this->load($params);
+
+		if (!$this->validate()) {
+			// uncomment the following line if you do not want to return any records when validation fails
+			// $query->where('0=1');
+			return $dataProvider;
+		}
+
+		// Get the module instance
+		$module = Module::getInstance();
+
+		if ($module->setBlameableBehavior) {
+			$query->andWhere(['createdBy' => Yii::$app->user->id]);
+		}
+
+		$query->orFilterWhere(['like', 'fileName', $this->globalSearch]);
+		# ->orFilterWhere(['like', 'created', $this->globalSearch])
+		#->orFilterWhere(['like', 'modified', $this->globalSearch]);
+
+		return $dataProvider;
+	}
+}
+<?php
+$this->title = "Image manager";
+?>
+<div class="imagemanager-default-index">
+    <p>Welcome to image manager</p>
+    <p>Install run migrate:</p>
+    <p><code>yii migrate --migrationPath=@noam148/imagemanager/migrations</code></p>
+
+    <p><em>By noam148</em></p>
+</div>
+<?php
+
+/* @var $this \yii\web\View */
+
+/* @var $content string */
+
+use yii\helpers\Html;
+
+?>
+<?php $this->beginPage() ?>
+<!DOCTYPE html>
+<html lang="<?= Yii::$app->language ?>">
+<head>
+    <meta charset="<?= Yii::$app->charset ?>">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
+	<?= Html::csrfMetaTags() ?>
+    <title><?= Html::encode($this->title) ?></title>
+	<?php $this->head() ?>
+</head>
+<body>
+<?php $this->beginBody() ?>
+
+<?= $content; ?>
+
+<?php $this->endBody() ?>
+</body>
+</html>
+<?php $this->endPage() ?>
+<div class="thumbnail">
+    <img src="<?= \Yii::$app->imagemanager->getImagePath($model->id, 300, 300) ?>" alt="<?= $model->fileName ?>">
+    <div class="filename"><?= $model->fileName ?></div>
+</div>
+<?php
+
+use yii\helpers\Url;
+use yii\helpers\Html;
+use yii\widgets\ListView;
+use yii\widgets\Pjax;
+use kartik\file\FileInput;
+
+$this->title = Yii::t('imagemanager', 'Image manager');
+
+?>
+<div id="module-imagemanager" class="container-fluid <?= $selectType ?>">
+    <div class="row">
+        <div class="col-xs-6 col-sm-10 col-image-editor">
+            <div class="image-cropper">
+                <div class="image-wrapper">
+                    <img id="image-cropper"/>
+                </div>
+                <div class="action-buttons">
+                    <a href="#" class="btn btn-primary apply-crop">
+                        <i class="fa fa-crop"></i>
+                        <span class="hidden-xs"><?= Yii::t('imagemanager', 'Crop') ?></span>
+                    </a>
+					<?php if ($viewMode === "iframe"): ?>
+                        <a href="#" class="btn btn-primary apply-crop-select">
+                            <i class="fa fa-crop"></i>
+                            <span class="hidden-xs"><?= Yii::t('imagemanager', 'Crop and select') ?></span>
+                        </a>
+					<?php endif; ?>
+                    <a href="#" class="btn btn-default cancel-crop">
+                        <i class="fa fa-undo"></i>
+                        <span class="hidden-xs"><?= Yii::t('imagemanager', 'Cancel') ?></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-xs-6 col-sm-10 col-overview">
+			<?php Pjax::begin([
+				'id' => 'pjax-mediamanager',
+				'timeout' => '5000'
+			]); ?>
+			<?= ListView::widget([
+				'dataProvider' => $dataProvider,
+				'itemOptions' => ['class' => 'item img-thumbnail'],
+				'layout' => "<div class='item-overview'>{items}</div> {pager}",
+				'itemView' => function ($model, $key, $index, $widget) {
+					return $this->render("_item", ['model' => $model]);
+				},
+			]) ?>
+			<?php Pjax::end(); ?>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-options">
+            <div class="form-group">
+				<?= Html::textInput('input-mediamanager-search', null, ['id' => 'input-mediamanager-search', 'class' => 'form-control', 'placeholder' => Yii::t('imagemanager', 'Search') . '...']) ?>
+            </div>
+
+			<?php
+			if (Yii::$app->controller->module->canUploadImage):
+				?>
+
+				<?= FileInput::widget([
+				'name' => 'imagemanagerFiles[]',
+				'id' => 'imagemanager-files',
+				'options' => [
+					'multiple' => true,
+					'accept' => 'image/*'
+				],
+				'pluginOptions' => [
+					'uploadUrl' => Url::to(['manager/upload']),
+					'allowedFileExtensions' => \Yii::$app->controller->module->allowedFileExtensions,
+					'uploadAsync' => false,
+					'showPreview' => false,
+					'showRemove' => false,
+					'showUpload' => false,
+					'showCancel' => false,
+					'browseClass' => 'btn btn-primary btn-block',
+					'browseIcon' => '<i class="fa fa-upload"></i> ',
+					'browseLabel' => Yii::t('imagemanager', 'Upload')
+				],
+				'pluginEvents' => [
+					"filebatchselected" => "function(event, files){  $('.msg-invalid-file-extension').addClass('hide'); $(this).fileinput('upload'); }",
+					"filebatchuploadsuccess" => "function(event, data, previewId, index) {
+						imageManagerModule.uploadSuccess(data.jqXHR.responseJSON.imagemanagerFiles);
+					}",
+					"fileuploaderror" => "function(event, data) { $('.msg-invalid-file-extension').removeClass('hide'); }",
+				],
+			]) ?>
+
+			<?php
+			endif;
+			?>
+
+            <div class="image-info hide">
+                <div class="thumbnail">
+                    <img src="#">
+                </div>
+                <div class="edit-buttons">
+                    <a href="#" class="btn btn-primary btn-block crop-image-item">
+                        <i class="fa fa-crop"></i>
+                        <span class="hidden-xs"><?= Yii::t('imagemanager', 'Crop') ?></span>
+                    </a>
+                </div>
+                <div class="details">
+                    <div class="fileName"></div>
+                    <div class="created"></div>
+                    <div class="fileSize"></div>
+                    <div class="dimensions"><span class="dimension-width"></span> &times; <span
+                                class="dimension-height"></span></div>
+					<?php
+					if (Yii::$app->controller->module->canRemoveImage):
+						?>
+                        <a href="#" class="btn btn-xs btn-danger delete-image-item"><span
+                                    class="glyphicon glyphicon-trash"
+                                    aria-hidden="true"></span> <?= Yii::t('imagemanager', 'Delete') ?></a>
+					<?php
+					endif;
+					?>
+                </div>
+				<?php if ($viewMode === "iframe"): ?>
+                    <a href="#"
+                       class="btn btn-primary btn-block pick-image-item"><?= Yii::t('imagemanager', 'Select') ?></a>
+				<?php endif; ?>
+            </div>
+        </div>
+    </div>
+</div>  
 \ No newline at end of file
+<?php
+
+namespace backend\components\noam148\imageresize;
+
+use Yii;
+use yii\helpers\Url;
+use yii\helpers\FileHelper;
+use yii\imagine\Image;
+use yii\base\Exception;
+use Imagine\Image\Box;
+use Imagine\Image\ManipulatorInterface;
+
+class ImageResize
+{
+
+	const IMAGE_OUTBOUND = ManipulatorInterface::THUMBNAIL_OUTBOUND;
+	const IMAGE_INSET = ManipulatorInterface::THUMBNAIL_INSET;
+
+	/** @var string $cachePath path alias relative with webroot where the cache files are kept */
+	public $cachePath = 'assets/images';
+
+	/** @var int $cacheExpire */
+	public $cacheExpire = 0;
+
+	/** @var int $imageQuality */
+	public $imageQuality = 50;
+
+	/** @var int $useFilename if true show filename in url */
+	public $useFilename = true;
+
+	/** @var int $absoluteUrl if true include domain in url */
+	public $absoluteUrl = false;
+
+	/**
+	 * Creates and caches the image thumbnail and returns full path from thumbnail file.
+	 *
+	 * @param string $filePath to original file
+	 * @param integer $width
+	 * @param integer $height
+	 * @param string $mode
+	 * @param integer $quality (1 - 100 quality)
+	 * @param string $chosenFileName (custome filename)
+	 * @return string
+	 * @throws Exception
+	 */
+	public function generateImage($filePath, $width, $height, $mode = "outbound", $quality = null, $chosenFileName = null)
+	{
+		$filePath = FileHelper::normalizePath(Yii::getAlias($filePath));
+		if (!is_file($filePath)) {
+			throw new Exception("File $filePath doesn't exist");
+		}
+
+		//set resize mode
+		$resizeMode = null;
+		switch ($mode) {
+			case "outbound":
+				$resizeMode = ImageResize::IMAGE_OUTBOUND;
+				break;
+			case "inset":
+				$resizeMode = ImageResize::IMAGE_INSET;
+				break;
+			default:
+				throw new Exception('generateImage $mode is not valid choose for "outbound" or "inset"');
+		}
+
+		//create some vars
+		$cachePath = Yii::getAlias('@webroot/' . $this->cachePath);
+		//get fileinfo
+		$aFileInfo = pathinfo($filePath);
+		//set default filename
+		$sFileHash = md5($filePath . $width . $height . $resizeMode . filemtime($filePath));
+		$imageFileName = null;
+		//if $this->useFilename set to true? use seo friendly name
+		if ($this->useFilename === true) {
+			//set hash and default name
+			$sFileHashShort = substr($sFileHash, 0, 6);
+			$sFileName = $aFileInfo['filename'];
+			//set choosen filename if $chosenFileName not null.
+			if ($chosenFileName !== null) {
+				$sFileName = preg_replace('/(\.\w+)$/', '', $chosenFileName);
+			}
+			//replace for seo friendly file name
+			$sFilenameReplace = preg_replace("/[^\w\.\-]+/", '-', $sFileName);
+			//set filename
+			$imageFileName = $sFileHashShort . "_" . $sFilenameReplace;
+			//else use file hash as filename	
+		} else {
+			$imageFileName = $sFileHash;
+		}
+
+		$imageFileExt = "." . $aFileInfo['extension'];
+		$imageFilePath = $cachePath . DIRECTORY_SEPARATOR . substr($imageFileName, 0, 2);
+		$imageFile = $imageFilePath . DIRECTORY_SEPARATOR . $imageFileName . $imageFileExt;
+
+		if (file_exists($imageFile)) {
+			if ($this->cacheExpire !== 0 && (time() - filemtime($imageFile)) > $this->cacheExpire) {
+				unlink($imageFile);
+			} else {
+				return $imageFile;
+			}
+		}
+		//if dir not exist create cache edir
+		if (!is_dir($imageFilePath)) {
+			FileHelper::createDirectory($imageFilePath, 0755);
+		}
+		//create image
+		$box = new Box($width, $height);
+		$image = Image::getImagine()->open($filePath);
+		$image = $image->thumbnail($box, $resizeMode);
+
+		$options = [
+			'quality' => $quality === null ? $this->imageQuality : $quality
+		];
+		$image->save($imageFile, $options);
+		return $imageFile;
+	}
+
+	/**
+	 * Creates and caches the image and returns URL from resized file.
+	 *
+	 * @param string $filePath to original file
+	 * @param integer $width
+	 * @param integer $height
+	 * @param string $mode
+	 * @param integer $quality (1 - 100 quality)
+	 * @param string $fileName (custome filename)
+	 * @return string
+	 */
+	public function getUrl($filePath, $width, $height, $mode = "outbound", $quality = null, $fileName = null)
+	{
+		//get original file 
+		$normalizePath = FileHelper::normalizePath(Yii::getAlias($filePath));
+		//get cache url
+		$cacheUrl = Yii::getAlias($this->cachePath);
+		//generate file
+		$resizedFilePath = self::generateImage($normalizePath, $width, $height, $mode, $quality, $fileName);
+		//get resized file
+		$normalizeResizedFilePath = FileHelper::normalizePath($resizedFilePath);
+		$resizedFileName = pathinfo($normalizeResizedFilePath, PATHINFO_BASENAME);
+		//get url
+		$sFileUrl = Url::to('@web/' . $cacheUrl . '/' . substr($resizedFileName, 0, 2) . '/' . $resizedFileName, $this->absoluteUrl);
+		//return path
+		return $sFileUrl;
+	}
+
+	/**
+	 * Clear cache directory.
+	 *
+	 * @return bool
+	 */
+	public function clearCache()
+	{
+		$cachePath = Yii::getAlias('@webroot/' . $this->cachePath);
+		//remove dir
+		FileHelper::removeDirectory($cachePath);
+		//creat dir
+		return FileHelper::createDirectory($cachePath, 0755);
+	}
+
+}
+MIT License
+
+Copyright (c) 2016 noam148
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+Image resize for Yii2
+========================
+
+A Yii2 component for resizing images and store it in a cache folder
+
+Installation
+------------
+The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
+
+* Either run
+
+```
+php composer.phar require "noam148/yii2-image-resize" "*"
+```
+or add
+
+```json
+"noam148/yii2-image-resize" : "*"
+```
+
+to the require section of your application's `composer.json` file.
+
+* Add a new component in `components` section of your application's configuration file, for example:
+
+```php
+'components' => [
+    'imageresize' => [
+		'class' => 'noam148\imageresize\ImageResize',
+		//path relative web folder
+		'cachePath' => 'assets/images',
+		//use filename (seo friendly) for resized images else use a hash
+		'useFilename' => true,
+		//show full url (for example in case of a API)
+		'absoluteUrl' => false,
+	],
+],
+```
+
+Usage
+-----
+
+If you want to get a image url:
+
+```php
+/*
+ * $sImageFilePath_id: (required) path to file
+ * $width/$height: (required) width height of the image
+ * $mode: "outbound" or "inset" 
+ * $$quality: (1 - 100)
+ * $chosenFileName: if config -> components -> imageresize -> useFilename is true? its an option to give a custom name else use original file name
+ */
+\Yii::$app->imageresize->getUrl($sImageFilePath, $width, $height, $mode, $quality, $chosenFileName);
+```
+
+**If you got questions, tips or feedback? Please, let me know!**
 \ No newline at end of file
+{
+  "name": "noam148/yii2-image-resize",
+  "description": "A Yii2 component for resizing images (on the fly)",
+  "keywords": [
+    "yii2",
+    "extension",
+    "component",
+    "image",
+    "resize",
+    "on-the-fly"
+  ],
+  "homepage": "https://github.com/noam148/yii2-image-resize",
+  "type": "yii2-extension",
+  "license": "BSD-3-Clause",
+  "authors": [
+    {
+      "name": "Noam148",
+      "homepage": "https://github.com/noam148/"
+    }
+  ],
+  "require": {
+    "yiisoft/yii2": "*",
+    "yiisoft/yii2-imagine": "*"
+  },
+  "autoload": {
+    "psr-4": {
+      "noam148\\imageresize\\": ""
+    }
+  }
+}
 \ No newline at end of file
@@ -7,7 +7,7 @@
         'vendorPath' => dirname(dirname(__DIR__)) . '/vendor',
         'modules'    => [
             'imagemanager' => [
-                'class'                => 'noam148\imagemanager\Module',
+	            'class' => 'backend\components\noam148\imagemanager\Module',
                 'canUploadImage'       => true,
                 'canRemoveImage'       => function () {
                     return true;
@@ -61,8 +61,9 @@
             'filter'             => [
                 'class' => FilterHelper::className(),
             ],
+	        # пересозданный модуль, детальнее в back\com\noam\docs\why
             'imagemanager'       => [
-                'class'       => 'noam148\imagemanager\components\ImageManagerGetPath',
+	            'class' => 'backend\components\noam148\imagemanager\components\ImageManagerGetPath',
                 'mediaPath'   => dirname(dirname(__DIR__)) . '/storage',
                 'cachePath'   => '../../storage/cache',
                 'useFilename' => true,