1 // JavaScript Document
  2 /* ************************************ Components ****************************** */
  3 
  4 var YUI={};
  5 
  6 /** 
  7 @constructor
  8 */
  9 YUI.PersistantButton = function(target,downDelay,downPeriod,onDown,datas){
 10 	this.target	= YDom.get(target);
 11 	this.downDelay	= downDelay?downDelay:500;
 12 	this.onDown = typeof(onDown)=="function" ? onDown : function(dat){};
 13 	this.downPeriod	= downPeriod?downPeriod:100;
 14 	this.build	= function(){
 15 		YEvt.add(this.dragger,"mousedown",function(evt,owner){owner._down();},this);
 16 		YEvt.add(document,"mouseup",function(evt,owner){owner._up();},this);
 17 	};
 18 	this._down=function(){
 19 		this.onDown(datas);
 20 		this.timer = YTimer.timeout(this.downDelay,function(dat){dat._on_down();},this);
 21 	};
 22 	this._up=function(){
 23 		window.clearInterval(this.timer);
 24 	};
 25 	this._on_down=function(){
 26 		this.onDown(datas);
 27 		this.timer = YTimer.timeout(this.downPeriod,function(dat){dat._on_down();},this);
 28 	};
 29 	this.build();
 30 	
 31 }
 32 /** 
 33 @constructor
 34 */
 35 YUI.MoveButton = function(dragger,onMove,onDrag,onDrop,datas){
 36 	this.dragger	= YDom.get(dragger);
 37 	this.dragging = false;
 38 	this.mouseFrom = [0,0];
 39 	this.dragOfset = [0,0];
 40 	this.moveFactor = [1,1];
 41 	this.onMove = typeof(onMove)=="function" ? onMove : function(ofs,dat){};
 42 	this.onDrag = typeof(onDrag)=="function" ? onDrag : function(dat){};
 43 	this.onDrop = typeof(onDrop)=="function" ? onDrop : function(dat){};
 44 	this.datas = datas;
 45 	this.build	= function(){
 46 		YEvt.add(this.dragger,"mousedown",function(evt,owner){owner.drag();},this);
 47 		YEvt.add(document,"mouseup",function(evt,owner){owner.drop();},this);
 48 		YEvt.add(document,"mousemove",function(evt,owner){owner.move();},this);
 49 	};
 50 	this.build();
 51 };
 52 YUI.MoveButton.prototype = {
 53 	constructor : YUI.MoveButton,
 54 	constructorName : 'YUI.MoveButton',
 55 	drag:function(){
 56 		this.mouseFrom = [mouseXY[0],mouseXY[1]];
 57 		this.dragOfset = [0,0];
 58 		this.dragging=true;
 59 		this.onDrag(this.datas);
 60 	},
 61 	drop:function(){
 62 		this.dragging=false;
 63 		this.onDrop(this.datas);
 64 	},
 65 	move:function(){
 66 		if(this.dragging){
 67 			var mpos = [mouseXY[0],mouseXY[1]];
 68 			this.dragOfset = [mouseXY[0]-this.mouseFrom[0],mouseXY[1]-this.mouseFrom[1]];
 69 			this.onMove([this.moveFactor[0]*this.dragOfset[0],this.moveFactor[1]*this.dragOfset[1]],this.datas);
 70 		}
 71 	},
 72 	kill:function(){
 73 		YEvt.remove(this.dragger,"mousedown",function(evt,owner){owner.drag();},this);
 74 		YEvt.remove(document,"mouseup",function(evt,owner){owner.drop();},this);
 75 		YEvt.remove(document,"mousemove",function(evt,owner){owner.move();},this);
 76 	}
 77 };
 78 /** 
 79 @constructor
 80 */
 81 YUI.PopWindow = function(domOrHTML){
 82 	this._YOBJID	= "YUI.PopWindow";
 83 	this.mask		= YDom.create('div',{style:{position:'absolute',left:'0px',left:'0px',width:'100%',
 84 		 				backgroundColor:'#888',opacity:0.5}});
 85 	this.win		= YDom.create('div',{style:{position:'absolute',left:'0px',left:'0px'}},[]);
 86 	this.container	= YDom.create('div',{style:{position:'absolute',left:'0px',left:'0px',width:'100%'}},[this.win]);
 87 	this.root		= YDom.create('div',{style:{position:'fixed',left:'0px',top:'0px',width:'100%'}},[this.mask,this.container]);
 88 	var _onResize	= function(size,dat){	dat.onResize(size);	};
 89 	this.build=function(){
 90 		document.body.appendChild(this.root);
 91 		this._setDomOrHTML(this.win,domOrHTML);
 92 		YWindow.SizeListener.addListener(_onResize,this);
 93 	//	this.onResize();
 94 	};
 95 	this._setDomOrHTML = function(target,domOrHTML){
 96 		if(domOrHTML&&domOrHTML.tagName){		target.appendChild(domOrHTML);
 97 		}else if(typeof(domOrHTML)=="string"){	target.innerHTML = domOrHTML+"";	}
 98 		else alert("in "+this._YOBJID+"\n"+domOrHTML+"\n"+typeof(domOrHTML)+"\n"+objToStr(domOrHTML)+"\n"+domOrHTML.tagName);
 99 	};
100 	this.onResize = function(){
101 		var size = YWindow.getsize();
102 		this.root.style.height = size[1]+"px";
103 		this.mask.style.height = size[1]+"px";
104 		this.container.style.height = size[1]+"px";
105 		var winsiz = YDom.size(this.win);
106 		this.win.style.maxHeight = size[1]+"px";
107 		this.win.style.left = Math.round(0.5*(size[0]-winsiz[0]))+"px";
108 		this.win.style.top = Math.round(0.5*(size[1]-winsiz[1]))+"px";
109 	};
110 	this.close=function(){//equiv to Kill
111 		YWindow.SizeListener.removeListener(_onResize,this);
112 		document.body.removeChild(this.root);
113 	};
114 	this.build();
115 };
116 /** 
117 @constructor
118 */
119 YUI.PopWindowValid = function(domOrHTML,buttons,className,onValid,datas){
120 	this.domcont	= YDom.create('td',{className:className+'_content'},[]);
121 	this.btncont	= YDom.create('td',{className:className+'_buttons'},[]);
122 	this.table		= YDom.create('table',{className:className,cellSpacing:0,cellPadding:0},
123 						[	YDom.create('tbody',{},[
124 								YDom.create('tr',{},[this.domcont]),
125 								YDom.create('tr',{},[this.btncont])])]);
126 	this.buttons	= {};
127 //	alert(this.table.tagName);
128 	YUI.PopWindow.call(this,this.table);
129 	this._YOBJID	= "YUI.PopWindowValid";
130 	this.build=function(){
131 		for(var i in buttons){
132 			this.buttons[i] = YDom.create('a',{href:"javascript:;"},[buttons[i]]);
133 			YEvt.add(this.buttons[i],"mouseup",function(evt,dat){dat.own.valid(dat.cmd);},{own:this,cmd:buttons[i]});
134 			this.btncont.appendChild(this.buttons[i]);
135 		}
136 		this._setDomOrHTML(this.domcont,domOrHTML);
137 		this.onResize();
138 	};
139 	this.valid=function(value){//equiv to Kill if onValid return true
140 		if(onValid(this,value,datas)){
141 			this.close();
142 		}
143 	};
144 	this.build();
145 }
146 /** 
147 @constructor
148 */
149 YUI.PopWindowSubmit = function(title,dataList,className,onValid,datas){
150 	this.title			= title;
151 	this.inputs			= YInput.makeInputs(dataList);
152 	this.inputstable	= YDom.create('table',{className:className+"_form",cellSpacing:0,cellPadding:0});
153 	this.inputstable.appendChild(YDom.create('tr',{},[
154 			YDom.create('td',{className:className+"_title",align:'center',colSpan:2},[title+""])]));
155 	for(var i in this.inputs){
156 		var line = YDom.create('tr',{className:className+"_line"},[
157 			YDom.create('td',{align:'right',vAlign:'top'},[i+" :	"]),
158 			YDom.create('td',{align:'left'},[this.inputs[i]])
159 		]);
160 		this.inputstable.appendChild(line);
161 	}
162 	YUI.PopWindowValid.call(this,this.inputstable,["OK","Cancel"],className,onValid,datas);
163 	this._YOBJID	= "YUI.PopWindowValid";
164 	this.valid=function(value){//override
165 		var svalues = YInput.getSubmitted(this.inputstable);
166 		if(value=='Cancel'||onValid(this,svalues,datas)){
167 			this.close();
168 		}
169 	};
170 };
171 YUI.WinDatas={
172 	pile:[],
173 	selected:-1,
174 	zi:10000
175 };
176 // simple most basic flying window require style.left && style.top sets in px.
177 /** 
178 @constructor
179 simple most basic flying window require style.left && style.top sets in px.
180 */
181 YUI.Window = function(root,dragger,resizer,dockable){
182 	this.alive		= true;
183 	this.selected	= false;
184 	this.root		= YDom.get(root);
185 	this.dragger	= YDom.get(dragger);
186 	this.resizer	= YDom.get(resizer);
187 	this.dockable	= dockable?1:0;
188 	this.__listener	= new YListener();
189 	this.freeDockPosition = "absolute";
190 	this.dockMode = "free";
191 	this._dockRef = {};
192 	this._dockTypes = ["free","top","bottom","left top","left bottom","right top","right bottom"];
193 	this.dockButtons = [];
194 	this.dragFrom = [0,0];
195 	this.sizeFrom = [0,0];
196 	this.build	= function(){
197 		this.id=YUI.WinDatas.pile.length;
198 		YUI.WinDatas.pile.push(this);
199 		if(this.dragger){
200 			this.mbutton = new YUI.MoveButton(this.dragger,
201 				function(ofs,own){own._on_move_(ofs);},function(own){own._on_drag_();},function(own){own._on_drop_();},this);
202 		}
203 		if(this.resizer){
204 			this.rbutton = new YUI.MoveButton(this.resizer,
205 				function(ofs,own){own._on_resize_(ofs);},
206 				function(own){own._on_resize_drag_();},function(own){own._on_resize_drop_();},this);
207 		}
208 		YEvt.add(this.root,"mousedown",function(evt,dat){dat.select();},this);
209 		for(var i in this._dockTypes){
210 			this._dockRef[this._dockTypes[i]]=1;
211 		}
212 	};
213 	this.build();
214 };
215 YUI.Window.prototype = {
216 	constructor : YUI.Window,
217 	constructorName : 'YUI.Window',
218 	_on_drag_:function(){
219 		if(this.dockMode == "top"||this.dockMode == "bottom"){
220 			this.root.style.width = "80%";
221 			this.__listener.fire("resize"	,[YDom.size(this.root)]);
222 		}
223 		if(this.resizer){
224 			this.rbutton.moveFactor=[1,1];
225 		}
226 		this.dragFrom = YDom.absoluteOffset(this.root);
227 		if(this.root.style.left)this.dragFrom[0] = parseInt(this.root.style.left);
228 		if(this.root.style.top)this.dragFrom[1] = parseInt(this.root.style.top);
229 		if(this.dockMode!="free"){
230 			this.dock("free");
231 			this.dragFrom=[mouseXY[0]-30,mouseXY[1]-8];
232 			this.vxy=this.dragFrom;
233 		}
234 		//alert(this.dragFrom);
235 		this.root.style.position = this.freeDockPosition;
236 		this.__listener.fire("drag",[this.dragFrom]);
237 	},
238 	_on_move_:function(ofs){
239 		if(this.dockMode == "free"){
240 			this.dragOfset = ofs;
241 			this.setXY([this.dragFrom[0]+ofs[0],this.dragFrom[1]+ofs[1]]);
242 		}
243 	},
244 	_on_drop_:function(){
245 		this.__listener.fire("drop",[this.vxy]);
246 	},
247 	_on_resize_drag_:function(){
248 		this.sizeFrom = YDom.size(this.root);
249 		this.__listener.fire("resizedrag",[YDom.size(this.root)]);
250 	},
251 	_on_resize_:function(ofs){
252 		this.setSize([this.sizeFrom[0]+ofs[0],this.sizeFrom[1]+ofs[1]]);
253 	},
254 	_on_resize_drop_:function(){
255 		this.__listener.fire("resizedrop",[YDom.size(this.root)]);
256 	},
257 	setXY:function(vxy){
258 		this.vxy = [Math.max(0,vxy[0]),Math.max(0,vxy[1])];
259 		this.root.style.left = this.vxy[0]+"px";
260 		this.root.style.top = this.vxy[1]+"px";
261 		this.__listener.fire("move",[this.vxy]);
262 	},
263 	select:function(){;
264 		if(YUI.WinDatas.selected!=this.id){
265 			this.root.style.zIndex = YUI.WinDatas.zi++;
266 			YUI.WinDatas.selected=this.id;
267 		}
268 	},
269 	setSize:function(vwh){
270 		this.root.style.width = vwh[0]+"px";
271 		this.root.style.height = vwh[1]+"px";
272 		this.__listener.fire("resize",[YDom.size(this.root)]);
273 	},
274 	addDockButton:function(button,type){
275 		if(!this._dockRef[type])
276 			throw("\nYUI.Window.addDockButton Error:\n'"+type+"' is not a valid dock type.\nAvailables are"+this._dockTypes);
277 		this.dockButtons[type] = YDom.get(button);
278 		if(this.dockButtons[type]){
279 			YEvt.add(this.dockButtons[type],'mouseup',function(evt,dat){dat.own.dock(dat.type);},{own:this,type:type});
280 		}
281 	},
282 	dock:function(type){
283 		if(!this._dockRef[type])
284 			throw("\nYUI.Window.dock Error:\n'"+type+"' is not a valid dock type.\nAvailables are"+this._dockTypes);
285 		if(type.indexOf("bottom")>-1){
286 			this.root.style.top = "auto";
287 			this.root.style.bottom = "0px";
288 		}
289 		if(type.indexOf("right")>-1){
290 			this.root.style.left = "auto";
291 			this.root.style.right = "0px";
292 		}
293 		if(type=="top"){
294 			this.root.style.left = "0px";
295 			this.root.style.top = "0px";
296 			this.root.style.width = "100%";
297 			if(this.rbutton)this.rbutton.moveFactor=[0,1];
298 		}else if(type=="bottom"){
299 			this.root.style.left = "0px";
300 			this.root.style.width = "100%";
301 			if(this.rbutton)this.rbutton.moveFactor=[0,-1];
302 		}else if(type=="left top"){
303 			this.root.style.left = "0px";
304 			this.root.style.top = "0px";
305 			this.root.style.width = "50%";
306 			if(this.rbutton)this.rbutton.moveFactor=[1,1];
307 		}else if(type=="right top"){
308 			this.root.style.top = "0px";
309 			this.root.style.width = "50%";
310 			if(this.rbutton)this.rbutton.moveFactor=[-1,1];
311 		}else if(type=="left bottom"){
312 			this.root.style.left = "0px";
313 			this.root.style.width = "50%";
314 			if(this.rbutton)this.rbutton.moveFactor=[1,-1];
315 		}else if(type=="right bottom"){
316 			this.root.style.width = "50%";
317 			if(this.rbutton)this.rbutton.moveFactor=[-1,-1];
318 		}else if(type=="free"){
319 			this.root.style.bottom = "auto";
320 			this.root.style.right = "auto";
321 			this.root.style.width = "auto";
322 			this.root.style.height = "auto";
323 		}
324 		if(type!="free"){
325 			this.root.style.position = 'fixed';
326 			if(this.dockMode != type){
327 				this.__listener.fire("move"		,[YDom.absoluteOffset(this.root)]);
328 				this.__listener.fire("resize"	,[YDom.size(this.root)]);
329 			}
330 		}
331 		if(this.dockMode != type){
332 			this.__listener.fire("dock"	,[type]);
333 		}
334 		this.dockMode = type;
335 		
336 	},
337 	// move resize drag drop resizedrag resizedrop 
338 	addListener:function(evtdesc,Function,datas){
339 		this.__listener.addListener(evtdesc,Function,datas);
340 	},
341 	kill:function(){
342 		if(this.mbutton)this.mbutton.kill();
343 		if(this.rbutton)this.mbutton.kill();
344 		for(var type in this.dockButtons){
345 			YEvt.remove(this.dockButtons[type],'mouseup',function(evt,dat){dat.own.dock(dat.type);},{own:this,type:type});
346 		}
347 		this.__listener.fire("kill",[null]);
348 		this.__listener.clear();
349 		YUI.WinDatas.pile[this.id]=null;
350 		this.alive		= false;
351 	}
352 };
353 /*  -------------------------------- */
354 YUI.WindowClassic = function(contentSize,titleRgb,dockable){
355 	var dcsize=contentSize?contentSize:[250,300];
356 	var titlergb=titleRgb?titleRgb:[0,0,255];
357 	var titletxtrgb=(titlergb[0]+titlergb[1]+titlergb[2]>128*3)?[0,0,0]:[255,255,255];
358 	this.killonquit=false;
359 	
360 	this.stylz=YDom.create('style',{},[
361 		[
362 			".yui_window_clasic_quit{",
363 				"position:absolute;",
364 				"border-radius:10px;",
365 				"text-align:center;",
366 				"width:16px;",
367 				"height:16px;",
368 				"cursor:pointer;",
369 				"border:solid 1px #FFF;",
370 				"color:#FFF;",
371 				"background-color:#800;",
372 			"}",
373 			".yui_window_clasic_quit:hover{",
374 				"background-color:#F00;",
375 			"}",
376 			".yui_window_clasic_dock{",
377 				"position:absolute;",
378 				"cursor:pointer;",
379 				"background-color:#AAA;",
380 			"}",
381 			".yui_window_clasic_dock:hover{",
382 				"background-color:#FFF;",
383 			"}"
384 		].join("\n")
385 	]);
386 	
387 	this.cssTitle={cursor:'move',color:'rgb('+titletxtrgb+')',backgroundColor:'rgb('+titlergb+')',
388 					borderRadius:' 10px 0px 0px 10px',padding:'0px 5px'/*,border:'solid 1px rgb('+titletxtrgb+')'*/};
389 	this.cssContent={width:dcsize[0]+'px',height:dcsize[1]+'px',overflow:'auto',resize:'both'};
390 	
391 	var doclist={	'top':{v:[0,-1],br:'5px 5px 0px 0px'},
392 					'bottom':{v:[0,+1],br:'0px 0px 5px 5px'}
393 					//,
394 					//'left':{v:[+1,0],br:'5px 0px 0px 5px'},
395 					//'right':{v:[-1,0],br:'0px 5px 5px 0px'}
396 					};
397 	
398 	var dksiz=5;
399 	var dkofset=[16,-8];
400 	this.cssDocks=[];
401 	for(var i in doclist){
402 		
403 //		var poz= [	dksiz+1+doclist[i][0]*dksiz,
404 //					dksiz+1+doclist[i][1]*dksiz];
405 	//	alert(i+"=>"+poz);
406 		
407 		var cssdock = {right:(dksiz+1+doclist[i].v[0]*dksiz)+'px',top:(dksiz+1+doclist[i].v[1]*dksiz)+'px',
408 			width:dksiz+'px',height:dksiz+'px',borderRadius:doclist[i].br};
409 		this.cssDocks[i]=cssdock;
410 	}
411 	this.cssDockUnder={position:'absolute',right:dkofset[0]+'px',top:dkofset[1]+'px',
412 			width:(3*dksiz+2)+'px',height:(3*dksiz+2)+'px',borderRadius:"10px",border:'solid 1px #FFF',backgroundColor:'#000'};
413 
414 	this.cssQuit={right:'-8px',top:'-8px'};
415 			
416 //	this.cssQuitAll={position:'absolute',right:'-5px',top:'13px',borderRadius:"10px",textAlign:'center',
417 //			cursor:'pointer',width:'10px',height:'10px',color:'#FFF',border:'solid 1px #FFF',backgroundColor:'#F00'};
418 	
419 	this.cssDom={position:'absolute',fontFamily:'monospace',fontSize:'14px',borderRadius:' 10px 0px 0px 0px',
420 		left:'700px',top:'150px',color:'#000',backgroundColor:'#FFF',border:'solid 1px #888'};
421 	
422 	this.domTitle = YDom.create('div',{style:this.cssTitle},['title']);
423 	this.domContent = YDom.create('div',{style:this.cssContent},[]);
424 	this.domDocs=[];
425 	for(var i in doclist){
426 		var domdock =YDom.create('div',{title:'dock '+i,className:'yui_window_clasic_dock',style:this.cssDocks[i]},['']); 
427 		this.domDocs.push(domdock);
428 	}
429 	this.domDockUnder=YDom.create('div',{style:this.cssDockUnder},this.domDocs);
430 	
431 	this.domQuit=YDom.create('div',{title:'close',className:'yui_window_clasic_quit',style:this.cssQuit},['X']);
432 //	this.domQuitAll=YDom.create('div',{title:'close all',style:this.cssQuitAll,innerHTML:'°'},[]);
433 	//alert(this.domDocs);
434 	this.dom = YDom.create('div',{style:this.cssDom},
435 		[this.stylz,this.domTitle,this.domContent,this.domQuit/*,this.domQuitAll*/,this.domDockUnder]);
436 	
437 //	document.body.appendChild(this.dom);
438 	
439 //	YUI.Window.call(this,this.dom,this.domTitle,null,false);
440 	
441 	this.build=function(){
442 		this.win = new YUI.Window(this.dom,this.domTitle,true,false);
443 		this.win.wc=this;
444 		this.dom.style.display='none';
445 		document.body.appendChild(this.dom);
446 		YEvt.add(this.domQuit,'mouseup',function(evt,dat){dat.quit();},this);
447 		var cnt=0;
448 		for(var i in doclist){
449 			var dd = this.domDocs[cnt++]
450 			YEvt.add(dd,'mouseup',function(evt,dat){dat.own.dock(dat.cmd);},{own:this,cmd:i});
451 		}
452 /*		YEvt.add(this.cssQuitAll,'mouseup',function(evt,dat){
453 			if(window.confirm("close all windows")){
454 				dat.win.closeAll();
455 			}
456 		},this);*/
457 		this.dom.style.boxShadow=' 5px 5px 5px #888';
458 		this.win.addListener('dock',function(evtdat,dat){dat._on_evt('dock',evtdat);},this);
459 	};
460 	this.dock=function(docktype){
461 		this.win.dock(docktype);
462 	};
463 	this.kill=function(){
464 		document.body.removeChild(this.dom);
465 		this.win.kill();
466 	};
467 	this.quit=function(){
468 		if(this.killonquit){
469 			this.kill();
470 		}else{
471 			this.dom.style.display='none';
472 		}
473 	};
474 	this._on_evt=function(evtd,evtdat){
475 		if(evtd=='dock'){
476 			this.domDockUnder.style.display=evtdat=="free"?'':'none';
477 			if(evtdat=="free"){
478 				this.domContent.style.width=this.lastcsize[0]+"px";
479 				this.domContent.style.resize="both";
480 			}else{
481 				this.lastcsize=YDom.size(this.domContent);
482 				this.domContent.style.width="100%";
483 				this.domContent.style.resize="vertical";
484 			}
485 		}
486 	};
487 	this.show=function(title,content){
488 		if(!this.win.alive)return null;
489 		this.domTitle.innerHTML=title+"";
490 		if(typeof(content)=="string"){
491 			this.domContent.innerHTML=content;
492 		}else if(content && content.join){
493 			this.domContent.innerHTML="";
494 			this.domContent.appendChild(YDom.create('span',{},content));
495 		}else if(content && content.tagName){
496 			this.domContent.innerHTML="";
497 			this.domContent.appendChild(content);
498 		}
499 		this.dom.style.display='';
500 		this.win.select();
501 	}//this.__listener.fire("dock"	,[type]);
502 	this.build();
503 }
504 
505 
506 YUI.createFullWindow = function(naked){
507 	var win = new YUI.Window(
508 		YDom.create('div',{style:{position:'absolute',left:'400px',top:'400px',width:'300px',height:"150px"}}),
509 		YDom.create('div',{style:{position:'absolute',left:'0px',top:'0px',width:'300px',height:"16px"}}),
510 		YDom.create('div',{style:{position:'absolute',right:'0px',bottom:'0px',width:'8px',height:"8px"}})
511 	);
512 	win.dockers = {
513 		'left top':YDom.create('div',{style:{position:'absolute',left:'0px',top:'0px',width:'33%',height:'45%'}}),
514 		'top':YDom.create('div',{style:{position:'absolute',left:'33%',top:'0px',width:'33%',height:'45%'}}),
515 		'right top':YDom.create('div',{style:{position:'absolute',right:'0px',top:'0px',width:'33%',height:'45%'}}),
516 		'left bottom':YDom.create('div',{style:{position:'absolute',left:'0px',bottom:'0px',width:'33%',height:'45%'}}),
517 		'bottom':YDom.create('div',{style:{position:'absolute',left:'33%',bottom:'0px',width:'33%',height:'45%'}}),
518 		'right bottom':YDom.create('div',{style:{position:'absolute',right:'0px',bottom:'0px',width:'33%',height:'45%'}})
519 	};
520 	win.dockblock = YDom.create('div',{style:{position:'absolute',right:'20px',top:'0px',width:'20px',height:'16px'}});
521 	for(var type in win.dockers){
522 		win.dockblock.appendChild(win.dockers[type]);
523 		win.addDockButton(win.dockers[type],type);
524 	}
525 	win.title = win.dragger;;
526 	win.title.style.overflow = 'hidden';
527 	win.setTitle = function(str){
528 		this.title.innerHTML = " "+str;
529 	};
530 	win.exitButton = YDom.create('div',{style:{position:'absolute',right:'0px',top:'0px',width:'20px',height:'16px'}});
531 	win.header = YDom.create('div',{style:{position:'absolute',right:'0px',top:'0px',width:'100%',height:'16px'}},
532 					[win.title,win.dockblock,win.exitButton]);
533 	win.container = YDom.create('div',{style:{position:'absolute',left:'0px',top:'16px',width:'100%',height:'134px'}});
534 	win.root.appendChild(win.container);
535 	win.root.appendChild(win.header);
536 	win.root.appendChild(win.resizer);
537 	win.addListener('resize',function(size,win){
538 		size[0]-=parseInt(win.root.style.borderLeftWidth);
539 		size[0]-=parseInt(win.root.style.borderRightWidth);
540 		size[1]-=parseInt(win.root.style.borderTopWidth);
541 		size[1]-=parseInt(win.root.style.borderBottomWidth);
542 		win.title.style.width=(size[0]-40)+"px";
543 		win.container.style.width=(size[0])+"px";
544 		win.container.style.height=(size[1]-16)+"px";
545 	},win);
546 	YEvt.add(win.exitButton,'mouseup',function(evt,win){win.__listener.fire("exit"	,[type]);},win)
547 	if(!naked){
548 		win.root.style.border = 'solid 1px #888';
549 		win.root.style.boxShadow="5px 5px 7px #666";
550 		win.header.style.backgroundColor = '#888';
551 		win.header.style.borderBottom = 'solid 1px #000';
552 		win.header.style.fontFamily = 'Monospace';
553 		win.header.style.fontSize = '14px';
554 		
555 		win.title.style.backgroundColor = '#046';
556 		win.title.style.cursor = 'move';
557 		win.title.style.color = '#FFF';
558 			var titlegradient = 'linear-gradient(right top, #069 0%, #064 100%)';
559 			win.title.style.backgroundImage = '-webkit-'+titlegradient;
560 			win.title.style.backgroundImage = '-moz-'+titlegradient;
561 			win.title.style.backgroundImage = '-ms-'+titlegradient;
562 			win.title.style.backgroundImage = '-o-'+titlegradient;
563 			win.title.style.backgroundImage = titlegradient;
564 			
565 		//win.dockblock.style.border = 'solid #000';
566 		//win.dockblock.style.borderWidth = '0px 1px 0px 1px';
567 		win.exitButton.innerHTML = "X";
568 		win.exitButton.style.cursor = 'pointer';
569 		win.exitButton.style.color = "#FFF";
570 		win.exitButton.style.backgroundColor = "#600";
571 		win.exitButton.style.textAlign = "center";
572 		win.exitButton.style.borderRadius = "12px";
573 		win.exitButton.title = "exit";
574 		for(var type in win.dockers){
575 			win.dockers[type].style.backgroundColor = (type.indexOf('left')>-1||type.indexOf('right')>-1)?'#000':'#FFF';
576 			win.dockers[type].style.cursor = 'pointer';
577 			win.dockers[type].title = "dock to "+type+".";
578 		}
579 		win.resizer.style.cursor = 'nw-resize';
580 		win.resizer.style.backgroundColor = '#8AF';
581 		win.resizer.style.borderRadius = '10px 0px 0px 0px';
582 		win.resizer.title = "resize";
583 		win.container.style.backgroundColor = '#FFF';
584 		win.container.style.overflow = 'auto';
585 		win.addListener('drag',function(vxy,win){ 
586 			win.root.style.opacity=0.3;
587 			win.resizer.style.left='auto';
588 			win.resizer.style.top='auto';
589 			win.resizer.style.right='0px';
590 			win.resizer.style.bottom='0px';
591 		},win);
592 		win.addListener('drop',function(vxy,win){ win.root.style.opacity=1.0;},win);
593 		win.addListener('resizedrag',function(vxy,win){ 
594 			win.root.style.borderStyle='dotted';
595 		},win);
596 		win.addListener('resizedrop',function(vxy,win){ 
597 			win.root.style.borderStyle='solid';
598 		},win);
599 		win.addListener('dock',function(type,win){ 
600 			if(type.indexOf("left")>-1){
601 				win.resizer.style.left='auto';
602 				win.resizer.style.right='0px';
603 			}else if(type.indexOf("right")>-1){
604 				win.resizer.style.left='0px';
605 			}else{
606 				win.resizer.style.left='49%';
607 			}
608 			if(type.indexOf("top")>-1){
609 				win.resizer.style.top='auto';
610 				win.resizer.style.bottom='0px';
611 			}else{
612 				win.resizer.style.top=win.header.style.height;
613 			}
614 		},win);
615 	}
616 	return win;
617 };
618 /** 
619 @constructor
620 */
621 YUI.SpinField=function(input,onChange,datas){
622 	this.SPIN_HORIZONTAL=0;
623 	this.SPIN_VERTICAL=1;
624 	this.input=YDom.get(input);
625 	this.min=null;
626 	this.max=null;
627 	this.step=0.01;
628 	this.value=0;
629 	this.triggerWait=200;
630 	
631 	this.orient=this.SPIN_VERTICAL;
632 	this.sliding=false;
633 	
634 	this.build=function(){
635 		var value=parseFloat(this.input.value);
636 		if(value+""!="NaN")this.value=value;
637 
638 		YEvt.add(this.input,"keyup",function(evt,owner){owner._on_event("keyup");},this);
639 		YEvt.add(this.input,"change",function(evt,owner){owner._on_event("change");},this);
640 		YEvt.add(this.input,"mousedown",function(evt,owner){owner._on_event("mousedown");},this);
641 		YEvt.add(document,"mouseup",function(evt,owner){owner._on_event("mouseup");},this);
642 		YEvt.add(document,"mousemove",function(evt,owner){owner._on_event("mousemove");},this);
643 		
644 	};
645 	this._on_event=function(evtDesc){
646 		switch(evtDesc){
647 			case "keyup":
648 				var val = parseFloat(this.input.value);
649 				var value=this._re_formated_value();
650 				if(val!=parseFloat(value)){
651 					this.input.value=value;
652 				}
653 				var changed = this.value!=parseFloat(value);
654 				this.value=parseFloat(value);
655 				if(changed)this._on_change();
656 			break;
657 			case "change":
658 				this._re_format();
659 			break;
660 			case "mousedown":
661 				this.timer = YTimer.timeout(this.triggerWait,function(dat){dat._on_event("timerdown");},this);
662 			break;
663 			case "timerdown":
664 				this.sliding=true;
665 				this.mouseFrom=mouseXY[this.orient];
666 				this.input.style.cursor=this.orient?"n-resize":"e-resize";
667 			break;
668 			case "mouseup":
669 				this.sliding=false;
670 				window.clearInterval(this.timer);
671 				this.input.style.cursor="";
672 				var value=this._re_formated_value();
673 				var changed = this.value!=parseFloat(value);
674 				this.value=parseFloat(value);
675 				this.input.value=value;
676 				if(changed)this._on_change();
677 			break;
678 			case "mousemove":
679 				if(this.sliding){
680 					var offset = (1-2*this.orient)*(mouseXY[this.orient]-this.mouseFrom);
681 					this.mouseFrom=mouseXY[this.orient];
682 					var val = parseFloat(this.input.value);
683 					val+=offset*this.step;
684 					this.input.value=val;
685 					this._re_format();
686 					this._on_change();
687 				}
688 			break;
689 		}
690 	};
691 	this.linkObject=function(object,varname){
692 		if(!object||typeof(object[varname])=="undefined"){
693 			throw("\nYUI.SpinField.linkObject Error:\nobject["+varname+"] doesn't exist.");
694 		}else{
695 			this.objLink={obj:object,varname:varname};
696 			this.input.value = object[varname];
697 		}
698 	};
699 	this._on_change=function(){
700 		if(this.objLink){
701 			this.objLink.obj[this.objLink.varname]=this.value;
702 		}
703 		onChange(this.value,datas);
704 	};
705 	this._re_formated_value=function(){
706 		var val = parseFloat(this.input.value);
707 		if(val+""=="NaN")val=this.value;
708 		if(typeof(this.min)=="number")val=Math.max(this.min,val);
709 		if(typeof(this.max)=="number")val=Math.min(this.max,val);
710 		var value=""+val;
711 
712 		var stepstr = this.step+"";
713 		if(stepstr.indexOf(".")>-1){
714 			var prec = stepstr.split(".")[1].length;
715 			var isp = value.split(".");
716 			if(!isp[1])isp[1]="0";
717 			value = isp[0]+"."+(isp[1]+YStr.repeat('0',prec)).substr(0,prec);
718 		}
719 		return value;
720 	};
721 	this._re_format=function(){
722 		this.input.value=this._re_formated_value();
723 		this.value=parseFloat(this.input.value);
724 	};
725 	
726 	this.build();
727 };
728 /** 
729 @constructor
730 */
731 YUI.Tabs=function(btn_className){
732 	var scope=this;
733 	var className=btn_className?btn_className:"";
734 	var tabs=[];
735 	var listener = new YListener();
736 	var TAB = function(name,button,container){
737 		this.name		= name;
738 		this.button		= button;
739 		this.container	= container;
740 		var olddisplay	= container.style.display?container.style.display:"";
741 		this.className	= (button.className?button.className+" ":"")+className;
742 		YEvt.add(this.button,'mouseup',function(evt,dat){dat.own.selectTab(dat.name);},{name:name,own:scope});
743 		this.select=function(selected){
744 			this.container.style.display = selected ? olddisplay : 'none';
745 			this.button.className = this.className+(selected ? '_on' : '_off');
746 		};
747 		tabs[name]		= this;
748 	};
749 	
750 	this.getTab			= function(name){	return tabs[name]?tabs[name]:null;	};
751 	this.getButton		= function(name){	return tabs[name]?tabs[name].button:null;	};
752 	this.getContainer	= function(name){	return tabs[name]?tabs[name].container:null;	};	
753 	
754 	this.addTab=function(name,button,container){	
755 		new TAB(name,button,container);
756 		this.selectTab(name);
757 	};
758 	this.selectTab=function(name){
759 		for(var i in tabs){
760 			tabs[i].select(name==i);
761 		}
762 		if(tabs[name])listener.fire("select",[name]);
763 		return tabs[name]?true:false;
764 	};
765 	this.select=this.selectTab;
766 	this.addSelectListener=function(Function,datas){
767 		listener.addListener("select",Function,datas);
768 	};
769 
770 };
771 
772 // -------------------------------------------------------------------------------
773 YUI.PopImage=function(className,margin){
774 	var scope		=this;
775 	
776 	this.dom_loading=YDom.create('div',{className:className+"_loading"},[]);
777 	this.dom_canvas	=YDom.create('canvas',{width:100,height:100},[]);
778 	this.dom_title	=YDom.create('div',{className:className+"_title"},[]);
779 	this.dom_desc	=YDom.create('div',{className:className+"_desc"},[]);
780 	
781 	this.dom_mask	=YDom.create('div',{className:className+"_mask",style:{position:'absolute',left:"0px",top:"0px",width:"100%"}},[]);
782 	this.dom_disp	=YDom.create('div',{className:className+"_disp",style:{position:'absolute',left:"0px",top:"0px",width:"100%"}},[]);
783 	
784 	this.dom		=YDom.create('div',{className:className,style:{position:'fixed',left:"0px",top:"0px",width:"100%"}},[this.dom_mask,this.dom_disp]);
785 	
786 	YEvt.add(this.dom_disp,'mouseup',function(){scope.hide();});
787 	
788 	var showing		=false;
789 	var on_load 	=function(img){
790 		scope.dom_disp.innerHTML="";;
791 
792 		scope.dom_canvas.width		= img.width;
793 		scope.dom_canvas.height		= img.height;
794 		var ctx = scope.dom_canvas.getContext("2d");
795 		ctx.clearRect(0,0,img.width,img.height);
796 		ctx.drawImage(img,0,0,img.width,img.height);
797 		
798 		scope.dom_disp.appendChild(scope.dom_canvas);
799 		scope.dom_disp.appendChild(scope.dom_title);
800 		scope.dom_disp.appendChild(scope.dom_desc);
801 		on_resize();
802 	};
803 	var on_resize = function(){
804 		var wh = YWindow.getsize();
805 		scope.dom.style.height		=
806 		scope.dom_mask.style.height	=
807 		scope.dom_disp.style.height	= wh[1]+"px";
808 		//margin
809 		if(typeof(margin)=='number'/*&&scope.dom_canvas.style.position=="absolute"*/){
810 			var imgdim=[parseInt(scope.dom_canvas.width),parseInt(scope.dom_canvas.height)];
811 			var mwh = [wh[0]-margin*2,wh[1]-margin*2];
812 			
813 			var factor = mwh[0]/imgdim[0]<mwh[1]/imgdim[1]?mwh[0]/imgdim[0]:mwh[1]/imgdim[1];
814 			var ndim = [Math.round(imgdim[0]*factor),Math.round(imgdim[1]*factor)];
815 			scope.dom_canvas.style.left	= (0.5*(wh[0]-ndim[0]))+"px";
816 			scope.dom_canvas.style.top	= (0.5*(wh[1]-ndim[1]))+"px";
817 			scope.dom_canvas.style.width	= ndim[0]+"px";
818 			scope.dom_canvas.style.height	= ndim[1]+"px";
819 		}//alert(scope.dom_loading.style.position);
820 //		if(scope.dom_loading.style.position=="absolute"){
821 			var olwh = YDom.size(scope.dom_loading);
822 			scope.dom_loading.style.left	= (0.5*(wh[0]-olwh[0]))+"px";
823 			scope.dom_loading.style.top	= (0.5*(wh[1]-olwh[1]))+"px";
824 //		}
825 		
826 	};
827 	this.hide		=function(){
828 		if(showing){
829 			document.body.removeChild(this.dom);
830 			YWindow.SizeListener.removeListener(on_resize);
831 		}
832 		showing		=false;
833 	};
834 	this.show		=function(url,title,description){
835 		if(!title)title="";
836 		if(!description)description	="";
837 		this.dom_disp.innerHTML		="";
838 		this.dom_title.innerHTML	=title;
839 		this.dom_desc.innerHTML		=description;
840 		this.dom_disp.appendChild(this.dom_loading);
841 		if(!showing){
842 			document.body.appendChild(this.dom);
843 			on_resize();
844 			YWindow.SizeListener.addListener(on_resize);
845 		}
846 		var img = new Image();
847 		img.onload=function(){on_load(this);};
848 		img.src = url;
849 		showing		=true;
850 	};
851 };
852 
853 // -------------------------------------------------------------------------------
854 YUI._dragdrop={
855 	list:[],
856 	register:function(obj){
857 		this.list.push(obj);
858 		return "YUI._dragdrop.list["+(this.list.length-1)+"]";
859 	}
860 };
861 
862 /*
863 target : tgt drop element
864 type : mime type. "text" if used with YUI.DragListener
865 */
866 YUI.DropListener=function(target,type,onDrop,datas){
867 	var scope=this;
868 	var tgt=YDom.get(target);
869 	var varname = YUI._dragdrop.register(this);
870 	this.type=type;
871 	var build=function(){
872 		YEvt.add(tgt,'dragover',function(evt,dat){evt.preventDefault();},this);
873 		YEvt.add(tgt,'drop',function(evt,dat){
874 			//for(var i in evt.dataTransfer.types)alert(evt.dataTransfer.types[i]);
875 			evt.preventDefault();
876 			var data=null;
877 			data=evt.dataTransfer.getData(dat.own.type);
878 			try{
879 				scope.data=data;
880 				eval(varname+".data="+scope.data+";");
881 				data = scope.data;
882 				scope.data=null;
883 				if(data&&data.sentDatas)data=data.sentDatas;
884 			}catch(e){}
885 			if (evt.stopPropagation) {  evt.stopPropagation();
886 			}else {						evt.cancelBubble = true;	}
887 			dat.onDrop(data,dat.datas);
888 		},{own:scope,onDrop:onDrop,datas:datas});
889 	};
890 	build();
891 };
892 
893 YUI.DragListener=function(origin,sentDatas){
894 	var scope=this;
895 	var varname = YUI._dragdrop.register(this);
896 	var org=YDom.get(origin);
897 	this.sentDatas = sentDatas;
898 	var build=function(){		
899 		org.draggable="true";
900 		YEvt.add(org,'dragstart',function(evt,dat){
901 			evt.dataTransfer.setData("text",varname);
902 		},scope);
903 	};
904 	build();
905 };
906 //YUI.SpinField=function(input,onChange,datas){
907