//defined('IN_MANAGER_MODE') or die();

global $content,$default_template,$tmplvars;
$tvIds = isset($tvIds) ? $tvIds : 1;
$templ = isset($templ) ? explode(',',$templ) : false;
$role = isset($role) ? explode(',',$role) : false;
$style = (isset($w) || isset($h)) ? "'max-width':'{$w}px','max-height':'{$h}px','cursor':'pointer'" : '';
$site = $modx->config['site_url'];
$cur_templ = isset($_POST['template']) ? $_POST['template'] : (isset($content['template']) ? $content['template'] : $default_template);
$cur_role = $_SESSION['mgrRole'];
if (($templ && !in_array($cur_templ,$templ)) || ($role && !in_array($cur_role,$role))) return;

$lang['insert']='Add';
$lang['link']='Image:';
$lang['title']='Title:';
$lang['url']='Site url:'; //our additional field label
$lang['multiple']='Batch fill';

$e = &$modx->Event;
if ($e->name == 'OnDocFormRender') {
require_once(MODX_MANAGER_PATH.'includes/tmplvars.inc.php');
$modx_script = renderFormElement('image',0,'','','');
preg_match('/(<script[^>]*?>.*?<\/script>)/si', $modx_script, $matches);
$output = $matches[0];
$output .= <<< OUT
<!-- MultiPhotos -->
<style type="text/css">
.fotoitem {border:1px solid #e3e3e3; margin:0 0 5px; padding:2px 5px 5px 5px; position:relative; overflow:hidden; white-space:nowrap; zoom:1}
.fotoitem span {display:inline-block; padding-top:3px;}
.fotoitem input {line-height:1.1; vertical-align:middle;}
.fotoimg {position:absolute; right:0; padding-top:3px;}
</style>
<script type="text/javascript">
window.ie9=window.XDomainRequest && window.performance; window.ie=window.ie && !window.ie9; /* IE9 patch */
BrowseServerMultiple = function (ctrl) {
        lastImageCtrl = ctrl;
        var w = screen.width * 0.7;
        var h = screen.height * 0.7;
        OpenServerBrowser('media/browser/mcpuk/browse.php?opener=tinymce&type=images&langCode=ru', w, h);
        }
var MultiPhotos = new Class({
        initialize: function(fid){
                this.name = fid;
                this.fid = $(fid);
                var hpArr = (this.fid.value && this.fid.value!='[]') ? Json.evaluate(this.fid.value) : [null];
                this.fid.setStyle('display','none');
                //Creating button for batch fill
                this.fillBtn = new Element('input',{'type':'button','value':'{$lang['multiple']}','events':{
                        'click':function(){
                        window.KCFinder = {};
                        window.KCFinder.callBackMultiple = function(files) {
                        window.KCFinder = null;
                                //Processing selected files files[i]
                        var selected = new Array();
                        for (var i=0; i < files.length; i++) {
                                selected[i] = new Array();
                                selected[i][0]=files[i];
                                selected[i][1]='';
								selected[i][2]=''; //this is additional field, it will contain "undefined" if we shall not make it empty here
                                };
                        $(fid).value = Json.toString(selected);
                        };
                        BrowseServerMultiple()}.bind(this)
                }});
this.fid.getParent().adopt(this.fillBtn);
		this.box = new Element('div',{'class':'fotoEditor'});
		this.fid.getParent().adopt(this.box);
		this.lastfoto='';
		this.foto=0;
		for (var f=0;f<hpArr.length;f++) this.addItem(hpArr[f]);
		if (typeof(SetUrl) != 'undefined') {
			this.OrigSetUrl = SetUrl;				
			SetUrl = function(url, width, height, alt) {
				this.OrigSetUrl(url, width, height, alt);
				if ($(this.lastfoto)!=null) $(this.lastfoto).fireEvent('change');
			}.bind(this)
		}
		this.sort=new Sortables(this.box,{
			onStart: function(el){el.setStyles({'background':'#f0f0f0','opacity':1});},
			onComplete: function(el){el.setStyle('background','none');this.setEditor();}.bind(this)
		});	
		this.box.getElements('div.fotoitem').setStyle('cursor','move');
		this.box.getElements('input[type=text]').addEvent('click',function(){this.focus();});
	},
	br: function(){return new Element('br');}, //it adds br tag 
	sp: function(text){return new Element('span').setText(text);}, //it adds labels to fields
	addItem: function(values,elem){
		this.foto++;
		var f = this.foto;
		var rowDiv = new Element('div',{'class':'fotoitem'});
		if (elem) {rowDiv.injectAfter(elem);} else {this.box.adopt(rowDiv);}
		if (!values) values=['','','']; //we have 3 fields, so here we put 3 empty elements in array
		var linkURL = new Element('input',{'type':'text','name':'link_'+this.name+'_'+f,'id':'link_'+this.name+'_'+f,'class':'imageField','value':values[0],'events':{
			'change':function(){
				var url = linkURL.value;
				{$thumbUrl}
				var imgDiv=$('foto_'+this.name+'_'+f+'_'+'PrContainer');
				if (imgDiv!=null) imgDiv.remove();
				if (url != "") {
					new Element('div',{'class':'fotoimg','id':'foto_'+this.name+'_'+f+'_'+'PrContainer','styles':{'width':'{$w}px'}}).injectTop(rowDiv).adopt(
						new Element('img',{'src':'../'+url,'styles':{ $style },'events':{
							'click':function(){this.lastfoto='foto_'+this.name+'_'+f; BrowseServer('foto_'+this.name+'_'+f)}.bind(this)
						}})
					);
				}
this.setEditor();}.bind(this)
		}});
		var bInsertLink = new Element('input',{'type':'button','value':'{$lang['insert']}','events':{
			'click':function(){this.lastfoto='link_'+this.name+'_'+f; BrowseServer('link_'+this.name+'_'+f)}.bind(this) //file browser button
		}});
		var imgName = new Element('input',{'type':'text','class':'imageField','value':values[1],'events':{
			'keyup':function(){this.setEditor();documentDirty=true;}.bind(this) //field to add image title
		}});
		var imgUrl = new Element('input',{'type':'text','class':'imageField','value':values[2],'events':{
			'keyup':function(){this.setEditor();documentDirty=true;}.bind(this) //our additional field
		}});
		var bAdd = new Element('input',{'type':'button','value':'+','events': {
			'click':function(){this.addItem(null,rowDiv);}.bind(this)
		}}); //plus button
		rowDiv.adopt(this.sp('{$lang['link']}'),this.br(),linkURL,bInsertLink,this.br()); //here we add elements: image lable, br tag, image field, file browser button, br tag again
		rowDiv.adopt(this.sp('{$lang['title']}'),this.br(),imgName,this.br(),this.sp('{$lang['url']}'),this.br(),imgUrl,bAdd); //and here we continue to add: title label, br tag, title field, br tag, our field label, our field itself, plus button
		rowDiv.adopt(new Element('input',{'type':'button','value':'-','events':{
			'click':function(){if (this.box.getElements('div.fotoitem').length>1) rowDiv.remove();this.setEditor();}.bind(this) //and finally we add minus button
		}}));
		linkURL.fireEvent('change');
	},
	setEditor: function(){
var hpArr=new Array();
		this.box.getElements('div.fotoitem').each(function(item){
			var itemsArr=new Array();
			var inputs=item.getElements('input[type=text]');
			var noempty=false;
			inputs.each(function(item){itemsArr.push(item.value); if (item.value) noempty=true;});
			if (noempty) hpArr.push(itemsArr);
		});
		this.fid.value = Json.toString(hpArr);
	}
});
window.addEvent('domready', function(){
	var tvIds = [$tvIds];
	for (var i=0;i<tvIds.length;i++){
		var fid = 'tv'+ tvIds[i];
		if($(fid)!=null) {var modxMultiPhotos=new MultiPhotos(fid);}
	}
});
</script>
<!-- /MultiPhotos -->
OUT;
$e->output($output);
}