function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); }
	function $class(v,o) { return((typeof(o)=='object'?o:document).getElementsByClassName(v)); }
	
	const SupportsTouches = ('createTouch' in document);
	const StartEventType = SupportsTouches ? 'touchstart' : 'mousedown';
	const MoveEventType = SupportsTouches ? 'touchmove' : 'mousemove';
	const EndEventType = SupportsTouches ? 'touchend' : 'mouseup';
	
	const svgW = 4636;
	const svgH = 2824;
	
	var scaler = 1;
	var oldDiffX = 0;
	var oldDiffY = 0;
	var firefox = false;
	
	function init(){
		
			var wh =  window.innerHeight;
			var ww =  window.innerWidth;
			var downX;
			var downY;
			var left; 
			var top;
			var ext = ".mp4";
			
			if(navigator.userAgent.match(/Firefox/i)){
				firefox = true;
			}
			
			if(firefox){
				ext = ".ogv";
			}
			
			if(!firefox){
				$("tile1").style.webkitTransform = "translate3d( "+(- (svgW/2-ww/2))+"px,-950px, 0)"; 
				
			}else{
				$("tile1").style.MozTransform = "translate( "+(- (svgW/2-ww/2))+"px,-950px)"; 	
			}
				
			window.addEventListener("resize", function(e){
				var wh =  window.innerHeight;
				var ww =  window.innerWidth;
				
				if(!firefox){
					$("tile1").style.webkitTransform = "translate3d( "+(- (svgW/2-ww/2))+"px,-950px, 0)"; 
					
				}else{
					$("tile1").style.MozTransform = "translate( "+(- (svgW/2-ww/2))+"px,-950px)"; 	
				}

							}, false);
		

				if(!firefox){
					left = parseInt(($('tile1').style.webkitTransform.match(/3d\((-?(\d*.?\d*))/))[1]);
					top = parseInt(($('tile1').style.webkitTransform.match(/, (-?(\d*\.?\d*))/))[1]);
				}else{
					 left = 0;//parseInt(($('tile1').style.MozTransform.match(/3d\((-?(\d*.?\d*))/))[1]);
					 top = 0;//parseInt(($('tile1').style.MozTransform.match(/, (-?(\d*\.?\d*))/))[1]);
				}
				
				$('tile1').addEventListener(StartEventType, function(e){
					e.preventDefault();


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

					downX=evt.clientX;
					downY=evt.clientY;
					$('tile1').addEventListener(MoveEventType, slider, false);
					
					if(!firefox){
						$('tile1').style.cursor = "-webkit-grabbing";
					
						left = parseInt(($('tile1').style.webkitTransform.match(/3d\((-?(\d*.?\d*))/))[1]);
						top = parseInt(($('tile1').style.webkitTransform.match(/, (-?(\d*\.?\d*))/))[1]);
					}else{
						$('tile1').style.cursor = "-moz-grabbing";
						
						left = parseInt(($('tile1').style.MozTransform.match(/\((-?(\d*.?\d*))/))[1]);
						top = parseInt(($('tile1').style.MozTransform.match(/, (-?(\d*\.?\d*))/))[1]);
						
						
					}
				}, false);
				
				$('tile1').addEventListener(EndEventType, function(e){
					//slider(event);
					var evt = (SupportsTouches && e.touches && e.touches.length > 0) ? e.touches[0] : e;
					
					evt.preventDefault();
					
					//savePos(transLeft);
					$('tile1').style.cursor = "-webkit-grab";
					$('tile1').removeEventListener(MoveEventType, slider, false);
					
					if(!firefox){
						
						left = parseInt(($('tile1').style.webkitTransform.match(/3d\((-?(\d*.?\d*))/))[1]);
						top = parseInt(($('tile1').style.webkitTransform.match(/, (-?(\d*\.?\d*))/))[1]);
					
					}else{
						$('tile1').style.cursor = "-moz-grab";
						
						left = parseInt(($('tile1').style.MozTransform.match(/\((-?(\d*.?\d*))/))[1]);
						top = parseInt(($('tile1').style.MozTransform.match(/, (-?(\d*\.?\d*))/))[1]);
					}
					
					oldDiffX = 0;
					oldDiffY = 0;
					
					if(scaler >= 1){
						m = (svgW*scaler/2) - (svgW/2);
					}else{
						m = ((svgW*scaler/2)+ ww/8 - (svgW/2)) ;
					}

					
					if (left  < -(svgW+m - ww)){
						st = "translate3d("+-(svgW+m - ww)+"px, "+top+"px, 0) scale("+scaler+")";
						if(!firefox){
							$('tile1').style.webkitTransform = st;
						}else{
							st = "translate("+-(svgW+m - ww)+"px, "+top+"px) scale("+scaler+")";
							$('tile1').style.MozTransform = st;
						}
					}
					
					if (left > m){
						st = "translate3d("+m+"px, "+top+"px, 0) scale("+scaler+")";
						if(!firefox){
							$('tile1').style.webkitTransform = st;
						}else{
							st = "translate("+m+"px, "+top+"px) scale("+scaler+")";
							$('tile1').style.MozTransform = st;
						}
					}
					
					
					

					my = (svgH*scaler/2) - (svgH/2);
				
					if (top  > my){
						st = "translate3d("+left+"px, "+my+"px, 0) scale("+scaler+")";
						if(!firefox){
							$('tile1').style.webkitTransform = st;
						}else{
							st = "translate("+left+"px, "+my+"px) scale("+scaler+")";
							$('tile1').style.MozTransform = st;
						}
					}

					if (top  < -(svgH+my - wh)){
						st = "translate3d("+left+"px, "+-(svgH+my - wh)+"px, 0) scale("+scaler+")";
						if(!firefox){
							$('tile1').style.webkitTransform = st;
						}else{
							st = "translate("+left+"px, "+-(svgH+my - wh)+"px) scale("+scaler+")";
							$('tile1').style.MozTransform = st;
						}
					}
					
				}, false);
				
				function slider(e) {
					e.preventDefault();

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

					var upX=evt.clientX;
					xd = (upX - downX);
					
					var upY=evt.clientY;
					yd = (upY - downY);
					
					//console.log(upY);
					
					move(xd, yd);
					
				}
				
			
				
				function move(xd, yd) {
					xd = xd  ;
					yd = yd  ;
					var transLeft;
	
					transLeft = left +  xd;
					transTop = top +  yd;
					if(!firefox){
						$('tile1').style.webkitTransform = 
							"translate3d("+transLeft+"px, "+transTop+"px, 0) scale("+scaler+")"; 
					}else{
						$('tile1').style.MozTransform = 
							"translate("+transLeft+"px, "+transTop+"px) scale("+scaler+")";
					}
				}
				
				
				var placeholders = $class("placeholder");
				
				
				for ( i=0; i< placeholders.length; i++) {
				    placeholders[i].addEventListener(StartEventType, function(event){
						
						$('mask').addEventListener(StartEventType, function(event){
							$('mask').removeAttribute("class", "fadeIn");
							$('video').removeAttribute("class", "fadeIn");
							$('current').pause();
						}, false);
						
						$('current').src =  this.getAttribute("rel")+ext;
						$('current').load();
						
						vw = this.getAttribute("ww") /2 || 320;
						$('video').style.left = ww/2 - vw+"px";

						

						//$('video').style.display = "block";
						$('mask').setAttribute("class", "fadeIn");
						$('video').setAttribute("class", "fadeIn");

						$('current').play();
					}, false);
					
				}
				

		var oldmousex = left;
		var oldmousey = top;

		if (firefox){
			scrolle = "DOMMouseScroll";
		}else{
			scrolle = "mousewheel";
		}
				
		document.addEventListener(scrolle, function(e) { 
			
			if (firefox){
				wheel = e.detail / -1200;
				
			}else{
				wheel = e.wheelDeltaY / 12000;
				
			}
			scaler += wheel;
			
			if (scaler < 0.001){
				scaler = 0.001;
			}
			
			if (firefox){
				left = parseInt(($('tile1').style.MozTransform.match(/\((-?(\d*.?\d*))/))[1]);
				top = parseInt(($('tile1').style.MozTransform.match(/, (-?(\d*\.?\d*))/))[1]);
			}else{
				left = parseInt(($('tile1').style.webkitTransform.match(/3d\((-?(\d*.?\d*))/))[1]);
				top = parseInt(($('tile1').style.webkitTransform.match(/, (-?(\d*\.?\d*))/))[1]);
			}
			
			
			if(oldDiffX == 0){
				oldDiffX = left;
			}
			if(oldDiffY == 0){
				oldDiffY = top;
			}

			// 				}
			if(wheel > 0){
				var mousex = (left+(oldDiffX  - left))+wheel;
				var mousey = (top+(oldDiffY  - top))+wheel;
			}else{
				var mousex =left;
				var mousey = (top+(oldDiffY  - top))-scaler*2;
			}

			

			tr = "translate3d("+(mousex)+"px, "+(mousey)+"px, 0px) scale("+scaler+")";
			
			
			if(!firefox){
				$('tile1').style.webkitTransform = tr;
			}else{
				tr = "translate("+(mousex)+"px, "+(mousey)+"px) scale("+scaler+")";
				$('tile1').style.MozTransform = tr;
			}
			
			oldDiffX = left;
			oldDiffY = top;

			
		}, false);

	}