<?xml version="1.0" encoding="UTF-8" ?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
    	  
  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
  
-->
<library>
<!--
	exmple class definition
	
	as soon as you see possibility try to make usage of classes
	
	in general: 
	usage of layout is nice but it needs more views just for layouting.
	in a simple scenario thats okay,
	but in the openmeetings app itself most of the views are set *absolute* by x and y
	cause this reduces the total amount of views
	instancing (=making views dynamically like we do) is time critical .. if you create or destroy too many
	views at one time the browser hangs and cpu will be at 100%
	so in the openmeetings app try to use as less views as possible
	use at less constraints as possible
	use $once{ .. } instead of ${ .. } or use setters and getters
	don't use canvas.setAttribute('myvar','foo') just use canvas.myvar='foo' 
	whenever it is not necessary (it will throw some 
	events which are useless if you don't have any constraints pointing to 'myvar' and which will cost 
	performance)
	
	 
	
 -->

	<!-- define resources once at one place instead of
		linking with the path every time you want it
		-->
<resource name="_btn_play_rsc" src="../resources/play.png" />
<resource name="_btn_stop_rsc" src="../resources/stop.png" />
<resource name="_btn_volume_rsc" src="../resources/mix_volume.png" />
<resource name="_btn_audio_scrubtrack_rsc" src="../resources/audio_scrubtrack.png" />
<resource name="_btn_audio_scrubber_rsc" src="../resources/audio_scrubber.png" />
	
<class name="audioTest" extends="view" play="false" y="40">
	
	<!-- please write layout definition always on 
		top or on bottom of the view content
		or write it directly into the view definition -->
	<simplelayout axis="y" spacing="5"/>
	
	   <view id="audioplayer" play="false" y="40" resource="http:resources/Star_in_the_east_solfege.mp3" 
		   oninit="this.stop();">
		   
		   <!-- follow a structure by defining view contents:
			   1.) define attributes
			   2.) define handlers (event handlers oninit for example if not already in view definition)
			   3.) define methods
			   4.) define layout (if not already in view definition)
			   5.) define content 
			   -->
		   
		   <!-- comment about this attribute and don't forget type definition in attribute's:
			   this attribute is volume-level -->
			<attribute name="vol" value="100" type="number" />
		   
		    <simplelayout axis="x" spacing="10"/>
		   
			<view>
				<simplelayout axis="x" spacing="-1"/>
				<button width="40" onclick="audioplayer.stop()">
					<view resource="_btn_stop_rsc" y="6" align="center"/>
				</button>
				<button width="40" onclick="audioplayer.play()">
					<view resource="_btn_play_rsc" y="5" align="center"/>
				</button>
			</view>	 
		          
			<view>
				<simplelayout axis="x" spacing="-1"/>
				<button width="40" text="-"
					onclick="audioplayer.setVolume( audioplayer.getVolume() -10)">
					<view resource="_btn_volume_rsc" y="5" align="right"/>
				</button>
				<button width="40" text="+" 
					onclick="audioplayer.setVolume( audioplayer.getVolume() +10)">
					<view resource="_btn_volume_rsc" y="5" align="right"/>
				</button>
			</view>
					        
			
			<view name="background" bgcolor="black" width="202" height="15" 
					y="50" options="ignorelayout;">
				<view name="loadbar" resource="_btn_audio_scrubtrack_rsc" 
						width="${audioplayer.loadperc * 200}">
					<view name="playbar" resource="_btn_audio_scrubber_rsc" 
							y="1" x="${Math.round(180 * audioplayer.frame/audioplayer.totalframes)}"/>
				</view>
			</view>
		   
		</view>
		
		<!--
			think about contraints ... if they really need to be updated always
			${ canvas.myvar } => value will be updated every time 
								myvar changes by canvas.setAttribute('myvar','foo')
								normally this is not needed
								high performance/cpu usage
			$once{ canvas.myvar } => value will be only set once .. oninit of this attribute/view
									lower perfomance/cpu usage 
			try to use $once whenever possible
			-->
		<text text="$once{mess.listen_sound}" multiline="true" width="${this.parent.width - 20}" />

		<view>
			
			<simplelayout axis="x" spacing="10"/>
			
			<button text="$once{ mess.no }">					                
			</button>
			<button text="$once{ mess.yes }">					                
			</button>
			
		</view>
	
	<nextButton nextTabpane="$once{ this.parent.parent.parent.microTab }" text="$once{mess.next}" />
	
</class>

</library>