var scrollerOffest = 20
 $(document).ready(function(){
   $(".scroller").each(function(intIndex,htmlElement) {

      //var innerDiv = $(htmlElement).children()[0];
      var innerDiv = $(htmlElement).find(".scrollerContent")[0];
      if (htmlElement.clientHeight < innerDiv.offsetHeight)
      {
         $(htmlElement).find(".scrollerDown").each(function() {
           $(this).css("visibility", "visible");
         });
         
         $(htmlElement).find(".scrollerDown").click(function() {
            var marginTop = parseInt(innerDiv.style.marginTop)
            marginTop = isNaN(marginTop) ? 0 : marginTop
            marginTop = marginTop-(htmlElement.clientHeight-scrollerOffest)
            
            innerDiv.style.marginTop = marginTop + "px"
            
            if (Math.abs(marginTop-htmlElement.clientHeight) > innerDiv.offsetHeight)
            {
               $(this).css("visibility", "hidden");
            }
            if (Math.abs(marginTop)>0)
            {
               $(htmlElement).find(".scrollerUp").css("visibility", "visible");
            }
            
         });
         $(htmlElement).find(".scrollerUp").click(function() {
            var marginTop = parseInt(innerDiv.style.marginTop)
            marginTop = isNaN(marginTop) ? 0 : marginTop
            marginTop = marginTop+(htmlElement.clientHeight-scrollerOffest)
            innerDiv.style.marginTop = marginTop + "px"
            
            if (Math.abs(marginTop-htmlElement.clientHeight) < innerDiv.offsetHeight)
            {
               $(htmlElement).find(".scrollerDown").css("visibility", "visible");
            }
            if (marginTop == 0)
            {
               $(this).css("visibility", "hidden");
            }
         });         
      }
   });
 });