protected  void onApiReady(){
		storageDataList=new StorageDataList(storageControler,storageKey);
		
		
		
		
		
		VerticalPanel main=new VerticalPanel();
		RootPanel.get().add(main);
		
		
		//ImageBundle use that!
		//clear.cache.gif sometime,often failed
		final Image img=new Image("http://www.xucker.jpn.org/test/resources/soundplayer_title.png#1");
		//main.add(img);
		//img.setVisible(false);
		/*
		main.add(new Label("SoundPlayer"));
		
		TabLayoutPanel tab=new TabLayoutPanel(25, Unit.PX);
		tab.setSize("400px", "200px");
		RootLayoutPanel.get().add(tab);
		log(RootLayoutPanel.get().getOffsetWidth()+"x"+RootLayoutPanel.get().getOffsetHeight());
		
		tab.add(new Label("hello"),"hello");
		*/
		/*
		StackLayoutPanel test=new StackLayoutPanel(Unit.PX);
		test.setHeight("420px");
		test.setWidth("280px");
		//main.add(test);
		RootLayoutPanel.get().add(test);
		test.add(new Label("OK"),"TEST",25);
		test.showWidget(0,true);
		test.setVisible(false);
		test.setVisible(true);
		*/
		
		
		final StackLayoutPanel stacks=new StackLayoutPanel(Unit.PX);
		stacks.setHeight("330px");
		stacks.setWidth("280px");
		main.add(stacks);
		
		
		
		img.addMouseOverHandler(new MouseOverHandler() {
			
			@Override
			public void onMouseOver(MouseOverEvent event) {
				img.setVisible(false);
				stacks.setVisible(true);
				log("mouse-over");
			}
		});
		

		
		
		
		
		VerticalPanel player=new VerticalPanel();
		player.setWidth("100%");
	
		
		
		ScrollPanel playscroll=new ScrollPanel();
		playscroll.setHeight("300px");
		playscroll.setWidth("100%");
		player.add(playscroll);
		
		playDataContainer=new VerticalPanel();
		playDataContainer.setSpacing(8);
		playscroll.setWidget(playDataContainer);
		
		stacks.add(player,"Sound Player",25);
		
		VerticalPanel editor=new VerticalPanel();
		editor.setWidth("100%");

		stacks.add(editor,"Edit",25);
		
		
		
		//create add
		
		HorizontalPanel names=new HorizontalPanel();
		editor.add(names);
		names.add(new Label("sound name:"));
		final TextBox nameBox=new TextBox();
		names.add(nameBox);
		

		//FileUploadForm support reset.
		final FileUploadForm upload=new FileUploadForm();
		editor.add(upload);
		upload.getFileUpload().addChangeHandler(new ChangeHandler() {
			
			@Override
			public void onChange(ChangeEvent event) {
				JsArray<File> file=FileUtils.toFile(event.getNativeEvent());
				final FileReader reader=FileReader.createFileReader();
				
				reader.setOnLoad(new FileHandler() {
					@Override
					public void onLoad() {
						dataUri=reader.getResultAsString();
					}
				});
				String name=file.get(0).getFileName();
				int index=name.lastIndexOf(".");
				if(index!=-1){
					name=name.substring(0,index);
				}
				if(nameBox.getText().isEmpty()){
					nameBox.setText(name);
				}
				reader.readAsDataURL(file.get(0));
			}
		});
		
		editor.add(new Label("Or"));
		
		HorizontalPanel urls=new HorizontalPanel();
		urls.setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE);
		editor.add(urls);
		urls.add(new Label("URL:"));
		final TextBox urlBox=new TextBox();
		urls.add(urlBox);
		urlBox.setWidth("200px");
		
		HorizontalPanel loopAndVol=new HorizontalPanel();
		loopAndVol.setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE);
		editor.add(loopAndVol);
		loopAndVol.setSpacing(8);
		final CheckBox loop=new CheckBox("loop");
		loopAndVol.add(loop);
		final VolumeRadioboxes volume=new VolumeRadioboxes();
		loopAndVol.add(new Label("Vol:"));
		loopAndVol.add(volume);
		
		HorizontalPanel buttons=new HorizontalPanel();
		editor.add(buttons);
		Button addButton=new Button("add sound");
		buttons.add(addButton);
		addButton.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				String name=nameBox.getText();
				if(name.isEmpty()){
					Window.alert("name and (url or data) are needed");
					return;
				}
				String url=dataUri;
				if(url==null){
					if(urlBox.getText().isEmpty()){
						Window.alert("name and (url or data) are needed");
						return;
					}else{
						url=urlBox.getText();
					}
				}
				try{
				String header=name+"\t"+loop.getValue()+"\t"+volume.getVolume();
					
				//log("add:"+header);
				
				storageDataList.setDataValue(header, url);
				storageDataList.incrementId();
				
				}catch(Exception e){
					String message=e.getMessage();
					if(message.indexOf("QUOTA_EXCEEDED_ERR")!=-1){
						String error="Browser Storage 's limit over\ndelate other sound and try again.or sound is too big to store.\nusually maximum total sound size is around 2MB\nupload sound file to server and set url is altenative way";
						Window.alert(error);	
					}else{
						Window.alert(message);	
					}
					
					return;
				}
				//reset
				dataUri=null;
				nameBox.setText("");
				urlBox.setText("");
				loop.setValue(false);
				volume.setValue(5);
				upload.reset();
				updateEditorDatas();
				updatePlayerDatas();
			}
		});
		
		Button resetButton=new Button("reset");
		buttons.add(resetButton);
		resetButton.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				dataUri=null;
				nameBox.setText("");
				loop.setValue(false);
				volume.setValue(5);
				upload.reset();
				updateEditorDatas();
				updatePlayerDatas();
			}
		});
		//
		
		//create list
		ScrollPanel scroll=new ScrollPanel();
		scroll.setHeight("150px");
		scroll.setWidth("100%");
		editor.add(scroll);
		
		editDataContainer = new VerticalPanel();
		editDataContainer.setSpacing(8);
		scroll.setWidget(editDataContainer);
		
		
		
		
		VerticalPanel howto=new VerticalPanel();
		howto.setSpacing(16);
		
		ScrollPanel howtoscroll=new ScrollPanel();
		howtoscroll.setHeight("300px");
		howtoscroll.setWidth("95%");
		
		stacks.add(howtoscroll,"How to",25);
		howtoscroll.setWidget(howto);
		howto.add(new HTML("[Notice]"));
		howto.add(new HTML("1.Audio Type are limited\nOnly human voices play well,other sounds would usually cut off as noise."));
		howto.add(new HTML("2.File size you can store to browser are limited\nIt's depend on your browser.Chrome can store around 2MB wave file.it's a few second"));
		howto.add(new HTML("3.Wave file-format you can play are limited\nmost of wave file uploaded to web is not supported.\nI guess it's because of header comment."));
		howto.add(new HTML("4.Number of times you can play are limited\nIt's depend on your computer memory size.Watch out for process of googletalkplugin.exe"));
		
		Timer timer=new Timer(){
			public void run(){
				updateEditorDatas();
				updatePlayerDatas();
			}
		};
		timer.schedule(1000);
		
		
		if(playDataContainer.getWidgetCount()>0){
			//player
			stacks.showWidget(0);
		}else{
			//editor
			stacks.showWidget(1);
		}
		
		//test
		//stacks.add(new ExtraTest(),"tmp",25);
		//stacks.showWidget(3);
	}