// Browser safe opacity handling function

//Global Variables;
var popDivWidth, popDivHeight;

function setOpacity( value ) {
 document.getElementById("styled_popup").style.opacity = value / 10;
 document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function setOverlayOpacity( value ) {
 document.getElementById("grey_overlay").style.opacity = value / 10;
 document.getElementById("grey_overlay").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeInMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ )
   setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}
function fadeInOverlay() {
 for( var i = 0 ; i <= 75 ; i++ )
   setTimeout( 'setOverlayOpacity(' + (i / 10) + ')' , 8 * i );
}
function fadeOutMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ ) {
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
 }
 for( var i = 35 ; i <= 100 ; i++ ) {
   setTimeout( 'setOverlayOpacity(' + (10 - i / 10) + ')' , 8 * i );
 }
 setTimeout('closeMyPopup()', 800 );
}
function closeMyPopup() {
 document.getElementById("styled_popup").style.display = "none"
 document.getElementById("grey_overlay").style.display = "none"
}
//function fireMyPopup(url) {
function fireMyPopup(url, divWidth, divHeight) {
 setOpacity( 0 );
 document.getElementById("full_blog_pic").src = url;
 popDivWidth = divWidth;
 popDivHeight = divHeight;
 //document.getElementById("styled_popup").style.width = divWidth + "px";
 //document.getElementById("styled_popup").style.height = divHeight + "px";
 //alert("Set width(" + divWidth + "): " + document.getElementById("styled_popup").style.width);

 myPopupRelocate();
 document.getElementById("styled_popup").style.display = "block";
 document.getElementById("grey_overlay").style.display = "block";
 myOverlayRelocate();
 fadeInMyPopup();
 fadeInOverlay();
 document.body.onscroll = myOverlayRelocate;
 window.onscroll = myOverlayRelocate;

 //document.body.onscroll = myPopupRelocate;
 //window.onscroll = myPopupRelocate;
}
function myOverlayRelocate()
{
 var scrolledX, scrolledY;
 if( self.pageYOffset ) {
   scrolledX = self.pageXOffset;
   scrolledY = self.pageYOffset;
 } else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
   scrolledY = document.documentElement.scrollTop;
 } else if( document.body ) {
   scrolledX = document.body.scrollLeft;
   scrolledY = document.body.scrollTop;
 }

 document.getElementById("grey_overlay").style.top = scrolledY + "px";
 document.getElementById("grey_overlay").style.left = scrolledX + "px";
}
function myPopupRelocate() {
 var scrolledX, scrolledY;
 if( self.pageYOffset ) {
   scrolledX = self.pageXOffset;
   scrolledY = self.pageYOffset;
 } else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
   scrolledY = document.documentElement.scrollTop;
 } else if( document.body ) {
   scrolledX = document.body.scrollLeft;
   scrolledY = document.body.scrollTop;
 }

 var centerX, centerY;
 if( self.innerHeight ) {
   centerX = self.innerWidth;
   centerY = self.innerHeight;
 } 
 else if( document.documentElement && document.documentElement.clientHeight ) {
   centerX = document.documentElement.clientWidth;
   centerY = document.documentElement.clientHeight;
 } else if( document.body ) {
   centerX = document.body.clientWidth;
   centerY = document.body.clientHeight;
 }

 if ((scrolledX + (centerX - popDivWidth) / 2) > 0)
 {
   var leftOffset = scrolledX + (centerX - popDivWidth) / 2;
 }
 else
 {
   var leftOffset = 0;
 }
 if ((scrolledY + (centerY - popDivHeight) / 2) > 0)
 {
   var topOffset = scrolledY + (centerY - popDivHeight) / 2;
 }
 else
 {
   var topOffset = 0;
 }

 document.getElementById("styled_popup").style.top = topOffset + "px";
 document.getElementById("styled_popup").style.left = leftOffset + "px";
}