/*############################################################*/
/*#                  GLOBALS                                 #*/
/*############################################################*/

/* ---------- GLOBALS - dynamisch erzeugt per PHP ---------- */
var lang; //Sprache: String, 'cn'
var template; //aktuelle Template: String, 'tpl_overview'
var siteId; //Pfad der aktuellen Ajax-Seite: String, '/folder1/folder2/aboutUs.txt
var assetsImagesPath;  //Pfad zum Bildordner: String
var bgImageFile; //Pfad zum Hintergrundbild in voller Aufloesung: String
var sliderImage1File; //Pfad zum ersten Bild im Slider in voller Aufloesung: String
var sliderImage2File; //Pfad zum zweiten Bild im Slider in voller Aufloesung: String
var sliderImage3File; //Pfad zum dritten Bild im Slider in voller Aufloesung: String
var slideshowData; //Daten fuer die Slideshow: Object, [[Pfad zum 1. Bild (Large): String, Pfad zum 1. Bild (Small): String, Titel 1. Bild: String, Beschreibung 1. Bild: String], [Pfad zum 2. Bild: String, Titel 2. Bild: String, Beschreibung 2. Bild: String]]
var movieData; //Daten fuer den Film: Object [Pfad zur SWF: String, Pfad zur grossen FLV: String, Pfad zur kleinen FLV: String Uebergabetext: String]
var gameData; //Pfad zur Spiele-SWF: string  
var assetsImagesPath; //Pfad zum Asset-Ordner: string 
var bgImagesToLoad; //zu ladenden Hintergrundgrafiken: Array
var slideshowPictureCaption; //chinesische oder engl. Bezeichnung fuer Slideshow-Bezeichnung (Picture 1/5)
var phoneCaption; //chinesische oder engl. Bezeichnung fuer Phone
var faxCaption; //chinesische oder engl. Bezeichnung fuer Fax
var emailCaption; //chinesische oder engl. Bezeichnung fuer E-Mail
var careerSortingPath; //Pfad zum Skript fuer die Career-Sortierung
var noUploadFileMessage; //Fehlermeldung wenn im Career-Template eine Upload-Datei ausgewaehlt aber nicht hochgeladen wurde

/* ---------- GLOBALS - statisch ---------- */
var slideshowSmall = '';
var slideshowFullscreen = '';
var slideshowSmallAttributes = {        
  infoHeadline: 'headlineSmall',
  infoDescription: 'descriptionSmall',
  infoCount: 'countSmall',
  prevButton: 'previousSmall',
  nextButton: 'nextSmall'
}


var ourCompaniesCitiesPath = '/php/companies_cities.php'; //Pfad zur Datei fuer den Ajax-Request "Cities anzeigen": String
var ourCompaniesLocationsPath = '/php/companies_locations.php'; //Pfad zur Datei fuer den Ajax-Request "Standorte auflisten": String
var careerSortingPath = '/php/career_jobopenings.php'; //Pfad zur Datei fuer den Ajax-Request "JobAngebote": String
var jobInfoPath = '/php/career_jobopenings_details.php'; //Pfad zur Datei fuer den Ajax-Request "JobInformationen": String
var deleteAttachmentPath = '/php/career_attachment_remove.php'; //Pfad um das Attachment im Career-Template zu loeschen



/*############################################################*/
/*#                  STARTUP                                 #*/
/*############################################################*/

/* ---------- STARTUP - Funktionen, die beim Laden des Skipts ausgefuehrt werden ---------- */
startUp(template);


/* ---------- STARTUP - Funktionen die ausgefuehrt werden, wenn die DOM-Elemente geladen sind  ---------- */
window.addEvent('domready', function() {
  windowResized();  
  window.onresize = function() {
   windowResized();
  }    
  
  $('jsCheck').remove();  //"Kein JavaScript"-Layer entfernen
  
  if (template == 'tpl_home') prepareHomeSlider();

  /* Safari-Bug: Container-Hoehe des Hintergrundbild berechnen, da keine 100% angezeigt werden */
  if (window.webkit) {
    var windowHeight = window.getHeight() - 118;
    $('bg-image').setStyle('height', windowHeight);
  }
    
 /* CSS-Hintergrundbilder laden, damit sie schneller angezeigt werden */
  var srcImages = [
    assetsImagesPath + '16x9_blank.gif',
    assetsImagesPath + 'ajax-loader.gif'
  ];
  preloadImages(srcImages);
  preloadImages(bgImagesToLoad);
  
  /* Bug: Systemschrift schaut beim Mac unter den Image-Texten heraus */
  if( lang == 'en' && isMac() ) {
    $$('ul#prime-nav li a').extend($$('ul#subnav li a')).each( function (link) {
      link.setStyle('font-size', 10);
    });    
  }
    
  $$('#subnav li').each( function (object) {
    /* hover-Verhalten fuer den IE6 simulieren */
    if (window.ie6) {
      object.addEvent('mouseenter', function(){ this.addClass('hover') });
      object.addEvent('mouseleave', function(){ this.removeClass('hover') });   
    }
    /* Links in der Subnavigation fuer die Ajax-Funktionen entfernen */
    object.getFirst().setProperty('href', 'javascript:;');
  });  
  subnav.addSubnavBehaviour();
  
  /* Scrollbalken bei Bedarf hinzufuegen */
  initiateFlexcroll();
  
  /* in der startUp()-Funktion definierte onload-Events ausfuehren */
  if (typeof(onDomLoaded) == 'function') { onDomLoaded(); }

  /* Firefox-Bug: automatische Selektion des Inhalts verhindern */
  if (window.gecko) {
    $E('body').style.MozUserSelect = "none";     
    $('innerWrapper').addEvent('mouseout', function(){
      $E('body').style.MozUserSelect = "none";  
    });
    $('innerWrapper').addEvent('mouseover', function(){
      $E('body').style.MozUserSelect = "text";
    });  
  }
});

/* ---------- STARTUP - Funktionen die ausgefuehrt werden, wenn die Seite geladen ist ---------- */
window.addEvent('load', function() {
    
  /* Hintergrundbilder nachladen */
  reloadImages();
    
  /* in der startUp()-Funktion definierte onload-Events ausfuehren */
  if (typeof(onBodyLoaded) == 'function') { onBodyLoaded(); }
  
  /* verhindert das kurze Aufflickern des Hintergrundbildes */
  if (window.ie6 && $defined($('bgPicture'))) { $('bg-image').getFirst().setStyle('visibility', 'visible'); }
  
  /* Previewloader-Layer entfernen */
  if ($defined($('previewloader'))) $('previewloader').remove();
});


/*############################################################*/
/*#                  STARTUP                                 #*/
/*############################################################*/

/**
 * Funktion mit irgendwas
 * @param currTemplate {String} aktuelles Template
 */
function startUp(currTemplate) {
  
  /* Bildpfade an die Aufloesung anpassen */
  if ( slideshowData ) {
    slideshowData.each(function(slideshowData) {
      slideshowData[0] = getScreenAdaptedImagePath(slideshowData[0]);
    });    
  }
  bgImageFile = getBackgroundImagePath(bgImageFile);
  sliderImage1File = getSliderImagePath(sliderImage1File);
  sliderImage2File = getSliderImagePath(sliderImage2File); 
  sliderImage3File = getSliderImagePath(sliderImage3File);  
  
  switch (currTemplate) {
    case 'tpl_game':
      onBodyLoaded = function() {
        var FO = { movie: gameData, id: "flash_movie", quality: "high", wmode: "transparent", width: "665", height: "242", majorversion: "8", build: "0" };
        UFO.create(FO, "flash_container");
      }
      break;
    case 'tpl_movie':
      onBodyLoaded = function() {
        var FO = { movie: movieData[0], flashvars: "playerType=layer&filePath=" + movieData[1], id: "flash_movie", quality: "high", wmode: "transparent", width: "100%", height: "100%", majorversion: "8", build:"0" };
        UFO.create(FO, "movieWrapper");
      }
      break;
    case 'tpl_slideshow':
      onBodyLoaded = function() {
        slideshowSmall = new showcaseSlideShow($('slideshowContainer'), slideshowData, slideshowSmallAttributes);
      }
    break;
    case 'tpl_ourcompanies':
      onBodyLoaded = function() {
       ourCompanies.init();
      }
      break;
    case 'tpl_showcase':
      onBodyLoaded = function() {
        showcase.init();
      }
      break;
    case 'tpl_career':    
      onBodyLoaded = function() {
        career.init();
      }
      break
    default:
  }     
}


/**
 * der Pfad des Hintergrundbildes wird abhaengig von der Aufloesung ermittelt
 * @param path {String} Standardpfad
 * @return {string} angepasster Pfad
 */
function getSliderImagePath(path) {
  var helper = path.substring(0, (path.length - 4));
  var screenHeight = screen.height;
  if (screenHeight < 1024) {
    finalPath = helper + '_0356x0178.jpg';
  } else {
    finalPath = helper + '_0512x0256.jpg';
  }
  return finalPath;
}


/**
 * der Pfad des Bildes wird abhaengig von der Aufloesung ermittelt
 * @param path {String} Standardpfad
 * @return {string} angepasster Pfad
 */
function getScreenAdaptedImagePath(path) {
  var helper = path.substring(0, (path.length - 4));
  var screenHeight = screen.height;
  if (screenHeight < 1024) {
    finalPath = helper + '_1024x0768.jpg';
  } else if (screenHeight > 1024) {
    finalPath = path;
  } else {
    finalPath = helper + '_1280x1024.jpg';
  }
  return finalPath;
}


/**
 * der Pfad des Hintergrundbildes wird abhaengig von der Aufloesung ermittelt
 * @param path {String} Standardpfad
 * @return {string} angepasster Pfad
 */
function getBackgroundImagePath(path) {
  var helper = path.substring(0, (path.length - 4));
  var screenHeight = screen.height;
  if (screenHeight < 1024) {
    finalPath = helper + '_1024x0768.jpg';
  } else {
    finalPath = path;
  }
  return finalPath;
}


/**
 * fuegt der Subnavigation dynamisches Verhalten hinzu
 */
var subnav = {
  preventSubnavShowing: false,
  preventSubnavGrowing: false,
  preventSubnavShrinking: false,
  alwaysExtended: (template == 'tpl_overview') ? true : false,
  slider: '',
  addSubnavBehaviour: function() {
    subnav.slider = new Fx.Style ('subnav', 'bottom', {duration: 500, wait: false});
    if (!$defined($('subnav'))) return;
    if (subnav.alwaysExtended == true) $('subnav').setStyle('bottom', -1);
    $('subnav').addEvent('mouseenter', function() {
      if (subnav.preventSubnavGrowing != true) subnav.slider.start(-1);
    }); 
    $('subnav').addEvent('mouseleave', function() {
      if (subnav.alwaysExtended != true && subnav.preventSubnavShrinking != true) subnav.slider.start(-35);
    }); 
  }  
}


/**
 * laedt die Bilder in Original-Aufloesung nach und fügt sie ein, sobald sie geladen sind
 */
function reloadImages() {
  /* imagesToLoad = [id des zu ersetzenden Bildes, Pfad] */
  var imagesToLoad = new Array(); 
  if ( $defined($('bgPicture')) ) {
    imagesToLoad = [
      ['bgPicture', bgImageFile]
    ];    
  }
  if (screen.height > 768) {
    imagesToLoad.extend([
      ['slider-image1', sliderImage1File],
      ['slider-image2', sliderImage2File],
      ['slider-image3', sliderImage3File]
    ]);   
  }
  
  imagesToLoad.each( function(imagesToLoad) {
    if (imagesToLoad[1]) {
      var img = new Image();
      img.src = imagesToLoad[1];
      if(!img.complete) {
        img.onload = function() { 
          if ( $defined($(imagesToLoad[0])) ) $(imagesToLoad[0]).setProperty('src', imagesToLoad[1]);
        };  
      } else {
        $(imagesToLoad[0]).setProperty('src', imagesToLoad[1]);
      }      
    }
  });
}

 
/**
 * Inhalte an die Fenstergroesse anpassen
 */
function windowResized(){
  var windowWidth = (window.gecko) ? document.body.clientWidth : window.getWidth(); //wegen Netscape
  var windowHeight = (window.gecko) ? document.body.clientHeight : window.getHeight(); //wegen Netscape
  var marginSide = 60;
  var marginTop = 118;  
  var windowRel = (windowWidth - marginSide ) / (windowHeight - marginTop);
  var imgRelBackground = 1000 / 500; //Backgroundimage Groessen Verhaeltnis 

  /* Bild ist zu klein fuer 100% Breite */
  if (windowRel >= imgRelBackground) {  
    var correctWindowHeight = (windowHeight < 560) ? 560 : windowHeight; //min/max height wegen IE6
    var newBackgroundWidth = (imgRelBackground * ( correctWindowHeight - marginTop) + 60).toInt();
    newBackgroundWidth = (newBackgroundWidth < 930) ? 930 : (newBackgroundWidth > 1700) ? 1700 : newBackgroundWidth; //min/max width wegen IE6
    if (window.gecko) {
      $('outerWrapper').setStyle('width', newBackgroundWidth);
      $$('#bg-image img').setStyle('width', newBackgroundWidth);
    } else {
      $('outerWrapper').setStyle('width', newBackgroundWidth);
    }
    
  /* Bild passt wieder auf 100% Breite */
  } else if($('outerWrapper').getStyle('width').toInt() != windowWidth) {   
    if (window.gecko) {
     $('outerWrapper').setStyle('width', '');
     $$('#bg-image img').setStyle('width', ''); 
    } else if (window.ie6) {
      var ie6Width = (document.documentElement.clientWidth < 930 ) ? "930px" : (document.documentElement.clientWidth) > 1700 ? "1700px" : "100%"
      $('outerWrapper').setStyle('width', ie6Width);
    } else {
      $('outerWrapper').setStyle('width', ''); 
    }
  }
  
  /* fuer Netscape und Opera */
  if (!window.gecko && !window.ie) {
    var height = Math.round($('main').getSize().size.y /100 * 33.4);
    $$('.project-element').each( function (object) {
      object.setStyle('height', height);
    });  
  }
  
  /* Safari-Bug: Container-Hoehe des Hintergrundbild berechnen, da keine 100% angezeigt werden */
  if (window.webkit) {
    var windowHeight = window.getHeight() - 118;
    $('bg-image').setStyle('height', windowHeight);
  }
}


/**
 * auf der Home sollen die Teaser eingefahren werden bevor die neue Seite geoeffnet wird
 */
function prepareHomeSlider() {
  $$('a').each( function (link) {
    var href = link.getAttribute('href');
    link.addEvent('click', function(event){
      sliderContentMovement.changeStatus('hideSlider', event);
      openURL.pass(href).delay(1000);
    });
  }); 
  
  teaser = [
    [$('content'), $E('#content a').getAttribute('href')],
    [$E('#project-top .projectInner'), $E('#project-top .projectInner a').getAttribute('href')],
    [$E('#project-middle .projectInner'), $E('#project-middle .projectInner a').getAttribute('href')],
    [$E('#project-bottom .projectInner'), $E('#project-bottom .projectInner a').getAttribute('href')]
  ];
  teaser.each( function (teaserElement) {
    teaserElement[0].setAttribute ('onclick', '');
    teaserElement[0].addEvent('click', function(event){
      sliderContentMovement.changeStatus('hideSlider', event);
      openURL.pass(teaserElement[1]).delay(1000);
    }); 
  });
}


/**
 * Steuert das Zusammenspiel zwischen Content und Slider
 */
var sliderContentMovement = {
  sliderEffect: '',
  changeContentEffect: '',
  blenderEffect: '',
  
  /**
   * Aktion ausfuehren
   * @param action {String} bestimmt welche Aktion durchgefuehrt wird
   * @param event {event} Event-Objekt
   * @return {string} angepasster Pfad
   */
  changeStatus: function(action, event) {
    var event = new Event(event);  
    event.preventDefault();    
    if (!$defined($('blender_toggleContent_bottom'))) {
      var blender = new Element('div', {
        'id': 'blender_toggleContent_bottom',
        'class': 'blender',
        'styles': {
                 'z-index': '200',
                 'opacity': '0',
                 'top': 30
                 }
      }).injectInside('content');
    }
    if (typeof(sliderContentMovement.blenderEffect) == 'object') sliderContentMovement.blenderEffect.stop();
    sliderContentMovement.blenderEffect = new Fx.Style('blender_toggleContent_bottom', 'opacity', {duration: 300});
    if (typeof(sliderContentMovement.sliderEffect) == 'object') sliderContentMovement.sliderEffect.stop();
    sliderContentMovement.sliderEffect = new Fx.Style('projects-slider', 'right', {duration: 1000});
    if (typeof(sliderContentMovement.changeContentEffect) == 'object') sliderContentMovement.changeContentEffect.stop();
    sliderContentMovement.changeContentEffect = new Fx.Styles('content', {duration: 1000});          
    switch (action) {
      case 'minimize': 
        sliderContentMovement.shrinkContent();
        break;
      case 'maximize':
        sliderContentMovement.expandContent();
        sliderContentMovement.shrinkProjectsSlider();
        break;
      case 'showRelatedLinks':      
        if ($('minimize').getStyle('display') == 'block') { 
          sliderContentMovement.expandProjectsSlider.delay(300);                 
        } else {
          sliderContentMovement.expandProjectsSlider();                     
        }
        sliderContentMovement.shrinkContent();
        break;
      case 'hideRelatedLinks':
        sliderContentMovement.shrinkProjectsSlider();  
        sliderContentMovement.expandContent();
        break;
      case 'hideSlider':
        sliderContentMovement.shrinkProjectsSlider(); 
        break;      
    }
  },
  
  /**
   * Content ausfahren
   */
  expandContent: function() {
    var moveTo = -1; //wegen IE6 1 Pixel-Fehler 
    var width = 790;    
    var fadeEnd = 1;
    sliderContentMovement.changeContentEffect.start({
      'bottom': moveTo,
      'width': width
    }).chain( function() {    
      if (window.ie6) {
        $('replaceContent').setStyle('position', 'relative');       
      }      
      $('minimize').style.display = 'block';
      $('maximize').style.display = 'none';
      sliderContentMovement.blenderEffect.start(0).chain( function() {  
      $('blender_toggleContent_bottom').remove();
      if ( $defined($('subnav')) && !subnav.preventSubnavShowing ) $('subnav').setStyle('display', 'block');      
      });
    });
  },   
  
  /**
   * Content einfahren
   */
  shrinkContent: function() {
    var moveTo = 36 - $('content').getSize().size.y;
    var width = 530;
    if ($defined($('subnav'))) $('subnav').setStyle('display', 'none');  
    sliderContentMovement.blenderEffect.start(1).chain(function() {
      if (window.ie6) {
        $('replaceContent').setStyle('position', 'static');
        $('blender_toggleContent_bottom').setStyle('width', 800);        
      }
      sliderContentMovement.changeContentEffect.start({
      'bottom': moveTo,
      'width': width
      }).chain(function() {
        $('minimize').style.display = 'none';
        $('maximize').style.display = 'block'; 
      });  
    });
  },
  
  /**
   * Slider ausfahren
   */
  expandProjectsSlider: function() {
    var moveTo = -1; //wegen IE6 1 Pixel-Fehler
    var from = -$('projects-slider').getSize().size.x;
    sliderContentMovement.sliderEffect.start(from, moveTo); 
  },
  
  /**
   * Slider einfahren
   */
  shrinkProjectsSlider: function() {
    var moveTo = -600;
    sliderContentMovement.sliderEffect.start(moveTo);
  }
}


/**
 * Laedt die neuen Inhalte mit Ajax nach
 */
var ajaxContent = {
  ajax: '',
  blenderToggleContentEffect: '',
  contentHeightEffect: '',
  blenderShowAgain: '',
  
  /**
   * Ajax-Nachladeprozess fuer den Inhaltsbereich initiieren
   * @param site {String} Pfad fuer die neu zu ladende Seite
   * @param new_template {string} zu ladende Template
   * @param element {string} geklicktes Subnav-Listen-Element
   */  
  updateContent: function(site, new_template, element) {
    if (siteId == site) return;
    if (typeof(ajaxContent.blenderShowAgain) == 'object') ajaxContent.blenderShowAgain.stop();
    if (typeof(ajaxContent.blenderToggleContentEffect) == 'object') ajaxContent.blenderToggleContentEffect.stop();
    if (typeof(ajaxContent.contentHeightEffect) == 'object') ajaxContent.contentHeightEffect.stop();
    if (ajaxContent.ajax.running) ajaxContent.ajax.cancel();
      
    subnav.preventSubnavShrinking = true;
    siteId = site;
    template = new_template;  
    $$('#subnav .active').each( function (object) {
      object.removeClass('active');
    });
    $(element).addClass('active');
    if(!$defined($('blender_toggleContent_bottom'))) {
      var blender = new Element('div', {
        'id': 'blender_toggleContent_bottom',
        'class': 'blender',
        'styles': {
                 'z-index': '100',
                 'opacity': '0'
                 }
      }).injectInside('replaceContent');    
    }
    ajaxContent.blenderToggleContentEffect = new Fx.Style('blender_toggleContent_bottom', 'opacity', {duration: 250});
    ajaxContent.blenderToggleContentEffect.start(1).chain( function() {
      $('replaceContent').empty();
      $('replaceContent').setStyle('display', 'none');    
      var siteURL = site;
      var newHeight = (new_template == 'tpl_overview') ? 251 : 396;    
      if ($('content').getSize().size.y != newHeight) {
        ajaxContent.contentHeightEffect = new Fx.Style('content', 'height', {duration: 800});
        ajaxContent.contentHeightEffect.start(newHeight).chain(ajaxContent.loadContentWithAjax.pass(siteURL)); 
      } else {
        ajaxContent.loadContentWithAjax(siteURL);
      }
    });
  },
  
  /**
   * Inhalt mit Ajax nachladen
   * @param site {String} Pfad fuer die neu zu ladende Seite
   */
  loadContentWithAjax: function(siteURL) {  
    if ($defined($E('.loadingStatus')) == false) {
      var loadingStatus = new Element('div', {
        'class': 'loadingStatus'
      }).injectBefore('replaceContent');         
    }
    if (template == 'tpl_overview') {
     $E('.loadingStatus').setStyle('height', 95); 
    } else {
      $E('.loadingStatus').setStyle('height', '');
    }
    ajaxContent.ajax = new Ajax(siteURL, {method: 'get',  onComplete: ajaxContent.handleAjax}).request(); 
  },  
  
  /**
   * Rückrufffunktionen fuer den Ajax-Aufruf
   * @param loadedText {String} Antwort der Ajax-Anfrage
   */  
  handleAjax: function(loadedText) {
    $$('.loadingStatus').each( function (object) {
        object.remove();
      });  
    $('replaceContent').setHTML(loadedText);  
    var blenderShowAgain = new Element('div', {
      'id': 'blender_replaceContent',
      'class': 'blender',
      'styles': {
               'z-index': '100'
               }
    }).injectInside('replaceContent');
    $('replaceContent').setStyle('display', 'block'); 
    subnav.alwaysExtended = false; 
    switch (template) {
      case 'tpl_game': 
        var FO = { movie: gameData, id: "flash_movie", quality: "high", wmode: "transparent", width: "665", height: "242", majorversion: "8", build: "0" };    
        UFO.create(FO, "flash_container"); 
        break;
      case 'tpl_movie':      
        var FO = { movie: movieData[0], flashvars: "playerType=layer&filePath=" + movieData[1], id: "flash_movie", quality: "high", wmode: "transparent", width: "100%", height: "100%", majorversion: "8", build:"0" };       
        UFO.create(FO, "movieWrapper");
        break;    
      case 'tpl_slideshow':
        slideshowSmall = new showcaseSlideShow($('slideshowContainer'), slideshowData, slideshowSmallAttributes);
        break;
      case 'tpl_overview': 
        subnav.alwaysExtended = true;
        break;
      case 'tpl_career':
        career.init();
        break;         
      default:
    }      
    initiateFlexcroll();
    ajaxContent.blenderShowAgain = new Fx.Style(blenderShowAgain, 'opacity', {duration: 500, onComplete: function(){ 
      blenderShowAgain.remove(); 
      subnav.preventSubnavShrinking = false;  
      if (subnav.alwaysExtended != true ) subnav.slider.start(-35);        
    }});
    ajaxContent.blenderShowAgain.start(0);
  }  
}

 
/**
 * neue Webseite mit JavaScript oeffnen
 * @param url {String} zu ladende URL
 */
function openURL(url) {
  window.location.href = url;
}


/**
 * setzt den Language Cookie mit der ausgewaehlten Sprache
 * * @param language {String} ausgewaehlte Sprache
 */
function setCookie(language) {
  Cookie.set('language', language, {duration: 100, path: '/'});
}


/**
 * Scrollbalken wird nur beim Safari nicht angezeigt
 */
function initiateFlexcroll() {
  if (!window.webkit ) {
    if ($defined($('scrollbarContent'))) {
      $('scrollbarContent').addClass('flexcroll');
      CSBfleXcroll('scrollbarContent');
    }
    if ($defined($('scrollOurCompany'))) {
      $('scrollOurCompany').addClass('flexcroll'); 
      CSBfleXcroll('scrollOurCompany');
    } 
    if ($defined($('scrollbarShowcase'))) {
      $('scrollbarShowcase').addClass('flexcroll'); 
      CSBfleXcroll('scrollbarShowcase');   
    }
    if ($defined($('scrollTable'))) {
      $('scrollTable').addClass('flexcroll'); 
      CSBfleXcroll('scrollTable');   
    }    
  }   
}


var fullscreen = {
  
  /**
   * oeffnet die Slideshow oder den Movie im Fullscreen-Modus
   * @param typ {String} gibt an was geoeffnet werden soll ('slideshow', 'movie_16x9', 'movie_4x3')
   */  
  open_fullscreen: function(typ) {
    if ($defined($('fullscreenMode'))) return;
    var mainBlender = new Element('div', {
      'id': 'blender_main',
      'class': 'blender',
      'styles': {
               'z-index': '100',
               'opacity': '0'
               }
    }).injectInside('main'); 

    mainBlender.effect('opacity', {duration: 300}).start(1);   
    $('prime-nav').effect('opacity', {duration: 300}).start(0);
    $('global-nav').effect('opacity', {duration: 300}).start(0);

    (function(){  
      switch(typ) {
        case 'slideshow': 
          fullscreen.slideshow.doFullscreenSlideshow();      
          break;
        case 'movie_16x9':
          fullscreen.movie.doFullscreenMovie('16x9');
          break;
        case 'movie_4x3':
          fullscreen.movie.doFullscreenMovie('4x3');
          break;
      }    
      $('fullscreenMode').setStyle('display', 'block');
        
      $('blender_fullscreen').effect('opacity', {duration: 300}).start(0);      
    }).delay(500);
    
  },
  
  /**
   * schliesst die Slideshow oder den Movie im Fullscreen-Modus
   * @param typ {String} gibt an was geschlossen werden soll ('slideshow', 'movie_16x9', 'movie_4x3')
   */   
  close_fullscreen: function(typ) { 
    /*
    if ( typ == 'movie_16x9' || typ == 'movie_4x3') {
      $('flash_movie').externalStop();
    }*/
   
    $('blender_fullscreen').effect('opacity', {duration: 200, onComplete: function(){ 
      switch(typ) {
        case 'slideshow': 
          fullscreen.slideshow.closeFullscreenSlideshow();
          break;
        case 'movie_16x9':
        case 'movie_4x3':
          fullscreen.movie.closeFullscreenMovie();
          break;
      }       
      $('fullscreenMode').remove();
      (function(){ 
        $('prime-nav').effect('opacity', {duration: 300}).start(1);
        $('global-nav').effect('opacity', {duration: 300}).start(1);
        $('blender_main').effect('opacity', {duration: 300, onComplete: function() {$('blender_main').remove();}}).start(0);
      }).delay(200);
    }}).start(1);
  },    
  
  /**
   * Fullscreen-Slideshow-Objekt
   */   
  slideshow: { 
  
    /**
     * Fullscreen-Slideshow initiieren
     */    
    doFullscreenSlideshow: function() {
      fullscreen.slideshow.buildFullscreenSlideshow();
      var slideshowFullscreenAttributes = {
        infoDescription: 'descriptionFullscreen',
        infoCount: 'countFullscreen',
        prevButton: 'previousFullscreen',
        nextButton: 'nextFullscreen',
        startWith: slideshowSmall.currentIter,
        fullscreenMode: true
      }
      slideshowFullscreen = new showcaseSlideShow($('slideshowContainerFull'), slideshowData, slideshowFullscreenAttributes);  
    },
    
    /**
     * Fullscreen-Slideshow schliessen
     */    
    closeFullscreenSlideshow: function() {
      slideshowSmall.goTo(slideshowFullscreen.currentIter);      
    }, 
    
    /**
     * DOM-Elemente fuer Fullscreen-Slideshow-Ansicht erzeugen
     */
    buildFullscreenSlideshow: function() {

      var fullscreenMode = new Element('div', {
        'id': 'fullscreenMode'
      }).injectAfter('main');
      var fullscreenContent_16x9 = new Element('div', {
        'id': 'fullscreenContent_16x9'
      }).injectInside(fullscreenMode);    
      var slideshowContainerFullscreen = new Element('div', {
        'id': 'slideshowContainerFull'
      }).injectInside(fullscreenContent_16x9);  

      new Element ('img', {
        'id': 'referenceHeightContainer',
        'src': assetsImagesPath + '16x9_blank.gif',
        'styles': {
          'width': '100%',
          'height': 'auto',
          'overflow': 'hidden'
        }
      }).injectInside(slideshowContainerFullscreen);

      var close_fullscreen = new Element('a', {
        'id': 'closeFullscreen',
        'class': 'imgContainer',
        'href': 'javascript: fullscreen.close_fullscreen(\'slideshow\');'
      }).injectInside(slideshowContainerFullscreen).setHTML('Close');    
      new Element('span', {
        'class': 'imgSpan'
      }).injectInside(close_fullscreen); 
      var slideshow_navigation = new Element('div', {
        'class': 'slideshow_navigation'
      }).injectInside(fullscreenContent_16x9);       
      var floatRight = new Element('div', {
        'class': 'float_right'
      }).injectInside(slideshow_navigation);      
      new Element('p', {
        'id': 'countFullscreen'
      }).injectInside(floatRight); 
      new Element('a', {
       'id': 'previousFullscreen',
        'class': 'previous',
        'href': 'javascript:;'
      }).injectInside(floatRight).setHTML('Previous');     
      new Element('a', {
        'id': 'nextFullscreen',
        'class': 'next',
        'href': 'javascript:;'
      }).injectInside(floatRight).setHTML('next');  
      new Element('p').injectInside(slideshow_navigation).setHTML('<span id="descriptionFullscreen"></span>');
      var blenderFullscreen = new Element('div', {
        'id': 'blender_fullscreen',
        'class': 'blender'
      }).injectInside(fullscreenMode); 
      if (window.ie) $(blenderFullscreen).setStyles({height: '1400px', width: '150%'});      
    }    
  }, 

  /**
   * Fullscreen-Movie-Objekt
   */   
  movie: { 
    
    /**
     * Fullscreen-Movie initiieren
     * @param format {String} zu oeffnende Movie-Format
     */    
    doFullscreenMovie: function(format) {
      fullscreen.movie.buildFullscreenMovie(format);
      if (window.ie) {
        $('movieWrapper').empty(); 
      } else {
        $('flash_movie').remove();        
      } 
      var FO = {movie: movieData[0], flashvars: "playerType=layer&filePath=" +  movieData[2] + "&infoTxt=" +  movieData[3], id: "flash_movie", quality: "high", width: "100%", height: "100%", majorversion: "8", build: "0" };    
      UFO.create(FO, 'movieWrapperFullscreen');       
    },
    
    /**
     * Fullscreen-Movie schliessen
     * @param format {String} zu oeffnende Movie-Format
     */    
    closeFullscreenMovie: function() {
      if (window.ie) {
        $('movieWrapperFullscreen').empty(); 
      } else {
        $('flash_movie').remove();        
      }
      var FO = { movie: movieData[0], flashvars: "playerType=layer&filePath=" + movieData[1], id: "flash_movie", quality: "high", wmode: "transparent", width: "100%", height: "100%", majorversion: "8", build: "0" };       
      UFO.create(FO, "movieWrapper");
    },  
    
    /**
     * DOM-Elemente fuer Fullscreen-Movie erzeugen
     * @param format {String} zu erzeugende Movie-Format
     */   
    buildFullscreenMovie: function(format) {
      var fullscreenMode = new Element('div', {
        'id': 'fullscreenMode'
      });
      var fullscreenContent = new Element('div', {
        'id': 'fullscreenContent_' + format
      }).injectInside(fullscreenMode);
      var movieContainerFullscreen = new Element('div', {
        'id': 'movieContainerFullscreen'
      }).injectInside(fullscreenContent);        
      var close_fullscreen = new Element('a', {
        'id': 'closeFullscreen',
        'class': 'imgContainer',
        'href': 'javascript: fullscreen.close_fullscreen(\'movie_' + format + '\');'
      }).injectInside(movieContainerFullscreen).setHTML('Close');   
      new Element('span', {
        'class': 'imgSpan'
      }).injectInside(close_fullscreen);   
      var movieWrapper = new Element('div', {
        'id': 'movieWrapperFullscreen'
      }).injectInside(movieContainerFullscreen);     
      var blenderFullscreen = new Element('div', {
        'id': 'blender_fullscreen',
        'class': 'blender',
        styles: {
          'z-index': 400,
          'background-color': '#fff'
        }
      }).injectInside(fullscreenMode); 
      if (window.ie) blenderFullscreen.setStyles({height: '1400px', width: '150%'}); 
      fullscreenMode.injectAfter('main');
    }      
  }
}



/**
 * Slideshow-Klasse mit Methoden fuer die Bildsteuerung
 */
var showcaseSlideShow = new Class ({
	
  /**
   * Klassen-Konstruktor
   * @param element {Object} Container fuer Images
   * @param data {Object} Daten fuer die Slideshow
   * @param attributes {Object} Slideshow-Attribute
   */  
  initialize: function(element, data, attributes) {
	  this.currentIter = 0; //aktuelle Image-ID
		this.lastIter = 0; //ID des letzten Images
		this.maxIter = 0; //Anzahl der Images
		this.slideShowElement = element; //Container fuer Images
		this.slideShowData = data; //Objekt mit Werten
		this.slideShowInit = 1; //boolescher Wert fuer {1: erster Aufruf, 2: normaler Aufruf}
		this.slideElements = Array(); //Array mit Referenzen auf alle Images
    this.blender = false;
    this.infoHeadline = $(attributes.infoHeadline);
    this.infoDescription = $(attributes.infoDescription);
    this.infoCount = $(attributes.infoCount);
    var prevButton = $(attributes.prevButton);
	  var nextButton = $(attributes.nextButton);
		this.maxIter = data.length;
    this.startWith = attributes.startWith;
    this.fullscreenMode = attributes.fullscreenMode;    
		for(i=0;i<data.length;i++)
		{
      var currentImg = new Element('img', {
        'class': 'slideElement',
        'src': (this.fullscreenMode) ? data[i][0] : data[i][1],
        'styles': {
           opacity: 0
                 }
      }).injectInside(element);
      if (window.webkit) currentImg.setStyles({'width': '100%', 'height': '100%' });      
      
      currentImg.currentOpacity = new Fx.Style(currentImg, 'opacity', {duration: 400});
      this.slideElements[parseInt(i)] = currentImg;
		}
		if (data.length>1)
		{
			prevButton.onclick = this.pushPrevSlideShow.bindAsEventListener(this);
			nextButton.onclick = this.pushNextSlideShow.bindAsEventListener(this);
		}
    this.blender = new Element('div', {
      'class': 'slideshowBlender',
      'styles': {
         'background': 'url(' + assetsImagesPath + 'ajax-loader.gif) center center #eee no-repeat'
       }
    });
    
    if ( $defined($('referenceHeightContainer')) && window.ie6 ) {
      this.blender.setStyle('height', document.getElementById('referenceHeightContainer').clientHeight);
    }
    if (attributes.blenderContainer) {
      this.blender.injectInside(attributes.blenderContainer);
      if (window.ie6) this.blender.setStyle('height', '1400');
    } else {
      this.blender.injectInside(this.slideShowElement);
    }
    if (this.startWith) {
      this.goTo(this.startWith);
    } else {
      this.slideshowStartup();  
    }
	},
  
  /**
   * Slideshow killen
   */   
	destroySlideShow: function(element) {
		var myClassName = element.className;
		var newElement = document.createElement('div');
		newElement.className = myClassName;
		element.parentNode.replaceChild(newElement, element);
	},
  
  /**
   * naechstes Bild soll geladen werden
   * @param event {event}
   */ 
	pushNextSlideShow: function(event) {
    event = new Event(event);	
		event.preventDefault(); 
    setTimeout(this.hideInfoSlideShow.bind(this),0);
		setTimeout(this.nextSlideShow.bind(this),60);
	},
  
  /**
   * vorheriges Bild soll geladen werden
   * @param event {event}
   */   
	pushPrevSlideShow: function(event) {
    event = new Event(event);	
    event.preventDefault(); 
    setTimeout(this.hideInfoSlideShow.bind(this),0);
		setTimeout(this.prevSlideShow.bind(this),60);
	},
  
  /**
   * 
   */ 
	startSlideShow: function() {
		this.slideElements[parseInt(this.currentIter)].currentOpacity.custom(0, 1); 
	},

  /**
   * 
   */   
  slideshowStartup: function() {
		this.lastIter = this.maxIter - 1;
		this.currentIter = 0;
    this.doSlideShow();    
  },
  
  /**
   * naechstes Bild laden
   */   
	nextSlideShow: function() {
		this.lastIter = this.currentIter;
		this.currentIter++;
		if (this.currentIter >= this.maxIter)
		{
			this.currentIter = 0;
			this.lastIter = this.maxIter - 1;
		}
		this.slideShowInit = 0;
		this.doSlideShow.bind(this)(1);    
	},
  
  /**
   * vorheriges Bild laden
   */   
	prevSlideShow: function() {
		this.lastIter = this.currentIter;
		this.currentIter--;
		if (this.currentIter <= -1)
		{
			this.currentIter = this.maxIter - 1;
			this.lastIter = 0;
		}
		this.slideShowInit = 0;
		this.doSlideShow.bind(this)(2);
	},

  /**
   * neues Bild laden
   * @param position {number} id des zu ladenden Bildes (1 --> naechste, 2 --> vorherige)
   */     
	doSlideShow: function(position) {
    // aktuelle Bild noch nicht geladen oder erstes Bild initiieren
      if ((!this.slideElements[parseInt(this.currentIter)].complete && !window.webkit)) {   
        this.showBlender();
        var currElement = parseInt(this.currentIter);
        this.slideElements[parseInt(this.currentIter)].onload = function(loadedElement) {
          // nur ausfuehren wenn das Element noch aktuell angezeigt wird und das slideshow Template noch aktuell ist
          if (this.currentIter == loadedElement && template == 'tpl_slideshow') {
            this.showImage();
          }
        }.bind(this, currElement);
        this.slideShowInit = 0;
    // Blender wird angezeigt
    } else if (this.blenderIsShown() == true) {
      this.showImage();
    //Bilder sind komplett geladen
    } else {
      this.switchImage(position);
    }  
    this.showInfoSlideShow();     
  },
  
  /**
   * Bild austauschen
   * @param position {Number} id des zu ladenden Bildes (1=naechste, 2=vorherige)
   */   
  switchImage: function(position) {     
    //next Slideshow
    if (position == 1)
		{
			//nicht das erste Element
			if (this.currentIter != 0) {
        this.slideElements[parseInt(this.currentIter)].currentOpacity.options.onComplete = function() {
					this.slideElements[parseInt(this.lastIter)].setStyle('opacity',0);
				}.bind(this);
				this.slideElements[parseInt(this.currentIter)].currentOpacity.custom(0, 1);
			//erstes Element
      } else {
      	for(i=1; i < this.slideElements.length - 1 ; i++)
      	{
          this.slideElements[i].setStyle('opacity', 0);            
        }
        this.slideElements[parseInt(this.currentIter)].setStyle('opacity',1);
				this.slideElements[parseInt(this.lastIter)].currentOpacity.custom(1, 0);
			}
		//previous Slideshow
    } else {
			//nicht das letzte Element
      if (this.currentIter != this.maxIter - 1) {
				this.slideElements[parseInt(this.currentIter)].setStyle('opacity',1);
				this.slideElements[parseInt(this.lastIter)].currentOpacity.custom(1, 0);
			//letzte Element
      } else {
				this.slideElements[parseInt(this.currentIter)].currentOpacity.options.onComplete = function() {
					this.slideElements[parseInt(this.lastIter)].setStyle('opacity',0);
				}.bind(this);
				this.slideElements[parseInt(this.currentIter)].currentOpacity.custom(0, 1);
			}
		}
	},
  
  /**
   * aktuelle Bild einblenden
   */   
  showImage: function() {
    this.setImgOrder();
    if (this.blender == false) return;
    if (this.blender.getStyle('opacity') != 0) {
      this.blender.effect('opacity', {duration: 300}).start(0);       
    }    
  },
  
  /**
   * Reihenfolge und Deckkraft der Bilder aktualisieren
   */   
  setImgOrder: function() {
    for(i = this.currentIter + 1; i < this.slideElements.length -1 ; i++) {
        this.slideElements[i].setStyle('opacity', 0);            
    }    
    for(i = 0; i <= this.currentIter ; i++) {
        this.slideElements[i].setStyle('opacity', 1);            
    }    
  },
  
  /**
   * Blender anzeigen
   */   
  showBlender: function() {
    if (this.blender.getStyle('opacity') != 1) {
      this.blender.effect('opacity', {duration: 300}).start(1);      
    } 
  },
  
  /**
   * ueberprueft, ob bereits ein Blender angezeigt wird
   * @return {boolean}
   */  
  blenderIsShown: function() {
    if (this.blender == false) return false;
    if (this.blender.getStyle('opacity') == 0) {
      return false;
    } else {
      return true;
    }
  },

  /**
   * aktualisiert die Beschreibung
   */   
	showInfoSlideShow: function() {
    if (this.infoHeadline) this.infoHeadline.setHTML(this.slideShowData[this.currentIter][2]).effect('opacity', {duration: 100}).start(1);
    this.infoDescription.setHTML(this.slideShowData[this.currentIter][3]).effect('opacity', {duration: 100}).start(1);
    this.infoCount.setHTML(slideshowPictureCaption +  ' <span class="alwaysArial"><strong>' + (this.currentIter +1) + '</strong> / '+ this.maxIter + '</span>');
	},
  
  /**
   * loescht die aktuelle Beschreibung
   */  
	hideInfoSlideShow: function() {	
	},
  
  /**
   * oeffne Slideshow an bestimmter Position
   * @param num {Number} Position des zu oeffnenden Bildes
   */   
	goTo: function(num) {
    this.currentIter = num;
		if (num == 0) this.lastIter = this.maxIter-1;
		else this.lastIter = num-1;
		this.slideShowInit = 0;
    this.setImgOrder();
    this.doSlideShow();
	},
  
  showLoadingStatus: function() {
    var string;
    this.slideElements.each(function(element, index){
      string += (index + 1) + " " + element + " " + element.complete + "\n";
    });
    alert(string);
  }
});



/**
 * Objekt fuer das Template ourCompanies
 */
var ourCompanies = {
  openedLocationInfo: '',
  scrollBasisPosition: '',
    
  /**
   * initialisiert den Startvorgang
   */  
  init: function() {   
    new Ajax(ourCompaniesCitiesPath + '?lang=' + lang, {method: 'get', onComplete: ourCompanies.citiesLoaded}).request();
  },
  
  /**
   * ermittelt den Pfad des hover-Bildes
   * @param path {string} Pfad des Bildes im Normalzustand
   * @return {string} Pfad des Bildes im Aktivzustand
   */   
  activeImageHelper: function(path) {
    var helper = path.split('.');
    var finalPath = helper[0] + '_hl.' + helper[1];
    return finalPath;
  },
  
  /**
   * zeigt die Staedte auf der Karte an
   * @param citiesData {object} JSON-Daten der Ajax-Anfrage mit Staedten
   */    
  citiesLoaded: function(citiesData) {
    citiesData = Json.evaluate(citiesData);
    citiesData.each( function (citiesData, i) {  
      var city = new Element ('div', {
        'id': citiesData.name,
        'class': 'city',
        'styles': {
          'width': citiesData.width,
          'height': citiesData.height,
          'left': citiesData.x,
          'top': citiesData.y
        },
        'events': {
    	    'click': function() {
            ourCompanies.openCompaniesPopup(citiesData.id, citiesData.name);
            if (window.ie6 ) {
              city.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + citiesData.image + "'");
            } else {
              city.setStyle('background-image', 'url(' + citiesData.image + ')');
            }
          },
          'mouseover': function() {
            if (window.ie6 ) {
              city.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + citiesData.imagehl + "'");
            } else {
              city.setStyle('background-image', 'url(' + citiesData.imagehl + ')');
            }
          },
          'mouseout': function() {
            if (window.ie6 ) {
              city.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + citiesData.image + "'");
            } else {
              city.setStyle('background-image', 'url(' + citiesData.image + ')');
            }
          }      
        }
      }).injectInside($('map')).setHTML(citiesData.name);
      if (window.ie6 ) {
        city.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + citiesData.image + "'");
      } else {
        city.setStyle('background-image', 'url(' + citiesData.image + ')');
      }
    });
  }, 
  
  /**
   * zeigt die Staedte auf der Karte an
   * @param citiesData {array} JSON-Daten der Ajax-Anfrage mit Staedten
   *     name : '北京', 
   *     image: 'http://tkchina.sv-preview.de/files/images/cn_ll_beijing.png', 
   *     imagehl: 'http://tkchina.sv-preview.de/files/images/cn_hl_beijing_hl.png',
   *     x : 242,
   *     y : 26,
   *     width: 43,
   *     height: 19
   */   
  openCompaniesPopup: function(cityId, cityName) {
    var ourCompany = new Element ('div', {
      'id': 'ourCompanyPopup'
    }).injectInside($('tpl_ourcompanies')) 
    var headPopup = new Element ('h4', {
      'class': 'imgContainer'
    }).injectInside(ourCompany).setHTML(cityName);
    var headSpanPopup = new Element ('span', {
      'class': 'imgSpan',
      'styles': {
        'background-image': 'url(' + assetsImagesPath + 'cities_' + lang + '/' + lang + '_' + cityId + '.png)'
      }
    }).injectInside(headPopup);
    var closePopup = new Element ('a', {
      'href': 'javascript:;',
      'class': 'closePopup',
      'events': {
  	    'click': function() {
          ourCompany.remove();
          ourCompanies.openedLocationInfo = '';
        }
      }
    }).injectInside(ourCompany).setHTML('<span class="imgSpan"></span>Close')
    var scrollOurCompany = new Element ('div', {
      'id': 'scrollOurCompany'
    }).injectInside(ourCompany);
    
    var loader = new Element ('div', {
      'id': 'locationLoader'
    }).injectInside(scrollOurCompany);
     
    new Ajax(ourCompaniesLocationsPath + '?lang=' + lang + '&cityId=' + cityId, {method: 'get', onComplete: ourCompanies.loactionsLoaded}).request();
  },

  /**
   * zeigt die Locations in den einzelnen Staedten im Popup an
   * @param locations {array} JSON-Daten der Ajax-Anfrage mit Locations
   *     name :  'Liaoyang K.S. Automotive Spring Co., Ltd.',
   *     adress :  '168 Shuangsheng Road,<br />Liaoyang<br />Liaoning  111000',
   *     contact :  'Mr. George Zeng',
   *     phone :  '+86 (419) 219 0976  ',
   *     fax :  '+86 (419) 219 0710',
   *     email :  'songfz@LKS-springs.com',
   *     url :  '',
   *     clusters :  [9]
   */     
  loactionsLoaded: function(locations) {    
    locations = Json.evaluate(locations);
    $('scrollOurCompany').empty();  
    var ulLocations = new Element ('ul').injectInside($('scrollOurCompany'));   
    locations.each( function (locations, i) {   
      liLocations = new Element ('li').injectInside(ulLocations);
      var clustersActive = new Element ('div', {
        'class': 'clustersActive'     
      }).injectInside(liLocations);
      locations.clusters.each( function (clusters) {
        var clusterElement = new Element ('div', {
          'class': 'clusterElement',
          'styles': {
            'background-image': 'url(' + assetsImagesPath + 'cluster' + clusters + '.gif)'
          }
        }).injectInside(clustersActive);      
                
      });                                                                     
      var headline = new Element ('h5', {      
        'events': {
    	    'mouseover': function() {
            this.setStyle('background-color', '#e6e6e6');
            this.setStyle('color', '#000');
            this.setStyle('background-position', '19px -73px');
          },
    	    'mouseout': function() {
            this.setStyle('background-color', '');
            this.setStyle('color', '');
            this.setStyle('background-position', '19px 9px');
          },          
          'click': function() {
            if (ourCompanies.openedLocationInfo == this) {
              this.adressInformation.setStyle('display', 'none');
              ourCompanies.openedLocationInfo = '';
              this.getParent().removeClass('active');
            } else {
              this.adressInformation.setStyle('display', 'block');
              this.getParent().addClass('active');
              if(ourCompanies.openedLocationInfo != '') {
                ourCompanies.openedLocationInfo.adressInformation.setStyle('display', 'none');
                ourCompanies.openedLocationInfo.getParent().removeClass('active');
              }
              ourCompanies.openedLocationInfo = this;
            }
            if (!window.webkit) {       
              $('scrollOurCompany').scrollUpdate();            
              $('scrollOurCompany').contentScroll("0px", (this.scrollPosition) + "px", false);
              $('scrollOurCompany').scrollUpdate(); 
            }
          }
        }    
      }).injectInside(liLocations).setHTML(locations.name);
      if (ourCompanies.scrollBasisPosition == '') ourCompanies.scrollBasisPosition = headline.getPosition().y;
      headline.scrollPosition = headline.getPosition().y - ourCompanies.scrollBasisPosition; //458; //317  
      var adressInformation = new Element ('div', {
        'class': 'adressInformation'
      }).injectInside(liLocations);
      headline.adressInformation = adressInformation;  
      new Element ('p').injectInside(adressInformation).setHTML(locations.adress);   
      var html = '';
      if (locations.contact) html += '<strong>' + locations.contact + '</strong><br />';
      if (locations.phone) html += '<span>' + phoneCaption + ':</span> ' + locations.phone + '<br />';
      if (locations.fax) html += '<span>' + faxCaption + ':</span>' + locations.fax + '<br />';
      if (locations.email) html += '<span>' + emailCaption + ':</span> ' + locations.email;                                           
      new Element ('p', {
        'class': 'adressData'
      }).injectInside(adressInformation).setHTML(html);
      initiateFlexcroll();
    });
  }  
}


/**
 * Objekt fuer das Template showcase
 */
var showcase = {
  activeImg: '',
  zIndex: 99,
  
  /**
   * initialisiert den Startvorgang
   */    
  init: function() {
    for (var i=0; i<15; i++) {
      if (showcaseData[i] != undefined) {
        var thumbElement = new Element('li', {
          'class': 'thumb' + (i + 1),
          'styles': {
            'z-index': showcase.zIndex //wegen IE-Reihenfolgeproblemen
          }
        }).injectInside($('thumbGallery'));
        showcase.zIndex--; 
        var thumbImg = new Element('img', {
          'alt': '',
          'src': showcaseData[i].thumbPath,
          'events': {
          	'mouseover': function(){
              this.blendEffect.start(1);
              this.getParent().setStyle('border-color', '#000000');
              this.getNext().setStyle('background-position', '0px -13px');                
              this.getParent().getLast().setStyle('display', 'inline');
          	},
          	'mouseout': function(){
              this.getParent().setStyle('border-color', '');
              this.getNext().setStyle('background-position', '');                
              if (showcase.activeImg != this) this.blendEffect.start(0.5);
              this.getParent().getLast().setStyle('display', 'none');
          	},
            'click': function(){
              if (showcase.activeImg != this) {
                showcase.activeImg.getParent().removeClass('active');
                showcase.activeImg.blendEffect.start(0.5);
                this.getParent().addClass('active');
                showcase.activeImg = this;
                showcase.changeActive(this.thumbId);
              }
            }
          },
          'styles': {
            'opacity': '0.5'
          }           
        }).injectInside(thumbElement);         
        thumbImg.blendEffect = new Fx.Style(thumbImg, 'opacity', {duration: 500, wait: false});
        thumbImg.thumbId = i;              
        if (i == 0) {
          thumbElement.addClass('active');
          showcase.activeImg = thumbImg;
          thumbImg.setStyle('opacity', 1);
        }      
        var thumbNumber = new Element('div', {
          'class': 'number'
        }).injectInside(thumbElement);                  
        var thumbTooltip = new Element('div', {
          'class': 'tooltip'
        }).injectInside(thumbElement).setHTML(showcaseData[i].tooltip);          
      } else {
        var thumbElement = new Element('li').injectInside($('thumbGallery'));
      }
    }
    initiateFlexcroll(); 
    showcase.changeActive(0);
  },
  
  /**
   * Informationen fuer neues Bild anzeigen
   * @param id {number} ID des neuen Bildes
   */   
  changeActive: function(id) {
    $('imgShowcaseContainer').getFirst().setProperty('src', showcaseData[id].largePath);
    $('imgShowcaseContainer').setProperty('class', 'large' + (id + 1));
    $('infoExternal').getFirst().setProperty('href', showcaseData[id].goTo);
    $('infoExternal').setProperty('class', showcaseData[id].goToClass);
    $('showcaseHeadline').setHTML(showcaseData[id].headline);
    $('showcaseText').setHTML(showcaseData[id].text);
    if (!window.webkit) {       
      $('scrollbarShowcase').scrollUpdate();            
    }    
  }
}


/**
 * Bilder vorladen
 * @param srcImages {array} Pfade der zu ladenden Bilder
 */
function preloadImages(srcImages) {
  if (srcImages == undefined) return;
  if (srcImages.length <= 0) return;
  document.imageArray = new Array(srcImages.length);
  for (var i = 0; i < srcImages.length; i++) {
    document.imageArray[i] = new Image;
    document.imageArray[i].src = srcImages[i];
  }
}


/**
 * Seite drucken
 * @param event
 */
function printPage(event) {
  var event = new Event(event);  
  event.preventDefault();  
  window.print();
}


/**
 * Kontaktformular abschicken
 */
function sendMail() {
  /*
  var prename = $('prename').getValue();
  var surname = $('surname').getValue();
  var email = $('email').getValue();
  var message = $('message').getValue();
  var pattern = /^[\w]+(\.[\w]+)*@([\w]+\.)+[a-z]{2,7}$/i;
  if(pattern.test(email) && 
    prename != "" && 
    surname != "" &&
    message != "") {
  } else {
    $('errorContact').setHTML('Failure'); //mus dynamisch angepasst werden
  }
  */
  $('formContact').send({onComplete: serverContactResponse}); 
}


/**
 * Erfolg der Formularuebertragung anzeigen
 * @param result {object} JSON-Daten ueber den Erfolg der Anfrage
 *     result.errorcode = 0 - erfolgreich, 1 - nicht alle Felder ausgefuellt, 2 - Fehler bei der Uebertragun
 *     result.caption = Meldung
 */
function serverContactResponse(result) {
  result = Json.evaluate(result);
  switch (result.errorcode) {
    //erfolgreich
    case 0:
      var container = $E('#tpl_contact .left_column').empty();
      new Element('p', {
        'class' : 'margin-top_no'
      }).setHTML(result.caption).injectInside(container);     
      break;
    //nicht alle Felder ausgefuellt
    case 1:
    //Fehler bei der Uebertragung
    case 2:
      $('errorContact').setHTML(result.caption);
      break;
  }
}

/**
 * uerprueft ob der Benutzer einen Mac verwendet
 * @return {boolean}
 */
function isMac() {
  return navigator.platform.toLowerCase().contains('mac');
}


var career = {

  sortable: ['date', 'desc'],
  iFramePath: '',
  /**
   * Initialisiert das Career-Template und fuegt der Tabelle Event-Handler hinzu
   */ 
  init: function() {
    if (isMac()) {
      $$('div#jobInfo ul li h5').each( function(headline) {
        headline.setStyle('font-size', '10px');
      });
      $$('table#careerTableHead th a').each( function(link) {
        link.setStyle('font-size', '11px');
      });    
    }
    $$('tbody tr').each( function (tableRow) {
      tableRow.addEvent('mouseover', function(event){
        tableRow.addClass('active');
      }); 
      tableRow.addEvent('mouseout', function(event){
        tableRow.removeClass('active');
      }); 
    }); 
    career.ajax = new Ajax (careerSortingPath, {method: 'get', autoCancel: true, onComplete: career.joblistSorted});   
    career.iFramePath = $('iframeElement').getAttribute('src');
  },
  
  /**
   * Tabelle neu sortieren
   * Datum soll desc sortiert werden
   * alphapetische Werte sollen asc sortiert werden
   * @param event {event}
   * @param sortable {array}
   *     sortable[0] {string} Element das sortiert wird ('date', 'job', 'location', 'company')
   *     sortable[1] {string} Sortierreihenfolge ('asc', 'desc')
   * @param clickedSortableLink {object} das geklickte Element als DOM-Element
   */    
  setOrder: function(event, sortable, clickedSortableLink) {
    var event = new Event(event);  
    event.preventDefault(); 
    if (career.sortable[0] == sortable) {
      if (career.sortable[1] == 'desc') {
        career.sortable[1] = 'asc';
        clickedSortableLink.className = 'ascSortActive';
      } else {
        career.sortable[1] = 'desc';
        clickedSortableLink.className = 'descSortActive';
      }
    } else {
      $$('table#careerTableHead a.ascSortActive').each(function(activeLink) {
        activeLink.className = '';
      });
      $$('table#careerTableHead a.descSortActive').each(function(activeLink) {
        activeLink.className = '';
      });
      career.sortable[0] = sortable;
      if (sortable == 'date') {
        career.sortable[1] = 'desc';
        clickedSortableLink.className = 'descSortActive';          
      } else {
        career.sortable[1] = 'asc';
        clickedSortableLink.className = 'ascSortActive';              
      }
    }    
    $E('table#careerTable tbody').remove();
    if (!window.webkit) $('scrollTable').scrollUpdate(); 
    $('scrollTable').setStyle('background', 'url(' + assetsImagesPath + 'ajax-loader.gif) center no-repeat');
    career.ajax.url = careerSortingPath + '?sortable=' + career.sortable[0] + '&direction=' + career.sortable[1] + '&lang=' + lang;
    career.ajax.request();
  },

  /**
   * Tabelle ist sortiert und wird neu aufgebaut
   * @param sortedList {json} Ergebnis der Ajax-Anfrage
   *     sortedList.jobId {number}
   *     sortedList.date {string}
   *     sortedList.job {string}
   *     sortedList.location {string}
   *     sortedList.company {string}
   */   
  joblistSorted: function(sortedList) {
    $('scrollTable').setStyle('background', '#fff');    
    var tableBody = new Element('tbody').injectInside('careerTable');
    sortedList = Json.evaluate(sortedList);
    sortedList.each( function(listElement) {   
      var tableRow = new Element('tr', {
        'events': {
          'mouseover': function() {
            tableRow.addClass('active');
          },
          'mouseout': function() {
            tableRow.removeClass('active');
          },
          'click': function() {
            career.openPopup(listElement.jobId);
          }
        }                  
      }).injectInside(tableBody);
      var tdDate = new Element('td', {
        'class': 'sortDate'
      }).injectInside(tableRow).setHTML(listElement.date);
      var tdJob = new Element('td', {
        'class': 'sortJob'
      }).injectInside(tableRow).setHTML(listElement.job);
      var tdLocation = new Element('td', {
        'class': 'sortLocation'
      }).injectInside(tableRow).setHTML(listElement.location);
      var tdCompany = new Element('td', {
        'class': 'sortCompany'
      }).injectInside(tableRow).setHTML(listElement.company);
      var tdDetails = new Element('td', {
        'class': 'jobDetails'
      }).injectInside(tableRow).setHTML('<a class="buttonSmall" href="javascript:;"><span class="imgSpan"></span>to details</a>');
    });
    $('scrollTable').scrollUpdate();       
  },
  
  /**
   * Popupfenster oeffnen
   * @param jobId {number} Id des ausgewaehlten Jobs
   */  
  openPopup: function(jobId) {
    new Ajax (jobInfoPath + '?jobId=' + jobId + '&lang=' + lang, {method: 'get', onComplete: career.jobInfoLoaded}).request();
  },
  
  /**
   * die Informationen fuer den neuen Job wurden geladen
   * das Popup wird mit Daten befuellt
   * @param jobInfo {json} Ergebnis der Ajax-Anfrage
   *     jobInfo.jobSummary {string}
   *     jobInfo.jobDescription {string}
   *     jobInfo.downloadJobInfo {string}
   *     jobInfo.goToWebsite {string}
   *     jobInfo.jobId {number}  
   *     jobInfo.downloadJobInfoId {string} Id fuer das Text-Image beim Download 
   */    
  jobInfoLoaded: function(jobInfo) {
    var jobInfo = Json.evaluate(jobInfo);
    $('jobSummary').setHTML(jobInfo.jobSummary);
    $('jobDescription').setHTML(jobInfo.jobDescription);
    if (jobInfo.downloadJobInfo) {
      $('infoDownload').getFirst().setProperty('href', jobInfo.downloadJobInfo);
      $('infoDownload').setStyle('display', 'block');
    } else {
      $('infoDownload').setStyle('display', 'none');
    }
    if (jobInfo.goToWebsite) {
      $('infoExternal').getFirst().setProperty('href', jobInfo.goToWebsite);
      $('infoExternal').setStyle('display', 'block');
    } else {
      $('infoExternal').setStyle('display', 'none');
    }
    $('jobOpening').value = jobInfo.jobId;
    $('infoDownload').getFirst().setAttribute('id', jobInfo.downloadJobInfoId);
          
    //Eingaben zuruecksetzen
    if ( $defined($('attachment')) ) $('attachment').remove();
    if ( $defined($('successMessage')) ) $('successMessage').remove();
    $('iframeElement').setStyle('display', 'block');   
    $('errorContact').setHTML('&nbsp;');
    $('liInformation').className = 'active';
    $('liApplication').className = '';          
    $('jobDetail').setStyle('display', 'block');
    $('application').setStyle('display', 'none');
    $('prename').value = '';
    $('surname').value = '';
    $('email').value = '';
    $('message').value = '';
    $('subnav').setStyle('display', 'none');
    $('jobInfo').setStyle('display', 'block');    
    subnav.preventSubnavShowing = true; 
    //muss wegen Safari-Bug an das Ende
    var iframe = frames.iframeElement;
    iframe.location.href = career.iFramePath;        
  },

  /**
   * Popup schliessen
   */  
  closePopup: function() {
    $('jobInfo').setStyle('display', 'none');
    $('subnav').setStyle('display', 'block');
    subnav.preventSubnavShowing = false;    
  },
  
  /**
   * Job Details im Popup anzeigen
   */  
  showJobDetails: function() {
    $('application').setStyle('display', 'none');   
    $('jobDetail').setStyle('display', 'block');
    $('liInformation').className = 'active';
    $('liApplication').className = '';
  },

  /**
   * Kontaktformular im Popup anzeigen
   */   
  showUploadApplication: function() {
    if ( !$defined($('successMessage')) ) $('application').setStyle('display', 'block'); 
    $('errorContact').setHTML('&nbsp;');
    $('jobDetail').setStyle('display', 'none');
    $('liInformation').className = '';
    $('liApplication').className = 'active';
  },

  /**
   * Datei im Upload-Formular des iFrames hochladen
   * @param event {event}
   */   
  uploadFile: function(event) {  
    var event = new Event(event);  
    event.preventDefault(); 
    var iframe = frames.iframeElement; 
    iframe.document.forms[0].submit();  
    if (window.webkit) {
      $('iframeElement').setStyle('opacity', '0');
    } else {
      $('iframeElement').setStyle('display', 'none');    
    }       
  },

  /**
   * das iFrame ruft diese Funktion auf, wenn die Datei hochgeladen ist
   * bei Erfolg wird die Datei angezeigt, ansonsten kommt eine Fehlermeldung
   * @param attachmentId {number} Datenbank-Id der hochgeladenen Datei (<-1 --> Fehler)
   * @param errorMessage {string}
   */   
  fileUploaded: function(attachmentId, errorMessage) {   
    if (window.webkit) {
      $('iframeElement').setStyle('opacity', '1'); 
    } else {
      $('iframeElement').setStyle('display', 'block');  
    }       
    var iframe = frames.iframeElement;
    if (attachmentId < -1) {
      $('errorContact').setHTML(errorMessage);
      if ( $defined($('attachment')) ) $('attachment').remove();
      $('iframeElement').setStyle('display', 'block');      
    } else {     
      if ( $defined($('attachment')) ) $('attachment').remove();
      $('errorContact').setHTML('&nbsp;');
      new Element('input', {
        'id': 'attachment',
        'type': 'hidden',
        'value': attachmentId,
        'name': 'attachment'
      }).injectInside('submitApplicationForm');  
      $('iframeElement').setStyle('display', 'block');
    }
  },
  
  /**
   * Datei soll in der Datenbank geloescht werden
   * @param event {event} 
   * @param attachmentId {number} Datenbank-Id der hochgeladenen Datei (0 --> Fehler)
   * @param pathname {string} Dateiname der zu loeschenden Datei
   */    
  deleteFile: function(event, attachmentId, pathname) {
    new Ajax (deleteAttachmentPath + '?lang=' + lang + '&attachmentId=' + attachmentId + '&attachmentFile=' + pathname, {
      method: 'get',
      onComplete: career.fileDeleted
    }).request();
    var event = new Event(event);  
    event.preventDefault();     
  },
  
  /**
   * Ergebnis des Loeschvorgangs wird verarbeitet
   * @param errorObject {json} 
   *     errorObject.errorState {number} Fehlerbezeichnung '(0 --> korrekt)
   *     errorObject.errorMessage {string} 
   */   
  fileDeleted: function(errorObject) {
    var errorObject = Json.evaluate(errorObject);
    if (errorObject.errorState === 0) {
      $('errorContact').setHTML('&nbsp;');
      if ( $defined($('attachment')) ) $('attachment').remove();
      var iframe = frames.iframeElement; 
      iframe.location.href = career.iFramePath;      
    //Fehler
    } else {
      $('errorContact').setHTML(errorObject.errorMessage);
    }  
  },

  /**
   * Bewerbung abschicken 
   */  
  submitApplication: function() {
      var iframe = frames.iframeElement; 
      var inputFilePath = (iframe.document.getElementById('attachment')) ? iframe.document.getElementById('attachment').value : '';
      if (inputFilePath != "") {
        $('errorContact').setHTML(noUploadFileMessage);
      } else {
        $('submitApplicationForm').send({onComplete: career.applicationWasSent});    
      }
  },

  /**
   * Ergebnis des Bewerbung-Abschickvorgangs
   * @param result {json} 
   *     result.errorcode = 0 - erfolgreich, 1 - nicht alle Felder ausgefuellt, 2 - Fehler bei der Uebertragung
   *     result.caption = Meldung 
   */
  applicationWasSent: function(result) {
    var result = Json.evaluate(result);
    if (result.errorcode == 0) {
      $('application').setStyle('display', 'none');
      var successMessage = new Element('div', {
        'id': 'successMessage'
      }).injectAfter('application');
      new Element('p').setHTML(result.caption).injectInside(successMessage);
      new Element('a', {
        'href': 'javascript: career.closePopup();',
        'class': 'backToJobList buttonSmall'
      }).setHTML('<span class="imgSpan"></span>Back to Job List').injectInside(successMessage);
    } else {
      $('errorContact').setHTML(result.caption);
    }
  }
}