// JavaScript Document

$(document).ready(function () {
		
	    var a=0;
		
		var scrollPane = $('#slide_area');
		var scrollContent = $('#slide');
		
		//build slider
		var scrollbar = $("#drag_wrapper").slider({
			animate: true,
			min:0,
			max:84,
			
			change: function (e, ui) {
				 
				   
			var positionMath=Math.round(ui.value);
			
			
			
            },
			slide:function(e, ui){
				
				
				if(ui.value==0){
				scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	            step=1;
				}
				if(ui.value==17){
				scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
				step=2;
				}
				if(ui.value==37){
				scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
				step=3;
				}
				if(ui.value==54){
				scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
				}
				if(ui.value==68){
				scrollContent.animate({'margin-left': Math.round( 78 /84*( 991 - scrollContent.width()))},500);
				step=4;
				}
				if(ui.value>=84){
				scrollContent.animate({'margin-left': Math.round( 84 /84*( 991 - scrollContent.width()))},500);
				step=5;
				}
				
				

				
			var positionMath=Math.round(ui.value);
			//$("#trace").text(ui.value);
			
				 $("#drag").css("left",ui.value+"%");
		
			
			}
		});
		
		var handleHelper = scrollbar.find('.ui-slider-handle')
		.mousedown(function(){
							
			//scrollbar.width( handleHelper.width()+100 );
		})
		//.mouseup(function(){
			//scrollbar.width( '100%' );
		//})
		.wrap('<div class="ui-handle-helper-parent"></div>').parent();
       var step=1;
       $("#rightArrow").click(function(){
								   
		switch(step){	
		case 1:
	   a=1;	
	   //scrollbar.slider("value",17);
	   $("#drag").css("left","17%");
	    scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   break;
	   case 2:
	   a=1;	
	   //scrollbar.slider("value",37);
	   $("#drag").css("left","37%");
	    scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   break;
	   case 3:
	   a=1;	
	   //scrollbar.slider("value",54);
	   $("#drag").css("left","54%");
	    scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;
	   break;
	   case 4:
	   a=1;	
	   //scrollbar.slider("value",68);
	   $("#drag").css("left","68%");
	    scrollContent.animate({'margin-left': Math.round( 78 /84*( 991 - scrollContent.width()))},500);
	   step=5;
	   break;
	   case 5:
	   a=1;	
	   //scrollbar.slider("value",84);
	   $("#drag").css("left","84%");
	   scrollContent.animate({'margin-left': Math.round( 84 /84*( 991 - scrollContent.width()))},500);
	   step=6;
	   break;
	  }
	   });
	   
	   $("#leftArrow").click(function(){
		
		switch(step){	
		case 1:
		a=1;	
	   //scrollbar.slider("value",0);
	   $("#drag").css("left","0%");
	   scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	   step=1;
	   break;
	   case 2:
	   a=1;	
	   //scrollbar.slider("value",0);
	   $("#drag").css("left","0%");
	   scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	   step=1;
	   break;
	   case 3:
	   a=1;	
	   //scrollbar.slider("value",17);
	   $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   break;
	   case 4:
	   a=1;	
	   //scrollbar.slider("value",37);
	   $("#drag").css("left","37%");
	   scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   break;
	   case 5:
	   a=1;	
	   //scrollbar.slider("value",54);
	   $("#drag").css("left","54%");
	   scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;
	   break;
	   case 6:
	   a=1;	
	   //scrollbar.slider("value",68);
	   $("#drag").css("left","68%");
	   step=5;
	   scrollContent.animate({'margin-left': Math.round( 78 /84*( 991 - scrollContent.width()))},500);
	   break;
	  }
	   });
	   
	   
	 $("#cat1").click(function(){
	 a=1;						   
     //scrollbar.slider("value",0);
	 $("#drag").css("left","0%");
	 scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	 step=1;
     });
	 $("#cat2").click(function(){
	 a=1;						   
     //scrollbar.slider("value",17);
	 $("#drag").css("left","17%");
	 scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	 step=2;
     });
	 $("#cat3").click(function(){
	 a=1;
    //scrollbar.slider("value",37);
	$("#drag").css("left","37%");
	 scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
     step=3;
	 });
	 $("#cat4").click(function(){
	 a=1;
     //scrollbar.slider("value",54);
	 $("#drag").css("left","54%");
	 scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
     step=4;
	 });
	 $("#cat5").click(function(){
	 a=1;
     //scrollbar.slider("value",68);
	 $("#drag").css("left","68%");
	 scrollContent.animate({'margin-left': Math.round( 78 /84*( 991 - scrollContent.width()))},500);
	 //$("#drag").css("left","638px");
     step=5;
	 }); 
	 $("#cat6").click(function(){
	 a=1;
     //scrollbar.slider("value",84);
	 $("#drag").css("left","84%");
	 scrollContent.animate({'margin-left': Math.round( 84 /84*( 991 - scrollContent.width()))},500);
     step=6;
	 });
	 
	 
	 $(".s3_p2_c1").mouseover(function(){
     $("#slide_pic3").addClass("s3_pic1");
     });
	 
	 $(".s3_p2_c1").mouseout(function(){
     $("#slide_pic3").removeClass("s3_pic1");
     });
	 
	 $(".s3_p2_c2").mouseover(function(){
     $("#slide_pic3").addClass("s3_pic2");
     });
	 
	 $(".s3_p2_c2").mouseout(function(){
     $("#slide_pic3").removeClass("s3_pic2");
     });
	 
	 $(".s3_p2_c3").mouseover(function(){
     $("#slide_pic3").addClass("s3_pic3");
     });
	 
	 $(".s3_p2_c3").mouseout(function(){
     $("#slide_pic3").removeClass("s3_pic3");
     });
	 
	 
	 $(".s2_p2_c1").mouseover(function(){
     $("#slide_pic2").addClass("s2_pic1");
     });
	 
	 $(".s2_p2_c1").mouseout(function(){
     $("#slide_pic2").removeClass("s2_pic1");
     });
	 
	 $(".s2_p2_c2").mouseover(function(){
     $("#slide_pic2").addClass("s2_pic2");
     });
	 
	 $(".s2_p2_c2").mouseout(function(){
     $("#slide_pic2").removeClass("s2_pic2");
     });
	 
	 $(".s2_p2_c3").mouseover(function(){
     $("#slide_pic2").addClass("s2_pic3");
     });
	 
	 $(".s2_p2_c3").mouseout(function(){
     $("#slide_pic2").removeClass("s2_pic3");
     });
	 
	 
	 
	 $(".s2_p4_c3").mouseover(function(){
     $("#slide_pic2").addClass("s2_pic5");
     });
	 
	 $(".s2_p4_c3").mouseout(function(){
     $("#slide_pic2").removeClass("s2_pic5");
     });
	 
	 
	  $(".s4_p2_c1").mouseover(function(){
     $("#slide_pic4").addClass("s4_pic1");
     });
	 
	 $(".s4_p2_c1").mouseout(function(){
     $("#slide_pic4").removeClass("s4_pic1");
     });
	 
	 $(".s4_p2_c2").mouseover(function(){
     $("#slide_pic4").addClass("s4_pic2");
     });
	 
	 $(".s4_p2_c2").mouseout(function(){
     $("#slide_pic4").removeClass("s4_pic2");
     });
	 
	 $(".s4_p2_c3").mouseover(function(){
     $("#slide_pic4").addClass("s4_pic3");
     });
	 
	 $(".s4_p2_c3").mouseout(function(){
     $("#slide_pic4").removeClass("s4_pic3");
     });
	 
	 
	 $(".s5_p2_c1").mouseover(function(){
     $("#slide_pic5").addClass("s5_pic1");
     });
	 
	 $(".s5_p2_c1").mouseout(function(){
     $("#slide_pic5").removeClass("s5_pic1");
     });
	 
	 $(".s5_p2_c2").mouseover(function(){
     $("#slide_pic5").addClass("s5_pic2");
     });
	 
	 $(".s5_p2_c2").mouseout(function(){
     $("#slide_pic5").removeClass("s5_pic2");
     });
	 
	 $(".s5_p2_c3").mouseover(function(){
     $("#slide_pic5").addClass("s5_pic3");
     });
	 
	 $(".s5_p2_c3").mouseout(function(){
     $("#slide_pic5").removeClass("s5_pic3");
     });
	 
	   var adr = location.pathname;
	  //$('#trace').text(adr);
	  
       switch(adr){	
	   case "/schmutzfangmatten":
	   $("#drag").css("left","0%");
	 scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	 step=1;
	   $("#slide_title1 a").css({'color': '#000000'});
	   break;
	   case "/schmutzfangmatten/standardmatten-werbe--und-dekormatten":
	   $("#drag").css("left","0%");
	 scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	 step=1;
	   $("#slide_title1 a").css({'color': '#000000'});
	   break;
	   case "/schmutzfangmatten/konfigurator-angebot-anfordern":
	   $("#drag").css("left","0%");
	 scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	 step=1;
	   $("#slide_title1 a").css({'color': '#000000'});
	   ;
	   break;
	   case "/schmutzfangmatten/test-und-rent-einmalig-einen-monat-testen":
	   $("#drag").css("left","0%");
	 scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	 step=1;
	   $("#slide_title1 a").css({'color': '#000000'});
	   
	   break;
	   case "/schmutzfangmatten/anwendungsbeispiele":
	   $("#drag").css("left","0%");
	 scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	 step=1;
	   $("#slide_title1 a").css({'color': '#000000'});
	   
	   break;
	   case "/ihre-anfrage-(status)":
	   $("#drag").css("left","0%");
	 scrollContent.animate({'margin-left': Math.round( 0 /84*( 991 - scrollContent.width()))},500);
	 step=1;
	   $("#slide_title1 a").css({'color': '#000000'});
	  
	   break;
	   case "/stoffhandtuchspender":
	  $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   $("#slide_title2 a").css({'color': '#000000'});
	   step=2;
	   break;
	   case "/stoffhandtuchspender/paradise-dry-slim":
	   $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   $("#slide_title2 a").css({'color': '#000000'});
	   step=2;
	   break;
	   case "/stoffhandtuchspender/basic":
	   $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   step=2;
	   break;
	   case "/stoffhandtuchspender/angebot-anfordern":
	   $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   $("#slide_title2 a").css({'color': '#000000'});
	   step=2;
	   break;
	   case "/stoffhandtuchspender/test-und-rent-einmalig-einen-monat-testen":
	   $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   $("#slide_title2 a").css({'color': '#000000'});
	   step=2;
	   break;
	   case "/stoffhandtuchspender/anwendungsbeispiele":
	   $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   $("#slide_title2 a").css({'color': '#000000'});
	   step=2;
	   break;
	   case "/stoffhandtuchspender/anwendungsbeispiele":
	   $("#drag").css("left","17%");
	   scrollContent.animate({'margin-left': Math.round( 30 /84*( 991 - scrollContent.width()))},500);
	   step=2;
	   $("#slide_title2 a").css({'color': '#000000'});
	   step=2;
	   break;
	   case "/papierhandtuchspender":
	   $("#drag").css("left","37%");
	    scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   $("#slide_title3 a").css({'color': '#000000'});
	   step=3;
	   break;
	   case "/papierhandtuchspender/paradise-paperroll":
	   $("#drag").css("left","37%");
	    scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   $("#slide_title3 a").css({'color': '#000000'});
	   step=3;
	   break;
	   case "/papierhandtuchspender/system-single-roll":
	   $("#drag").css("left","37%");
	    scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   $("#slide_title3 a").css({'color': '#000000'});
	   step=3;
	   break;
	   case "/papierhandtuchspender/system-handtuchrolle":
	   $("#drag").css("left","37%");
	    scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   $("#slide_title3 a").css({'color': '#000000'});
	   step=3;
	   break;
	   case "/papierhandtuchspender/angebot-anfordern":
	   $("#drag").css("left","37%");
	    scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   $("#slide_title3 a").css({'color': '#000000'});
	   step=3;
	   break;
	   case "/papierhandtuchspender/angebot-anfordern":
	   $("#drag").css("left","37%");
	    scrollContent.animate({'margin-left': Math.round( 50 /84*( 991 - scrollContent.width()))},500);
	   step=3;
	   $("#slide_title3 a").css({'color': '#000000'});
	   step=3;
	   break;
	   case "/seifenspender":
	  $("#drag").css("left","54%");
	   scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;
	   $("#slide_title4 a").css({'color': '#000000'});
	   step=4;
	   break;
	   case "/seifenspender":
	   $("#drag").css("left","54%");
	   scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;
	   $("#slide_title4 a").css({'color': '#000000'});
	   step=4;
	   break;
	   case "/seifenspender/paradise-cream-slim":
	   $("#drag").css("left","54%");
	   scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;;
	   $("#slide_title4 a").css({'color': '#000000'});
	   step=4;
	   break;
	   case "/seifenspender/paradise-foam-slim":
	   $("#drag").css("left","54%");
	   scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;
	   $("#slide_title4 a").css({'color': '#000000'});
	   step=4;
	   break;
	   case "/seifenspender/liquid-grey":
	   $("#drag").css("left","54%");
	   scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;
	   $("#slide_title4 a").css({'color': '#000000'});
	   step=4;
	   break;
	   case "/seifenspender/angebot-anfordern":
	   $("#drag").css("left","54%");
	   scrollContent.animate({'margin-left': Math.round( 69 /84*( 991 - scrollContent.width()))},500);
	   step=4;
	   $("#slide_title4 a").css({'color': '#000000'});
	   step=4;
	   break;
	   case "/duftspender":
	   $("#drag").css("left","68%");
	 scrollContent.animate({'margin-left': Math.round( 78 /84*( 991 - scrollContent.width()))},500);
	 
     step=5;
	   $("#drag").css("left","638px");
	   $("#slide_title5 a").css({'color': '#000000'});
	   step=5;
	   break;
	   case "/duftspender/paradise-air-control":
	   $("#drag").css("left","68%");
	 scrollContent.animate({'margin-left': Math.round( 78 /84*( 991 - scrollContent.width()))},500);
	 
     step=5;
	   $("#slide_title5 a").css({'color': '#000000'});
	   step=5;
	   break;
	   case "/duftspender/angebot-anfordern":
	    $("#drag").css("left","68%");
	 scrollContent.animate({'margin-left': Math.round( 78 /84*( 991 - scrollContent.width()))},500);
	 
     step=5;
	   $("#slide_title5 a").css({'color': '#000000'});
	   step=5;
	   break;
	   case "/damenhygiene-systeme":
	   $("#drag").css("left","84%");
	 scrollContent.animate({'margin-left': Math.round( 84 /84*( 991 - scrollContent.width()))},500);
     step=6;
	   $("#slide_title6 a").css({'color': '#000000'});
	   step=6;
	   break;
	   case "/damenhygiene-systeme/paradise-ladycare":
	   $("#drag").css("left","84%");
	 scrollContent.animate({'margin-left': Math.round( 84 /84*( 991 - scrollContent.width()))},500);
     step=6;
	   $("#slide_title6 a").css({'color': '#000000'});
	   step=6;
	   break;
	   case "/damenhygiene-systeme/angebot-anfordern":
	  $("#drag").css("left","84%");
	 scrollContent.animate({'margin-left': Math.round( 84 /84*( 991 - scrollContent.width()))},500);
     step=6;
	   $("#slide_title6 a").css({'color': '#000000'});
	   step=6;
	   break;
	  }	

/*
$(function(){
	$.extend($.fn.disableTextSelect = function() {
		return this.each(function(){
			if($.browser.mozilla){//Firefox
				$(this).css('MozUserSelect','none');
			}else if($.browser.msie){//IE
				$(this).bind('selectstart',function(){return false;});
			}else{//Opera, etc.
				$(this).mousedown(function(){return false;});
			}
		});
	});
	$('div').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});
	*/ 
	   
});