<script type="text/javascript" charset="utf-8">
	bar = new RctProgress('demo-1', 'demo-container-1', {length: 200, height: 22, width: 0} );
	bar.start();
</script>
<div style="" id="demo-container-1">
	<img src="/img/progress.png" id="my-progress-bar" height="12" width="0"><br>
</div>

<script type="text/javascript" charset="utf-8">
this.demo2 = "";
this.demo2started = false;
function start_demo_2(){
	if(this.demo2started)
		return false;
 
	this.demo2started = true;
 
	this.demo2 = new RctProgress('demo-2', 'demo-container-2', {length: 200, height: 22, width: 0} );
	this.demo2.start();
	this.demo2.stop();
}
 
function stop_demo_2(){
 
	if(!this.demo2started)
		return false;
 
	this.demo2started = false;
	$('demo-container-2').shrink({duration: 2});
}
</script>
<div style="margin-top: 20px; height: 20px">
	<div style="" id="demo-container-2">
		<img src="/img/progress.png" id="demo-2" height="12" width="0"><br>
	</div>
</div>
 
 
 
 
 

<script type="text/javascript" charset="utf-8">
this.ajaxStarted = false;
function start_demo_3(){
	if(this.ajaxStarted)
		return;
 
	this.ajaxStarted = true;
	this.ajax = new RctProgress('progress', 'loading-message', {length: 150, height: 2, width: 0} );
	this.ajax.start();
 
	var url = '/de/pages/ajax';
 
	new Ajax.Request(url, {
		method: 'get',
	  	onSuccess: function(transport) {
			this.ajax.success();
			this.ajaxStarted = false;
	  	}
	});	
}
 
function stop_demo_3(){
	if(this.ajaxStarted)
		return;	
 
	this.ajaxStarted = true;
	this.ajax = new RctProgress('progress', 'loading-message', {length: 150, height: 2, width: 0} );
	this.ajax.start();
 
 
	var url = '/de/pages/ajax';
 
	new Ajax.Request(url, {
		method: 'get',
	  	onSuccess: function(transport) {
			this.ajax.failure();
			this.ajaxStarted = false;
	  	}
	});
}
</script>
<div id="loading-message" class="loading-message" style="display: none; margin-top: 3px">
	<div class="message-label">Lade...</div>
	<img src="/img/progress.png" id="progress" ><br />
</div>
 
<div id="success-message" class="success-message" style="display: none">
	<div class="message-label">
	Aktion erfolgreich	</div>
</div>	
 
<div id="failure-message" class="failure-message" style="display: none">
	<div class="message-label">
	Aktion gescheitert	
	</div>
</div>		
 

<script type="text/javascript" charset="utf-8">
	function start_demo_4(){
 
		this.demo4_1 = new RctProgress('demo-4-1', null, {length: 150, width: 5, direction: 'vertical'} );
		this.demo4_1.start();
		this.demo4_1.stop();
 
 
		this.demo4_2 = new RctProgress('demo-4-2', null, {length: 50, width: 5, direction: 'vertical'} );
		this.demo4_2.start();
		this.demo4_2.stop();
 
		this.demo4_3 = new RctProgress('demo-4-3', null, {length: 100, width: 5, direction: 'vertical'} );
		this.demo4_3.start();
		this.demo4_3.stop();		
 
		this.demo4_4 = new RctProgress('demo-4-4', null, {length: 130, width: 5, direction: 'vertical'} );
		this.demo4_4.start();
		this.demo4_4.stop();				
 
	}
</script>
 
<style type="text/css">
	.stat{
		float: left;
		margin-right: 20px;
	}
</style>
<div style="height: 150px; margin-top: 5px">
 
	<div class="stat" id="demo-4-1" style="background-color: red"></div>
	<div class="stat" id="demo-4-2" style="background-color: blue; margin-top: 100px"></div>
	<div class="stat" id="demo-4-3" style="background-color: green; margin-top: 50px"></div>
	<div class="stat" id="demo-4-4" style="background-color: yellow; margin-top: 20px"></div>
 
</div>