/****************************************************************************
 File			: 	modalPopup.js 
 Description	:	This script offers you a collection of basic modal popups. 
 Author			:	Gaurav Pednekar. [ E-Mail: gaurav.pednekar02@yahoo.com  ]
 License		:	Copyright (c) 2009 Gaurav Pednekar
 ****************************************************************************/

this.ModalBackground = null;
this.ModalContainer = null;
var ModalBody = null;
var ajaxHandler = null;
var tempImage;

this.showModalImg = function(imagePath, ImgTitle) {  
	this.ModalBackground = document.createElement("div");        
	this.ModalBackground.className = "modalBackground";
	this.ModalContainer = document.createElement("div");        
	this.ModalContainer.className = "modalContainer";        
	this.ModalContainer.Code = this;
	ModalBody = document.createElement("div");                
	ModalBody.className = "ModalBody";
	
	var closebtn = document.createElement("A");
	closebtn.className = "closeModal";
	closebtn.onclick = function() {
		this.parentNode.Code.closeModalPopUp();
	}
	document.body.appendChild(this.ModalContainer);
	document.body.appendChild(this.ModalContainer);
	this.ModalContainer.appendChild(closebtn);
	this.ModalContainer.appendChild(ModalBody);
		
	var width = 150;
	var height = 150;
	this.ModalContainer.style.left = calcPosX(width) + "px";
	this.ModalContainer.style.top = calcPosY(height) + "px";	
	
	//	Modal container and Modal content exact sizing.
	tempImage = new Image();
	tempImage.src = imagePath;
		
	showSlide(ModalBody,tempImage);	
}

showSlide = function(parent, img){			
	if (img.complete) {	//	Image loading completed		
		//alert('if' + img.complete);		
		var width = 600;
		var height = 472;
				
		if (img.width < width){
			width = img.width;
		}
		var	tempHeight = (img.height * width)/img.width
		if (tempHeight >  height){
			width = (width*height/tempHeight);
		}else{
			height = tempHeight;
		}		
				
		var modalContent = "<img id='imgSlide' src=" + img.src 
		modalContent += " width='" + width + "px'" ;
		modalContent += " height='" + height + "px'"; 
		modalContent += " oncontextmenu ='return false;'";
		modalContent += " />";
		
		parent.innerHTML = modalContent;
				
		if (img.width > width){
			this.ModalContainer.style.width = width;
		}else{
			this.ModalContainer.style.width = img.width;
		}
	
		//	Modal container Positioning so that image side will be displayed in exact middle of the window.
		ModalBody.style.width = width;
		ModalBody.style.height = height;
		this.ModalContainer.style.left = calcPosX(width) + "px";
		this.ModalContainer.style.top = calcPosY(height) + "px";
		
	}else{
		setTimeout('showSlide(ModalBody,tempImage)', 100);
	}
}

this.closeModalPopUp = function() {        
	if (this.ModalContainer != null) {                
		document.body.removeChild(this.ModalContainer);                
		this.ModalContainer = null;        
	}
	
	if (this.ModalBackground != null) {                
		document.body.removeChild(this.ModalBackground);                
		this.ModalBackground = null;        
	}
}

function calcPosX(width){
	var windowWidth = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		windowWidth = window.innerWidth;
	} 
	else if( document.documentElement 
		  && ( document.documentElement.clientWidth ) ) {
		//IE 6+ in 'standards compliant mode'
		windowWidth = document.documentElement.clientWidth;
	} 
	else if( document.body && ( document.body.clientWidth ) ) {
		//IE 4 compatible
		windowWidth = document.body.clientWidth;
	}
	
	var positionX = (windowWidth - (width + 15)) / 2; 
	return positionX;
}

function calcPosY(height){
	var windowHeight = 0;
	if( typeof( window.innerHeight ) == 'number' ) {
		//Non-IE
		windowHeight = window.innerHeight;
	} 
	else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		windowHeight = document.documentElement.clientHeight;
	} 
	else if( document.body && ( document.body.clientHeight ) ) {
		//IE 4 compatible
		windowHeight = document.body.clientHeight;
	}
	
	var positionY = (windowHeight - (height + 10 )) / 2;
	return positionY;
}

