function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); }

	const SupportsTouches = ('createTouch' in document);
	const StartEventType = SupportsTouches ? 'touchstart' : 'mousedown';
	const MoveEventType = SupportsTouches ? 'touchmove' : 'mousemove';
	const EndEventType = SupportsTouches ? 'touchend' : 'mouseup';

	var left = 0;
	var scale;
	var timer;
	var trans = false;
	var firefox = false;
  var transLeft = 0;
  
  var posSky = 0;
  var posMount = 0;
  var posGround = 0;
  var posTrees = 0;
  

	if(navigator.userAgent.match(/Firefox/i)){
		firefox = true;
	}

	function tranform(what, how_left) {
    // /console.log(posSky);
	  if(how_left != 0){
	    how_left += "px";
	  }

	  var how_top = 0;
	  // if(how_top != 0){
	  //       how_top += "px";
	  //     }
    
	  if(firefox){
	    what.style.MozTransform = "translate("+how_left+", "+how_top+")";  
	  }else{
	    what.style.webkitTransform = "translate3d("+how_left+", "+how_top+", 0)";
	  }
	}

	


	function init() {
		var speed;
		if(SupportsTouches){
			 speed = 6;
		}else{
			speed = 0;
		}
		var downX;
		winW = window.innerWidth;

		left = -parseInt($('ground').offsetWidth/2);

		tranform($('sky'), left);
		tranform($('mountains'), left);
		tranform($('ground'), left );
		tranform($('trees'), left );
    
     posSky = left;
     posMount = left;
     posGround = left;
     posTrees = left;
    

		var preslide = false;

		$('slide').addEventListener(StartEventType, function(e){
			e.preventDefault();

			if(trans == false){
				makeTrans();
			}

			var evt = (SupportsTouches && e.touches && e.touches.length > 0) ? e.touches[0] : e;

			downX=evt.clientX;
			$('slide').addEventListener(MoveEventType, slider, false);

		}, false);



		$('slide').addEventListener(EndEventType, function(event){
			

			savePos(transLeft);

			$('slide').removeEventListener(MoveEventType, slider, false);
		}, false);

		function move(xd) {
			var transLeft;
      
			transLeft = posSky +  xd /(40-speed);

  		tranform($('sky'), transLeft);
  		posSky = transLeft;
  		
			
			transLeft = posMount + xd /(20-speed);
			tranform($('mountains'), transLeft);
			
			posMount = transLeft;
      
      left = posGround;
      
			transLeft = left + xd /(10-speed);
			tranform($('ground'), transLeft);
			

			tranform($('trees'), transLeft);
      
      posGround = transLeft;
       posTrees = transLeft;
			
		}



		function slider(e) {
			e.preventDefault();

			clearTimeout(timer);

			var evt = (SupportsTouches && e.touches && e.touches.length > 0) ? e.touches[0] : e;

			upX=evt.clientX;
			xd = (upX - downX);
			
			var transLeft;
			

			move(xd);




		}

		document.addEventListener("keydown",keyyed, false);

		function keyyed(e){
			if(e.keyCode == 39 || e.keyCode == 37){

				if(e.keyCode == 39){
			        xd = 1000;
			    }

				if(e.keyCode == 37){
			        xd = -1000;
			    }

				if(trans == false){
					makeTrans();
				}

				var transLeft;

				move(xd);
			}
		}

		$('trees').addEventListener(StartEventType, maybe_place, false);

		retrive();
	}
	var old_e;
	function maybe_place(e){
		timer = window.setTimeout("place(old_e)", 100);
		old_e = e;
	}


	function place(e){

		clearTimeout(timer);

		e.preventDefault();

		var evt = (SupportsTouches && e.touches && e.touches.length > 0) ? e.touches[0] : e;

		var x = evt.clientX - posTrees;
		var y = evt.clientY - $("slide").offsetTop;


		draw(x,y);

	}

	function draw(x,y) {

	    canvas  = document.createElement('canvas');
		canvas.height= 250;
		canvas.width= 300;
		canvas.style.left = x - 150 + "px";
		canvas.style.top = y - 350 + "px";

		$("trees").appendChild(canvas);
	    context = canvas.getContext('2d');


		context.strokeStyle = "#000"; 
		context.stroke();
		context.translate(150,250);

		scaleY = (y-300)/310;

		context.scale(scaleY,scaleY);

		branch(0);

		save(canvas, (x - 150)+"x"+(y - 350));

	}

	function save(can, name) {
	    var dataURL = can.toDataURL("image/png");
	    localStorage.setItem(name, dataURL);
	}

	function savePos(left) {
	    localStorage.setItem("savedPosition", left);
	}

	function retrive() {     

	    instorage = localStorage.length;


	    for (var i = 0; i < instorage; i++) {
	        key = localStorage.key(i);

			if(key != "savedPosition"){
				im = localStorage.getItem(key);    
		        imagex = new Image();
		        imagex.src = im;


				imagex.style.position = "absolute";

				pos = (key.match(/(\d*)x(\d*)/));


				if(pos){
					if(pos[1]){
					imagex.style.left = pos[1]+"px";
					imagex.style.top = pos[2]+"px";
					}
				}


			      $('trees').appendChild(imagex);
			}else{

				transLeft = parseInt(localStorage.getItem(key));    
        
				tranform($('sky'), transLeft);
    		tranform($('mountains'), transLeft);
    		tranform($('ground'), transLeft );
    		tranform($('trees'), transLeft );
        
         posSky = transLeft;
         posMount = transLeft;
         posGround = transLeft;
         posTrees = transLeft;

			}

	    }







	}

	function makeTrans(){
		$('sky').setAttribute("class", "trans");
		$('mountains').setAttribute("class", "trans");
		$('ground').setAttribute("class", "trans");
		$('trees').setAttribute("class", "trans");

		trans = true;
	}

	function randomXToY(minVal,maxVal,floatVal)
	{
	  var randVal = minVal+(Math.random()*(maxVal-minVal));
	  return randVal
	}

	function branch(depth){
		height =  250
		if(depth < 10){

			line(0,0,0, -height/3);
			context.save();
				context.translate(0, -height/5);
				var rot = randomXToY(-Math.PI/4, Math.PI/4);
				context.rotate(rot);
				context.scale(0.7, 0.7);

				branch(depth+1);
			context.restore();
			context.save();
				context.translate(0, -height/3);
				var rot = randomXToY(-Math.PI/4, Math.PI/4);
				context.rotate(rot);
				context.scale(0.7, 0.7);
				branch(depth+1);
			context.restore();

		}else{

			ellipse(0,0,50,50);
		}
	}

	function line(sx, sy, ex, ey){
		context.moveTo(sx, sy); 
		context.lineTo(ex, ey);
		context.strokeStyle = "#4c4439"; 
		context.stroke();
	}

	function ellipse(x, y, w, h) {
	  var kappa = .5522848;
	      ox = (w / 2) * kappa; // control point offset horizontal
	      oy = (h / 2) * kappa; // control point offset vertical
	      xe = x + w;           // x-end
	      ye = y + h;           // y-end
	      xm = x + w / 2;       // x-middle
	      ym = y + h / 2;       // y-middle

	  context.beginPath();
	  context.moveTo(x, ym);
	  context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
	  context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
	  context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
	  context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
	  context.closePath();
	  context.fillStyle = "#246236"; 
		context.strokeStyle = "#246236"; 

	  context.fill();
	}