#!/mod/bin/jimsh

package require cgi
source /mod/var/mongoose/lib/setup
require ts.class pretty_size

puts "Content-Type: text/html\r\n\r\n"
header

cgi_input 1
#cgi_dump

puts {
<style>
#filelist { list-style-type: none; margin: 0; padding: 0; }
#filelist li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;
	height: 35px; }
#filelist li span { position: absolute; margin-left: -1.3em; }
span.pl { padding-left: 2em; }
</style>

<link href=/css/jquery.progressbar.css rel=stylesheet type=text/css />
<script type="text/javascript" src="/js/jquery.progressbar.js"></script>
<script type="text/javascript" src="/js/touchbridge.js"></script>

<p><b>
Drag the files below into order, enter a name for the resulting file and then
click the <i>Join</i> button.</b>
}

puts "<ul id=filelist>"
set esize 0
foreach file [split [cgi_get files] ","] {
	set file [cgi_unquote_input $file]
	set dir [file dirname $file]
	set ts [ts fetch $file]
	puts "<li class=\"va ui-state-default\" id=\"$file\"><span
	    class=\"va ui-icon ui-icon-arrowthick-2-n-s\"></span>
	    <img class=va src=/img/Video_TS.png>
	    <span class=pl>
	    $file ([clock format [$ts duration 1] -format "%T"])
	    \[[pretty_size [$ts size]]\]
	    <br><i style=\"font-size: 0.8em\">[$ts get title]</i>
	    </span>
	</li>"
	incr esize [$ts size]
}
puts "</ul>"

puts "
<br><br>

<div id=joindiv>
Name for joined file:
    <input id=dest name=dfile class=\"text ui-widget-content ui-corner-all\"
    length=20 maxlength=50>
<button id=dojoin>Join</button>
</div>

<div id=progressdiv style=\"display: none\">
Joining: <div id=progressbar></div>
<button id=back
    dir=\"[cgi_quote_url $dir]\"
    esize=\"$esize\"
    style=\"display: none\">Back to media list</button>
<div id=output class=pre style=\"margin-top: 10px\"></div>
</div>
"

puts {
<script type=text/javascript>

$('#filelist li').hover(
    function() { $(this).css('cursor', 'pointer'); },
    function() { $(this).css('cursor', 'auto'); }
);

var handle = 0;

function update()
{
	$.get('/cgi-bin/browse/join_progress.jim'
	    + '?esize=' + $('#back').attr('esize')
	    + '&file=' + $('#back').attr('dir') + '/' + $('#dest').val(),
	    function(data) {
		if (handle)
			$('#progressbar').reportprogress(data);
	});
}

$(document).ready(function() {

$('#progressbar').reportprogress(0);

$('#back').button().click(function() {
	window.location = '/cgi-bin/browse.jim?dir=' + $(this).attr('dir');
});

$('#filelist').sortable().disableSelection();

$('#dojoin').button().attr('disabled', true).addClass('ui-state-disabled')
    .click(function() {
	var files = $('#filelist').sortable('toArray');
	var sfiles = new Array();
	for (x in files)
		sfiles.push(encodeURIComponent(files[x]));

	$('#joindiv').hide('slow');
	$('#progressdiv').show('slow');
	handle = setInterval("update()", 1000);

	$('#output').text('Please do not interrupt...')
	    .load('/cgi-bin/browse/join_backend.jim?files=' +
	    sfiles.join() + '&dest=' + $('#dest').val(),
	    function() {
		clearInterval(handle);
		handle = 0;
		$('#back').show();
		$('#progressbar').reportprogress(100);
	});
});

$('#dest').val('').keyup(function() {
	if ($(this).val().length > 0)
		$('#dojoin')
		    .removeProp('disabled').removeClass('ui-state-disabled');
	else
		$('#dojoin')
		    .prop('disabled', true).addClass('ui-state-disabled');
});

});
</script>
}

footer

