<!-- Jorge, 2 July 2018: Added facility to select images from existing resources in folders -->
<p><label class="title">Or select an image from the library</label></p>
<p></p>
<!--// Existing Media Resource Library -->
<div id="EMRL" style="max-height:65% !important; overflow:scroll;">
    <div class="container">
    <?php
        $html = ''; 
        $cnt  = 0;
        $opened = false;
        foreach($browser->dirs as $dir)
        {
            if ($cnt === 0) 
            {
                $html .= '<div class="row">';
                $opened = true;
            }

            $html .= '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-3">';
            $html .= '<span class="title">'.$dir['file_name'].'</span>';
            $html .= '</div>';
            $cnt++;
            if ($cnt >= 4)
            {
                $cnt = 0;
                $html .= '</div>';
                $opened = false;
            }				
        }
        if ($opened) $html .= '</div>';
        echo($html);
        
        //-- images:
        $html = ''; 
        $cnt  = 0;
        $opened = false;
        foreach($browser->files as $file)
        {
			//SableDebug::debugout(basename($file['file_url']));
            if ($cnt === 0) 
            {
                $html .= '<div class="row">';
                $opened = true;
            }
            
			$onclick = "insertUploadFileName('".$field."','".$file['file_url']."','".$imgField."', '".$fileType."');";
			$style = "";
			$lbl = "";
			if (SableGeneralFunctions::fileIsImage($file['file_url']))
			{
	            $style = 'style="background-image:url(\''.$file['file_url'].'\'); background-position:center center; background-size: cover;
				background-repeat:no-repeat; width:192px; height:192px; border:thin silver solid; border-radius:3px;
				background-color:silver; margin-bottom: 5px; cursor: pointer;"';
				$icon = "";
			}
			else
			{	
	            $style = 'style="width:192px; height:192px; border:thin silver solid; border-radius:3px;
				background-color:silver; margin-bottom: 5px; cursor: pointer; display:inline-block; white-space:normal;"';						
				$icon = SableGeneralFunctions::getFileIcon($file['file_url'], 96, '', true);
				$lbl = '<label>'.basename($file['file_url']).'</label>';
			}
            $class = "zoom-wrapper";
            
            $html .= '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">';
            $html .= '<div '.$style.' onClick="'.$onclick.'" class="'.$class.'">'.$lbl.$icon.'</div>';
            //$html .= SableSystem::getImgHTML($file['file_url'], 128, '', true);
            $html .= '</div>';
            $cnt++;
            if ($cnt >= 3)
            {
                $cnt = 0;
                $html .= '</div>';
                $opened = false;
            }				
        }
        if ($opened) $html .= '</div>';
        echo($html);
    ?>
    </div>
</div>
<!-- Existing Media Resource Library //-->