<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>FatRat Web Interface</title>
<link rel="icon" href="/favicon.png" type="image/png"/>
<link rel="stylesheet" type="text/css" href="/style.css"/>
<script type="text/javascript" src="/index.js"></script>
</head>

<body onload="javascript: init();">
<p><img src="logo.png" style="width: 288px; height: 75px" alt="FatRat logo"/></p>

<?qs
if(GET.rmqueue)
{
	for(var i=0;i<QUEUES.length;i++)
	{
		if(QUEUES[i].uuid == GET.queue)
		{
			QUEUES[i] = undefined;
			break;
		}
	}
	GET.queue = undefined;
}

if(GET.queue == undefined && QUEUES.length != 0)
	GET.queue = QUEUES[0].uuid;
?>

<form method="get" action="" style="margin-bottom: -1px">
<p class="toolbar">
	<label>Queue <select name="queue" onchange="javascript:this.form.submit()">
	<?qs
		for(i=0;i<QUEUES.length;i++)
		{
			print('<option value="'+QUEUES[i].uuid+'" ');
			if(GET.queue == QUEUES[i].uuid)
				print('selected="selected"');
			print('>'+QUEUES[i].name+'</option>');
		}
	?>
	</select></label>
	<input type="submit" id="sumbit_queue" value="Switch"/>
	<script type="text/javascript"><!--
	
	document.getElementById('sumbit_queue').setAttribute('style', 'visibility: hidden; width: 0px');
	var QUEUE = '<?qs print(GET.queue); ?>';
	
	document.write('<button type="button" onclick="javascript:newwin(\'/queue.qsp?queue=<?qs print(GET.queue); ?>\')" title="Queue properties"><img src="/queue/properties.png" alt="Queue properties"/></button>');
	document.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
	document.write('<button type="button" onclick="javascript:newwin(\'/queue.qsp\')" title="New queue"><img src="/queue/add.png" alt="New queue"/></button>');
	//--></script>
	<button type="submit" name="rmqueue" value="true" title="Delete queue" onclick="javascript:return confirmOp('Do you really want to delete this queue including all its transfers?')"><img src="/queue/remove.png" alt="Delete queue"/></button>
</p>
</form>

<form method="post" id="mainform" action="?queue=<?qs if(GET.queue) print(GET.queue); ?>" style="margin-top: 0px">

<noscript>
	<p>
		<a href="/queue.qsp?queue=<?qs print(GET.queue); ?>">Queue properties</a> |
		<a href="/queue.qsp">New queue</a> |
		<a href="/add_transfer.qsp?queue=<?qs print(GET.queue); ?>">Add transfer</a>
	</p>
</noscript>

<p class="toolbar" id="toolbar">
	<span class="ralign">
		<label>Reload every
		<select id="refresh" onchange="javascript:refreshChange()">
			<option value="0">never</option>
			<option value="5">5 seconds</option>
			<option value="10">10 seconds</option>
			<option value="30">30 seconds</option>
			<option value="60">minute</option>
		</select></label>
	</span>
	
	<script type="text/javascript"><!--
		document.write('<button type="button" id="btn_add" onclick="javascript:newwin(\'/add_transfer.qsp?queue=<?qs print(GET.queue); ?>\')" title="New transfer"><img src="/add.png" alt="New transfer"/></button>');
	//--></script>
	
	<button type="submit" name="remove" id="btn_delete" value="delete" title="Delete" onclick="javascript:return confirmOp('Do you really want to delete the selected transfers?')"><img src="/delete.png" alt="Delete"/></button>
	<button type="submit" name="remove" id="btn_delete2" value="delete_data" title="Delete including data" onclick="javascript:return confirmOp('Do you really want to delete the selected transfers and their data?')"><img src="/delete_with_data.png" alt="Delete including data"/></button>
	<button type="submit" name="cleanup" value="cleanup" title="Remove completed"><img src="/states/completed.png" alt="Remove completed"/></button>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="submit" name="setState" value="Active" title="Resume"><img src="/states/active.png" alt="Resume"/></button>
	<button type="submit" name="setState" value="ForcedActive" title="Force resume"><img src="/states/forcedactive.png" alt="Force resume"/></button>
	<button type="submit" name="setState" value="Paused" title="Pause"><img src="/states/paused.png" alt="Pause"/></button>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="submit" name="move" value="top" title="Move to the top"><img src="/move/top.png" alt="Move to the top"/></button>
	<button type="submit" name="move" value="up" title="Move up"><img src="/move/up.png" alt="Move up"/></button>
	<button type="submit" name="move" value="down" title="Move down"><img src="/move/down.png" alt="Move down"/></button>
	<button type="submit" name="move" value="bottom" title="Move to the bottom"><img src="/move/bottom.png" alt="Move to the bottom"/></button>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="submit" title="Reload" id="btn_reload"><img src="/reload.png" alt="Reload"/></button>
</p>

<table class="transfers" style="margin-top: 10px">
<thead>
<tr><td>Name</td><td class="m">Progress</td><td class="m">Size</td><td class="m"><img src="/download.png" alt="down"/> Speed</td><td class="m"><img src="/upload.png" alt="up"/> Speed</td><td class="m">Time left</td><td>Message</td></tr>
</thead>

<tbody>
<?qs
	function stateSuffix(transfer)
	{
		if(transfer.mode == 1)
			return '';
		
		if(transfer.primaryMode == 1)
		{
			if(transfer.state == 'Completed')
				return '';
		}
		
		return '_upload';
	}
	function shorten(text)
	{
		LIMIT = 60;
		text = new String(text);
		if(text.length > LIMIT)
			return text.substring(0, LIMIT-3) + '...';
		else
			return text;
	}
	function arrayContains(array, what)
	{
		for(var i=0;i<array.length;i++)
		{
			if(array[i] == what)
			{
				array[i] = null;
				return true;
			}
		}
		return false;
	}
	
	var queue;
	for(var i=0;i<QUEUES.length;i++)
	{
		if(QUEUES[i].uuid == GET.queue)
		{
			queue = QUEUES[i];
			break;
		}
	}
	if(queue == undefined)
	{
		print("<h2>No queue</h2>");
		terminate();
	}
	
	if(POST.queueLimits != undefined)
		queue.setSpeedLimits(POST.downLimit*1024, POST.upLimit*1024);
	if(POST.setState && POST.transfer)
	{
		for(i=queue.size-1;i>=0;i--)
		{
			if(!arrayContains(POST.transfer, queue.at(i).uuid))
				continue;

			if(POST.setState == 'Active')
			{
				if(!queue.at(i).active)
				{
					queue.at(i).state = 'Waiting';
					continue;
				}
			}
			queue.at(i).state = POST.setState;
		}
	}
	if(POST.remove && POST.transfer)
	{
		for(i=queue.size-1;i>=0;i--)
		{
			if(!arrayContains(POST.transfer, queue.at(i).uuid))
				continue;
			if(POST.remove == 'delete_data')
				queue.removeWithData(i, true);
			else
				queue.remove(i, true);
		}
	}
	if(POST.cleanup)
	{
		for(i=queue.size-1;i>=0;i--)
		{
			if(queue.at(i).state == 'Completed')
				queue.remove(i, true);
		}
	}
	if(POST.move && POST.transfer)
	{
		if(POST.move == 'top')
		{
			var x = 0;
			for(i=queue.size-1;i>=0;i--)
			{
				if(arrayContains(POST.transfer, queue.at(i).uuid))
					queue.moveToTop(i++);
			}
		}
		else if(POST.move == 'up')
		{
			for(i=0;i<queue.size;i++)
			{
				if(arrayContains(POST.transfer, queue.at(i).uuid))
					queue.moveUp(i);
			}
		}
		else if(POST.move == 'down')
		{
			for(i=queue.size-1;i>=0;i--)
			{
				if(arrayContains(POST.transfer, queue.at(i).uuid))
					queue.moveDown(i);
			}
		}
		else if(POST.move == 'bottom')
		{
			for(i=0;i<queue.size;i++)
			{
				if(arrayContains(POST.transfer, queue.at(i).uuid))
					queue.moveToBottom(i--);
			}
		}
	}
	
	for(var i=0;i<queue.size;i++)
	{
		var transfer = queue.at(i);
		
		print('<tr id="transfer'+i+'_tr" onclick="javascript:clickedTransfer(event,'+i+')"><td><span class="ralign">');
		var info = fileInfo(transfer.dataPath);
		
		if(info)
		{
			if(info.directory)
			{
				print(' <a href="/browse.qsp?transfer='+transfer.uuid+'&amp;path=" onclick="javascript: return newwin(this.href);"><img src="/browse.png" style="width: 16px; height: 16px" alt="Browse" title="Browse"/></a> ');
			}
			else
			{
				print(' <a href="/download?transfer='+transfer.uuid+'&amp;path="><img src="/down.png" style="width: 16px; height: 16px" alt="Download" title="Download"/></a> ');
			}
		}
		
		print('<a onclick="javascript:return newwin(this.href);" href="/generate/graph.png?'+transfer.uuid+'"><img src="/graph.png" style="width: 16px; height: 16px" title="Graph" alt="Graph"/></a></span>');
		
		print(' <img src="/states/' + transfer.state.toLowerCase()+stateSuffix(transfer) + '.png" class="stateicon" alt="' + transfer.state + '"/> ');
		print(' <input type="checkbox" id="transfer'+i+'" onclick="javascript:checkTransfer(this)" name="transfer['+i+']" value="'+transfer.uuid+'"/> ');
		print('<a onclick="javascript:return newwin(this.href);" title="Details" href="/details.qsp?transfer='+transfer.uuid+'">' + shorten(transfer.name) + '</a></td>');
		
		var progress;
		if(transfer.total > 0)
		{
			progress = 100*transfer.done/transfer.total;
			progress = Math.round(progress*10)/10;
			
			print('<td class="m"><img src="/generate/progress.png?'+progress+'%25" style="width: 150px; height: 20px" alt="'+progress+'%"/></td>');
			print('<td class="m">'+formatSize(transfer.total, false)+'</td>');
		}
		else
		{
			print('<td class="m"><img src="/generate/progress.png?%3F" style="width: 150px; height: 20px" alt="?"/></td><td class="m">?</td>');
		}
		
		speed = transfer.speed();
		text = '';
		if(speed.down > 0)
			text = formatSize(speed.down, true);
		print('<td class="m">'+text+'</td>');
		text = '';
		
		if(speed.up > 0)
			text = formatSize(speed.up, true);
		print('<td class="m">'+text+'</td>');
		
		print('<td class="m">'+transfer.timeLeft()+'</td>'); // time left
		print('<td>'+transfer.message+'</td></tr>');
	}
?>

</tbody>
</table>
</form>

<form method="post" action="?queue=<?qs if(queue) print(queue.uuid); ?>">

<?qs
	var sl = null;
	if(queue != undefined)
		sl = queue.speedLimits();
?>

<p>
	<span class="ralign">Queue speed limit:
		<span class="speedspan"><label><input type="text" size="4" name="downLimit" value="<?qs if(sl) print(sl.down/1024); ?>"/> kB/s down</label></span>
		<span class="speedspan"><label><input type="text" size="4" name="upLimit" value="<?qs if(sl) print(sl.up/1024); ?>"/> kB/s up</label></span>
		<input type="submit" name="queueLimits" value="Set"/>
	</span>
	<input type="button" value="Check all" onclick="javascript: checkAll(true);"/>
	<input type="button" value="Uncheck all" onclick="javascript: checkAll(false);"/>
</p>
</form>

<hr/>

<p style="text-align: center; font-size: x-small"><b><a href="http://fatrat.dolezel.info">FatRat</a></b> - Copyright © 2006-2008 Luboš Doležel</p>

</body>
</html>
