{*

/*
*
*	Pixaria Gallery
*	Copyright Jamie Longstaff
*
*/

*}{include_template file="admin.snippets/admin.html.header.tpl"}

<div id="admin-outerdiv">

<div id="admin-innerdiv">

<div class="context-tools">{include_template file="admin.toolbars/library.tpl"}</div>

{if $debug}
<form action="" enctype="multipart/mixed" method="post">
	<input type="hidden" name="cmd" value="incoming" />
	<input type="hidden" name="debug" value="true" />
	<input type="text" name="directory" value="" />
	<input type="file" name="Filedata" />
	<input type="submit" />
</form>
{/if}

<form name="upload-form" id="upload-form" method="post" onsubmit="javascript:return false;">

<input type="hidden" name="file_counter" value="0" id="file-counter" />
<input type="hidden" name="cookie_persist" value="" id="cookie_persist" />
<input type="hidden" name="psg_userid" value="" id="psg_userid" />

<div class="form-horizontal">

	<div class="form-header">Quick Image Upload and Import <span class="beta">Beta!</span></div>
	
	<div class="form-body">
	
		<div class="form-box" style="border-right:1px dotted #BBB; min-height:190px; width:300px;">
		
			<h1>1. Select files to upload and import</h1>
			
			<p><strong>Please note that this tool is experimental and may have bugs. To use the old upload tools, <a href="{$base_url}{$fil_admin_library_import}?cmd=showFormUploadImages" style="text-decoration:underline">click here</a>.</strong></p>
			
			<p>Pick image files from your computer to import into your image library.  To select a range of files, use the shift key or to pick individual files, the 'cmd' key (Mac) or 'ctrl' key (Windows).</p>
			
			<div id="upload-widget" style="overflow:hidden; height:2.5em;">
			
				<div id="uploaderContainer" style="position:relative; height:1em;">
				
					<div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
					
					<div id="selectFilesLink" style="position:absolute; z-index:1"><input type="button" id="selectLink" value="Select JPG Files" class="button" /></div>
					
				</div>
			
			</div>
			
		</div>
		
		<div class="form-box" style="border-right:1px dotted #BBB; min-height:190px; width:300px;">
			
			<h1>2. Choose where to save the images</h1>
			
			<h2>Pick an existing directory:</h2>
			
			<select class="select" name="directory" onchange="javascript:$('directory-name').value=this.options[selectedIndex].value;" style="width:290px;">
				<option value="">Choose where to save the image files</option>
				<option value=""></option>
				{section name="lib" loop=$library}<option value="{$library[lib]}">{$library[lib]}</option>{/section}
			</select><br /><br />
				
			<h2>Or enter a directory name:</h2>
			<input type="text" class="text" id="directory-name" name="directory" value="{$smarty.now|date_format:'%Y-%m-%d'}" style="width:270px;" />
			
		</div>
		
		<div class="form-box" id="upload-button" style="display:none; min-height:190px; width:300px;">
			
			<h1>3. Upload and import selected images</h1>
		
			<p>You are now ready to begin uploading the selected images into Pixaria Gallery.</p>
			
			<input type="button" class="button" id="uploadLink" onClick="upload(); return false;" value="Start Upload" />
			
		</div>

		<div class="clear"></div>
		
	</div>

</div>



	
</form>


<br />

<div id="dataTableContainer" style="display:none;"></div>

{literal}

<script type="text/javascript">
	
	YAHOO.util.Event.onDOMReady(function () { 
		var uiLayer = YAHOO.util.Dom.getRegion('selectLink');
		var overlay = YAHOO.util.Dom.get('uploaderOverlay');
		YAHOO.util.Dom.setStyle(overlay, 'width', uiLayer.right-uiLayer.left + "px");
		YAHOO.util.Dom.setStyle(overlay, 'height', uiLayer.bottom-uiLayer.top + "px");
	});
	
	// Custom URL for the uploader swf file (same folder).
	YAHOO.widget.Uploader.SWFURL = "{/literal}{$base_url}{literal}resources/yui/build/uploader/assets/uploader.swf";

    // Instantiate the uploader and write it to its placeholder div.
	var uploader = new YAHOO.widget.Uploader( "uploaderOverlay" );
	
	// Add event listeners to various events on the uploader.
	// Methods on the uploader should only be called once the 
	// contentReady event has fired.
	
	uploader.addListener('contentReady', handleContentReady);
	uploader.addListener('fileSelect', onFileSelect)
	uploader.addListener('uploadStart', onUploadStart);
	uploader.addListener('uploadProgress', onUploadProgress);
	uploader.addListener('uploadCancel', onUploadCancel);
	uploader.addListener('uploadComplete', onUploadComplete);
	uploader.addListener('uploadCompleteData', onUploadResponse);
	uploader.addListener('uploadError', onUploadError);
    uploader.addListener('rollOver', handleRollOver);
    uploader.addListener('rollOut', handleRollOut);
    uploader.addListener('click', handleClick);
    	
    // Variable for holding the filelist.
	var fileList;
		
	// Do something when mouse rolls over 'select files' button
	function handleRollOver () {
		$('selectLink').setStyle({
			backgroundPosition: '0px -1300px',
			border: '1px solid #7D98B8'
		});
	}
	
	// Do something when mouse rolls out of 'select files' button
	function handleRollOut () {
		$('selectLink').setStyle({
			backgroundPosition: '0px 0px',
			border: '1px solid #AAA'
		});
	}
	
	// Do something when user clicks on 'select files' button
	function handleClick () {
	}
	
	// When contentReady event is fired, you can call methods on the uploader.
	function handleContentReady () {
	
	    // Allows the uploader to send log messages to trace, as well as to YAHOO.log
		uploader.setAllowLogging(true);
		
		// Allows multiple file selection in "Browse" dialog.
		uploader.setAllowMultipleFiles(true);
		
		// New set of file filters.
		var ff = new Array({description:"Images", extensions:"*.jpg"});
		                   
		// Apply new set of file filters to the uploader.
		uploader.setFileFilters(ff);
		
		// Apply the session cookie to the form for use with Flash
		$('cookie_persist').value	= readCookie('psg_persist');
		$('psg_userid').value		= readCookie('psg_userid');
		
	}

	/*
	*
	*	START THE UPLOAD PROCESS
	*
	*/
	function upload () {
	
		if (fileList != null) {
			
			arr = [];
			
			for (var i in fileList) {
				var ent = fileList[i];
				arr.unshift(ent);
			}
			
			for (j=0; j < arr.length; j++) {
				$('actions-'+j).update('<div style=\"height:5px;width:100px;background-color:#CCC;\"><'+'/div>');
			}
			
			var formdata = $('upload-form').serialize(true);
			
			uploader.setSimUploadLimit(parseInt(1));
			uploader.uploadAll("{/literal}{$base_url}{literal}resources/admin/upload.php?cmd=incoming", "POST", formdata, "Filedata");
			
			$('upload-widget').setStyle({'visibility':'hidden'});
			$('uploaderContainer').setStyle({'visibility':'hidden'});
			$('uploaderOverlay').setStyle({'visibility':'hidden'});
			$('selectFilesLink').setStyle({'visibility':'hidden'});
			
		}

	}
	
	/*
	*
	*	DO SOMETHING WHEN USER HAS SELECTED FILE(S) TO UPLOAD
	*
	*/
	function onFileSelect(event) {
	
		fileList = event.fileList;
		
		createDataTable(fileList);
		
		// Show the upload button
		$('upload-button').style.display = 'block';
			
	}

	/*
	*
	*	CREATE THE DATA TABLE OF FILES TO UPLOAD
	*
	*/
	function createDataTable(entries) {
	
		rowCounter = 0;
		
		this.fileIdHash = {};
		
		this.dataArr = [];
		
		for (var i in entries) {
		
			var entry = entries[i];
			entry["progress"] = '<div style=\"height:5px;width:100px;background-color:#CCC;\"><'+'/div>';
			dataArr.unshift(entry);
			
		}
	    
		var tbl		= $('files');
		var tblBody = $('table-body');
	 	
	 	tblBody.remove();
	 	tbl.insert( { bottom: new Element('tbody', { id: 'table-body' } ) } );
		var tblBody = $('table-body');
	 	
		if ($('placeholder') != null) { $('placeholder').remove(); }
			
		for (var j = 0; j < dataArr.length; j++) {
			
			// Increment the counter for the total number of files
			$('file-counter').value = j;
		
			this.fileIdHash[dataArr[j].id] = j;
			
			tblBody.insert( { bottom: new Element('tr', { id: 'row-'+j } ) } );
			
			var tblRow = $('row-'+j);
			
			tblRow.insert(new Element('td', { id: 'icon-'+j, style: 'height:48px;' }));
			tblRow.insert(new Element('td', { id: 'file-'+j }));
			tblRow.insert(new Element('td', { id: 'size-'+j }));
			tblRow.insert(new Element('td', { id: 'actions-'+j }));
			
			$('icon-'+j).style.width 		= '40px';
			$('icon-'+j).style.textAlign 	= 'center';
			$('icon-'+j).style.borderRight 	= '0';
			
			$('icon-'+j).update('<img src="{/literal}{$base_url}{literal}resources/images/furniture/upload-placeholder.gif" width="32" height="32" alt="placeholder" title="This is a placeholder for the new image." />');
			$('file-'+j).update(dataArr[j].name);
			$('size-'+j).update(Math.round(dataArr[j].size / 1024) + ' KB');
			$('actions-'+j).update('<ul class="button"><li><a href="javascript:void(0);" onclick="javascript:listRemoveFile(\'file'+j+'\', '+j+');">Remove<'+'/a><'+'/li><'+'/ul>');
					
			// Do alternating row colours
			if ((j % 2) == 0) { tblRow.addClassName('row1'); } else { tblRow.addClassName('row2'); }
		
		}
	
	}	
	
	/*
	*
	*	REMOVE A FILE FROM THE UPLOAD LIST
	*
	*/
	function listRemoveFile (fileId, rowId) {
		
		uploader.removeFile(fileId);
		
		$('file-counter').value = $('file-counter').value++;

		$('row-' + rowId).remove();
		
		// If this is the last row to remove, then add a placeholder message.
		if ($('table-body').childElements().length == 0) {
			
			// Hide the upload button
			$('upload-button').style.display = 'none';
			
			var tr = Builder.node('tr', { id: 'placeholder' }),
				td = Builder.node('td',{ id:'placeholder-cell', colspan:'4', style:'background-color:#FFF; height:48px;' }, 'Files selected for upload will appear here...');
			
			$('table-body').appendChild(tr);
			$('table-body').appendChild(td);
						
			$('file-counter').value = 0;
			
		}
		
	}
	
 	/*
	*
	*	DO SOMETHING ON EACH FILE'S UPLOAD START
	*
	*/
	function onUploadStart(event) {
	
	}
	
	/*
	*
	*	DO SOMETHING ON EACH FILE'S UPLOAD PROGRESS EVENT
	*
	*/
	function onUploadProgress(event) {
		
		progCell = 'actions-' + fileIdHash[event["id"]];
		prog = Math.round(100*(event["bytesLoaded"]/event["bytesTotal"]));
		progbar = "<div style='height:5px;width:100px;background-color:#CCC;'><div style='height:5px;background-color:#F00;width:" + prog + "px;'><"+"/div><"+"/div>";
		
		$(progCell).update(progbar);
		
	}
	
	/*
	*
	*	DO SOMETHING WHEN EACH UPLOAD IS COMPLETE
	*
	*/
	function onUploadComplete(event) {
		
		progCell = 'actions-' + fileIdHash[event["id"]];
		prog = Math.round(100*(event["bytesLoaded"]/event["bytesTotal"]));
		progbar = "<div style='height:5px;width:100px;background-color:#CCC;'><div style='height:5px;background-color:#F00;width:100px;'><"+"/div><"+"/div>";
		
		$(progCell).update(progbar);
		
		if (fileIdHash[event["id"]] == $('file-counter').value) {
			var fileCount = $('file-counter').value;
			uploadCompleted (fileCount);
		}
		
	}
	
	/*
	*
	*	DO SOMETHING IF AN ERROR OCCURS
	*
	*	If upload all is being used the uploader will attempt to
	*	continue until all of the files have been uploaded to the
	*	server.
	*
	*/
	function onUploadError(event) {
		alert(Object.toJSON(event));
	}
	
	/*
	*
	*	DO SOMETHING IF AN UPLOAD IS CANCELLED
	*
	*/
	function onUploadCancel(event) {

	}
	
	/*
	*
	*	DO SOMETHING WHEN DATA IS RECEIVED FROM THE SERVER
	*
	*/
	function onUploadResponse(event) {
		
		var rowNumber = fileIdHash[event["id"]];
		
		var objResponse;
		
		try { objResponse = event.data.evalJSON(); } catch (e) {
			
			$('icon-'+rowNumber).update('<img src="{/literal}{$base_url}{literal}resources/images/furniture/upload-error.gif" alt="Error" width="32" height="32" />');
			$('actions-'+rowNumber).update('This image is too large (width × height) to process.');
			
			return false;
			
		}
		
		if (objResponse.compPath != '' && objResponse.iconPath) {
		
			var iconHtml = '';
			
			iconHtml += '<a href="javascript:void(0);" onclick="javascript:imagePreviewWindow(\'{/literal}{$base_url}{literal}resources/admin/admin.image.output.php?html=';
			iconHtml += objResponse.compPath;
			iconHtml += '&amp;\',\'' + objResponse.compWidth + '\',\'' + objResponse.compHeight + '\');" title="Click here to view a larger version of this image">';
			iconHtml += '<img src="{/literal}{$base_url}{literal}/{/literal}{$fil_admin_image_output}{literal}?file='+ objResponse.iconPath +'&" width="'+ objResponse.iconWidth +'" height="'+ objResponse.iconHeight +'" class="icon" />';
			iconHtml += '<'+'/a>';
			
			$('icon-'+rowNumber).update(iconHtml);
		
		} else {

			$('icon-'+rowNumber).update('<img src="{/literal}{$base_url}{literal}resources/images/furniture/upload-error.gif" alt="Error" width="32" height="32" />');
		
		}
		
		if (objResponse.error == true) {
			
			$('actions-'+rowNumber).update(objResponse.error_code).setStyle({'color':'#F00'});
			
		} else {
			
			//$('actions-'+rowNumber).update('<ul class="button"><li><a href="javascript:void(0);">Edit<'+'/a><'+'/li><li><a href="javascript:void(0);">Delete<'+'/a><'+'/li><'+'/ul>');
			$('actions-'+rowNumber).update('The image has been imported into your library!')
			
		}
		
	}
	
	/*
	*
	*	ACTION TO TAKE WHEN ALL FILES HAVE BEEN UPLOADED
	*
	*/
	function uploadCompleted (fileCount) {
	
		
		//dialog1.show();
		
	}
	
	//YAHOO.namespace("editor.container");
		
	function dialog () {
	
		// Define various event handlers for Dialog
		var handleCancel = function() {
			this.cancel();
		};

		// Instantiate the Dialog
		dialog1 = new YAHOO.widget.Dialog("dialog", {
		
			width : "650px",
			fixedcenter : true,
			visible : false,
			modal: true,
			zindex: 5,
			constraintoviewport : true
		});
		
		$('dialog').setStyle({display:'block'});
		
		// Render the Dialog
		dialog1.render();
		

	}
	
	function shortGalleryTitle (text) {
		
		
		
	}
	
	YAHOO.util.Event.addListener(window, "load", dialog);
	
	{/literal}
	
</script>

<table class="list" id="files">
	
	<thead>
	
	<tr>
	<th colspan="2">File name</th>
	<th>Size</th>
	<th style="width:480px;">Activities</th>
	</tr>
	
	</thead>
	
	<tbody id="table-body">
	
	<tr id="placeholder"><td colspan="4" style="background:#FFF; height:48px;">Files selected for upload will appear here...</td></tr>
	
	</tbody>
	
</table>

<div id="dialog" style="display:none;">
<div class="hd">Image Upload Complete</div>
<div class="bd">

	<div class="dialog-content">
		
		<h1>Import Complete!</h1>
		
		<p>The images you selected for upload have been imported into your image library.  You can now them to an existing gallery, or use them to create a new gallery.  Alternatively, these images are listed on the orphan images page of images which haven't been added to a gallery yet.</p>
		
		<ul id="gallery-tabs" class="form-tabs">
			<li class="tab"><a href="#existing" title="Add the imported images to an existing gallery">Existing Gallery</a></li>
			<li class="tab"><a href="#new" title="Create a new gallery using the imported images">New Gallery</a></li>
		</ul>
				
		<div class="clear"></div>
		
		<div class="tabcontainer">
		
			<div id="existing" class="form-horizontal">
				
				<div class="form-box">
				
					<p>To add these images to an existing gallery, select the name of the gallery in the browser below and save the changes to the gallery.</p>
				
					<h3>Pick a gallery to load these images into:</h3>
					{fancy_column title=$title url=$url input_name='add_to_gallery' data=$data rows=6}
					
					<p class="buttons">
					
					<button onclick="javascript:dialog1.hide();" class="pixaria-button" style="margin:0;">Add to Gallery</button>
					
					<button onclick="javascript:dialog1.hide();" class="pixaria-button" style="margin:0;">Cancel</button>
					
					</p>
					
				</div>
				
				<div class="clear"></div>
				
			</div>
			
			<div id="new" class="form-horizontal">
			
				<div class="form-box" style="width:290px;">
				
					<h3>Gallery title:</h3>
					<input type="text" name="gallery_title" value="" style="width:270px;" class="text" />
				
					<h3>Gallery short-title:</h3>
					<input type="text" name="gallery_short_title" value="" style="width:270px;" class="text" />
				
				</div>
				
				<div class="form-box" style="width:290px;">
				
					<h3>Gallery Description:</h3>
					<textarea name="gallery_description" style="width:285px;" rows="6" class="text" cols="10"></textarea>
				
				</div>
				
				<div class="clear"></div>
				
				<div class="form-box">
				
					<h3>Pick a gallery to load these images into:</h3>
					{fancy_column title=$title url=$url input_name='parent_gallery' data=$data rows=4}
					
					<p class="buttons">
					
					<button onclick="javascript:dialog1.hide();" class="pixaria-button" style="margin:0;">Create New Gallery</button>
					
					<button onclick="javascript:dialog1.hide();" class="pixaria-button" style="margin:0;">Cancel</button>
					
					</p>
					
				</div>
				
				<div class="clear"></div>
			
			</div>
			
		</div>
		
		<script type="text/javascript" language="javascript">var tabs = new Control.Tabs('gallery-tabs');</script>
		
	</div>

</div>
</div>

<!-- <button onclick="javascript:dialog1.show();">Show</button> -->
</div>

</div>

{include_template file="admin.snippets/admin.html.footer.tpl"}