// #############################################################################
// mini-pico-tiny convenience micro-framework, ymmv
/*
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ';'+style; }
function anim(id, transform, opacity, dur){
  css(id, '-webkit-transition:-webkit-transform'+
    ',opacity '+(dur||0.5)+'s,'+(dur||0.5)+'s;-webkit-transform:'+
    transform+';opacity:'+(1||opacity));
}
*/

/*
var startScale = 1;

function gestureStart(event){
	
}
function gestureChange(event){
	    e.preventDefault();
    e.target.style.webkitTransform =
        'scale(' + e.scale  + startScale  + ') rotate(' + e.rotation + startRotation + 'deg)';
}
function gestureEnd(event){
	var angle = event.rotation;
	var scale = event.scale;
	alert('angle=' + angle + ' scale='+scale);
	if(scale > 1.0){
		goPinchOpen();	
	}
	if(scale < 1.0){
		goPinchClose();	
	}
}
*/
var startX = 0;
var curX = 0;
var changeX = 0;
var thresholdX = 150;

var startY = 0;
var curY = 0;
var changeY = 0;
var thresholdY = 150;

//var tmpStartX = 0;
var	newX = 0;

var	enableNorth = true;
var	enableEast  = true;
var	enableSouth = true;
var	enableWest  = true;

var isOneFingerTouch = true;

/* ########################################################################## */

var thresholdSlidetext = -475;

function touchStartSlidetext(event) {
	startX = event.targetTouches[0].pageX;
	curX = 0;
	changeX = 0;
}

function touchMoveSlidetext(event) {
    event.preventDefault();
    curX = event.targetTouches[0].pageX - startX;
	curXnr = parseInt(curX) + parseInt(newX);
	event.targetTouches[0].target.style.webkitTransform = 'translate(' + curXnr + 'px, ' + 0 + 'px)';
	document.getElementById('img_touch').style.webkitTransform = 'translate(' + curXnr + 'px, ' + 0 + 'px)';
}

function touchEndSlidetext(event) {
	curXnr = parseInt(curX) + parseInt(newX);
	if (parseInt(curXnr) < thresholdSlidetext){ curXnr = thresholdSlidetext;}else{curXnr = 0;}
	newX = curXnr;
	document.getElementById('text_label').style.webkitTransform = 'translate(' + curXnr + 'px, ' + 0 + 'px)';
	document.getElementById('img_touch').style.webkitTransform = 'translate(' + curXnr + 'px, ' + 0 + 'px)';
}

/* ########################################################################## */

var pan_touchStartX  = 0; 
var pan_touchMoveX  = 0; 
var pan_relativeDeltaX    = 0; 
var pan_changeX = 0; 
var pan_absoluteDeltaX  = 0; 
var pan_previousDeltaX    = 0; 

var pan_touchStartY  = 0; 
var pan_touchMoveY  = 0; 
var pan_relativeDeltaY    = 0; 
var pan_changeY = 0; 
var pan_absoluteDeltaY  = 0; 
var pan_previousDeltaY    = 0; 

//var panorama_offset_right = -930; //1024+930;
var panorama_offset_right= -870; //1894-1024 = 870

/*
als je van het westen komt, dan moet van het panorama de rechterzijde in beeld zijn.
coming_from wordt gezet op twee plekken: in viapanam.js: pageRight() en pageLeft()
*/
//if(coming_from == 'east'){
//	pan_previousDeltaX = panorama_offset_right;
//    document.getElementById('img_panorama').style.webkitTransform = 'translate(' + panorama_offset_right  + 'px, ' + 0 + 'px)';     
//}else{
	pan_previousDeltaX = 0;
	pan_previousDeltaY = 0;
//}


function touchStart_panorama(event) {
	pan_touchStartX = event.targetTouches[0].pageX;
	pan_relativeDeltaX = 0;
	pan_changeX = 0;

	pan_touchStartY = event.targetTouches[0].pageY;
	pan_relativeDeltaY = 0;
	pan_changeY = 0;

}

function touchMove_panorama(event) {
    event.preventDefault();
    pan_touchMoveX = event.targetTouches[0].pageX;
    pan_relativeDeltaX = pan_touchMoveX - pan_touchStartX;
	pan_absoluteDeltaX = parseInt(pan_relativeDeltaX) + parseInt(pan_previousDeltaX);

    pan_touchMoveY = event.targetTouches[0].pageY;
    pan_relativeDeltaY = pan_touchMoveY - pan_touchStartY;
	pan_absoluteDeltaY = parseInt(pan_relativeDeltaY) + parseInt(pan_previousDeltaY);
    
	event.targetTouches[0].target.style.webkitTransform = 'translate(' + pan_absoluteDeltaX  + 'px, ' +  pan_absoluteDeltaY + 'px)';     

}

function touchEnd_panorama(event) {
	//alert('pan_absoluteDeltaX = ' + pan_absoluteDeltaX + ' pan_absoluteDeltaY = ' + pan_absoluteDeltaY);
	pan_previousDeltaX = pan_absoluteDeltaX;         
	pan_previousDeltaY = pan_absoluteDeltaY;         
/*
	if(pan_absoluteDeltaX > 0){ if(enableWest)pageLeft(); }
	if(pan_absoluteDeltaX < panorama_offset_right){  if(enableEast)pageRight(); }

	if(pan_absoluteDeltaY > 0){ if(enableWest)pageLeft(); }
	if(pan_absoluteDeltaY < panorama_offset_right){  if(enableEast)pageRight(); }
	
	enableNorth = true;
	enableEast  = true;
	enableSouth = true;
	enableWest  = true;
*/
}

/* ########################################################################## */

/*
var pan_startX  = 0;
var pan_curX    = 0; 
var pan_changeX = 0;
var pan_curXnr  = 0;
var pan_newX    = 0;

function touchStartPanorama(event) {
	pan_startX = event.targetTouches[0].pageX;
	pan_curX = 0;
	pan_changeX = 0;
	            
	touchStart(event)

}

function touchMovePanorama(event) {
    event.preventDefault();
    pan_curX = event.targetTouches[0].pageX - pan_startX;
	pan_curXnr = parseInt(pan_curX) + parseInt(pan_newX);
    event.targetTouches[0].target.style.webkitTransform = 'translate(' + pan_curXnr  + 'px, ' + 0 + 'px)';     
	
	touchMove(event)
}

function touchEndPanorama(event) {
	pan_curXnr = parseInt(pan_curX) + parseInt(pan_newX);
	pan_newX = pan_curXnr;         
	
	enableNorth = false;
	enableEast  = false;
	enableSouth = true;
	enableWest  = false;
	touchEnd(event)
}
*/

/* ########################################################################## */

function touchStart(event) {
	if(event.targetTouches.length == 1){	isOneFingerTouch=true;	}
	if(event.targetTouches.length > 1){		isOneFingerTouch=false;	}
	startX = event.targetTouches[0].pageX;
	curX = 0;
	changeX = 0;

	startY = event.targetTouches[0].pageY;
	curY = 0;
	changeY = 0;
}

function touchMove(event) {
	if(event.targetTouches.length > 1){
		isOneFingerTouch=false;
	}
	if(event.targetTouches.length == 1){
    event.preventDefault();
    curX = event.targetTouches[0].pageX; // Updated X,Y coordinates
    curY = event.targetTouches[0].pageY; // Updated X,Y coordinates
	}
}

function touchEnd(event) {    
	if(isOneFingerTouch==true){ 
		var goNESW=false;
		changeX = startX - curX;
		changeY = startY - curY;
		var cx = changeX; if(cx < 0) cx = cx *-1;
		var cy = changeY; if(cy < 0) cy = cy *-1;
		if(cx > cy ){
			if(changeX > thresholdX) {
				goNESW=true;
				if(enableEast)pageRight();
			}
			if(changeX < (thresholdX*-1)) {
				goNESW=true;
				if(enableWest)pageLeft();
			}
		}

		if(cx < cy ){
			if(changeY > thresholdY) {
				goNESW=true;
				if(enableSouth)pageDown();
			}
			if(changeY < (thresholdY*-1)) {
				goNESW=true;
				if(enableNorth)pageUp();
			}
		}
	}	
	curX = 0;
	curY = 0;
	
	enableNorth = true;
	enableEast  = true;
	enableSouth = true;
	enableWest  = true;
	
	
	if(goNESW==false){
		goIn();
	}
}

/* ########################################################################## */

function pageRight(){
	goEast();
}

function pageLeft(){
	goWest();
}

function pageDown(){
	goSouth();
}

function pageUp(){
	goNorth();
}

/* ########################################################################## */


function center_canvas(){
	var h = $(window).height();  
	var htop = 0; 
	var hdelta = h - 748; 
	if(hdelta > 5) htop=hdelta/2; 
	document.getElementById('canvas000').style.top = htop.toString() + 'px'; 
	var w = ($(window).width() - 1024) / 2; 
	document.getElementById('canvas000').style.left = w.toString() + 'px'; 
}