/**
 * sns 浮出层体系
 * author zhangquan
 */


(function(){
		  
	var Class=SNS.sys.Class,JsonHtml=SNS.sys.JsonHtml,Dom=YAHOO.util.Dom,Event=YAHOO.util.Event;
	

	var Panel=new Class({
						  
		initialize:function(html,config){
			this.config={
				width:"350px",
				height:"",
				className:"panel",
				zIndex:999,
				top:"0px",
				left:"0px",
				opacity:0,
				
				state:"hide",
				
				iframeShim:true,
				alphaShim:false,
				
				hideHandle:true,
				blurHide:false,

				container:document.body,
			
				onShow:function(){},
				onHide:function(){},
				onRemove:function(){}
			}
		
			this.build(html,config);
			
		},
		
		build:function(html,config){
			this.modifyConfig(config);
			this.createHtml(html);
			
			this.attach();
			
			this.matchCoor(this.iframeShim,this.container);
			this.matchCoor(this.alphaShim,this.container);
			
			if(this.config.state=="hide"){
				this.container.style.display="none";
			}
		},
		
		modifyConfig:function(config){
			Class.mixin(this.config,config);
		},
		
		htmlConfig:function(html,style){
			var iframeShim={},alphaShim={}, hideHandle={};
	
			if (this.config.iframeShim) {
				 iframeShim={iframe:{className:"iframeShim",frameborder:0,style:style.iframeShim},ref:"iframeShim"};
			 }
			 
			if (this.config.alphaShim) {
				 alphaShim={div:{className:"alphaShim",style:style.alphaShim},ref:"alphaShim"};
			 }
			 
			if(this.config.hideHandle){
				hideHandle={span:{className:"hide-handle sns-icon icon-del-nob",style:style.hide},ref:"hideHandle"};
			}	
			
			return	{div:{className:this.config.className,style:style.container},ref:"container",">>":[
						iframeShim,
						alphaShim,
						{div:{className:"panel-main-content",style:style.mainContent},ref:"mainContent",">>":[
							{div:{className:"panel-content",style:style.content},ref:"content",">>":html},
							hideHandle
						]}
					]};
		}, 
		
		styleConfig:function(){
			
			var style={
				container:{
					top:this.config.top,
					left:this.config.left,
					position:"absolute",
					zIndex:this.config.zIndex,
					width:this.config.width,
					height:this.config.height
				},
				
				mainContent:{
					position:"relative",
					zIndex:15
				}
			}
				
			if(this.config.alphaShim){
				style.alphaShim={
					position:"absolute",
					top:"0px",
					left:"0px",
					zIndex:5,
					opacity:this.config.opacity,
					filter:"alpha(opacity="+this.config.opacity*100+")",
					backgroundColor:"#000"
				}
			};
			
			if(this.config.iframeShim){
				style.iframeShim={

					position:"absolute",
					top:"0px",
					left:"0px",
					zIndex:4,
					opacity:0,
					filter:"alpha(opacity=0)"
				}
			};
			
			
			if(this.config.hideHandle){
				style.hide={
					display:"block",
					width: "10px",
       	 			height: "10px",
        			position: "absolute",
       				top: "15px",
       				right: "15px",
					cursor:"pointer",
					zIndex:20
				}
			}
			
			return style;
			
		},
		
		createHtml:function(html){
			var self=this;
			if(html.nodeType){
				this.container=this;
				return ;
			}
			
			var jsonHtml=this.htmlConfig(html,this.styleConfig());
			
			document.body.insertBefore(JsonHtml.compose.call(this,jsonHtml), document.body.childNodes[0]);	
			
			if(this.config.documentShim){
				this.documentShim=new SNS.sys.DocumentShim();
			}
			
		},
		matchCoor:function(node,relNode){
			var state=this.container.style.display;
			this.container.style.display="block";
			if(node)node.style.height=relNode.offsetHeight+"px";
			if(node)node.style.width=relNode.offsetWidth+"px";
			this.container.style.display=state;
		},
	
		attach:function(){
			if(this.config.hideHandle)Event.on(this.hideHandle, 'click', this.hide, this, true);
			if(this.config.blurHide){
				Event.on(this.mainContent,"click",function(){this.eventPassBy=true;},this,this);
				Event.on(document,"click",function(){if(!this.eventPassBy)this.hide();this.eventPassBy=null;},this,this);
			}
			
		},
		
		show:function(){
			this.config.state="show";
			this.container.style.display="block";
			if(this.config.documentShim){
				this.documentShim.show();
			}
			this.config.onShow.apply(this,arguments);
			
			
		},
	
		hide:function(){
			this.config.state="hide";
			this.container.style.display="none";
			if(this.config.documentShim){
				this.documentShim.hide();
			}
			this.config.onHide.apply(this,arguments);
			
		},
		
		remove:function(){
			this.container.parentNode.removeChild(this.container);
			if(this.config.documentShim){
				this.documentShim.remove();
			}
			this.config.onRemove.apply(this,arguments);
		},
		
		
		addEvent:function(className,tag,type,fun){
			
			var childs=Dom.getElementsByClassName(className, tag,this.container);
			for(var i=0;i<childs.length;i++){
				Event.addListener(childs[i], type,fun,childs[i],this);
			}
		}
	});
	

	var CenterPanel=new Class({
							  
		extend:Panel,
		
		initialize:function(html,config){
			this.parent(html,config);
		},
		
		modifyConfig:function(config){
			this.config.opacity=0;
			this.config.alphaShim=true;
			this.config.hideHandle=true;
			this.config.state="show";
			this.parent(config);
		},
		
		styleConfig:function(){
			var style=this.parent();
			style.container={
				width: "100%",
       	 		height: "100%",
        		position: "fixed",
       			top: "0px",
       			left: "0px",
				zIndex:this.config.zIndex


			};
			Class.mixin(style.mainContent,{
				margin:"auto",
				width:this.config.width
			})
			
			return style;
			
		},
		createHtml:function(html){
			
			this.parent(html);
			var self=this;
			
			if (6 == YAHOO.env.ua.ie) {
				
				this.container.style.position="absolute";
			  var resize = function(e) {
				  
                    var offset = document.documentElement.scrollTop || document.body.scrollTop;
					
                    var totalHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

					Dom.setStyle(self.container, 'width',  (document.documentElement.clientWidth  || document.body.clientWidth) + 'px');
				 	Dom.setStyle(self.container, 'height', Dom.getViewportHeight() + 'px');
                    Dom.setStyle(self.container, 'top', offset + 'px');
                    
                    Dom.setStyle(self.container, 'zoom', '1');
					Dom.setStyle(self.container, 'zoom', '');
                }
				
				resize();
                Event.on(window, 'scroll', resize, this, true);
                Event.on(window, 'resize', resize, this, true);
			 }
			this.mainContent.style.top=(this.container.offsetHeight-this.mainContent.offsetHeight)/2+"px";
		}
		
	});
	
	var NearbyPanel=new Class({
		extend:Panel,
		
		initialize:function(el,html,config){
			
			this.el=el;
			this.parent(html,config);
		},
		modifyConfig:function(config){
			this.config.coordinate=[3,4];
			this.config.hideHandle=false;
			this.config.blurHide=true;
			this.parent(config);
		},
		createHtml:function(html){
			this.parent(html);
			this.place();
		},
		/*
		* 定位
		* @coordinate ｛array｝代表坐标位置 ,coordinate[0]：以relativeEl中心点为原点的coordinate[0]象限内的顶角
		*                                    coordinate[1]：以coordinate[0]所代表的顶角为中心点的coordinate[1]象限区域        
		*/
		place:function(){
			
			

			var position=this.getCoordinate(this.el);
			
			this.container.style.left=position.x+"px";
			this.container.style.top=position.y+"px";
			return this;
			
			
		},
		
		//计算坐标
		getCoordinate:function(){
			
			var coo=this.config.coordinate;
			var pointPosition=this.getPointPosition(this.el,coo[0]);
			this.container.style.display="block";
			
			
			var h=this.container.offsetHeight,w=this.container.offsetWidth;
			this.container.style.display="none";
			var area=[[0,-h],[-w,-h],[-w,0],[0,0]];
			
			var y=pointPosition.y+area[coo[1]-1][1];
			var x=pointPosition.x+area[coo[1]-1][0];
			return {x:x,y:y};
			
			
			
		},
		//计算顶角坐标
		getPointPosition:function(el,point){
			
			var p =Dom.getXY(el);
			p={x:p[0],y:p[1]};
			
			switch(point){
			case 1:p.x+=el.offsetWidth;break;
			case 2:break;
			case 3:p.y+=el.offsetHeight;break;
			case 4:p.y+=el.offsetHeight;p.x+=el.offsetWidth;break;
			}
			
			return p;
		},
		attach:function(){
			this.parent();
			Event.on(this.el, 'click', function(){this.show(),this.eventPassBy=true}, this, true);

		}
	});
	
	
	
	var snsPanel=function(html,config){
		var html='<div class="sns-panel-wrap"></div><div class="sns-panel"><div class="sns-panel-content">'+html+'</div></div>'
		var panel=new Panel(html,config);
		var wrap=Dom.getElementsByClassName("sns-panel-wrap","div",panel.content)[0];

		panel.matchCoor(wrap,panel.mainContent);
		return panel;
	}
	
	var snsNearbyPanel=function(el,html,config){
		var html='<div class="sns-panel-wrap"></div><div class="sns-panel"><div class="sns-panel-content">'+html+'</div></div>'
		var panel=new NearbyPanel(el,html,config);
		var wrap=Dom.getElementsByClassName("sns-panel-wrap","div",panel.content)[0];
		panel.matchCoor(wrap,panel.mainContent);
		return panel;
	}
	
	var snsCenterPanel=function(html,config){
		var html='<div class="sns-panel-wrap"></div><div class="sns-panel"><div class="sns-panel-content">'+html+'</div></div>'
		var panel=new CenterPanel(html,config);
		var wrap=Dom.getElementsByClassName("sns-panel-wrap","div",panel.content)[0];

		panel.matchCoor(wrap,panel.mainContent);

		return panel;	
	}
	
	var snsDialog=function(parms){
		var config={
			title:"小提示",
			content:"dialog",
			hideHandle:true,
			width:"350px",
			confirmBtn:function(){
				this.hide();
			},
			cancelBtn:function(){
				this.hide();
			}	
		}
		SNS.sys.Class.mixin(config,parms);
		var btnHtml='<div class="buttons">';
		
		if(config.confirmBtn){
			btnHtml+='<button class="confirm"><span>确定</span></button>'
		}
		
		if(config.cancelBtn){
			btnHtml+='<button class="cancel"><span>取消</span></button>'
		}
		
		btnHtml+="</div>";
		var newHtml='<div class="hd"><h3>'+config.title+'</h3></div>'+
						'<div class="bd">'+config.content+'</div>'+
 						'<div class="ft">'+btnHtml+'</div>'+
    					'<a href="#" title="关闭此窗口" class="btn-close"></a></div>';
		var panel=SNS.sys.snsCenterPanel(newHtml,config);
		if(config.confirmBtn){
			panel.addEvent("confirm","button","click",config.confirmBtn);
		}
		if(config.cancelBtn){
			panel.addEvent("cancel","button","click",config.cancelBtn);
		}
		return panel;
		
		
	}
	
	var DocumentShim=new Class({
		initialize:function(config){
			this.config={
				opacity:0,
				zIndex:998
			}
			
			Class.mixin(this.config,config);
			this.build();
			
			
		},
		build:function(){
			var w=Dom.getDocumentWidth()+"px";
			var h=Dom.getDocumentHeight()+"px";
			this.mask=document.createElement("div");
			this.mask.className="document-shim";
			this.mask.innerHTML='<iframe height="'+h+'" frameborder="0" width="'+w+'" style="position: absolute; top: 0pt; left: 0pt; z-index: 1;"></iframe>';
			var  style=this.mask.style;
			var newStyle={
				top:"0",
				left:"0",
				position:"absolute",
				zIndex:this.config.zIndex,
				width:w,
				height:h,
				overflow:"hidden",
				backgroundColor:"#000",
				opacity:this.config.opacity,
				filter:"alpha(opacity="+this.config.opacity+")"
			}
			Class.mixin(style,newStyle);
			document.body.insertBefore(this.mask, document.body.childNodes[0]);
			this.mask,style.display="none";
			
		},
		show:function(){
			this.mask.style.display="block";
		},
		hide:function(){
			this.mask.style.display="none"
		},
		remove:function(){
				this.mask.parentNode.removeChild(this.mask);
		}
		
		
	})
	
	
	
	
	SNS.sys.Panel=Panel;
	SNS.sys.CenterPanel=CenterPanel;
	SNS.sys.NearbyPanel=NearbyPanel;
	SNS.sys.snsPanel=snsPanel;
	SNS.sys.snsCenterPanel=snsCenterPanel;
	SNS.sys.snsNearbyPanel=snsNearbyPanel;
	SNS.sys.snsDialog=snsDialog;
	SNS.sys.DocumentShim=DocumentShim;


	
	
})();