// GGL-Eyewear JS Handlung & Animation
// Kunde: Biedermann und Brandstift
// Copyright 2010 by Hirbod Mirjavadi
// www.nightstomp.com - info@nightstomp.com
// Teile der Stylesheets wg. Fallback überschreiben
document.write('');
// Globale Variablen
var naviSetLeft = false; // steht die navi Links?
var lastNaviItem = null; // letztes Navi Element
var myNav = false; // Morph-Animation
var my2 = false; // Morph-Animation
var naviAnimationIsRunning = true; // Läuft die Animation noch?
var running1 = false; // Event Morph 1
var running2 = false; // Event Morph 2
var running3 = false; // Event Morph 3
var fadeImg = false; // Background-Fade-Datei
var hash = document.location.hash.substr(1); // Hash - alles nach der #
var oAlert = false; // Info iDevice Orientation - beim Start nicht gesetzt
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
var isiPod = navigator.userAgent.match(/iPod/i) != null;
var isiDevice = false;
var isiOS5 = false;
// for debug only
//isiPhone = false;
//isiPad = true;
// Hash verfügbar? Dann sind wir nicht auf der Startseite
if(hash) {
isStartPage = false;
}
function getOsVersion() {
var agent = window.navigator.userAgent,
start = agent.indexOf( 'OS ' );
if( ( agent.indexOf( 'iPhone' ) > -1 || agent.indexOf( 'iPad' ) > -1 ) && start > -1 ){
return window.Number( agent.substr( start + 3, 3 ).replace( '_', '.' ) );
} else {
return 0;
};
}
// Prüft, ob es ein iPhone, iPad oder iPod Touch ist
if(isiPhone || isiPad || isiPod)
{
isiDevice = true;
document.write('');
if(isiPhone || isiPod)
{
document.write('');
isStartPage = false;
}
if(isiPad)
{
document.write('');
}
if(getOsVersion() >= 5){
isiOS5 = true;
}
}
// Funktion die aufgerufen wird beim Laden und beim Content-Change / Orientationchange
function initTouchDevice(){
// Adressbar Fix!
window.scroll(0,1);
if((window.orientation == 0) || (window.orientation == 180))
{
if($('degree_navigation'))
{
if(isiPhone|| isiPod)
{
$$('.bottom_navigation')[0].setStyle('margin-top','780px');
$$('.glasses_colors')[0].setStyle('margin-top','800px');
} else {
$('fadeIt').setStyle('left','0px');
$$('.bottom_navigation')[0].setStyle('margin-top','980px');
$$('.glasses_colors')[0].setStyle('margin-top','1000px');
}
}
// Prüfen, ob die Meldung bereits ausgegeben wurde, damit nicht ständig ein Hinweis erfolgt
if(!oAlert)
{
alert('This website looks much better in landscape mode. Please turn me around 90°!\nThanks!');
oAlert = true; // User wurde informiert, einmal reicht!
}
} else {
if($('degree_navigation'))
{
if(isiPhone || isiPod)
{
$$('.bottom_navigation')[0].setStyle('margin-top','280px');
$$('.glasses_colors')[0].setStyle('margin-top','300px');
} else {
$('fadeIt').setStyle('left','-65px');
$$('.bottom_navigation')[0].setStyle('margin-top','430px');
$$('.glasses_colors')[0].setStyle('margin-top','450px');
}
}
}
}
function iPadFunctions(){
if(isiPad && !isiOS5)
{
if($('breadcrumb')){
$('fadeIt').setStyle('left', '-15px');
} else {
$('fadeIt').setStyle('left', '0px');
}
if($$('.model')[0])
{
$('logo').setStyle('right','0px');
} else {
$('logo').setStyle('right','50px');
}
}
}
// ruft Funktion in der sizer.js auf, um den Background korrekt zu skalieren
// und berechnet Navigationshöhe neu
function refreshPositionFixed()
{
moosizer.initialize();
}
function reverseNavigation() {
var navi_li = $('navi_wrapper').getElements('li').reverse();
var navi_ul = $('navi_wrapper').getElement('ul');
navi_li.each(
function(li_el){
li_el.inject(navi_ul);
}
);
}
// Domready-Events registrieren
window.addEvent('domready', function(){
if(Browser.ie6)
{
$$('body').set('html', 'We\'re sorry, but this site does not support Internet Explorer Version 6. Please upgrade at least to Internet Explorer 7. Or download Firefox for free. Just visit Mozilla.com for further details.');
return false;
}
// Ist es ein iDevice?
if(isiDevice){
initTouchDevice(); // Initialisiert Funktionen für iDevices
}
// Wenn es ein iPhone ist, die Funktion zum Umkehren der Navi ausführen
if(isiPhone) {
reverseNavigation(); // Die Navigation wird umgekehrt
}
// Wenns ein iPad ist, die iPad-Funktion laden
if(isiPad)
{
iPadFunctions(); // Ipad-Funktionen werden geladen
}
if(isStartPage){ // Befinden wir uns auf der Startseite?
startAnimation(); // Starte Animation
$$('body').removeClass('noscript'); // Klasse noscript entfernen
} else { // ansonsten
naviSetLeft = true; // navi steht jetzt links
$$('.bg')[0].setStyle('visibility', 'visible'); // hintergrund auf sichtbar stellen
// Wenn es das iPad ist, navi einbleden
if(isiPad)
{
$$('#navi_wrapper ul').setStyle('display', 'block');
$$('#navi_wrapper ul li').setStyle('left', '0px');
}
document.body.className = ''; // dem body die className wieder rauben
setActiveNavi(); // Funktion für Active-Status der Navi laden
}
initNavi(); // Navigation initislisieren
initGlassesOverview(); // Overview-Function initiallisieren
naviAnimationIsRunning = false;
});
// Ausführen, wenn kein iDevice
if(!isiDevice){
// Event starten, welches die Browserveränderungen überwacht
window.addEvent('resize', function(){
if(!naviSetLeft && !naviAnimationIsRunning){ // nur ausführen, wenn die Navi noch nicht links ist und keine animation läuft
$$('#navi_wrapper ul li').setStyle('left',window.getSize().x/2-40); // werte ausrechnen und setzen
}
});
}
// Event onload, damit Background noch mal neu eingepasst wird
window.addEvent('load', function(){
if(isiDevice)
{
refreshPositionFixed(); // Navi und Hintergrund einpassen
iPadFunctions(); // Ipad Funktionen laden
}
});
// Funktion, um rex-current anhand des current-hash zu setzen
function setActiveNavi()
{
$$('#navi_wrapper a').each(
function(anchor){
if(hash.indexOf(anchor.get('href')) > -1 && hash){
var list_element = anchor.getParent('li');
list_element.removeClass('rex-normal');
list_element.addClass('rex-current');
}
}
);
}
// Ajax-Ladeanimation ein & ausblenden
function showAjaxLoadingAnimation(value)
{
switch (value) {
case "1":
$('loadingSpinner').setStyle('display','block');
break;
case "2":
$('loadingSpinner').setStyle('display','none');
break;
default:
$('loadingSpinner').setStyle('display','none');
}
}
// Funktion der Startanimation
function startAnimation(){
// Ladebalken anzeigen
showAjaxLoadingAnimation("1");
var el = $$('.bg')[0]; // Element in Var speichern
var oldImgSrc = el.src; // src auslesen
el.src = 'images/start_bg.jpg'; // neue src setzen
myBG = new Fx.Morph(el,
{
duration: 1500,
onComplete:function()
{
// Ladebalken ausbelden
showAjaxLoadingAnimation("2");
// Standardbild laden
fadeImg(oldImgSrc);
// Startnavigation starten
setStartNavi();
/*window.setTimeout(function(){
$$('#navi_wrapper ul li.rex-article-1')[0].morph('.open').addClass('rex-current');
}, 3250);*/
}
});
myBG.start({opacity: [0,1]}); // morph der opacity - von 0 auf 1
}
// Navigation initialisieren
function initNavi(){
lastNaviItem = $('navi_wrapper').getElement('li.rex-current'); // letztes Item der NAvi auslesen
$$('#navi_wrapper ul li a').each(function(item, index){ // in der schleife durchgehen
if(isiPad) {
if(naviSetLeft){
item.addClass('setLeft'); // Ipad Fix
}
}
if(!item.getParent().hasClass('rex-current')){ // prüfen ob parent nicht rex-current ist
item.getParent().setStyle('width', 20); // style setzen
}
if(!isiDevice){ // ausführen, wenn es kein iDevice ist
item.getParent().addEvent('mouseenter', function(){ // mouseenter event
if(!naviAnimationIsRunning) // nur ausführen, wenn animation nicht läuft
{
running1 = true; // jetzt läuft die Animation
myNav = new Fx.Morph(item.getParent(), {duration: 500, link: 'cancel', unit: 'px', transition: Fx.Transitions.Expo.easeInOut,
onComplete:function(){
running1 = false; // jetzt nicht mehr
}
});
myNav.start('.open'); // element morphen mit klasse .open aus CSS
}
item.getParent().addEvent('mouseleave', function(){
if(myNav) // Wenn die Hover-Animation noch läuft, abbrechen
{
myNav.cancel(); // Animation vom Hover läuft noch - abbrechen
}
running2 = true; // mouseleave animation läuft
if(!item.getParent().hasClass('rex-current')) // erneut auf klasse rex-current prüfen
{
my2 = new Fx.Morph(item.getParent(), {duration: 500, link: 'chain', unit: 'px', transition: Fx.Transitions.Quad.easeIn,
onComplete:function(){
running2 = false; // animation läuft nicht mehr
}
});
my2.start('.close'); // element morphen mit Klasse .close aus CSS
}
});
})
}
});
$$('#navi_wrapper ul li a').each(function(item, index){ // Jedes Element aus $ durchgehen
item.addEvent('click', function(){ // Click-Event hinzufügen
if(!this.getParent().hasClass('rex-current')) // element auf rex-current prüfen
{
item.getParent().removeEvent('mouseleave'); // event entfernen
if(lastNaviItem){ // wenn letztes el gesetzt
lastNaviItem.get('morph').start({'width': '20px !important', 'opacity': 0.75, duration: 100}).chain(
function(){
running3 = false;
});
lastNaviItem.removeClass('rex-current').addClass('rex-normal'); // dem letztem item rex-current entfernen und rex-normal hinzufügen
lastNaviItem.getElement('a').removeClass('rex-current'); // s.o
lastNaviItem = item.getParent(); // letztes El neu setzen
} else {
lastNaviItem = item.getParent(); // else des if-statement - speicher parent
}
item.getParent().removeClass('rex-normal').addClass('rex-current'); // aktiv setzen: rex-normal entfernen und durch current ersetzen
mymy = new Fx.Morph(item.getParent(), {duration: 500, link: 'cancel', unit: 'px', transition: Fx.Transitions.Expo.easeInOut}); // morphen
mymy.start('.open'); // open morphen
setNavi(); // Navi initialisieren
}
return false
});
});
/*
$$('#navi_wrapper a').each(function(item, index){
item.href="#";
});*/
}
// Funktion um die NAvigation zu verschieben
function setNavi()
{
// nur ausführen, wenn die Navigation noch nicht links ist
if(!naviSetLeft)
{
naviSetLeft = true; // jetzt ist sie links
if(!isiPad)
{
var slideEls = function(els) {
if (!els.length)
return;
var lastEl = els.getLast(); // letztes element auslesen
lastEl.set("morph", {
duration: 1000,
transition: Fx.Transitions.Expo.easeInOut,
link: "chain",
onStart: function() {
window.setTimeout(function(){
naviAnimationIsRunning = true; // var setzen
slideEls(els); // elemente eins nach dem anderen durchgehen
els.erase(lastEl); //letztes el löschen
}, 50);
}, onComplete: function() {
//lastEl.morph('.close');
naviAnimationIsRunning = false; // animation läuft nicht mehr
}
}).morph({left: 0, onComplete: function(){
naviAnimationIsRunning = false; // animation läuft nicht mehr
}
});
};
}
if(isiPad) // ausführen, wenn es ein iPad ist
{
/*$$('#navi_wrapper li a').each(function(item, index){
item.setStyle('display', 'none');
});*/
var slideEls = function(els) {
if (!els.length)
return;
var lastEl = els.getLast(); // letztes element auslesen
lastEl.set("morph", {
duration: 1000,
transition: Fx.Transitions.Expo.easeInOut,
link: "chain",
onStart: function() {
window.setTimeout(function(){
naviAnimationIsRunning = true; // var setzen
slideEls(els); // elemente eins nach dem anderen durchgehen
els.erase(lastEl); //letztes el löschen
//$$('#navi_wrapper ul li.rex-current')[0].setStyle('left', 0); // iPad Active FIx
//$$('#navi_wrapper ul li.rex-current')[0].setStyle('width', '95px'); // iPad Active FIx
}, 50);
}, onComplete: function() {
//lastEl.morph('.close');
naviAnimationIsRunning = false; // animation läuft nicht mehr
var lastTest = $$('#navi_wrapper ul li.rex-current')[0];
lastTest.set("morph", {
duration: 300
}).morph({left: 0, width: 95});
//lastTest.erase(lastTest); // iPad Active FIx
}
}).morph({left: 0, width: 20, onComplete: function(){
naviAnimationIsRunning = false; // animation läuft nicht mehr
if(isiPad){
$$('#navi_wrapper ul li a').each(function(item,index){
item.addClass('setLeft'); // iPad-Fix
});
}
}
});
};
}
// die funktion in der schleife immer wieder aufrufen
// damit jedes li einzeln nacheinander bewegt wird
// mit reverse wird das array umgekehrt
if(isiPad){
slideEls($$('#navi_wrapper ul li').reverse());
} else {
slideEls($$('#navi_wrapper ul li').reverse());
}
}
}
// Animation und Position der Startnavigation setzen
// Alle wichtigen Kommentare in der setNavi() gesetzt
function setStartNavi()
{
var liWidth = '20';
var liOffset = '40';
// Wenn es ein iPad ist, größe nicht verändern
if(isiPad)
{
liWidth = '95';
liOffset = '180';
}
var slideEls = function(els) {
if (!els.length)
return;
var lastEl = els.getLast();
lastEl.set("morph", {
duration: 3000,
transition: Fx.Transitions.Expo.easeInOut,
link: "chain",
onStart: function() {
window.setTimeout(function(){
naviAnimationIsRunning = true;
slideEls(els);
els.erase(lastEl);
}, 50);
if(isiPad)
{
// Da es zu Performanceproblemem beim iPad kommt und die Navi schon teilweise vorher sichtbar ist,
// hier ein kleiner Wordaround, damit die Navigation erst beim Slide-In sichtbar wird
window.setTimeout(function(){ $$('#navi_wrapper ul').setStyle('display', 'block');}, 450);
}
}, onComplete: function() {
//lastEl.morph('.close');
naviAnimationIsRunning = false;
}
}).morph({left: ['-400', window.getSize().x/2-liOffset], width: ['95',''+liWidth+''], onComplete: function(){
naviAnimationIsRunning = false;
}
});
};
slideEls($$('#navi_wrapper ul li'));
}
/*var myEffect = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
// the styles of myClassName will be applied to the target Element.
myEffect.start('.myClassName');
*/
// Funktion um die Brillen zu highlighten (in der collection-übersicht)
function highlightGlasses(){
var element = this;
var hover_element = element.getElement('.hover_element');
element.setStyle('z-index', 2);
element.get('morph').start( { 'padding-right': 13 } ).chain(
function(){
var anchor = element.getElement('a');
var category_headline = element.getParent('div.glass_category').getElement('h2');
category_headline.set('html', anchor.get('rel'));
}
);
hover_element.get('morph').start( { 'opacity': 1 } );
}
// Funktion um die highlights wieder zu entfernen
// stellt den z-index wieder her
function resetGlasses(){
var element = this;
var hover_element = element.getElement('.hover_element');
element.setStyle('z-index', 1);
element.get('morph').start( { 'padding-right': 0 } );
hover_element.get('morph').start( { 'opacity': 0 } );
}
function resetGlassesHeadline(){
var category = this;
var category_headline = category.getElement('h2');
category_headline.set('html', category.get('rel'));
}
// funktion um die Brillen-Rows einzeln anzuzeigen
function showGlassesRow(row_number){
var row = this;
var images = row.getElements('img');
var width = images.length * 130;
width += 50;
var fx = function(){
row.set('morph', { 'link': 'cancel', onComplete: iPadFunctions });
row.get('morph').start( { 'width': [0, width] } );
}
fx.delay((row_number * 200));
}
// Init-Funktion für die Animation und dem Hover
// Addet die Events für mouseenter und mouseleave
function initGlassesOverview(){
var counter = 0;
$$('.glass_category').each(
function(category){
var rows = category.getElements('.model');
var list_elements = category.getElements('li');
if(!isiDevice)// nur events adden, wenn kein iDevice
{
list_elements.addEvents(
{
'mouseenter': highlightGlasses,
'mouseleave': resetGlasses
}
);
}
category.addEvent('mouseleave', resetGlassesHeadline);
rows.shuffle();
rows.each(
function(row){
showGlassesRow.bind(row, counter).attempt();
counter++;
}
);
}
);
// detailansicht
$$('.glasses_colors').each(
function(category){
var list_elements = category.getElements('li');
var anchors = category.getElements('a');
list_elements.addEvents(
{
'mouseenter': showGlassesThumbnail,
'mouseleave': hideGlassesThumbnail
}
);
anchors.addEvent('click', show90DegImage);
var first_anchor = anchors[current_glass_color];
var first_list_element = list_elements[current_glass_color];
show90DegImage.bind(first_anchor).attempt();
showGlassesThumbnail.bind(first_list_element).attempt();
}
);
$$('.bottom_navigation li').each(
function(list_element){
var anchor = list_element.getElement('a');
if(anchor.hasClass('previous')){
anchor.addEvent('click', showPreviousImage);
}
if(anchor.hasClass('next')){
anchor.addEvent('click', showNextImage);
}
}
);
if(isiDevice && !isiOS5)
{
refreshPositionFixed();
}
}
// In der Detailansicht für die Pfeilsteuerung
// Zeigt das letzte Bild an
function showPreviousImage(event){
var active_anchor = $$('.glasses_colors a.active')[0];
if(active_anchor){
var list_element = active_anchor.getParent('li');
var previous = list_element.getPrevious();
if(previous){
show90DegImage.bind(previous.getElement('a')).attempt();
showGlassesThumbnail.bind(previous).attempt();
}else{
if(this.get('href') != 'javascript://'){
if(!History.hasPushState()){
window.location.hash = this.get('href');
}else{
// window.history.pushState(state || null, title || null, this.get('href'));
// event.event.state.attempt();
History.push(this.get('href'));
}
}
}
}
return false;
}
// In der Detailansicht für die Pfeilsteuerung
// Zeigt das nächste Bild an
function showNextImage(event){
var active_anchor = $$('.glasses_colors a.active')[0];
if(active_anchor){
var list_element = active_anchor.getParent('li');
var next = list_element.getNext();
if(next){
show90DegImage.bind(next.getElement('a')).attempt();
showGlassesThumbnail.bind(next).attempt();
}else{
if(this.get('href') != 'javascript://'){
if(!History.hasPushState()){
window.location.hash = this.get('href');
}else{
// window.history.pushState(state || null, title || null, this.get('href'));
// event.event.state.attempt();
History.push(this.get('href'));
}
}
}
}else{
show90DegImage.bind($$('.glasses_colors a')[0]).attempt();
showGlassesThumbnail.bind($$('.glasses_colors li')[0]).attempt();
}
return false;
}
// Blendet die Rows der Übersicht aus
function hideGlassesRow(row_number){
var row = this;
var fx = function(){
row.set('morph', { 'duration': 250, 'link': 'ignore' });
row.get('morph').start( { 'width': 0 } );
}
fx.delay((row_number * 150));
}
var current_glass_color = 0;
// Animation um die Rows auszublenden
function fadeOutGlasses(article_id, glass_color_index){
current_glass_color = glass_color_index;
var counter = 0;
$$('.glass_category').each(
function(category){
var rows = category.getElements('.model');
rows.shuffle();
rows.each(
function(row){
hideGlassesRow.bind(row, counter).attempt();
counter++;
}
);
}
);
var fx = function(){
// return callGGL(article_id);
}
fx.delay((counter * 150));
return false;
}
// thumbnail der Brillen anzeigen
function showGlassesThumbnail(){
var list_element = this;
list_element.get('morph').start( { 'width': 130 } );
}
// Thumbnail der Brillen verstehen
function hideGlassesThumbnail(){
var list_element = this;
list_element.get('morph').start( { 'width': 65 } );
}
// Funktion um die Degree-Navi anzuzeigen
function setDegNavi(value) {
if($$('.degreeNav')[0])
{
var degNaviHidden = $$('.'+value)[0].innerHTML;
$('degree_navigation').set('html', degNaviHidden);
}
}
function setDegActive(el) {
$$('ul#degree_navigation li a').each(function(item, index) {
item.removeClass('active');
});
if(el)
{
el.addClass('active');
}
}
// Bild anzeigen
function show90DegImage(){
$$('.glasses_colors a').each(
function(link){
link.removeClass('active');
//link.getParent('li').removeEvents('mouseleave');
link.getParent('li').addEvent('mouseleave', hideGlassesThumbnail);
}
);
var anchor = this;
anchor.addClass('active');
anchor.getParent('li').removeEvents('mouseleave');
$$('.glasses_colors a').each(
function(link){
if(!link.hasClass('active')){
hideGlassesThumbnail.bind(link.getParent('li')).attempt();
}
}
);
var image = anchor.get('rel');
var img_title = anchor.get('title');
setDegNavi(anchor.get('id')); // Setzt die Degree-Navi zur aktuellen Modellfarbe
$('breadcrumb').set('html', currentBreadcrumb + img_title); // Setzt die Breadcrumb zur aktuellen Modellfarbe
fadeImg(image);
return false;
}
// Dirty IE7 Fixes
// Funktion liefert alle möglichen Werte einer Domain zurück
// Wird wg. IE7 benötigt, um den Path herauszufinden
function parseUri (str) {
var o = parseUri.options,
m = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
uri = {},
i = 14;
while (i--) uri[o.key[i]] = m[i] || "";
uri[o.q.name] = {};
uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
if ($1) uri[o.q.name][$1] = $2;
});
return uri;
};
parseUri.options = {
strictMode: false,
key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
q: {
name: "queryKey",
parser: /(?:^|&)([^&=]*)=?([^&]*)/g
},
parser: {
strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
}
};
function repairLinksForIE7()
{
$$('#content a').each(
function(anchor){
var link = anchor.get('href');
var pathResult = parseUri(link);
anchor.set('href', pathResult['path']);
}
);
}