/**
 * functions.js
 *
 * EVITA SHOES
 *
 * Diese Datei enthaelt die Javascript-Funktionen die zur Darstellung der EVITA SHOES Website benötigt werden.
 *
 * @author buero hahn <info@buero-hahn.de>
 * @version 2009-07-08
 */


/**
 * initPageJS()
 * Führt initialisierende Funktionen aus, nachdem die Seite/ das HTML geladen wurde
 * 
 * @param params object Enthält übergebene Variablen
 * @return void Kommt nix zurück
 */
 function initPageJS(params) {
	// Links vorbereiten (auskommentiert, da Cookies eingeschaltet sein müssen
/*
 	if (params.sid) {
 		cmtPrepareLinks(params.sid);
 	}
*/ 	
 	// Cookiecheck
 	checkCookies('shoppingCartSummary');
 	
 	// Artikelnummersuche
 	refSearchArticleField = document.getElementById('searchArticleField');
 	if (refSearchArticleField != null) {
 		addEvent(refSearchArticleField, 'keyup', searchArticleFieldCheck);
 	}
 	
 	refSearchArticleLabel = document.getElementById('searchArticleLabel');
 	if (refSearchArticleLabel != null) {
 		addEvent(refSearchArticleField, 'focus', searchArticleFieldFocus);
 		addEvent(refSearchArticleField, 'blur', searchArticleFieldBlur);
 	}
 	
 	if (refSearchArticleField && refSearchArticleField.value && refSearchArticleLabel) {
 		refSearchArticleLabel.style.display = 'none';
 	}
 }
 
 function searchArticleFieldCheck(event) {
 	// Normale Browser
	if (typeof event.target != 'undefined') {
		var refInput = event.target;
	// IEs
	} else if (typeof event.srcElement != 'undefined') {
		var refInput = event.srcElement;
	} else {
		return false
	}
	
	var str = refInput.value;
	var deleteKey = false;
	
	if (event.keyCode && (event.keyCode == 8 || event.keyCode == 46)) {
		var deleteKey = true
	}

	if (event.charCode && (event.keyCode == 8 || event.keyCode == 46)) {
		var deleteKey = true
	}
	
	if (str.length >=3 && !deleteKey && !str.match(/^[^-]{3}-/)) {
		str = str.substring(0,3)+'-'+str.substring(3,13);
	}
	if (str.length >=8 && !deleteKey && !str.match(/^[^-]{3}-[^-]{4}-/)) {
		str = str.substring(0,8)+'-'+str.substring(8,13);
	}
	
	refInput.value = str;
 }
 
 function searchArticleFieldFocus(event) {
	refSearchArticleLabel = document.getElementById('searchArticleLabel');
//	alert(refSearchArticleLabel.style)
	refSearchArticleLabel.style.display = 'none'
 }

 function searchArticleFieldBlur(event) {
	refSearchArticleLabel = document.getElementById('searchArticleLabel');
	refSearchArticleField = document.getElementById('searchArticleField');
	
	if (!refSearchArticleField.value) {
		refSearchArticleLabel.style.display = 'block'
	}
 }

 
 /**
  *	addEvent()
  * Fügt einem HTML-Element einen event-Handler hinzu
  * @params obj object Referenz auf das Objekt
  * @params eventType string Name des events (ohne führendes "on")
  * @params dofunction string Funktion, die beim ereignis aufgerufen werden soll
  *
  * @returv void
  * 
  */
 function addEvent(obj, eventType, doFunction, useCaption) {
	if (obj.addEventListener) {
		obj.addEventListener(eventType, doFunction, useCaption);
		return true;
	} else if (obj.attachEvent) {
		var retVal = obj.attachEvent("on"+eventType, doFunction);
		return retVal;
	} else {
		return false;
	}
 }
/**
 * changeNavItemStatus
 * Ändert Grafik eines Hauptnavigationspunktes
 * 
 * @param refImage object Referenz zur Navigationsgrafik die geändert werden soll
 * @return void Kommt nix zurück
 */
 function changeNavItemStatus(refImage) {
 	var parts = refImage.src.match(/(.*)_(0|1)\.(.*)/);
 	// Quellname der Grafik wird zerlegt in:
 	// parts[1]: Dateipfad bis "_0" oder "_1" (exkl.)
 	// parts[2]: 0 oder 1, je nach Status der Navigationsgrafik
 	// parts[3]: Endung der Grafik, z.B. "gif", "png"...
 	
	if (parts[2] == 0) {
		parts[2] = 1;
	} else {
		parts[2] = 0;
	}

	// Neue Grafik einfügen	
 	refImage.src = parts[1]+"_"+parts[2]+"."+parts[3];
 }

browser = checkBrowser();
browserName = browser.name;
browserVersion = false;



function checkBrowser() {

	var browser = navigator.userAgent.toLowerCase();
	var intBrowserVersion = parseInt(navigator.appVersion);
	var floatBrowserVersion = parseFloat(navigator.appVersion);
	var	browserName = '';
	var browserVersion = 0;
//	alert (navigator.appVersion)
	
	//ist es netscape
	if (browser.indexOf('mozilla')!=-1 && browser.indexOf('compatible') == -1 && browser.indexOf('opera')==-1 && browser.indexOf('firefox')==-1) {
		browserName = "Netscape";
		browserVersion = floatBrowserVersion;
		return {'name': browserName, 'version': browserVersion};
	}
	
	// Ist es Firefox
	if (browser.indexOf('firefox')!=-1) {
		browserName = "Firefox";
		browserVersion = floatBrowserVersion;
		return {'name': browserName, 'version': browserVersion};
	}
	
	// Ist es Opera
	if (browser.indexOf('opera')!=-1) {
		browserName = "Opera";
		browserVersion = floatBrowserVersion;
		return {'name': browserName, 'version': browserVersion};
	}

	// Ist es IE
	if (browser.indexOf('compatible')!=-1 || browser.indexOf('msie')!=-1) {
		browserName = "IE";
		browserVersionMatches = navigator.appVersion.match(/MSIE (\d{1})/);
		browserVersion = browserVersionMatches[1];
		return {'name': browserName, 'version': browserVersion};
	}
}
 
 
 /**
 * changeImage
 * Ändert Bild der Schuhdetailansicht
 * 
 * @param imageId ID des Bildes, das geaendert werden soll
 * @return void Kommt nix zurück
 */
 function changeImage(imageId, url, refLink) {
	var refImage = document.getElementById(imageId);
	var absUrl = window.location.protocol+'//'+window.location.host+'/'+url
    
    if (refImage.src && refImage.src.toString() != absUrl) {
	    refImage.src = absUrl;
	}
    /* refLink.blur();*/
} 

/**
 * changeLayerVisibility
 * Ändert die style.display-Eigenschaft eines Elements je nach aktuellem Status
 * 
 * @param layerId ID des HTML-Elements
 */ 
function changeLayerVisibility(layerId) {
	var layer = document.getElementById(layerId);
	
	if (layer != 'undefined' && layer.style != 'undefined') {
		if (layer.style.display != 'none') {
			layer.style.display='none';
		} else {  
			layer.style.display='block';
	 	}
	 }
}

/**
 * hideAllLayers
 * Ändert die style.display-Eigenschaft aller Elemente deren ID 'Prefix' enthält auf nicht sichbar
 * 
 * @param divPrefix ID des HTML-Elements
 */ 
function hideAllLayers(divPrefix) {
	
	var divContainer = document.getElementsByTagName('div');
	
	for (a in divContainer) {
		var refElement = divContainer[a];
		if (refElement.id != null && refElement.id.indexOf(divPrefix) != -1 && refElement.style != 'undefined') {
			refElement.style.display = 'none'
		}
	 }
}

/**
 * getComputedStyle
 * Holt den aktuellen Wert für die angeforderte Style-Eigenschaft eines Elements
 */
function getActStyle(elementID, styleName) {
	
	var ref = document.getElementById(elementID);
	
	if(window.getComputedStyle) {
		var styleValue = window.getComputedStyle(ref,'').getPropertyValue(styleName);
		return styleValue;
	} else if(ref.currentStyle) {
		var styleName = styleName.replace(/-/g, '');
		var styleValue = ref.currentStyle[styleName];
		return styleValue;
	}
}

/**
 * function changeFilter()
 * Schickt das Filterformular ab.
 *
 * @param formId string Id des Formulars
 * @return void
 */
function changeFilter(formId) {
	document.getElementById(formId).submit();
}

/**
 * function checkCookies();
 * prüft, ob Cookies erlaubt sind
 */
 
  function checkCookies(divCookieMessageContainer) {

	refContainer = document.getElementById(divCookieMessageContainer);
	if (typeof(refContainer) == 'undefined') return;
	
 	// Cookie da?
 	if (navigator.cookieEnabled == false) {
		var cookieError = document.createElement('div');
		cookieError.className = "shoppingCartSummaryError";
		cookieError.innerHTML = 'Bitte aktivieren Sie Cookies in Ihrem Browser, um im Evita Internet Store einkaufen zu k&ouml;nnen.';
		refContainer.appendChild(cookieError);
 	 }
 }
 
 /**
 * function checkJavascript();
 * prüft, ob Javascript ausgeführt werden kann
 */
 function checkJavascript(divJavascriptMessageContainer) {
	refContainer = document.getElementById(divJavascriptMessageContainer);
 	if (refContainer != 'undefined') {
 		refContainer.style.display = 'none';
 	 }	
 }

/**
 * function cmtPrepareLinks();
 * prüft, ob Cookies erlaubt sind und bearbeitet alle vorhandenen Links
 */
 function cmtPrepareLinks(sid) {
 	if (document.cookie.indexOf('sid') == -1) {
 	 	document.cookie = 'sid='+sid;
 	 	if (document.cookie.indexOf('sid') == -1) {
 	 	
 	 		// Domainnamen ermitteln (zum Erkennen von internen Links)
 	 		var ownDomain = '';
 	 		var ownDomainMatch = document.URL.match(/http:\/\/([^.]*\.[^/]*)\/.*/);
			if (ownDomainMatch != undefined) {
				ownDomain = ownDomainMatch[1];
			}
			
 	 		// Cookies nicht möglich: sid an Links hängen!
 	 		for (i = 0; i < document.links.length; i++) {
 	 			var linkTarget = document.links[i].href;
 	 			
 	 			// Nur an interne Links hängen!
 	 			if (linkTarget.indexOf(ownDomain) != -1) {
	 	 			if (linkTarget.indexOf('?') != -1) {
	 	 				linkTarget += '&sid='+sid;
	 	 			} else {
	 	 				linkTarget += '?sid='+sid;
	 	 			}
	 	 			document.links[i].href = linkTarget;
	 	 		}
 	 		}
 	 	}
 	 }
 }

 /**
 * function shopCategoryOverviewPrepareDescriptions();
 * Weist allen Thumbnails in der Kategorieübersicht einen Mouseover-Event zu
 *
 * @param object JSON-Objekt:
 * - cssSelector:	CSS-Selektor zum identifizieren der Elemente, denen ein Event zugewiesen werden soll
 * @return void
 */
 function shopCategoryOverviewPrepareDescriptions(params) {
	return;
 	//if (typeof params == undefined || !params.cssSelector) return false;
 	var eventElements = $$(params.cssSelectorEvent);
 	for (i=0; i<eventElements.length; i++) {
 		var eventEl = eventElements[i]
 		var effectEl = eventEl.up().select(params.cssSelectorContainer);

 		eventEl.observe('mouseover', function(event) {
 			Event.stop(event);
			var element = Event.element(event);
 			var elDesc = element.up('.categoryArticleContainer').select('.categoryArticleLongDescription');
 			Effect.Appear.delay(1.5, elDesc[0], {duration: 0.4});
 			
 			elDesc[0].observe('mouseout', function(event) {
				var element = Event.element(event);
	 			var elDesc = element.up('.categoryArticleContainer').select('.categoryArticleLongDescription');
	 			Effect.Fade (element, {duration: 0.1});
 			});
 		});

	
//		Element.extend(shopCategoryOverviewMouseOut);
		
// 		eventEl.observe('mouseout', shopCategoryOverviewMouseOut)
/*	
 		eventEl.observe('mouseout', function(event) {
			
			var element = Event.element(event);
 			var elDesc = element.element.up('.categoryArticleContainer').select('.categoryArticleLongDescription');
 			Effect.Fade (elDesc[0], {duration: 0.2});
 		}));
*/
 		effectEl[0].hide();
 		
 		//eventEl.setStyle({height: eventEl.up().getHeight()+'px'});
 	};
 }
 
 function shopCategoryOverviewMouseOut(event) {
	console.info('fire out')
	var element = Event.element(event);
	Event.stop(event);
 	var elDesc = element.up('.categoryArticleContainer').select('.categoryArticleLongDescription');
	Effect.Fade (elDesc[0], {duration: 0.2});
 }
 
 
 
 
 
 var shopImageHandler = Class.create();
	
 shopImageHandler.prototype = {
	 initialize: function(params) {
	 	this.zoomContainerId = params.zoomContainerId;
	 	this.imageId = params.imageId;
	 	this.buttonContainerId = params.buttonContainerId;
	 	this.imagePrefix = params.imagePrefix;
	 	this.currentImage = params.currentImage;
	 	this.currentImageZoomSrc = params.currentZoomImage;
	 	this.buttonPressed = false;
	 	
	 	this.zoomContainer = $(this.zoomContainerId);
	 	
	 	// Bild einfügen
	 	var img = document.createElement('img');
	 	img.id = 'detailsZoomGeneratedImage';
	 	$(this.zoomContainerId).appendChild(img);
	 	this.zoomImage = $(img.id);
	 	this.zoomImage.src = '/img/zoom_init_image.gif';
		this.zoomContainer.hide();
	 	
	 	// Knopf-Event hinzufügen
	 	Event.observe($(this.buttonContainerId), 'click', this.showZoom.bindAsEventListener(this));

	 },
	 
	 changeImage: function(params) {
		var refImage = $(params.imageId);
		var url = $(params.imageSrc);
		var absUrl = window.location.protocol+'//'+window.location.host+'/'+params.imageSrc
	    
	    if (refImage.src && refImage.src.toString() != absUrl) {
		    refImage.src = absUrl;
		    Effect.Appear(refImage, {duration: 0.5});
		    this.currentImage = refImage;
		    this.currentImageZoomSrc = params.zoomImageSrc;
		}	 
	 },
	 
	 showZoom: function() {
	 	var dateObj = new Date();
	 	this.zoomImage.src = this.currentImageZoomSrc+'?dontCache='+dateObj.getTime();
	 	this.buttonPressed = true;
	 	Event.observe(this.zoomImage, 'load', this.showZoomImage.bindAsEventListener(this));
	 	Event.observe(document, 'click', this.hideZoomImage.bindAsEventListener(this));
		this.zoomImage.hide();
//		this.zoomContainer.show();
//		this.zoomImage.setOpacity(0);
//	 	Effect.Appear(this.zoomImage, {duration: 1});
		Effect.Appear(this.zoomContainer, {duration: 0.3});
	 },
	 showZoomImage: function() {
//		this.zoomContainer.setStyle({display: 'block'});
//		this.zoomImage.setOpacity(1);

//	 	Effect.Grow(this.zoomImage, {duration: 1});
//	 	Effect.Grow(this.zoomImage, {duration: 1});
//		Effect.Grow(this.zoomImage, {duration: 0.8, direction: 'center'});
	 	Effect.Appear(this.zoomImage, {duration: 1.6});
	 },

	 hideZoomImage: function(e) {
 		if (this.buttonPressed) {
 			this.buttonPressed = false;
 			return;
 		} else {
			Event.stopObserving(document, 'click', null);
			this.zoomContainer.hide();
		}
	 }
 }
 
 /*
  * Tool-Tips
  */
 
 var toolTips = Class.create();
 
 toolTips.prototype = {
 	
	initialize: function(){
		Event.observe(window, 'load', this.initToolTips.bindAsEventListener(this));
	},
	
	initToolTips: function() {
		var tt = $$('.toolTip');
		
		tt.each(this.createToolTip.bind(this));
	},
	
	createToolTip: function() {
		var refToolTip = arguments[0];

		refToolTip.addClassName('toolTipShow');
		refToolTip.hide();
				
		// Tooltip für ...
		ttFor = refToolTip.id.replace(/toolTipFor_/, '');

		$(ttFor).observe('focus', this.showToolTip.bindAsEventListener(this));
		$(ttFor).observe('blur', this.hideToolTip.bindAsEventListener(this));
		
		//$(ttFor).writeAttribute('rel', refToolTip.id);
				
		// Tooltip-Container erzeugen
		var toolTipInner = document.createElement('div');
		$(toolTipInner).writeAttribute('class', 'toolTipInner');
		$(toolTipInner).update(refToolTip.innerHTML);
		refToolTip.update('');
		refToolTip.insert($(toolTipInner));
		
		// richtig positionieren
		topPos = 0 - refToolTip.getHeight() - 3;
		refToolTip.setStyle({top: topPos+'px'});

	},
	
	showToolTip: function(ev) {
		element = Event.element(ev);
		toolTip = $('toolTipFor_'+element.readAttribute('id'));

		toolTip.appear({ duration: 0.2 });
	},
	
	hideToolTip: function(ev) {
		element = Event.element(ev);
		toolTip = $('toolTipFor_'+element.readAttribute('id'));
		toolTip.fade({ duration: 0.2});
	}
 }
 
 pageToolTips = new toolTips();