<!-- START THE SCRIPT THAT OPENS IMAGES IN A NEW WINDOW ACCORDING TO THE SIZE OF THE IMAGE -->

<!-- Original:  Ronnie T. Moore, Editor -->
<!-- Web Site:  The JavaScript Source -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

var preview = null;
var preview2 = null;

function Start(WIDTH, HEIGHT, NAME, DesTEXT, mylink) {
/* These are the variables declared in the onClick event in the html document. This is how it is written in the html page:
<a href="../../../../websites/CAL/Microconcepts/javascript/test.html" onclick="return Start(400, 400, 'Test Window' 'Hello this is a new window', this)"> link text/image </a>. 
'this' references the href, which in this instance would be test.html. */

//START get image location/source from the href link in the html page

if (! window.focus)return true;

var href;

if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
   
//END get href

//START open new window
   
windowprops = "resizable=yes,status=yes,scrollbars=yes,left=20,top=20,width=" + (WIDTH+40) + ",height=" + (HEIGHT+100);
windowprops2 = "resizable=yes,status=yes,scrollbars=yes,left=40,top=40,width=" + (WIDTH+40) + ",height=" + (HEIGHT+100);

//The above variables contain the properties for the new window. Width & height are taken from the onClick event in the html page

text = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>";

text += "<html xmlns='http://www.w3.org/1999/xhtml'><head><title>"+ NAME +"</title>";

text += "<link href='../styleSheets/popupWindows.css' rel='stylesheet' type='text/css'>";

text += "</head><body>";

text += "<div><img src='../../../../websites/CAL/Microconcepts/javascript/" + href + "'></div>";

text += "<div id='textBox'>"+ DesTEXT +"</div>";

text += "<div><a href='javascript:window.close()' class='close_btn'>Close</a>";

text += "</div></body></html>";

/* The text variable above contains the dynamic html that will be written to the new window
It contains the variables that get info from the onClick event in the <a> tag of the html page
The style sheet & image locations are absolute because relative links only work for html files at the same level. if you have html pages that go deeper in the hierarchy, relative links don't work. */

if (preview && !(preview.closed)) 
{preview2 = window.open("","preview2", windowprops2, href);
preview2.resizeTo(WIDTH+50,HEIGHT+100);
preview2.document.open();
preview2.document.write(text);
preview2.document.close();
preview2.focus();
return false;
/* This section detects if there is a popup window already open, if so it opens another window called preview2.
The resize is necessary because after preview2 opens, all image links that are clicked on will open in preview2 and the window needs to be resized to fit the new image.
Return false is necessary so that the link only opens in the new window and not the main page. */
}
else
{preview = window.open("","preview", windowprops, href);
preview.document.open();
preview.document.write(text);
preview.document.close();
preview.focus();
return false;
}
// If there is no window already open, then preview opens.
		
}
//  END -->
