<?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" src="clippings.js"></script>

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

	#clippingsMenu, #content {position:absolute; margin-top:20px}
	
	#sampleContent {left:230px; position:absolute}
	
	/*
	Holds the chosen/active Clippings and the Clippings description if empty
	*/
	#clippingsContainer{
		position:relative; 
		width:200px; 
		height:100%; 
		overflow:auto; 
		border:1px #000000 solid; padding:5px}

	#clippingsContainer A{
		display:block;}
	
	/*
	Controls for the active Clippings (Clear Read, Clear All, Next Unread, etc) are housed here
	*/
	#clippingControls{width:200px; border:1px #000000 solid; padding:5px}
	#clippingControls A {display:block; font-weight:bold}
	
	/*
	An active Clipping located in the ClippingsContainer 
	*/
	.clippingItem, .clippingItem:visited, .clippingItemRead  {color:#000000; display:block;}
	
	.clippingItemRead, .clippingItemRead:visited {color:#999999}
	.clippingItemRead:hover { color:#FFFF00;}
	
	/*
	The icon for Clippings
	*/
	.clippingIcon {color:#FFFFFF; background-color:#000000; font:16px arial; position:relative; top:1px; line-height:12px; font-weight:bold; cursor:move}

</style>


Clippings add a method of collecting links on a site for later browsing. First used at <a href="http://www.iht.com">IHT.com</a> and also in use at <a href="http://www.threeoh.com">Three Oh</a> (called Excerpts), they function like a shopping basket for links or other URI addressed data.  <i>Cookies are required.</i><br><br>

<a href="#" onclick="toggleObjectDisplay('info')">Info</a> |
<a href="#" onclick="toggleObjectDisplay('source')">Source</a> |
<a href="/perm/gnu.php">License</a>


<fieldset  id="info">
<div class="legend">Info</div>
Clippings were created with the intent to allow a user to browse data, such as headlines, and select articles for later reading.  
Current methods of navigating a web site force users to follow one path, unless the user opens different paths in multiple windows.  This is not an 
elegant solution. Clippings attempts to provide an elegant solution to a less linear browsing experience.
<br><br>
<b>Notes</b>
<ul>
	<li>
	Clipping ID's must be unique across a domain.
	</li>
	<li>
	Clippings may repeat on a page.  In this example Three Oh is repeated twice.  The system finds duplicates.
	</li>
	<li>
	<b>You do not add an event to the HTML tag for a Clipping icon. The script automates this.</b>
	</li>
	<li>
	Cookies are required. An alert will be sent for systems without cookies.
	</li>
	<li>
	This does not include a system for generating the Clipping ID's or code.  An example of such a system would be a PHP rendering system hooked up to a database, using a Clipping's unique database id as the javascript/HTML id.
	</li>
	<li>
	This script is copyrighted and released under the GPL License.  You are free to use it, but you must preserve the copyright and follow the license.  If there are any questions email <a href="mailto:$EMAIL">$EMAIL</a>
	</li>
	<li>
	See the comments in the file clippings.js for additional information. Also examine the style's used on this page for sample styles for the Clippings Container.
	</li>
</ul>
<p>&nbsp;</p>
<p>
<b>Changes</b>
</p>
<p>
<b>version 1.01</b>: changes the style sheet some to fix a display error in Mozilla .9.3.  Added #clippingsContainer A style.  There
are still some minor display problems in Moz .9.3, but I believe these are bugs in Moz, not the clippings.
</p>

<p>&nbsp;</p>
<b>Syntax</b>
	<blockquote>
	<b>HTML</b><br><br>
	<i>&lt;a id="<b>clippingId</b>" class="clippingIcon"&gt;+&lt;/a&gt;&lt;b&gt;<b>clippingName</b>&lt;/b&gt;</i>
	<br><br>
	For Example:
	<i>
	&lt;a id="clp1" class="clippingIcon"&gt;+&lt;/a&gt;&lt;b&gt;Three Oh&lt;/b&gt;
	</i><br><br>
	
	<b>Javascript</b><br><br>

	<i>allClippings[allClippings.length] =  new Clipping(<b>clippingId</b>,"<b>clippingName</b>","<b>clippingUrl</b>");</i>

	<br><br>
	For Example: 
	<i>
	allClippings[allClippings.length] =  new Clipping(1,"Three Oh","http://www.threeoh.com");
	</i>
	
	</blockquote>

<p><b>Clipping Object</b></p>
The Clipping Object can be extended to include additional meta data.  The below is the required data:

	<pre>
	function Clipping(id,name,URL, read)
	{
	this.id = id;
	this.name = name;
	this.URL = URL;
	this.read = read;
	this.clicked = markRead;
	}
	</pre>

</fieldset>

<fieldset id="source">
<div class="legend">Source</div>
Click to load or download <a href="clippings.js">clippings.js</a><br>
<samp>
</samp>
</fieldset>

<div id="demo">
	<div id="clippingsMenu">
	<div id="clippingsContainer"></div>
	
	<div id="clippingControls">
	<div id="clippingsCounter"></div>
	<a href="javascript:eventClearReadClippings()" class="mI">Clear Read Clippings</a>
	<a href="javascript:eventClearAllClippings()" class="mI">Clear all Clippings</a>
	</div>
	</div>


	<div id="sampleContent">
	
Lorem ipsum dolor sit amet, <a id="clp1" class="clippingIcon">+</a> <b>Three Oh</b> consectetur adipscing elit, sed diam nonumy eiusmod tempor indidunt up labore et dolore magnaaliquam erat volupat.
<br><br>
Ut enim ad minimim veniami quis <a id="clp2" class="clippingIcon">+</a> <b>Fork</b> nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
Duis autem vel eum irure dolor in <a id="clp3" class="clippingIcon">+</a> <b>K10K</b> reprehenderit in voluptate velit esse molestaie son consequat, vel illum dolore eu fugiat nulla pariatur.
<br><br>
At vero eos et accusam et justo odio <a id="clp4" class="clippingIcon">+</a> <b>Slashdot</b> dignissim qui blandit prasesent lupatum delenit aigue duos dolor et molestais exceptur sint occaecat cupidat non provident, sinil tempor sunt in culpa qui official deserunt mollit anim id est laborum et dolor fugai.
<br><br>
Et harumd dereud facilis <a id="clp1" class="clippingIcon">+</a> <b>Three Oh</b> est er expedit distinct.
<br><br>
Nam liber a tempor cum soluta nobis eligend <a id="clp5" class="clippingIcon">+</a> <b>Evolution Zone</b> optio comque nihil quod a impedit anim id quod maxim placeat facer possim <a id="clp6" class="clippingIcon">+</a> <b>Glish</b>  omnis es voluptas assumenda est, omnis dolor repellend.
	

				<script type="text/javascript">
				allClippings[allClippings.length] =  new Clipping(1,"Three Oh","http://www.threeoh.com");
				allClippings[allClippings.length] =  new Clipping(2,"Fork","http://www.fork.de");
				allClippings[allClippings.length] =  new Clipping(3,"K10K","http://www.k10k.net");
				allClippings[allClippings.length] =  new Clipping(4,"Slashdot","http://www.slashdot.org");
				allClippings[allClippings.length] =  new Clipping(1,"Three Oh","http://www.threeoh.com");
				allClippings[allClippings.length] =  new Clipping(5,"Evolution Zone","http://www.evolutionzone.com");
				allClippings[allClippings.length] =  new Clipping(6,"Glish","http://www.glish.com");
				</script>
	</div>
</div>

HTML;

echo $public_footer;

?>
