if ( window.addEventListener )
{
	window.addEventListener( "load", init, false );
} 
else if( window.attachEvent )
{
	window.attachEvent( "onload", init );
}

var imgbox ;
var darkener;
var closePic;


function init()
{
  imgbox = document.getElementById("imgbox");
  darkener = document.getElementById("darkener");	
	closePic = document.getElementById("closePic");
  
  
  
  document.getElementById("accom_room_list").innerHTML = '<p id="click">Click image to enlarge:</p>' + 
            '<div id="image_description"></div><ul id="pics_row_one"><li id="display_image"></li>' +
            '<li id="room_room8" ><img src="accom_pictures/room8.jpg" alt="" id="room8_img" title="Picture of room 8"/></li>' +
            
            '<li id="room_family" class="inline"><img src="accom_pictures/family.jpg" alt="" id="family_img"/></li></ul>' +
            
            '<ul id= "pics_row_two"><li id="room_double"><img src="accom_pictures/double_superior.jpg" alt="" id="double_sup_img"/></li>' +
            '<li id="room_bridal"><img src="accom_pictures/bridal.jpg" alt="" id="bridal_img"/></li></ul>';

  document.getElementById("room8_img").style.width = "300px";
  document.getElementById("room8_img").style.height = "150px";
  document.getElementById("family_img").style.width = "300px";
  document.getElementById("family_img").style.height = "150px";
  document.getElementById("double_sup_img").style.width = "300px";
  document.getElementById("double_sup_img").style.height = "150px";
  document.getElementById("bridal_img").style.width = "300px";
  document.getElementById("bridal_img").style.height = "150px";

  //Internet Explorer fixes:
  if( navigator.appName == 'Microsoft Internet Explorer' )
  {
    //THis fix lines up the pictures properly
    var picsRowOne;
    var picsRowTwo;
    
    picsRowOne = document.getElementById('pics_row_one');
    picsRowTwo = document.getElementById('pics_row_two');
    
    picsRowOne.style.marginLeft = '-40px';
    picsRowTwo.style.marginLeft = '-30px';    
	
  }
	
  //FUNCTION CALL  
	document.getElementById("room_room8").onclick = enlarge_room8;
	document.getElementById("room_family").onclick = enlarge_family;
	document.getElementById("room_double").onclick = enlarge_double;
	document.getElementById("room_bridal").onclick = enlarge_bridal;	
	document.getElementById("click").style.fontSize = "12px";
}



function enlarge_room8()
{
  var display = '<a id="closePic">Click Anywhere to Close</a><img src="accom_pictures/room8.jpg" alt="Picture of one of our rooms." id="room8_img"/>';
  darkener.style.width = '100%';
  darkener.style.height = '100%';
  darkener.style.visibility = 'visible';
  darkener.style.MozOpacity = '0.8';
  darkener.style.position = 'fixed';
  
  imgbox.innerHTML= display; 
  imgbox.style.visibility ='visible';
  imgbox.style.width ='600px';
  imgbox.style.height ='400px';
  imgbox.style.margin ='auto';
  imgbox.style.position = 'relative';
  
  darkener.onclick = shrink;  
  imgbox.onclick = shrink;
}

function enlarge_family()
{ 
  var display = '<a id="closePic">Click Anywhere to Close</a><img src="accom_pictures/family.jpg" alt="Picture of one of our family rooms." id="family_img"/>';
  darkener.style.width = '100%';
  darkener.style.height = '100%';
  darkener.style.visibility = 'visible';
  darkener.style.MozOpacity = '0.8';
  darkener.style.position = 'fixed';
  
  imgbox.innerHTML= display;
  imgbox.style.visibility ='visible';
  imgbox.style.width ='600px';
  imgbox.style.height ='400px';
  imgbox.style.margin ='auto';
  imgbox.style.position = 'relative';
  
  darkener.onclick = shrink;
  imgbox.onclick = shrink;
}

function enlarge_double()
{
	var display = '<a id="closePic">Click Anywhere to Close</a><img src="accom_pictures/double_superior.jpg" alt="Picture of one of our double rooms." id="double_sup_img"/>';
	
  darkener.style.width = '100%';
  darkener.style.height = '100%';
  darkener.style.visibility = 'visible';
  darkener.style.MozOpacity = '0.8';
  darkener.style.position = 'fixed';
  
  imgbox.innerHTML= display;
  imgbox.style.visibility ='visible';
  imgbox.style.width ='600px';
  imgbox.style.height ='400px';
  imgbox.style.margin ='auto';
  imgbox.style.position = 'relative';
  darkener.onclick = shrink;
  imgbox.onclick = shrink;
}

function enlarge_bridal()
{
  var display = '<s id="descPic">Our Bridal Suite</a><a id="closePic">Click Anywhere to Close</a><img src="accom_pictures/bridal.jpg" alt="Picture of our bridal suite." id="bridal_img"/>';
	
  darkener.style.width = '100%';
  darkener.style.height = '100%';
  darkener.style.visibility = 'visible';
  darkener.style.MozOpacity = '0.8';
  darkener.style.position = 'fixed';
  
  imgbox.innerHTML = display;  
  imgbox.style.visibility ='visible';
  imgbox.style.width ='600px';
  imgbox.style.height ='400px';
  imgbox.style.margin = 'auto'; 
  imgbox.style.position = 'relative';
  
  darkener.onclick = shrink;
  imgbox.onclick = shrink;   
}

function shrink() {
  imgbox.style.position = 'absolute';
  imgbox.style.visibility ='hidden';
  imgbox.innerHTML = "";  
  darkener.style.width = '1px';
  darkener.style.height = '1px';
  darkener.style.visibility = 'hidden';  
}