<?php
	$title = "smokinggun | SOURCE CODE";
	
	$nav_link = "/demos/index.php";
	$nav_image = "title_source.png";
	
# this should be stripped out when put on the live site
	require("../path_to_lib.php");

#
# tool for managaing catalog categories
# 

	require($path_to_lib."sg_main.php"); 		# main library

# include the html snippets for drawing the interface
	include($path_to_lib."html/public_html.php");

echo $public_header;

echo <<<HTML

<script type="text/javascript">
	
	
/*

Copyright (C) 2001 John Weir www.smokinggun.com

This code is free for use.  If possible include the copyright.

*/
	
	// define your column objects
	// for this experiment the columns will be of even width
	allCols = new Array("col0","col1");

	
	function resizeColumn()
		{
		// bug in IE 6 with the window height, only using width for now
		mod = (nW < nH) ? nW : nH;
		
		mod = nW;
		
		// this controls the level of the scale
		multi = 60;
		
		
		
		// sloppy math in here, i'm tired
		mod = Math.round(mod/multi);
		mod = mod*multi;
		
		
		for (var i=0; i < allCols.length; i++)
			{
			col = document.getElementById(allCols[i]);
			col.style.width = (mod/2.3)+"px";
			col.style.left = i*(mod/2.3)+"px";
			
			col.style.fontSize = (mod/multi)+"px";
			col.style.lineHeight = ((mod/multi)*1.2)+"px";
			
			imgs = col.getElementsByTagName("img")
			for (var x = 0; x < imgs.length; x++)
				{
				imgs[x].style.width=(mod/2.6)+"px";
				imgs[x].style.margin=((mod/2.3)-(mod/2.6))/2.3+"px";
				}
			}	
		}
	
	function resize()
		{
		// get window height: subtract 80 to account for the no scaling elements on the page
		if (window.innerHeight) nH = window.innerHeight-80;
		else nH = document.getElementById("bodyNode").offsetHeight-80;
		
		
		
		// get window width
		if (window.innerWidth) nW = window.innerWidth;
		else nW = document.getElementById("bodyNode").offsetWidth;
		
				
		resizeColumn();
			
		
		windowOnload();
		}
	windowOnload = window.onload;

	window.onload	= resize;
	window.onresize = resize;
	
	</script>

<div>
Resize your browser window to adjust the text size.
</div>
<br>
<a href="#" onclick="toggleObjectDisplay('info')">Info</a>

<fieldset  id="info">
<div class="legend">Info</div>
<p>
So someone asked if I could get the <a href="/demos/size_text.php">text sizing</a> to work with images. So here you have it.
</p>
<p>
I don't know how useful this will be, but perhaps it does have a place.  The image scaling quality varies: Mac IE is the best, Mozilla the worst. This would
of be great with Flash and SVG's, and should be possible with both those.
</p>
<ul>
	<li>Mac IE likes its text to be nested in one additional element.</li>
	<li>The lines shift some, not retaining the original line breaks.</li>
	<li>Sorry for the sloppy code, I will clean it up at some point.</li>
</ul>
</fieldset>

<style type="text/css">
#contents {position:relative;}

#col0, #col1 {display:inline; position:absolute;}

</style>


<div id="contents">
	<div id="col0" style="font-size:100%;">
	<div>
	<img src="images/img_0.gif">

	Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonumy eiusmod tempor indidunt up labore et dolore magnaaliquam erat volupat. <br>
	<br>
	Ut enim ad minimim veniami quis nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolor in reprehenderit in voluptate velit esse molestaie son consequat, vel illum dolore eu fugiat nulla pariatur. <br>
	</div>
	</div>
		<div id="col1" style="font-size:100%; ">
		<div>
	Nam liber a tempor cum soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum necessit atib saepe eveniet ut er repudiand sint et molestia non aste recusand. Itaque earund rerum hic tenetury sapiente delectus au aut prefer endis dolorib asperiore repellat. Hanc ego cum tene sentntiam, quid est cur verear ne ad eam non possing accomodare nost ros quos tu paulo ante cum memorite it tum etia ergat.
	</div>
	<img src="images/img_1.gif">
		</div>

</div>
	


HTML;

echo $public_footer;

?>

