$(document).ready(function(){

    $("#portfolio_table").each(function(){
        if(this.scrollHeight> 520)
        {
            $('#portfolio_table')
            .bind('mousewheel', function(event, delta) {
                if(delta < 0)
                {
                    newpos = ($(".handle").position().top) + 30;
                    if(newpos > 530 - ($(".handle").height()))
                        newpos = 530 - ($(".handle").height());
                }else
                {
                    newpos = ($(".handle").position().top) - 30;
                    if(newpos < 0)
                        newpos = 0;
                }

                $(".handle").css("top", newpos);
                var percentage = ((newpos*100)/$(".handle").parent().height())/100;
                $("#portfolio_table").scrollTop($("#portfolio_table").attr("scrollHeight")*percentage);
                return false;
            });

            $(this).parent().parent().prepend("<div class='scroll_vert height_350'><div class='handle hide'></div></div><div id='arrow'><img class='arrow_butt' src='/images/arrow.jpg' alt='arrow'/></div>");
            $(".handle").css("height",(480*((480*100)/this.scrollHeight)/100));
            $('.handle').draggable({ axis: 'y', containment: 'parent', cursor: 'pointer', scroll: true, drag: function(event, ui){
                    var percentage = ((ui.position.top*100)/$(this).parent().height())/100;
                    $("#portfolio_table").scrollTop($("#portfolio_table").attr("scrollHeight")*percentage);
                }
             });
        }
    });
    


});