/*
A propos de ce fichier :
 > nom : creation.js
 > Description : Javascript de la page creation
 > Date de création : 5 juillet 2006
 > Dernière modification : 8 octobre 2006
 > Par : Martius, sauf fonctions signalées
 */

/** @doc
 * == Méthodes générales
 */

/**
 * @param str  objMask	   Nom de l'élément HTML <img /> affichant le masque
 * @param str  objPicture  Nom de l'élément HTML <img /> affichant l'image
 * @param str pictureId    Identifiant de l'image traitée.
 * @param int  valWidth    Valeur de la largeur actuelle de l'image
 * @param int  valHeight   Valeur de la hauteur actuelle de l'image
 * @param int  valTop	   Position de l'image par rapport au bord droit de l'image
 * @param int  zoomWidth   Différence de taille en largeur lors d'un zoom
 * @param int  zoomHeight  Différence de taille en hauteur lors d'un zoom
 * @param int  Move		   Distance du mouvement
 * @param int  Margin	   Marge de manœuvre
 * @param int  worksize	   Taille des apercus du magnet en création
 * @param int  saved*	   nombre de magnets créés avec le masque *
 *
 * @doc
 * !!Les index du tableau saved
 *	0 : heart	|	4 : rectangle
 *	1 : cloud	|	5 : rectangle2
 *	2 : round	|	6 : ovale
 *	3 : petal	|	7 : ovale2
 */
var objMask    = 'wmask';
var objPicture = 'picture';
/*
var valWidth = 0;
var valHeight = 0;
var valTop = 0;
var valLeft = 0;
var ZoomWidth = 0;
var ZoomHeight = 0;
//*/
var Move = 1;
var worksize = 275;
/*
var savedHeart = 0;
var savedCloud = 0;
var savedRound = 0;
var savedPetal = 0;
var savedRectangle = 0;
var savedRectangle2 = 0;
var savedOvale = 0;
var savedOvale2 = 0;
//*/
var ErrorMarge = 5; // environ 1.5mm ([Taille de la marge d'erreur en mm = 1.5]*[zone de travail = 275])/[Taille d'un carré en mm = 53]

/**
 * @function changeValue
 *
 * Change la valeur d'un champ de formulaire
 *
 * @param str  fid  Identifiant HTML du champ
 * @param str  val  Nouvelle valeur
 */
function changeValue(fid, val)
	{
		document.getElementById(fid).value = val;
	}

/**
 * @function changeMask
 *
 * Cette fonction permet de modifier le masque définissant la forme du magnet.
 *
 * @param  str  mask  nom du masque
 */
function changeMask(mask)
	{
		if(!document.getElementById(objPicture))
			{
				alert(choose_error);
				return false;
			}

		// Tests préliminaires
		if((savedPetal != 0 && (mask != 'round' && mask != 'petal')) ||
		   (savedPetal == 5 && mask == 'petale') ||
		   (savedPetal != 0 && savedRound == 1 && mask == 'round') ||
		   (savedRound == 1 && savedPetal == 5))
			{
				alert(masks_for_fleur);
				return false;
			}
		
		if((savedHeart != 0 || savedCloud != 0 || savedRound > 1 || savedRectangle != 0 || savedRectangle2 != 0
			|| savedOvale != 0 || savedOvale2 != 0) && mask == 'petal')
			{
				alert(no_petal);
				return false;
			}
		
		valMask = mask;
		document.getElementById(objMask).src = 'templates/images/mask_' + mask + '.gif';
	}

/**
 * @function zoomIn
 *
 * Permet de zoomer sur l'image
 */
function zoomIn()
	{
		if(!document.getElementById(objPicture))
			{
				alert(choose_error);
				return false;
			}

		valWidth  += zoomWidth ;
		valHeight += zoomHeight;
		
		document.getElementById(objPicture).style.width  = valWidth  +'px';
		document.getElementById(objPicture).style.height = valHeight +'px';
		
		valTop = valTop-(zoomWidth/2);
		valLeft = valLeft-(zoomHeight/2);
		
		document.getElementById(objPicture).style.top  = valTop  +'px';
		document.getElementById(objPicture).style.left = valLeft +'px';
		
		checkPosition();
	}

/**
 * @function zoomOut
 *
 * Permet de dézoomer sur l'image
 */
function zoomOut()
	{
		if(!document.getElementById(objPicture))
			{
				alert(choose_error);
				return false;
			}

		valWidth  -= zoomWidth ;
		valHeight -= zoomHeight;
		
		document.getElementById(objPicture).style.width  = valWidth  +'px';
		document.getElementById(objPicture).style.height = valHeight +'px';
		
		valTop  += (zoomWidth/2) ;
		valLeft += (zoomHeight/2);
		
		document.getElementById(objPicture).style.top  = valTop  +'px';
		document.getElementById(objPicture).style.left = valLeft +'px';

		checkPosition();
	}

/**
 * @function moveLeft
 *
 * Déplace l'image vers la gauche
 */
function moveLeft()
	{
		if(!document.getElementById(objPicture))
			{
				alert(choose_error);
				return false;
			}
			
		valLeft -= Move;
		document.getElementById(objPicture).style.left = valLeft +'px';
	}

/**
 * @function moveRight
 *
 * Déplace l'image vers la droite
 */
function moveRight()
	{
		if(!document.getElementById(objPicture))
			{
				alert(choose_error);
				return false;
			}

		valLeft += Move;
		document.getElementById(objPicture).style.left = valLeft +'px';
	}

/**
 * @function moveTop
 *
 * Déplace l'image vers le haut
 */
function moveTop()
	{
		if(!document.getElementById(objPicture))
			{
				alert(choose_error);
				return false;
			}

		valTop -= Move;
		document.getElementById(objPicture).style.top = valTop +'px';
	}

/**
 * @function moveTop
 *
 * Déplace l'image vers le bas
 */
function moveBottom()
	{
		if(!document.getElementById(objPicture))
			{
				alert(choose_error);
				return false;
			}

		valTop += Move;
		document.getElementById(objPicture).style.top = valTop +'px';
	}

/**
 * @function checkPostition
 *
 * Replace correctement l'élément après un zoom.
 */
function checkPosition()
	{
		moveLeft();
		moveRight();
		moveTop();
		moveBottom();
	}

/**
 * @function DragDrop
 *
 * Permet à l'utilisateur de replacer l'image à l'aide de la souris
 *
 * @param  e Element evenement
 */
function DragDrop(e)
	{
		var difX = (document.all) ? event.clientX-window.lastX : e.clientX-window.lastX;
		var difY = (document.all) ? event.clientY-window.lastY : e.clientY-window.lastY;
		
		valLeft += difX;
		valTop  += difY;

		document.getElementById(objPicture).style.left = valLeft + 'px';
  		document.getElementById(objPicture).style.top  = valTop + 'px';
  		checkPosition();
  
		window.lastX = (document.all) ? event.clientX:e.clientX;
		window.lastY = (document.all) ? event.clientY:e.clientY;
    }

/**
 * @function StartDragDrop
 *
 * Déclanche le Glisser-déplacer
 *
 * @param  e Element evenement
 */
function startDragDrop(e)
	{
		if(document.all)
			{
				window.lastX = event.clientX;
				window.lastY = event.clientY;
				document.onmousemove = DragDrop;
				document.onmouseup = endDragDrop;
			}
		else
			{
				window.lastX = e.clientX;
				window.lastY = e.clientY;
				window.onmousemove = DragDrop;
				window.onmouseup = endDragDrop;
			}
	}

/**
 * @function endDragDrop
 *
 * Termine le glisser-déplacer
 *
 * @param obj e Element evenement
 */
function endDragDrop(e)
	{
		(document.all) ? document.onmousemove=null : window.onmousemove=null;
	}

/**
 * == Lecture de cookies == 
 */
function getCookieVal(offset)
	{
		var endstr = document.cookie.indexOf(";", offset);

		if(endstr == -1)
			endstr = document.cookie.length;

	return unescape(document.cookie.substring(offset, endstr));
	}

function readCookie(nom)
	{
		var arg = nom + '=';
		var alen = arg.length;
		var clen = document.cookie.length;
		var i = 0;

		while (i<clen)
			{
				var j = i + alen;

				if (document.cookie.substring(i, j)==arg)
					return getCookieVal(j);
				
				i=document.cookie.indexOf(" ",i)+1;

				if (i==0)
					break;
			}
		return null;
	}

function deletePicture()
	{
		return confirm(delete_picture);
	}

/**
 * @function savePicture
 *
 * Sauvegarde une image
 */
function savePicture(MarginProtect, MagnetExists)
	{
		if(!Ajax)
			getAjaxRequest();

		Ajax.onreadystatechange = function()
			{
				currentState();
		
				if(Ajax.readyState == 4 && Ajax.status == 200)
					{
						AjaxReponse = clean(Ajax.responseXML.documentElement);
						pictureId = AjaxReponse.getElementsByTagName('pictureid')[0].firstChild.nodeValue;
						exists = true;
						saved += 1;
						
						date = new Date();
						if(!document.getElementById(pictureId))
							{
									document.getElementById('saved').innerHTML += '<a href="index.php?p=creation&amp;etape=saved&amp;pictureId=' + pictureId + '"><img src="temp/sessions/' + session + pictureId + '.tn.png?'
																				  +date.getTime() + '" id="'+ pictureId +'" alt="" /></a>'
							}
						else
							{
									document.getElementById(pictureId).src = 'temp/sessions/' + session + pictureId + '.tn.png?' +date.getTime();
							}
						
						document.getElementById('currentoffer').innerHTML = AjaxReponse.getElementsByTagName('offer')[0].firstChild.nodeValue;
						
						if(AjaxReponse.getElementsByTagName('offercode')[0].firstChild.nodeValue != 'notyet')
							cartok = true;
						else
							cartok = false;
						
						Ajax = false;
					}
			}
		
			if(valMask == 'spacer')
				{
					alert(mask_error);
					return false;
				}
			
		// Test sur la position du masque
		if(MarginProtect)
		{
			// Définition des valeurs
			if(valMask == 'rectangle' || valMask == 'ovale')
			{
				MarginLeft = 28;
				MarginTop = 54;
				MarginWidth = 219;
				MarginHeight = 167;
			}
			else if(valMask == 'rectangle2' || valMask == 'ovale2')
			{
				MarginTop = 28;
				MarginLeft = 54;
				MarginHeight = 219;
				MarginWidth = 167;
			}
			else if(valMask == 'heart')
			{
				MarginLeft = 35;
				MarginTop = 35;
				MarginWidth = 207;
				MarginHeight = 207;
			}
			else if(valMask == 'round')
			{
				MarginLeft = 33;
				MarginTop = 33;
				MarginWidth = 209;
				MarginHeight = 209;
			}
			else if(valMask == 'cloud')
			{
				MarginLeft = 27;
				MarginTop = 57;
				MarginWidth = 221;
				MarginHeight = 161;
			}
			else if(valMask == 'petal')
			{
				MarginLeft = 29;
				MarginTop = 35;
				MarginWidth = 220;
				MarginHeight = 205;
			}
			
			if(valLeft > (MarginLeft - ErrorMarge))
				{
					ShowMarginError(true);
					
					return false;
				}
			if(valTop > (MarginTop - ErrorMarge))
				{
					ShowMarginError(true);
					
					return false;
				}
			if((valLeft + valWidth) < (MarginLeft + MarginWidth + ErrorMarge))
				{
					ShowMarginError(true);
					
					return false;
				}
			if((valTop + valHeight) < (MarginTop + MarginHeight + ErrorMarge))
				{
					ShowMarginError(true);
					
					return false;
				}
		}
		
		// Autres tests
		if(exists)
			{
				if(MagnetExists)
					{
						TestMagnetOverride(true);
						return false;
					}

				if(override == '0')
					{
						// Test sur l'offre en cours
						if((savedPetal != 0 && (valMask != 'round' && valMask != 'petal')) ||
						   (savedPetal == 5 && valMask == 'petal') ||
						   (savedPetal != 0 && savedRound == 1 && valMask == 'round') ||
						   (savedRound == 1 && savedPetal == 5))
							{
								alert(masks_for_fleur);
								return false;
							}
						// Limite de 10 magnets
						if(saved == 10)
							{
								alert(max_error);
								return false;
							}
					}
			}
		else
			override = 'notyet';
		
		// Magnets sauvegardés
		if(override == 1)
		{
			if(origMask == 'heart') { savedHeart -= 1; }
			else if(origMask == 'cloud') { savedCloud -= 1; }
			else if(origMask == 'round') { savedRound -= 1; }
			else if(origMask == 'petal') { savedPetal -= 1; }
			else if(origMask == 'rectangle') { savedRectangle -= 1; }
			else if(origMask == 'rectangle2') { savedRectangle2 -= 1; }
			else if(origMask == 'oval') { savedOvale -= 1; }
			else if(origMask == 'oval2') { savedOvale2 -= 1; }
		}
		
		if(valMask == 'heart') { savedHeart += 1; }
		else if(valMask == 'cloud') { savedCloud += 1; }
		else if(valMask == 'round') { savedRound += 1; }
		else if(valMask == 'petal') { savedPetal += 1; }
		else if(valMask == 'rectangle') { savedRectangle += 1; }
		else if(valMask == 'rectangle2') { savedRectangle2 += 1; }
		else if(valMask == 'oval') { savedOvale += 1; }
		else if(valMask == 'oval2') { savedOvale2 += 1; }

		Ajax.open('GET','index.php?ajax=1&p=creation&etape=4&pictureId=' + pictureId + '&width=' + valWidth + '&height=' + valHeight +
						'&top=' + valTop + '&left=' + valLeft + '&mask=' + valMask + '&override=' + override, true);
		Ajax.send(null);
	}

/**
 * @function updatePicture
 *
 * Charge l'image à éditer
 *
 * @param str  picture  identifiant de l'image a éditer
 */
function updatePicture(picture)
	{
		if(!Ajax)
			getAjaxRequest();
		
		Ajax.onreadystatechange = function()
			{
				currentState();
				
				if(Ajax.readyState == 4 && Ajax.status == 200)
					{
						if(document.getElementById('explain'))
							document.getElementById('explain').style.display = 'none';
							
						document.getElementById('travail').style.display = 'block';
						document.getElementById('savepicturelink').style.visibility = 'visible';

						AjaxRep = clean(Ajax.responseXML.documentElement);
						
						valWidth = parseInt(AjaxRep.getElementsByTagName('width')[0].firstChild.nodeValue);
						valHeight = parseInt(AjaxRep.getElementsByTagName('height')[0].firstChild.nodeValue);
						valLeft = parseInt(AjaxRep.getElementsByTagName('left')[0].firstChild.nodeValue);
						valTop = parseInt(AjaxRep.getElementsByTagName('top')[0].firstChild.nodeValue);
						valMask = AjaxRep.getElementsByTagName('mask')[0].firstChild.nodeValue;
						zoomWidth = parseInt(AjaxRep.getElementsByTagName('zoomwidth')[0].firstChild.nodeValue);
						zoomHeight = parseInt(AjaxRep.getElementsByTagName('zoomheight')[0].firstChild.nodeValue);
						
						document.getElementById(objPicture).style.width = valWidth + 'px';
						document.getElementById(objPicture).style.height = valHeight + 'px';
						document.getElementById(objPicture).style.left = valLeft + 'px';
						document.getElementById(objPicture).style.top = valTop + 'px';
						document.getElementById(objMask).src = 'templates/images/mask_'+ valMask + '.gif';
						
						date = new Date();
						document.getElementById(objPicture).src = 'temp/sessions/' + session + picture + '.creation.png?' + date.getTime();

						pictureId = picture;
						
						Ajax = false;
					}
			}
			
		Ajax.open('GET', 'index.php?ajax=1&p=creation&etape=saved&pictureId='+picture, true);
		Ajax.send(null);
	}

/**
 * @function ShowMarginError()
 *
 * Affiche le panneau d'erreur
 */
function ShowMarginError(show)
	{
		if(show)
			disp = 'block';
		else if(!show)
			disp = 'none';
		else
			return false;
		
		document.getElementById('marginerror').style.display = disp;
		
		if(show)
			document.getElementById('reeditcurrentset').focus();
	}
	
/**
 *
 */
function testCartPossible()
	{
		if(!cartok)
			{
				alert(addtocartlater);
				return false;
			}
		else
			{
				return true;
			}
	}

var override = 0;
function TestMagnetOverride(show)
	{
		if(show)
			disp = 'block';
		else if(!show)
			disp = 'none';
		else
			return false;
		
		document.getElementById('override').style.display = disp;
	}