/**------------------------------------------------------------------------

 *@class SubWindow

 *@extends Div

 */

var SubWindow = Class.create();

SubWindow.prototype = Object.extend(new Div, {





	/**

	 * initialize

	 * @constructor initialize

	 * @param {string} id ウインドウのID

	 * @param {string} parentId ウインドウの親のID

	 * @param {string} frameId	フレームのID

	 */

	initialize: function (id,parentObj,options) {





		/* this */

		this.id=id;

		this.parentObj=parentObj;

		this.options = options || { };

		this.isScroll=this.options.isScroll || false;

		this.isTitle=this.options.isTitle || false;

		this.isResize=this.options.isResize || false;

		this.isActive=this.options.isActive || false;

		this.isDrag=this.options.isDrag || false;

		this.frameMargin=this.options.frameMargin || 0;

		this.left=this.options.left || 0;

		this.top=this.options.top || 0;

		this.width=this.options.width || 300;

		this.height=this.options.height || 300;





		if(this.isTitle){

			this.titleHeight=15;

		}else{

			this.titleHeight=0;

		}

		this.scrollHeight=15;







		/* this */

		this.createDiv();

		this.setStyle();

//		this.display();

//		this.setLeft(this.left);

//		this.setTop(this.top);

//		this.setWidth(this.width);

//		this.setHeight(this.height);





		/* frame */

		this.frame=new Frame(this.id+'Frame',this);





		/* world */

		this.world=new World(this.id+'World',this.frame);





		/* scrollHorizontal */

		this.scrollHorizontal=new Scroll(this.id+'ScrollHorizontal',

										 this,

										 'horizontal');





		/* scrollVertical */

		this.scrollVertical=new Scroll(this.id+'ScrollVertical',

									   this,

									   'vertical');





		/* titleBar */

		if(this.isTitle){

			this.titleBar=new TitleBar(this.id+'TitleBar',this);

		}





		this.setEvent();

		this.onInit();





	},







	/**

	 *setEvent

	 */

	setEvent: function () {



		/* click event */

//		Event.observe($(this.id),'click',searchBlur);



		/* mousewheel event */

		Event.observe(document,'mousewheel',this.onWheel.bind(this));

		Event.observe(document,'DOMMouseScroll',this.onWheel.bind(this));





		/* arrowkey event */

		if(osType==MAC){

			switch (brwType) {

				case SF:

					Event.observe(document,'keydown',this.onKey.bind(this));

					break;





				case FF:

					Event.observe(document,'keypress',this.onKey.bind(this));

					break;





				case OP:

					Event.observe(document,'keypress',this.onKey.bind(this));

					break;





				default:

					break;

			}

		}else if(osType==WIN){

			switch (brwType) {

				case IE:

					Event.observe(document,'keydown',this.onKey.bind(this));

					break;





				case FF:

					Event.observe(document,'keypress',this.onKey.bind(this));

					break;





				case OP:

					Event.observe(document,'keypress',this.onKey.bind(this));

					break;





				case CR:

					Event.observe(document,'keydown',this.onKey.bind(this));

					break;





				case SF:

					Event.observe(document,'keydown',this.onKey.bind(this));

					break;





				default:

					break;

			}

		}





	},







	/**

	 *removeEvent

	 */

	removeEvent: function () {





//		/* mousewheel event */

//		Event.stopObserving(document,'mousewheel',this.onWheel.bind(this));

//		Event.stopObserving(document,'DOMMouseScroll',this.onWheel.bind(this));

//

//		/* arrowkey event */

//		if(osType==MAC){

//			switch (brwType) {

//				case SF:

//					Event.stopObserving(document,'keydown',this.onArrow.bind(this));

//					break;

//

//				case FF:

//					Event.stopObserving(document,'keypress',this.onArrow.bind(this));

//					break;

//

//				case OP:

//					Event.stopObserving(document,'keypress',this.onArrow.bind(this));

//					break;

//

//				default:

//					break;

//			}

//		}else if(osType==WIN){

//			switch (brwType) {

//				case IE:

//					Event.stopObserving(document,'keydown',this.onArrow.bind(this));

//					break;

//

//				case FF:

//					Event.stopObserving(document,'keypress',this.onArrow.bind(this));

//					break;

//

//				case OP:

//					Event.stopObserving($(this.id),'keypress',this.onArrow.bind(this));

//					break;

//

//				case CR:

//					Event.stopObserving($(this.id),'keydown',this.onArrow.bind(this));

//					break;

//

//				default:

//					break;

//			}

//		}





	},





	/**

	 *onInit

	 *初期設定とリサイズ時のイベント

	 * @param {int} windowLeft

	 * @param {int} windowTop

	 * @param {int} windowWidth

	 * @param {int} windowHeight

	 */

	onInit:function(){





		/* window */

		this.setLeft(this.left);

		this.setTop(this.top);

		this.setWidth(this.width);

		this.setHeight(this.height);





		/* frame */

		var frameLeft=this.frameMargin;

		var frameTop=this.frameMargin*2+this.titleHeight;

		var frameWidth=this.width-this.frameMargin*2;

		var frameHeight=this.height-this.frameMargin*3-this.titleHeight;

		this.frame.setLeft(frameLeft);

		this.frame.setTop(frameTop);

		this.frame.setWidth(frameWidth);

		this.frame.setHeight(frameHeight);





		/* world */

		var worldLeft=this.world.getLeft();

		var worldTop=this.world.getTop();

		var worldWidth=this.world.getWidth();

		var worldHeight=this.world.getHeight();





		var scrollValX=Math.abs(worldLeft/(worldWidth-frameWidth));

		var scrollValY=Math.abs(worldTop/(worldHeight-frameHeight));

		var isVisibleX=true;

		var isVisibleY=true;





		if(worldWidth>frameWidth){

			if(worldLeft<=-(worldWidth-frameWidth)){

				scrollValX=1;

			}else if(worldLeft>=0){

				scrollValX=0;

			}

		}else{

			scrollValX=0;

			isVisibleX=false;

		}





		if(worldHeight>frameHeight){

			if(worldTop<=-(worldHeight-frameHeight)){

				scrollValY=1;

			}else if(worldTop>=0){

				scrollValY=0;

			}

		}else{

			scrollValY=0;

			isVisibleY=false;

		}





		this.world.setLeft(scrollValX*-(worldWidth-frameWidth));

		this.world.setTop(scrollValY*-(worldHeight-frameHeight));







		/* scrollHorizontal */

		this.scrollHorizontal.setLeft(frameLeft);

		this.scrollHorizontal.setTop(frameTop+frameHeight-this.scrollHeight);

		this.scrollHorizontal.setWidth(frameWidth-this.scrollHeight);

		this.scrollHorizontal.setHeight(this.scrollHeight);

		this.scrollHorizontal.setTrackLength(frameWidth-this.scrollHeight);

		this.scrollHorizontal.setValue(scrollValX);

		this.scrollHorizontal.setVisible(isVisibleX);





		/* scrollVertical */

		this.scrollVertical.setLeft(frameLeft+frameWidth-this.scrollHeight);

		this.scrollVertical.setTop(frameTop);

		this.scrollVertical.setWidth(this.scrollHeight);

		this.scrollVertical.setHeight(frameHeight-this.scrollHeight);

		this.scrollVertical.setTrackLength(frameHeight-this.scrollHeight);

		this.scrollVertical.setValue(scrollValY);

		this.scrollVertical.setVisible(isVisibleY);





//		/* mask */

//		this.mask.setLeft(this.left);

//		this.mask.setTop(this.top);

//		this.mask.setWidth(this.width);

//		this.mask.setHeight(this.width);





	},







	/**

	 *onWheel

	 */

	onWheel:function (ev){





		if(!this.isActive){

			return;

		}





		/* 変数取得 */

		ev=ev || window.event;





//		/* ev dump */

//		var str='';

//		var date = new Date();

//		str+=date.getTime()+'<br>\n';

//		for(key in ev){

//			str+=key+':'+ev[key]+'<br>\n';

//		}

//		$(this.world.id).innerHTML=str;





		/* check browser

			MAC Safari

				wheelDeltaX

					左:+ | 右:-

				wheelDeltaY

					上:+ | 下:-

				wheelDelta

					左上:+ | 右下:-

			MAC Firefox

				detail

					左上:- | 右下:+

				axis

					x:1 | y:2

			MAC Opera

				wheelDelta

					左上:+ | 右下:- | 単位:120

				detail

					左上:- | 右下:+

			WIN IE

				wheelDelta

					左上:+ | 右下:- | 単位:120

			WIN Firefox

				detail

					左上:- | 右下:+ | 単位:3

			WIN Opera

				wheelDelta

					左上:+ | 右下:- | 単位:120

			WIN Chrome

				wheelDelta

					左上:+ | 右下:- | 単位:120

		*/





		/* dtX,dtY */

		var dtX=0;

		var dtY=0;











		if(osType==MAC){

			switch (brwType) {

				case SF:

					dtX=ev.wheelDeltaX;

					dtY=ev.wheelDeltaY;

					break;

				case FF:

					if(ev.axis==1){

						dtX=-ev.detail*10;

						dtY=0;

					}else{

						dtX=0;

						dtY=-ev.detail*10;

					}

					break;

				case OP:

					dtX=0;

					dtY=ev.wheelDelta;

					break;

				default:

					break;

			}

		}else if(osType==WIN){

			switch (brwType) {

				case IE:

					dtX=0;

					dtY=ev.wheelDelta;

					break;

				case FF:

					if(ev.axis==1){

						dtX=-ev.detail*10;

						dtY=0;

					}else{

						dtX=0;

						dtY=-ev.detail*10;

					}

					break;

				case OP:

					dtX=0;

					dtY=ev.wheelDelta;

					break;

				case CR:

					dtX=0;

					dtY=ev.wheelDelta;

					break;

				case SF:

					dtX=0;

					dtY=ev.wheelDeltaY;

					break;

				default:

					break;

			}

		}





	    /* world */

		var worldLeft=this.world.getLeft();

		var worldTop=this.world.getTop();

	    this.world.setLeft(Math.ceil(worldLeft+dtX));

		this.world.setTop(Math.ceil(worldTop+dtY));





		/* onDrag */

		this.world.onDrag();





		/* onInit */

		this.onInit();





	},







	/**

	 *onKey

	 *キーが押された時のされた時のイベント

	 */

	onKey: function(ev){





		if(!this.isActive){

			return;

		}





		/* 変数取得 */

		ev=ev || window.event;





		/* ev dump */

//		var str='';

//		var date = new Date();

//		str+=date.getTime()+'<br>\n';

//		for(key in ev){

//			str+=key+':'+ev[key]+'<br>\n';

//		}

//		$(this.world.id).innerHTML=str;

//		console.log(ev.keyCode);





		if(ev.keyCode==27){

			onCloseBrowse(this);

			clearInterval(timerLeft) ;

			clearInterval(timerRight) ;

			return;

		}







		if(ev.keyCode<=37 && ev.keyCode>=40){

			return;

		}





		/* frame */

		var frameWidth=this.frame.getWidth();

		var frameHeight=this.frame.getHeight();





		/* world */

		var worldWidth=this.world.getWidth();

		var worldHeight=this.world.getHeight();





		/* dtX,dtY */

		var division=20.0;

		var dtX=(worldWidth-frameWidth)/division;

		var dtY=(worldHeight-frameHeight)/division;





		if(dtX<0){

			dtX=0;

		}

		if(dtY<0){

			dtY=0;

		}





		switch (ev.keyCode) {

			case 37:	//left

				dtX=dtX;

				dtY=0;

				break;





			case 38:	//top

				dtX=0;

				dtY=dtY;

				break;





			case 39:	//right

				dtX=-dtX;

				dtY=0;

				break;





			case 40:	//bottom

				dtX=0;

				dtY=-dtY;

				break;





			default:

				dtX=0;

				dtY=0;

				break;

		}











	    //console.log(dtX+','+dtY);





	    /* world */

		var worldLeft=this.world.getLeft();

		var worldTop=this.world.getTop();

	    this.world.setLeft(Math.ceil(worldLeft+dtX));

		this.world.setTop(Math.ceil(worldTop+dtY));





		/* onDrag */

		this.world.onDrag();





	},







	/**

	 *display

	 */

	display: function () {

		var html='';

		html+=this.id+'<br/>';

		$(this.id).innerHTML=html;

	},







	/**

	 *setStyle

	 */

	setStyle: function () {





		var r=Math.floor(Math.random()*255);

		var g=Math.floor(Math.random()*255);

		var b=Math.floor(Math.random()*255);





		$(this.id).setStyle({

			backgroundColor	:'#eeeeee',

//			backgroundColor	:'rgb('+r+','+g+','+b+')',





			marginLeft		:'0px',

			marginRight		:'0px',

			marginTop		:'0px',

			marginBottom	:'0px',

			paddingLeft		:'0px',

			paddingRight	:'0px',

			paddingTop		:'0px',

			paddingBottom	:'0px',





			position		:'absolute',	//配置方式:static(default),relative,absolute,fixed,inherit

			overflow		:'hidden',	//スクロールバー制御:visible,hidden,scroll,auto,inherit

			zIndex			:'1000'

		});

	}







});











/**

 *@class Frame

 *@extends Div

 */





var Frame = Class.create();

Frame.prototype = Object.extend(new Div, {





	/**

	 *@constructor initialize

	 */

	initialize: function (id,parentObj) {





		/* this */

		this.id=id;

		this.parentObj=parentObj;

		this.createDiv();

		this.setStyle();

//		this.display();





	},







	/**

	 *display

	 */

	display: function () {

		var html='';

		html+=this.id+'<br/>';

		$(this.id).innerHTML=html;

	},







	/**

	 *setStyle

	 */

	setStyle: function () {





		var r=Math.floor(Math.random()*255);

		var g=Math.floor(Math.random()*255);

		var b=Math.floor(Math.random()*255);





		Element.setStyle($(this.id),{

			backgroundColor	:'#ffffff',

//			backgroundColor	:'rgb('+r+','+g+','+b+')',





			marginLeft		:'0px',

			marginRight		:'0px',

			marginTop		:'0px',

			marginBottom	:'0px',

			paddingLeft		:'0px',

			paddingRight	:'0px',

			paddingTop		:'0px',

			paddingBottom	:'0px',





			position		:'absolute',	//配置方式:static(default),relative,absolute,fixed,inherit

			overflow		:'hidden'		//スクロールバー制御:visible,hidden,scroll,auto,inherit

		});

	}





});











/**

 *@class World

 *@extends Div

 */





var World = Class.create();

World.prototype = Object.extend(new Div, {





	/**

	 *@constructor initialize

	 */

	initialize: function (id,parentObj) {

		this.id=id;

		this.parentObj=parentObj;

		this.createDiv();

		this.setStyle();

//		this.display();





		if(this.parentObj.parentObj.isDrag){

			this.setDrag();

		}







//		this.setWidth(1000);

//		this.setHeight(500);

	},







	/**

	 * setDrag

	 */

	setDrag: function () {

		var drag=new Draggable(this.id,

						  	  {

    						  		change: this.onDrag.bind(this),

    						  		onStart:this.onStart.bind(this),

									starteffect: false,

									endeffect: false

  							   });





	},







	/**

	 *onStart

	 */

	onStart: function () {

		searchBlur();

	},







	/**

	 *onDrag

	 *mainがドラッグされた時のイベント

	 */

	onDrag:function(){



		/* frame */

		var frameLeft=this.parentObj.parentObj.frame.getLeft();

		var frameTop=this.parentObj.parentObj.frame.getTop();

		var frameWidth=this.parentObj.parentObj.frame.getWidth();

		var frameHeight=this.parentObj.parentObj.frame.getHeight();





		/* world */

		var worldLeft=this.parentObj.parentObj.world.getLeft();

		var worldTop=this.parentObj.parentObj.world.getTop();

		var worldWidth=this.parentObj.parentObj.world.getWidth();

		var worldHeight=this.parentObj.parentObj.world.getHeight();





		/* scrollValX,scrollValY */

		var scrollValX=Math.abs(worldLeft/(worldWidth-frameWidth));

		var scrollValY=Math.abs(worldTop/(worldHeight-frameHeight));





		if(worldWidth>frameWidth){

			if(worldLeft<=-(worldWidth-frameWidth)){

				scrollValX=1;

			}else if(worldLeft>=0){

				scrollValX=0;

			}

		}else{

			scrollValX=0;

		}





		if(worldHeight>frameHeight){

			if(worldTop<=-(worldHeight-frameHeight)){

				scrollValY=1;

			}else if(worldTop>=0){

				scrollValY=0;

			}

		}else{

			scrollValY=0;

		}







		/* world */

		if(scrollValX==0 || scrollValX==1){

			this.parentObj.parentObj.world.setLeft(scrollValX*-(worldWidth-frameWidth));

		}

		if(scrollValY==0 || scrollValY==1){

			this.parentObj.parentObj.world.setTop(scrollValY*-(worldHeight-frameHeight));

		}





		/* scrollHorizontal */

		this.parentObj.parentObj.scrollHorizontal.setValue(scrollValX);





		/* scrollVertical */

		this.parentObj.parentObj.scrollVertical.setValue(scrollValY);





	},











	/**

	 *display

	 */

	display: function () {

		var html='';

		html+=this.id+'<br/>';

		$(this.id).innerHTML=html;

	},







	/**

	 * setStyle

	 */

	setStyle: function () {





		var r=Math.floor(Math.random()*255);

		var g=Math.floor(Math.random()*255);

		var b=Math.floor(Math.random()*255);





		Element.setStyle($(this.id),{

//			backgroundColor	:'rgb('+r+','+g+','+b+')',





			marginLeft		:'0px',

			marginRight		:'0px',

			marginTop		:'0px',

			marginBottom	:'0px',

			paddingLeft		:'30px',

			paddingRight	:'30px',

			paddingTop		:'30px',

			paddingBottom	:'30px',





			position		:'absolute'	//配置方式:static(default),relative,absolute,fixed,inherit

		});

	}





});







/**

 *@class Scroll

 *@extends Div

 */

var Scroll = Class.create();

Scroll.prototype = Object.extend(new Div, {





	/**

	 *@constructor initialize

	 */

	initialize: function (id,parentObj,axis) {

		this.id=id;

		this.parentObj=parentObj;

		this.axis=axis;





		this.createDiv();

		this.setVisible(false);

		this.createHandle();

		this.setStyle();

		this.setScroll();

	},







	/**

	 *createHandle

	 */

	createHandle: function () {

		this.handleId=this.id+'Handle';

		this.handle=new Div(this.handleId,this);

		this.img=document.createElement("img");

		if(this.axis=='horizontal'){

			this.img.src='../style/img/scrollHorizontal.jpg';

			this.handle.setWidth(50);

			this.handle.setHeight(15);





		}else{

			this.img.src='../style/img/scrollVertical.jpg';

			this.handle.setWidth(15);

			this.handle.setHeight(50);





		}

		$(this.handleId).appendChild(this.img);

	},







	/**

	 * setScroll

	 */

	setScroll: function () {

		this.slider=new Control.Slider(this.handleId,

						 	 	 	   this.id,

						 		       {

						 					axis: this.axis,

											sliderValue: 0.0,

											onSlide: this.onScroll.bind(this),

											onChange: this.onScroll.bind(this)

						 		 	   });

	},







	/**

	 *onScroll

	 *スクロールバーの値が変化した時のイベント

	 *@pram scrollVal: 0.0-1.0

	 *@param axis: 'horizontal' or 'vertical'

	 */

	onScroll: function(scrollVal){





		/* frame */

		var frameWidth=this.parentObj.frame.getWidth();

		var frameHeight=this.parentObj.frame.getHeight();





		/* world */

		var worldWidth=this.parentObj.world.getWidth();

		var worldHeight=this.parentObj.world.getHeight();





		/* world */

		if(this.axis=='horizontal'){

			this.parentObj.world.setLeft(scrollVal*-(worldWidth-frameWidth));

		}else{

			this.parentObj.world.setTop(scrollVal*-(worldHeight-frameHeight));

		}







	},











	/**

	 * setValue

	 */

	setValue: function (val) {

		this.slider.setValue(val);

	},







	/**

	 * setTrackLength

	 */

	setTrackLength: function (val) {

		this.slider.trackLength=val;

	},













	/**

	 *setStyle

	 */

	setStyle: function () {





		Element.setStyle($(this.id),{

			//backgroundColor	:'#000000',

			//filter: 'alpha(opacity=20)',

			//opacity:'0.2',

			position		:'absolute',	//配置方式:static(default),relative,absolute,fixed,inherit

			zIndex			:'1000'

		});





		Element.setStyle($(this.handleId),{

			//backgroundColor	:'#ff0000',

			//filter: 'alpha(opacity=100)',

			//opacity:'1.0',

			position		:'absolute',	//配置方式:static(default),relative,absolute,fixed,inherit

			zIndex			:'1000'

		});





	}







});











/**

 *@class TitleBar

 *@extends Div

 */





var TitleBar = Class.create();

TitleBar.prototype = Object.extend(new Div, {





	/**

	 *@constructor initialize

	 */

	initialize: function (id,parentObj) {

		this.id=id;

		this.parentObj=parentObj;

		this.createDiv();

		this.setStyle();

		this.onInit();

		this.display();





		/* mousedown event */

		$(this.id).observe("mousedown",this.onMouseDown.bind(this));

	},







	/**

	 * onInit

	 */

	onInit: function () {

		this.setLeft(this.parentObj.frameMargin);

		this.setTop(this.parentObj.frameMargin);

		this.setWidth(this.parentObj.titleHeight);

		this.setHeight(this.parentObj.titleHeight);





	},





	/**

	 *display

	 */

	display: function () {

		var html='';

		html+='<img src="../style/img/close.jpg" />';

		$(this.id).innerHTML=html;

	},







	/**

	 *onMouseDown

	 */

	onMouseDown:function (ev){





		/* 変数取得 */

		ev=ev || window.event;





		onCloseBrowse(this.parentObj);





	},































	/**

	 *setStyle

	 */

	setStyle: function () {

		Element.setStyle($(this.id),{

			backgroundColor:'#dddddd',





			marginLeft		:'0px',

			marginRight		:'0px',

			marginTop		:'0px',

			marginBottom	:'0px',

			paddingLeft		:'0px',

			paddingRight	:'0px',

			paddingTop		:'0px',

			paddingBottom	:'0px',





			position		:'relative'	//配置方式:static(default),relative,absolute,fixed,inherit





		});

	}











});