function ProductChangerSmall(){
	var widthOfOneChild = 0;
	var currentActive = 0;
	
    this.init = function(){
    	(function($) {
    		if($('#productChangerSmall').length > 0) {	
	    		var width = 0;
	    		var widthScrollBar = 0;
	    		
	    		if($('#allProducts .twoProducts')[0]) {
	    			widthOfOneChild = $('#allProducts .twoProducts')[0].clientWidth;
	    		}
	    		
	    		//set left Scrollbar Arrow
	    		$('#scrollBar').prepend("<div id='arrowLeft' onclick='productChangerSmall.showLast();' class='arrow'></div>");
	    		$('#arrowLeft').css('visibility', 'hidden');
	    		
	    		
	    		//set dots for Scrollbar and get width for allProducts
	    		$('#allProducts .twoProducts').each(function(k, v) { 
	    			width += v.clientWidth;
	    			if(k == 0) {
	    				$('#scrollBar').append("<div class='dot active' onclick='productChangerSmall.show("+k+")' id='dot_"+k+"'></div>");
	    			}
	    			else {
	    				$('#scrollBar').append("<div class='dot' onclick='productChangerSmall.show("+k+")' id='dot_"+k+"'></div>");
	    			}
	    		});
	    		$('#allProducts').width(width);
	    		
	    		
	    		//set right Scrollbar Arrow
	    		$('#scrollBar').append("<div id='arrowRight' onclick='productChangerSmall.showNext();' class='arrow'></div>");
	    		$('#arrowRight').css('visibility', 'visible');
	    		$('#scrollBar').append("<div class='clear'></div>");
	    		
	    		
	    		//get scrollbar width
	    		$('#scrollBar .dot').each(function(k, v) { 
	    			widthScrollBar += $(v).outerWidth(true);
	    		});
	    		$('#scrollBar .arrow ').each(function(k, v) { 
	    			widthScrollBar += $(v).outerWidth(true);
	    		});
				$('#scrollBar').width(widthScrollBar);	
    		}
    		
    	})(jQuery);
    }
    
    this.show = function(k) {
    	//$('#allProducts').css( "margin-left", - k * widthOfOneChild ) ;
    	(function($) {
    		
    		
    		// show/hide left arrow
    		if(k>0) {
    			$('#arrowLeft').css('visibility', 'visible');
      	  	}
    		else {
    			$('#arrowLeft').css('visibility', 'hidden');
    		}
    		
    		
    		// show/hide right arrow
    		if(k < ($('#scrollBar .dot').length - 1)){
    			
    			$('#arrowRight').css('visibility', 'visible');
    		}
    		else {
    			$('#arrowRight').css('visibility', 'hidden');
    		}
    		
    		
    		
    	  //scroll animation
		  $('#allProducts').animate({
		    marginLeft: - k * widthOfOneChild
		  }, 500, function() {
			  $('#dot_'+currentActive).removeClass('active')
			  $('#dot_'+k).addClass('active');
			  currentActive = k;
			  
		    // Animation complete.
		  });
    	})(jQuery);
    	
    }
    
    
    this.showLast = function() {
    	(function($) {
    		//alert(currentActive);
    		
    		k = currentActive - 1
    		
    		// show/hide left arrow
    		if(k>0) {
    			$('#arrowLeft').css('visibility', 'visible');
      	  	}
    		else {
    			$('#arrowLeft').css('visibility', 'hidden');
    		}
    		
    		
    		// show/hide right arrow
    		if(k < ($('#scrollBar .dot').length - 1)){
    			$('#scrollBar').append("<div id='arrowRight' onclick='productChangerSmall.showNext();' class='arrow'></div>");
    			$('#arrowRight').css('visibility', 'visible');
    		}
    		else {
    			$('#arrowRight').css('visibility', 'hidden');
    		}
    		
    		
    		
    	  //scroll animation
  		  $('#allProducts').animate({
  		    marginLeft: - k * widthOfOneChild
  		  }, 500, function() {
  			  $('#dot_'+currentActive).removeClass('active')
  			  $('#dot_'+k).addClass('active');
  			  currentActive = k;
  			  
  		    // Animation complete.
  		  });

    	})(jQuery);
    }
    
    this.showNext = function() {
    	(function($) {
    		k = currentActive + 1
    		
    		// show/hide left arrow
    		if(k>0) {
    			$('#arrowLeft').css('visibility', 'visible');
      	  	}
    		else {
    			$('#arrowLeft').css('visibility', 'hidden');
    		}
    		
    		// show/hide right arrow
    		if(k < ($('#scrollBar .dot').length - 1)){
    		
    			$('#arrowRight').css('visibility', 'visible');
    		}
    		else {
    			$('#arrowRight').css('visibility', 'hidden');
    		}
    		
    	  //scroll animation
  		  $('#allProducts').animate({
  		    marginLeft: - k * widthOfOneChild
  		  }, 500, function() {
  			  $('#dot_'+currentActive).removeClass('active')
  			  $('#dot_'+k).addClass('active');
  			  currentActive = k;
  			  
  		    // Animation complete.
  		  });

    	})(jQuery);
    }
  
    
    var self = this;
}

var productChangerSmall = new ProductChangerSmall();