var smoothStep = 5;
var smoothOffsetX = 0;
var smoothOffsetY = 0;
var smoothInfo;

function smooth( backgroundContainer , backgroundImage , content,width,height ){
	this.backgroundContainer = backgroundContainer;
	this.backgroundImage = backgroundImage;
	this.content = content;
	this.progress = 0;
	this.currentWidth = 0;
	this.currentHeight = 0;
	this.originalWidth =  width;
	this.originalHeight =  height;
}
function smoothPopup( obj , prefix , offsetX  , offsetY,width,height ){
	smoothOffsetX = offsetX;
	smoothOffsetY = offsetY;
	var position = findPos( obj );
	var backgroundContainer = document.getElementById( prefix + 'BackgroundContainer' );
	backgroundContainer.style.left = position[0] + "px";
	backgroundContainer.style.top = position[1] + "px";
	var backgroundImage = document.getElementById( prefix + 'BackgroundImage' );
	
	var content = document.getElementById( prefix + 'Content' );
	smoothInfo = new smooth( backgroundContainer , backgroundImage , content,width,height  );
	backgroundImage.width = '0px';
	backgroundImage.height = '0px';
	content.style.display = 'none';
	backgroundContainer.style.display = '';
	

	setTimeout(   "proceedSmooth(" + smoothStep + ")" , 10 );
}
function proceedSmooth( procent ){
	
	var newWidth = parseInt( (smoothInfo.originalWidth * procent) / 100 ); 
	var newHeight = parseInt( (smoothInfo.originalHeight * procent) / 100 );
	var deltaWidth = parseInt( ( newWidth - smoothInfo.currentWidth) /2 ); 
	var deltaHeight = parseInt( ( newHeight - smoothInfo.currentHeight) /2 );
	var position = findPos( smoothInfo.backgroundContainer ); 
	smoothInfo.backgroundContainer.style.left = (position[0]-deltaWidth + smoothOffsetX)  + "px";
	smoothInfo.backgroundContainer.style.top = (position[1] -deltaHeight+ smoothOffsetY ) + "px";
	smoothInfo.currentWidth = newWidth;
	smoothInfo.currentHeight = newHeight;
	smoothInfo.backgroundImage.width = newWidth ;
	smoothInfo.backgroundImage.height = newHeight ;
	if ( procent < 100 ){
		procent = procent + smoothStep;
		setTimeout( "proceedSmooth(" + procent + ")" , 1 );
	} else {
		smoothInfo.backgroundContainer.style.display = 'none';
		smoothInfo.content.style.display = '';
		smoothInfo.content.style.left = (position[0]-deltaWidth + smoothOffsetX)  + "px";
		smoothInfo.content.style.top = (position[1] -deltaHeight + smoothOffsetY ) + "px";
		smoothInfo.content.height = newHeight;
	}
}

function smoothHide( opacity , prefix ){
	if( opacity == 1 ){
		var backgroundContainer = document.getElementById( prefix + 'BackgroundContainer' );
		var backgroundImage = document.getElementById( prefix + 'BackgroundImage' );
		var content = document.getElementById( prefix + 'Content' );
		
		smoothInfo = new smooth( backgroundContainer , backgroundImage , content  );
		
		smoothInfo.backgroundContainer.style.display = '';
		smoothInfo.content.style.display = 'none';
		opacity = 0.5;
	}
	setOpacity(smoothInfo.backgroundContainer , opacity*10 );
	if ( opacity > 0 ){
		opacity = opacity - 0.05;
		setTimeout( "smoothHide(" + opacity + " , 'prefix')" , 40 );
	}else{
		
		smoothInfo.backgroundContainer.style.display = 'none';
		setOpacity(smoothInfo.backgroundContainer , 10 );
	}
}
function setOpacity(obj , value) {
	obj.style.opacity = value/10;
	obj.style.filter = 'alpha(opacity=' + value*10 + ')';
}