var scrollcount=0;
var scrolldiv_scrolltimer = new Array();  
var scrolldiv_heightlimit = new Array();    
var scrolldiv_element = new Array();   


function scrolldiv_scroll(scrollelement, scrollindex, direction,bsingle)
{

//alert($("#scrolldiv_divparent"+scrollindex)[0].scrollHeight+','+scrolldiv_heightlimit[scrollindex]);
//alert($("#scrolldiv_divparent"+scrollindex)[0].scrollHeight <= scrolldiv_heightlimit[scrollindex]);
    var ctop =parseInt(scrollelement.css('top'), 10);        

        if(direction>0 && ctop>=0 )
        {
            $("#scrolldiv_uparrow"+scrollindex).css("display","none"); 
        }
        else if(direction<0 && $("#scrolldiv_divparent"+scrollindex)[0].scrollHeight <= scrolldiv_heightlimit[scrollindex])
        {   
            $("#scrolldiv_downarrow"+scrollindex).css("display","none"); 
            
        }
        else
        {
            if(ctop+direction < 0)
                $("#scrolldiv_uparrow"+scrollindex).css("display","block"); 
            else
                $("#scrolldiv_uparrow"+scrollindex).css("display","none"); 
                
            scrollelement.css({top: (ctop+direction)+'px'});
            
            if($("#scrolldiv_divparent"+scrollindex)[0].scrollHeight > scrolldiv_heightlimit[scrollindex])
                $("#scrolldiv_downarrow"+scrollindex).css("display","block"); 
            else
                $("#scrolldiv_downarrow"+scrollindex).css("display","none"); 
            
            if(!bsingle)
                scrolldiv_scrolltimer[scrollindex] = setTimeout(function(){scrolldiv_scroll(scrollelement, scrollindex, direction,false);},100);
        }    
} 

function scrolldiv_autoscroll(scrollindex, elemtoshow)
{
    var ctop =parseInt(scrolldiv_element[scrollindex].css('top'), 10);        
    /*alert(elemtoshow.position().top);
    if(elemtoshow.position().top + elemtoshow.height() > scrolldiv_heightlimit[scrollindex])
    {
        var gap = scrolldiv_heightlimit[scrollindex] - (elemtoshow.position().top + elemtoshow.height()) ;
        scrolldiv_scroll(scrolldiv_element[scrollindex] , scrollindex, gap*-1, scrolldiv_heightlimit[scrollindex]);
    }
    else
    {
       if(elemtoshow.position().top < 0)
        {
            scrolldiv_scroll(scrolldiv_element[scrollindex] , scrollindex, elemtoshow.position().top *-1, scrolldiv_heightlimit[scrollindex]);
        }
        
    }*/
    
    if(ctop*-1+scrolldiv_heightlimit[scrollindex] < elemtoshow.position().top + elemtoshow.height())
    {
        var gap = elemtoshow.position().top + elemtoshow.height() - (ctop*-1+scrolldiv_heightlimit[scrollindex] );
        scrolldiv_scroll(scrolldiv_element[scrollindex] , scrollindex, gap*-1, scrolldiv_heightlimit[scrollindex],true);
    }
    else
    {
        if(elemtoshow.position().top < ctop*-1)
        {
            scrolldiv_scroll(scrolldiv_element[scrollindex] , scrollindex, -1*(elemtoshow.position().top+ctop), scrolldiv_heightlimit[scrollindex],true);
        }
    }
}

(function( $ ){
  $.fn.MakeScrolldiv = function(height, uparrowurl,downarrowurl) {
        scrollcount++;       
        var scrollindex= scrollcount;
        var thiselem = $(this);               
        var heightlimit = parseInt($(this).css('height'), 10);  
        scrolldiv_heightlimit[scrollindex]=heightlimit;  
        scrolldiv_element[scrollindex] = thiselem;
        
        $(this).wrap('<div style="width:100%" />');
        $(this).parent().prepend('<div style=" width: 100%; text-align: center; cursor: pointer; height:'+height+'px"><img id="scrolldiv_uparrow'+scrollindex+'" style="vertical-align: middle; margin-left: auto; margin-right: auto" src="'+uparrowurl+'"/></div>');
        $(this).parent().append('<div style="width: 100%; text-align: center; cursor: pointer; height:'+height+'px"><img id="scrolldiv_downarrow'+scrollindex+'" style="vertical-align: middle; margin-left: auto; margin-right: auto" src="'+downarrowurl+'"/></div>');
        $(this).css('position','relative');
        $(this).css('top','0px');
        //$(this).css('id','
        $(this).wrap('<div id="scrolldiv_divparent'+scrollindex+'" style="width:100%; overflow:hidden;" />');
        
         $("#scrolldiv_uparrow"+scrollindex).hide();         
         $("#scrolldiv_downarrow"+scrollindex).hover(function(){
                
               scrolldiv_scroll(thiselem,scrollindex, -5,false);             
            }, 
            function(){
                clearTimeout(scrolldiv_scrolltimer[scrollindex]);
            });
         $("#scrolldiv_uparrow"+scrollindex).hover(function(){ scrolldiv_scroll(thiselem,scrollindex, 5,false); }, function(){ clearTimeout(scrolldiv_scrolltimer[scrollindex]); });
        
        $(this).UpdateScrolldiv(scrollindex);
        return scrollindex;
};

  $.fn.UpdateScrolldiv = function(scrollindex) { 
   scrolldiv_scroll($(this),scrollindex, 0,true);
}; 

})( jQuery );