/*!
 * dialogbox 0.0.1
 * by liuyuchao
 * copyright 2015.3
 * date: wed mar 25 2015
 */

 ;(function($,window,document){

 	var pluginname = 'dialogbox',
 		defaults = {

 			width: null, //弹出层宽度
 			height: null,  //弹出层高度
 			autosize: true,  //是否自适应尺寸,默认自适应
 			autohide: false,  //是否自自动消失，配合time参数共用
 			time: 3000,  //自动消失时间，单位毫秒
 			zindex: 99999,  //弹出层定位层级
 			hasmask: false,  //是否显示遮罩层
 			hasclose: false,  //是否显示关闭按钮
 			hasbtn: false,  //是否显示操作按钮，如取消，确定
 			confirmvalue: null,  //确定按钮文字内容
 			confirm: function(){}, //点击确定后回调函数
 			cancelvalue: null,  //取消按钮文字内容
 			cancel: function(){},  //点击取消后回调函数，默认关闭弹出框
 			effect: '', //动画效果：fade(默认),newspaper,fall,scaled,flip-horizontal,flip-vertical,sign,
 			type: 'normal', //对话框类型：normal(普通对话框),correct(正确/操作成功对话框),error(错误/警告对话框)
 			title: '',  //标题内容，如果不设置，则连同关闭按钮（不论设置显示与否）都不显示标题
 			content: ''  //正文内容，可以为纯字符串，html标签字符串，以及url地址，当content为url地址时，将内嵌目标页面的iframe。

 		};

 	function dialogbox(element,options){
 		this.element = element;
 		this.settings = $.extend({}, defaults, options);
 		this.init();		
 	}
	
 	dialogbox.prototype = {	

 		//初始化弹出框
 		init: function(){
 			var that = this,
 				element = this.element;
 				
 			that.render(element);
 			that.setstyle();
 			that.show();
 			that.trigger(element);
 		},

 		//创建弹出框
 		create: function(element){
 			var that = this,
 				$this = $(element),
 				title =  that.settings.title,
 				hasbtn = that.settings.hasbtn,
 				hasmask = that.settings.hasmask,
 				hasclose = that.settings.hasclose,
 				confirmvalue = that.settings.confirmvalue,
 				cancelvalue = that.settings.cancelvalue,
 				dialoghtml = [];


 			if(!title){
 				dialoghtml[0] = '<section class="dialog-box"><div class="dialog-box-container"><div class="dialog-box-content"></div>';			
 			}else{
 				if(!hasclose){
					dialoghtml[0] = '<section class="dialog-box"><div class="dialog-box-container"><div class="dialog-box-title"><h3>'+ title + '</h3></div><div class="dialog-box-content"></div>';
 				}else{					
 					dialoghtml[0] = '<section class="dialog-box"><div class="dialog-box-container"><div class="dialog-box-title"><h3>'+ title + '</h3><span class="dialog-box-close">×</span></div><div class="dialog-box-content"></div>';
 				}
 			}

 			if(!hasbtn){
 				dialoghtml[1] = '</div></section>';
 			}else{
 				if(confirmvalue && cancelvalue){
 					dialoghtml[1] = '<div class="dialog-btn"><span class="dialog-btn-cancel">' + cancelvalue + '</span><span class="dialog-btn-confirm">' + confirmvalue + '</span></div></div></section>';
 				}else if(cancelvalue){
 					dialoghtml[1] = '<div class="dialog-btn"><span class="dialog-btn-cancel">' + cancelvalue + '</span></div></div></section>';
 				}else if(confirmvalue){
 					dialoghtml[1] = '<div class="dialog-btn"><span class="dialog-btn-confirm">' + confirmvalue + '</span></div></div></section>';
 				}else{
 					dialoghtml[1] = '<div class="dialog-btn"><span class="dialog-btn-cancel">取消</span><span class="dialog-btn-confirm">确定</span></div></div></section>';
 				}
 			}

 			if(!hasmask){
 				dialoghtml[2] = '';
 			}else{
 				dialoghtml[2] = '<div id="dialog-box-mask"></div>';
 			}

 			return dialoghtml;	
 		},

 		//渲染弹出框
 		render: function(element){
 			var that = this,
 				$this = $(element),
 				dialoghtml = that.create($this),
 				$content = that.parsecontent();
 				
 			$this.replacewith(dialoghtml[0] + dialoghtml[1]);

 			if(typeof($content) === 'object'){
 				$content.appendto('.dialog-box-content');
 			}else{
 				$('.dialog-box-content').append($content);
 			}
 			
 			$('body').append(dialoghtml[2]);
 		},

 		//解析并处理弹出框内容
 		parsecontent: function(){
 			var that = this,
 				content = that.settings.content,
 				width = that.settings.width,
 				height = that.settings.height,
 				type = that.settings.type,
 				$iframe = $('<iframe>'),
 				random = '?tmp=' + math.random(),
 				urlreg = /^(https?:\/\/|\/|\.\/|\.\.\/)/;

 			if(urlreg.test(content)){

 				$iframe.attr({
 					src: content + random,
 					frameborder: 'no',
 					scrolling: 'no',
 					name: 'dialog-box-iframe',
 					id: 'dialog-box-iframe'
 				})
 				.on('load',function(){

 					//动态自适应iframe高度;
 					var $iframe = $(window.frames['dialog-box-iframe'].document),
 						$iframebody = $(window.frames['dialog-box-iframe'].document.body),
 						iframewidth = $iframe.outerwidth() - 8,
 						iframeheight = $iframe.outerheight() - 16,
 						$dialogbox = $('.dialog-box'),
 						$content = $('.dialog-box-content'),
 						$container = $('.dialog-box-container');

 						dialogboxwidth = iframewidth + 40;
 						dialogboxheight = iframeheight + 126;
 						
 					if(that.settings.autosize){	
 						$(this).width(iframewidth);
 						$(this).height(iframeheight);

 						$iframebody.css({
 							margin: '0',
 							padding: '0'
 						});

 						$content.css({
 							width: iframewidth + 'px',
 							height: iframeheight + 'px'
 						});

 						$container.css({
 							width: dialogboxwidth + 'px',
 							height: dialogboxheight + 'px'
 						});

 						$dialogbox.css({
 							width: dialogboxwidth,
 							height: function(){
 								if(type === '' || type === 'normal'){
 									return dialogboxheight + 'px';
 								}else if(type === 'error' || type === 'correct'){
 									dialogboxheight = dialogboxheight + 8;
 									return dialogboxheight + 'px';
 								}	
 							},
 							'margin-top': function(){
 								if(type === '' || type === 'normal'){
 									return -math.round(dialogboxheight/2) + 'px';
 								}else if(type === 'error' || type === 'correct'){
 									dialogboxheight = dialogboxheight + 4;
 									return -math.round(dialogboxheight/2) + 'px';
 								}	
 							},
 							'margin-left': -math.round(dialogboxwidth/2) + 'px'
 						});

 					}else{
 						$(this).width(that.settings.width - 40);
 						$(this).height(that.settings.height - 126);
 					}
 				});
				return $iframe;
 			}else{
 				return content;
 			}
 		},

 		//显示弹出框
 		show: function(){
 			$('.dialog-box').css({display:'block'});

 			settimeout(function(){
 				$('.dialog-box').addclass('show');
 			},50)

 			$('#dialog-box-mask').show();
 		},

 		//隐藏弹出框
 		hide: function(element){
 			var $this = $(element),
 				$dialogbox = $('.dialog-box'),
 				$iframe = $('#dialogbox-box-iframe');

 			$dialogbox.removeclass('show');

 			settimeout(function(){
 				if($iframe){
 					$iframe.attr('src','_blank');
 				}

 				$dialogbox.replacewith('<div id="' + $this.attr('id') + '"></div/>');
 				$('#dialog-box-mask').remove();
 			},150)
 		},

 		//设置弹出框样式
 		setstyle: function(){
 			var that = this,
 				$dialog = $('.dialog-box'),
 				$container = $('.dialog-box-container'),
 				$content = $('.dialog-box-content'),
 				$mask  = $('#dialog-box-mask'),
 				type = that.settings.type,
 				effect = 'effect';

 			//弹出框外框样式
 			$dialog.css({
 				width: function(){
 					if(that.settings.width){
 						return that.settings.width + 'px';
 					}else{
 						return;
 					}
 				},
 				height: function(){
 					if(that.settings.height){
 						if(type === '' || type === 'normal'){
 							return that.settings.height + 'px';
 						}else if(type === 'error' || type === 'correct'){
 							return that.settings.height + 4 + 'px';
 						}
 					}else{
 						return;
 					}
 				},
 				'margin-top': function(){
 					var height;
 					if(type === '' || type === 'normal'){
 						height = that.settings.height;
 					}else if(type === 'error' || type === 'correct'){
 						height = that.settings.height + 4;
 					}
 					return -math.round(height/2) + 'px';
 				},
 				'margin-left': function(){
 					var width = $(this).width();
 					return -math.round(width/2) + 'px';
 				},
 				'z-index': that.settings.zindex
 			});

 			//弹出框内层容器样式
 			$container.css({
 				width: function(){
 					if(that.settings.width){
						return that.settings.width + 'px';
 					}else{
 						return;
 					}
 				},
 				height: function(){
 					if(that.settings.height){
 						return that.settings.height + 'px';
 					}else{
 						return;
 					}
 				},
 			});

 			//弹出框内容样式
 			$content.css({
 				width: function(){
 					if(that.settings.width){
 						return that.settings.width - 40 + 'px';
 					}else{
 						return;
 					}
 				},
 				height: function(){
 					if(that.settings.height){
 						return that.settings.height - 126 + 'px';
 					}else{
 						return;
 					}
 				}
 			});

 			//遮罩层样式
 			$mask.css({
 				height: $(document).height() + 'px'
 			});
 		

 			//判断弹出框类型
 			switch(that.settings.type){
 				case 'correct':
 					$container.addclass('correct');
 					break;
 				case 'error':
 					$container.addclass('error');
 					break;
 				default:
 					$container.addclass('normal');;
 					break;
 			}

 			//弹出框多种动画效果
 			switch(that.settings.effect){
 				case 'newspaper':
 					$dialog.addclass(effect + '-newspaper');
 					break;
 				case 'fall':
 					$dialog.addclass(effect + '-fall');
 					break;
 				case 'scaled':
 					$dialog.addclass(effect + '-scaled');
 					break;
 				case 'flip-horizontal':
 					$dialog.addclass(effect + '-flip-horizontal');
 					break;
 				case 'flip-vertical':
 					$dialog.addclass(effect + '-flip-vertical');
 					break;
 				case 'sign':
 					$dialog.addclass(effect + '-sign');
 					break;
 				default:
 					$dialog.addclass(effect + '-fade');
 					break;
 			}

 		},

 		//弹出框触屏器(系列事件)
 		trigger: function(element,event){
 			var that = this,
 				$this = $(element);

 			$('.dialog-box-close,#dialog-box-mask,.dialog-btn-cancel,.dialog-btn-confirm').on('click',function(){
 				that.hide($this);
 			});

 			$(document).keyup(function(event){
 				if(event.keycode === 27){
 					that.hide($this);
 				}
 			});

 			if(that.settings.autohide){
 				settimeout(function(){
 					that.hide($this);
 				},that.settings.time)
 			}

 			if($.isfunction(that.settings.confirm)){
 				$('.dialog-btn-confirm').on('click',function(){
 					that.settings.confirm();
 				})
 			}

 			if($.isfunction(that.settings.cancel)){
 				$('.dialog-btn-cancel').on('click',function(){
 					that.settings.cancel();
 				})
 			}

 		}

 	};

 	$.fn[pluginname] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginname)) {
                $.data(this, "plugin_" + pluginname, new dialogbox(this, options));			
			}
        });
		return this;
    };
	
 })(jquery,window,document)