﻿/***************************************************************************************************
	Small library for works with modal windows
	by YS, 13.12.2007

CSS:
	.bgFader{position: absolute; background: black; top: 0; left: 0; width: 100%; z-index: 99998; opacity: 0.5; // filter: alpha(opacity=50);}
	.modalWindow{position: absolute; border: 2px solid black; background: white; color: black; padding: 0px; overflow: auto; z-index: 99999;}

Use this class:
	var oMsgForm = new ModalWindow('msgForm');
	if(!oMsgForm.err){
		oMsgForm.setContent('ffffuel');
		oMsgForm.show();
	}
***************************************************************************************************/
//modalAbstract.prototype = new Object();
function ModalAbstract(){

	ModalAbstract.prototype.getVisibleArea = function(){
		var windowWidth, windowHeight;
		if(window.innerWidth)// Safari, Opera, FF
			windowWidth = window.innerWidth;
		else if(document.documentElement && document.documentElement.clientWidth)// IE
			windowWidth = document.documentElement.clientWidth;
		else if(document.body)
			windowWidth = document.body.offsetWidth;
		
		if(window.innerHeight)
			windowHeight = window.innerHeight;
		else if(document.documentElement && document.documentElement.clientHeight)
			windowHeight = document.documentElement.clientHeight;
		else if(document.body)
			windowHeight = document.body.clientHeight;
		return {"width":windowWidth, "height":windowHeight};
	}

	ModalAbstract.prototype.getPageScroll = function(){
		/* scrollLeft: The distance between the horizontal scrollbar 
			with the left edge of the frame.
			scrollTop:  The distance between the vertical scrollbar
			with the top edge of the frame. 

			Get the scroll value from different browsers.
			Determine the browser type first. 
			And then get the value from the particular property.*/
		var scrollLeft, scrollTop;

		if(window.pageXOffset)
			scrollLeft = window.pageXOffset 
		else if(document.documentElement && document.documentElement.scrollLeft)
			scrollLeft = document.documentElement.scrollLeft; 
		else if(document.body)
			scrollLeft = document.body.scrollLeft; 
		
		if(window.pageYOffset)
			scrollTop = window.pageYOffset 
		else if(document.documentElement && document.documentElement.scrollTop)
			scrollTop = document.documentElement.scrollTop; 
		else if(document.body)
			scrollTop = document.body.scrollTop; 
		
		return {"left":scrollLeft, "top":scrollTop};
	}

	ModalAbstract.prototype.getDocumentArea = function(){
		var width, height;
		width = document.documentElement.clientWidth; // FF, Safari, IE
		if(width < document.body.scrollWidth) // Opera
			width = document.body.scrollWidth;
		height = document.documentElement.clientHeight; // FF, Safari, IE
		if(height < document.body.scrollHeight) // Opera
			height = document.body.scrollHeight;
		document.getElementById('debug').innerHTML += '<br />'+'getDocumentArea.width='+width+' getDocumentArea.height='+height;
		return {'width':width, 'height':height}
	}

	// add event (multybrowsing)
	ModalAbstract.prototype.addEvent = function(obj, handler, event){
		if(window.addEventListener) // Mozilla, Netscape, Firefox
			obj.addEventListener(event, handler, false);
		//this.addEvent(o, this.close, 'click');
		else {// IE
			var ev = (event.indexOf('on') == -1?'on':'') + event;
			obj.attachEvent((ev?ev:event), handler);
		}
	}

	this.browser = (window.addEventListener?'normal':'ie');
}

/***************************************************************************************************/
ModalFader.prototype = new ModalAbstract();
function ModalFader(w, h, left, top){

	ModalFader.prototype.add = function(){
		if(document.getElementById(this.id))// проверко на присутствие фейдера
			throw('Error. "modalFader" is still present.')
		if(this.browser == 'ie'){// предотвращаем дерганье в IE при прокрутке (http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/)
			oBody = document.body;
			if(!oBody.style.backgroundImage){
				oBody.style.background = 'url(/i/px.gif) no-repeat';
				oBody.style.backgroundAttachment = 'fixed';
			}
		}
		var oFader = document.body.insertBefore(document.createElement('div'), document.body.firstChild);
		this.oFader = oFader;
		this.oFader.id = this.id;
		this.oFader.className = 'bgFader';
		if(this.browser == 'normal')// фиксим, если не IE
			this.oFader.style.position = 'fixed';
		window.obj = this;
		this.paint();
	
		this.addEvent(window, function(){
			this.obj.paint();
		}, 'resize');
		if(this.browser == 'ie')
			this.addEvent(window, function(){
				this.obj.paint();
			}, 'scroll');
	}

	ModalFader.prototype.paint = function(){
		this.oFader.style.top = (this.browser == 'normal'?this.top:eval(document.body.scrollTop))+"px";//эмуляция position: fixed в IE (thx Андрюхе Шитову ;-)
		this.oFader.style.left = this.left + 'px';
		this.oFader.style.width = this.w;
		this.oFader.style.height = this.h;
	}

	this.id = 'modalFader';
	this.w = (w !== undefined?w+'px':'100%');
	this.h = (h !== undefined?h+'px':'100%');
	this.top = (top !== undefined?top:0);
	this.left = (left !== undefined?left:0);
}

/***************************************************************************************************/
ModalWindow2.prototype = new ModalAbstract();
function ModalWindow2(id, w, h, left, top){

	this.id = 'modalWindow';// id - для совместимости с старым кодом, да и мало ли, мож понадобится ;)
	var visibleArea = this.getVisibleArea();
	this.w = (w !== undefined?w:Math.ceil(visibleArea.width - (visibleArea.width * 20 / 100)))+'px';
	this.h = (h !== undefined?h:Math.ceil(visibleArea.height - (visibleArea.height * 20 / 100)))+'px';
	this.top = (top !== undefined?top:0);
	this.left = (left !== undefined?left:0);
}

/***************************************************************************************************/
ModalWindow.prototype = new ModalAbstract();
function ModalWindow(id, w, h, left, top){		
	ModalWindow.prototype.calcPositon = function(){
		var tmp;
		tmp = this.getPageScroll();
		this.scrollLeft = tmp.left;
		this.scrollTop = tmp.top;

		tmp = this.getVisibleArea();
		this.windowWidth = tmp.width;
		this.windowHeight = tmp.height;

		this.documentHeight = document.documentElement.clientHeight; // FF, Safari, IE
		if(this.documentHeight < document.body.scrollHeight) // Opera
			this.documentHeight = document.body.scrollHeight;
		
		this.left = (this.left != undefined?this.left:this.windowWidth/2 - this.w/2);
		this.top = (this.top != undefined?this.top:this.windowHeight/2 - this.h/2) + this.scrollTop;
	}

	ModalWindow.prototype.setContent = function(cnt){
		this.cnt = cnt;
	}

	ModalWindow.prototype.getCustomModalObject = function(){
		return this.oCustomModal;
	}

	ModalWindow.prototype.getModalObject = function(){
		return this.oModalWindow;
	}

	ModalWindow.prototype.getFaderObject = function(){
		return this.oBgFader;
	}

	ModalWindow.prototype.addClose = function(o){
		this.addEvent(o, this.close, 'click');
	}

	ModalWindow.prototype.showFader = function(){
		var oBgFader = document.body.insertBefore(document.createElement('div'), document.body.firstChild);
		this.oBgFader = oBgFader;
		this.oBgFader.id = 'bgFader_'+this.id;
		this.oBgFader.className = 'bgFader';
		//this.oBgFader.style.border = '1px solid red';
		this.oBgFader.style.top = '0';
		this.oBgFader.style.height = this.documentHeight + 'px';
		if(id != 'noFclose') this.addClose(this.oBgFader);// click out of window - closest modal window
	}

	ModalWindow.prototype.showModal = function(){
		// begin create modal window
		this.oModalWindow = document.body.insertBefore(document.createElement('div'), document.body.firstChild);
		this.oModalWindow.id = 'modalWindow_'+this.id;
		this.oModalWindow.className = 'modalWindow';
		this.oModalWindow.style.width = this.w + 'px';
		this.oModalWindow.style.height = this.h + 'px';
		this.positioning();
		this.oModalWindow.innerHTML = this.cnt;
		// end create modal window
	}

	ModalWindow.prototype.addCustomModal = function(o){
		this.oCustomModal = document.body.insertBefore(o, document.body.firstChild);
		return this.oCustomModal;
	}

	// show modal window
	ModalWindow.prototype.show = function(){
		this.showFader();
		this.showModal();

		//this.addEvent(window, this.zz(this), 'scroll');
	}

	// set position for modal window
	ModalWindow.prototype.positioning = function(){
		this.oModalWindow.style.left = this.left + 'px';
		this.oModalWindow.style.top = this.top + 'px';
	}

	// close modal window
	ModalWindow.prototype.close = function(){
		document.body.removeChild(document.body.firstChild.nextSibling);
		document.body.removeChild(document.body.firstChild);
	}

	// constructor *****************************************************

	this.w = (w != undefined?w:'1000');
	this.h = (h != undefined?h:'200');
	this.left = left;
	this.top = top;
	this.calcPositon();
	this.err = false;
	if(document.getElementById('modalWindow'+id) !== null)
		this.err = true;
	this.id = id;




}
