/**
 * Unspektakuläre Anpassungen, Normalisierung der Schreibweisen.
 * 
 * @version $Id: touchpanel.js 568 2010-07-30 14:13:47Z langert $
 * @author langert & hutterm
 */

/**
 * Wird beim laden des Fensters ausgeführt.
 * XXX ToDo Prototype Eventhandling!!! (sma) ;-)
 * @event load
 */
window.onload = function() {
	//Container-Größen bestimmen
	var screenBreite = document.viewport.getWidth();
	var screenHoehe = document.viewport.getHeight();
	
	var headHoehe = $('head').getHeight();
	var headlineHoehe = $('headline').getHeight();
	var ergebnislisteContentHoehe = screenHoehe - headHoehe - headlineHoehe;	
	$('ergebnislisteContentBox').setStyle({
			height: ergebnislisteContentHoehe + 'px'
	});
	
	// aktuelle Postion auf null setzen
	$('postionNow').value = 0;
	
	// UP und Down Button positionieren
	var upRight = parseInt($('suche').getStyle('width')) + 2;
	var upTop = headHoehe + headlineHoehe + 10;
	$('up').setStyle({
		position: 'absolute',
		top: upTop + 'px',
		right: upRight + 'px'
	});
	
	var downRight = upRight;
	var downTop = upTop + ergebnislisteContentHoehe - $('down').getHeight() - 20;
	$('down').setStyle({
		position: 'absolute',
		top: downTop + 'px',
		right: downRight + 'px'
	});
	
	// "hoch" auf hidden setzen
	$('up').hide();

	// Boxenhöhe definieren
	var boxHeight = 120 + 24;

	// observe "hoch" Button
	$('up').observe('click', function() {
		var anzahlTreffer = $F('anzahlTreffer');
		var anzahlboxen = Math.floor(ergebnislisteContentHoehe/boxHeight);
		var anzahlRows = Math.ceil(anzahlTreffer/anzahlboxen);
		var postionNow = parseInt($F('postionNow'));
		var scrollHeight = boxHeight * 4;
		
		if(postionNow > 0) {
			new Effect.Move($('ergebnislisteContent'), {
				x: 0, 
				y: +scrollHeight, 
				duration: 1,
				mode: 'relative',
				beforeStart: hideButtons,
				afterFinish: function() {
					displayButtons(true);
					/*
					if(postionNow == 1)
						$('up').hide();
					*/
				}
			});
			$('postionNow').value = postionNow - 1;
		}
	});
	
	// observe "runter" Button
	$('down').observe('click', function() {
		var anzahlTreffer = $F('anzahlTreffer');
		var anzahlboxen = Math.floor(ergebnislisteContentHoehe/boxHeight);
		var anzahlRows = Math.ceil(anzahlTreffer/anzahlboxen);
		var postionNow = parseInt($F('postionNow'));
		var scrollHeight = boxHeight * 4;
		
		if(postionNow < (anzahlRows - 1)) {
			new Effect.Move($('ergebnislisteContent'), {
				x: 0, 
				y: -scrollHeight, 
				duration: 1,
				mode: 'relative',
				beforeStart: hideButtons,
				afterFinish: function() { 
					displayButtons(true);
					/*
					if(postionNow == (anzahlRows - 2))
						$('down').hide();
					*/				
				}
			});
			$('postionNow').value = postionNow + 1;
		}
	});
	
	//Ergebnisliste ohne Einschränkung laden
	getGrundrissListe();
}

/**
 * @XXX Doku??
 */
function hideButtons() {
	$$('.suchButton').invoke("hide");
}

/**
 * @XXX Doku??
 */
function showButtons() {
	$$('.suchButton').invoke("show");
}

/**
 * @XXX Doku??
 */
function displayButtons(display) {
	if(!display)
		hideButtons();
	else
		showButtons();
}

/**
 * Händlersuche anzeigen.
 * 
 * (sma): parameters auf Prototype Standard umgestellt.
 */
function getHaendlersuche() {
	//Seiteninhalt via ajax laden
	var newHeight = $('ergebnisliste').getHeight();
	var newWidth = $('ergebnisliste').getWidth();
	newHeight = newHeight - 3;

	new Ajax.Updater('details', "ajax/iframe.php", {
		method: 'get',
		parameters: {
			src: "dealerMap.php",
			width: newWidth,
			height: newHeight,
			country_id: countryId
		},
		onLoading: function(){
			// Loading Einblender anzeigen
			$('details').addClassName('ajaxLoading');
		},
		onComplete: function() {				
		
			// div skalieren und einblenden
			var newHeight = $('ergebnisliste').getHeight();
			var newWidth = $('ergebnisliste').getWidth();
	
			$('details').setStyle({height: newHeight + 'px'});
			$('details').setStyle({width: newWidth + 'px'});
			$('details').appear();
			
			// Loading Einblender entfernen
			$('details').removeClassName('ajaxLoading');			
		},
		onFailure: function(){
			alert('Fehler: Failure');
		},
		onExeption: function(){
			alert('Fehler: Exeption');
		}
	});		
}

/*
 * Suchergebnisliste ausgeben
 * 
 * @todo Parameter umstellen
 */ 
function getGrundrissListe(){
	//ergebnislisteContent wieder auf 0,0 setzten
	new Effect.Move($('ergebnislisteContent'), {
		x: 0, 
		y: 0, 
		duration: 0,
		mode: 'absolute'
	});
	 
	// aktuelle Postion auf null setzten
	$('postionNow').value = 0;
	
	//Detailmaske ausblenden
	$('details').hide(); 
		
	new Ajax.Updater('ergebnislisteContent', "ajax/fzgListe.php?", {
		method: 'get',
		parameters: getSearchParams(), 
		onLoading: function(){
			// Loading Einblender anzeigen
			$('ergebnisliste').addClassName('ajaxLoading');
		},		
		onComplete: function() {				
			// Loading Einblender entfernen
			$('ergebnisliste').removeClassName('ajaxLoading');				

			try {
			// Anzahl Treffer aus hidden input auslesen und aktualisieren
			// change(sma): translation text via AJAX laden.
			new Ajax.Updater("headlineTreffer", "ajax/translations.php", {
				method: "post",
				parameters:  {
					PHPSESSID: sessionId,
					field_name: "ihre_aktuelle_suche_trifft_auf__fahrzeuge_zu",
					insertion: $('anzahlTreffer').value	
				}
			});
			}catch(e) {
				console.error(e);
			}
		},
		onFailure: function(){
			alert('Fehler: Failure');
		},
		onExeption: function(){
			alert('Fehler: Exeption');
		}
	});
}	


/*
 * Panel mit Suchkriterium einblenden
 * @todo Parameter umstellen
 */
function showSearchCriteria(panel){
	new Ajax.Updater('details', "ajax/searchCriteria.php", {
		method: 'get',
		parameters: {
			criteria: panel,
			lang: langCode,
			typ: $F('search_typ'),
			PHPSESSID: sessionId
		},
		onLoading: function(){
			// Loading Einblender anzeigen
			$('details').addClassName('ajaxLoading');
		},		
		onComplete: function() {						
			//div skalieren und einblenden
			var newHeight = $('ergebnisliste').getHeight();
			var newWidth = $('ergebnisliste').getWidth();
			
			$('details').setStyle({height: newHeight + 'px'});
			$('details').setStyle({width: newWidth + 'px'});
			$('details').appear();

			// Loading Einblender entfernen
			$('details').removeClassName('ajaxLoading');	
		
		},
		onFailure: function(){
			alert('Fehler: Failure');
		},
		onExeption: function(){
			alert('Fehler: Exeption');
		}
	});				
}


/**
 * Panel mit Technischen Daten einblenden.
 * 
 * (sma): Aufruf von Ajax.Updater angepasst.
 * 
 * @param Integer fzg_id kennung des Fahrzeugs. 
 */
function getModelldetails(fzg_id){
	
	//Seiteninhalt via ajax laden
	var url = "ajax/fzgDetails.php";
	new Ajax.Updater('details', url, {
		method: 'get',
		parameters: {
			PHPSESSID: sessionId,
			fzg_id: fzg_id
		},
		onLoading: function(){
			// Loading Einblender anzeigen
			$('details').addClassName('ajaxLoading');
		},
		onComplete: function() {				
		
			// div skalieren und einblenden
			var newHeight = $('ergebnisliste').getHeight();
			var newWidth = $('ergebnisliste').getWidth();
			
			$('details').setStyle({height: newHeight + 'px'});
			$('details').setStyle({width: newWidth + 'px'});
			$('details').appear();
			
			// Loading Einblender entfernen
			$('details').removeClassName('ajaxLoading');			
		},
		onFailure: function(){
			alert('Fehler: Failure');
		},
		onExeption: function(){
			alert('Fehler: Exeption');
		}
	});			
}


/* 
 * Startscreen einblenden und
 * alle anderen anels ausblenden
 */
function getStartscreen(){
	 
	//Startscreen einblenden
	$('startscreen').appear();
	
	//Detailscreen ausblenden
	$('details').fade();
	
	//PanoContainer ausblenden
	if($('panoBox')){
		$('panoBox').fade();
	}	
	
	//alle Suchkriterien zurücksetzen
	var allSearchFields = $A($('suche').getElementsByClassName('searchValue'));
	allSearchFields.each(function(field){
		var fieldID = field.readAttribute('id');
		// default Werte (aus $_REQUEST) nicht zurücksetzen
		if(fieldID != 'search_modelljahr' && fieldID != 'search_baureihenExcklusivMode'){
			$(fieldID).value = '';
		}	
	});
	
	//alle Suchfelder demarkieren
	var allSearchFields = $A($('suche').getElementsByClassName('searchCriteria searchCriteriaActive'));
	allSearchFields.each(function(field){
		var fieldID = field.readAttribute('id');
		$(fieldID).removeClassName('searchCriteriaActive');
	});		
	
	//alle Suchfelder Text-Werte leeren
	var allSearchFields = $A($('suche').getElementsByClassName('searchText'));
	allSearchFields.each(function(field){
		var fieldID = field.readAttribute('id');
		$(fieldID).innerHTML = '';
	});		
	
}

 
/* 
 * Suchstring mit allen Suchkriterien
 * aus hidden inputs mit className 
 * searchValue zusammensetzen
 */
function getSearchCriteria(){
	throw("DeprecatedException: Function getSearchCriteria is deprecated.");
	
	var suchstring = '';
	//alle input Suchfelder in array einlesen
	$$("#suche .searchValue").each(function(field){
		var fieldID = field.readAttribute('id');
		suchstring += fieldID + '=' + $(fieldID).value + '&';
	});
	return suchstring;
}

/**
 * Erzeugt ein Array mit allen erforderlichen Parametern für eine 
 * Suchanfrage.
 * 
 * Diese Funktion ersetzt die bisher verwendete: getSearchCriteria.
 * @return Object die Suchparameter.
 */
function getSearchParams() {
	var result = {
		PHPSESSID: sessionId,
		search_country_id: countryId
	};
	
	$$("#suche .searchValue").each(function(field){
		var fieldId = field.readAttribute('id');
		if($F(fieldId))
			result[fieldId] = $F(fieldId);
	});
	
	return result;
}
/* 
 * Suchkriterien in hidden inputs
 * setzen und neue Ergenbisliste laden
 * Abhängigkeit von Suchfeldern herstellen
 */
function setSearchCriteria(field,searchValue){
	 
	//Detailpanel ausblenden
	$('details').hide();
	
	// Suchkriterium in hidden field setzen
	$('search_' + field).value = searchValue;
		
	// Suchkriterium in Oberfläche farblich markieren
	if($('search_' + field).value != '' && $('search_' + field).value != '0'){
		$(field).addClassName('searchCriteriaActive');
	} else {
		$(field).removeClassName('searchCriteriaActive');
	}	
	
	//Suchfelder wertabhängig ein/ausblenden	
	if($('search_typ').value == 'c' && $('search_aufbauart') != null){
		$('search_aufbauart').value = '';
		$('text_aufbauart').innerHTML = '';
		$('aufbauart').fade();			
	} else {
		if($('mode').value != 'exclusiv'){
			$('aufbauart').appear();
		}	
	}
		
	// bei Auswahl Typ -> Felder zurücksetzen
	if(field == 'typ' && ($('search_baureihe') != null || $('search_klasse') != null )) {
		
		// nur Wenn SearchCriteria Klasse angzogen wird (=> modelljahr >= 2011)
		if($('search_klasse') != null){
			$('search_klasse').value = '';
			$('text_klasse').innerHTML = '';
			$('klasse').removeClassName('searchCriteriaActive');
		}	
		
		$('search_baureihe').value = '';
		$('text_baureihe').innerHTML = '';
		$('baureihe').removeClassName('searchCriteriaActive');
		
		$('search_laenge').value = '';
		$('text_laenge').innerHTML = '';
		$('laenge').removeClassName('searchCriteriaActive');
		
		$('search_gewicht').value = '';
		$('text_gewicht').innerHTML = '';
		$('gewicht').removeClassName('searchCriteriaActive');		
	}
	
	//neue Ergebnisliste laden
	getGrundrissListe();	
}

/*
 * Panorama/VR anzeigen
 */
loadPano = function(panoPath){
	
	// div skalieren und einblenden
	var newHeight = $('ergebnisliste').getHeight();
	var newWidth = $('ergebnisliste').getWidth();
	
	$('panoBox').setStyle({height: newHeight + 'px'});
	$('panoBox').setStyle({width: newWidth + 'px'});
	$('panoBox').appear();
	
	var so = new SWFObject("http://www2.dethleffs.de/include/pano/krpano.swf?wmode=transparent", "panoBoxContent", newWidth, newHeight, "9.0.28", "#ffffff");
	so.addParam("allowFullScreen","true");
	so.addVariable("pano", "http://www2.dethleffs.de/include/pano/krpanoTouchpanel.xml");
	so.addVariable("sphere", "http://www2.dethleffs.de/pictures/vehicles/panoramen/" + panoPath);
	so.addParam("allowScriptAccess", "always");
	so.addParam("wmode", "transparent");
	so.useExpressInstall("http://www2.dethleffs.de/include/pano/swfobject/expressinstall.swf");
	so.write('panoBox');

	// closePanoBox ins DOM einfuegen und mit Inhalt fuellen sowie CSS´en
	var closeDiv = new Element("div", {
		id: "closePanoBox"
	});
	closeDiv.update('<a href="javascript:;" onClick="$(\'panoBox\').fade();" class="suchButton">Panorama schliessen</a>');
	$("panoBox").insert(closeDiv);
	
	$("closePanoBox").setStyle({
		position: "absolute",
		width: "250px",
		right: "0px",
		bottom: "32px",
		float: "right"
	});
 }