// JavaScript Document

var page = 0;
function highlight(page) {


  var effect = "clip";

  switch(page){
    case 4:
    case 1:
         $("#klassik p").animate({"color": "#000000" }, 500);
         $("#klassik h1").animate({"color": "#e01a21" }, 500);
         $("#modern *,#landhaus *").animate({"color": "#aaaaaa" }, 500);
         $("#highlight-products").animate({"margin-left": "-470px", "width" : "312px" }, 500);
         
         
         $("#productheadline-klassik").show(effect,"",500);
         $("#productheadline-modern, #productheadline-landhaus").hide(effect,"",500);
         
    break;
    
    case 2:
         $("#klassik *,#landhaus *").animate({"color": "#aaaaaa" }, 500);
         $("#modern p").animate({"color": "#000000" }, 500);
         $("#modern h1").animate({"color": "#e01a21" }, 500);
         $("#highlight-products").animate({"margin-left": "-158px", "width" : "312px" }, 500);


         $("#productheadline-modern").show(effect,"",500);
         $("#productheadline-klassik, #productheadline-landhaus").hide(effect,"",500);
    break;
    
    case 3:
         $("#klassik *,#modern *").animate({"color": "#aaaaaa" }, 500);
         $("#landhaus p").animate({"color": "#000000" }, 500);
         $("#landhaus h1").animate({"color": "#e01a21" }, 500);  
         $("#highlight-products").animate({"margin-left": "155px", "width" : "314px" }, 500);
         
         
         $("#productheadline-landhaus").show(effect,"",500);
         $("#productheadline-modern, #productheadline-klassik").hide(effect,"",500);
    break; 
  
  
  }

}



$(document).ready(function(){
 
 var alogo = new Array("aeg","blanco","bosch","franke","grohe","haecker","kludi","kueppersbusch","liebherr","miele","naber","nobilia","siematic","siemens","systemceram");
 var i=0; 
 for(var i=0;i<=alogo.length;i++){
     $('#logo_'+alogo[i]).mouseover(function() {
      $(this).attr("src","fileadmin/templates/images/Logos Anbieter/55px/farbe/"+$(this).get(0).name+".png");
     });
     $('#logo_'+alogo[i]).mouseleave(function() {
      $(this).attr("src","fileadmin/templates/images/Logos Anbieter/55px/sepia/"+$(this).get(0).name+".png");
    });
 }
 
 
 $('#slider3')
  .anythingSlider({
   width        : 940,
   height       : 305,
   autoPlay     : true,       
   delay        : 7000,
   buildArrows  : false,       
   easing       : "elastic",
   onSlideInit  : function (e, slider) { 
                    highlight(slider.currentPage); 
                  } 
   
  })
  /* this code will make the caption appear when you hover over the panel
    remove the extra statements if you don't have captions in that location */
  
  .find('.panel')
    .find('div[class*=caption]').css({ position: 'absolute' }).end()
    .hover(function(){ showCaptions( $(this) ) }, function(){ hideCaptions( $(this) ); });

  showCaptions = function(el){
    var $this = el;
    if ($this.find('.caption-top').length) {
      $this.find('.caption-top')
        .show()
        .animate({ top: 0, opacity: 1 }, 400);
    }
    if ($this.find('.caption-right').length) {
      $this.find('.caption-right')
        .show()
        .animate({ right: 0, opacity: 1 }, 400);
    }
    if ($this.find('.caption-bottom').length) {
      $this.find('.caption-bottom')
        .show()
        .animate({ bottom: 0, opacity: 1 }, 400);
    }
    if ($this.find('.caption-left').length) {
      $this.find('.caption-left')
        .show()
        .animate({ left: 0, opacity: 1 }, 400);
    }
  };
  hideCaptions = function(el){
    var $this = el;
    if ($this.find('.caption-top').length) {
      $this.find('.caption-top')
        .stop()
        .animate({ top: -50, opacity: 0 }, 350, function(){
          $this.find('.caption-top').hide(); }); 
    }
    if ($this.find('.caption-right').length) {
      $this.find('.caption-right')
        .stop()
        .animate({ right: -150, opacity: 0 }, 350, function(){
          $this.find('.caption-right').hide(); });
    }
    if ($this.find('.caption-bottom').length) {
      $this.find('.caption-bottom')
        .stop()
        .animate({ bottom: -50, opacity: 0 }, 350, function(){
          $this.find('.caption-bottom').hide(); });
    }
    if ($this.find('.caption-left').length) {
      $this.find('.caption-left')
        .stop()
        .animate({ left: -150, opacity: 0 }, 350, function(){
          $this.find('.caption-left').hide(); });
    }
  };   
  
  
  

  // hide all captions initially
  hideCaptions( $('#slider3 .panel') );
  
  
  
   
  $("li.menuitem").mouseover(function() {
    $(this).css("color","black");
  }
  )
  $("li.menuitem").mouseleave(function() {
    $(this).css("color","#e01a21");
  }
  )
  
  // Startparams  
  $("#menu-home").css("color","#000");
  $("#productheadline-klassik").show(500);
  $("#productheadline-modern, #productheadline-landhaus").hide(500);
  $("#klassik p").animate({"color": "#000000" }, 500);
  $("#klassik h1").animate({"color": "#e01a21" }, 500);
  $("#modern *,#landhaus *").animate({"color": "#aaaaaa" }, 500);
  
  $("#klassik a").mouseover(function() {
     highlight(1); 
   });
  
   $("#modern a").mouseover(function() {
     highlight(2); 
   });

   $("#landhaus a").mouseover(function() {
     highlight(3); 
   }); 
  
   $("#modern").click(function() {
    window.location.href = "kuechen/modern.html";
   });
   $("#klassik").click(function() {
    window.location.href = "kuechen/klassik.html";
   });
   $("#landhaus").click(function() {
    window.location.href = "kuechen/landhaus.html";
   });
   
   /* 20 pro */
   
   $("#pro20").click(function() {
    window.location.href = "aktuelles/news-anzeige/news/wir-feiern-20-jahre-kuechenstudio-stuhldreier.html";
   });
   
   
   
   /* Prozentinfo */
   var bpinfo=false;
   $("#prozentinfolabel, #prozentinfo").click(function() {
    if(!bpinfo){
     $("#prozentinfo").animate({"width": "500" }, 500);
     bpinfo=true;
    } else {
      $("#prozentinfo").animate({"width": "0" }, 500);
      $("#prozentinfolabel").delay(1000).fadeOut(500);
      bpinfo=false;
    }
   });
   $("#prozentinfolabel").delay(3000).fadeIn(500); 
     
  
});