<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cady - 536 Project 2</title>
</head>
<body>
	<div id="svg_div">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" baseProfile="full" onload="init(evt)">
	<script type="text/javascript" xlink:href="functions.js" />
	<text x="50px" y="550px" id="title">justin cady</text>
	
	<defs>
		<linearGradient id="squareGrad" x1="0%" y1="0%" x2="55%" y2="60%" spreadMethod="pad">
			<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
			<stop offset="100%" stop-color="#bbb" stop-opacity="1"/>
		</linearGradient>
	</defs>
	<g id="all_squares" transform="translate(0,0)">
	<g id="squares_one">
		<!-- Flickr -->
		<g id="flickr_container">
			<a target="_blank" xlink:href="http://flickr.com/photos/jcady">
			<g id="flickr" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50" y="-50" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<g id="flickr_circles" transform="translate(12.5,12.5)">
					<circle cx="-17px" r="15.625px" fill="#0063DC"/>
					<circle cx="17px" r="15.625px" fill="#FF0084"/>
				</g>
			</g>
			</a>
		</g>
		
		<!-- Twitter -->
		<g id="twitter_container">
			<a target="_blank" xlink:href="http://twitter.com/jbomb">
			<g id="twitter" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50" y="-50" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<image x="-30.25px" y="-20px" width="85" height="69" xlink:href="img/bird.png" />
			</g>
			</a>
		</g>
		
		<!-- Delicious -->
		<g id="del_container">
			<a target="_blank" xlink:href="http://delicious.com/jbomb">
			<g id="del" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50" y="-50" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<g id="del_squares" transform="translate(-8-10)">
					<rect width="20.83px" height="20.83px" class="white"/>
					<rect x="20.83px" width="20.83px" height="20.83px" class="blue"/>
					<rect x="20.83px" y="20.83px" width="20.83px" height="20.83px" class="grey"/>
					<rect y="20.83px" width="20.83px" height="20.83px" class="black"/>
				</g>
			</g>
			</a>
		</g>
		
		<!-- Last.FM -->
		<g id="lastfm_container">
			<a target="_blank" xlink:href="http://www.last.fm/user/justincady">
			<g id="lastfm" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50" y="-50" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<image x="-22px" y="-25px" width="70" height="72" xlink:href="img/lastfm.png" />
			</g>
			</a>
		</g>
	</g>
	
	<g id="squares_two">
		<!-- LinkedIn -->
		<g id="linkedin_container">
			<a target="_blank" xlink:href="http://www.linkedin.com/in/justincady">
			<g id="linkedin" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50" y="-50" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<rect x="-19px" y="-19px" width="62px" height="62px" fill="#4d9bc2" rx="10px" ry="10px" stroke-width="1" stroke="#111"/>
				<text id="in" x="-6px" y="28px">in</text>
			</g>
			</a>
		</g>
		
		<g id="hero_container">
			<g id="hero" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50" y="-50" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<circle cx="12.5px" cy="12.5px" r="35px" fill="#222"/>
				<text x="-5px" y="30px" id="hero_text">H</text>
			</g>
		</g>
		
		<g id="cs_container">
			<a target="_blank" xlink:href="http://www.cs.rit.edu">
			<g id="cs" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50" y="-50" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<image x="-27px" y="-22px" width="80" height="69" xlink:href="img/cs.png" />
			</g>
			</a>
		</g>
		
		<g id="jquery_container">
			<a target="_blank" xlink:href="http://jquery.com">
			<g id="jquery" onmouseover="delegateIn(this.id)" onmouseout="delegateOut(this.id)" transform="scale(1)">
				<rect x="-50px" y="-50px" width="125px" height="125px" rx="10px" ry="10px" class="rect"/>
				<g id="jquery_path" transform="translate(-17,-25)">
					<path fill="none" stroke="#4082AE" stroke-width="5" d="M2.933,22.285c4.81,22.097,27.961,35.784,51.763,30.603"/>
					<path fill="none" stroke="#4082AE" stroke-width="3" d="M14.549,21.721c3.438,15.794,19.986,25.578,36.998,21.874"/>
					<path fill="none" stroke="#4082AE" d="M24.112,20.721c2.456,11.286,14.279,18.277,26.437,15.63"/>
				</g>
			</g>
			</a>
		</g>
	</g>
	</g><!-- all squares -->
	
	<g id="circles">
		<g id="circle_one">
			<a target="_blank" xlink:href="#" onclick="circle(1);return false;">
				<circle id="cir_1" r="9px" cx="195" cy="450" fill="#fff" stroke="#fff" stroke-width="3px"/>
			</a>
		</g>
		<g id="circle_two">
			<a target="_blank" xlink:href="#" onclick="circle(2);return false;">
				<circle id="cir_2" r="9px" cx="231" cy="450" fill="#1e1e1e" stroke="#fff" stroke-width="3px"/>
			</a>
		</g>
	</g>
	
</svg>
</div>
</body>
</html>