Dupuis = Class.create();
Dupuis.ImageTracker = Class.create({
	// imageId : id du champ qui contient l'image uploadée
	// textId : id du champ qui contient le texte à placer autour de l'image
	// photoIdPrefix : préfixe de l'id du champ caché qui contiendra l'image uploadée finale
	// textIdPrefix : préfixe de l'id du champ caché qui contiendra le texte placé autour de l'image
	// cadreIdPrefix : préfixe de l'id du champ caché qui contiendra l'image du cadre
	// cadreImagePrefix : préfixe du nom du fichier image a placer en fond (couverture + cadre)
	initialize: function(formName, imageId,textId,photoIdPrefix,textIdPrefix,cadreIdPrefix,cadreImagePrefix)
	{
		this.cadrePath='dupuis/cadres';
		this.interpolateTextFields=3;
		this.formName=formName;
		this.imageId=imageId;
		this.textId=textId;
		this.photoIdPrefix=photoIdPrefix;
		this.textIdPrefix=textIdPrefix;
		this.cadreIdPrefix=cadreIdPrefix;
		this.cadreImagePrefix=cadreImagePrefix;
		document.forms[this.formName].onsubmit=function(){ this.onChangeCallback(); return true;}.bind(this);
	},
	
	onChangeCallback: function ()
	{
		this.resetPhotoFrame();		
		this.updatePhotoFrame(this.getMode());
	},
	getMode: function()
	{
		var imageElt = document.getElementById(this.imageId);
		var mode='portrait';
		if(imageElt!=null)
		{
			var aspectRatio = imageElt.getAttribute('data-fileinfo-aspectratio');
			if(aspectRatio!=null && aspectRatio!=false)
			{
	  			mode = 'portrait';
	  			if(aspectRatio>1) mode='paysage';
	  			else mode='portrait';
			}
		}
		else mode='portrait';
		return mode;
	},
	updatePhotoFrame: function (mode)
	{
		var imageElt = document.getElementById(this.imageId);
		var photoId=this.photoIdPrefix+'_'+mode;
		var cadreId=this.cadreIdPrefix+'_'+mode;
		var cadreImage=this.cadreImagePrefix+'_'+mode+'.pdf';

		var photoElt = document.getElementById(photoId);
		var cadreElt = document.getElementById(cadreId);
		
		
		if(imageElt!=null && photoElt!=null)		photoElt.value = imageElt.value;									//On déplace l'image dans le champ portrait ou paysage
		if(cadreElt!=null)										cadreElt.value = this.cadrePath+'/'+cadreImage;		// On choisit la bonne image de fond pour le cadre
		
		
		this.manageTextFields(mode);
	},
	resetPhotoFrame: function ()
	{
		var elements = [];
		elements.push(	
			this.photoIdPrefix+'_'+'portrait',
			this.photoIdPrefix+'_'+'paysage',
			this.cadreIdPrefix+'_'+'portrait',
			this.cadreIdPrefix+'_'+'paysage'
		);

		
		// on ajoute les champs texte
		var suffixes = this.getTextSuffixes();
		if(suffixes)
		{
			for(var i=0; i<suffixes.length; i++)
			{
				elements.push(this.textIdPrefix+suffixes[i]+'_'+'portrait');
				elements.push(this.textIdPrefix+suffixes[i]+'_'+'paysage');
			}
		}
		
		for(var e=0; e<elements.length; e++)
		{
			var elt = document.getElementById(elements[e]);
			if(elt !=null) elt.value='';
		}
	},
	manageTextFields: function(mode)
	{
		var suffixes = this.getTextSuffixes();
		if(suffixes)
		{
			for(var i=0;i<suffixes.length;i++)
			{
				var suffix=suffixes[i];
				var textElt = document.getElementById(this.textId+suffix);
				var textHiddenElt = document.getElementById(this.textIdPrefix+suffix+'_'+mode);
				if(textHiddenElt!=null && textElt!=null)	textHiddenElt.value=textElt.value;									//On déplace le texte dans le champ portrait ou paysage
			}
		}
	},
	getTextSuffixes: function ()
	{
		var suffixes = [];
		suffixes[0]='';			// pour le champ standard sans suffixe
		if(this.interpolateTextFields>0)
		{
			for(var i=1; i<this.interpolateTextFields+1;i++)
			{
				suffixes[i]='_'+i;
			}
		}
		return suffixes;
	}
});