function vScroll( scrollname, div_name, speed  )
{
    /*
        Before creating the object Ensure that window.document.getElementById is supported.
        if not...don't do anything
    */

    if( !window.document.getElementById )
    {
        return;
    } //-- ends if statement

    this.control_width = "14";
    this.up_height = "14";
    this.down_height = "14";
    this.track_width = "0";
    this.track_margin_left = "6";
    this.track_background_color = "#cccccc";


    // Member Variable declarations
    this.div_name = div_name;
    this.name = scrollname;
    this.scrollCursor = 0;
    this.speed = speed;
    this.timeoutID = 0;
    this.div_obj = null;
    this.up_name = "scroll_up" + this.name;
    this.dn_name = "scroll_down" + this.name;
    // Ends member variable declarations


    var is_opera = ( window.navigator.userAgent.toLowerCase().indexOf( "opera" ) != -1 );
    var is_ie = ( window.navigator.userAgent.toLowerCase().indexOf( "msie" ) != -1 ) && !is_opera;

    /*
        Obtain a reference to element div_name
    */
    this.div_obj = document.getElementById( this.div_name );

    // check if div_obj has a reference to an element within the document
    if ( this.div_obj )
    {
        //this.div_obj = div_obj;
        this.div_obj.style.overflow = 'hidden';
        this.orig_width = parseInt(this.div_obj.style.width);
        this.div_obj.style.width =  (this.orig_width - this.control_width)+"px";
        this.scroll_height = parseInt(this.div_obj.style.height);
        this.track_height = (this.scroll_height - this.up_height - this.down_height);
    } //-- ends if statement



    document.write('<div id="control_box' + this.name + '" style="height:'+this.scroll_height+'px;width:'+this.control_width+'px;float:left;">');
    document.write('    <div id="scroll_up' + this.name + '" style="height:'+this.up_height+'px;width:'+this.control_width+'px;cursor:pointer;">');
    document.write('<img src="images/up.gif" width="18px" height="18px" title="Scroll Up"/>');
       document.write('<p class="red_text_up">Up</p>');

    document.write('    </div>');
    document.write('    <div id="track' + this.name + '" style="height:'+this.track_height+'px;width:'+this.track_width+'px;margin-left:'+this.track_margin_left+'px;background-color:'+this.track_background_color+';"></div>');
    document.write('    <div id="scroll_down' + this.name + '" style="height:'+this.down_height+'px;width:'+this.control_width+'px;cursor:pointer;">');
     document.write('<p class="red_text_down">Down</p>');
    document.write('<img src="images/down.gif" width="18px" height="18px" title="Scroll Down"/>');
    document.write('    </div>');
    document.write('</div>');


    if( is_ie ) {
        if (this.div_obj.style.styleFloat != "left") {
                document.write('<div style="clear:both;"></div>');
        }
    } else {
        if (this.div_obj.style.cssFloat != "left") {
                document.write('<div style="clear:both;"></div>');
        }
    }


    if ( this.div_obj )
    {
        this.div_obj.style.styleFloat = 'left';
        this.div_obj.style.cssFloat = 'left';
    }




    /*
        Obtain a reference both this.up_name and this.dn_name from within the document
    */

    this.div_up_obj = document.getElementById( this.up_name );
    this.div_dn_obj = document.getElementById( this.dn_name );

    // check if both reference this.div_up_obj & this.div_up_obj
    // has successfully obtain references within the document
   if (this.div_up_obj && this.div_dn_obj)
    {
        this.div_up_obj.onmouseover = function() { eval( scrollname + ".scrollUp();" ); };
        this.div_up_obj.onmouseout = function() { eval( scrollname + ".stopScroll();" ); };

        this.div_up_obj.style.display = "block";

        this.div_dn_obj.onmouseover = function() { eval( scrollname + ".scrollDown();"); };
        this.div_dn_obj.onmouseout = function() { eval( scrollname + ".stopScroll();" ); };

        this.div_dn_obj.style.display = "block";
    } //-- ends if statement




    this.control_box = window.document.getElementById( "control_box" + this.id );

    // if this.control_box successfully references an element within the document, then show it .
    if( this.control_box )
    {
        this.control_box.style.display = "block";
    } //-- ends if statement


    /*
        onmouseout, clearTimeout so scrolling up or down stops.
    */
    this.stopScroll = function()
    {
        clearTimeout(this.timeoutID);
    } //-- ends object method stopScroll
    var is_opera = ( window.navigator.userAgent.toLowerCase().indexOf( "opera" ) != -1 );
    if( is_opera )
    {
        this.innerDiv = window.document.createElement( "DIV" );
        this.innerDiv.innerHTML = this.div_obj.innerHTML;
        this.div_obj.innerHTML = "";
        this.div_obj.appendChild( this.innerDiv );
    }
    this.scrollUp = function()
    {
        // check if browser is opera

        if( is_opera )
        {
            this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;

            this.innerDiv.style.marginTop = -this.scrollCursor + "px";
            this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
            // terminate scrolling
            if( this.scrollCursor == 0 )
            {    this.stopScroll(); }
        }
        else if (this.div_obj)
        {
            this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;
            this.div_obj.scrollTop = this.scrollCursor;
            this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
        } //-- ends if statement
    } //-- ends Object method scrollUp

    this.scrollDown = function()
    {
        if (this.div_obj)
        {
            this.scrollCursor += this.speed;
            this.div_obj.scrollTop = this.scrollCursor ;

            if( is_opera )
            {
                this.innerDiv.style.marginTop = -this.scrollCursor + "px";
                this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);
                var now = this.innerDiv.offsetHeight;
                /*
                    when we need to know when to stop scrollDown.
                    so we caclulate the difference between innerDiv offsetHeight, its margin, and offsetHeight of the div containing it.

                */
                var dif = parseInt( this.innerDiv.offsetHeight ) + parseInt( this.innerDiv.style.marginTop ) - parseInt( document.getElementById( this.div_name ).offsetHeight );

                // to esure that the whole body of the innerDiv is displayed,
                // we secroll until difference is -24. You can change this to suit your needs
                if( dif < -24 )
                {    this.stopScroll(); };

            } //-- ends if

            else if (this.div_obj.scrollTop == this.scrollCursor)
            {
                this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);

            } //-- ends if statement
            else
            {
                this.scrollCursor = this.div_obj.scrollTop;
            } //-- ends else
        } //-- ends outer if statement
    } //-- ends Object method scrollDown

    /*

    */
    this.resetScroll = function()
    {
        // check if this.div_obj points to an element in the document
        if (this.div_obj)
        {
            this.div_obj.scrollTop = 0;
            this.scrollCursor = 0;
        } //-- ends if statement
    } //-- ends Object method resetScroll

} //-- ends declaration of object vScroll