var WidgetSimplePpt = new Class({
	options: {
		v: '1.0',
		margin:20
	},
	initialize: function(o,options ){
		this.setOptions( options );
		this.mask = new WidgetSimpleMask({left:10, bottom:5, bg:"#808080", opacity:0.8});
		this.div = new WidgetSimpleCenterDiv({});
		//alert(this.div);
		//this.mask.hidden();
		//this.test1();
	},
	test:function(_src){
		this.mask.show();
		this.createStage(_src);
		
	},
	showMask:function(){
		this.mask.show();
	},
	createStage:function(url){
		this.showLoading()
		var self = this;
		new Ajax(url, {
			method: 'get',
			//evalResponse:true,
			evalScripts:true,
			onSuccess:function(req){
				//self.div.setSize({width:self.stage.width+self.options.margin, height:self.stage.height+self.options.margin});
				self.div.setSize({width:882, height:440});
				//alert(window.getScrollTop()+'--'+window.getHeight());
				self.div.setPos({top:((window.getScrollTop()+window.getHeight()/2)).toInt(), left:(window.getWidth()/2).toInt()});
				self.div.show();
				self.div.content = req;
				self.hiddenLoading();
			}
		}).request();
	},
	hidden:function(){
	   this.div.hidden();
	   this.mask.hidden();
	},
	showLoading:function(){
	   
	},
	hiddenLoading:function(){
	
	}
});
WidgetSimplePpt.implement( new Options );

var WidgetSimpleCenterDiv = new Class({
	options: {
		v: '1.0',
		opacity:0,
		classname:"simple_center_div",
		bottom:0,
		margin:10,
		left:0
	},
	initialize: function( options ){
		this.setOptions( options );
		this.createDiv();
		this.addTheListener();
	},
	addTheListener:function(){
		var self = this;
		window.addEvents({
			"resize":function(){
				self.rePos();
			}
		})
	},
	rePos:function(){
		var self = this;
		var pos = this.div.getCoordinates();
		var fs = this.div.effects({duration:500, wait:false, transition:Fx.Transitions.Sine.easeInOut});
		var top = ((window.getScrollTop()+window.getHeight())/2-self.size.height/2).toInt();
		if(top<=0){
			top = this.options.margin;
		}
		var left =(window.getWidth()/2- self.size.width/2).toInt();
		fs.start({
			//window.getScrollTop()+window.getHeight())/2).toInt(), left:(window.getWidth()/2).toInt()}
			top:[self.pos.top, top],
			left:[self.pos.left, left]
		}),
		this.setPos({top:((window.getScrollTop()+window.getHeight())/2).toInt(), left:(window.getWidth()/2).toInt()});
	},
	setPos:function(pos){
		//var top = ((window.getScrollTop()+window.getHeight())/2).toInt();
		//var left = (window.getWidth()/2).toInt()
		this.pos = pos;
	},
	setSize:function(size){
		this.size = size;
	},
	hidden:function(){
	   var fs = this.div.effects({duration:500, wait:false, transition:Fx.Transitions.Sine.easeInOut});
	   fs.start({'opacity': [1,0]});
	},
	setHTML:function(){
	   this.div.setHTML(this.content)
	},
	show:function(){
		var self = this;
		var fs = self.div.effects({duration:500, wait:false, transition:Fx.Transitions.Sine.easeInOut});
		//alert((self.pos.top - self.size.height/2).toInt());
		var top = (self.pos.top - self.size.height/2).toInt();
		var left = (self.pos.left - self.size.width/2).toInt();
		if(top<=this.options.margin){
			top = this.options.margin;
		}
		fs.start({'opacity': [0,1],
			//top: //((window.getScrollTop()+window.getHeight())/2).toInt() +'px',
			//left://(window.getWidth()/2).toInt()+'px',
			top:[self.pos.top, top],
			left:[self.pos.left , left],
			width:[self.size.width],
			height: [self.size.height]
		}).chain(function(){
		  self.setHTML()
        });
	},
	createDiv:function(){
		var self = this;
		//alert(self.options.margin);
		var top = ((window.getScrollTop()+window.getHeight())/2).toInt() +'px';
		var left = (window.getWidth()/2).toInt()+'px';
		this.div = new Element( 'div', {
			'class':self.options.classname,
			styles:{opacity:self.options.opacity,
					display:"block",
					'z-index': 2000,
					position:"absolute",
					top: top,
					left: left,
					height:10+"px",
					width:10+'px'//(window.getWidth()/2 - self.options.left)
			}
		}).setHTML().inject(document.body);
		//this.top = new Element( 'div', {}).setHTML();
		//this.center = new Element( 'div', {}).setHTML(2);
		//this.bottom = new Element( 'div', {}).setHTML(3);
		//this.top.injectInside(this.div);
		//this.center.injectInside(this.div);
		//this.bottom.injectInside(this.div);
	}
	
});
WidgetSimpleCenterDiv.implement( new Options );


var WidgetSimpleMask = new Class({
	options: {
		v: '1.0',
		bg:"#808080",
		opacity:0.8,
		show:false
	},
	initialize: function(options ){
		this.setOptions( options );
		this.createMask();
		this.addTheListener();
	},
	addTheListener:function(){
		var self = this;
		window.addEvents({
			"resize":function(){
				self.resize();
			},
			"scroll":function(){
				self.resize();
			}
		})
	},
	resize:function(){
		var self = this;
		if(this.options.show){
			this.div.setStyles({
				height:(window.getScrollHeight().toInt() - this.options.bottom )+"px",
				width:(window.getWidth() - this.options.left)
				
			});
			//this.show()
		}
	},
	show:function(){
		var self = this;
		var fs = self.div.effects({duration: 700, wait:false, transition:Fx.Transitions.Sine.easeInOut});
		fs.start({'opacity': [0,self.options.opacity]})
		this.options.show = true;
	},
	hidden:function(){
		var self = this;
		var fs = self.div.effects({duration: 700, wait:false, transition:Fx.Transitions.Sine.easeInOut});
		fs.start({'opacity': [self.options.opacity,0]});
		this.options.show = false;
	},
	createStyle:function(){
		return {background:this.options.bg,
				opacity:0,
				display:"block",
				'z-index': 1000,
				top:'0px',
				left:'0px',
				position:"absolute",
				height:(window.getScrollHeight().toInt() - this.options.bottom )+"px",
				width:(window.getWidth() - this.options.left)
		}
	},
	createMask:function(){
		var self = this;
		this.div = new Element( 'div', {
			styles:self.createStyle()
		}).inject(document.body);
	}
});
WidgetSimpleMask.implement( new Options );