function starter(){
	showDiv(null,'divLogin',true);
}

function showDiv(imagesrc,divid,vis) { 
// First, determine how much the visitor has scrolled

var scrolledX, scrolledY; 
if( self.pageYOffset ) { 
scrolledX = self.pageXOffset; 
scrolledY = self.pageYOffset; 
} else if( document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft) ) { 
scrolledX = document.documentElement.scrollLeft; 
scrolledY = document.documentElement.scrollTop; 
} else if( document.body ) { 
scrolledX = document.body.scrollLeft; 
scrolledY = document.body.scrollTop; 
}


// Next, determine the coordinates of the center of browser's window

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; 
}
var Yheight;
var Xwidth;
var i;

if(imagesrc != null){
	var newImg = new Image();
	newImg.src = imagesrc;
	//alert(imagesrc);
	Yheight = newImg.height;
	Xwidth = newImg.width;

	i=document.getElementById("ImgProduct");
	i.src = imagesrc;
}
else{
	i = document.getElementById(divid);	 	
	Yheight = parseInt(i.style.height);
	Xwidth = parseInt(i.style.width);
}
        
// Xwidth is the width of the div, Yheight is the height of the 
// div passed as arguments to the function: 
var leftOffset = scrolledX + (centerX - Xwidth) / 2; 
var topOffset = scrolledY + (centerY - Yheight) / 2; 
// The initial width and height of the div can be set in the 
// style sheet with display:none; divid is passed as an argument to // the function 
var o=document.getElementById(divid); 
var r=o.style;
r.display = "none";

if (vis) {
        r.zIndex = 100;
        r.position='absolute'; 
        r.top = topOffset + 'px'; 
        r.left = leftOffset + 'px';
        r.width = Xwidth+30;
        r.height = Yheight+50;
        r.display = "block";
        grayOut(true);
     }
else {
        r.display = 'none';
        grayOut(false);
     }
} 
function hideDropdown(vis) {
    var list = document.getElementsByTagName("select");
    for (i = 0; i < list.length; i++) {
        list[i].style.visibility = vis;
    }
}
function grayOut(vis, options) {
    // Pass true to gray out screen, false to ungray  
    // options are optional.  This is a JSON object with the following (optional) properties  
    // opacity:0-100         
    // Lower number = less grayout higher = more of a blackout   
    // zindex: #             
    // HTML elements with a higher zindex appear on top of the gray out  
    // bgcolor: (#xxxxxx)    
    // Standard RGB Hex color code  
    // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});  
    // Because options is JSON opacity/zindex/bgcolor are all optional and can appear  
    // in any order.  Pass only the properties you need to set.  
    var options = options || {};
    var zindex = options.zindex || 50;
    var opacity = options.opacity || 50;
    var opaque = (opacity / 100);
    var bgcolor = options.bgcolor || '#000000';
    var dark = document.getElementById('darkenScreenObject');
    if (!dark) {
        // The dark layer doesn't exist, it's never been created.  So we'll    
        // create it here and apply some basic styles.    
        // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917    
        var tbody = document.getElementsByTagName("body")[0];
        var tnode = document.createElement('div');           // Create the layer.        
        tnode.style.position = 'absolute';                 // Position absolutely        
        tnode.style.top = '0px';                           // In the top        
        tnode.style.left = '0px';                          // Left corner of the page        
        tnode.style.overflow = 'hidden';                   // Try to avoid making scroll bars                    
        tnode.style.display = 'none';                      // Start out Hidden        
        tnode.id = 'darkenScreenObject';                   // Name it so we can find it later            
        tbody.appendChild(tnode);                            // Add it to the web page    
        dark = document.getElementById('darkenScreenObject');  // Get the object.  
    }
    if (vis) {        
        // Calculate the page width and height     
        var scrolledX, scrolledY; 
		if( self.pageYOffset ) { 
		scrolledX = self.pageXOffset; 
		scrolledY = self.pageYOffset; 
		} else if( document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft) ) { 
		scrolledX = document.documentElement.scrollLeft; 
		scrolledY = document.documentElement.scrollTop; 		
		} else if( document.body ) { 
		scrolledX = document.body.scrollLeft; 
		scrolledY = document.body.scrollTop; 
		}
        var pageWidth, pageHeight; 
        if( self.innerHeight ) 
        { 
            pageWidth = self.innerWidth; 
            pageHeight = self.innerHeight; 
        }
        else if( document.documentElement && document.documentElement.clientHeight ) 
             { 
                   pageWidth = document.documentElement.clientWidth; 
                   pageHeight = document.documentElement.clientHeight; 
             }
             else if( document.body ) 
                  { 
                      pageWidth = document.body.clientWidth; 
                      pageHeight = document.body.clientHeight; 
                  }
        pageWidth += scrolledX;
        pageHeight += scrolledY;
        //set the shader to cover the entire page and make it visible.
        dark.style.opacity = opaque;
        dark.style.MozOpacity = opaque;
        dark.style.filter = 'alpha(opacity=' + opacity + ')';
        dark.style.zIndex = zindex;
        dark.style.backgroundColor = bgcolor;
        dark.style.width = pageWidth;
        dark.style.height = pageHeight;
        dark.style.display = 'block';
        //document.body.style.overflow =  'hidden';
        hideDropdown("hidden");        
    } else {
        dark.style.display = 'none';
        //document.body.style.overflow =  'auto'; 
        hideDropdown("visible");
    }
}
function bodyResized() {
    var dark = document.getElementById('darkenScreenObject');
    if (dark) 
    {
        var scrolledX, scrolledY; 
		if( self.pageYOffset ) 
		{ 
		  scrolledX = self.pageXOffset; 
		  scrolledY = self.pageYOffset; 
		} 
		else if( document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft) ) 
		{ 
		  scrolledX = document.documentElement.scrollLeft; 
		  scrolledY = document.documentElement.scrollTop; 		
		}
		else if( document.body ) 
		{ 
		  scrolledX = document.body.scrollLeft; 
		  scrolledY = document.body.scrollTop; 
		}
        var pageWidth, pageHeight; 
        if( self.innerHeight ) 
        { 
          pageWidth = self.innerWidth; 
          pageHeight = self.innerHeight; 
        }
        else if( document.documentElement && document.documentElement.clientHeight ) 
        { 
          pageWidth = document.documentElement.clientWidth; 
          pageHeight = document.documentElement.clientHeight; 
        }
        else if( document.body ) 
        { 
          pageWidth = document.body.clientWidth; 
          pageHeight = document.body.clientHeight; 
        }
        pageWidth += scrolledX;
        pageHeight += scrolledY;
        dark.style.width = pageWidth;
        dark.style.height = pageHeight;
    }
    // Center the Product Image
    var product = document.getElementById('productImage');
    if (product) 
    {
      var scrolledX, scrolledY; 
      if( self.pageYOffset ) 
      { 
        scrolledX = self.pageXOffset; 
        scrolledY = self.pageYOffset; 
      }
      else if( document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft) ) 
      { 
        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; 
      }
      var leftOffset = scrolledX + (centerX - parseInt(product.style.width)) / 2; 
      var topOffset = scrolledY + (centerY - parseInt(product.style.height)) / 2;      
      var r = product.style;      
      r.top = topOffset + 'px'; 
      r.left = leftOffset + 'px';                
   }
}