//make sure YOUR path is correct!!
Ext.BLANK_IMAGE_URL = './extjs/ext-2.1/resources/images/default/s.gif';

function configureFancybox(el){
  $("div#"+el+" a#zoomit").fancybox({
    'hideOnContentClick': true,
    'overlayShow':true,
    'overlayOpacity': 0.2
  });
}

function loadPopUpImage(){
      Ext.Ajax.request({
        url: './extjs/getPopUpImage.php',
        success: function(result, request){
          //alert(result.responseText);
          if(result.responseText!=''){
            if(document.images){
      	      objImage = new Image();
      	      objImage.onLoad = showPopUpImage('./popuppics/'+result.responseText);
      	      objImage.src = "./popuppics/"+result.responseText;
      	    }
          }
        }
      });
}

function showPopUpImage(img){
  if(!Ext.isIE6){
    var pContent = Ext.get('popupcontent');
    var popup = Ext.get('popupborder');
    
    if(popup.isVisible()){
      pContent.hide();
      popup.hide();
    } else {
      pContent.update('<table id="popuptable"><tr><td><img src="'+img+'"></td></tr><tr><td><a href="javascript:;" id="popupclose"><div id="closebutton"></div></a></td></tr></table>');
      Ext.get('popupclose').on('click',function(e){
        showPopUpImage('');
      });
      popup.show();
      pContent.show();
    }
  }
}

  function loadRootImage(e1,e2,image){
    var el1 = Ext.get(e1);
    var el2 = Ext.get(e2);
    
    if(el1 && el2){
      Ext.Ajax.request({
        url: './extjs/getRandomRootImage.php',
        success: function(result, request){
          //alert(result.responseText);
          if(image==''){
  	        loadRootImage(e1,e2,result.responseText)
          }else{
            el1.setStyle('background-image','url("./bgpics/rubrik/root/'+image+'")');
            el1.repaint();
            el1.fadeIn({duration:6});
            el2.fadeOut({duration:4});
    	      
    	      if(document.images){
      	      objImage = new Image();
      	      objImage.onLoad = setTimeout("loadRootImage('"+e2+"','"+e1+"','"+result.responseText+"')",8000);
      	      objImage.src = "./bgpics/rubrik/root/"+result.responseText;
      	    } else {
              var t = setTimeout("loadRootImage('"+e2+"','"+e1+"','"+result.responseText+"')",8000);
            }
          }
        }
      });
    }
    if(!el1 || !el2){
      var obj = Ext.get('rootcontent2');
      if(obj){
        obj.remove();
      }
    }
  }
  
function popup(site) {
  var neu=null;
  neu=window.open('', 'Bezug', 'directories=no, menubar=no, resizable=yes, scrollbars=yes toolbars=no, status=no, location=no, height=600, width=800');
  if (neu != null) {
    if (neu.opener == null) {
      neu.opener = self;
    }
    neu.location.href = site;
  }
}
 
//this runs on DOM load - you can access all the good stuff now.
Ext.onReady(function() {
  // Sobald Seite ready
  setInitialState();

  // ##### Functions #####
  function prepareSpecialCat(){
    removeMoveArrows('left');
    removeMoveArrows('right');
    
    var logo = Ext.get('top_nav').child('div[class=mobimex-logo]');
    if(logo){
      logo.setStyle('background-image','url("./_icons/logo_01_ZOOM.jpg")');
    }
  }
  
  function setInfoDownloads(root,level1,level2){
    showLoader();
    prepareSpecialCat();
    
    if(level1==''){
      Ext.get("outer_content_wrap").scrollTo('left',0);
      Ext.get("outer_content_wrap").update("<div id=\"content_wrap\"></div>");
      var content = Ext.get('content_wrap');
    }
    
    Ext.Ajax.request({
      url: './extjs/getInfoDownloads.php',
      params: {
               root: root,
               filterL1: level1,
               filterL2: level2},
      success: function(result, request){
        //alert(result.responseText);
        if(level1!=''&&level2!=''){
          Ext.Msg.show({
            title: level2+' downloads',
            msg: result.responseText,
            minWidth: 300,
            maxWidth: 800
            //buttons: Ext.Msg.OK
          });
        }else if(level1!=''){
          var dh = Ext.DomHelper;
          dh.insertAfter(Ext.get(level1),result.responseText);
          
          Ext.get(level1).removeAllListeners().on('click',function(e){
            Ext.get('sub_'+Ext.get(e.target).id).remove();
            Ext.get(e.target).on('click',function(e){
              setInfoDownloads('infos',Ext.get(e.target).id,'');
            });
          });
          
          var links = Ext.DomQuery.select('a','sub_'+level1);
          for(i=0;i<links.length;i++){
            Ext.get(links[i]).on('click',function(e){
              setInfoDownloads('infos',level1,Ext.get(e.target).id);
            });
          }
          
        } else {
          var dh = Ext.DomHelper;
          dh.overwrite('content_wrap', result.responseText);
          
          var categories = Ext.DomQuery.select('a','contact1');
          for(i=0;i<categories.length;i++){
            Ext.get(categories[i]).on('click', function(e){
              setInfoDownloads('infos',Ext.get(e.target).id,'');  
            });
          }
        }
        hideLoader();
      }
    });
  }
  
  
  function setBezug(){
    //showLoader();
	var language = getLanguage() != '' ? getLanguage() : 'de';
	
    prepareSpecialCat();
    
    Ext.get("outer_content_wrap").scrollTo('left',0);
    Ext.get("outer_content_wrap").update("<div id=\"content_wrap\"></div>");
    //changeBGImage(Ext.get('content_wrap'),level2);
    
    var content = Ext.get('content_wrap');
    
    Ext.Ajax.request({
      url: './extjs/getBezug.php',
	  params: {
				language: getLanguage()
				},
      success: function(result, request){
          var dh = Ext.DomHelper;
          dh.overwrite('content_wrap', result.responseText);
          
          var links = Ext.DomQuery.select('a','contact1');
          for(var i=0;i<links.length;i++){
            var link = Ext.get(links[i]);
            //if(link.id != "deu"){
              link.on('click',function(e){
                setBezugContent(Ext.get(e.target).id,language);
              });
            /*} else {
              link.on('click',function(e){
                Ext.get('bezug_deu_sub').toggleClass('sub_bezug_content_disp');
              });
            }*/
          }
          
          hideLoader();
      }
    });
  
  }
  
  function setBezugContent(country,language){
    Ext.Ajax.request({
      url: './extjs/getBezugContent.php',
      params: {
               country: country,
			   language: getLanguage()
			  },
      success: function(result, request){
        //alert(result.responseText);
			
			var bezugContent = Ext.get("bezug_content");
            bezugContent.update(result.responseText);
			
			makeScrollable(bezugContent);
		}
	});
	//changeBGImage(contentEl,'bezug',country);
    //Ext.get("outer_content_wrap").scrollTo('left',0);
    //Ext.get("outer_content_wrap").update("<div id=\"content_wrap\"><div style=\"width=900px;height:600px;\"><iframe frameborder=\"0\" width=\"100%\" height=\"100%\" src=\"http://www.mobimex.ch/drupal/?q=bezug/" + country + "\"></iframe></div></div>");
  }
  
  function setKontakt(){
    showLoader();
    prepareSpecialCat();
    
    Ext.get("outer_content_wrap").scrollTo('left',0);
    Ext.get("outer_content_wrap").update("<div id=\"content_wrap\"></div>");
    //changeBGImage(Ext.get('content_wrap'),level2);
    
    var content = Ext.get('content_wrap');
    
    Ext.Ajax.request({
      url: './extjs/getKontakt.php',
      params: {
        language: getLanguage()
      },
      success: function(result, request){
          var dh = Ext.DomHelper;
          dh.overwrite('content_wrap', result.responseText);
                    
          Ext.get("Kontaktformular").on('click',function(e){
            setKontaktFormular();
          });
        
          hideLoader();
      }
    });
  
  }
  
  function setKontaktFormular(){
    showLoader();
    prepareSpecialCat();
    
    Ext.get("outer_content_wrap").scrollTo('left',0);
    Ext.get("outer_content_wrap").update("<div id=\"content_wrap\"></div>");
    //changeBGImage(Ext.get('content_wrap'),level2);
    
    var content = Ext.get('content_wrap');
    
    Ext.Ajax.request({
      url: './extjs/getKontaktFormular.php',
      success: function(result, request){
          var dh = Ext.DomHelper;
          dh.overwrite('content_wrap', result.responseText);
          
          Ext.get("contact1").hide();
          Ext.get("contact-long").hide();
          
          Ext.get("contact1").slideIn('.5');
          
          Ext.get("step2").on('click',function(e){
            Ext.get("contact-long").slideIn('.5');
            Ext.get("step2").hide();
          });
          
          Ext.get("senden").on('click',function(e){
            //Ext.get("senden").update("Wird gesendet...");
            submitForm();
          });
          
          hideLoader();
      }
    });
    
  }
  
  function checkForm(){
    var result = true;
    
    required = new Array("PreName", "SurName", "Strasse", "PlzOrt", "Land", "Email", "Bemerkungen");
    
    for(i=0;i<required.length;i++){
      if(Ext.get(required[i]).getValue()==''){
        Ext.get(required[i]).stopFx().setStyle('border','1px solid red').frame("ff0000", 3, { duration: 0.5 });
        result = false;
      } else {
        Ext.get(required[i]).setStyle('border','0px');
      }
    }
    
    return result;
  }
  
  function submitForm(){
    showLoader();
    
    if(checkForm()){
      Ext.get("senden").removeAllListeners();
      
      Ext.Ajax.request({
        url: './extjs/getKontaktFormular.php',
        params: {
          sent: 1,
          prename: Ext.get('PreName').getValue(),
          surname: Ext.get('SurName').getValue(),
          firma: Ext.get('Firma').getValue(),
          strasse: Ext.get('Strasse').getValue(),
          plzort: Ext.get('PlzOrt').getValue(),
          country: Ext.get('Land').getValue(),
          phone: Ext.get('Telefon').getValue(),
          email: Ext.get('Email').getValue(),
          comment: Ext.get('Bemerkungen').getValue()
        },
        success: function(result, request){
            
            Ext.get("senden").removeAllListeners().update(result.responseText);
            
            hideLoader();
        }
      });
    } else {
      hideLoader();
    }
  }

  function setStateThree(root,level1, level2, level3){
    showLoader();
    UnscrollAll();
    
    setLevel3Logo(root,level1,level2,level3);
    
    Ext.get("outer_content_wrap").update("");
    Ext.get("outer_content_wrap").scrollTo('left',0);
    
    //Ext.get('content').hide();
    //Ext.get('sub_nav').hide();
    //Ext.get('content_wrap').hide();
    //Ext.get('outer_content_wrap').load('http://mobimex/extjs/getContent.php',{content: level3});
    Ext.Ajax.request({
      url: './extjs/getContent.php',
      params: {
                root: root,
                filterL1: level1,
                filterL2: level2,
                content: level3,
                language: getLanguage()
              },
      success: function(result, request){
                  var dh = Ext.DomHelper;
                  dh.overwrite('outer_content_wrap', result.responseText);
                   
                   //Ext.DomQuery.select('div[id*="product"]').hide();
                   var productItems = Ext.DomQuery.select('div[id*="product"]');
                   var activeEl = 0;
                   
                   if(level3==''){
                    level3=Ext.get(productItems[0]).id.replace("product_","");
                   }
                   
                   for(var i=1;i<productItems.length;i++){
                    
                    if(Ext.get(productItems[i]).id == 'product_'+level3){
                      
                      activeEl = i;
                    }
                   }
                   
                   if(Ext.isIE6){
                     Ext.get("prod_outer").setStyle('padding-left','20px');
                   }
                   
                   //alert(activeEl);
                   var params = [Ext.get(productItems[activeEl]).id,"l",root,level1,level2,level3,activeEl];
                                      
                   for(i=0;i<=activeEl;i++){
                     if(i==activeEl){
                      getImageUrl(root,level1,level2,Ext.get(productItems[i]).id.replace("product_",""),null,params);
                     }else{
                      getImageUrl(root,level1,level2,Ext.get(productItems[i]).id.replace("product_",""),null,null);
                     }
                   }
                   
                   
                   
                   //moveProducts(Ext.get(productItems[activeEl]).id,"l",root,level1,level2,level3,activeEl);
                  
                   //hideLoader();
                }
                
    });

    
  }
  
  function setLevel3Logo(root,level1,level2,level3){
    if(root=='Divers'){
      var logo = Ext.get('top_nav').child('div[class=mobimex-logo]');
      if(logo){
        logo.setStyle('background-image','url("./_icons/logo_01_ZOOM.jpg")');
      }
    } else if(level3.match('CLIP')!=null){
      var logo = Ext.get('top_nav').child('div[class=mobimex-logo]');
      if(logo){
        logo.setStyle('background-image','url("./_icons/logo_CLIP.jpg")');
      }
    } else {
      var logo = Ext.get('top_nav').child('div[class=mobimex-logo]');
      if(logo){
        logo.setStyle('background-image','url("./_icons/logo_'+level2+'.jpg")');
      }
    }
  }
  
  function getImageUrl(root,level1,level2,level3,image,params){
    showLoader();
    
    Ext.Ajax.request({
      url: './extjs/getImage.php',
      params: {root: root,
               filterL1: level1,
               filterL2: level2,
               product: level3,
               image: image},
      success: function(result, request){
        var img = [result.responseText];
        if(params){
         var loader = new ImagePreloader(img,moveProducts,params);
        }else{
         var loader = new ImagePreloader(img,showLoader,null);
        }
      }
    });
    
  }
  
  function moveProducts(activeProduct,direction,root,level1,level2,level3,factor){
                   showLoader();
                   UnscrollAll();
                   
                   setLevel3Logo(root,level1,level2,level3);
                   
                   var productItems = Ext.DomQuery.select('div[id*="product"]');
                   
                   for(var i=0;i<productItems.length;i++){
                    Ext.get(productItems[i]).removeAllListeners();
                    if(Ext.get(productItems[i]).id == activeProduct){
                      Ext.get(productItems[i]).child('div[id=top_content]').setDisplayed('none');
                      Ext.get(productItems[i]).child('div[class="productinfo"]').removeAllListeners().scrollTo('top',0).setStyle('background-image','').setStyle('height','55px').setStyle('margin-top','265px').setStyle('background-color','').setOpacity(1).show();
                      Ext.get(productItems[i]).setOpacity(1);
                      
                                            
                      // set links
                      Ext.get(productItems[i]).child('a[id=toggle_info]').removeAllListeners().on('click', function(e){
                        toggleProductInfo(activeProduct);
                      });

                      var imgItems = Ext.DomQuery.select('a[class="image_link"]',Ext.get(productItems[i]).id);
        
                      for(var k=0;k<imgItems.length;k++){
                        Ext.get(imgItems[k]).on('click', function(e){
                          loadImage("product_"+level3,root,level1,level2,level3, Ext.get(e.target).id,null);
                          initializeImageBig("product_"+level3,root,level1,level2,level3, Ext.get(e.target).id);
                          if(Ext.get(e.target).first()){
                            highlightImageIcon(Ext.get(e.target),Ext.get(e.target).parent());
                          }else{
                            highlightImageIcon(Ext.get(e.target).parent(),Ext.get(e.target).parent().parent());  
                          }
                        });
                        if(k==imgItems.length-1){
                          highlightImageIcon(Ext.get(imgItems[0]),Ext.get(imgItems[0]).parent());
                        }
                      }
                      
                      var dlItem = Ext.DomQuery.select('a[id="downloads"]',Ext.get(productItems[i]).id);
                      if(dlItem.length > 0){
                        for(var k=0;k<dlItem.length;k++){
                          Ext.get(dlItem[k]).removeAllListeners().on('click', function(e){
                            loadDownloads(root,level1,level2,level3);
                          });
                        }
                      }
                      
                      //if(root!='Divers'){
                        Ext.get(productItems[i]).child('div[class="backlink"]').show().on('click',function(e){
                          setStateTwo(root,level1,level2);
                        });
                      //}
                      
                      var prodInfo = Ext.get(productItems[i]).child('div[class="productinfo"]');
                      //makeScrollable(prodInfo);
                                        
                    } else {
                      Ext.get(productItems[i]).child('div[class="zoomlink"]').hide();
                      Ext.get(productItems[i]).child('div[class="backlink"]').hide();
                      Ext.get(productItems[i]).child('div[class="productinfo"]').hide();
                      Ext.get(productItems[i]).setOpacity(.4);
                      loadImage(Ext.get(productItems[i]).id,root,level1,level2,Ext.get(productItems[i]).id.replace("product_",""),null,null);
                      var imgItems = Ext.DomQuery.select('a[class="image_link"]',Ext.get(productItems[i]).id);
        
                      for(var k=0;k<imgItems.length;k++){
                        Ext.get(imgItems[k]).removeAllListeners();
                      }
                    }
                   }
                   
                   for(var i=0;i<productItems.length;i++){
                   
                      if(Ext.get(productItems[i]).id == activeProduct){
                        // INITIALIZE ACTIVE ELEMENT
                        loadImage(Ext.get(productItems[i]).id,root,level1,level2,level3,null,null);
                        initializeImageBig(Ext.get(productItems[i]).id,root,level1,level2,level3,null);
                        
                        removeMoveArrows('left');
                        removeMoveArrows('right');
                        
                        // SET EVENTS OF NEXT AND BEFORE ELEMENT
                        if((i-1)>=0){
                          Ext.get(productItems[i-1]).on('click',function(e){
                            if(!opt.anim.isAnimated()){
                              level3 = Ext.get(e.target).id.replace("product_","");
                              moveProducts(Ext.get(e.target).id,"r",root,level1,level2,level3,1);
                              //Ext.get(e.target).setX(Ext.get(e.target).getX()-100);
                            }
                          });
                          placeMoveArrows('left');
                        }
                        
                        if((i+1)<productItems.length){
                          Ext.get(productItems[i+1]).on('click',function(e){
                            if(!opt.anim.isAnimated()){
                              level3 = Ext.get(e.target).id.replace("product_","");
                              moveProducts(Ext.get(e.target).id,"l",root,level1,level2,level3,1);
                              //Ext.get(e.target).setX(Ext.get(e.target).getX()-100);
                            }
                          });
                          placeMoveArrows('right');
                        }
                        // #####################################
                      }
                   }
                   
                   if(Ext.get("outer_content_wrap").isScrollable()){
                   if(factor>1){
                      var opt = {
                              duration: (1+factor*0.25),
                              callback: this.foo,
                              scope: this
                      };
                   }else{
                     var opt = {
                              duration: 1,
                              callback: this.foo,
                              scope: this
                      };
                    }
                    
                    Ext.get("outer_content_wrap").repaint().scroll(direction,factor*742,opt);
                   }
    hideLoader();
  }
  
  function highlightImageIcon(activeImg,rootEl){
    var imgItems = Ext.DomQuery.select('a[class="image_link"]',rootEl.id);
    
    for(var k=0;k<imgItems.length;k++){
      var el = Ext.get(imgItems[k]);
      el.update('<img id="'+el.id+'" src="./_icons/image_normal.gif" />');
    }
    if(activeImg!=null){
      activeImg.update('<img id="'+activeImg.id+'" src="./_icons/image_highlight.gif" />');
    }
  }
  
  function placeMoveArrows(direction){
    removeMoveArrows(direction);
    
    var correctionLeft = 0;
    var correctionRight = 0;
    var correctionVertical = 0;
    if(!Ext.isIE || Ext.isIE6){
      correctionLeft = 2;
      correctionRight = 2;
      
      if(Ext.isIE6){
        correctionVertical = 4;
      }
    }
    
    if(direction=='right'){
      Ext.DomHelper.insertFirst(Ext.get('mainbody'),'<div id="arrow-right"></div>');
      Ext.get('arrow-right').setStyle('top',(186+correctionVertical)+'px').setStyle('left',(Ext.get('outer_content_wrap').getRight()-1+correctionRight)+'px');
    } else {
      Ext.DomHelper.insertFirst(Ext.get('mainbody'),'<div id="arrow-left"></div>');
      Ext.get('arrow-left').setStyle('top',(186+correctionVertical)+'px').setStyle('left',(Ext.get('outer_content_wrap').getLeft()-14+correctionLeft)+'px');
      //alert(Ext.get('outer_content_wrap').getLeft());
    }
  }
  
  function removeMoveArrows(direction){
    if(direction=='right'){
      var arrows = Ext.DomQuery.select('div[id=arrow-right]');
      for(i=0;i<arrows.length;i++){
        Ext.get(arrows[i]).remove();
      }
    } else {
      var arrows = Ext.DomQuery.select('div[id=arrow-left]');
      for(i=0;i<arrows.length;i++){
        Ext.get(arrows[i]).remove();
      }
    }
  }
  
  function toggleProductInfo(e){
    if(Ext.get(e).child('div[id=top_content]').isVisible()){
      Ext.get(e).child('div[id=top_content]').setDisplayed('none');
      Ext.get(e).child('div[class="productinfo"]').setStyle('height','55px').setStyle('margin-top','265px').setStyle('background-color','').show().setOpacity(1);
      //Ext.get(e).child('div[id=toggle_info]').setStyle('background-image','url("./_icons/info_toggle.png")');
      Ext.get(e).child('div[class="productinfo"]').scrollTo('top',0);
      Ext.get(e).child('div[class="productinfo"]').setStyle('background-image','').removeAllListeners();
      UnscrollAll();
    } else {
      Ext.get(e).child('div[id=top_content]').setDisplayed('block');
      //Ext.get(e).child('div[id=toggle_info]').setStyle('background-image','url("./_icons/info_toggle_close.png")');
      Ext.get(e).child('div[class="productinfo"]').setOpacity(.7).setStyle('margin-top','0px').setStyle('background-color','#FFFFFF').setHeight(320,false);
      var prodInfo = Ext.get(e).child('div[id="top_content"]');
      
      makeScrollable(prodInfo);
    }
  }
  
  function loadImage(e,root,level1,level2,level3,image,debug){
    showLoader();
    Ext.Ajax.request({
      url: './extjs/getImage.php',
      params: {root: root,
               filterL1: level1,
               filterL2: level2,
               product: level3,
               image: image},
      success: function(result, request){
        if(debug==1){alert(result.responseText);}
        var element = Ext.get(e);
        if(element){
          element.setStyle('background-image','url('+result.responseText+')');
          element.repaint();
        }
        hideLoader();
      }
    });
  }
    
  function initializeImageBig(el,root,level1,level2,level3,image){
    showLoader();
    
    Ext.get(el).child('div[class=zoomlink]').removeAllListeners();
    
    Ext.Ajax.request({
      url: './extjs/getImageBig.php',
      params: {root: root,
               filterL1: level1,
               filterL2: level2,
               product: level3,
               image: image},
      success: function(result, request){
        var imagePath = result.responseText;
        
        if(imagePath!=''){
          
          Ext.get(el).child('div[class=zoomlink]').update('<a id="zoomit" href="'+imagePath+'"><img src="./_icons/zoomlink.jpg"></a>').show();
          configureFancybox(el);
          //setupZoom();
        } else {
          var element = Ext.get(el);
          if(element){
            var elementChild = element.child('div[class=zoomlink]');
            if(elementChild){
              elementChild.hide();
            }
          }
        }
        
        hideLoader();
      }
    });
  }
    
  function loadDownloads(root,level1,level2,level3){
    showLoader();
    
    Ext.Ajax.request({
      url: './extjs/getDownloads.php',
      params: {
               root: root,
               filterL1: level1,
               filterL2: level2,
               filterL3: level3},
      success: function(result, request){
        //alert(result.responseText);
        Ext.Msg.show({
          title: level3+' downloads',
          msg: result.responseText,
          minWidth: 300,
          maxWidth: 800
          //buttons: Ext.Msg.OK
        });
        hideLoader();
      }
    });
  }
  
  function setStateTwo(root,level1, level2){
    // Setzen des Rubriklogos
    showLoader();
    UnscrollAll();
    removeMoveArrows('left');
    removeMoveArrows('right');
    
    var logo = Ext.get('top_nav').child('div[class=mobimex-logo]');
    if(logo){
      logo.setStyle('background-image','url("./_icons/logo_'+level2+'.jpg")');
    }
    
    Ext.get("outer_content_wrap").scrollTo('left',0);
    Ext.get("outer_content_wrap").update("<div id=\"content_wrap\"><div id=\"sub_nav\"></div><div id=\"content\"></div></div>");
    changeBGImage(Ext.get('content_wrap'),level1,level2);
    
    var content = Ext.get('content');
    var sub_nav = Ext.get('sub_nav');
    content.hide();
    sub_nav.hide();
    sub_nav.setOpacity('.9');
    
    Ext.Ajax.request({
      url: './extjs/getSubNav.php',
      params: {
               root: root,
               filterL1: level1,
               filterL2: level2},
      success: function(result, request){
        var dh = Ext.DomHelper;
        dh.overwrite('sub_nav', result.responseText);
        
        var navItems = Ext.DomQuery.select('div[class="sub_nav_item"]');
        
        var preloadingImages = new Array;      
        
        for(var i=0;i<navItems.length;i++){
          
          preloadingImages.push('./'+root+'/'+level1+'/'+level2+'/'+Ext.get(navItems[i]).id+'/icons/'+Ext.get(navItems[i]).id+'.jpg');
          preloadingImages.push('./'+root+'/'+level1+'/'+level2+'/'+Ext.get(navItems[i]).id+'/icons/'+Ext.get(navItems[i]).id+'_over.jpg');
          
          setNormalIcon(Ext.get(navItems[i]),root,level1,level2,Ext.get(navItems[i]).id);
          //Ext.get(navItems[i]).addClassOnOver('sub_nav_item_hover');
          Ext.get(navItems[i]).on('mouseover',function(e){
            setOverIcon(Ext.get(e.target),root,level1,level2,Ext.get(e.target).id);
          });
          
          Ext.get(navItems[i]).on('mouseout',function(e){
            setNormalIcon(Ext.get(e.target),root,level1,level2,Ext.get(e.target).id);
          });
          
          Ext.get(navItems[i]).on('click', function(e){
            var navItemsSwitch = Ext.DomQuery.select('div[class="sub_nav_item"]');
            setStateThree(root,level1,level2,Ext.get(e.target).id);
          });
        }
        
        // Konfiguriert das Scrollen falls notwendig.
        var subNav = Ext.get('sub_nav');
        
		if(!subNav.isVisible()){
			subNav.slideIn('l',{ callback: makeScrollable(subNav) });
		}
		
        subNav.repaint();
        var load = new ImagePreloader(preloadingImages,hideLoader,null);
        //hideLoader();
      }
    });
  }
  
  function ImagePreloader(img, callback, params)
  {
     // store the callback
     this.callback = callback;
     this.callbackParams = params;
   
     // initialize internal state.
     this.nLoaded = 0;
     this.nProcessed = 0;
     this.aImages = new Array;
   
     // record the number of images.
     this.nImages = img.length;
     
     if(document.images || img.length == 0){
      // for each image, call preload()
        for ( var i = 0; i < img.length; i++ ){
          this.preload(img[i]);
          
        }
     } else {
      if(this.callbackParams && this.callbackParams.length == 7){
          this.callback(this.callbackParams[0],this.callbackParams[1],this.callbackParams[2],this.callbackParams[3],this.callbackParams[4],this.callbackParams[5],this.callbackParams[6])
      }else{
          this.callback();
      }
     }
  }
  
  ImagePreloader.prototype.preload = function(image)
  {
     // create new Image object and add to array
     var oImage = new Image;
     this.aImages.push(oImage);
    
     // set up event handlers for the Image object
     oImage.onload = ImagePreloader.prototype.onload;
     oImage.onerror = ImagePreloader.prototype.onerror;
     oImage.onabort = ImagePreloader.prototype.onabort;
    
     // assign pointer back to this.
     oImage.oImagePreloader = this;
     oImage.bLoaded = false;
    
     // assign the .src property of the Image object
     oImage.src = image;
  }
  
  ImagePreloader.prototype.onComplete = function()
  {
     this.nProcessed++;
     if ( this.nProcessed == this.nImages )
     {
        if(this.callbackParams && this.callbackParams.length == 7){
          this.callback(this.callbackParams[0],this.callbackParams[1],this.callbackParams[2],this.callbackParams[3],this.callbackParams[4],this.callbackParams[5],this.callbackParams[6])
        }else{
          this.callback();
        }
        hideLoader();
     }
  }
  ImagePreloader.prototype.onload = function()
  {
     this.bLoaded = true;
     this.oImagePreloader.nLoaded++;
     this.oImagePreloader.onComplete();
  }
  ImagePreloader.prototype.onerror = function()
  {
     this.bError = true;
     this.oImagePreloader.onComplete();
  }
  ImagePreloader.prototype.onabort = function()
  {
     this.bAbort = true;
     this.oImagePreloader.onComplete();
  }
  
  function showLoader(){
    /*var nav = Ext.get('bottom_navigation');
    if(nav){
      nav.setStyle('background-image','url("./_icons/load.gif")');
      nav.setStyle('background-repeat','no-repeat');
      nav.setStyle('background-position','10px 0px');
    }*/
    
    Ext.get('loading-mask').show();
  }
  
  function hideLoader(){
    /*var nav = Ext.get('bottom_navigation');
    if(nav){
      nav.setStyle('background-image','');
    }*/
    Ext.get('loading-mask').hide();
  }
  
  function UnscrollAll(){
    var downScrollers = Ext.DomQuery.select('div[class="scrolldown"]');
    if(downScrollers.length > 0){
      for(i=0;i<downScrollers.length;i++){
        Ext.get(downScrollers[i]).remove();
      }
    }
    var upScrollers = Ext.DomQuery.select('div[class="scrollup"]');
    if(upScrollers.length > 0){
      for(i=0;i<upScrollers.length;i++){
        Ext.get(upScrollers[i]).remove();
      }
    }
  }
    
  // Setzt die Scrollsymbole
  function placeScrollImage(e){
    var pos = e.getScroll();
    e.child('div[class="scrolldown"]').setStyle('top',pos.top+(e.getHeight()-20)+'px').show();
    e.child('div[class="scrollup"]').setStyle('top',pos.top+10+'px').show();
  }
  
  // Aktiviert das Scrollen für ein Element
  function makeScrollable(obj){
    // Falls die Sub-Nav Scrollable ist, dann das Scrollen aktivieren.
    if(obj.isScrollable()){
	
	  var distance = document.getElementById(obj.id).scrollHeight;
	  var time = (distance / 300) * 1;
      
      var scrolldown = Ext.DomHelper.insertBefore(obj,'<div class="scrolldown"></div>');
      var scrollup = Ext.DomHelper.insertBefore(obj,'<div class="scrollup"></div>');
	  scrolldown = Ext.get(scrolldown);
	  scrollup = Ext.get(scrollup);
      var pos = obj.getScroll();
      
	  var scrollFactor = 0;
	  var scrollFactorEl = Ext.get("outer_content_wrap");
	  if(scrollFactorEl){
		scrollFactor = scrollFactorEl.getScroll().left;
	  }
	  
      scrolldown.setStyle('left',scrollFactor+obj.getOffsetsTo("wrap")[0]+obj.getSize().width-14+'px');
      scrolldown.setStyle('top',pos.top+(obj.getHeight()-20)+'px');
      
      scrollup.setStyle('left',scrollFactor+obj.getOffsetsTo("wrap")[0]+obj.getSize().width-14+'px');
      scrollup.setStyle('top',pos.top+10+'px');
      var opt;
      scrolldown.on('mouseover',function(e){
        opt = {
                    duration: time,
                    scope: window
                  };
        var scrolled = obj.scroll('b',distance,opt);
        //obj.child('div[class="scrolldown"]').hide();
        //if(scrolled){
        //  obj.child('div[class="scrollup"]').hide();
        //}
      });
      
	  scrolldown.on('mouseout',function(e){
		if(opt.anim){
			opt.anim.stop();
		}
	  });
	  
      scrollup.on('mouseover',function(e){
        opt = {
                    duration: time,
                    scope: window
                  };
        var scrolled = obj.scroll('t',distance,opt);
        /*if(scrolled){
          obj.child('div[class="scrolldown"]').hide();
        }
        obj.child('div[class="scrollup"]').hide();*/
      });
	  
	  scrollup.on('mouseout',function(e){
		if(opt.anim){
			opt.anim.stop();
		}
	  });
    }
  }

  function changeBGImage(e,folder, img){
    e.setStyle('background-image','url("./bgpics/rubrik/'+folder+'/'+img+'.jpg")');
	  e.repaint(); 
  }
  
  
  function setOverIcon(e,root,level1,level2,id){
    if(!e.hasClass("sub_nav_item_title")){
      if(root != ''){
	  e.setStyle('background-image','url("./'+root+'/'+level1+'/'+level2+'/'+id+'/icons/'+id+'_over.jpg")');
	    e.repaint();
	  }else{
	  e.setStyle('background-image','url("./products/'+level1+'/'+level2+'/'+id+'/icons/'+id+'_over.jpg")');
	    e.repaint();
		}
    }
  }
  
  function setNormalIcon(e,root,level1,level2,id){
    if(!e.hasClass("sub_nav_item_title")){
	  if(root != ''){
	  e.setStyle('background-image','url("./'+root+'/'+level1+'/'+level2+'/'+id+'/icons/'+id+'.jpg")');
	    e.repaint();
	  }else{
      e.setStyle('background-image','url("./products/'+level1+'/'+level2+'/'+id+'/icons/'+id+'.jpg")');
	    e.repaint();
		}
    }
  }
  
  // STATE 1 laden (Wenn Seite geöffnet wird).
  function setInitialState(){
    showLoader();
    // Nicht benutzte Elemente verstecken.
    Ext.get('content').hide();
    Ext.get('sub_nav').hide();
    // Top-Navigation laden
    loadTopNavigation();
    loadBottomNavigation();
    checkUrlAndForward();
    loadPopUpImage();
    hideLoader();
    
  }
    
  function checkUrlAndForward(){
    var url = document.URL;
    var url = document.URL.split("#");
    if(url.length > 1){
      var params = url[url.length-1].split(";");
      switch (params.length){
        case 2:
          setStateTwo(params[0],params[1],params[2]);
        break;
        case 3:
          setStateThree(params[0],params[1],params[2],params[3]);
        break;
      }
    }
    
  }
  

function getLanguage(){
  var currLang = Ext.get('language');
  if(currLang){
    return currLang.getValue();
  } else {
    return "de";
  }
}

function setLanguage(lang){
  Ext.get("de").setStyle('font-weight','normal');
  Ext.get("en").setStyle('font-weight','normal');
  //Ext.get("fr").setStyle('font-weight','normal');
  
  var newLangEl = Ext.get(lang);
  if(newLangEl){
    newLangEl.setStyle('font-weight','bold');
  }
  
  var langField = Ext.get('language');
  if(langField){
    langField.set({id: 'language',
                   type: 'hidden',
                   value: lang});
  }
  
  loadTopNavigation();
  loadBottomNavigation();
}

function loadTopNavigation(){
            // Hintergrundbild anpassen
    loadRootImage('rootcontent1','rootcontent2','');
    // Navigation laden
    Ext.Ajax.request({
      url: './extjs/getTopNav.php',
      params: {
				language: getLanguage()
			  },
      success: function(result, request){              
          //Ext.Msg.alert('Success', 'Data return from the server: '+ result.responseText);
          var dh = Ext.DomHelper;
          dh.overwrite('top_nav',result.responseText);
           
          // Hide Sub-Elements
          
          var navItems = Ext.DomQuery.select('a[class="top_link_sub"]');
          for(var i=0;i<navItems.length;i++){
             Ext.get(navItems[i]).hide();
             Ext.get(navItems[i]).on('click', function(e){
              //Ext.get(e.target).frame("grey",1,1);
              Ext.select('a[class="top_link_sub"]').hide();
              setStateTwo('products',Ext.get(e.target).id.substr(0,Ext.get(e.target).id.indexOf("/")),Ext.get(e.target).id.substr(Ext.get(e.target).id.indexOf("/")+1));
             });
          }
          
          // Set fadeIn-Events
          var rootItems = Ext.DomQuery.select('a[class="top_link_root"]');
          for(var i=0;i<rootItems.length;i++){
            //Ext.get(rootItems[i]).on('mouseover', function(e){
            //  var subItems = Ext.DomQuery.select('a[class="top_link_sub"]',Ext.get(e.target).parent().parent().id);
            //  topNavSubItemFadeIn(subItems,subItems.length-1,0);
            //});
            
            
            Ext.get(rootItems[i]).on('click', function(e){
              var subItems = Ext.DomQuery.select('a[class="top_link_sub"]',Ext.get(e.target).parent().parent().id);
              //topNavSubItemFadeOut(subItems,0,subItems.length-1);
              topNavSubItemFadeIn(subItems,subItems.length-1,0);
            });
          }
          
          var projItem = Ext.DomQuery.select('a[class="top_link_proj"]');
          for(var i=0;i<projItem.length;i++){
            Ext.get(projItem[i]).on('click', function(e){
              setStateThree(null,'00_Projekte','Mobimex','');
            });
          }
          // Set fadeOut-Events

      }
    });
  }
    
  function loadBottomNavigation(){
    Ext.Ajax.request({
        url: './extjs/getBottomNav.php',
        params: {
				language: getLanguage()
				},
        success: function(result, request){              
            //Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
            var dh = Ext.DomHelper;
            dh.overwrite('bottom_navigation',result.responseText);
            //dh.insertFirst('bottom_navigation','')
            
            Ext.get("Bottom_News").on('click', function(e){
              setStateTwo("Divers","01_News","01_Mobimex");
            });
            
            Ext.get("Bottom_info").on('click', function(e){
              setInfoDownloads('infos','');
            });
            
            Ext.get("Bottom_Bezug").on('click', function(e){
              setBezug();
            });
            
            Ext.get("Bottom_Kontakt").on('click', function(e){
              setKontakt();
            });
            
            Ext.get("de").on('click',function(e){
              setLanguage(Ext.get(e.target).id);
            });
            
            Ext.get("en").on('click',function(e){
              setLanguage(Ext.get(e.target).id);
            });
            
            //Ext.get("fr").on('click',function(e){
            //  setLanguage(Ext.get(e.target).id);
            //});
        }});
  } 
  
if(Ext.isGecko || Ext.isGecko2 || Ext.isGecko3){
    function topNavSubItemFadeIn(subItems, idx, offset){
          var currItem = Ext.get(subItems[idx]);
          if(idx==offset){
            if(!currItem.isVisible()){
              currItem.fadeIn({concurrent: false, duration: .2});
            }
          } else {
            if(idx>offset){
              if(!currItem.isVisible()){
                currItem.fadeIn({concurrent: false, duration: .2, callback: SubItemFadeIn.createDelegate(this,[subItems,idx-1,offset])});
              }
            } else {
              if(!currItem.isVisible()){
                currItem.fadeIn({concurrent: false, duration: .2, callback: SubItemFadeIn.createDelegate(this, [subItems,idx+1,offset])});
              }
            }
          }
    }
    
    function topNavSubItemFadeOut(subItems, idx, offset){
      var currItem = Ext.get(subItems[idx]);
      if(idx==offset){
        if(currItem.isVisible()){
          currItem.fadeOut({block: true, concurrent: false, duration: .2});
        }
      } else {
        if(idx>offset){
          if(currItem.isVisible()){
            currItem.fadeOut({block: true, concurrent: false, duration: .2, callback: SubItemFadeOut.createDelegate(this,[subItems,idx-1,offset])});
          }
        } else {
          if(currItem.isVisible()){
            currItem.fadeOut({block: true, concurrent: false, duration: .2, callback: SubItemFadeOut.createDelegate(this, [subItems,idx+1,offset])});
          }
        }
      }
    }
  }
  
  // Step by Step Fade In for the Menu-Items
  var SubItemFadeIn = function topNavSubItemFadeIn(subItems, idx, offset){
    var currItem = Ext.get(subItems[idx]);
    if(idx==offset){
      if(!currItem.isVisible()){
        currItem.fadeIn({concurrent: false, duration: .2});
      }
    } else {
      if(idx>offset){
        if(!currItem.isVisible()){
          currItem.fadeIn({concurrent: false, duration: .2, callback: SubItemFadeIn.createDelegate(this,[subItems,idx-1,offset])});
        }
      } else {
        if(!currItem.isVisible()){
          currItem.fadeIn({concurrent: false, duration: .2, callback: SubItemFadeIn.createDelegate(this, [subItems,idx+1,offset])});
        }
      }
    }
    
  };
  
  // Step by Step Fade out for the Menu Items
  var SubItemFadeOut = function topNavSubItemFadeOut(subItems, idx, offset){
    var currItem = Ext.get(subItems[idx]);
    if(idx==offset){
      if(currItem.isVisible()){
        currItem.fadeOut({block: true, concurrent: false, duration: .2});
      }
    } else {
      if(idx>offset){
        if(currItem.isVisible()){
          currItem.fadeOut({block: true, concurrent: false, duration: .2, callback: SubItemFadeOut.createDelegate(this,[subItems,idx-1,offset])});
        }
      } else {
        if(currItem.isVisible()){
          currItem.fadeOut({block: true, concurrent: false, duration: .2, callback: SubItemFadeOut.createDelegate(this, [subItems,idx+1,offset])});
        }
      }
    }
  };


});