var isiPad = navigator.userAgent.match(/iPad/i);
if(isiPad) {
	// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
	// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM

	// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger

	var triggerElementID = null; // this variable is used to identity the triggering element
	var fingerCount = 0;
	var startX = 0;
	var startY = 0;
	var curX = 0;
	var curY = 0;
	var deltaX = 0;
	var deltaY = 0;
	var horzDiff = 0;
	var vertDiff = 0;
	var minLength = 72; // the shortest distance the user may swipe
	var swipeLength = 0;
	var swipeAngle = null;
	var swipeDirection = null;

	// Drag & Drop | Page Mini Joaillerie
	var dragFirstRun = false;
	var dragCurrentX = 0;
	var dragCurrentY = 0;
	var dragLastX = null;
	var dragLastY = null;
}
// The 4 Touch Event Handlers

// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');"  ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">

function touchStart(event,passedName) {

	// get the total number of fingers touching the screen
	fingerCount = event.touches.length;
	// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
	// check that only one finger was used
	if ( fingerCount == 1 ) {
		// get the coordinates of the touch
		startX = event.touches[0].pageX;
		startY = event.touches[0].pageY;
		// store the triggering element ID
		triggerElementID = passedName;
	} else {
		// more than one finger touched so cancel
		touchCancel(event);
	}
}

function touchMove(event) {
	var maDate = new Date();
	var t1 = maDate.getTime();

	if ( event.touches.length == 1 ) {
		curX = event.touches[0].pageX;
		curY = event.touches[0].pageY;
		if(triggerElementID == 'interview-texte' || triggerElementID == 'mosaiques-BC') {
			if(triggerElementID == 'mosaiques-BC') {
				contenu = $('mosaiques-BC');
				contenant = $('zoneutile-container');
			} else {
				contenu = $('interview-texte-contenu');
				contenant = $('interview-texte');
			}

			event.preventDefault();

			caluculateAngle();
			determineSwipeDirection();
			swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
			if( swipeDirection == 'up' ) {
				top = parseInt(contenu.getStyle('top'));
				if(isNaN(top)) {
					top = 0;
				}
				move = top - swipeLength;
				if(move < contenant.getHeight() - contenu.getHeight()) {
					move = contenant.getHeight() - contenu.getHeight();
				}
				contenu.setStyle({
					'top' : move + 'px'
				});
				startX = curX;
				startY = curY;
			} else if( swipeDirection == 'down' ) {
				hauteurConteneur = contenant.getHeight();
				top = parseInt(contenu.getStyle('top'));
				if(isNaN(top)) {
					top = 0;
				}
				move = top + swipeLength;
				if(move > 0) {
					move = 0;
				}
				contenu.setStyle({
					'top' : move + 'px'
				});
				startX = curX;
				startY = curY;
			}
		} else if(triggerElementID == 'zonegrid-container') {
			event.preventDefault();

			var conteneur = $('grid-container');
			
			//First run
			if(!dragFirstRun){
				var currentPosition = conteneur.positionedOffset();
				dragCurrentX = currentPosition.left;
				dragCurrentY = currentPosition.top;
				conteneur.writeAttribute('style','');
				conteneur.style.webkitTransform = 'translate('+(dragCurrentX)+'px, '+(dragCurrentY)+'px)';
				dragFirstRun = true;
			}
			if(dragLastX == null && dragLastY == null){
				dragLastX = event.touches[0].pageX;
				dragLastY = event.touches[0].pageY; 
			} else {
				var X = dragLastX - event.touches[0].pageX;
				var Y = dragLastY - event.touches[0].pageY;
				
				if( (dragCurrentX-X) >= left_min && (dragCurrentX-X) <= left_max && (dragCurrentY-Y) >= top_min && (dragCurrentY-Y) <= top_max ){
					//On garde en mémoire la position top et left du conteneur
					dragCurrentX -= X;
					dragCurrentY -= Y;

					conteneur.style.webkitTransform = 'translate('+(dragCurrentX)+'px, '+(dragCurrentY)+'px)';
				}

			}
			
		};
	} else {
		touchCancel(event);
	}

	var t2 = maDate.getTime();
	var diff = t2-t1;
}

function touchEnd(event) {
	// check to see if more than one finger was used and that there is an ending coordinate
	if ( fingerCount == 1 && curX != 0 ) {
		// use the Distance Formula to determine the length of the swipe
		swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
		// if the user swiped more than the minimum length, perform the appropriate action
		if ( swipeLength >= minLength ) {

			event.preventDefault();
			if (!event) {
				var event = window.event;
			}
			try {
				event.stopPropagation();
			} catch(er) {
				event.cancleBubble = true;
			}

			caluculateAngle();
			determineSwipeDirection();
			processingRoutine();
			touchCancel(event); //reset the variables
		} else {
			//				element = event.element();
			//				click_me(element);
			touchCancel(event);
		}
	} else {
		//			element = event.element();
		//			click_me(element);
		touchCancel(event);
	}
}


function touchCancel(event) {
	// reset the variables back to default values
	fingerCount = 0;
	startX = 0;
	startY = 0;
	curX = 0;
	curY = 0;
	deltaX = 0;
	deltaY = 0;
	horzDiff = 0;
	vertDiff = 0;
	swipeLength = 0;
	swipeAngle = null;
	swipeDirection = null;
	triggerElementID = null;
	dragLastX = null;
	dragLastY = null;
}

function caluculateAngle() {
	var X = startX-curX;
	var Y = curY-startY;
	var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
	var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
	swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
	if ( swipeAngle < 0 ) {
		swipeAngle =  360 - Math.abs(swipeAngle);
	}
}

function determineSwipeDirection() {
	if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
		swipeDirection = 'left';
	} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
		swipeDirection = 'left';
	} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
		swipeDirection = 'right';
	} else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
		swipeDirection = 'down';
	} else {
		swipeDirection = 'up';
	}
}

//Simuler un click sur un élément passé en paramètre.
function click_me(element) {
	var evt = document.createEvent("MouseEvents"); // créer un évennement souris
	evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  // initialiser l'évennement déja crée par un click
	if(Object.isElement(element)) {
		var cb = element;
	} else {
		var cb = document.getElementById(element); // pointe sur l'élement
	}
	cb.dispatchEvent(evt);  // envoyer l'évennement vers l'élement
}

function processingRoutine() {
	if ( swipeDirection == 'left' ) {
		if($$('body[class*="cms-stylebook"]').size()) {
			stylebookPageSuiv();
		} else if($$('.eboutique-index-index').size()) {
			click_me('categorie-scroller-droite');
		} else if($$('body.magazine').size()) {
			click_me('magazine-sommaire-scroller-droite');
		} else if($$('body.magazine').size()) {
			click_me('magazine_navigation_droite');
		} else if($$('body.ustorelocator-location-map').size()) {
			click_me('boutiques-scroller-droite');
		}
	} else if ( swipeDirection == 'right' ) {
		if($$('body[class*="cms-stylebook"]').size()) {
			stylebookPagePrec();
		} else if($$('.eboutique-index-index').size()) {
			click_me('categorie-scroller-gauche');
		} else if($$('body.magazine').size()) {
			click_me('magazine-sommaire-scroller-gauche');
		} else if($$('body.magazine').size()) {
			click_me('magazine_navigation_gauche');
		} else if($$('body.ustorelocator-location-map').size()) {
			click_me('boutiques-scroller-gauche');
		}
	}
}

function setCookie(nom, valeur) {
	document.cookie = nom + "=" + valeur + "; path=/";
}

function getCookie(nom) {
	debut = document.cookie.indexOf(nom + "=");
	if (debut >= 0) {
		debut += nom.length + 1;
		fin = document.cookie.indexOf(";",debut);
		if (fin < 0) {
			fin = document.cookie.length;
		}
		return unescape(document.cookie.substring(debut,fin));
	}
	return "";
}

function ajoutOnClickMiniFiche() {
	if(isiPad) {
		$$('.minifiche-produit .close-button').each( function(element) {
			element.observe('click', function(event) {
				var element = event.element();
				element = element.up('.minifiche-produit');
				if(element)
					element.hide();
			});
		});
	}
}

if(isiPad) {
	Event.observe(window,"load", function() {
		//Ajout d'une classe CSS dans la balise body, pour diffèrencier l'iPad d'un navigateur classique facielement, même dans le CSS
		$$('body')[0].addClassName('agatha-pour-ipad');

		//Affiche le message sur l'orientation de l'iPad
		if($$('body.cms-page-view').size()) {
			var message = false;
			message = getCookie('messageOrientation');
			//Si le message n'a pas déjà été affiché
			orientation = 0;
			if(message == false || message == '') {
				if(orientation == 0 || orientation == 180) {
					$('message-orientation-ipad').show();
					setCookie('messageOrientation', 1);
				}
			}
		}

		//Correction pour les 3 menus déroulants du header (langue, myagatha et le panier) ainsi que la liste de choix des homes.
		//Cette correction permet la fermeture des listes une fois ouverte.
		var menuOuvert=new Array();
		$$('*[rel^="menu-"]').each( function(element) {
			element.stopObserving();
		});
		$$('*[rel^="menu-"] .conteneur-etiquette').each( function(element) {
			element.stopObserving();
			menuOuvert.push(element.next());
			element.observe('click', function(event) {
				event.stop();
				rel = this.up().readAttribute('rel');
				menuOuvert.each( function(e) {
					if(e != $(rel)) {
						e.hide();
					}
				});
				$(rel).toggle();
			});
		});
		$$('.photo-produit .image-produit').each( function(element) {
			element.stopObserving('mouseout');
		});
		//Safari mobile ne gèrant pas la position: fixed, on ne peut pas avoir le même comportement sur l'iPad que sur un vrai navigateur. Donc à la place on fait un simple scrollTo.
		// Sur un "vrai" navigateur, si le header de la page n'est pas visible quand on ajoute un produit en Ajax, le panier du header apparait en position: fixed dansd le coin droite du navigateur.
		$$('.bouton-ajout-panier').each( function(element) {
			element.observe('click', function() {
				Effect.ScrollTo('menu-panier');
			});
		});
		//A voir si la deuxième condition est suffisemment robuste
		if($$('body[class*="cms-stylebook"]').size()) {
			$$('#fullpage-container img#STYLEBOOK02').each( function(element) {
				element.addEventListener('touchstart', function(e) {
					touchStart(e,e.element());
				}, false);
				element.addEventListener('touchmove', touchMove, false);
				element.addEventListener('touchend', touchEnd, false);
				element.addEventListener('touchcancel', touchCancel, false);
			});
		}

		if($$('body.magazine').size()) {
			$$('#magazine_navigation_gauche span').invoke('remove');
			$$('#magazine_navigation_droite span').invoke('remove');
			$('magazine-sommaire-scrollable').addEventListener('touchstart', function(e) {
				touchStart(e,e.element());
			}, false);
			$('magazine-sommaire-scrollable').addEventListener('touchmove', touchMove, false);
			$('magazine-sommaire-scrollable').addEventListener('touchend', touchEnd, false);
			$('magazine-sommaire-scrollable').addEventListener('touchcancel', touchCancel, false);
			/*$$('.contenu-utile')[0].addEventListener('touchstart', function(e) {
			 touchStart(e, e.element());
			 }, false);
			 $$('.contenu-utile')[0].addEventListener('touchmove', touchMove, false);
			 $$('.contenu-utile')[0].addEventListener('touchend', touchEnd, false);
			 $$('.contenu-utile')[0].addEventListener('touchcancel', touchCancel, false);*/
			if($$('#interview-texte').size()) {
				$('interview-texte').addEventListener('touchstart', function(e) {
					touchStart(e,'interview-texte');
				}, false);
				$('interview-texte').addEventListener('touchmove', touchMove, false);
				$('interview-texte').addEventListener('touchend', touchEnd, false);
				$('interview-texte').addEventListener('touchcancel', touchCancel, false);
			}
		}

		if($$('body.home-mosaique').size()) {
			/*$('scroller-BC-haut').stopObserving();
			 $('scroller-BC-bas').stopObserving();
			 $('scroller-BC-haut').addEventListener('touchstart', mouseDownHomeMosaiqueScrollerHaut, false);
			 $('scroller-BC-bas').addEventListener('touchstart', mouseDownHomeMosaiqueScrollerBas, false);
			 $('scroller-BC-haut').addEventListener('touchend', mouseUpHomeMosaiqueScrollerHaut, false);
			 $('scroller-BC-bas').addEventListener('touchend', mouseUpHomeMosaiqueScrollerBas, false);*/
			if($$('#mosaiques-BC').size()) {
				$('mosaiques-BC').addEventListener('touchstart', function(e) {
					touchStart(e,'mosaiques-BC');
				}, false);
				$('mosaiques-BC').addEventListener('touchmove', touchMove, false);
				$('mosaiques-BC').addEventListener('touchend', touchEnd, false);
				$('mosaiques-BC').addEventListener('touchcancel', touchCancel, false);
			}
		}

		//Le slider des catégories sur la home e-boutique
		if($$('.eboutique-index-index').size()) {
			$('categorie-scrollable').addEventListener('touchstart', function(e) {
				touchStart(e,e.element());
			}, false);
			$('categorie-scrollable').addEventListener('touchmove', touchMove, false);
			$('categorie-scrollable').addEventListener('touchend', touchEnd, false);
			$('categorie-scrollable').addEventListener('touchcancel', touchCancel, false);
		}

		//Le drag sur la page grille-or
		if($$('#zonegrid-container').size()) {
			$('zonegrid-container').addEventListener('touchstart', function(e) {touchStart(e,'zonegrid-container');}, false);
			$('zonegrid-container').addEventListener('touchmove', touchMove, false);
			$('zonegrid-container').addEventListener('touchend', touchEnd, false);
			$('zonegrid-container').addEventListener('touchcancel', touchCancel, false);
		}
	});
}