var shipGroup = document.getElementById("shipMasterPosition"),
				shipX = 0,
				shipDirection,
				shipSpeed = 1.7,
				w = window.innerWidth,
				h = window.innerHeight,
				factor = 50, // The height of the tile
				rows = Math.floor(h / factor),
				row,
				end = w + factor,
				startedLeft = 0,
				startedRight = 0,
				shouldLoop = false;


// Make a timeline that runs once, at the end of each cycle, it checks to see if it should loop again
var main_tl = new TimelineLite({paused:true, onUpdate:moveShip, onComplete:repeat});

main_tl.add(waveMoveVert(patternLeft, 2), 0);
main_tl.add(waveMoveHorz(patternLeft, 2, "+"), 0);
main_tl.add(waveMoveVert(patternRight, 2), 0);
main_tl.add(waveMoveHorz(patternRight, 2, "-"), 0);
main_tl.add(waveMoveVert(patternMask, 2), 0);



// A secondary motion
var waveMask_tl = new TimelineLite({paused:true});

waveMask_tl.add(waveMoveHorz(patternMask, 2, "-"));




function boatRock(dur) {

	this.dur = dur || 1;
	var ease = Power1.easeInOut;

		TweenMax.fromTo(shipTranslation, this.dur*2, {y:0, x:"-=30"}, {y:"-=10", x:"+=30", ease:ease, repeat:-1, yoyo:true});
		TweenMax.fromTo(ship, this.dur, {rotation:"-4", transformOrigin:"50% 100%"}, {rotation:"4", ease:ease, repeat:-1, yoyo:true});

}




function moveShip() {

	TweenMax.set(shipWavePosition, {attr:{transform:"translate(" + shipX + ", " + "0)"}});


// TO DO: Check if mobile, because the preceived speed of the boat is different when viewing in a phone
if(shipDirection === "+" ? shipX += shipSpeed : shipX -= shipSpeed);

}




// Because the pattern sits inside a <defs> tag, you must animate it using the attrPlugin. You also have to make sure the attribute to be tweened exist in the tag otherwise GSAP cannot affect it.
function waveMoveVert(el, dur) {

	return TweenMax.to(el, dur * 0.5, {attr:{y:"-=10"}, ease:Power1.easeInOut, repeat:1, yoyo:true});

}




function waveMoveHorz(el, dur, direction) {

	return TweenMax.to(el, dur, {attr:{x:direction+"=100"}, ease:Linear.easeNone});

}




function positionShip() {

	// Pick a random vertical position
	row = getRandomRow(1, (rows - 2));

	// Pick a random horizontal position
	var shipXStart = getRandomInterger(0,1) * w;

	// Make sure the ship does not start from the same side too many times
	if(startedLeft < 3) {

		if(startedRight < 3) {

			if(shipXStart === 0) {
				positionShipHorz("left");

			} else {
				positionShipHorz("right");

			}

		} else {
			shipXStart = 0;
			positionShipHorz("left");
			startedRight = 0;

		}

	} else {
		shipXStart = w;
		positionShipHorz("right");
		startedLeft = 0;

	}


	// Flip the direction in which the ship moves
	if(shipX < w ? shipDirection = "+" : shipDirection = "-");


	var shipY = row * factor;
	var waveY = shipY + factor; // offset the wave by one row 

	// Check which direction to move
	var direction = getDirection();

	// Position the ship and the ship mask at the same level
	TweenMax.set(shipMasterPosition, {attr:{transform:"translate(0, " + shipY + ")"}})
	TweenMax.set(shipMask, {attr:{transform:"translate(0, " + waveY + ")"}})
}



function positionShipHorz (side) {
	if(side === "left" ) {
				shipX = -(factor * 2);
				TweenMax.set("#shipDirection", {attr:{transform:"scale(1, 1)"}});
				startedLeft++;

	} else {
				shipX = w + (factor * 2);
				TweenMax.set("#shipDirection", {attr:{transform:"scale(-1, 1)"}});
				startedRight++;

	}

	// console.log("positionShipHorz:", shipX)
}




function getRandomRow(min,max) {
	return getRandomInterger(min,max);

}




function getRandomInterger(min,max) {
		return Math.floor(Math.random()*(max-min+1)+min);

}




function getDirection () {
		if(row % 2 !== 0) {

			return "+";

		} else {

		return "-";

		}
}




function repeat() {
	
	// Check to see if ship has left the screen
	if( shipX > end || shipX < -(factor * 2) ) {
		// console.log("End of the world", "W:", w, "ShipX:", shipX, "End:", end, "Factor:", (factor*2));

		// Should we stop the secondary motion?

		// Reposition the ship
		positionShip();

		// Start it all again
		start();		

	} else {
		// console.log("Not the end yet")

		start();

	}		

}




function start() {

	// Adjust the wave mask direction accordingly
	waveMaskDirection();

	// play the animations
	main_tl.play(0);

}




function waveMaskDirection() {

	if(getDirection() === "-") {
		return waveMask_tl.play(0);
	} else {
		return waveMask_tl.totalProgress(1).reverse();
	}

}


var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};



function onResize() {
	
	// Hide the ship as we recalculate things
	TweenMax.set([ship,shipMask], {autoAlpha:0});
	
			w = window.innerWidth;
			h = window.innerHeight;
			end = w + factor;
			rows = Math.floor(h / factor);
			
			positionShip();

	// Show the ship after we recalculate things
	TweenMax.set([ship,shipMask], {autoAlpha:1});
			
}





function init() {
	
	// Is this a mobile device?
	if( isMobile.any() ) {
		// Yes
		// Update the speed of the ship
		shipSpeed = 5;
		
		// Listen for resize changes so we can recaltulate the inner.width and inner height in mobile devices
		window.addEventListener("resize", onResize)

	}
	
	
	boatRock();

	positionShip();
		
 start();
	
		
		TweenMax.set(ship, {autoAlpha:1});
	
}





 // wait until DOM is ready
 document.addEventListener("DOMContentLoaded", function(event) {

 // wait until window, stylesheets, images, links, and other media assets are loaded
 window.onload = function() {

  // All ready, start!		
		init();


  };

 });