<!-- the target must have a setSelection method -->
<HEAD>
<PUBLIC:COMPONENT tagName=FLICKR_IMAGE>
  	<PUBLIC:ATTACH event="oncontentready" onevent="fnInit()" />
</PUBLIC:COMPONENT>
<STYLE>
	body
	{
		background:lightgray;
	}
	.gallerycontainer
	{
		position: relative;
		/*Add a height attribute and set to largest image's height to prevent overlaying*/
	}

	.thumbnail img
	{
		border: 1px solid white;
		margin: 0 0 0 0;
	}

	.thumbnail:hover
	{
		background-color: transparent;
	}

	.thumbnail:hover img
	{
		border: 1px solid blue;
	}

	.thumbnail span
	{ /*CSS for enlarged image*/
		position: absolute;
		background-color: lightyellow;
		padding: 0px;
		left: -1000px;
		border: 1px solid gray;
		visibility: hidden;
		color: black;
		text-decoration: none;
	}

	.thumbnail span img
	{ /*CSS for enlarged image*/
		border-width: 0;
		padding: 0px;
	}

	.thumbnail:hover span
	{ /*CSS for enlarged image*/
		visibility: visible;
		top: 0px;
		left: 0px; /*position where enlarged image should offset horizontally */
		z-index: 50;
	}
</STYLE>
<SCRIPT type = "text/javascript">
var imgs = null
function fnInit()
{
	defaults.viewLink = document;
}
function jsonFlickrFeed(feed)
{
	imgs = feed;
	showFlickrImages()
}
function showFlickrImages(){
	var z1,z2,z3,z4
	var n = Math.floor(Math.random()*imgs.items.length)
	var tmp=imgs.items[n].media.m;
     	tmp=tmp.replace(/_m\.jpg/g,'_s.jpg');
	im1.src=tmp
	ims1.src=tmp
	var n = Math.floor(Math.random()*imgs.items.length)
	var tmp=imgs.items[n].media.m;
     	tmp=tmp.replace(/_m\.jpg/g,'_s.jpg');
	im2.src=tmp
	ims2.src=tmp
	var n = Math.floor(Math.random()*imgs.items.length)
	var tmp=imgs.items[n].media.m;
     	tmp=tmp.replace(/_m\.jpg/g,'_s.jpg');
     	im3.src=tmp
	ims3.src=tmp
	var n = Math.floor(Math.random()*imgs.items.length)
	var tmp=imgs.items[n].media.m;
     	tmp=tmp.replace(/_m\.jpg/g,'_s.jpg');
     	im4.src=tmp
	ims4.src=tmp
	setTimeout(showRndFlickrImage, 5000)
}
function showFlickrImage()
{
	var z
	var n = Math.floor(Math.random()*imgs.items.length)
	var tmp=imgs.items[n].media.m;
     	tmp=tmp.replace(/_m\.jpg/g,'_s.jpg');
	var r =Math.floor(Math.random()*4)
	switch(r)
	{
		case(0):
			im1.src=tmp
			ims1.src=tmp
			break
		case(1):
			im2.src=tmp
			ims2.src=tmp
			break
		case(2):
			im3.src=tmp
			ims3.src=tmp
			break
		case(3):
			im4.src=tmp
			ims4.src=tmp
			break
	}
	setTimeout(showRndFlickrImage, 5000)
}
var showRndFlickrImage = showFlickrImage
function fnFlickrClick(obj)
{
	window.open(obj.src,'flickrImageWindow','width=800,height=600')
}
</SCRIPT>
</HEAD>
<BODY>
<div class="gallerycontainer">
	<a class="thumbnail" href="#thumb"><img id="im1" src="" width="75px" height="75px" /><span style="position:absolute;top:0;left:0;"><img id="ims1" src="" width="156px" height="156px" /></span></a>
	<a class="thumbnail" href="#thumb"><img id="im2" src="" width="75px" height="75px" /><span style="position:absolute;top:0;left:0;"><img id="ims2" src="" width="156px" height="156px"  /></span></a>
	<br />
	<a class="thumbnail" href="#thumb"><img id="im3" src="" width="75px" height="75px" /><span style="position:absolute;top:0;left:0;"><img id="ims3" src="" width="156px" height="156px"  /></span></a> 
	<a class="thumbnail" href="#thumb"><img id="im4" src="" width="75px" height="75px" /><span style="position:absolute;top:0;left:0;"><img id="ims4" src="" width="156px" height="156px" /></span></a>
</div>
<script type='text/javascript' src='http://flickr.com/services/feeds/photos_public.gne?tags=scenery&format=json'></script>
</BODY>

