
<link type="text/css" href="css/image.css" rel="stylesheet"/>
<script src="js/image.js" type="text/javascript"></script>
<script src="js/page-leave-handler.js" type="text/javascript"></script>

<TMPL_IF .allow.create_image>
<script src="js/image-upload.js" type="text/javascript"></script>
</TMPL_IF>

<script>
    var project_id="<TMPL_VAR .project_id>";
    var studio_id="<TMPL_VAR .studio_id>";
    var selectedImageTab='select';

    $(document).ready(
    	function() {
            addLocalization('image');

            //add tab change handler
            $("#image-tabs").tabs({
                activate: function(event, ui){
                    if (ui==null) return;
                    selectedImageTab = getSelectedTab('image-tabs');

                    <TMPL_IF .allow.create_image>
                        if(selectedImageTab=="upload"){
                            initUploadDialog();
                            $('#imageList').hide();
                            return;
                        }
                    </TMPL_IF>

                    //TODO: add confirm handler
                    $('#imageList').show();
                }
            });
            // get initially selected tab
            selectedImageTab = getSelectedTab('image-tabs');
            pageLeaveHandler();
        }
    );
</script>

<div id="content">
<TMPL_IF .allow.read_image>

<div id="image-tabs">
    <ul>
        <li>
            <a href="#image-tabs-select" value="select"> 
                <TMPL_VAR .loc.tab_select> 
                <TMPL_IF .allow.update_image> / <TMPL_VAR .loc.tab_edit> </TMPL_IF> 
            </a>
        </li>

        <TMPL_IF .allow.create_image>
        <li>
            <a href="#image-tabs-upload" value="upload"><TMPL_VAR .loc.tab_upload></a>
        </li>
        </TMPL_IF>
    </ul>

    <!-- select image -->
    <div id="image-tabs-select">
    </div>

    <!-- upload images -->
    <TMPL_IF .allow.create_image>
    <div id="image-tabs-upload">
    </div>
    </TMPL_IF>    
</div>

<div id="imageList">

    <div style="clear:both; display:flex; flex-direction:row;">
        <div>
	        <form id="image_manager" action="image.cgi">
		        <input name="search" value="<TMPL_VAR search escape=none>" style="width:20em;">
		        <input type="hidden" name="filename" value="<TMPL_VAR filename escape=none>">
		        <button onclick="searchImage('<TMPL_VAR target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false;"><TMPL_VAR .loc.button_search></button>
	        </form>
            <TMPL_VAR count> <TMPL_VAR .loc.label_search_hits><br />
            <div class="images" 
                style="overflow-y:scroll" 
                target="<TMPL_VAR .target>" 
                projectId="<TMPL_VAR .project_id>" 
                studioId="<TMPL_VAR .studio_id>" 
                seriesId="<TMPL_VAR .series_id>" 
                eventId="<TMPL_VAR .event_id>"
                pid="<TMPL_VAR .pid>"
            >
                <TMPL_LOOP images>
	                <div class="image" 
		                id="img_<TMPL_VAR id>" 
		                style="background-image:url('show-image.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&type=icon&filename=<TMPL_VAR filename>')"
		                title="<TMPL_VAR description>"
                        filename="<TMPL_VAR filename>"
	                >
		                <div class="label"><TMPL_VAR name></div>
	                </div>
                </TMPL_LOOP>
            </div>
        </div>
        <div id="img_editor" >
        </div>
    </div>
</div>

</TMPL_IF>
</main>
</center>
</body>

</html>

