/**
 * Image JS Klasse die das hochladen und entfernen von Bildern realisiert
 * 
 * @param pickerType
 * @param actualNumber
 * @param Form
 * @param ElementPath
 * @return
 */
var ClImage = new Class({

	iUniqueId         : null,
	element           : null,
	sUrl              : null,
	targetForm        : null,
	iFrame            : null,
	aSuperteaserTypes : new Array('projects_detail', 'jobs_detail', 'competitions_stats', 'companies_detail', 'users_detail', 'posts_post'),
	aListTypes        : new Array('projects_detail', 'competitions_detail', 'companies_detail', 'posts_post'),
	aNoRemoveTypes    : new Array('competitions_stats', 'companies_detail', 'companies_detail_projects', 'users_detail', 'users_detail_projects', 'jobs_detail', 'monitoring_new', 'monitoring_detail', 'advertisements_new', 'advertisements_detail'),
	aPlaceholders     : {
		'users_detail'                : '/image/dummy_profile_m.jpg',
		'users_detail_projects'       : '/image/dummy_project.gif',
		'companies_detail'            : '/image/superteaser_546x150px_kein_bild.jpg',
		'companies_detail_projects'   : '/image/platzhalter_60x60px_kein_bild.jpg',
		'projects_detail'             : '/image/platzhalter_60x60px_kein_bild.jpg',
		'projects_detail_superteaser' : '/image/superteaser_546x150px_kein_bild.jpg',
		'competitions_detail'         : '/image/platzhalter_60x60px_kein_bild.jpg',
		'competitions_stats'          : '/image/platzhalter_60x60px_kein_bild.jpg',
		'posts_post'                  : '/image/platzhalter_60x60px_kein_bild.jpg',
		'posts_post_superteaser'      : '/image/superteaser_546x150px_kein_bild.jpg',
		'jobs_detail'                 : '/image/superteaser_546x150px_kein_bild.jpg',
		'monitoring_new'              : '/image/platzhalter_150x150px_kein_bild.jpg',
		'monitoring_detail'           : '/image/platzhalter_150x150px_kein_bild.jpg',
		'advertisements_new'          : '/image/platzhalter_150x150px_kein_bild.jpg',
		'advertisements_detail'       : '/image/platzhalter_150x150px_kein_bild.jpg'
	},
	
	initialize: function(element, sUrl) {
		// erzeuge eine unique id für Iframe-Name bzw. Formular-Target
		this.iUniqueId = Math.round((Math.random() * 1000)) + new Date().getTime();
		this.element = $(element);
		this.sUrl = sUrl;
	},

	getActualNumber: function() {
		var fieldset = this.element.getParent().getParent().getParent().getParent();
		var fieldsetHash = fieldset.toQueryString().parseQueryString();
		var sBelongsTo = 'Images';

		var elementPath = sBelongsTo;
		var resultHash = $H(fieldsetHash).getFromPath(elementPath);
		var aKeys = $H(resultHash).getKeys();

		var iMax = aKeys.max();
		if(iMax == '-Infinity') {
			iMax = 0;
		}
		return iMax+1;
	},
	
	change: function(type) {
		//layer aus class.clform.js über formular legen
		oEditForms.submitLayer(this.element);
		
		var sourceFieldset = this.element.getParent().getParent().getParent();
		var parentFieldset = sourceFieldset.getParent();
		var thumbFieldset = parentFieldset.getElement('fieldset[id=fieldset-thumb_s]');
		var iIndex = new RegExp(/^.*?\[(\d+)\]/g).exec(sourceFieldset.getElement('input').getProperty('name'))[1];
		var sUrl = this.sUrl + '/type/' + type;

		// erzeuge ein neues InputFileElement mit den gleichen Eigenschaften und setze es vor element
		var newInputFileElement = new Element('input', {
			'id': 'upload',
			'type': 'file',
			'name': this.element.getProperty('name'),
			'size': '1',
			//'onchange' : 'new ClImage(this, "' + this.sUrl + '").change("' + type + '")',
			'class': 'upload_invis'
		});

		//onchange event im nachhinein rauflegen, damit IE klarkommt
		var sOriginalUrl = this.sUrl;
		newInputFileElement.addEvent('change', function() {
			new ClImage(this, sOriginalUrl).change(type);
		});
		
		newInputFileElement.inject(this.element, 'before');

		// wenn das Listenbild geändert wird
		if (sourceFieldset === thumbFieldset) {
			sUrl += '/list/' + iIndex;
		// wenn das erste Bild geändert wird
		} else if (parentFieldset.getElement('fieldset[id^=fieldset]') === sourceFieldset) {
			// prüfe, ob es sich um einen Superteaser Typ handelt
			if (this.aSuperteaserTypes.contains(type)) {
				imageType = 'superteaser';
			} else {
				imageType = 'normal';
			}
			sUrl += '/' + imageType + '/' + iIndex;

			// lade für das erste Bild immer ein Listenbild, wenn der Typ das zulässt
			if (this.aListTypes.contains(type)) {
				if (thumbFieldset) {
					var iListIndex = new RegExp(/^.*?\[(\d+)\]/g).exec(thumbFieldset.getElement('input').getProperty('name'))[1];
				} else {
					var iListIndex = this.getActualNumber();
				}

				sUrl += '/list/' + iListIndex;
			}			

		} else {
			sUrl += '/normal/' + iIndex;
		}

		this.send(sUrl, {
			'onComplete': function(response) {
			
				if (response.test('^{"errors":', 'i')) {
					response = JSON.decode(response);
					this.showError(response);
					//layer aus class.clform.js löschen
					oEditForms.destroyLayer();
					return false;
				}

				var subformHolder = new Element('div').set('html', response);
				var newSubform = subformHolder.getElement('fieldset');
				var sourceImageId = sourceFieldset.getElement('.id').getProperty('value');
				
				newSubform.replaces(sourceFieldset);
				// die alte Id in das neue SubForm schreiben
				newSubform.getElement('.id').setProperty('value', sourceImageId);
				if (subformHolder.getElement('fieldset[id=fieldset-thumb_s]')) {
					// thumbnail ersetzen
					if (thumbFieldset) {
						subformHolder.getElement('fieldset[id=fieldset-thumb_s]').replaces(thumbFieldset);
					// thumbnail hinzufügen
					} else {
						/*
						var injectFieldset = newSubform;
						 */
						// bei Superteaser-Typen das Listenbild direkt hinter das Superteaser Bild platzieren
						if (this.aSuperteaserTypes.contains(type)) {
							var injectFieldset = newSubform;
						} else {
							var injectFieldset = parentFieldset.getLast();
						}
						
						if ('fieldset-Add' === injectFieldset.getProperty('id')) {
							subformHolder.getElement('fieldset[id=fieldset-thumb_s]').inject(injectFieldset, 'before');
						} else {
							subformHolder.getElement('fieldset[id=fieldset-thumb_s]').inject(injectFieldset, 'after');
						}
					}
				}
				//layer aus class.clform.js löschen
				oEditForms.destroyLayer();
			}.bind(this)
		});
	},
	
	upload: function(type) {
		//layer aus class.clform.js über formular legen
		oEditForms.submitLayer(this.element);
		
		var sourceFieldset = this.element.getParent().getParent();
		var parentFieldset = sourceFieldset.getParent();
		var iIndex = this.getActualNumber();
		var sUrl = this.sUrl + '/type/' + type;
		var imageType;
		
		// erzeuge ein neues InputFileElement mit den gleichen Eigenschaften und setze es vor element
		var newInputFileElement = new Element('input', {
			'id': 'upload',
			'type': 'file',
			'name': this.element.getProperty('name'),
			'size': '1',
			//'onchange' : 'new ClImage(this, "' + this.sUrl + '").upload("' + type + '")',
			'class': 'upload_invis'
		});
		
		//onchange event im nachhinein rauflegen, damit IE klarkommt
		var sOriginalUrl = this.sUrl;
		newInputFileElement.addEvent('change', function() {
			new ClImage(this, sOriginalUrl).upload(type);
		});
		
		newInputFileElement.inject(this.element, 'before');

		// wenn bereits ein Image-Fieldset existiert
		if (!(['fieldset-thumb_s', 'fieldset-Add'].contains(parentFieldset.getElement('[id^=fieldset]').getProperty('id')))) {
			imageType = 'normal';
		} else {
			if (this.aSuperteaserTypes.contains(type)) {
				imageType = 'superteaser';
			} else {
				imageType = 'normal';
			}
		}
		sUrl += '/' + imageType + '/' + iIndex;
		
		// prüfe ob es ein fieldset-thumb_s gibt
		var thumbFieldset = parentFieldset.getElement('fieldset[id=fieldset-thumb_s]');
		if (!thumbFieldset) {
			sUrl += '/list/' + (iIndex + 1);
		}
		
		this.send(sUrl, {
			'onComplete': function(response) {
			
				if (response.test('^{"errors":', 'i')) {
					response = JSON.decode(response);
					this.showError(response);
					//layer aus class.clform.js löschen
					oEditForms.destroyLayer();
					return false;
				}

				var subformHolder = new Element('div').set('html', response);
				var newFieldset = subformHolder.getElement('fieldset');
				
				// bei Superteaser-Typen oder wenn kein Thumb-Fieldset existiert das neue Bild direkt ans Ende platzieren
				if (this.aSuperteaserTypes.contains(type) || !parentFieldset.getElement('fieldset[id=fieldset-thumb_s]')) {
					var injectFieldset = parentFieldset.getElement('fieldset[id=fieldset-Add]');
				// sonst vor das Listenbild platzieren
				} else {
					var injectFieldset = parentFieldset.getElement('fieldset[id=fieldset-thumb_s]');
				}
				newFieldset.inject(injectFieldset, 'before');

				if (subformHolder.getElement('fieldset[id=fieldset-thumb_s]')) {
					// thumbnail ersetzen
					if (parentFieldset.getElement('fieldset[id=fieldset-thumb_s]')) {
						subformHolder.getElement('fieldset[id=fieldset-thumb_s]').replaces(parentFieldset.getElement('fieldset[id=fieldset-thumb_s]'));
					// thumbnail hinzufügen
					} else {
						// bei Superteaser-Typen das Listenbild direkt hinter das Superteaser Bild platzieren
						if (this.aSuperteaserTypes.contains(type)) {
							var injectFieldset = newFieldset;
						} else {
							var injectFieldset = parentFieldset.getLast();
						}

						if ('fieldset-Add' === injectFieldset.getProperty('id')) {
							subformHolder.getElement('fieldset[id=fieldset-thumb_s]').inject(injectFieldset, 'before');
						} else {
							subformHolder.getElement('fieldset[id=fieldset-thumb_s]').inject(injectFieldset, 'after');
						}
					}
				}
				//layer aus class.clform.js löschen
				oEditForms.destroyLayer();
			}.bind(this)
		});
	},
	
	remove: function(type) {
		var sourceFieldset = this.element.getParent().getParent().getParent();
		var parentFieldset = sourceFieldset.getParent();
		var thumbFieldset = parentFieldset.getElement('fieldset[id=fieldset-thumb_s]');
		var superteaserElement = sourceFieldset.getElement('input.superteaser');
		
		if (this.aNoRemoveTypes.contains(type)) {
			sourceFieldset.getElement('input.id').setProperty('value', '');
			sourceFieldset.getElement('input.name').setProperty('value', '');
			sourceFieldset.getElement('img.preview').setProperty('src', this.aPlaceholders[type]);
			
			if (thumbFieldset && (!($A(['companies_detail', 'companies_detail_projects', 'users_detail_projects']).contains(type)))) {
				thumbFieldset.dispose();
			}
		} else if ($A(['projects_detail', 'posts_post']).contains(type) && superteaserElement && 1 == superteaserElement.getProperty('value')) {
			sourceFieldset.getElement('input.id').setProperty('value', '');
			sourceFieldset.getElement('input.name').setProperty('value', '');
			sourceFieldset.getElement('img.preview').setProperty('src', this.aPlaceholders[type + '_superteaser']);
			
			if (thumbFieldset) {
				thumbFieldset.dispose();
			}
		} else {
			// wenn das erste fieldset gelöscht wird und das zweite ein Thumb-Fieldset ist, lösche auch dieses
			if (parentFieldset.getElement('fieldset[id^=fieldset]') === sourceFieldset) {
				var secondFieldset = sourceFieldset.getNext();
				if (secondFieldset && 'fieldset-thumb_s' === secondFieldset.getProperty('id')) {
					secondFieldset.dispose();
				}

			}
			
			sourceFieldset.dispose();
		}
	},
	
	send: function(sUrl, options) {
		options = $merge({
			'onComplete': function(response) {}
		}, options);
		
		this.createForm(sUrl);
		this.createIFrame();

		// füge dem Iframe ein Load-Event hinzu (sobald die Src (= action vom Form-Element) des Iframes geladen wurde, ist der Upload fertig
		this.iFrame.addEvent('load', function() {
			(function() {
				this.targetForm.destroy();
				this.iFrame.destroy();
			}.bind(this)).delay(250);

			//var oUpload = Json.evaluate(iframeElement.contentWindow.document.body.innerHTML);
			var response = $(this.iFrame.contentWindow.document.body).get('html');

			if (response) {
				options.onComplete(response);
			} else {
				this.showError(MooTools.lang.get('core', 'error_occured'));
			}

		}.bind(this));
		
		this.targetForm.submit();
	},
	
	createForm: function(sUrl) {
		// erstelle ein eigenes Formular nur für das Input-File-Element und füge dieses dort ein
		// patch for IE
		try {
			this.targetForm = document.createElement('<form class="hidden" action="' + sUrl + '" method="post" enctype="multipart/form-data" target="file_upload_' + this.iUniqueId + '">');
		}
		catch(e) {
			this.targetForm = new Element('form', {
				'action' : sUrl,
				'method' : 'post',
				'enctype': 'multipart/form-data',
				'target' : 'file_upload_' + this.iUniqueId,
				'class'	 : 'hidden'
			});
		}
		$(this.targetForm).inject(document.body).adopt(this.element);
	},
	
	createIFrame: function() {
		// erstelle ein Iframe, an welches das erzeugte Formular geschickt werden soll
		this.iFrame = new Element('iframe', {
			'class': 'hide',
			'src': 'about:blank',
			'name': 'file_upload_' + this.iUniqueId
		}).inject(document.body);
	},
	
	showError: function(message) {
		var errorMsg = '';
		
		$H(message['errors']).getValues().each(function(error) {
			errorMsg += error + '<br />';
		});
		
		var m = new Confirmbox({
			'onOkay': function() {
			},
			'onClosed': function() {
				m.remove();
				m = null;
			},
			'close': '',
			'okay': MooTools.lang.get('core', 'okay'),
			'abort': MooTools.lang.get('core', 'abort'),
			'message': '<div class="alert"><img src="' + IMG_DIR + '/mb_icon_alert.gif" alt="' + MooTools.lang.get('core', 'attention') + '" width="62" height="55" />' + errorMsg + '</div>',
			'width': 520,
			'height': 230
		});
		m.show();
	}

});