$.fn.slideTeaser = function() {
        
        // Elements
        var slider = $(this);
        var scrollContent = slider.find(".scrollContent .mask");
        var scrollBar = slider.find(".scrollBar");
        var scrollPane = slider.find('.scrollPane');
        var nextBtn = $(this).find(".nextBtn");
        var prevBtn = $(this).find(".prevBtn");
        
        // Vars
        var toggleNext = true;
        var togglePrev;
        var teaserBoxWidth = $(this).find(".teaserBox").first().width();
        var maxBoxes = slider.find(".scrollContent .mask").children().length;
        
        var scrollContentWidth = maxBoxes * teaserBoxWidth;
        
        var count = 0;
        
        slider.find(".scrollContent .mask").each(function() {
            $(this).css("width",scrollContentWidth);
        });
        
        //prevBtn.bind('click', prevTeaserBox);
        //nextBtn.bind('click', nextTeaserBox);
        
        
        function nextTeaserBox(object) {
            slider.find(".scrollContent .mask").animate({left: "-="+teaserBoxWidth+""},
                {
                    duration: 800, 
                    easing: "easeOut",
                    step: function(position) { slideScroller(position) }
                }
            );
            count += 1;
            //if (count == 1) { togglePrev = true };
            handleInteraction();
            return false;
        };
        
        function prevTeaserBox(object) {
            slider.find(".scrollContent .mask").animate({left: "+="+teaserBoxWidth+""},
                {
                    duration: 800, 
                    easing: "easeOut",
                    step: function(position) { slideScroller(position) }
                }
            );
            count -= 1;
            //if(count == 1) { toggleNext = true; }
            handleInteraction();
            return false;
        };
        
        function slideScroller(position) {
            var newPosition = position;
            //scrollPane.css("left", newPosition);
            
          var maxScroll = 507 - scrollContent.width();
          var scrollArea = scrollBar.width() - scrollPane.width();  
                           scrollPane.css({"left": newPosition * (scrollArea/maxScroll)});
        }
        
        function handleInteraction() {
            
            var nextIsActive = (nextBtn.css("cursor") == "pointer");
            var prevIsActive = (prevBtn.css("cursor") == "pointer");
            
            // next button
            if(count == 2) {
                nextBtn.unbind("click");
                nextBtn.css({"cursor":"default", "background-position":"-110px -374px"});
            } 
            if(count < 2 && !nextIsActive) {
                nextBtn.bind("click", nextTeaserBox);
                nextBtn.css({"cursor":"pointer", "background-position":"-43px -374px"});
            }
            
            // previous button
            if(count == 0) {
                prevBtn.unbind("click", prevTeaserBox);
                prevBtn.css({"cursor":"default", "background-position":"-77px -374px"});
            }
            
            if (count > 0 && !prevIsActive) {
                prevBtn.bind("click", prevTeaserBox);
                prevBtn.css({"cursor":"pointer", "background-position":"-10px -374px"});
            }
            
        }
        
        // Set >image effect
        $('<div class="effect">&nbsp;</div>').insertBefore(".teaserBox .img a");
        //$(".teaserBox").css("cursor","pointer");
        
        $(".teaserBox").bind("mouseenter",function() {
            if($.support.opacity) {
                $(this).find(".effect").stop(true, true).fadeOut(800);
            } else {
                $(this).find(".effect").hide();
            }
        }).bind("mouseleave",function() {
            if($.support.opacity) {
                $(this).find(".effect").stop(true, true).fadeIn(800);
            } else {
                $(this).find(".effect").show();
            }
        });
        
        handleInteraction();
        
        scrollPane.draggable({ 
            axis: 'x', 
            containment: 'parent',
            drag: handleSliderSlide,
            stop: reposition
        });
        
        function handleSliderSlide(event, ui) {
          var maxScroll = 507 - scrollContent.width();
          var scrollArea = scrollBar.width() - scrollPane.width();  
                           scrollContent.css({"left": ui.position.left * (maxScroll/scrollArea)});
        };
        
        function reposition() {
            var pos = parseInt(scrollContent.css("left"));
            var newPos = (pos % teaserBoxWidth);
            
            $("body").attr("test",newPos);
            
            if(newPos != -168) {
                
                if(newPos >= -84) {
                    slider.find(".scrollContent .mask").animate({left: "-="+newPos+""},
                        {
                            duration: 800, 
                            easing: "easeOut",
                            step: function(position) { slideScroller(position) }
                        }
                    );
                }
                
                if(newPos < -84) {
                    slider.find(".scrollContent .mask").animate({left: "-="+(newPos+168)+""},
                        {
                            duration: 800, 
                            easing: "easeOut",
                            step: function(position) { slideScroller(position) }
                        }
                    );
                }
            }
            
            count = -Math.round(pos / teaserBoxWidth);
            handleInteraction();
        
        }
        
    };
