function fileQueued( file ) {
	var out = '<div class="icon queued" id="icon_'+ file.id +'">';
		out +=	'	<h2>Item queued</h2>';
		out +=	'	<div class="progress_holder">';
		out +=	'		<div class="progress_metre" style="width: 0%"></div>';
		out +=	'	</div>';
		out +=	'	<p><small>' + file.name + '</small></p>';
	out +=	'</div>';
	addToHolder( out );
	upload_count++;
	this.startUpload();		
}

var upload_map = {};
var upload_count = 0;
var trigger_reload = false;

function uploadSuccess( file, serverData, received ) {
	$('#icon_' + file.id + ' .progress_metre').attr('style', 'width: 100%' );
	if ( !received || !serverData || serverData.length < 3 ) {
		//load icon_display
		trigger_reload = true;
	} else {
		//only load the new image
		upload_map[file.id] = serverData;
	}
}

function uploadProgress( file, complete, total ) {
	$('#icon_' + file.id + ' .progress_metre').attr('style', 'width: ' + (complete/total*100) + '%' );
}
 

function uploadComplete( file ) {
	// display icon
	this.startUpload();
	$('#clear_btn').show();
	var fname = upload_map[file.id];
	if ( fname ) {
		var str = "<a href=\"icon_out.php?icon=" + fname + "\">";
		str +=	"<img style=\"width: 48px; height: 48px;\" src=\"tmp/"+sid+"/" + fname + ".png\"/>";
		str += "<p>Download</p></a>";
		$('#icon_' + file.id).addClass('complete').removeClass('queued').html( str );
	} else {
		var str = "<h2>Display Error</h2>";
		str +=	"<p><small>Will be displayed when queue completes.</small></p>";
		$('#icon_' + file.id).addClass('error').removeClass('queued').html( str );
	
	}
	uploadFinished();
}

function uploadError( file, errorCode, message ) {
	var str = "<h2>Error " + errorCode + "</h2>";
		str +=	"<p><small>Upload failed (" + file.name + ")</small></p>";
	$('#icon_' + file.id).addClass('error').removeClass('queued').html( str );
	$('#clear_btn').show();
	uploadFinished();
}

function uploadFinished() {
	if ( --upload_count == 0 ) {
		upload_map = {};
		if ( trigger_reload ) {
			//load icon_display
			trigger_reload = false;
		}
	}
}

function addToHolder( str ) {
	document.getElementById('icon_holder').innerHTML = str + document.getElementById('icon_holder').innerHTML;
}
 
function writeToHolder( id ) {
	
}
 
function idToQueueId( str ) {
	return str.substring( 5 );
}
 
function clear() {
	$('#icon_holder').html('');
	$('#clear_btn').hide();
}

function loadDisplay() {
	$.ajax({
	  url: "icon_display.php?id=" + sid,
	  cache: false,
	  success: function(html){
		$("#icon_holder").html(html);
		if ( $('#icon_holder').html().length > 0 )
			$('#clear_btn').show();
	  }
	});
}

var advanced=true;
function toggleMode() {
	if ( advanced ) {
		$('#col1 #toggle_btn').html('advanced mode &raquo;');
		$('#advanced_form').hide();
		$('#simple_form').show();
	} else {
		$('#col1 #toggle_btn').html('&laquo; simple mode');
		$('#simple_form').hide();
		$('#advanced_form').show();
	}
	advanced = !advanced;
}