HoleyBackup

<?xml version="1.0" standalone="yes"?>
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	
	
	<defs>
		
		
		<filter id="fishing-f-0">
			<feColorMatrix type="hueRotate" values="-120" />
		</filter>
		
		
		<radialGradient id="fishing-g-0" cx="0" cy="0" fx="-3" fy="-3" r="5" gradientUnits="userSpaceOnUse">
			<stop offset="0%" stop-color="#f66" />
			<stop offset="100%" stop-color="#c00" />
		</radialGradient>
		
		<radialGradient id="fishing-g-1" cx="50%" cy="50%" r="50%">
			<stop offset="0%" stop-color="rgba(128, 255, 128, 0)" />
			<stop offset="100%" stop-color="rgb(0, 255, 0)" />
		</radialGradient>
		
		
		<pattern width="32" height="32" patternUnits="userSpaceOnUse" id="fishing-p-0">
			
			<image xlink:href="data:image/gif;base64,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" width="32px" height="32px" />
			<rect width="32" height="32" fill="#deaa87" opacity="0.2" /> 
		</pattern>
		
		<pattern width="64" height="64" patternUnits="userSpaceOnUse" id="fishing-p-1">
			
			<image xlink:href="data:image/gif;base64,R0lGODdhIAAgAKUvADutpT2upj6vp0mspUqtpjeyrz+xqEuup0SwrkGyqUyvqDq0sUaxr0Kzqk2wqUeysEO0q06xqj22s0izsUW1rD63tEm0slCzq0a2rT+4tUq1s1G0rEe3rkG5tky2tFK1rUi4sEK6t023tVO2r0q5sU64tlS3sEu6slW4sUy7s1e5sk28tFi6s1O8u0++tf///////////////////////////////////////////////////////////////////ywAAAAAIAAgAAAG/kCKEAKhYDhIzjFZ6pySz6QQQ4E0rg3jUUKFqprP0ykV6jilDYw6KVG6Uy6WKklv05WYk1Osj3LGKSl+YoF/d0gSbR8fHIlIa3dwLpMuhXcSIouMGhJDRFpGdBsbiVNqRypfJYxUWY+PGB8WFxsftXSnH6klq2wcixijFxcPDg60Gx4iJSLNv4xwLS58h4vED7O1Hhq/HNwcEEuPjId3H82LExsXEMMNAglFFLSLKEmn5b8WVMYKCf8AERBbRGfKgiJqFllQt86BPwABAvxrcIyWGiEUlEiwYETWwgkXHA4YGUAAvAQN5J1aSYXWgwkTLDwopiDAyJEJFFz5VAVL/pFhQEdZGDoBwr+bDjCyxICwFrB7RzTYsuIAgYNHRjCaOjWBSig7dmA9o0OwJVB2Wk9J0CAOCTILo6ytu2CrFtMpXNRiLOIAyz8IxoYRaYByp6kqQwj/MwnwJMAEjh0UuePpSuOTluHBI9zgQsZDGBZcKfB4IhbFCSpq+vDtzoLS8cKtkaBQqiYPizKF5VDFypWhGoJr8ODhmSYUuUVwKM4b60UIDBhcecDg5YYHw1Z/6HmQZ2/f7RowMFZxwkwLSDwNTsmTCpH3RYgMYzCMQpvvvrPET5zlCIZOECxgiiONpCcgYvBZ8ZkbVLTVCIHp2bcXfEMsmM9uoHl1RRVHC1BATj7lJFJKgkEAADs=" width="64px" height="64px" />
			<rect width="64" height="64" fill="#1543b7" opacity="0.1" />
		</pattern>
		
		<pattern width="10" height="10" patternUnits="userSpaceOnUse" id="fishing-p-2">
			<image xlink:href="data:image/gif;base64,R0lGODdhCgAKAMIFABFng0SJn1eOoHG81YTB1f///////////ywAAAAACgAKAAADJAgQQDOBqRUEEEzYuGudVBRNEUEwlQU8oAdq2JhqAatIC9FGCQA7" width="10px" height="10px" />
			<rect width="10" height="10" fill="#27f" opacity="0.5" />
		</pattern>
		
		<pattern width="24" height="24" patternUnits="objectBoundingBox" id="fishing-p-3">
			<rect width="24" height="24" fill="#0e779a" opacity="0.65" /> 
			<use xlink:href="#fishing-r-bubbles" class="bubbles" />
			<use xlink:href="#fishing-r-bubbles" y="24" class="bubbles" />
		</pattern>
		
		<g id="fishing-r-pond">
			
			<circle r="160" fill="url(#fishing-p-2)" />
			
			<circle r="150" class="water" />
			
			<circle r="138" fill="#de6" opacity="0.0" />
			<path d="M 0 0 v -1000 v 2000 z h -1000 h 2000 z l 1000 1000 l -1000 -1000" fill="none" stroke="purple" />
		</g>
		<g id="fishing-r-platform">
			<rect width="44" height="64" x="14" y="0" class="wood" />
			<circle cx="8" cy="12" r="6" class="wood" />
			<circle cx="64" cy="12" r="6" class="wood" />
			<circle cx="36" cy="22" r="10" fill="rgba(0, 255, 0, 0.4)" />
			<text x="-80" y="-8" transform="rotate(-35 0 0) translate(-30 40)" fill="#4e6" stroke="green">drag me! ----></text>
		</g>
		<g id="fishing-r-fish">
			<circle r="12" fill="rgba(0, 24, 255, 0.35)" />
		</g>
		<g id="fishing-r-bubbles" opacity="0.45">
			<circle cx="0" cy="0" r="3" fill="#c8dcff" />
			<circle cx="16" cy="1" r="3" fill="#c8dcff" />
			<circle cx="7" cy="2" r="3" fill="#c8dcff" />
			<circle cx="20" cy="3" r="3" fill="#c8dcff" />
			<circle cx="14" cy="5" r="3" fill="#c8dcff" />
			<circle cx="2" cy="8" r="3" fill="#c8dcff" />
			<circle cx="10" cy="13" r="3" fill="#c8dcff" />
			<circle cx="4" cy="12" r="3" fill="#c8dcff" />
			<circle cx="22" cy="18" r="3" fill="#c8dcff" />
			<circle cx="12" cy="20" r="3" fill="#c8dcff" />
		</g>
	</defs>
	
	<g id="fishing">
		<use xlink:href="#fishing-r-pond" x="320" y="240" />
		<g id="fish-container">
			<desc>Fish nodes will be appended to this parent</desc>
		</g>
		<use xlink:href="#fishing-r-platform" x="284" y="368" />
		<g id="rod" transform="translate(320 390)">
			<circle r="30" cy="30" id="rod-zone">
				<desc>this circle marks the area at which the rod can be dragged. the position would then be inversed and translated to a position in the pond</desc>
			</circle>
			<g>
				<desc>drag here to cancel cast</desc>
				<text font-family="arial" font-size="8" font-weight="bold" transform="translate(42 27)">drag here<tspan x="0" dy="10">to cancel</tspan></text>
				<circle cx="60" cy="30" r="20" fill="rgba(255, 0, 0, 0.4)" />
			</g>
			<path d="M 0 0 q -20 -10 -100 -100" fill="none" stroke="#fff" id="rod-rope" />
			
			<circle cx="-100" cy="-100" r="3" fill="rebeccapurple" id="rod-bait" />
			<circle r="5" fill="url(#fishing-g-0)" id="rod-btn" />
		</g>
		<g id="bucket">
			<rect width="180" height="260" x="10" y="15" rx="10" ry="10" fill="peachpuff" stroke="purple" opacity="0" />
			<circle cx="190" cy="55" r="40" fill="peachpuff" opacity="0" />
			<path d="M 10 25 a 10 10 0 0 1 10 -10 h 170 a 40 40 0 1 1 0 80 v 51.726209469111836 a 160 160 0 0 0 -26.124949959959963 128.3 h -143.87505004004004 a 10 10 0 0 1 -10 -10 z" fill="#9cd1f5" stroke="#3c96d3" />
			
			
			
			<path d="M 190 55 v -30 z" stroke="#e93" fill="#b50" stroke-width="5" stroke-linecap="round" />
			<path d="M 190 55 l 24 29 h -10 l -14 -18 l -14 18 h -10 l 24 -29 z" stroke="#b50" fill="#e93" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
			<circle cx="190" cy="55" r="26" fill="#e93" stroke="#b50" stroke-width="2" />
			<circle cx="190" cy="55" r="19" fill="#fff" stroke="#3560a6" stroke-width="2" />
			<circle cx="190" cy="55" r="31.5" fill="none" stroke="#cce933" stroke-width="7" stroke-dasharray="20, 35, 20, 1000, 20" transform="rotate(-158.209261325098 190 55)" />
			<text font-family="Arial" font-size="25" font-weight="bold" x="30" y="55">
				Fishing
			</text>
			<text font-family="Arial" font-size="12" font-weight="bold" x="30" y="75">
				(<tspan id="fishing-bucket-capacity">0</tspan>/20 in bucket)
			</text>
			<text font-family="Arial" font-size="20" font-weight="bold" x="171" y="62.5" id="fishing-bucket-timer" transform="translate(7.8828125)">00</text>
			<rect width="130" height="110" x="20" y="95" rx="3" ry="3" fill="#ffffbe" stroke="#cc3" />
			<g id="fishing-bucket-prize" opacity="0">
				<image xlink:href="" width="88px" height="88px" x="41" y="106" id="fishing-bucket-image" />
				<text font-family="Arial" font-size="14" font-weight="bold" x="20" y="225" id="fishing-bucket-title">??? Fish</text>
				<image xlink:href="http://images.wikia.com/toontownrewritten/images/thumb/5/56/Jellybean_Jar.png/88px-Jellybean_Jar.png" width="16px" height="16px" x="20" y="232" />
				<text font-family="Arial" font-size="14" x="40" y="245"><tspan id="fishing-bucket-beans">5</tspan> Jellybeans</text>
			</g>
			<g transform="scale(0.9) translate(256 6)"> 
				<desc>money jar</desc>
				<image xlink:href="http://images.wikia.com/toontownrewritten/images/thumb/5/56/Jellybean_Jar.png/88px-Jellybean_Jar.png" width="88px" height="88px" />
				<image xlink:href="data:image/png;base64,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" width="55px" height="40px" x="16.5" y="30" />
				<text font-family="Arial" font-size="24" font-weight="bold" x="44" y="60" fill="orange" id="fishing-money-val">0</text>
			</g>
		</g>
	</g>
	
	<defs>
		
		<style type="text/css">
		<![CDATA[
			@keyframes bubbles {
				from {
					transform: translateY(0);
				}
				to {
					transform: translateY(-24px);
				}
			}
			svg {
				border: 1px solid red;
			}
			.wood {
				fill: url(#fishing-p-0);
				stroke: #843;
			}
			.water {
				fill: url(#fishing-p-1);
			}
			.fishing-fish {
				r: 12px;
				fill: url(#fishing-p-3);
				stroke: #3a96ff;
				transition: 3s;
				transition-timing-function: cubic-bezier(0.6, 0, 0.1, 1);
			}
			.bubbles {
				animation-name: bubbles;
				animation-duration: 2000ms;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
			}
			#rod-btn {
				cursor: pointer;
			}
			#rod-zone {
				fill: url(#fishing-g-1);
				opacity: 0;
				transition: 150ms;
			}
			#rod-zone[data-active="true"] {
				opacity: 0.4;
			}
			#rod-zone[data-inrange="false"] {
				filter: url(#fishing-f-0);
				transition: 3s;
			}
			/*#rod-bait {
				transition: 400ms linear;
			}*/
		]]>
		</style>
		
		<script type="application/javascript">
		<![CDATA[
			var fsh = {fn: {}};
			/* data */
			fsh.data = {
				state: {
					timer: {
						interval: null,
						t: null
					},
					castTimeout: null,
					baitState: false
				},
				pond: {
					x: 320,
					y: 240,
					r: 150
				},
				fishChecker: {
					int: null,
					delay: 100
				},
				timer: {
					t: 42000
				},
				bucket: {
					fish: [] // fish in bucket
				},
				rod: {
					btn: {
						x: 320,
						y: 390,
						r: 5
					},
					bait: {
						r: 3
					},
					reflectionRadius: 30,
					type: 0, // rod type
					state: false // activated or not ## move to 'fsh.data.state.baitState' (?)
				},
				beans: {
					val: 100,
					min: 50
				},
				fish: {
					fishList: [], // list of fish <circle /> nodes
					move: {
						dur: 3000,
						wait: {
							min: 3000,
							max: 6000
						}
					},
					r: 12,
					maxRange: 16
				},
				species: {
					rate: {
						beans: 0.04,
						boot: 0.15
					},
					all: {
						"1000": {
							name: "Balloon Fish",
							image: null,
							species: {
								"1001": {
									name: "Balloon Fish",
									type: 1000,
									id: 1001,
									rod: 0,
									rarity: 1,
									val: [2, 7]
								},
								"1002": {
									name: "Hot Air Balloon Fish",
									type: 1000,
									id: 1002,
									rod: 0,
									rarity: 1,
									val: [12, 12]
								},
								"1003": {
									name: "Weather Balloon Fish",
									type: 1000,
									id: 1003,
									rod: 0,
									rarity: 4,
									val: [17, 19]
								},
								"1004": {
									name: "Water Balloon Fish",
									type: 1000,
									id: 1004,
									rod: 0,
									rarity: 4,
									val: [9, 11]
								},
								"1005": {
									name: "Red Balloon Fish",
									type: 1000,
									id: 1005,
									rod: 0,
									rarity: 2,
									val: [5, 7]
								}
							}
						},
						"2000": {
							name: "Peanut Butter \x26 Jellyfish",
							image: null,
							species: {
								"2001": {
									name: "Peanut Butter \x26 Jellyfish",
									type: 2000,
									id: 2001,
									rod: 0,
									rarity: 1,
									val: [5, 8]
								},
								"2002": {
									name: "Grape PB\x26J Fish",
									type: 2000,
									id: 2002,
									rod: 0,
									rarity: 2,
									val: [8, 11]
								},
								"2003": {
									name: "Crunchy PB\x26J Fish",
									type: 2000,
									id: 2003,
									rod: 0,
									rarity: 3,
									val: [12, 14]
								},
								"2004": {
									name: "Strawberry PB\x26J Fish",
									type: 2000,
									id: 2004,
									rod: 0,
									rarity: 4,
									val: [16, 19]
								},
								"2005": {
									name: "Strawberry PB\x26J Fish",
									type: 2000,
									id: 2005,
									rod: 0,
									rarity: 6,
									val: [44, 46]
								}
							}
						}
					},
					rarity: {
						"1": 100,
						"2": 80,
						"3": 50,
						"4": 20,
						"5": 10,
						"6": 2,
					},
					parsedSpecies: [],
					rods: {
						"0": {
							name: "Twig Rod",
							cost: 0,
							cast: 1,
							beans: 10,
							owned: true
						},
						"1": {
							name: "Bamboo Rod",
							cost: 480,
							cast: 2,
							beans: 20,
							owned: false
						},
						"2": {
							name: "Hardwood Rod",
							cost: 800,
							cast: 3,
							beans: 40,
							owned: false
						},
						"3": {
							name: "Steel Rod",
							cost: 1200,
							cast: 4,
							beans: 100,
							owned: false
						},
						"4": {
							name: "Gold Rod",
							cost: 2000,
							cast: 5,
							beans: 150,
							owned: false
						}
					}
				}
			};
			/* functions */
			// get random position within a circle (***constructor***)
			fsh.fn.randomCircCoords = function() {
				var yRange;
				this.x = Math.random();
				yRange = Math.sqrt(1 - Math.pow(2 * this.x - 1, 2)); // height of vertical line in the circle whose x position is 'this.x'
				this.y = (1 - yRange) / 2 + yRange * Math.random();
			}
			// move fish
			fsh.fn.posFish = function(fishNode, moves) {
				if (moves === false) {
					// do nothing
				} else if (!new Number(moves) instanceof Number) {
					// moves is not an integer
					moves = 0;
				} else if (moves < 0 || moves != Math.round(moves)) {
					// moves is not a positive integer
					moves = 0;
				}
				console.log("Moving fish #" + fishNode.id);
				var coor = new fsh.fn.randomCircCoords(),
					pondX = fsh.data.pond.x,
					pondY = fsh.data.pond.y,
					pondR = fsh.data.pond.r,
					fishR = fsh.data.fish.r,
					moveDelay,
					cx = pondX - pondR + fishR + coor.x * 2 * (pondR - fishR),
					cy = pondY - pondR + fishR + coor.y * 2 * (pondR - fishR);
				fishNode.setAttributeNS(null, "cx", Math.round(cx));
				fishNode.setAttributeNS(null, "cy", Math.round(cy));
				fishNode.setAttributeNS(null, "data-move", moves);
				if (moves !== false) {
					moveDelay = fsh.data.fish.move.dur + fsh.data.fish.move.wait.min + (fsh.data.fish.move.wait.max - fsh.data.fish.move.wait.min) * Math.random() - (moves === 0 ? fsh.data.fish.move.dur : 0);
					setTimeout(function() {
						fsh.fn.posFish(fishNode, moves + 1);
					}, moveDelay);
				}
			}
			// add new fish
			fsh.fn.addFish = function() {
				var fishNode = document.createElementNS("http://www.w3.org/2000/svg", "circle");
				fishNode.id = "fish-" + (fsh.data.fish.fishList.length + 1);
				fishNode.setAttributeNS(null, "class", "fishing-fish");
				// insert fish
				document.querySelector("#fish-container").appendChild(fishNode);
				// add fish to list of fish
				fsh.data.fish.fishList.push(fishNode);
				fsh.fn.posFish(fishNode);
			}
			// fish intersection
			fsh.fn.hasCaughtFish = function() {
				var hasCaught = false,
					rod = document.querySelector("#rod-bait"),
					fish;
				if (fsh.data.state.baitState) {
					// only if fish state is enabled (while the timer is ticking)
					try {
						// use a 'try', just in case of an unexpected transform
						rod = {x: fsh.data.rod.btn.x + Number(rod.getAttributeNS(null, "cx")), y: fsh.data.rod.btn.y + Number(rod.getAttributeNS(null, "cy"))};
						for (var i in fsh.data.fish.fishList) {
							fish = fsh.data.fish.fishList[i].getBoundingClientRect();
							fish = {x: fish.left + 11, y: fish.top + 11};
							/*console.info({
								rod: rod,
								fish: fish
							});*/
							if (Math.sqrt(Math.pow(rod.x - fish.x, 2) + Math.pow(rod.y - fish.y, 2)) <= fsh.data.fish.maxRange + fsh.data.rod.bait.r) {
								hasCaught = true;
								break;
							}
						}
					} catch(err) {}
					if (hasCaught) {
						fsh.fn.onCatch();
					}
				}
			}
			// on catch
			fsh.fn.onCatch = function() {
				console.log("You've caught something with your rod!");
				fsh.fn.stopTimer();
				var type = Math.random();
				if (type <= fsh.data.species.rate.beans + fsh.data.species.rate.boot) {
					// item caught
					if (type <= fsh.data.species.rate.boot) {
						// caught boot
						fsh.fn.onCatchBoot();
					} else {
						// caught beans
						fsh.fn.onCatchBeans();
					}
				} else {
					fsh.fn.onCatchFish();
				}
			}
			// on catch (boot)
			fsh.fn.onCatchBoot = function() {
				console.log("Caught boot!");
				fsh.fn.updateBucketWindow("http://images.wikia.com/clubpenguin/images/thumb/5/5c/Boot.png/88px-Boot.png", "Old Boot", 0);
			}
			// on catch (beans)
			fsh.fn.onCatchBeans = function() {
				console.log("Caught jellybeans jar!");
				fsh.fn.updateBucketWindow("http://images.wikia.com/toontownrewritten/images/thumb/5/56/Jellybean_Jar.png/88px-Jellybean_Jar.png", "Jellybean Jar", fsh.data.species.rods[fsh.data.rod.type].beans);
			}
			// on catch (fish)
			fsh.fn.onCatchFish = function() {
				console.log("Caught fish!");
				var all = fsh.data.species.parsedSpecies,
					rnd = fsh.data.species.parsedSpecies[Math.floor(Math.random() * fsh.data.species.parsedSpecies.length)],
					fish = fsh.fn.getFishData(rnd),
					prize = Math.round(fish.val[0] + (fish.val[1] - fish.val[0]) * Math.random());
				console.info(rnd, fish);
				fsh.fn.updateBucketWindow(fsh.data.species.all[fish.type].image, fish.name, prize);
			}
			// get fish data
			fsh.fn.getFishData = function(id) {
				id = String(id);
				var familyId = id.replace(/\d{3}$/, "000");
				return fsh.data.species.all[familyId].species[id];
			}
			// update bucket window
			fsh.fn.updateBucketWindow = function(url, title, beans) {
				var titleNode = document.querySelector("#fishing-bucket-title");
				titleNode.textContent = title;
				titleNode.setAttributeNS(null, "font-size", title.length > 18 ? 11.5 : 14);
				document.querySelector("#fishing-bucket-beans").textContent = beans;
				document.querySelector("#fishing-bucket-image").setAttributeNS("http://www.w3.org/1999/xlink", "href", url || "");
				document.querySelector("#fishing-bucket-prize").setAttributeNS(null, "opacity", 1);
				fsh.fn.addBeans(beans);
			}
			// add fish to bucket
			fsh.fn.addToBucket = function(obj) {
				fsh.data.bucket.fish.push(obj);
			}
			// add fish to bucket
			fsh.fn.sellFromBucket = function() {
				var bucket = fsh.data.bucket.fish;
				for (var i in bucket) {
					
				}
			}
			// add beans
			fsh.fn.addBeans = function(amt) {
				if (fsh.data.beans.val + amt >= fsh.data.beans.min) {
					// new value is not lower than min value
					fsh.data.beans.val += amt; // wouldn't it be funny if the beans were NaN?
					var money = document.querySelector("#fishing-money-val"),
						rect;
					money.textContent = fsh.data.beans.val;
					if (fsh.data.beans.val > 999) {
						// make text smaller at high amounts
						money.setAttributeNS(null, "font-size", fsh.data.beans.val > 9999 ? 16 : 20);
					}
					rect = money.getBoundingClientRect();
					money.setAttributeNS(null, "x", 44 - (rect.width / 0.9) / 2); // width divided by 0.9 to cancel out transform scale of jar container
				}
			}
			// aim rod
			fsh.fn.aimRod = function() {
				document.querySelector("#rod-btn").setAttributeNS(null, "data-active", "true");
				document.querySelector("#rod-zone").setAttributeNS(null, "data-active", "true");
				document.querySelector("#fishing-bucket-prize").setAttributeNS(null, "opacity", 0);
			}
			// return rod
			fsh.fn.returnRod = function() {
				var btn = document.querySelector("#rod-btn");
				btn.setAttributeNS(null, "data-active", "false");
				btn.setAttributeNS(null, "cx", 0);
				btn.setAttributeNS(null, "cy", 0);
				document.querySelector("#rod-zone").setAttributeNS(null, "data-active", "false");
			}
			// cast rod
			fsh.fn.castRod = function(x, y) {
				fsh.fn.addBeans(- fsh.data.species.rods[fsh.data.rod.type].cast);
				var bait = document.querySelector("#rod-bait"),
					rope = document.querySelector("#rod-rope"),
					trans = {};
				trans.x = -x * (fsh.data.pond.r) / fsh.data.rod.reflectionRadius;
				trans.y = -y * (fsh.data.pond.r) / fsh.data.rod.reflectionRadius;
				//bait.setAttributeNS(null, "transform", "translate(" + trans.x + " " + trans.y + ")");
				bait.setAttributeNS(null, "cx", trans.x);
				bait.setAttributeNS(null, "cy", trans.y);
				rope.setAttributeNS(null, "d", "M 0 0 q " + trans.x * 0.3 + " " + trans.y * 0.22 + " " + trans.x + " " + trans.y);
			}
			// set clock seconds
			fsh.fn.setClockSeconds = function(seconds) {
				var clockTime = document.querySelector("#fishing-bucket-timer");
				clockTime.textContent = seconds;
				clockTime.setAttributeNS(null, "transform", "translate(" + ((38 - clockTime.getBoundingClientRect().width) / 2) + ")");
			}
			// start timer
			fsh.fn.startTimer = function() {
				fsh.fn.stopTimer(); // in case called multiple times without stopping first
				fsh.data.state.baitState = true;
				fsh.data.state.timer.t = fsh.data.timer.t;
				fsh.fn.setClockSeconds(fsh.data.state.timer.t / 1000);
				fsh.data.state.timer.interval = setInterval(function() {
					fsh.data.state.timer.t -= 1000;
					fsh.fn.setClockSeconds(fsh.data.state.timer.t / 1000);
					if (fsh.data.state.timer.t <= 0) {
						// stop timer
						fsh.fn.stopTimer();
					}
				}, 1000);
				
			}
			// stop timer
			fsh.fn.stopTimer = function() {
				clearInterval(fsh.data.state.timer.interval);
				fsh.data.state.baitState = false;
				fsh.fn.setClockSeconds("00");
			}
			// init
			fsh.fn.init = function() {
				fsh.fn.addFish();
				fsh.fn.addFish();
				fsh.fn.addBeans(0);
				fsh.data.fishChecker.int = setInterval(function() {
					fsh.fn.hasCaughtFish();
				}, fsh.data.fishChecker.delay);
				// prepare rarity array
				var all = fsh.data.species.all,
					family,
					fish,
					rarity;
				for (var speciesId in all) {
					family = all[speciesId];
					for (var fishId in family.species) {
						fish = family.species[fishId];
						rarity = fsh.data.species.rarity[fish.rarity];
						fsh.data.species.parsedSpecies = fsh.data.species.parsedSpecies.concat(new Array(rarity + 1).join("|" + fishId).substr(1).split("|"));
					}
				}
			}
			/* triggers */
			// rod drag
			document.querySelector("#rod-btn").addEventListener("mousedown", function() {
				console.log("|_|_mousedown");
				fsh.fn.aimRod();
			});
			document.querySelector("#rod-btn").addEventListener("mouseup", function(e) {
				console.log("|_|_mouseup");
				fsh.fn.castRod(Number(this.getAttributeNS(null, "cx")), Number(this.getAttributeNS(null, "cy")));
				fsh.fn.returnRod();
				fsh.fn.startTimer();
			});
			document.addEventListener("mousemove", function(e) {
				var btn = document.querySelector("#rod-btn");
				if (btn.getAttributeNS(null, "data-active") == "true") {
					// if moving is active
					var cx = e.clientX - fsh.data.rod.btn.x,
						cy = e.clientY - fsh.data.rod.btn.y,
						zone = document.querySelector("#rod-zone");
						// drag button
						btn.setAttributeNS(null, "cx", cx);
						btn.setAttributeNS(null, "cy", cy);
					if (Math.sqrt(cx * cx + Math.pow(cy - fsh.data.rod.reflectionRadius, 2)) <= fsh.data.rod.reflectionRadius) {
						// in range
						zone.setAttributeNS(null, "data-inrange", "true");
					} else {
						// out of range
						/*
						// drag to cancel area
						fsh.fn.returnRod();
						*/
						zone.setAttributeNS(null, "data-inrange", "false");
						if (Math.sqrt(Math.pow(cx - 60, 2) + Math.pow(cy - 30, 2)) <= 20 + fsh.data.rod.btn.r) {
							// cancel area
							fsh.fn.returnRod();
						}
					}
				}
			});
			/* init */
			fsh.fn.init();
		]]>
		</script>
	</defs>
</svg>