var paper,waterpaper,segs = 12,groundoff=200,_mx,_my,wheelspin=0,_pw=0;
    	var h0lls0,h1lls,h2lls,h3lls,flightpath,flyp=0,flypt=0,flyseg,flymod=false;
    	var radius = 4;
		var R2D = Math.PI/180.0;
		var pts = new Array(7);
		var ptr=0;
		var _db;
		
    	
    	$(document).ready( function () {
    	
    		paper = new Raphael("hbase");
    		waterpaper = new Raphael("water");
			h0lls = new HillRange(randscape(segs,20,50),0.5,{"stroke-width":0,fill: "rgba(255,255,255,0.5)"}); h0lls.draw();			
			h1lls = new HillRange(randscape(segs,30,60),1,{"stroke-width":2,"stroke":"rgba(255,255,255,1)",fill: "rgba(215,177,198,0.7)"});
			h1lls.draw({"stroke-width":12,"stroke":"rgba(255,255,255,0.3)"}); h1lls.draw();			
			h2lls = new HillRange(randscape(segs,40,70),2,{"stroke-width":2,"stroke":"rgba(255,255,255,1)",fill: "rgba(234,244,217,0.9)"});
			h2lls.draw({"stroke-width":12,"stroke":"rgba(255,255,255,0.3)"}); h2lls.draw();			
			h3lls = new HillRange(randscape(segs,50,70),5,{"stroke-width":3,"stroke":"rgba(255,255,255,1)",fill: "rgba(173,190,135,0.9)"});
			h3lls.draw({"stroke-width":12,"stroke":"rgba(255,255,255,0.3)"}); h3lls.draw();	
			paper.image("http://phasetwo.org/img/house.png",paper.width-289,30,289,137);
			h4lls = new HillRange(randscape(segs,70,60),10,{"stroke-width":0,fill: "#fff"});
			h4lls.draw();    
			
			var cwidth=$("footer").width();
			for(var i=0;i<pts.length;i++)
			{
				pts[i]=new Vector(1+i*(cwidth-2)/(pts.length-1),0);
			}
			mp();
			
			//refly();
			//moveHills();
    	});
    	
    	function redrawHills()
    	{
    		paper.clear();
    		h0lls.draw();
    		h1lls.draw({"stroke-width":12,"stroke":"rgba(255,255,255,0.3)"}); h1lls.draw();
    		h2lls.draw({"stroke-width":12,"stroke":"rgba(255,255,255,0.3)"}); h2lls.draw();
    		h3lls.draw({"stroke-width":12,"stroke":"rgba(255,255,255,0.3)"}); h3lls.draw();
			paper.image("http://phasetwo.org/img/house.png",paper.width-289,30,289,137);
			//alert('house at ' + (paper.width-289) + ',' + (paper.height-137));
    		h4lls.draw();
    	}
    	
    	$(window).resize( function() {
    	
    		if(paper)
    		{
    			paper.setSize($("#hbase").width(),400);
    			waterpaper.setSize($("footer").width(),200);
    			redrawHills()
    			
    			for(var i=0;i<pts.length;i++)
    				pts[i].x = 1+i*($("footer").width()-2)/(pts.length-1);

    		}
    	});
    	
    	
    	$(window).mousemove( function(evt) {
    		
    		var px=evt.pageX,py=evt.pageY;
    		
    		if(_mx && _my && (px!=_mx || py!=_my))
    		{
    			var dist = Math.sqrt(Math.pow(_mx-px,2)+Math.pow(_my-py,2));
    			//if(_mx>px) dist*=-1;
    			groundoff+=dist/40;
    			redrawHills();
    		}
    		
    		_mx=px;_my=py;
    	
    	});
    	
    	
    	function flyer()
    	{

    			var wd = $("#hbase").width();
    			var xbite = wd/segs;
    			var gap = Math.round(wd/(flightpath.length*2.5));
    			
    			flyseg = [{x:xbite*flyp,y:flightpath[flyp]},{x:xbite*flyp+gap,y:flightpath[flyp]},{x:xbite*(flyp+1)-gap,y:flightpath[flyp+1]},{x:xbite*(flyp+1),y:flightpath[flyp+1]}];

    		
    		flypt = 0;
    		fly();
    		if(flyp==0)
    			fadeDots();
    	
    	}
    	
    	function refly()
    	{
    		$("#luterfly").show();
    		flightpath = randscape(segs,125,50);
    		flyp=0;
    		flyer();
    	}
    	
    	function fly()
    	{
    		if(flypt<=1)
    		{
    			var p1 = getPointOnCurve(flyseg[0],flyseg[1],flyseg[2],flyseg[3],flypt);
    			var p2 = getPointOnCurve(flyseg[0],flyseg[1],flyseg[2],flyseg[3],flypt+0.04);
    			
    			var diff = p1.subtract(p2);
    			var angle = (diff.y == 0 ? 0 : Math.atan(diff.y/diff.x)* 180/Math.PI) + 90;   			
    			
    			flymod=!flymod;
    			if( flymod )
    			{
    				var dot=$("<div class=dot></div>");
    				dot.css("left",p1.x-1).css("top",p1.y)
    				$("#header").append(dot);
    			}
    			$("#luterfly").css("left",p1.x-50).css("top",p1.y - 50).css("-webkit-transform","rotate("+angle+"deg)").css("-moz-transform","rotate("+angle+"deg)");
    			
    		
    			flypt+=0.05;
    			setTimeout("fly()",20);
    		} else {
    		
    			flyp++;
    			if(flyp<flightpath.length)
    			{
    				flyer();
    			} else {
    				$("#luterfly").hide();
    				setTimeout("refly()",5000);
    			}
    		
    		}
    		
    	
    	}
    	
    	function fadeDots() 
    	{
	    	$(".dot").each( function() {
	    	
	    		if ( $(this).css("opacity")>0 )
	    		{
	    			$(this).css("right",parseFloat($(this).css("right"))+8).css("opacity",parseFloat($(this).css("opacity"))-0.02)
	    		} else {
	    			$(this).remove();
	    		}
	    	
	    	})
	    	
	    	if($(".dot").length > 0)
	    		setTimeout("fadeDots()",50);
    	}
    	

		function moveHills() {
			
			
			groundoff+=0.1;
			redrawHills();
			setTimeout("moveHills()",20);
		
		}
    	
    	function randscape(segs,offset,peak)
    	{
    		var hpts = new Array(0);
	    	for(var i=0;i<=segs;i++)
	    	{
	    		hpts.push(Math.round(Math.random()*peak)+offset);
	    	}
	    	//hpts.push(hpts[0].y);
	    	return hpts;
    	}
    	
    	function HillRange(pts,gearing,atts)
    	{
    		var self = this;
    		this.pts = pts;
    		this.gearing=gearing;
    		this.atts=atts;
    	}
    	HillRange.prototype.draw = function(atts)
    	{
    		if(!atts) atts = this.atts;
    		var pts = this.pts;
			var wd = $("#hbase").width();
			var pt = pts[0];
			var pth = 'M 0,'+pts[0];
			var gap = Math.round(wd/(pts.length*2.5));
			
			var goff = groundoff*this.gearing;
			
			var xbite = wd/segs;
			var startx = Math.floor(goff/xbite) - 1;
			var endx = Math.ceil((wd+goff)/xbite) + 1; 
			
			//alert('from pt ' + startx + ' to ' + endx);
			
			for(var i=startx;i<endx;i++)
			{
				var pt0 = getPt(i,pts)
				var pt1 = getPt(i+1,pts);
				
				var x0 = Math.round(xbite*i)-goff;;
				var x1 = Math.round(xbite*(i+1))-goff;
				
				//alert('pt at ' + x0 + ',' + pt0);
				
				pth += ' C ' + (x0+gap) + ',' + pt0
				pth += ' ' + (x1-gap) + ',' + pt1
				pth += ' ' + x1 + ',' + pt1;
			}
			
			pth += ' L ' + wd + ',200 L 0,200 L 0,' + pts[0]
			paper.path(pth).attr(atts);
			
			/*
			for(var i=0;i<pts.length-1;i++)
			{
				var x0=Math.round(wd/segs*i);
				var x1=Math.round(wd/segs*(i+1));
				
				var pt0=pts[i];
				var pt1=pts[i+1];
				pth += ' C ' + (x0+gap) + ',' + pt0
				pth += ' ' + (x1-gap) + ',' + pt1
				pth += ' ' + x1 + ',' + pt1;
			}   		
			pth += ' L ' + wd + ',200 L 0,200 L 0,' + pts[0]
			paper.path(pth).attr(atts);
			*/
    	}
    	
    	function getPt(idx,pts)
    	{
    		while(idx<0)
    			idx+=pts.length;
    		idx = idx % pts.length;
    		return pts[idx];
    	}
    	
    		function Vector(x, y){
    		  this.x = x;
    		  this.y = y;
    		  this.color = '#000';
    		  this.draw = function() {
    		    var canvas = getCanvas();
    		    context = canvas.getContext('2d');
    		    context.fillStyle = this.color; //black
    		    context.fillRect(this.x-1, this.y-1, 3, 3);
    		
    		  };
    		  this.scalarMult = function(scalar){
    			  return new Vector(this.x * scalar, this.y * scalar);
    		  }
    		  this.scalarDiv = function(scalar){
    			  return new Vector(this.x / scalar, this.y / scalar);
    		  }
    		  this.dot = function(v2) {
    		    return this.x * v2.x + this.y * v2.y;
    		  };
    		  this.perp = function() {
    		    return new Vector(-1 * this.y, this.x);
    		  };
    		  this.subtract = function(v2) {
    		    return this.add(v2.scalarMult(-1));//new Vector(this.x - v2.x, this.y - v2.y);
    		  };
    		  this.add = function(v2) {
    			  return new Vector(this.x + v2.x, this.y + v2.y);
    		  }
    		  this.normalize = function()
    		  {
    		  	var length = Math.sqrt(this.x*this.x+this.y*this.y);
    		  	return new Vector(this.x/length,this.y/length);
    		  }
    		  this.length = function()
    		  {
    		  	return Math.sqrt(this.x*this.x+this.y*this.y);
    		  }
    		  this.LengthSq = function()
    		  {
    		  	return this.x*this.x+this.y*this.y;
    		  }
    		
    		}
    	
    	function getPointOnCurve(p1,p2,p3,p4,t) 
    	{
    	
    			cx = 3 * (p2.x - p1.x)
    			bx = 3 * (p3.x - p2.x) - cx
    			ax = p4.x - p1.x - cx - bx
    	
    			cy = 3 * (p2.y - p1.y)
    			by = 3 * (p3.y - p2.y) - cy
    			ay = p4.y - p1.y - cy - by
    	
    			px = (ax * Math.pow(t,3)) + (bx * Math.pow(t,2)) + (cx * t) + p1.x;
    			py = (ay * Math.pow(t,3)) + (by * Math.pow(t,2)) + (cy * t) + p1.y;
    			
    			return new Vector(px,py);
    	
    	}
    	
    function mp()
	{
		for(var i=0;i<pts.length-3;i+=3)
		{
			if(i==0)
			{
				pts[i].y = 40+Math.sin(ptr * R2D)*5;
				pts[i+1].y = 40+Math.sin((ptr+(i+1)*30) * R2D)*15;
				pts[i+2].y = 40+Math.sin((ptr+(i+2)*30) * R2D)*10;
				pts[i+3].y = 40+Math.sin((ptr+(i+3)*30) * R2D)*10;
			} else {
			
				pts[i+1].y=pts[i].y+(pts[i].y-pts[i-1].y);
				pts[i+2].y = 40+Math.sin((ptr+(i+2)*30) * R2D)*15;
				pts[i+3].y = 40+Math.sin((ptr+(i+3)*30) * R2D)*5;
			
			}
			
		}

		ptr+=1.5;
		plotBez();
		setTimeout(mp,15);
	
	}
	
	function plotBez()
	{
	
		waterpaper.clear();
		
		var mpby = getPointOnCurve(pts[0],pts[1],pts[2],pts[3],Math.sin(ptr * R2D)/200+0.2);
		waterpaper.path("M "+mpby.x+","+mpby.y+" C "+(mpby.x-10)+","+(mpby.y+10)+" " + (mpby.x-20)+","+(mpby.y+190)+" " + (mpby.x-40)+","+(mpby.y+190)).attr({"stroke":"#777"});
		waterpaper.image("http://phasetwo.org/img/buoy.gif",mpby.x-8,mpby.y-13,16,19);
		
		var wpath=["M",pts[0].x,pts[0].y];
		
		for(var i=0;i<pts.length-1;i+=3)
		{
			wpath.push("C");
			wpath.push(pts[i+1].x);
			wpath.push(pts[i+1].y);
			wpath.push(pts[i+2].x);
			wpath.push(pts[i+2].y);
			wpath.push(pts[i+3].x);
			wpath.push(pts[i+3].y);
		}		
		
		wpath.push("L");
		wpath.push(pts[pts.length-1].x);
		wpath.push(250.5);
		wpath.push("L");
		wpath.push(pts[0].x);
		wpath.push(250.5);
		wpath.push("L");
		wpath.push(pts[0].x);
		wpath.push(pts[0].y);
		
		waterpaper.path(wpath.join(',')).attr({"fill":"rgba(53,160,255,0.5)","stroke-width":0});

		var mp = getPointOnCurve(pts[3],pts[4],pts[5],pts[6],Math.sin(ptr * R2D)/200+0.4);
		var mp2 = getPointOnCurve(pts[3],pts[4],pts[5],pts[6],Math.sin(ptr * R2D)/200+0.6);
		var diff = mp.subtract(mp2);
		var angle = (diff.y == 0 ? 0 : Math.atan(diff.y/diff.x)* 180/Math.PI) ;
		var mpb = getPointOnCurve(pts[3],pts[4],pts[5],pts[6],Math.sin(ptr * R2D)/200+0.5);
		$("#boat").css("left",mpb.x-60).css("top",mpb.y-20).css("-webkit-transform","rotate("+angle+"deg)").css("-moz-transform","rotate("+angle+"deg)");

	}