{if isset($smarty.request.fileIds) && !isset($selectedFileIdsString)}
    {assign var=selectedFileIdsString value=$smarty.request.fileIds}
{/if}
<div class="mdl-file__browser">
    {if ($user->data.user_id eq $post->data.post_user && isset($smarty.request.post_id)) || !isset($smarty.request.post_id)}    
    <div id="categoryEditTabs" class="bigTabs crowdworksTabs mdl-tabs">
        <ul>
            <li class="selected">
                <a href="#" id="tab_fileUpload">
                    {if $smarty.request.behaviour eq 'simple'}
                        {'Upload a file'|gettext}
                    {elseif ($user->data.user_id eq $post->data.post_user && isset($smarty.request.post_id)) || !isset($smarty.request.post_id)}
                        {"Add files"|gettext}
                    {else}
                        {'Edit files'|gettext}
                    {/if}
                </a>
            </li>
            {if $allowYouTube}<li>
                <a href="#" id="tab_videoUpload">
                    {'From YouTube'|gettext}
                </a>
            </li>{/if}
        </ul>
    </div>
    <div class="tabView">
        <div id="viewtab_fileUpload">
            {if isset($uploadError)}
                <div class="error">{$uploadError}</div>
            {/if}


            <form method="post" enctype="multipart/form-data" onSubmit="$('submitButton').disabled=true; $('cancelButton').disabled=true; $('saveButton').disabled=true; $('submitButton').value='Uploading file...';">
                <div>
                    <input type="file" name="newFile" id="newFile" class="left" />
                    <input type="hidden" name="ak" id="ak" value="{$user->getActionKey()}" />
                    <input type="hidden" name="MAX_FILE_SIZE" value="104857600" /><!--Max file size of 100MB for now-->
                    <input type="hidden" name="addFile" value="1" />
                    <input type="hidden" name="uploadedBehaviour" value="{$smarty.request.behaviour|escapeonce}" />
                    {if $smarty.request.behaviour eq 'simple'}
                        <div class="clear"><!--IE--></div>
                        <p style="margin-top:10px;">{'Choose the file you want, and then press the <b>Upload file</b> button below.'|gettext}</p>
                    {else}
                        {if $smarty.request.mode eq "check"}
                            <input type="hidden" name="fileIds" value="{$selectedFileIdsString}" class="form_button fileWindow_fileIdsField" />
                        {/if}
                    {/if}
                    <input type="submit" name="submit" id="submitButton" value="{'Upload file'|gettext}" style="margin-left:5px;" class="mdl-button -primary">
                </div>
                <div class="clear"><!--IE--></div>
            </form>
            {/if}
        </div>
        <div id="viewtab_videoUpload" style="display:none;">
            <form method="post" onSubmit="$('submitButton').disabled=true; $('cancelButton').disabled=true; $('saveButton').disabled=true; $('submitButton').value='Checking video...';">
                <div>
                    <input type="text" name="youtube_video_url" id="youtube_video_url" class="left formElement" />
                    <input type="hidden" name="addFile" value="1" />
                    <input type="hidden" name="uploadedBehaviour" value="{$smarty.request.behaviour|escapeonce}" />
                    <input type="hidden" name="fileIds" value="{$selectedFileIdsString}" class="form_button fileWindow_fileIdsField" />
                    {if $smarty.request.behaviour eq 'simple'}
                        <div class="clear"><!--IE--></div>
                        <p style="margin-top:10px;">{'Paste the URL of the YouTube video and press the <b>Get video</b> button below.'|gettext}</p>
                    {/if}
                    <input type="submit" name="submit" id="submitButton" value="{'Get video'|gettext}" style="margin-left:5px;" class="form_button form_button_marginLeft" />
                </div>
                <div class="clear"><!--IE--></div>
            </form>
        </div>
    </div>

        <div id="fileWindow_fileArea" class="mdl-file__box-container" style="{if $smarty.request.behaviour eq 'simple'}display:none;{/if}">
        {if $availableFiles|@count eq 0}
            {if $displayDefaultAndNothingBannerOptions}
            <div class="fileBox mdl-file__box">
                <label>
                    <div class="fileBoxThumb" style="background-image:url({$vars.resourcesUrl}none96.gif);"></div>
                    <div class="fileBoxName mdl-form__label -inline">
                        <input {if $smarty.request.mode eq "check"}type="checkbox" name="fileWindow_fileCheckBox:-1"{else}type="radio" name="selectedFile"{/if} id="fileWindow_fileCheckBox:-1" class="fileCheckBox mdl-form__input -radio" /> {'Nothing'|gettext}
                    </div>
                </label>
            </div>
            <div class="fileBox mdl-file__box">
                <label>
                    <div class="fileBoxThumb" style="background-image:url({$vars.resourcesUrl}default-banner96.png);"></div>
                    <div class="fileBoxName mdl-form__label -inline">
                        <input {if $smarty.request.mode eq "check"}type="checkbox" name="fileWindow_fileCheckBox:0"{else}type="radio" name="selectedFile"{/if} id="fileWindow_fileCheckBox:0" class="fileCheckBox mdl-form__input -radio" /> {'Default'|gettext}
                    </div>
                </label>
            </div>
            {elseif ($user->data.user_id eq $post->data.post_user && isset($smarty.request.post_id)) || !isset($smarty.request.post_id)}
                <h3>{"You have not uploaded any files"|gettext}</h3>
                <p>{"Use the form above to upload files. They'll then appear here, and be available every time you make a post."|gettext}</p>
            {else}
                <h3>{"No attached files"|gettext}</h3>
            {/if}
        {else}
            {if $displayDefaultAndNothingBannerOptions}
            <div class="fileBox mdl-file__box">
                <label>
                    <div class="fileBoxThumb" style="background-image:url({$vars.resourcesUrl}none96.gif);"></div>
                    <div class="fileBoxName mdl-form__label -inline">
                        <input {if $smarty.request.mode eq "check"}type="checkbox" name="fileWindow_fileCheckBox:-1"{else}type="radio" name="selectedFile"{/if} id="fileWindow_fileCheckBox:-1" class="fileCheckBox mdl-form__input -radio" /> {'Nothing'|gettext}
                    </div>
                </label>
            </div>
            <div class="fileBox mdl-file__box">
                <label>
                    <div class="fileBoxThumb" style="background-image:url({$vars.resourcesUrl}default-banner96.png);"></div>
                    <div class="fileBoxName mdl-form__label -inline">
                        <input {if $smarty.request.mode eq "check"}type="checkbox" name="fileWindow_fileCheckBox:0"{else}type="radio" name="selectedFile"{/if} id="fileWindow_fileCheckBox:0" class="fileCheckBox mdl-form__input -radio" /> {'Default'|gettext}
                    </div>
                </label>
            </div>
            {elseif intval($smarty.request.allowNone) eq 1}
            <div class="fileBox mdl-file__box">
                <label>
                    <div class="fileBoxThumb" style="background-image:url({$vars.resourcesUrl}none96.gif);"></div>
                    <div class="fileBoxName mdl-form__label -inline">
                        <input {if $smarty.request.mode eq "check"}type="checkbox" name="fileWindow_fileCheckBox:0"{else}type="radio" name="selectedFile"{/if} id="fileWindow_fileCheckBox:0" class="fileCheckBox mdl-form__input -radio" /> {'Nothing'|gettext}
                    </div>
                </label>
            </div>
            {/if}
            {foreach from=$availableFiles item=cFile}
                {if $cFile->data.file_origin eq 'upload'}
                <div class="fileBox mdl-file__box">
                  <label>
                    <div class="fileBoxThumb lazy-background" {if in_array($cFile->data['file_extension'], File::$allowedImageExtensions)}data-style="background-image:url({$cFile->getCloudinaryURL(96, 96)});"{else}style="background-image:url({$vars.resourcesUrl}filetypes/{$cFile->data.file_extension}.png);"{/if}></div>
                    <div class="fileBoxName mdl-form__label -inline">
                      <input {if $smarty.request.mode eq "check"}type="checkbox" name="fileWindow_fileCheckBox:{$cFile->data.file_id}"{else}type="radio" name="selectedFile"{/if} id="fileWindow_fileCheckBox:{$cFile->data.file_id}" class="fileCheckBox mdl-form__input -radio">
                      {$cFile->data.file_name|truncate:16:'..':true:true}
                      {if $smarty.request.updateTarget eq "editor"}
                        <input type="hidden" name="imageUrl:{$cFile->data.file_id}" class="imageUrlSelector" id="imageUrl:{$cFile->data.file_id}" value="{$cFile->getCloudinaryUrl()}" />
                      {/if}
                    </div>
                  </label>
                </div>
                {else}
                <div class="fileBox mdl-file__box">
                  <label>
                    <div class="fileBoxThumb" style="background-image:url(https://i.ytimg.com/vi/{$cFile->data.file_reference}/1.jpg);"></div>
                    <div class="fileBoxName mdl-form__label -inline">
                      <input {if $smarty.request.mode eq "check"}type="checkbox" name="fileWindow_fileCheckBox:{$cFile->data.file_id}"{else}type="radio" name="selectedFile"{/if} id="fileWindow_fileCheckBox:{$cFile->data.file_id}" class="fileCheckBox mdl-form__input -radio" />
                      {$cFile->data.file_name|truncate:16:'..':true:true}
                      {if $smarty.request.updateTarget eq "editor"}
                        <input type="hidden" name="imageUrl:{$cFile->data.file_id}" class="imageUrlSelector" id="imageUrl:{$cFile->data.file_id}" value="{$cFile->getCloudinaryUrl()}" />
                      {/if}
                    </div>
                  </label>
                </div>
                {/if}
            {/foreach}
        {/if}
        </div>

        
        <div style="{if $smarty.request.behaviour eq 'simple'}display:none;{/if}" class="mdl-form__button-row" id="actionButtons">
            <input type="hidden" name="fileWindow_fileIds" id="fileWindow_fileIds" value="{$selectedFileIdsString}" class="form_button fileWindow_fileIdsField" />
            {if $smarty.request.updateTarget eq "editor"}
              <input type="button" name="cancel" id="cancelButton" value="{'Cancel'|gettext}" onClick="tinyMCEPopup.close();" class="mdl-button" />
            {else}
              <input type="button" name="cancel" id="cancelButton" value="{'Cancel'|gettext}" onClick="self.close();" class="mdl-button" />
            {/if}
            <input type="button" name="saveButton" id="saveButton" value="{if $smarty.request.mode eq "radio"}{'Save choice'|gettext}{else}{'Save choices'|gettext}{/if}" class="mdl-button -primary">
        </div>
        <div style="display:none;" id="actionMessage">
            {"Please wait..."|gettext}
        </div>

</div>

<script type="text/javascript">

{if (isset($smarty.request.sourceFieldId))}
var idField='{$smarty.request.sourceFieldId|escapeonce}';
{else}
var idField='filelinks';
{/if}
    
{if (isset($smarty.request.useEditorId))}
var editorId='{$smarty.request.useEditorId|escapeonce}';
{else}
var editorId='';
{/if}

{if (isset($smarty.request.fileAreaId))}
var fileAreaField='{$smarty.request.fileAreaId|escapeonce}';
{else}
var fileAreaField='fileArea';
{/if}

var d = new Date();
var n = d.getMilliseconds();

var checkBoxes=jQuery('input.fileCheckBox');

{if $smarty.request.updateTarget eq "editor"}
var win = tinyMCEPopup.getWindowArg("window");
$$('.fileWindow_fileIdsField').each(function(el){ el.setValue(win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value); });
{elseif !$smarty.request.addFile}
$$('.fileWindow_fileIdsField').each(function(el){ el.setValue(window.opener.$(idField).getValue()); });
{/if}


var fileIdArray=$('fileWindow_fileIds').getValue().split(",");
fileIdArray=fileIdArray.without('');

// Check the selected image(s)
for(var i = 0; i<fileIdArray.length ; i++) {
	{if $smarty.request.updateTarget eq "editor"}
        var foundElement = jQuery('.imageUrlSelector:input[value="'+fileIdArray[i]+'"]');
        if (foundElement.length>0) {
            jQuery('#fileWindow_fileCheckBox\\:'+foundElement[0].id.split(":")[1]).prop('checked', true);
        }
        /*if (fileIdArray.indexOf( $('imageUrl:'+checkBoxes[i].id.substr(checkBoxes[i].id.indexOf(":")+1)).getValue() )!=-1){
            checkBoxes[i].checked = true;
        }*/
	{else}
        jQuery('#fileWindow_fileCheckBox\\:'+fileIdArray[i]).prop('checked', true);
        /*if (fileIdArray.indexOf( checkBoxes[i].id.substr(checkBoxes[i].id.indexOf(":")+1) )!=-1){
            checkBoxes[i].checked = true;
        }*/
	{/if}
}

var checkboxClickHandler = function(event) {
    {if $smarty.request.mode eq "radio"}
    fileIdArray.clear(); // We are in radio mode, so only one item in the list, please.
    {/if}

    if (this.checked==true){
        {if $smarty.request.updateTarget eq "editor"}
        fileIdArray.push( $('imageUrl:'+(this.id.substr(this.id.indexOf(":")+1))).getValue() ); // We are pushing the URL			
        {else}
        fileIdArray.push( this.id.substr(this.id.indexOf(":")+1) ); // We are pushing the id
        {/if}
    } else {
        fileIdArray=fileIdArray.without(this.id.substr(this.id.indexOf(":")+1));
    }
    
    $('fileWindow_fileIds').setValue(fileIdArray.join(','));
}

checkBoxes.click(checkboxClickHandler);


jQuery('#saveButton').click(doPictureSubmit);

var db = new Date();
//alert("JS time: "+(db.getMilliseconds() - n));
    
function doPictureSubmit() {
    $('actionButtons').hide();
    $('actionMessage').show();
	{if $smarty.request.updateTarget ne "editor" && $smarty.request.updateTarget ne "categoryFileList"}
	window.opener.$(idField).setValue($('fileWindow_fileIds').getValue());
	{/if}

	{if $smarty.request.updateTarget eq "post"}

		//Update the target element on the post page
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/formlist?itemType=post&itemId={$smarty.request.itemId|intval}&fileIds="+$('fileWindow_fileIds').getValue(),
			{
				onComplete:function(){
					window.close();	
				}
			}
		);
        
	{elseif $smarty.request.updateTarget eq "categoryFileList"}
        var idsFromHere=$F('fileWindow_fileIds').split(',');
        var idsInOtherForm=window.opener.$F(idField).split(',');
        var finalCombinedIds=[];
        for(var arrCount=0;arrCount<idsFromHere.length;arrCount++){
            finalCombinedIds.push(idsFromHere[arrCount]);
        }
        for(var arrCount=0;arrCount<idsInOtherForm.length;arrCount++){
            finalCombinedIds.push(idsInOtherForm[arrCount]);
        }
        var finalCombinedDeDupedIds=finalCombinedIds.uniq();
        
        window.opener.$(idField).setValue(finalCombinedDeDupedIds.join(','));
        
		//Update the target element on the category form
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/formlist?deletable=1&deletableCallback=Category.admin_deleteFile&itemType=category&itemId={$smarty.request.itemId|intval}&fileIds="+finalCombinedDeDupedIds.join(','),
			{
				onComplete:function(){
					window.close();	
				}
			}
		);

	{elseif $smarty.request.updateTarget eq "userPic"}

		//Code to update the target on the profile edit page
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/ashtml/"+$('fileWindow_fileIds').getValue()+"?xSize=230&ySize=230",
			{
				onComplete:function(){
                    {*if editorId !== ''}
                        window.opener.ImageEditor.start(editorId);
                    {/if*}
					window.close();	
				}
			}
		);
	{elseif $smarty.request.updateTarget eq "badgeEdit"}

		//Code to update the target on the profile edit page
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/ashtml/"+$('fileWindow_fileIds').getValue()+"?xSize=100&ySize=100",
			{
				onComplete:function(){
					window.close();	
				}
			}
		);

	{elseif $smarty.request.updateTarget eq "logo"}

		//Code to update the target on the logo edit page
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/ashtml/"+$('fileWindow_fileIds').getValue()+"?xSize=300&ySize=60&loadType=c_fit",
			{
				onComplete:function(){
					window.close();	
				}
			}
		);

	{elseif $smarty.request.updateTarget eq "banner"}

		//Code to update the target on the banner edit page
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/ashtml/"+$('fileWindow_fileIds').getValue()+"?xSize=454&ySize=454&loadType=c_fit",
			{
				onComplete:function(){
					window.close();	
				}
			}
		);

	{elseif $smarty.request.updateTarget eq "background"}

		//Code to update the target on the banner edit page
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/ashtml/"+$('fileWindow_fileIds').getValue()+"?xSize=454&ySize=454&loadType=c_fit",
			{
				onComplete:function(){
					window.close();	
				}
			}
		);

	{elseif $smarty.request.updateTarget eq "categoryEdit"}

		//Code to update the target on the banner edit page
		new Ajax.Updater(window.opener.$(fileAreaField), "/file/ashtml/"+$('fileWindow_fileIds').getValue()+"?xSize=96&ySize=96",
			{
				onComplete:function(){
					window.close();	
				}
			}
		);

	{elseif $smarty.request.updateTarget eq "editor"}

		//Code to update the target in the editor
		win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value=$('fileWindow_fileIds').getValue();
		if (win.ImageDialog.getImageData)
			win.ImageDialog.getImageData();
		if (win.ImageDialog.showPreviewImage)
			win.ImageDialog.showPreviewImage($('fileWindow_fileIds').getValue());
		tinyMCEPopup.close();

	{/if}
	//window.close();
    {if $smarty.request.button}
        window.opener.$('{$smarty.request.button|escapeonce}').setValue('{'Change image'|gettext}');
    {/if}

}

{if $smarty.request.uploadedBehaviour eq 'simple'}
    doPictureSubmit();
{/if}

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
    var lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.setAttribute('style', entry.target.getAttribute('data-style'));
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  } else {
    for(i = 0; i<lazyBackgrounds.length ; i++) {
        lazyBackgrounds[i].setAttribute('style', lazyBackgrounds[i].getAttribute('data-style'));
        lazyBackgrounds[i].classList.add("visible");
    }
  }

  jQuery('.mdl-form__input.-checkbox,.mdl-form__input.-radio').not('.-processed,.-faux').each(function(){
    var el = jQuery(this);
    var type = el.hasClass('-radio') ? '-radio' : '-checkbox';
    el.after('<span class="mdl-form__input -faux ' + type + '"></span>');
    el.addClass('-processed');
  });

});
</script>